-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
25 changed files
with
243 additions
and
287 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import type { Alpine } from 'alpinejs'; | ||
|
|
||
| type PagefindResult = Record<string, unknown>; | ||
| type PagefindResults = { results: Array<{ data: () => Promise<{ meta: PagefindResult }> }> }; | ||
|
|
||
| export default (Alpine: Alpine) => { | ||
| Alpine.magic('fetch', () => async (...props: Parameters<typeof fetch>) => { | ||
| if (props[1]?.body) props[1].body = JSON.stringify(props[1].body); | ||
| return await fetch(...props).then((res) => res.json()); | ||
| }); | ||
|
|
||
| Alpine.data('pagefind', (data: Array<PagefindResult>, key: string) => ({ | ||
| query: null as string | null, | ||
| tags: [], | ||
| results: data, | ||
| async init() { | ||
| this.$watch('query', () => this.execute()); | ||
| this.$watch('tags', () => this.execute()); | ||
|
|
||
| if (window.Pagefind) return; | ||
| window.Pagefind = await import(String(/* @vite-ignore */ import.meta.env.PUBLIC_PAGEFIND_URL)); | ||
| await window.Pagefind.init(); | ||
| }, | ||
| async execute() { | ||
| if (!this.query?.trim()?.length && !this.tags?.length) this.results = data; | ||
| else { | ||
| const filters = { filters: { tag: { any: this.tags } } }; | ||
| const { results }: PagefindResults = await window.Pagefind.search(this.query, filters); | ||
| const payload = await Promise.all(results.map(async (result) => result.data())); | ||
| this.results = payload.map((item) => data.find((result) => result[key] === item.meta[key])) as typeof data; | ||
| } | ||
| }, | ||
| })); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| --- | ||
| import type { PostResults } from '@/pages/blog/index.astro'; | ||
| import { Dot } from 'lucide-astro'; | ||
| import { tv } from 'tailwind-variants'; | ||
| import Separator from './ui/separator.astro'; | ||
| type Props = { results: PostResults }; | ||
| const title = tv({ base: 'group-hover:text-emphasis motion-safe:transition-colors' }); | ||
| const stats = tv({ base: 'flex items-center !text-xxs text-2' }); | ||
| const dot = tv({ base: 'shrink-4 size-4' }); | ||
| const horizontalSeparator = tv({ base: 'flex-1' }); | ||
| const verticalSeparator = tv({ base: 'mt-4 sm:hidden' }); | ||
| const anchor = tv({ | ||
| base: [ | ||
| 'group flex flex-col rounded py-2 text-xs', | ||
| 'sm:flex-row sm:items-center sm:justify-between sm:gap-2', | ||
| 'focus-visible:outline-none focus-visible:ring-1', | ||
| ], | ||
| }); | ||
| --- | ||
|
|
||
| <ul x-cloak class="peer [&[x-cloak]]:hidden"> | ||
| <template x-for="post in results"> | ||
| <li> | ||
| <a :href="'/blog/' + post.slug" :aria-label="post.title" class={anchor()}> | ||
| <span x-text="post.title" class={title()}></span> | ||
| <Separator class={horizontalSeparator()} /> | ||
| <div class={stats()}> | ||
| <time :datetime="post.published.iso" x-text="post.published.pretty"></time> | ||
| <Dot class={dot()} aria-hidden /> | ||
| <span x-text="post.readingTime"></span> | ||
| </div> | ||
| <Separator class={verticalSeparator()} /> | ||
| </a> | ||
| </li> | ||
| </template> | ||
| </ul> | ||
|
|
||
| <!-- Fallback if JavaScript is disabled --> | ||
| <ul class="peer-[:not([x-cloak])]:hidden"> | ||
| { | ||
| Astro.props.results.map((post) => ( | ||
| <li> | ||
| <a href={`/blog/${post.slug}`} aria-label={post.title} class={anchor()}> | ||
| <span class={title()}>{post.title}</span> | ||
| <Separator class={horizontalSeparator()} /> | ||
| <div class={stats()}> | ||
| <time datetime="post.published.iso">{post.published.pretty}</time> | ||
| <Dot class={dot()} aria-hidden /> | ||
| <span>{post.readingTime}</span> | ||
| </div> | ||
| <Separator class={verticalSeparator()} /> | ||
| </a> | ||
| </li> | ||
| )) | ||
| } | ||
| </ul> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,20 @@ | ||
| --- | ||
| import type { HTMLAttributes } from 'astro/types'; | ||
| import { twJoin, twMerge } from 'tailwind-merge'; | ||
| import { twMerge } from 'tailwind-merge'; | ||
| type Props = Omit<HTMLAttributes<'input'>, 'type'>; | ||
| type Props = Omit<HTMLAttributes<'input'>, 'type'> & { value: string }; | ||
| const { class: className, ...props } = Astro.props; | ||
| const { class: className, value, ...props } = Astro.props; | ||
| --- | ||
|
|
||
| <label class={twMerge('relative flex rounded border bg-3 px-2 text-2', className)}> | ||
| <input | ||
| {...props} | ||
| {value} | ||
| type="checkbox" | ||
| class={twJoin( | ||
| 'peer absolute inset-0 cursor-pointer appearance-none rounded', | ||
| 'checked:ring-1 focus-visible:outline-none focus-visible:ring-1', | ||
| )} | ||
| class="peer absolute inset-0 cursor-pointer appearance-none rounded checked:ring-1 focus-visible:outline-none focus-visible:ring-1" | ||
| /> | ||
| <div | ||
| class={twJoin( | ||
| 'text-xxs peer-checked:text-emphasis peer-hover:text-emphasis', | ||
| 'motion-safe:transition-colors', | ||
| )} | ||
| > | ||
| <slot /> | ||
| <div class="text-xxs peer-checked:text-emphasis peer-hover:text-emphasis motion-safe:transition-colors"> | ||
| {value} | ||
| </div> | ||
| </label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.