diff --git a/src/components/Footer.astro b/src/components/Footer.astro index af51d5f..0eabc38 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -90,7 +90,7 @@ const currentYear = new Date().getFullYear(); -
+

© {currentYear} All rights reserved. diff --git a/src/components/cards/BlogCard.astro b/src/components/cards/BlogCard.astro index 495b659..57d6529 100644 --- a/src/components/cards/BlogCard.astro +++ b/src/components/cards/BlogCard.astro @@ -5,6 +5,7 @@ import type { Post } from '@lib/directusTypes'; import Image from '@components/ui/images/Image.astro'; import { getDirectusImageURL } from '@lib/directusFunctions'; +import { formatDate } from '@support/time'; interface Props { post: Post; @@ -44,11 +45,7 @@ const { post } = Astro.props; class="translate-y-0.5 transition duration-300 group-hover:translate-x-1" />

- {new Date(post.published_date).toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - day: 'numeric', - })} + {formatDate(post.published_date)}

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 905667b..96d3334 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -11,7 +11,7 @@ import SocialShareButton from '@components/buttons/SocialShareButton.astro'; import BaseLayout from '@layouts/BaseLayout.astro'; import directus from '@lib/directus'; import { getDirectusImageURL } from '@lib/directusFunctions'; -import { formatDateTime } from '@support/time'; +import { formatDate } from '@support/time'; const post = Astro.props; @@ -31,7 +31,7 @@ const category: CollectionEntry<'categories'> = (await getCollection('categories const readingTime = getReadingTime(post.content); const highlighter = await createHighlighter({ - themes: ['github-light', 'github-dark', 'monokai'], + themes: ['github-light', 'github-dark'], langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'], }); @@ -68,9 +68,7 @@ const content = marked.parse(post.content); name: global.name, description: global.about, }, - image: [ - // post.data.banner, - ], + image: [], headline: post.title, datePublished: post.published_date, dateModified: post.updated_date, @@ -84,11 +82,11 @@ const content = marked.parse(post.content); }} > -
+
-
+
{post.image_alt} -
-
-

+
+
+

{post.title}

-
    +
    1. {category?.data?.title} - + + / +
      2. -
    2. - {formatDateTime(post.published_date)} - +
    3. + + {formatDate(post.published_date)} + + + / +
      4. -
    4. - {readingTime.minutes.toPrecision(1)} minutes to read +
    5. + + {readingTime.minutes.toPrecision(1)} minutes to read +
+
-
+
-
-
- { - post.tags.map((tag: string) => ( - - {tag} - - )) - } +
+
+ {post.tags.map((tag: string) => ( + + {tag} + + ))}
- +
diff --git a/src/pages/categories/[...slug].astro b/src/pages/categories/[...slug].astro index b0a8b44..4612fe7 100644 --- a/src/pages/categories/[...slug].astro +++ b/src/pages/categories/[...slug].astro @@ -4,11 +4,13 @@ import { readItems, readSingleton } from '@directus/sdk'; import type { Post } from '@lib/directusTypes'; -import BlogCard from '@components/cards/BlogCard.astro'; import HeaderSection from '@components/sections/HeaderSection.astro'; +import BlogCard from '@components/cards/BlogCard.astro'; import BaseLayout from '@layouts/BaseLayout.astro'; import directus from '@lib/directus'; +const { category } = Astro.props; + export async function getStaticPaths() { const categories = await getCollection('categories'); return categories.map((category) => ({ @@ -17,8 +19,6 @@ export async function getStaticPaths() { })); } -const { category } = Astro.props; - const global = await directus.request(readSingleton('site_global')); const posts = await directus.request( readItems('posts', { @@ -62,8 +62,8 @@ const categoriesPosts = posts btnURL="/categories" /> -
-
+
+
{categoriesPosts.map((b) => )} diff --git a/src/pages/categories/index.astro b/src/pages/categories/index.astro index 3b75994..d6fd9a6 100644 --- a/src/pages/categories/index.astro +++ b/src/pages/categories/index.astro @@ -1,10 +1,10 @@ --- import { readSingleton } from '@directus/sdk'; -import directus from '@lib/directus'; -import BaseLayout from '@layouts/BaseLayout.astro'; import HeroSection from '@components/sections/HeroSection.astro'; import CategorySection from '@components/sections/CategorySection.astro'; +import BaseLayout from '@layouts/BaseLayout.astro'; +import directus from '@lib/directus'; import categoryImg from '@images/autumn_bench.png'; diff --git a/src/styles/global.css b/src/styles/global.css index 9c91fe9..55436a1 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -9,8 +9,8 @@ /* https://tailwindcss.com/docs/dark-mode */ @custom-variant dark (&:where(.dark, .dark *)); -/* Custom colors */ @theme { + /* Custom colors */ --color-midnight: #0c354d; --color-ocean: #134e70; @@ -26,18 +26,24 @@ --color-gitea-primary: #609926; --color-gitea-secondary: #4c7a33; + /* Theme colors */ --color-main: light-dark(var(--color-steel), var(--color-bermuda)); --color-accent: light-dark(var(--color-bronze), var(--color-desert)); --color-active: light-dark(var(--color-orange-500), var(--color-orange-300)); + /* Text colors */ --color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200)); --color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400)); --color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400)); --color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200)); + /* Object colors */ --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700)); --color-background-accent: light-dark(color-mix(in srgb, var(--color-stone-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent)); + --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent)); + + --color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent)); } @layer base { diff --git a/src/styles/utilities.css b/src/styles/utilities.css index 08f7265..2f481b0 100644 --- a/src/styles/utilities.css +++ b/src/styles/utilities.css @@ -43,7 +43,7 @@ @utility button-bg-neutral { @apply transition-all duration-300 border border-neutral-100 dark:border-stone-500/20 - bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90 + bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90 } @utility button-bg-gitea { @@ -56,7 +56,7 @@ @apply transition-all duration-300 rounded-xl border border-neutral-100 dark:border-stone-500/20 - bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90 + bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90 shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg } diff --git a/src/support/time.ts b/src/support/time.ts index 441da0b..84a6ccd 100644 --- a/src/support/time.ts +++ b/src/support/time.ts @@ -17,21 +17,6 @@ const TimeAgoConfiguration: string[][] = [ ['%s years ago', 'in %s years'], ]; -function formatDate(date: Date): string { - const year = new Date(date).getFullYear(); - const month = String(new Date(date).getMonth() + 1).padStart(2, '0'); - const day = String(new Date(date).getDate()).padStart(2, '0'); - - return `${year}-${month}-${day}`; -} - -function formatDateTime(date: Date): string { - const hours = String(new Date(date).getHours()).padStart(2, '0'); - const minutes = String(new Date(date).getMinutes()).padStart(2, '0'); - - return `${formatDate(date)} ${hours}:${minutes}`; -} - function timeago(date?: Date): string { if (!date) { return 'today'; @@ -46,4 +31,12 @@ function timeago(date?: Date): string { return format(date, 'timeago'); } -export { formatDate, timeago, formatDateTime }; +function formatDate(date: Date): string { + return new Date(date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + }) +} + +export { formatDate, timeago };