-
Notifications
You must be signed in to change notification settings - Fork 165
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Implement author profiles * Implement suggestions from review * Remove github links * Add back link & remove duplicate separation * Updates from talking & doc'ing * Remove alt image * Fix article label & implement 404 logic * Apply suggestions from code review Co-authored-by: Chris Swithinbank <[email protected]> * Update other 404 logic * Move profile component * fix import * Revert 404 changes * Use status --------- Co-authored-by: Chris Swithinbank <[email protected]>
- Loading branch information
1 parent
ca3c75d
commit 47b12d5
Showing
5 changed files
with
146 additions
and
7 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| --- | ||
| import { Image } from 'astro:assets'; | ||
| import LeftArrowIcon from '~/icons/LeftArrowIcon.tsx' | ||
| import type { Author } from '../_types/index.ts'; | ||
| interface Props { | ||
| author: Author; | ||
| } | ||
| const { author } = Astro.props; | ||
| --- | ||
|
|
||
| <a | ||
| href="/themes/" | ||
| data-astro-prefetch | ||
| class="flex items-center gap-2 self-start text-sm text-astro-gray-200 mb-4" | ||
| > | ||
| <LeftArrowIcon aria-hidden="true" /> | ||
| <span class="pr-2">Back to all themes</span> | ||
| </a> | ||
| <div class="flex lg:flex-col flex-wrap items-center gap-4"> | ||
| <Image | ||
| inferSize | ||
| src={author.avatar ?? ''} | ||
| height={48} | ||
| width={48} | ||
| class="size-12 lg:w-full h-fit" | ||
| alt="" | ||
| /> | ||
| <h1 class="border-astro-gray-500 lg:hidden heading-3">{author.name}</h1> | ||
| <div class="flex flex-col gap-4 pt-2 lg:pt-8 w-full"> | ||
| <div class="flex items-baseline justify-between"> | ||
| <small class="code text-astro-gray-200">Joined</small> | ||
| { | ||
| new Date(author.createdAt).toLocaleDateString('en-US', { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric', | ||
| }) | ||
| } | ||
| </div> | ||
| { | ||
| author.url && ( | ||
| <hr class="border-astro-gray-500" /> | ||
| <div class="flex items-baseline justify-between"> | ||
| <small class="code text-astro-gray-200">Website</small> | ||
| <a class="link" href={author.url}> | ||
| {author.url.replace(/^https?:\/\/|\/$/g, '')} | ||
| </a> | ||
| </div> | ||
| ) | ||
| } | ||
| </div> | ||
| </div> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| --- | ||
| import CardGrid from '~/components/CardGrid.astro'; | ||
| import CardGridGroup from '~/components/CardGridGroup.astro'; | ||
| import Pagination from '~/components/Pagination.astro'; | ||
| import SidebarLayout from '~/components/SidebarLayout.astro'; | ||
| import SidebarPanel from '~/components/SidebarPanel.astro'; | ||
| import { THEMES_API_URL } from '~/helpers/constants.ts'; | ||
| import { paginate } from '~/helpers/paginate.js'; | ||
| import MainLayout from '~/layouts/MainLayout.astro'; | ||
| import SubmitTheme from '../../_components/SubmitTheme.astro'; | ||
| import Profile from '../../_components/ThemeAuthorProfile.astro'; | ||
| import ThemeCard from '../../_components/ThemeCard.astro'; | ||
| import type { ThemeAndAuthor } from '../../_types/index.ts'; | ||
| export const prerender = false; | ||
| // with '[...page]' rest routes we'll get undefined for the first page, default that to 1 | ||
| // otherwise, try to parse the page number from the URL | ||
| const currentPage = | ||
| typeof Astro.params.page === 'undefined' ? 1 : Number.parseInt(Astro.params.page); | ||
| // invalid page number! | ||
| if (!currentPage || Number.isNaN(currentPage)) { | ||
| return Astro.redirect('/404', 404); | ||
| } | ||
| const res = await fetch( | ||
| `${THEMES_API_URL}/api/themes/author?id=${Astro.params.id}`, | ||
| ); | ||
| if (res.status !== 200) return Astro.redirect('/404', 404); | ||
| const allThemes: ThemeAndAuthor[] = await res.json(); | ||
| // take all matching themes and create a paginated list of results | ||
| const paginatedResults = paginate({ | ||
| data: allThemes, | ||
| pageSize: 12, | ||
| currentPage, | ||
| route: `/themes/author/${Astro.params.id}/[...page]`, | ||
| }); | ||
| const { page, allPages } = paginatedResults; | ||
| // make sure the requested page number is valid, if not redirect to the first page of results | ||
| if (allPages.length && !page) { | ||
| return Astro.redirect(allPages[0]); | ||
| } | ||
| const themes = page.data; | ||
| --- | ||
|
|
||
| <MainLayout title="Themes" image={{ src: '/og/themes.jpg', alt: 'Explore the possibilities' }}> | ||
| <SidebarLayout> | ||
| <Fragment slot="sidebar"> | ||
| <SidebarPanel> | ||
| <Profile author={themes[0].Author} /> | ||
| </SidebarPanel> | ||
| <SubmitTheme class="hidden lg:block" /> | ||
| </Fragment> | ||
|
|
||
| <div | ||
| class="flex flex-col items-center gap-8 pb-10 pt-8 sm:px-4 sm:pb-12 md:gap-10 md:pb-16 lg:gap-12 lg:px-8 lg:pb-20 lg:pt-10 xl:px-10" | ||
| > | ||
| <CardGridGroup> | ||
| <header class="w-full"> | ||
| <h1 class="heading-3 max-lg:hidden">{themes[0].Author.name}</h1> | ||
| </header> | ||
| <CardGrid class="w-full max-w-screen-xl sm:grid-cols-2 xl:grid-cols-3"> | ||
| {themes.map((theme) => <ThemeCard as="h2" theme={theme} />)} | ||
| </CardGrid> | ||
| </CardGridGroup> | ||
| { | ||
| allPages.length > 1 && ( | ||
| <Pagination restRoute page={page} allPages={allPages} class="mx-auto" /> | ||
| ) | ||
| } | ||
| </div> | ||
|
|
||
| <SubmitTheme class="lg:hidden" /> | ||
| </SidebarLayout> | ||
| </MainLayout> |