Markdown cb style; Fixed chrome-only issue; Format date on blog

This commit is contained in:
Andrew Lee 2024-01-25 20:09:56 -05:00
parent 162e303bee
commit ed2c9768a0
Signed by: andrew
SSH key fingerprint: SHA256:bbGg1DYG5CuKl2jo1DqzvUsaTeyvhM3tjCsej5lYMg4
5 changed files with 34 additions and 4 deletions

View file

@ -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: [],
},
},
});

View file

@ -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>

View file

@ -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;

View file

@ -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>

8
src/util.ts Normal file
View file

@ -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 }