z0x/blog.z0x.ca
1
Fork 0
Code Activity Actions

feat: tailwind v4, shadcn, expressive-code

Browse source
This commit is contained in:
enscribe 2025-02-18 15:09:38 -08:00
parent f51601c21a
commit 513aa6a8b5
17 changed files with 1614 additions and 2480 deletions

2
src/components/AuthorCard.astro
View file

@ -52,7 +52,7 @@ const socialLinks: SocialLink[] = [
)}
/>
</Link>
<div class="flex flex-grow flex-col justify-between gap-y-4">
<div class="flex grow flex-col justify-between gap-y-4">
<div>
<div class="flex flex-wrap items-center gap-x-2">
<h3 class="text-lg font-semibold">{name}</h3>

4
src/components/BlogCard.astro
View file

@ -30,7 +30,7 @@ const authors = await parseAuthors(entry.data.authors ?? [])
>
{
entry.data.image && (
<div class="max-w-[200px] sm:flex-shrink-0">
<div class="max-w-[200px] sm:shrink-0">
<Image
src={entry.data.image}
alt={entry.data.title}
@ -41,7 +41,7 @@ const authors = await parseAuthors(entry.data.authors ?? [])
</div>
)
}
<div class="flex-grow">
<div class="grow">
<h3 class="mb-1 text-lg font-semibold">
{entry.data.title}
</h3>

2
src/components/Container.astro
View file

@ -8,4 +8,4 @@ interface Props {
const { class: className } = Astro.props
---
<div class={cn('mx-auto max-w-screen-md px-4', className)}><slot /></div>
<div class={cn('mx-auto max-w-(--breakpoint-md) px-4', className)}><slot /></div>

2
src/components/Header.astro
View file

@ -16,7 +16,7 @@ import logo from '../../public/static/logo.svg'
<div class="flex flex-wrap items-center justify-between gap-4 py-4">
<Link
href="/"
class="flex flex-shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300 hover:text-primary"
class="flex shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300 hover:text-primary"
>
<Image src={logo} alt="Logo" class="size-8" />
{SITE.TITLE}

4
src/components/PostNavigation.astro
View file

@ -17,7 +17,7 @@ const { prevPost, nextPost } = Astro.props
)}
aria-disabled={!nextPost}
>
<div class="mr-2 flex-shrink-0">
<div class="mr-2 shrink-0">
<Icon
name="lucide:arrow-left"
class="size-4 transition-transform group-hover:-translate-x-1"
@ -46,7 +46,7 @@ const { prevPost, nextPost } = Astro.props
>{prevPost?.data.title || 'Last post!'}</span
>
</div>
<div class="ml-2 flex-shrink-0">
<div class="ml-2 shrink-0">
<Icon
name="lucide:arrow-right"
class="size-4 transition-transform group-hover:translate-x-1"

4
src/components/ProjectCard.astro
View file

@ -21,7 +21,7 @@ const { project } = Astro.props
>
{
project.data.image && (
<div class="max-w-[200px] sm:flex-shrink-0">
<div class="max-w-[200px] sm:shrink-0">
<Image
src={project.data.image}
alt={project.data.name}
@ -32,7 +32,7 @@ const { project } = Astro.props
</div>
)
}
<div class="flex-grow">
<div class="grow">
<h3 class="mb-1 text-lg font-semibold">
{project.data.name}
</h3>

6
src/components/ui/badge.tsx
View file

@ -4,16 +4,16 @@ import { Hash } from 'lucide-react'
import * as React from 'react'
const badgeVariants = cva(
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring focus:ring-ring',
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-hidden focus:ring-3 focus:ring-ring',
{
variants: {
variant: {
default:
'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80',
outline: 'text-foreground',
},
},

2
src/components/ui/button.tsx
View file

@ -4,7 +4,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
import * as React from 'react'
const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {

8
src/components/ui/dropdown-menu.tsx
View file

@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
inset && 'pl-8',
className,
)}
@ -85,7 +85,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
inset && 'pl-8',
className,
)}
@ -101,7 +101,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
checked={checked}
@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
{...props}