diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/BlogPost.astro | 3 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 8 | ||||
| -rw-r--r-- | src/pages/blog/[...slug].astro | 3 | ||||
| -rw-r--r-- | src/util.ts | 8 |
4 files changed, 19 insertions, 3 deletions
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 60baee6..15b3cfd 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -1,12 +1,13 @@ --- import Layout from './Default.astro'; -const { title, description } = Astro.props; +const { title, description, date } = Astro.props; --- <Layout title=`${title} - Andrew Lee` description={description}> <header> <h1 class="header-text">{title}</h1> <h2 class="header-text">{description}</h2> + <small>{date}</small> </header> <div class="container"> <main> diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index b2e383b..d3b7548 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -38,7 +38,7 @@ import Navbar from '../components/Navbar.vue'; </head> <body> <Navbar client:load /> - <div transition:name="initial"> + <div transition:animate="fade"> <slot /> <footer> <p>Made with {Astro.generator} and Hosted on Vercel</p> @@ -56,6 +56,12 @@ import Navbar from '../components/Navbar.vue'; color: #FFFFFF; } + @media screen and (-webkit-min-device-pixel-ratio:0) { + html { + scrollbar-gutter: stable; + } + } + ul { padding-left: 20px; font-size: 1.1em; diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 7db75bb..de4efb6 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -1,6 +1,7 @@ --- import Page from '../../layouts/BlogPost.astro'; import { getEntry } from 'astro:content'; +import { formatDate } from "../../util"; const { slug } = Astro.params; if (slug === undefined) { @@ -15,7 +16,7 @@ if(entry === undefined) { const { Content } = await entry.render(); --- -<Page title={entry.data.title} description={entry.data.description}> +<Page title={entry.data.title} description={entry.data.description} date={formatDate(entry.data.date)}> <main> <Content /> </main> diff --git a/src/util.ts b/src/util.ts new file mode 100644 index 0000000..f7f9018 --- /dev/null +++ b/src/util.ts @@ -0,0 +1,8 @@ +// Format date to a string +function formatDate(date: Date): string { + const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }; + + return new Date(date).toLocaleDateString(undefined, options); +} + +export { formatDate } |