mirror of
https://github.com/Alee14/personal-website.git
synced 2025-01-22 19:02:12 -05:00
Markdown cb style; Fixed chrome-only issue; Format date on blog
This commit is contained in:
parent
162e303bee
commit
ed2c9768a0
5 changed files with 34 additions and 4 deletions
|
@ -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: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
8
src/util.ts
Normal 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 }
|
Loading…
Reference in a new issue