chore: cleanup, shadcn

This commit is contained in:
enscribe 2024-09-10 14:24:09 -07:00
parent 230dca64ca
commit ea68d4f02f
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
38 changed files with 1073 additions and 1378 deletions

View file

@ -9,7 +9,7 @@ import { SITE } from '@consts'
<Layout title="404" description={SITE.DESCRIPTION}>
<Container>
<div class="mt-16 grid place-items-center gap-3">
<h4 class="text-2xl font-semibold text-black dark:text-white">
<h4 class="text-2xl font-semibold">
404: Page not found
</h4>
<span>

View file

@ -8,7 +8,7 @@ import { Image } from 'astro:assets'
<Layout title="About" description="About">
<Container>
<div class="space-y-10">
<div class="font-semibold text-black dark:text-white">About</div>
<div class="font-semibold">About</div>
<section class="not-prose flex flex-col gap-4 text-justify">
<p class="text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores porro
@ -26,7 +26,7 @@ import { Image } from 'astro:assets'
<div class="flex flex-col justify-center md:flex-row">
<div class="my-10 text-center">
<div
class="h-[250px] w-[350px] -rotate-6 overflow-hidden rounded-xl bg-neutral-300 object-cover"
class="h-[250px] w-[350px] -rotate-6 overflow-hidden rounded-xl object-cover"
>
<Image
src={'/astro-nano.png'}
@ -42,7 +42,7 @@ import { Image } from 'astro:assets'
</div>
<div class="mx-10 my-10 text-center">
<div
class="mx-auto h-[250px] w-[150px] rotate-6 rounded-xl bg-neutral-300 object-cover sm:ml-auto"
class="mx-auto h-[250px] w-[150px] rotate-6 rounded-xl object-cover sm:ml-auto"
>
<Image
src={'/astro-micro.jpg'}

View file

@ -62,7 +62,7 @@ const { Content, headings } = await post.render()
{readingTime(post.body)}
</div>
</div>
<h1 class="text-4xl font-semibold text-black dark:text-white">
<h1 class="text-4xl font-semibold">
{post.data.title}
</h1>
<div class="font-base text-sm">
@ -72,7 +72,7 @@ const { Content, headings } = await post.render()
<div class="my-1 inline-block">
<a
href={`/tags/${tag}`}
class="mx-1 rounded-full bg-orange-300 px-2 py-1 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
class="mx-1 rounded-full px-2 py-1 transition-colors duration-300 ease-in-out"
>
#{tag}
</a>
@ -85,7 +85,7 @@ const { Content, headings } = await post.render()
</div>
</div>
{headings.length > 0 && <TableOfContents headings={headings} />}
<article class="animate">
<article class="prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto">
<Content />
<div class="mt-24">
<PostNavigation prevPost={prevPost} nextPost={nextPost} />

View file

@ -31,7 +31,7 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
{
years.map((year) => (
<section class="space-y-4">
<div class="font-semibold text-black dark:text-white">{year}</div>
<div class="font-semibold">{year}</div>
<div>
<ul class="not-prose flex flex-col gap-4">
{posts[year].map((post) => (

View file

@ -7,6 +7,7 @@ import Link from '@components/Link.astro'
import { getCollection } from 'astro:content'
import type { CollectionEntry } from 'astro:content'
import SocialIcons from '@components/SocialIcons.astro'
import { ModeToggle } from '@components/ui/mode-toggle'
const blog = (await getCollection('blog'))
.filter((post) => !post.data.draft)
@ -17,8 +18,9 @@ const blog = (await getCollection('blog'))
<Layout title="Home" description="Home">
<Container>
<section class="space-y-6">
<ModeToggle client:load />
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">Latest posts</h2>
<h2 class="font-semibold">Latest posts</h2>
<Link href="/blog"> See all posts </Link>
</div>
<ul class="not-prose flex flex-col gap-4">

View file

@ -36,9 +36,9 @@ export async function getStaticPaths() {
>
<Container>
<div class="space-y-10">
<div class="font-semibold text-black dark:text-white">
<div class="font-semibold">
Tag: <span
class="mx-2 rounded-full bg-orange-300 px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
class="mx-2 rounded-full px-3 py-2 transition-colors duration-300 ease-in-out"
>#{tag}</span
>
</div>

View file

@ -14,14 +14,14 @@ const tags = blog
<Layout title="Tags" description="Tags">
<Container>
<div class="space-y-10">
<div class="font-semibold text-black dark:text-white">Tags</div>
<div class="font-semibold">Tags</div>
<ul class="flex flex-wrap">
{
tags.map((tag) => (
<li class="my-3">
<a
href={`/tags/${tag}`}
class="mx-2 rounded-full bg-orange-300 px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-cyan-200 dark:bg-orange-500 dark:hover:bg-cyan-500"
class="mx-2 rounded-full px-3 py-2 transition-colors duration-300 ease-in-out"
>
#{tag}
</a>