z0x/blog.z0x.ca
Code Actions

refactor: lucide icons via astro-icon

Browse source
This commit is contained in:
enscribe 2024-09-19 13:12:13 -07:00
parent c4b6e75915
commit 6764644c2e
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
10 changed files with 827 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
astro.config.ts
View file

@ -16,6 +16,8 @@ import remarkMath from 'remark-math'
import remarkToc from 'remark-toc'
import sectionize from '@hbsnow/rehype-sectionize'
import icon from 'astro-icon'
// https://astro.build/config
export default defineConfig({
site: 'https://astro-erudite.vercel.app',
@ -26,6 +28,7 @@ export default defineConfig({
sitemap(),
mdx(),
react(),
icon(),
],
markdown: {
syntaxHighlight: false,

799
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -1,7 +1,7 @@
{
"name": "astro-erudite",
"type": "module",
"version": "1.1.1",
"version": "1.1.2",
"private": true,
"scripts": {
"dev": "astro dev",
@ -20,6 +20,7 @@
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0",
"@hbsnow/rehype-sectionize": "^1.0.7",
"@iconify-json/lucide": "^1.2.4",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
@ -30,10 +31,11 @@
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"astro": "^4.11.3",
"astro-icon": "^1.1.1",
"bootstrap-icons": "^1.11.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.439.0",
"lucide-react": "^0.441.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"rehype-katex": "^7.0.0",

10
src/components/Breadcrumbs.astro
View file

@ -7,12 +7,12 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { HomeIcon } from 'lucide-react'
import { Icon } from 'astro-icon/components'
export interface BreadcrumbItem {
href?: string
label: string
icon?: any
icon?: string
}
interface Props {
@ -26,7 +26,7 @@ const { items } = Astro.props
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">
<HomeIcon className="size-4" />
<Icon name="lucide:home" class="size-4" />
</BreadcrumbLink>
</BreadcrumbItem>
{
@ -36,12 +36,12 @@ const { items } = Astro.props
<BreadcrumbItem>
{index === items.length - 1 ? (
<BreadcrumbPage>
{item.icon && <item.icon className="size-4 mr-1" />}
{item.icon && <Icon name={item.icon} class="mr-1 size-4" />}
{item.label}
</BreadcrumbPage>
) : (
<BreadcrumbLink href={item.href}>
{item.icon && <item.icon className="size-4 mr-1" />}
{item.icon && <Icon name={item.icon} class="mr-1 size-4" />}
{item.label}
</BreadcrumbLink>
)}

12
src/components/PostNavigation.astro
View file

@ -2,7 +2,7 @@
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from '@components/Link.astro'
import { ArrowLeft, ArrowRight } from 'lucide-react'
import { Icon } from 'astro-icon/components'
const { prevPost, nextPost } = Astro.props
---
@ -18,8 +18,9 @@ const { prevPost, nextPost } = Astro.props
aria-disabled={!prevPost}
>
<div class="mr-2 flex-shrink-0">
<ArrowLeft
className="size-4 transition-transform group-hover:-translate-x-1"
<Icon
name="lucide:arrow-left"
class="size-4 transition-transform group-hover:-translate-x-1"
/>
</div>
<div class="flex flex-col items-start overflow-hidden">
@ -45,8 +46,9 @@ const { prevPost, nextPost } = Astro.props
>
</div>
<div class="ml-2 flex-shrink-0">
<ArrowRight
className="size-4 transition-transform group-hover:translate-x-1"
<Icon
name="lucide:arrow-right"
class="size-4 transition-transform group-hover:translate-x-1"
/>
</div>
</Link>

29
src/components/SocialIcons.astro
View file

@ -3,15 +3,7 @@ import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from '@components/Link.astro'
import type { Link as SocialLink } from '@consts'
import {
Github,
Globe,
Linkedin,
Mail,
MessageCircleQuestion,
Rss,
Twitter,
} from 'lucide-react'
import { Icon } from 'astro-icon/components'
interface Props {
links: SocialLink[]
@ -21,25 +13,26 @@ interface Props {
const { links, className } = Astro.props
const iconMap = {
Website: Globe,
GitHub: Github,
LinkedIn: Linkedin,
Twitter: Twitter,
Email: Mail,
RSS: Rss,
Website: 'lucide:globe',
GitHub: 'lucide:github',
LinkedIn: 'lucide:linkedin',
Twitter: 'lucide:twitter',
Email: 'lucide:mail',
RSS: 'lucide:rss',
}
const getSocialLink = ({ href, label }: SocialLink) => ({
href: label === 'Email' ? `mailto:${href}` : href,
ariaLabel: label,
Icon: iconMap[label as keyof typeof iconMap] || MessageCircleQuestion,
iconName:
iconMap[label as keyof typeof iconMap] || 'lucide:message-circle-question',
})
---
<ul class={cn('not-prose flex flex-wrap gap-2', className)} role="list">
{
links.map((link) => {
const { href, ariaLabel, Icon } = getSocialLink(link)
const { href, ariaLabel, iconName } = getSocialLink(link)
return (
<li>
<Link
@ -48,7 +41,7 @@ const getSocialLink = ({ href, label }: SocialLink) => ({
title={ariaLabel}
class={buttonVariants({ variant: 'outline', size: 'icon' })}
>
<Icon className="size-4" />
<Icon name={iconName} class="size-4" />
</Link>
</li>
)

7
src/components/TableOfContents.astro
View file

@ -1,5 +1,5 @@
---
import { ChevronDown } from 'lucide-react'
import { Icon } from 'astro-icon/components'
import TableOfContentsHeading from './TableOfContentsHeading.astro'
export interface Heading {
@ -41,8 +41,9 @@ function buildToc(headings: Heading[]): Heading[] {
class="flex cursor-pointer items-center justify-between text-xl font-semibold"
>
Table of Contents
<ChevronDown
className="size-5 transition-transform group-open:rotate-180"
<Icon
name="lucide:chevron-down"
class="size-5 transition-transform group-open:rotate-180"
/>
</summary>
<nav>

9
src/pages/blog/[...slug].astro
View file

@ -9,9 +9,9 @@ import PostNavigation from '@components/PostNavigation.astro'
import TableOfContents from '@components/TableOfContents.astro'
import Layout from '@layouts/Layout.astro'
import { formatDate, parseAuthors, readingTime } from '@lib/utils'
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets'
import { type CollectionEntry, getCollection } from 'astro:content'
import { ArrowUp, Hash } from 'lucide-react'
export async function getStaticPaths() {
const posts = (await getCollection('blog'))
@ -130,7 +130,7 @@ const authors = await parseAuthors(post.data.authors ?? [])
href={`/tags/${tag}`}
class={badgeVariants({ variant: 'secondary' })}
>
<Hash className="-translate-x-0.5 size-3" />
<Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
{tag}
</a>
))
@ -163,8 +163,9 @@ const authors = await parseAuthors(post.data.authors ?? [])
title="Scroll to top"
aria-label="Scroll to top"
>
<ArrowUp
className="mx-auto size-4 transition-all group-hover:-translate-y-0.5"
<Icon
name="lucide:arrow-up"
class="mx-auto size-4 transition-all group-hover:-translate-y-0.5"
/>
</Button>

4
src/pages/tags/[...slug].astro
View file

@ -3,8 +3,8 @@ import BlogCard from '@components/BlogCard.astro'
import Breadcrumbs from '@components/Breadcrumbs.astro'
import Container from '@components/Container.astro'
import Layout from '@layouts/Layout.astro'
import { Icon } from 'astro-icon/components'
import { type CollectionEntry, getCollection } from 'astro:content'
import { Hash } from 'lucide-react'
type BlogPost = CollectionEntry<'blog'>
@ -43,7 +43,7 @@ export async function getStaticPaths() {
<span
class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-bold"
>
<Hash className="size-6 -translate-x-0.5" strokeWidth={3} />{tag}
<Icon name="lucide:hash" class="size-6 -translate-x-0.5" />{tag}
</span>
</div>
<div class="flex flex-col gap-y-4">

4
src/pages/tags/index.astro
View file

@ -4,8 +4,8 @@ import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import { badgeVariants } from '@components/ui/badge'
import Layout from '@layouts/Layout.astro'
import { Icon } from 'astro-icon/components'
import { getCollection } from 'astro:content'
import { Hash } from 'lucide-react'
const blog = (await getCollection('blog')).filter((post) => !post.data.draft)
@ -27,7 +27,7 @@ const tags = blog
href={`/tags/${tag}`}
class={badgeVariants({ variant: 'secondary' })}
>
<Hash className="-translate-x-0.5 size-3" />
<Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
{tag}
</Link>
))