diff options
| -rw-r--r-- | astro.config.mjs | 16 | ||||
| -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 |
5 files changed, 34 insertions, 4 deletions
diff --git a/astro.config.mjs b/astro.config.mjs index d2dbc06..e7e5cf0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -12,5 +12,19 @@ export default defineConfig({ adapter: vercel(), image: { service: passthroughImageService(), - } + }, + markdown: { + shikiConfig: { + // Choose from Shiki's built-in themes (or add your own) + // https://github.com/shikijs/shiki/blob/main/docs/themes.md + theme: 'dracula', + // Alternatively, provide multiple themes + // https://shikiji.netlify.app/guide/dual-themes#light-dark-dual-themes + // Enable word wrap to prevent horizontal scrolling + wrap: true, + // Add custom transformers: https://shikiji.netlify.app/guide/transformers + // Find common transformers: https://shikiji.netlify.app/packages/transformers + transformers: [], + }, + }, }); 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 } |