feat: breadcrumbs and more
This commit is contained in:
parent
43e35a3f8b
commit
051e466b6d
19 changed files with 529 additions and 218 deletions
23
package-lock.json
generated
23
package-lock.json
generated
|
@ -20,6 +20,7 @@
|
||||||
"@radix-ui/react-avatar": "^1.1.0",
|
"@radix-ui/react-avatar": "^1.1.0",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||||
"@radix-ui/react-icons": "^1.3.0",
|
"@radix-ui/react-icons": "^1.3.0",
|
||||||
|
"@radix-ui/react-separator": "^1.1.0",
|
||||||
"@radix-ui/react-slot": "^1.1.0",
|
"@radix-ui/react-slot": "^1.1.0",
|
||||||
"@types/react": "^18.3.5",
|
"@types/react": "^18.3.5",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
|
@ -2201,6 +2202,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-separator": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-primitive": "2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-slot": {
|
"node_modules/@radix-ui/react-slot": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
"@radix-ui/react-avatar": "^1.1.0",
|
"@radix-ui/react-avatar": "^1.1.0",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||||
"@radix-ui/react-icons": "^1.3.0",
|
"@radix-ui/react-icons": "^1.3.0",
|
||||||
|
"@radix-ui/react-separator": "^1.1.0",
|
||||||
"@radix-ui/react-slot": "^1.1.0",
|
"@radix-ui/react-slot": "^1.1.0",
|
||||||
"@types/react": "^18.3.5",
|
"@types/react": "^18.3.5",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
|
|
BIN
public/512x512.png
Normal file
BIN
public/512x512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.9 KiB |
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content'
|
import type { CollectionEntry } from 'astro:content'
|
||||||
import { Image } from 'astro:assets'
|
import { Image } from 'astro:assets'
|
||||||
|
import Link from '@components/Link.astro'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
author: CollectionEntry<'authors'>
|
author: CollectionEntry<'authors'>
|
||||||
|
@ -13,7 +14,7 @@ const { name, avatar, bio } = author.data
|
||||||
<div
|
<div
|
||||||
class="rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
|
class="rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
|
||||||
>
|
>
|
||||||
<a href={`/authors/${author.slug}`} class="flex flex-wrap gap-4">
|
<Link href={`/authors/${author.slug}`} class="flex flex-wrap gap-4">
|
||||||
<Image
|
<Image
|
||||||
src={avatar}
|
src={avatar}
|
||||||
alt={`Avatar of ${name}`}
|
alt={`Avatar of ${name}`}
|
||||||
|
@ -25,5 +26,5 @@ const { name, avatar, bio } = author.data
|
||||||
<h3 class="mb-1 text-lg font-semibold">{name}</h3>
|
<h3 class="mb-1 text-lg font-semibold">{name}</h3>
|
||||||
<p class="text-sm text-muted-foreground">{bio}</p>
|
<p class="text-sm text-muted-foreground">{bio}</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,6 +3,8 @@ import type { CollectionEntry } from 'astro:content'
|
||||||
import { formatDate, readingTime } from '@lib/utils'
|
import { formatDate, readingTime } from '@lib/utils'
|
||||||
import { Image } from 'astro:assets'
|
import { Image } from 'astro:assets'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import Link from './Link.astro'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
entry: CollectionEntry<'blog'>
|
entry: CollectionEntry<'blog'>
|
||||||
|
@ -19,7 +21,10 @@ const readTime = readingTime(entry.body)
|
||||||
<div
|
<div
|
||||||
class="not-prose rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
|
class="not-prose rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
|
||||||
>
|
>
|
||||||
<a href={`/${entry.collection}/${entry.slug}`} class="flex flex-wrap gap-4">
|
<Link
|
||||||
|
href={`/${entry.collection}/${entry.slug}`}
|
||||||
|
class="flex flex-wrap gap-4"
|
||||||
|
>
|
||||||
{
|
{
|
||||||
entry.data.image && (
|
entry.data.image && (
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
|
@ -44,7 +49,7 @@ const readTime = readingTime(entry.body)
|
||||||
class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
|
class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
|
||||||
>
|
>
|
||||||
<span>{formattedDate}</span>
|
<span>{formattedDate}</span>
|
||||||
<span>•</span>
|
<Separator orientation="vertical" className="h-4" />
|
||||||
<span>{readTime}</span>
|
<span>{readTime}</span>
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
|
@ -57,5 +62,5 @@ const readTime = readingTime(entry.body)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
---
|
---
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import SocialIcons from './SocialIcons.astro'
|
import SocialIcons from './SocialIcons.astro'
|
||||||
import { ModeToggle } from '@components/ui/mode-toggle'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<footer class="py-4">
|
<footer class="py-4">
|
||||||
|
@ -10,9 +9,6 @@ import { ModeToggle } from '@components/ui/mode-toggle'
|
||||||
class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:justify-between"
|
class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:justify-between"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="mr-2 hidden sm:block">
|
|
||||||
<ModeToggle client:load />
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
<p class="text-sm text-muted-foreground">
|
||||||
© {new Date().getFullYear()} All rights reserved.
|
© {new Date().getFullYear()} All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import Link from '@components/Link.astro'
|
import Link from '@components/Link.astro'
|
||||||
import { SITE } from '@consts'
|
import { SITE } from '@consts'
|
||||||
|
import { ModeToggle } from '@/components/ui/mode-toggle'
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{ href: '/blog', label: 'blog' },
|
{ href: '/blog', label: 'blog' },
|
||||||
|
@ -22,20 +23,21 @@ const items = [
|
||||||
>
|
>
|
||||||
{SITE.TITLE}
|
{SITE.TITLE}
|
||||||
</Link>
|
</Link>
|
||||||
<nav class="flex items-center gap-4 text-sm sm:gap-6">
|
<div class="flex items-center gap-4">
|
||||||
{
|
<nav class="flex items-center gap-4 text-sm sm:gap-6">
|
||||||
items.map((item, index) => (
|
{
|
||||||
<Fragment key={item.href}>
|
items.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
href={item.href}
|
href={item.href}
|
||||||
class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
|
class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</Link>
|
</Link>
|
||||||
</Fragment>
|
))
|
||||||
))
|
}
|
||||||
}
|
</nav>
|
||||||
</nav>
|
<ModeToggle client:load />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -5,6 +5,7 @@ type Props = {
|
||||||
href: string
|
href: string
|
||||||
external?: boolean
|
external?: boolean
|
||||||
class?: string
|
class?: string
|
||||||
|
underline?: boolean
|
||||||
'data-heading'?: string
|
'data-heading'?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,6 +13,7 @@ const {
|
||||||
href,
|
href,
|
||||||
external,
|
external,
|
||||||
class: className,
|
class: className,
|
||||||
|
underline,
|
||||||
'data-heading': dataHeading,
|
'data-heading': dataHeading,
|
||||||
...rest
|
...rest
|
||||||
} = Astro.props
|
} = Astro.props
|
||||||
|
@ -21,7 +23,8 @@ const {
|
||||||
href={href}
|
href={href}
|
||||||
target={external ? '_blank' : '_self'}
|
target={external ? '_blank' : '_self'}
|
||||||
class={cn(
|
class={cn(
|
||||||
'inline-block transition-colors duration-300 ease-in-out hover:underline underline-offset-[3px]',
|
'inline-block transition-colors duration-300 ease-in-out',
|
||||||
|
underline && 'hover:underline hover:underline-offset-[3px]',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
data-heading={dataHeading}
|
data-heading={dataHeading}
|
||||||
|
|
|
@ -1,65 +1,39 @@
|
||||||
---
|
---
|
||||||
|
import Link from '@components/Link.astro'
|
||||||
|
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
||||||
|
import { buttonVariants } from '@/components/ui/button'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const { prevPost, nextPost } = Astro.props
|
const { prevPost, nextPost } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-1.5 sm:gap-3">
|
<div class="mt-8 flex justify-between gap-4">
|
||||||
{
|
<Link
|
||||||
prevPost?.slug ? (
|
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
|
||||||
<a
|
class={cn(
|
||||||
href={`/blog/${prevPost?.slug}`}
|
buttonVariants({ variant: 'outline' }),
|
||||||
class="group relative flex flex-nowrap rounded-lg border px-4 py-3 pl-10 no-underline transition-colors duration-300 ease-in-out"
|
'group flex items-center justify-start gap-2 w-1/2',
|
||||||
>
|
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
|
||||||
<svg
|
)}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
aria-disabled={!prevPost}
|
||||||
viewBox="0 0 24 24"
|
>
|
||||||
class="absolute left-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
|
<ArrowLeft
|
||||||
>
|
className="h-4 w-4 transition-transform group-hover:-translate-x-1"
|
||||||
<line
|
/>
|
||||||
x1="5"
|
<span class="truncate">{prevPost?.data.title || 'Latest post!'}</span>
|
||||||
y1="12"
|
</Link>
|
||||||
x2="19"
|
<Link
|
||||||
y2="12"
|
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
|
||||||
class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out"
|
class={cn(
|
||||||
/>
|
buttonVariants({ variant: 'outline' }),
|
||||||
<polyline
|
'group flex items-center justify-end gap-2 w-1/2',
|
||||||
points="12 5 5 12 12 19"
|
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
|
||||||
class="translate-x-1 transition-transform duration-300 ease-in-out"
|
)}
|
||||||
/>
|
aria-disabled={!nextPost}
|
||||||
</svg>
|
>
|
||||||
<div class="flex items-center text-sm">{prevPost?.data.title}</div>
|
<span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
|
||||||
</a>
|
<ArrowRight
|
||||||
) : (
|
className="h-4 w-4 transition-transform group-hover:translate-x-1"
|
||||||
<div class="invisible" />
|
/>
|
||||||
)
|
</Link>
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
nextPost?.slug ? (
|
|
||||||
<a
|
|
||||||
href={`/blog/${nextPost?.slug}`}
|
|
||||||
class="group relative flex flex-grow flex-row-reverse flex-nowrap rounded-lg border px-4 py-4 pr-10 no-underline transition-colors duration-300 ease-in-out"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
class="absolute right-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
|
|
||||||
>
|
|
||||||
<line
|
|
||||||
x1="5"
|
|
||||||
y1="12"
|
|
||||||
x2="19"
|
|
||||||
y2="12"
|
|
||||||
class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
points="12 5 19 12 12 19"
|
|
||||||
class="-translate-x-1 transition-transform duration-300 ease-in-out"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div class="flex items-center text-sm">{nextPost?.data.title}</div>
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<div class="invisible" />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,20 +1,37 @@
|
||||||
---
|
---
|
||||||
import {
|
import { Twitter, Github, Linkedin, Mail, Rss } from 'lucide-react'
|
||||||
Twitter,
|
|
||||||
Github,
|
|
||||||
Linkedin,
|
|
||||||
Mail,
|
|
||||||
GraduationCap,
|
|
||||||
Rss,
|
|
||||||
} from 'lucide-react'
|
|
||||||
import { SITE } from '@consts'
|
import { SITE } from '@consts'
|
||||||
---
|
---
|
||||||
|
|
||||||
<ul class="not-prose flex flex-wrap gap-2">
|
<ul class="not-prose flex flex-wrap gap-2" role="list">
|
||||||
<a href="#" class="inline-block"><Twitter /></a>
|
<li>
|
||||||
<a href="#" class="inline-block"><Github /></a>
|
<a href="#" class="inline-block" aria-label="Twitter" title="Twitter">
|
||||||
<a href="#" class="inline-block"><Linkedin /></a>
|
<Twitter />
|
||||||
<a href="#" class="inline-block"><Mail /></a>
|
</a>
|
||||||
<a href="#" class="inline-block"><GraduationCap /></a>
|
</li>
|
||||||
<a href={`${SITE.SITEURL}/rss.xml`} class="inline-block"><Rss /></a>
|
<li>
|
||||||
|
<a href="#" class="inline-block" aria-label="GitHub" title="GitHub">
|
||||||
|
<Github />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="inline-block" aria-label="LinkedIn" title="LinkedIn">
|
||||||
|
<Linkedin />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="inline-block" aria-label="Email" title="Email">
|
||||||
|
<Mail />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={`${SITE.SITEURL}/rss.xml`}
|
||||||
|
class="inline-block"
|
||||||
|
aria-label="RSS feed"
|
||||||
|
title="RSS feed"
|
||||||
|
>
|
||||||
|
<Rss />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
115
src/components/ui/breadcrumb.tsx
Normal file
115
src/components/ui/breadcrumb.tsx
Normal file
|
@ -0,0 +1,115 @@
|
||||||
|
import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
|
||||||
|
import { Slot } from '@radix-ui/react-slot'
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const Breadcrumb = React.forwardRef<
|
||||||
|
HTMLElement,
|
||||||
|
React.ComponentPropsWithoutRef<'nav'> & {
|
||||||
|
separator?: React.ReactNode
|
||||||
|
}
|
||||||
|
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
|
||||||
|
Breadcrumb.displayName = 'Breadcrumb'
|
||||||
|
|
||||||
|
const BreadcrumbList = React.forwardRef<
|
||||||
|
HTMLOListElement,
|
||||||
|
React.ComponentPropsWithoutRef<'ol'>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ol
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
BreadcrumbList.displayName = 'BreadcrumbList'
|
||||||
|
|
||||||
|
const BreadcrumbItem = React.forwardRef<
|
||||||
|
HTMLLIElement,
|
||||||
|
React.ComponentPropsWithoutRef<'li'>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<li
|
||||||
|
ref={ref}
|
||||||
|
className={cn('inline-flex items-center gap-1.5', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
BreadcrumbItem.displayName = 'BreadcrumbItem'
|
||||||
|
|
||||||
|
const BreadcrumbLink = React.forwardRef<
|
||||||
|
HTMLAnchorElement,
|
||||||
|
React.ComponentPropsWithoutRef<'a'> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
>(({ asChild, className, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : 'a'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
className={cn('transition-colors hover:text-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
BreadcrumbLink.displayName = 'BreadcrumbLink'
|
||||||
|
|
||||||
|
const BreadcrumbPage = React.forwardRef<
|
||||||
|
HTMLSpanElement,
|
||||||
|
React.ComponentPropsWithoutRef<'span'>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<span
|
||||||
|
ref={ref}
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
className={cn('font-normal text-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
BreadcrumbPage.displayName = 'BreadcrumbPage'
|
||||||
|
|
||||||
|
const BreadcrumbSeparator = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'li'>) => (
|
||||||
|
<li
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn('[&>svg]:size-3.5', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children ?? <ChevronRightIcon />}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
|
||||||
|
|
||||||
|
const BreadcrumbEllipsis = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'span'>) => (
|
||||||
|
<span
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn('flex h-9 w-9 items-center justify-center', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<DotsHorizontalIcon className="h-4 w-4" />
|
||||||
|
<span className="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
|
||||||
|
|
||||||
|
export {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
}
|
29
src/components/ui/separator.tsx
Normal file
29
src/components/ui/separator.tsx
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
import * as SeparatorPrimitive from '@radix-ui/react-separator'
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const Separator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, orientation = 'horizontal', decorative = true, ...props },
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
'shrink-0 bg-border',
|
||||||
|
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
)
|
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Separator }
|
|
@ -3,18 +3,53 @@ import Layout from '@layouts/Layout.astro'
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import Link from '@components/Link.astro'
|
import Link from '@components/Link.astro'
|
||||||
import { SITE } from '@consts'
|
import { SITE } from '@consts'
|
||||||
import { Button } from '@/components/ui/button'
|
import { buttonVariants } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import { HomeIcon } from 'lucide-react'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="404" description={SITE.DESCRIPTION}>
|
<Layout title="404" description={SITE.DESCRIPTION}>
|
||||||
<Container>
|
<Container>
|
||||||
<div class="mt-16 grid place-items-center gap-3">
|
<Breadcrumb className="mb-4">
|
||||||
<h4 class="text-2xl font-semibold">404: Page not found</h4>
|
<BreadcrumbList>
|
||||||
<span>
|
<BreadcrumbItem>
|
||||||
<a href="/">
|
<BreadcrumbLink href="/"
|
||||||
<Button variant="outline"> Go to home page </Button>
|
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||||
</a>
|
>
|
||||||
</span>
|
</BreadcrumbItem>
|
||||||
</div>
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>???</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="flex min-h-[50vh] flex-col items-center justify-center space-y-6 text-center"
|
||||||
|
>
|
||||||
|
<div class="max-w-md">
|
||||||
|
<h1 class="mb-4 text-3xl font-bold">404: Page not found</h1>
|
||||||
|
<p class="prose dark:prose-invert">
|
||||||
|
Oops! The page you're looking for doesn't exist.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
class={buttonVariants({ variant: 'outline' }) + ' group'}
|
||||||
|
>
|
||||||
|
<span class="mr-1.5 transition-transform group-hover:-translate-x-1"
|
||||||
|
>←</span
|
||||||
|
> Go to home page
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -3,33 +3,41 @@ import Layout from '@layouts/Layout.astro'
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import Link from '@components/Link.astro'
|
import Link from '@components/Link.astro'
|
||||||
import { SITE } from '@consts'
|
import { SITE } from '@consts'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import { HomeIcon } from 'lucide-react'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="About" description={SITE.DESCRIPTION}>
|
<Layout title="About" description={SITE.DESCRIPTION}>
|
||||||
<Container>
|
<Container>
|
||||||
<article class="prose max-w-none dark:prose-invert">
|
<Breadcrumb className="mb-4">
|
||||||
<h1 class="mb-8 text-3xl font-bold">About Us</h1>
|
<BreadcrumbList>
|
||||||
<p class="mb-4">
|
<BreadcrumbItem>
|
||||||
Welcome to {SITE.TITLE}, a platform dedicated to sharing insights,
|
<BreadcrumbLink href="/"
|
||||||
knowledge, and experiences in the world of technology and beyond. Our
|
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||||
mission is to provide valuable content that informs, inspires, and
|
>
|
||||||
engages our readers.
|
</BreadcrumbItem>
|
||||||
</p>
|
<BreadcrumbSeparator />
|
||||||
<p class="mb-8">
|
<BreadcrumbItem>
|
||||||
Founded in 2023, we've grown into a community of passionate writers and
|
<BreadcrumbPage>About</BreadcrumbPage>
|
||||||
tech enthusiasts. Our team brings diverse expertise to the table,
|
</BreadcrumbItem>
|
||||||
covering topics ranging from software development and artificial
|
</BreadcrumbList>
|
||||||
intelligence to digital culture and tech ethics.
|
</Breadcrumb>
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 class="mb-4 text-2xl font-semibold">Get in Touch</h2>
|
<section class="space-y-6">
|
||||||
<p class="mb-4">
|
<div class="min-w-full">
|
||||||
We love hearing from our readers! Whether you have a question,
|
<h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
|
||||||
suggestion, or just want to say hello, don't hesitate to reach out.
|
<p class="prose dark:prose-invert">
|
||||||
</p>
|
{SITE.TITLE} is an opinionated, no-frills static blogging template built
|
||||||
<p>
|
with Astro.
|
||||||
<Link href="/contact" class="font-semibold">Contact Us</Link>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</article>
|
</section>
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -5,6 +5,15 @@ import Container from '@components/Container.astro'
|
||||||
import AuthorCard from '@components/AuthorCard.astro'
|
import AuthorCard from '@components/AuthorCard.astro'
|
||||||
import BlogCard from '@components/BlogCard.astro'
|
import BlogCard from '@components/BlogCard.astro'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import { HomeIcon } from 'lucide-react'
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const authors = await getCollection('authors')
|
const authors = await getCollection('authors')
|
||||||
|
@ -38,9 +47,24 @@ const authorPosts = allPosts
|
||||||
description={author.data.bio || `Profile of ${author.data.name}`}
|
description={author.data.bio || `Profile of ${author.data.name}`}
|
||||||
>
|
>
|
||||||
<Container>
|
<Container>
|
||||||
<a href="/authors">
|
<Breadcrumb className="mb-4">
|
||||||
<Button variant="ghost" className="mb-8">← Back to authors</Button>
|
<BreadcrumbList>
|
||||||
</a>
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/"
|
||||||
|
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||||
|
>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/authors">Authors</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>{author.data.name}</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
<div class="space-y-10">
|
<div class="space-y-10">
|
||||||
<section>
|
<section>
|
||||||
<AuthorCard author={author} />
|
<AuthorCard author={author} />
|
||||||
|
|
|
@ -3,23 +3,42 @@ import { getCollection } from 'astro:content'
|
||||||
import Layout from '@layouts/Layout.astro'
|
import Layout from '@layouts/Layout.astro'
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import AuthorCard from '@components/AuthorCard.astro'
|
import AuthorCard from '@components/AuthorCard.astro'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import { HomeIcon } from 'lucide-react'
|
||||||
|
|
||||||
const authors = await getCollection('authors')
|
const authors = await getCollection('authors')
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Authors" description="Authors">
|
<Layout title="Authors" description="Authors">
|
||||||
<Container>
|
<Container>
|
||||||
<div class="space-y-10">
|
<Breadcrumb className="mb-4">
|
||||||
<h1 class="text-3xl font-semibold">Authors</h1>
|
<BreadcrumbList>
|
||||||
<ul class="not-prose flex flex-col gap-4">
|
<BreadcrumbItem>
|
||||||
{
|
<BreadcrumbLink href="/"
|
||||||
authors.map((author) => (
|
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||||
<li>
|
>
|
||||||
<AuthorCard author={author} />
|
</BreadcrumbItem>
|
||||||
</li>
|
<BreadcrumbSeparator />
|
||||||
))
|
<BreadcrumbItem>
|
||||||
}
|
<BreadcrumbPage>Authors</BreadcrumbPage>
|
||||||
</ul>
|
</BreadcrumbItem>
|
||||||
</div>
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
<ul class="not-prose flex flex-col gap-4">
|
||||||
|
{
|
||||||
|
authors.map((author) => (
|
||||||
|
<li>
|
||||||
|
<AuthorCard author={author} />
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -7,8 +7,20 @@ import { readingTime } from '@lib/utils'
|
||||||
import PostNavigation from '@components/PostNavigation.astro'
|
import PostNavigation from '@components/PostNavigation.astro'
|
||||||
import TableOfContents from '@components/TableOfContents.astro'
|
import TableOfContents from '@components/TableOfContents.astro'
|
||||||
import { Image } from 'astro:assets'
|
import { Image } from 'astro:assets'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge, badgeVariants } from '@/components/ui/badge'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import { HomeIcon } from 'lucide-react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import Link from '@components/Link.astro'
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const posts = (await getCollection('blog'))
|
const posts = (await getCollection('blog'))
|
||||||
|
@ -67,96 +79,102 @@ if (
|
||||||
|
|
||||||
<Layout title={post.data.title} description={post.data.description}>
|
<Layout title={post.data.title} description={post.data.description}>
|
||||||
<Container>
|
<Container>
|
||||||
<a href="/blog">
|
<Breadcrumb className="mb-4">
|
||||||
<Button variant="ghost" className="mb-8">← Back to blog</Button>
|
<BreadcrumbList>
|
||||||
</a>
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/"
|
||||||
|
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||||
|
>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/blog">Blog</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>{post.data.title}</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
{
|
{
|
||||||
post.data.image && (
|
post.data.image && (
|
||||||
<div class="mb-8 flex justify-center">
|
<Image
|
||||||
<Image
|
src={post.data.image}
|
||||||
src={post.data.image}
|
alt={post.data.title}
|
||||||
alt={post.data.title}
|
width={1200}
|
||||||
width={1200}
|
height={630}
|
||||||
height={630}
|
class="mb-8 rounded-lg object-cover shadow-lg"
|
||||||
class="rounded-lg object-cover shadow-lg"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
<div class="mb-8 flex flex-col items-center gap-y-4">
|
|
||||||
<div class="flex items-center gap-3 text-sm text-muted-foreground">
|
<section class="mb-8 text-center">
|
||||||
<FormattedDate date={post.data.date} />
|
<h1 class="mb-4 text-4xl font-bold leading-tight sm:text-5xl">
|
||||||
<span>•</span>
|
|
||||||
<span>{readingTime(post.body)}</span>
|
|
||||||
</div>
|
|
||||||
<h1 class="text-4xl font-bold leading-tight sm:text-5xl">
|
|
||||||
{post.data.title}
|
{post.data.title}
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex flex-wrap gap-2">
|
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center gap-3 text-sm text-muted-foreground"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
author && (
|
||||||
|
<>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<Image
|
||||||
|
src={author.data.avatar}
|
||||||
|
alt={author.data.name}
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
class="rounded-full"
|
||||||
|
/>
|
||||||
|
{typeof post.data.author === 'object' &&
|
||||||
|
'collection' in post.data.author ? (
|
||||||
|
<a
|
||||||
|
href={`/authors/${post.data.author.slug}`}
|
||||||
|
class="hover:text-primary"
|
||||||
|
>
|
||||||
|
{author.data.name}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span>{author.data.name}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Separator orientation="vertical" className="h-4" />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<FormattedDate date={post.data.date} />
|
||||||
|
<Separator orientation="vertical" className="h-4" />
|
||||||
|
<span>{readingTime(post.body)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 flex flex-wrap justify-center gap-2">
|
||||||
{
|
{
|
||||||
post.data.tags && post.data.tags.length > 0 ? (
|
post.data.tags && post.data.tags.length > 0 ? (
|
||||||
post.data.tags.map((tag) => (
|
post.data.tags.map((tag) => (
|
||||||
<Button variant="outline" asChild>
|
<a
|
||||||
<a href={`/tags/${tag}`}>
|
href={`/tags/${tag}`}
|
||||||
<Badge variant="outline">{tag}</Badge>
|
class={badgeVariants({ variant: 'outline' })}
|
||||||
</a>
|
>
|
||||||
</Button>
|
{tag}
|
||||||
|
</a>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<span class="text-sm text-muted-foreground">No tags available</span>
|
<span class="text-sm text-muted-foreground">No tags available</span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
{
|
|
||||||
author && (
|
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
||||||
<div>
|
</section>
|
||||||
{typeof post.data.author === 'object' &&
|
|
||||||
'collection' in post.data.author ? (
|
|
||||||
<Button variant="ghost" asChild>
|
|
||||||
<a
|
|
||||||
class="group flex items-center gap-3 rounded-xl p-2 transition-colors duration-300 ease-in-out hover:bg-secondary"
|
|
||||||
href={`/authors/${post.data.author.slug}`}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={author.data.avatar}
|
|
||||||
alt={`Avatar of ${author.data.name}`}
|
|
||||||
width={48}
|
|
||||||
height={48}
|
|
||||||
class="rounded-full"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<span class="font-medium group-hover:text-primary">
|
|
||||||
{author.data.name}
|
|
||||||
</span>
|
|
||||||
<p class="text-sm text-muted-foreground">Author</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<div class="flex items-center gap-3 rounded-xl p-2">
|
|
||||||
<Image
|
|
||||||
src={author.data.avatar || '/default-avatar.png'}
|
|
||||||
alt={`Avatar of ${author.data.name}`}
|
|
||||||
width={48}
|
|
||||||
height={48}
|
|
||||||
class="rounded-full"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<span class="font-medium">{author.data.name}</span>
|
|
||||||
<p class="text-sm text-muted-foreground">Author</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
{headings.length > 0 && <TableOfContents headings={headings} />}
|
{headings.length > 0 && <TableOfContents headings={headings} />}
|
||||||
<article class="max-w-full">
|
|
||||||
|
<article class="prose max-w-none dark:prose-invert">
|
||||||
<Content />
|
<Content />
|
||||||
<div class="mt-24">
|
|
||||||
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -3,6 +3,15 @@ import { type CollectionEntry, getCollection } from 'astro:content'
|
||||||
import Layout from '@layouts/Layout.astro'
|
import Layout from '@layouts/Layout.astro'
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import BlogCard from '@components/BlogCard.astro'
|
import BlogCard from '@components/BlogCard.astro'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import { HomeIcon } from 'lucide-react'
|
||||||
|
|
||||||
const data = (await getCollection('blog'))
|
const data = (await getCollection('blog'))
|
||||||
.filter((post) => !post.data.draft)
|
.filter((post) => !post.data.draft)
|
||||||
|
@ -26,6 +35,20 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
|
||||||
|
|
||||||
<Layout title="Blog" description="Blog">
|
<Layout title="Blog" description="Blog">
|
||||||
<Container>
|
<Container>
|
||||||
|
<Breadcrumb className="mb-4">
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/"
|
||||||
|
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||||
|
>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Blog</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
<div class="space-y-10">
|
<div class="space-y-10">
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
{
|
{
|
||||||
|
|
|
@ -3,8 +3,9 @@ import Layout from '@layouts/Layout.astro'
|
||||||
import Container from '@components/Container.astro'
|
import Container from '@components/Container.astro'
|
||||||
import { SITE } from '@consts'
|
import { SITE } from '@consts'
|
||||||
import BlogCard from '@components/BlogCard.astro'
|
import BlogCard from '@components/BlogCard.astro'
|
||||||
import Link from '@components/Link.astro'
|
import { buttonVariants } from '@/components/ui/button'
|
||||||
import { getCollection } from 'astro:content'
|
import { getCollection } from 'astro:content'
|
||||||
|
import Link from '@components/Link.astro'
|
||||||
|
|
||||||
const blog = (await getCollection('blog'))
|
const blog = (await getCollection('blog'))
|
||||||
.filter((post) => !post.data.draft)
|
.filter((post) => !post.data.draft)
|
||||||
|
@ -14,10 +15,16 @@ const blog = (await getCollection('blog'))
|
||||||
|
|
||||||
<Layout title="Home" description="Home">
|
<Layout title="Home" description="Home">
|
||||||
<Container>
|
<Container>
|
||||||
<section class="space-y-4">
|
<section class="space-y-6">
|
||||||
|
<div class="min-w-full">
|
||||||
|
<h1 class="mb-4 text-3xl font-bold">Occasionally, less is more</h1>
|
||||||
|
<p class="prose min-w-full dark:prose-invert">
|
||||||
|
{SITE.TITLE} is an opinionated, no-frills static blogging template built
|
||||||
|
with Astro.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<div class="flex flex-wrap items-center justify-between gap-y-2">
|
<div class="flex flex-wrap items-center justify-between gap-y-2">
|
||||||
<h2 class="font-semibold">Latest posts</h2>
|
<h2 class="text-2xl font-bold">Latest posts</h2>
|
||||||
<Link href="/blog"> See all posts </Link>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="not-prose flex flex-col gap-4">
|
<ul class="not-prose flex flex-col gap-4">
|
||||||
{
|
{
|
||||||
|
@ -28,6 +35,17 @@ const blog = (await getCollection('blog'))
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Link
|
||||||
|
href="/blog"
|
||||||
|
class={buttonVariants({ variant: 'ghost' }) + ' group'}
|
||||||
|
>
|
||||||
|
See all posts <span
|
||||||
|
class="ml-1.5 transition-transform group-hover:translate-x-1"
|
||||||
|
>→</span
|
||||||
|
>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
Loading…
Add table
Reference in a new issue