diff options
Diffstat (limited to 'apps/website/src/layouts')
| -rw-r--r-- | apps/website/src/layouts/BlogPost.astro | 35 | ||||
| -rw-r--r-- | apps/website/src/layouts/Layout.astro | 48 |
2 files changed, 62 insertions, 21 deletions
diff --git a/apps/website/src/layouts/BlogPost.astro b/apps/website/src/layouts/BlogPost.astro new file mode 100644 index 0000000..188aae1 --- /dev/null +++ b/apps/website/src/layouts/BlogPost.astro @@ -0,0 +1,35 @@ +--- +import FormattedDate from '@components/base/FormattedDate.astro'; +import '@styles/blog.css'; +import type { CollectionEntry } from 'astro:content'; +import Layout from './Layout.astro'; + +type Props = CollectionEntry<'blog'>['data']; + +const { title, description, pubDate, updatedDate, heroImage } = Astro.props; +--- + +<Layout title={title} description={description}> + <article> + <div class="hero-image"> + {heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image"/>} + </div> + <div class="prose"> + <div class="title"> + <div class="date"> + <FormattedDate date={pubDate}/> + { + updatedDate && ( + <div class="last-updated-on"> + Last updated on <FormattedDate date={updatedDate}/> + </div> + ) + } + </div> + <h1>{title}</h1> + <hr/> + </div> + <slot/> + </div> + </article> +</Layout> diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index 298071d..f157e73 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -1,41 +1,47 @@ --- -import "../styles/global.css"; -import Navbar from "../components/base/Navbar.astro"; -import Favicon from "/media/polyfrost/minimal_bg.svg?url"; -import Footer from "@components/base/Footer.astro"; +import Footer from '@components/base/Footer.astro'; +import Favicon from '/media/polyfrost/minimal_bg.svg?url'; +import Navbar from '../components/base/navbar/Navbar.astro'; +import '../styles/global.css'; interface Props { - title?: string; - favicon?: string; + title?: string + description?: string + favicon?: string } const { - title = 'Polyfrost', - favicon = Favicon + title = 'Polyfrost', + description = 'Official website for Polyfrost.', + favicon = Favicon, } = Astro.props; --- <!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <meta name="description" content="Official website for Polyfrost." /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/svg+xml" href={favicon} /> - <meta name="generator" content={Astro.generator} /> + <meta charset="UTF-8"/> + <meta name="description" content={description}/> + <meta name="viewport" content="width=device-width"/> + <link rel="icon" type="image/svg+xml" href={favicon}/> + <meta name="generator" content={Astro.generator}/> - <link rel="preconnect" href="https://fonts.googleapis.com"> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> + <link rel="preconnect" href="https://fonts.googleapis.com"/> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> + <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> + <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/> <title>{title}</title> </head> - <body class="bg-gray-50"> - <Navbar /> - <main class="min-h-screen h-auto"> - <slot /> + <body class="bg-gray-50 overflow-x-hidden"> + + <Navbar /> + + <main class="min-h-screen h-auto flex flex-col gap-40" > + <slot/> + <Footer /> </main> - <Footer /> + </body> </html> |