layout term minimum usage, some refactorings

CHANGELOG.txt

@@ -1,6 +1,7 @@
 [0.6.0]
 [+] hybrid routing ssr/spa
-[+] layout pages
+[+] 'expo' pages
+[-] layout term usage with an exception
 [-] nanostores
 [+] inbox
 [+] css modules

src/components/Pages/AllAuthorsPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { AllAuthorsView } from '../Views/AllAuthors'
 import type { PageProps } from '../types'
 import { createSignal, onMount, Show } from 'solid-js'
@@ -18,11 +18,11 @@ export const AllAuthorsPage = (props: PageProps) => {
   })
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
         <AllAuthorsView authors={props.allAuthors} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/AllTopicsPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { AllTopicsView } from '../Views/AllTopics'
 import type { PageProps } from '../types'
 import { createSignal, onMount, Show } from 'solid-js'
@@ -18,11 +18,11 @@ export const AllTopicsPage = (props: PageProps) => {
   })
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
         <AllTopicsView topics={props.allTopics} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/ArticlePage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { ArticleView } from '../Views/Article'
 import type { PageProps } from '../types'
 import { loadArticle, useArticlesStore } from '../../stores/zine/articles'
@@ -37,11 +37,11 @@ export const ArticlePage = (props: PageProps) => {
   })
 
   return (
-    <MainWrap headerTitle={article()?.title || ''}>
+    <PageWrap headerTitle={article()?.title || ''}>
       <Show when={Boolean(article())} fallback={<Loading />}>
         <ArticleView article={article()} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/AuthorPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../Views/Author'
 import type { PageProps } from '../types'
 import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
@@ -8,7 +8,7 @@ import { loadAuthor } from '../../stores/zine/authors'
 import { Loading } from '../Loading'
 
 export const AuthorPage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.authorArticles) && Boolean(props.author))
