-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactored pagination, added tags and filters and initial fetching of…
… file list from github
- Loading branch information
Showing
32 changed files
with
509 additions
and
404 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
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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 |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| --- | ||
| import { Icon } from 'astro-icon/components' | ||
| interface Props { | ||
| url?: string | ||
| target?: string | ||
| img?: string | ||
| imgAlt?: string | ||
| title?: string | ||
| } | ||
| const { url = '#', target = null, img, imgAlt = '', title = null } = Astro.props | ||
| --- | ||
|
|
||
| <a href={url} target={target} class="flex min-h-32 gap-4 card p-4"> | ||
| { | ||
| img ? ( | ||
| <img src={img} alt={imgAlt} class="h-20 rounded-full flex-1" /> | ||
| ) : ( | ||
| <Icon | ||
| class="h-20 w-auto text-neutral-600" | ||
| name="material-symbols:exit-to-app-sharp" | ||
| /> | ||
| ) | ||
| } | ||
| <div class="flex flex-col w-full"> | ||
| <slot name="title"> | ||
| <h2 class="flex gap-2 font-bold text-xl mb-1"> | ||
| <span class="highlight-first-letter line-clamp-1 break-all"> | ||
| {title} | ||
| </span> | ||
| { | ||
| target?.includes('_blank') ? ( | ||
| <Icon | ||
| class="flex-shrink-0 w-5 h-5 self-center ml-auto mr-0" | ||
| name="material-symbols:open-in-new" | ||
| /> | ||
| ) : null | ||
| } | ||
| </h2> | ||
| </slot> | ||
| <slot /> | ||
| </div> | ||
| </a> |
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 |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| --- | ||
| import getTitle from '../../utils/getTitle' | ||
| import fetchFileList from '../../utils/fetchFileList' | ||
| import formatDate from '../../utils/formatDate' | ||
| import Badge from '../../components/Badge.astro' | ||
| import { render } from 'astro:content' | ||
| import type { CollectionEntry } from 'astro:content' | ||
| import PageLayout from '../../layouts/PageLayout.astro' | ||
| // @TODO: handle errors | ||
| const fileList = await fetchFileList('posts', '') | ||
| const files = await fileList.json() | ||
| interface Props { | ||
| note: CollectionEntry<'notes'> | ||
| } | ||
| const { note } = Astro.props | ||
| const { data } = note | ||
| const { Content } = await render(note) | ||
| --- | ||
|
|
||
| <PageLayout title={getTitle(data.title)} description={data.description}> | ||
| <div class="flex items-start"> | ||
| <aside | ||
| class="basis-[16rem] shrink-0 max-md:hidden sticky top-20 mr-4 bg-base transition-all rounded-xl p-2" | ||
| > | ||
| <ul> | ||
| { | ||
| // @TODO: Extract to its own component | ||
| files.map((file) => ( | ||
| <li> | ||
| <a class="px-2 menu-item" href={file.html_url}> | ||
| {file.name} | ||
| </a> | ||
| </li> | ||
| )) | ||
| } | ||
| </ul> | ||
| </aside> | ||
|
|
||
| <article class="article base-card grow" data-pagefind-body> | ||
| <h1 id={data.title}>{data.title}</h1> | ||
|
|
||
| <!-- @TODO: Move tags to its own component and add styling --> | ||
| <a href={`/notes/${data.tag}`}>{data.tag}</a>:::{data.tags?.join(', ')} | ||
|
|
||
| <div class="flex space-x-4 not-prose"> | ||
| <Badge icon="material-symbols:edit-calendar-rounded"> | ||
| <time datetime={data.pubDate.toISOString()}> | ||
| {formatDate(data.pubDate)} | ||
| </time> | ||
| </Badge> | ||
| </div> | ||
|
|
||
| <Content /> | ||
| </article> | ||
| </div> | ||
| </PageLayout> | ||
|
|
||
| <script> | ||
| // @TODO: Remove this when the TOC is removed too (in favor of the files listing) | ||
| // @TODO: Make sure to check if the debounce util is being used | ||
| // import debounce from '../../utils/debounce' | ||
|
|
||
| // const links = document.querySelectorAll('.menu-item') | ||
| // const handler = debounce(() => { | ||
| // for (const link of links) { | ||
| // const href = link.getAttribute('href') as string | ||
| // const target = document.querySelector(`[id="${href.slice(1)}"]`) | ||
| // if (target) { | ||
| // const offsetTop = | ||
| // target.getBoundingClientRect().top - document.body.clientHeight / 3 | ||
| // if (offsetTop <= 0) { | ||
| // links.forEach((link) => link.classList.remove('bg-hover')) | ||
| // link.classList.add('bg-hover') | ||
| // history.replaceState(null, '', href) | ||
| // } | ||
| // } | ||
| // } | ||
| // }) | ||
| // document.addEventListener('scroll', handler) | ||
| // document.addEventListener('DOMContentLoaded', handler) | ||
| </script> |
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,57 @@ | ||
| --- | ||
| import PageLayout from '../../layouts/PageLayout.astro' | ||
| import getTitle from '../../utils/getTitle' | ||
| import Pagination from '../Pagination.astro' | ||
| import type { CollectionEntry } from 'astro:content' | ||
| import type { Page } from 'astro' | ||
| import LinkedCard from '../Card/LinkedCard.astro' | ||
| import formatDate from '../../utils/formatDate' | ||
| interface Props { | ||
| notes: CollectionEntry<'notes'>[] | ||
| page: Page<CollectionEntry<'notes'>> | ||
| tags: CollectionEntry<'notes'>['data']['tag'][] | ||
| tag: CollectionEntry<'notes'>['data']['tag'] | ||
| } | ||
| const { notes, page, tag } = Astro.props | ||
| --- | ||
|
|
||
| <PageLayout title={getTitle('All Notes')} description="All Notes"> | ||
| <div class="grow"> | ||
| <ul class="space-y-4"> | ||
| { | ||
| notes.map((note) => ( | ||
| <li> | ||
| <LinkedCard | ||
| url={`/notes/${note.id}`} | ||
| img={note.data.image} | ||
| imgAlt={note.data.title} | ||
| title={note.data.title} | ||
| > | ||
| <p class="line-clamp-2 mb-2"> {note.data.description} </p> | ||
| <div class="mt-auto flex"> | ||
| <time | ||
| class="ml-auto" | ||
| datetime={note.data.pubDate.toISOString()} | ||
| > | ||
| {formatDate(note.data.pubDate)} | ||
| </time> | ||
| </div> | ||
| </LinkedCard> | ||
| </li> | ||
| )) | ||
| } | ||
| </ul> | ||
| <Pagination page={page} {tag} /> | ||
| </div> | ||
| </PageLayout> | ||
|
|
||
| <style> | ||
| .foo { | ||
| width: 80px; | ||
| height: 80px; | ||
| background-color: grey; | ||
| display: inline-block; | ||
| } | ||
| </style> |
Oops, something went wrong.