diff options
| author | seth <[email protected]> | 2024-04-10 07:32:28 -0400 |
|---|---|---|
| committer | seth <[email protected]> | 2024-04-10 07:51:09 -0400 |
| commit | 1db44ec4133547e9cc2f351b56b1d59fafbc5002 (patch) | |
| tree | ce76ab4ffbeda7614faa85e543c7daf16a353fe2 /src | |
| parent | 4d93e97d6aa9442d91ad34df1819f10dc8f0ed9c (diff) | |
factor out components
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Footer.astro | 3 | ||||
| -rw-r--r-- | src/components/Gifs.astro | 20 | ||||
| -rw-r--r-- | src/components/Head.astro | 15 | ||||
| -rw-r--r-- | src/components/Nav.astro (renamed from src/components/NavBar.astro) | 12 | ||||
| -rw-r--r-- | src/layouts/Base.astro | 27 | ||||
| -rw-r--r-- | src/layouts/Index.astro | 19 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 4 |
7 files changed, 51 insertions, 49 deletions
diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..9a8a667 --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,3 @@ +<footer> + <a href="https://github.com/getchoo/website">source code</a> +</footer> diff --git a/src/components/Gifs.astro b/src/components/Gifs.astro deleted file mode 100644 index b82230e..0000000 --- a/src/components/Gifs.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import Picture from "astro/components/Picture.astro"; -import gifs from "@assets/gifs"; ---- - -<div id="gifs"> - { - gifs.map(({ image, alt }) => { - const img = <Picture src={image} alt={alt} formats={["gif"]} />; - - if (image.src.includes("steam")) { - return <a href="https://dnsense.pub/">{img}</a>; - } else if (image.src.includes("poweredbynix")) { - return <a href="https://github.com/sakecode">{img}</a>; - } else { - return img; - } - }) - } -</div> diff --git a/src/components/Head.astro b/src/components/Head.astro new file mode 100644 index 0000000..b7cabaf --- /dev/null +++ b/src/components/Head.astro @@ -0,0 +1,15 @@ +--- +import "@fontsource-variable/noto-sans"; +import "@fontsource/noto-sans-mono"; + +import "@styles/main.css"; + +const { title, description } = Astro.props; +--- +<head> + <meta charset="UTF-8" /> + <title>{title}</title> + <meta name="viewport" content="width=device-width,initial-scale=1" /> + <meta name="description" content={description} /> + <link rel="sitemap" href="/sitemap-index.xml" /> +</head> diff --git a/src/components/NavBar.astro b/src/components/Nav.astro index b7c0216..98f47ce 100644 --- a/src/components/NavBar.astro +++ b/src/components/Nav.astro @@ -13,8 +13,10 @@ const links: NavLink[] = [ ]; --- -<div id="nav_links"> - {links.map(({ name, url }) => <a href={url}>{name}</a>)} -</div> - -<hr /> +<nav> + <div id="nav_links"> + {links.map(({ name, url }) => <a href={url}>{name}</a>)} + </div> + + <hr /> +</nav> diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 6ec66c5..c60347c 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -1,37 +1,22 @@ --- -import "@fontsource-variable/noto-sans"; -import "@fontsource/noto-sans-mono"; - -import NavBar from "@components/NavBar.astro"; -import "@styles/main.css"; +import Footer from "@components/Footer.astro"; +import Head from "@components/Head.astro"; +import Nav from "@components/Nav.astro"; const { title, description } = Astro.props.frontmatter || Astro.props; --- <!doctype html> <html lang="en"> - <head> - <meta charset="UTF-8" /> - <title>{title}</title> - <meta name="viewport" content="width=device-width,initial-scale=1" /> - <meta name="description" content={description} /> - <link rel="sitemap" href="/sitemap-index.xml" /> - </head> - + <Head title={title} description={description} /> <body> <h1><b>getchoo's website 🚀</b></h1> <slot name="nav"> - <nav> - <slot name="extra_nav" /> - <NavBar /> - </nav> + <Nav /> </slot> <slot /> <slot name="footer"> - <footer> - <slot name="extra_footer" /> - <a href="https://github.com/getchoo/website">source code</a> - </footer> + <Footer /> </slot> </body> </html> diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro index b8e1945..cd7be22 100644 --- a/src/layouts/Index.astro +++ b/src/layouts/Index.astro @@ -1,11 +1,26 @@ --- import Base from "@layouts/Base.astro"; -import Gifs from "@components/Gifs.astro"; +import Picture from "astro/components/Picture.astro"; +import gifs from "@assets/gifs"; const { title, description } = Astro.props.frontmatter; --- <Base title={title} description={description}> <slot /> - <Gifs slot="extra_footer" /> + <div id="gifs"> + { + gifs.map(({ image, alt }) => { + const img = <Picture src={image} alt={alt} formats={["gif"]} />; + + if (image.src.includes("steam")) { + return <a href="https://dnsense.pub/">{img}</a>; + } else if (image.src.includes("poweredbynix")) { + return <a href="https://github.com/sakecode">{img}</a>; + } else { + return img; + } + }) + } + </div> </Base> diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 72512e2..e740d36 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -4,5 +4,7 @@ const { title, description } = Astro.props.frontmatter || Astro.props; --- <Base title={title} description={description}> - <slot /> + <div class="blogpost"> + <slot /> + </div> </Base> |