+  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts) && Boolean(props.author))
 
   const slug = createMemo(() => {
     const { page: getPage } = useRouter()
@@ -36,11 +36,11 @@ export const AuthorPage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
-        <AuthorView author={props.author} authorArticles={props.authorArticles} authorSlug={slug()} />
+        <AuthorView author={props.author} authorArticles={props.shouts} authorSlug={slug()} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/ConnectPage.tsx

@@ -1,8 +1,8 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 
 export const ConnectPage = () => {
   return (
-    <MainWrap>
+    <PageWrap>
       <article class="container container--static-page">
         <div class="row">
           <h1 class="col-md-8 offset-md-2">
@@ -38,7 +38,7 @@ export const ConnectPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/CreatePage.tsx

@@ -1,16 +1,16 @@
 import { lazy, Suspense } from 'solid-js'
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { Loading } from '../Loading'
 
 const CreateView = lazy(() => import('../Views/Create'))
 
 export const CreatePage = () => {
   return (
-    <MainWrap>
+    <PageWrap>
       <Suspense fallback={<Loading />}>
         <CreateView />
       </Suspense>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/FeedPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { FeedView } from '../Views/Feed'
 import { onCleanup } from 'solid-js'
 import { resetSortedArticles } from '../../stores/zine/articles'
@@ -7,9 +7,9 @@ export const FeedPage = () => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainWrap>
+    <PageWrap>
       <FeedView />
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/FourOuFourPage.tsx

@@ -1,11 +1,11 @@
 import { FourOuFourView } from '../Views/FourOuFour'
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 
 export const FourOuFourPage = () => {
   return (
-    <MainWrap isHeaderFixed={false} hideFooter={true}>
+    <PageWrap isHeaderFixed={false} hideFooter={true}>
       <FourOuFourView />
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/HomePage.tsx

@@ -1,5 +1,5 @@
 import { HomeView, PRERENDERED_ARTICLES_COUNT } from '../Views/Home'
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import type { PageProps } from '../types'
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { loadPublishedArticles, resetSortedArticles } from '../../stores/zine/articles'
@@ -7,7 +7,7 @@ import { loadRandomTopics } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
 
 export const HomePage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.homeArticles) && Boolean(props.randomTopics))
+  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts) && Boolean(props.randomTopics))
 
   onMount(async () => {
     if (isLoaded()) {
@@ -23,11 +23,11 @@ export const HomePage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
-        <HomeView randomTopics={props.randomTopics} recentPublishedArticles={props.homeArticles || []} />
+        <HomeView randomTopics={props.randomTopics} recentPublishedArticles={props.shouts || []} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/LayoutShoutsPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { LayoutView } from '../Views/LayoutView'
 import type { PageProps } from '../types'
 import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
@@ -37,11 +37,11 @@ export const LayoutShoutsPage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
         <LayoutView layout={layout()} shouts={props.shouts} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/SearchPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { SearchView } from '../Views/Search'
 import type { PageProps } from '../types'
 import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
@@ -33,11 +33,11 @@ export const SearchPage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
         <SearchView results={props.searchResults || []} query={props.searchQuery} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/TopicPage.tsx

@@ -1,4 +1,4 @@
-import { MainWrap } from '../Wrap/MainWrap'
+import { PageWrap } from '../Wraps/PageWrap'
 import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../Views/Topic'
 import type { PageProps } from '../types'
 import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
@@ -8,7 +8,7 @@ import { loadTopic } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
 
 export const TopicPage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.authorArticles) && Boolean(props.author))
+  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts) && Boolean(props.author))
 
   const slug = createMemo(() => {
     const { page: getPage } = useRouter()
@@ -36,11 +36,11 @@ export const TopicPage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Show when={isLoaded()} fallback={<Loading />}>
-        <TopicView topic={props.topic} topicArticles={props.topicArticles} topicSlug={slug()} />
+        <TopicView topic={props.topic} topicArticles={props.shouts} topicSlug={slug()} />
       </Show>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/DiscussionRulesPage.tsx

@@ -1,10 +1,10 @@
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { t } from '../../../utils/intl'
 
 export const DiscussionRulesPage = () => {
   const title = t('Discussion rules')
   return (
-    <MainWrap>
+    <PageWrap>
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
@@ -114,7 +114,7 @@ export const DiscussionRulesPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/DogmaPage.tsx

@@ -1,10 +1,10 @@
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 
 // const title = t('Dogma')
 
 export const DogmaPage = () => {
   return (
-    <MainWrap>
+    <PageWrap>
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
@@ -53,7 +53,7 @@ export const DogmaPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/GuidePage.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from 'solid-js'
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { t } from '../../../utils/intl'
 import { Icon } from '../../Nav/Icon'
 
@@ -11,7 +11,7 @@ export const GuidePage = () => {
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
   return (
-    <MainWrap>
+    <PageWrap>
       {/*<Meta name="description" content={title} />*/}
       {/*<Meta name="keywords" content={t('Discours') + ',' + title} />*/}
       {/*<Meta property="og:title" content={title} />*/}
@@ -283,7 +283,7 @@ export const GuidePage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/HelpPage.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from 'solid-js'
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { Donate } from '../../Discours/Donate'
 import { Icon } from '../../Nav/Icon'
 
@@ -11,7 +11,7 @@ export const HelpPage = () => {
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
   return (
-    <MainWrap>
+    <PageWrap>
       {/*<Meta name="description">Здесь можно поддержать Дискурс материально.</Meta>*/}
       {/*<Meta name="keywords">Discours.io, помощь, благотворительность</Meta>*/}
 
@@ -161,7 +161,7 @@ export const HelpPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/ManifestPage.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from 'solid-js'
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { Modal } from '../../Nav/Modal'
 import { Feedback } from '../../Discours/Feedback'
 import Subscribe from '../../Discours/Subscribe'
@@ -14,7 +14,7 @@ export const ManifestPage = () => {
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
   return (
-    <MainWrap>
+    <PageWrap>
       <Modal name="feedback">
         <Feedback />
       </Modal>
@@ -191,7 +191,7 @@ export const ManifestPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/PartnersPage.tsx

@@ -1,11 +1,11 @@
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { t } from '../../../utils/intl'
 
 // const title = t('Partners')
 
 export const PartnersPage = () => {
   return (
-    <MainWrap>
+    <PageWrap>
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
@@ -13,7 +13,7 @@ export const PartnersPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/PrinciplesPage.tsx

@@ -1,10 +1,10 @@
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { t } from '../../../utils/intl'
 
 export const PrinciplesPage = () => {
   const title = t('Principles')
   return (
-    <MainWrap>
+    <PageWrap>
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
@@ -172,7 +172,7 @@ export const PrinciplesPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/ProjectsPage.tsx

@@ -1,11 +1,11 @@
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { t } from '../../../utils/intl'
 
 // title={t('Projects')}>
 
 export const ProjectsPage = () => {
   return (
-    <MainWrap>
+    <PageWrap>
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
@@ -13,7 +13,7 @@ export const ProjectsPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/TermsOfUsePage.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from 'solid-js'
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { Icon } from '../../Nav/Icon'
 
 // const title = t('Terms of use')
@@ -10,7 +10,7 @@ export const TermsOfUsePage = () => {
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
   return (
-    <MainWrap>
+    <PageWrap>
       {/*<Meta name="description" content={title} />*/}
       {/*<Meta name="keywords" content={`Discours.io, ${t('Terms of use')}, ${t('Terms of use', 'en')}`} />*/}
       {/*<Meta property="og:title" content={title} />*/}
@@ -274,7 +274,7 @@ export const TermsOfUsePage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Pages/about/ThanksPage.tsx

@@ -1,10 +1,10 @@
-import { MainWrap } from '../../Wrap/MainWrap'
+import { PageWrap } from '../../Wraps/PageWrap'
 import { t } from '../../../utils/intl'
 
 export const ThanksPage = () => {
   const title = t('Thank you')
   return (
-    <MainWrap>
+    <PageWrap>
       {/*<Meta name="description" content={title} />*/}
       {/*<Meta name="keywords" content={`Discours.io, ${title}, ${t('Thank you', 'en')}`} />*/}
       {/*<Meta property="og:title" content={title} />*/}
@@ -85,7 +85,7 @@ export const ThanksPage = () => {
           </div>
         </div>
       </article>
-    </MainWrap>
+    </PageWrap>
   )
 }
 

src/components/Views/LayoutView.tsx

@@ -71,16 +71,16 @@ export const LayoutView = (props: LayoutProps) => {
         <div class="col-md-8">
           <ul class="view-switcher">
             <li classList={{ selected: searchParams().layout === 'audio' }}>
-              <a href="/layout/audio">{t('Audio')}</a>
+              <a href="/expo/audio">{t('Audio')}</a>
             </li>
             <li classList={{ selected: searchParams().layout === 'video' }}>
-              <a href="/layout/video">{t('Video')}</a>
+              <a href="/expo/video">{t('Video')}</a>
             </li>
             <li classList={{ selected: searchParams().layout === 'artworks' }}>
-              <a href="/layout/artworks">{t('Artworks')}</a>
+              <a href="/expo/artworks">{t('Artworks')}</a>
             </li>
             <li classList={{ selected: searchParams().layout === 'literature' || !searchParams().layout }}>
-              <a href="/layout/literature">{t('Literature')}</a>
+              <a href="/expo/literature">{t('Literature')}</a>
             </li>
           </ul>
         </div>

src/components/Wraps/PageWrap.tsx

@@ -5,14 +5,14 @@ import { Footer } from '../Discours/Footer'
 import '../../styles/app.scss'
 import { Show } from 'solid-js'
 
-type MainWrapProps = {
+type PageWrapProps = {
   headerTitle?: string
   children: JSX.Element
   isHeaderFixed?: boolean
   hideFooter?: boolean
 }
 
-export const MainWrap = (props: MainWrapProps) => {
+export const PageWrap = (props: PageWrapProps) => {
   const isHeaderFixed = props.isHeaderFixed !== undefined ? props.isHeaderFixed : true
 
   return (

src/main.astro

@@ -1,7 +1,9 @@
 ---
-import { setLocale } from '../stores/ui';
+import { setLocale } from './stores/ui';
-import '../styles/app.scss'
+import './styles/app.scss'
-import { t } from '../utils/intl'
+import { t } from './utils/intl'
+
+// Setting locale for prerendered content here
 
 const lang = Astro.url.searchParams.get('lang') || 'ru'
 console.log('[layout] server locale is', lang)

src/pages/404.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { Root } from '../components/Root'
 import { initRouter } from '../stores/router'
 

src/pages/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../components/Root'
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'
 

src/pages/about/discussion-rules.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/dogma.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/guide.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/help.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/manifest.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/partners.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/principles.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/projects.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/terms-of-use.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/about/thanks.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { Root } from '../../components/Root'
 import { initRouter } from '../../stores/router'
 

src/pages/author/[slug]/index.astro

@@ -1,13 +1,13 @@
 ---
 import { Root } from '../../../components/Root'
-import Zine from '../../../layouts/zine.astro'
+import Zine from '../../../main.astro'
 import { apiClient } from '../../../utils/apiClient'
 import { initRouter } from '../../../stores/router'
 import { PRERENDERED_ARTICLES_COUNT } from '../../../components/Views/Author'
 
 const slug = Astro.params.slug.toString()
-const articles = await apiClient.getArticlesForAuthors({ authorSlugs: [slug], limit: PRERENDERED_ARTICLES_COUNT })
+const shouts = await apiClient.getArticlesForAuthors({ authorSlugs: [slug], limit: PRERENDERED_ARTICLES_COUNT })
-const author = articles[0].authors.find((a) => a.slug === slug)
+const author = shouts[0].authors.find((a) => a.slug === slug)
 
 const { pathname, search } = Astro.url
 initRouter(pathname, search)
@@ -16,5 +16,5 @@ Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate'
 ---
 
 <Zine>
-  <Root authorArticles={articles} author={author} client:load />
+  <Root shouts={shouts} author={author} client:load />
 </Zine>

src/pages/authors.astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../components/Root'
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'
 

src/pages/connect.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { Root } from '../components/Root'
 import { initRouter } from '../stores/router'
 

src/pages/create.astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../components/Root'
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { initRouter } from '../stores/router'
 
 const { pathname, search } = Astro.url

src/pages/expo/[...layout].astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../../components/Root'
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { apiClient } from '../../utils/apiClient'
 import { initRouter } from '../../stores/router'
 

src/pages/feed/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../../components/Root'
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { initRouter } from '../../stores/router'
 
 const { pathname, search } = Astro.url

src/pages/feed/settings.astro.bak

@@ -1,5 +1,5 @@
 ---
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { FeedSettings } from '../../components/Views/FeedSettings'
 
 import { initRouter } from '../../stores/router'

src/pages/inbox.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { Root } from '../components/Root'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { Root } from '../components/Root'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'
@@ -15,6 +15,6 @@ Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate'
 ---
 
 <Zine>
-  <Root randomTopics={randomTopics} homeArticles={articles} client:load />
+  <Root randomTopics={randomTopics} shouts={articles} client:load />
 </Zine>
 

src/pages/search.astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../components/Root'
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'
 

src/pages/topic/[slug].astro

@@ -1,12 +1,12 @@
 ---
 import { Root } from '../../components/Root'
-import Zine from '../../layouts/zine.astro'
+import Zine from '../../main.astro'
 import { apiClient } from '../../utils/apiClient'
 import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Topic'
 
 const slug = Astro.params.slug?.toString() || ''
-const articles = await apiClient.getArticlesForTopics({ topicSlugs: [slug], limit: PRERENDERED_ARTICLES_COUNT })
+const shouts = await apiClient.getArticlesForTopics({ topicSlugs: [slug], limit: PRERENDERED_ARTICLES_COUNT })
-const topic = articles[0].topics.find(({ slug: topicSlug }) => topicSlug === slug)
+const topic = shouts[0].topics.find(({ slug: topicSlug }) => topicSlug === slug)
 
 import { initRouter } from '../../stores/router'
 
@@ -17,5 +17,5 @@ Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate'
 ---
 
 <Zine>
-  <Root topicArticles={articles} topic={topic} client:load />
+  <Root shouts={shouts} topic={topic} client:load />
 </Zine>

src/pages/topics.astro

@@ -1,6 +1,6 @@
 ---
 import { Root } from '../components/Root'
-import Zine from '../layouts/zine.astro'
+import Zine from '../main.astro'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'