ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor: rename layouts for App & Blog

Browse source
This commit is contained in:
Ayo Ayco 2024-09-04 20:06:55 +02:00
parent aa271c8050
commit ebf7baa1ed
5 changed files with 20 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/layouts/Layout.astro → src/layouts/App.astro
View file

@ -51,17 +51,15 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
<body> <body>
<div id="app-wrapper"> <div id="app-wrapper">
<Jumbotron /> <Jumbotron />
<main> <slot />
<slot /> <div id="main-content">
<div id="main-content"> <div id="post-wrapper">
<div id="post-wrapper"> <slot name="post" />
<slot name="post" />
</div>
<div id="library-wrapper">
<slot name="library" />
</div>
</div> </div>
</main> <div id="library-wrapper">
<slot name="library" />
</div>
</div>
<slot name="footer" /> <slot name="footer" />
</div> </div>
</body> </body>
@ -75,11 +73,9 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
} }
#app-wrapper { #app-wrapper {
width: 100%; padding: 0 0.5em 10em;
max-width: 650px; display: grid;
padding: 0.5rem; gap: 1em;
padding-bottom: 5em;
&:has(#router-outlet #post) { &:has(#router-outlet #post) {
#jumbotron { #jumbotron {
@ -87,16 +83,6 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
} }
} }
} }
#main-content {
* {
margin: 1rem 0 0;
}
#post-wrapper {
padding: 0 1rem;
}
}
</style> </style>
<style is:global> <style is:global>
:root { :root {

0
src/layouts/BlogPost.astro → src/layouts/Blog.astro
View file

6
src/pages/404.astro
View file

@ -1,5 +1,5 @@
--- ---
import Layout from "../layouts/Layout.astro"; import App from "../layouts/App.astro";
import Library from "../components/Library.astro"; import Library from "../components/Library.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import SimpleAddressBar from "../components/SimpleAddressBar.astro"; import SimpleAddressBar from "../components/SimpleAddressBar.astro";
@ -8,7 +8,7 @@ export const prerender = false;
--- ---
<Layout article={null}> <App article={null}>
<SimpleAddressBar url='' /> <SimpleAddressBar url='' />
<div slot="post" id="router-outlet"> <div slot="post" id="router-outlet">
<h1> <h1>
@ -17,4 +17,4 @@ export const prerender = false;
</div> </div>
<Library slot="library" skipSave /> <Library slot="library" skipSave />
<Footer slot="footer" /> <Footer slot="footer" />
</Layout> </App>

6
src/pages/blog/[...slug].astro
View file

@ -1,6 +1,6 @@
--- ---
import { type CollectionEntry, getCollection } from 'astro:content'; import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro'; import Blog from '../../layouts/Blog.astro';
export async function getStaticPaths() { export async function getStaticPaths() {
const posts = await getCollection('blog'); const posts = await getCollection('blog');
@ -15,6 +15,6 @@ const post = Astro.props;
const { Content } = await post.render(); const { Content } = await post.render();
--- ---
<BlogPost {...post.data}> <Blog {...post.data}>
<Content /> <Content />
</BlogPost> </Blog>

6
src/pages/index.astro
View file

@ -2,7 +2,7 @@
import { ArticleData, extract } from "@extractus/article-extractor"; import { ArticleData, extract } from "@extractus/article-extractor";
import SimpleAddressBar from "../components/SimpleAddressBar.astro"; import SimpleAddressBar from "../components/SimpleAddressBar.astro";
import Post from "../components/Post.astro"; import Post from "../components/Post.astro";
import Layout from "../layouts/Layout.astro"; import App from "../layouts/App.astro";
import Library from "../components/Library.astro"; import Library from "../components/Library.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
@ -23,11 +23,11 @@ if (url)
} }
--- ---
<Layout article={article}> <App article={article}>
<SimpleAddressBar url={url} /> <SimpleAddressBar url={url} />
<div slot="post" id="router-outlet"> <div slot="post" id="router-outlet">
<Post article={article} /> <Post article={article} />
</div> </div>
<Library slot="library" skipSave={article === null} /> <Library slot="library" skipSave={article === null} />
<Footer slot="footer" /> <Footer slot="footer" />
</Layout> </App>