feat: breadcrumbs and more
This commit is contained in:
enscribe
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-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@types/react": "^18.3.5",
|
||||
"@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": {
|
||||
"version": "1.1.0",
|
||||
"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-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@types/react": "^18.3.5",
|
||||
"@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 { Image } from 'astro:assets'
|
||||
import Link from '@components/Link.astro'
|
||||
|
||||
type Props = {
|
||||
author: CollectionEntry<'authors'>
|
||||
|
|
@ -13,7 +14,7 @@ const { name, avatar, bio } = author.data
|
|||
<div
|
||||
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
|
||||
src={avatar}
|
||||
alt={`Avatar of ${name}`}
|
||||
|
|
@ -25,5 +26,5 @@ const { name, avatar, bio } = author.data
|
|||
<h3 class="mb-1 text-lg font-semibold">{name}</h3>
|
||||
<p class="text-sm text-muted-foreground">{bio}</p>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import type { CollectionEntry } from 'astro:content'
|
|||
import { formatDate, readingTime } from '@lib/utils'
|
||||
import { Image } from 'astro:assets'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import Link from './Link.astro'
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<'blog'>
|
||||
|
|
@ -19,7 +21,10 @@ const readTime = readingTime(entry.body)
|
|||
<div
|
||||
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 && (
|
||||
<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"
|
||||
>
|
||||
<span>{formattedDate}</span>
|
||||
<span>•</span>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
<span>{readTime}</span>
|
||||
</div>
|
||||
{
|
||||
|
|
@ -57,5 +62,5 @@ const readTime = readingTime(entry.body)
|
|||
)
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import Container from '@components/Container.astro'
|
||||
import SocialIcons from './SocialIcons.astro'
|
||||
import { ModeToggle } from '@components/ui/mode-toggle'
|
||||
---
|
||||
|
||||
<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"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="mr-2 hidden sm:block">
|
||||
<ModeToggle client:load />
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
© {new Date().getFullYear()} All rights reserved.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { SITE } from '@consts'
|
||||
import { ModeToggle } from '@/components/ui/mode-toggle'
|
||||
|
||||
const items = [
|
||||
{ href: '/blog', label: 'blog' },
|
||||
|
|
@ -22,20 +23,21 @@ const items = [
|
|||
>
|
||||
{SITE.TITLE}
|
||||
</Link>
|
||||
<nav class="flex items-center gap-4 text-sm sm:gap-6">
|
||||
{
|
||||
items.map((item, index) => (
|
||||
<Fragment key={item.href}>
|
||||
<div class="flex items-center gap-4">
|
||||
<nav class="flex items-center gap-4 text-sm sm:gap-6">
|
||||
{
|
||||
items.map((item) => (
|
||||
<Link
|
||||
href={item.href}
|
||||
class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</Fragment>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
<ModeToggle client:load />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ type Props = {
|
|||
href: string
|
||||
external?: boolean
|
||||
class?: string
|
||||
underline?: boolean
|
||||
'data-heading'?: string
|
||||
}
|
||||
|
||||
|
|
@ -12,6 +13,7 @@ const {
|
|||
href,
|
||||
external,
|
||||
class: className,
|
||||
underline,
|
||||
'data-heading': dataHeading,
|
||||
...rest
|
||||
} = Astro.props
|
||||
|
|
@ -21,7 +23,8 @@ const {
|
|||
href={href}
|
||||
target={external ? '_blank' : '_self'}
|
||||
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,
|
||||
)}
|
||||
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
|
||||
---
|
||||
|
||||
<div class="grid grid-cols-2 gap-1.5 sm:gap-3">
|
||||
{
|
||||
prevPost?.slug ? (
|
||||
<a
|
||||
href={`/blog/${prevPost?.slug}`}
|
||||
class="group relative flex flex-nowrap rounded-lg border px-4 py-3 pl-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 left-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 5 12 12 19"
|
||||
class="translate-x-1 transition-transform duration-300 ease-in-out"
|
||||
/>
|
||||
</svg>
|
||||
<div class="flex items-center text-sm">{prevPost?.data.title}</div>
|
||||
</a>
|
||||
) : (
|
||||
<div class="invisible" />
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
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 class="mt-8 flex justify-between gap-4">
|
||||
<Link
|
||||
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
|
||||
class={cn(
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'group flex items-center justify-start gap-2 w-1/2',
|
||||
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
|
||||
)}
|
||||
aria-disabled={!prevPost}
|
||||
>
|
||||
<ArrowLeft
|
||||
className="h-4 w-4 transition-transform group-hover:-translate-x-1"
|
||||
/>
|
||||
<span class="truncate">{prevPost?.data.title || 'Latest post!'}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
|
||||
class={cn(
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'group flex items-center justify-end gap-2 w-1/2',
|
||||
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
|
||||
)}
|
||||
aria-disabled={!nextPost}
|
||||
>
|
||||
<span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
|
||||
<ArrowRight
|
||||
className="h-4 w-4 transition-transform group-hover:translate-x-1"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,37 @@
|
|||
---
|
||||
import {
|
||||
Twitter,
|
||||
Github,
|
||||
Linkedin,
|
||||
Mail,
|
||||
GraduationCap,
|
||||
Rss,
|
||||
} from 'lucide-react'
|
||||
import { Twitter, Github, Linkedin, Mail, Rss } from 'lucide-react'
|
||||
import { SITE } from '@consts'
|
||||
---
|
||||
|
||||
<ul class="not-prose flex flex-wrap gap-2">
|
||||
<a href="#" class="inline-block"><Twitter /></a>
|
||||
<a href="#" class="inline-block"><Github /></a>
|
||||
<a href="#" class="inline-block"><Linkedin /></a>
|
||||
<a href="#" class="inline-block"><Mail /></a>
|
||||
<a href="#" class="inline-block"><GraduationCap /></a>
|
||||
<a href={`${SITE.SITEURL}/rss.xml`} class="inline-block"><Rss /></a>
|
||||
<ul class="not-prose flex flex-wrap gap-2" role="list">
|
||||
<li>
|
||||
<a href="#" class="inline-block" aria-label="Twitter" title="Twitter">
|
||||
<Twitter />
|
||||
</a>
|
||||
</li>
|
||||
<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>
|
||||
|
|
|
|||
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 Link from '@components/Link.astro'
|
||||
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}>
|
||||
<Container>
|
||||
<div class="mt-16 grid place-items-center gap-3">
|
||||
<h4 class="text-2xl font-semibold">404: Page not found</h4>
|
||||
<span>
|
||||
<a href="/">
|
||||
<Button variant="outline"> Go to home page </Button>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<Breadcrumb className="mb-4">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<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>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -3,33 +3,41 @@ import Layout from '@layouts/Layout.astro'
|
|||
import Container from '@components/Container.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
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}>
|
||||
<Container>
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
<h1 class="mb-8 text-3xl font-bold">About Us</h1>
|
||||
<p class="mb-4">
|
||||
Welcome to {SITE.TITLE}, a platform dedicated to sharing insights,
|
||||
knowledge, and experiences in the world of technology and beyond. Our
|
||||
mission is to provide valuable content that informs, inspires, and
|
||||
engages our readers.
|
||||
</p>
|
||||
<p class="mb-8">
|
||||
Founded in 2023, we've grown into a community of passionate writers and
|
||||
tech enthusiasts. Our team brings diverse expertise to the table,
|
||||
covering topics ranging from software development and artificial
|
||||
intelligence to digital culture and tech ethics.
|
||||
</p>
|
||||
<Breadcrumb className="mb-4">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>About</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
|
||||
<h2 class="mb-4 text-2xl font-semibold">Get in Touch</h2>
|
||||
<p class="mb-4">
|
||||
We love hearing from our readers! Whether you have a question,
|
||||
suggestion, or just want to say hello, don't hesitate to reach out.
|
||||
</p>
|
||||
<p>
|
||||
<Link href="/contact" class="font-semibold">Contact Us</Link>
|
||||
</p>
|
||||
</article>
|
||||
<section class="space-y-6">
|
||||
<div class="min-w-full">
|
||||
<h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
|
||||
<p class="prose dark:prose-invert">
|
||||
{SITE.TITLE} is an opinionated, no-frills static blogging template built
|
||||
with Astro.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ import Container from '@components/Container.astro'
|
|||
import AuthorCard from '@components/AuthorCard.astro'
|
||||
import BlogCard from '@components/BlogCard.astro'
|
||||
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() {
|
||||
const authors = await getCollection('authors')
|
||||
|
|
@ -38,9 +47,24 @@ const authorPosts = allPosts
|
|||
description={author.data.bio || `Profile of ${author.data.name}`}
|
||||
>
|
||||
<Container>
|
||||
<a href="/authors">
|
||||
<Button variant="ghost" className="mb-8">← Back to authors</Button>
|
||||
</a>
|
||||
<Breadcrumb className="mb-4">
|
||||
<BreadcrumbList>
|
||||
<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">
|
||||
<section>
|
||||
<AuthorCard author={author} />
|
||||
|
|
|
|||
|
|
@ -3,23 +3,42 @@ import { getCollection } from 'astro:content'
|
|||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.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')
|
||||
---
|
||||
|
||||
<Layout title="Authors" description="Authors">
|
||||
<Container>
|
||||
<div class="space-y-10">
|
||||
<h1 class="text-3xl font-semibold">Authors</h1>
|
||||
<ul class="not-prose flex flex-col gap-4">
|
||||
{
|
||||
authors.map((author) => (
|
||||
<li>
|
||||
<AuthorCard author={author} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<Breadcrumb className="mb-4">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/"
|
||||
><HomeIcon className="h-4 w-4" /></BreadcrumbLink
|
||||
>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Authors</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
<ul class="not-prose flex flex-col gap-4">
|
||||
{
|
||||
authors.map((author) => (
|
||||
<li>
|
||||
<AuthorCard author={author} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,20 @@ import { readingTime } from '@lib/utils'
|
|||
import PostNavigation from '@components/PostNavigation.astro'
|
||||
import TableOfContents from '@components/TableOfContents.astro'
|
||||
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 {
|
||||
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() {
|
||||
const posts = (await getCollection('blog'))
|
||||
|
|
@ -67,96 +79,102 @@ if (
|
|||
|
||||
<Layout title={post.data.title} description={post.data.description}>
|
||||
<Container>
|
||||
<a href="/blog">
|
||||
<Button variant="ghost" className="mb-8">← Back to blog</Button>
|
||||
</a>
|
||||
<Breadcrumb className="mb-4">
|
||||
<BreadcrumbList>
|
||||
<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 && (
|
||||
<div class="mb-8 flex justify-center">
|
||||
<Image
|
||||
src={post.data.image}
|
||||
alt={post.data.title}
|
||||
width={1200}
|
||||
height={630}
|
||||
class="rounded-lg object-cover shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<Image
|
||||
src={post.data.image}
|
||||
alt={post.data.title}
|
||||
width={1200}
|
||||
height={630}
|
||||
class="mb-8 rounded-lg object-cover shadow-lg"
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div class="mb-8 flex flex-col items-center gap-y-4">
|
||||
<div class="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<FormattedDate date={post.data.date} />
|
||||
<span>•</span>
|
||||
<span>{readingTime(post.body)}</span>
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold leading-tight sm:text-5xl">
|
||||
|
||||
<section class="mb-8 text-center">
|
||||
<h1 class="mb-4 text-4xl font-bold leading-tight sm:text-5xl">
|
||||
{post.data.title}
|
||||
</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.map((tag) => (
|
||||
<Button variant="outline" asChild>
|
||||
<a href={`/tags/${tag}`}>
|
||||
<Badge variant="outline">{tag}</Badge>
|
||||
</a>
|
||||
</Button>
|
||||
<a
|
||||
href={`/tags/${tag}`}
|
||||
class={badgeVariants({ variant: 'outline' })}
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<span class="text-sm text-muted-foreground">No tags available</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
author && (
|
||||
<div>
|
||||
{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>
|
||||
|
||||
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
||||
</section>
|
||||
|
||||
{headings.length > 0 && <TableOfContents headings={headings} />}
|
||||
<article class="max-w-full">
|
||||
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
<Content />
|
||||
<div class="mt-24">
|
||||
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,15 @@ import { type CollectionEntry, getCollection } from 'astro:content'
|
|||
import Layout from '@layouts/Layout.astro'
|
||||
import Container from '@components/Container.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'))
|
||||
.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">
|
||||
<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-4">
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@ import Layout from '@layouts/Layout.astro'
|
|||
import Container from '@components/Container.astro'
|
||||
import { SITE } from '@consts'
|
||||
import BlogCard from '@components/BlogCard.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { buttonVariants } from '@/components/ui/button'
|
||||
import { getCollection } from 'astro:content'
|
||||
import Link from '@components/Link.astro'
|
||||
|
||||
const blog = (await getCollection('blog'))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -14,10 +15,16 @@ const blog = (await getCollection('blog'))
|
|||
|
||||
<Layout title="Home" description="Home">
|
||||
<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">
|
||||
<h2 class="font-semibold">Latest posts</h2>
|
||||
<Link href="/blog"> See all posts </Link>
|
||||
<h2 class="text-2xl font-bold">Latest posts</h2>
|
||||
</div>
|
||||
<ul class="not-prose flex flex-col gap-4">
|
||||
{
|
||||
|
|
@ -28,6 +35,17 @@ const blog = (await getCollection('blog'))
|
|||
))
|
||||
}
|
||||
</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>
|
||||
</Container>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue