diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-01-24 22:50:02 -0500 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-01-24 23:17:14 -0500 |
| commit | 5fab0381b308eb5a1c837ffdd5e0ddd757e769d3 (patch) | |
| tree | 2a08add3e122f2d1fc91d30908e37a7df46ceaa8 /src/layouts | |
| parent | 2c37ad34e91893596547060e0ab6bd320ef31bde (diff) | |
| download | personal-website-5fab0381b308eb5a1c837ffdd5e0ddd757e769d3.tar.gz personal-website-5fab0381b308eb5a1c837ffdd5e0ddd757e769d3.tar.bz2 personal-website-5fab0381b308eb5a1c837ffdd5e0ddd757e769d3.zip | |
Starting to work on blog
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/BlogPost.astro | 50 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 17 | ||||
| -rw-r--r-- | src/layouts/PageMarkdown.astro | 8 |
3 files changed, 68 insertions, 7 deletions
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro new file mode 100644 index 0000000..60baee6 --- /dev/null +++ b/src/layouts/BlogPost.astro @@ -0,0 +1,50 @@ +--- +import Layout from './Default.astro'; +const { title, description } = Astro.props; +--- + +<Layout title=`${title} - Andrew Lee` description={description}> + <header> + <h1 class="header-text">{title}</h1> + <h2 class="header-text">{description}</h2> + </header> + <div class="container"> + <main> + <article> + <slot /> + </article> + </main> + </div> +</Layout> + +<style> + header { + display: flex; + flex-direction: column; + gap: 0.5em; + margin: 0; + text-align: center; + padding: 0 0 1em; + } + + .header-text { + font-size: 2em; + margin: 0; + } + + h2.header-text { + font-size: 1.5em; + font-weight: 300; + } + + .container { + margin: 1em 10em 1em 10em; + } + + @media (max-width: 992px) { + .container { + margin: 10px 20px 10px 20px; + } + } + +</style> diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index cc05e25..185a807 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -4,7 +4,7 @@ interface Props { description: string; } -const { title, description } = Astro.props; +const { title = "Andrew Lee", description = "Andrew Lee Website" } = Astro.props; import { ViewTransitions, slide } from 'astro:transitions'; import Navbar from '../components/Navbar.vue'; --- @@ -13,17 +13,25 @@ import Navbar from '../components/Navbar.vue'; <html lang="en"> <head> <meta charset="UTF-8" /> - <meta name="title" content={title} /> - <meta name="description" content={description} /> <meta name="viewport" content="width=device-width" /> + + <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" /> <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=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + + <!-- Default Metadata --> + <meta name="title" content={title} /> + <meta name="description" content={description} /> + + <!-- Open Graph Metadata --> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> <meta property="og:image" content="/profile.png" /> - <meta name="theme-color" content="#0e8106"/> + <meta property="og:type" content="website" /> + + <meta name="theme-color" content="#1B291F"/> <meta name="generator" content={Astro.generator} /> <ViewTransitions /> <title>{title}</title> @@ -33,6 +41,7 @@ import Navbar from '../components/Navbar.vue'; <div transition:animate={slide({ duration: '0.2s' })}> <slot /> <footer> + <p>Made with {Astro.generator} and Hosted on Vercel</p> <p>Copyright © 2024 Andrew Lee</p> </footer> </div> diff --git a/src/layouts/PageMarkdown.astro b/src/layouts/PageMarkdown.astro index 1250dd5..f6e76ab 100644 --- a/src/layouts/PageMarkdown.astro +++ b/src/layouts/PageMarkdown.astro @@ -9,9 +9,11 @@ const { frontmatter } = Astro.props; <h2 class="header-text">{frontmatter.description}</h2> </header> <div class="container"> - <article> - <slot /> - </article> + <main> + <article> + <slot /> + </article> + </main> </div> </Layout> |