-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
migrate to app router, with emotion working
- Loading branch information
1 parent
0decc55
commit 218f97a
Showing
167 changed files
with
1,559 additions
and
1,496 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,58 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
|
|
||
| 'use client' | ||
|
|
||
| import Link from 'next/link' | ||
| import { useParams } from 'next/navigation' | ||
| import { parse, format } from 'date-fns' | ||
|
|
||
| import { extractHeadings, Markdoc } from '../../../../components/Markdoc' | ||
| import { BlogPage } from '../../../../components/Page' | ||
| import { Heading } from '../../../../components/docs/Heading' | ||
| import { Type } from '../../../../components/primitives/Type' | ||
| import { type BlogPost } from './page' | ||
|
|
||
| export default function Page ({ post }: { post: BlogPost }) { | ||
| const params = useParams() | ||
| const headings = [{ id: 'title', depth: 1, label: post.title }, ...extractHeadings(post.content)] | ||
|
|
||
| const publishedDate = post.publishDate | ||
| const parsedDate = parse(publishedDate, 'yyyy-M-d', new Date()) | ||
| const formattedDateStr = format(parsedDate, 'MMMM do, yyyy') | ||
|
|
||
| return ( | ||
| <BlogPage headings={headings} editPath={`docs/${params?.post}.md`}> | ||
| <Heading level={1} id="title" css={{ marginBottom: 0 }}> | ||
| {post.title} | ||
| </Heading> | ||
| <Type | ||
| as="p" | ||
| id="author" | ||
| look="body14" | ||
| css={{ | ||
| marginTop: 'var(--space-large)', | ||
| marginBottom: '0.66em', | ||
| a: { textDecoration: 'none' }, | ||
| }} | ||
| > | ||
| <em> | ||
| <span>Published on {formattedDateStr}</span> | ||
| {post.authorHandle ? ( | ||
| <span> | ||
| {' '} | ||
| by{' '} | ||
| <Link href={post.authorHandle} target="_blank"> | ||
| {post.authorName} | ||
| </Link> | ||
| </span> | ||
| ) : ( | ||
| <span> by {post.authorName}</span> | ||
| )} | ||
| </em> | ||
| </Type> | ||
| {post.content.children.map((child, i) => ( | ||
| <Markdoc key={i} content={child} /> | ||
| ))} | ||
| </BlogPage> | ||
| ) | ||
| } |
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,71 @@ | ||
| import { type Tag, transform } from '@markdoc/markdoc' | ||
| import { notFound } from 'next/navigation' | ||
|
|
||
| import { getOgAbsoluteUrl } from '../../../../lib/og-util' | ||
| import { reader } from '../../../../lib/keystatic-reader' | ||
| import { baseMarkdocConfig } from '../../../../markdoc/config' | ||
| import { type EntryWithResolvedLinkedFiles } from '@keystatic/core/reader' | ||
| import type keystaticConfig from '../../../../keystatic.config' | ||
| import PageClient from './page-client' | ||
| import { type Metadata } from 'next' | ||
|
|
||
| export type BlogPost = NonNullable< | ||
| Omit< | ||
| EntryWithResolvedLinkedFiles<(typeof keystaticConfig)['collections']['posts']>, | ||
| 'content' | ||
| > & { | ||
| content: Tag | ||
| } | ||
| > | ||
|
|
||
| export default async function Page ({ params }) { | ||
| const post = await reader.collections.posts.read(params!.post, { | ||
| resolveLinkedFiles: true, | ||
| }) | ||
|
|
||
| if (!post) return notFound() | ||
|
|
||
| return ( | ||
| <PageClient | ||
| post={JSON.parse( | ||
| JSON.stringify({ | ||
| ...post, | ||
| // Prepare content for Markdoc renderer | ||
| content: transform(post.content.node, baseMarkdocConfig), | ||
| }) | ||
| )} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| // Dynamic SEO page metadata | ||
| export async function generateMetadata ({ params }): Promise<Metadata> { | ||
| const post = await reader.collections.posts.read(params!.post) | ||
|
|
||
| const title = post?.title ? `${post.title} - Keystone 6 Blog` : 'Keystone 6 Blog' | ||
|
|
||
| let ogImageUrl = post?.metaImageUrl | ||
| if (!ogImageUrl) { | ||
| ogImageUrl = getOgAbsoluteUrl({ | ||
| title, | ||
| type: 'Blog', | ||
| }) | ||
| } | ||
|
|
||
| return { | ||
| title, | ||
| description: post?.description, | ||
| openGraph: { | ||
| images: ogImageUrl, | ||
| }, | ||
| } | ||
| } | ||
|
|
||
| // Static HTML page generation for each document page | ||
| export async function generateStaticPaths () { | ||
| const posts = await reader.collections.posts.list() | ||
| return { | ||
| paths: posts.map((post) => ({ params: { post } })), | ||
| fallback: false, | ||
| } | ||
| } |
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,47 @@ | ||
| import { parse, format } from 'date-fns' | ||
|
|
||
| import { reader } from '../../../lib/keystatic-reader' | ||
| import { siteBaseUrl } from '../../../lib/og-util' | ||
| import ClientPage from './page-client' | ||
| import { type Metadata } from 'next' | ||
|
|
||
| const today = new Date() | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: 'Keystone Blog', | ||
| description: 'Blog posts from the team maintaining Keystone.', | ||
| openGraph: { | ||
| images: `${siteBaseUrl}/assets/blog/the-keystone-blog-cover.png` | ||
| } | ||
| } | ||
|
|
||
| export default async function Docs () { | ||
| const keystaticPosts = await reader.collections.posts.all() | ||
|
|
||
| const transformedPosts = keystaticPosts.map((post) => ({ | ||
| slug: post.slug, | ||
| frontmatter: { ...post.entry, content: null }, | ||
| })) | ||
|
|
||
| // Reverse chronologically sorted | ||
| const sortedPosts = transformedPosts | ||
| .map((p) => { | ||
| const publishedDate = p.frontmatter.publishDate | ||
| const parsedDate = parse(publishedDate, 'yyyy-M-d', today) | ||
| const formattedDateStr = format(parsedDate, 'MMMM do, yyyy') | ||
| return { | ||
| ...p, | ||
| frontmatter: { ...p.frontmatter }, | ||
| parsedDate: parsedDate, | ||
| formattedDateStr: formattedDateStr, | ||
| } | ||
| }) | ||
| .sort((a, b) => { | ||
| if (a.frontmatter.publishDate === b.frontmatter.publishDate) { | ||
| return a.frontmatter.title.localeCompare(b.frontmatter.title) | ||
| } | ||
| return b.frontmatter.publishDate.localeCompare(a.frontmatter.publishDate) | ||
| }) | ||
|
|
||
| return <ClientPage posts={sortedPosts} /> | ||
| } |
36 changes: 18 additions & 18 deletions
36
docs/pages/branding.tsx → docs/app/(site)/branding/page-client.tsx
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,10 @@ | ||
| import PageClient from './page-client' | ||
|
|
||
| export const metadata = { | ||
| title: 'KeytoneJS Brand', | ||
| description: 'Keystones brand assets and guidelines', | ||
| } | ||
|
|
||
| export default function Brand () { | ||
| return <PageClient /> | ||
| } |
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,33 @@ | ||
| 'use client' | ||
|
|
||
| import { useParams } from 'next/navigation' | ||
|
|
||
| import { type Document } from './page' | ||
|
|
||
| import { extractHeadings, Markdoc } from '../../../../components/Markdoc' | ||
| import { DocsPage } from '../../../../components/Page' | ||
| import { Heading } from '../../../../components/docs/Heading' | ||
|
|
||
| export default function PageClient ({ document }: { document: Document }) { | ||
| const params = useParams() | ||
|
|
||
| const headings = [ | ||
| { id: 'title', depth: 1, label: document.title }, | ||
| ...extractHeadings(document.content), | ||
| ] | ||
|
|
||
| return ( | ||
| <DocsPage | ||
| headings={headings} | ||
| editPath={`docs/${(params?.rest as string[]).join('/')}.md`} | ||
| > | ||
| <Heading level={1} id="title"> | ||
| {document.title} | ||
| </Heading> | ||
|
|
||
| {document.content.children.map((child, i) => ( | ||
| <Markdoc key={i} content={child} /> | ||
| ))} | ||
| </DocsPage> | ||
| ) | ||
| } |
Oops, something went wrong.