-
Notifications
You must be signed in to change notification settings - Fork 5
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
1 parent
bf5cd58
commit f0498cc
Showing
10 changed files
with
316 additions
and
56 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,43 @@ | ||
| import { TinaMarkdown } from "tinacms/dist/rich-text"; | ||
| import React from "react"; | ||
| import { Authors } from "../../../tina/__generated__/types"; | ||
|
|
||
| const PageSection = (props: any) => { | ||
| return ( | ||
| <> | ||
| <h2>{props.heading}</h2> | ||
| <p>{props.content}</p> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const components = { | ||
| PageSection, | ||
| }; | ||
|
|
||
| export function RichTextSectionRenderer({ content }: { content: any }) { | ||
| return <TinaMarkdown components={components} content={content} />; | ||
| } | ||
|
|
||
| export function AuthorRenderer({ | ||
| author, | ||
| }: { | ||
| author: Authors; | ||
| }): React.ReactNode { | ||
| return ( | ||
| <> | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img | ||
| src={author.avatarURL as string | undefined} | ||
| alt={`Profile picture of ${author.name}`} | ||
| style={{ | ||
| width: "1em", | ||
| height: "1em", | ||
| objectFit: "contain", | ||
| borderRadius: "50%", | ||
| }} | ||
| />{" "} | ||
| {author.name} | ||
| </> | ||
| ); | ||
| } |
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,41 @@ | ||
| import React from "react"; | ||
| import { formatDateAndTime } from "@/scripts/Utils/DateAndTime/Format"; | ||
| import { Authors, PostQuery } from "../../../tina/__generated__/types"; | ||
| import { | ||
| AuthorRenderer, | ||
| RichTextSectionRenderer, | ||
| } from "@/components/Blog/Elements"; | ||
|
|
||
| export default function BlogPost({ | ||
| data, | ||
| }: { | ||
| data: PostQuery; | ||
| }): React.ReactNode { | ||
| return ( | ||
| <> | ||
| <h1>{data.post.title}</h1> | ||
| <p> | ||
| <AuthorRenderer author={data.post.author as Authors} /> | ||
| <br /> | ||
| {data.post.datePosted != null ? ( | ||
| <>Posted on {formatDateAndTime(new Date(data.post.datePosted))}.</> | ||
| ) : null} | ||
| </p> | ||
| <small> | ||
| <RichTextSectionRenderer content={data.post.description} /> | ||
| </small> | ||
| <RichTextSectionRenderer content={data.post.body} /> | ||
| <small> | ||
| <p> | ||
| {(data.post.tags?.length ?? 0) > 0 ? ( | ||
| <> | ||
| Tags: <i>{(data.post.tags ?? []).join(", ")}</i> | ||
| </> | ||
| ) : ( | ||
| <i>No tags on this blog post.</i> | ||
| )} | ||
| </p> | ||
| </small> | ||
| </> | ||
| ); | ||
| } |
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,48 @@ | ||
| import { Authors } from "../../../tina/__generated__/types"; | ||
| import React from "react"; | ||
| import { | ||
| AuthorRenderer, | ||
| RichTextSectionRenderer, | ||
| } from "@/components/Blog/Elements"; | ||
| import { formatDateAndTime } from "@/scripts/Utils/DateAndTime/Format"; | ||
| import Link from "next/link"; | ||
|
|
||
| export type BlogPostPreview = { | ||
| title: string; | ||
| author: Authors; | ||
| description: string; | ||
| postedDate: string | null; | ||
| link: string; | ||
| }; | ||
|
|
||
| export default function BlogPostPreviewRenderer({ | ||
| preview, | ||
| }: { | ||
| preview: BlogPostPreview; | ||
| }): React.ReactNode { | ||
| return ( | ||
| <> | ||
| <div className="card mb-2"> | ||
| <div className="card-body"> | ||
| <h5 className="card-title">{preview.title}</h5> | ||
| <h6 className="card-subtitle mb-2 text-body-secondary"> | ||
| {preview.postedDate !== null ? ( | ||
| <> | ||
| Posted by <AuthorRenderer author={preview.author} /> on{" "} | ||
| {formatDateAndTime(new Date(preview.postedDate))}. | ||
| </> | ||
| ) : ( | ||
| <AuthorRenderer author={preview.author} /> | ||
| )} | ||
| </h6> | ||
| <div className="card-text"> | ||
| <RichTextSectionRenderer content={preview.description} /> | ||
| </div> | ||
| <Link href={preview.link} className="card-link"> | ||
| View post | ||
| </Link> | ||
| </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,83 @@ | ||
| import client from "../../../tina/__generated__/client"; | ||
| import getAppProps, { AppProps } from "@/components/WithAppProps"; | ||
| import Layout from "@/components/Layout"; | ||
| import { Authors } from "../../../tina/__generated__/types"; | ||
| import React from "react"; | ||
| import BlogPostPreviewRenderer, { | ||
| BlogPostPreview, | ||
| } from "@/components/Blog/Preview"; | ||
| import { createBreadCrumbSegment } from "@/components/Layout/layout"; | ||
|
|
||
| type BlogProps = { | ||
| blogPostPreviews: BlogPostPreview[]; | ||
| appProps: AppProps; | ||
| }; | ||
|
|
||
| const pageName = `All blog posts | Blog`; | ||
|
|
||
| export default function AllBlogPosts(props: BlogProps) { | ||
| return ( | ||
| <Layout | ||
| title={pageName} | ||
| currentPage={pageName} | ||
| appProps={props.appProps} | ||
| description="All of Awesome Arcade's blog posts!" | ||
| keywords="Game development, Awesome, Modules, Libraries, Extensions, Tools, Curated, Arcade, Useful, Curated list, MakeCode, Awesome extensions, Useful extensions, MakeCode Arcade, MakeCode Arcade Extensions, Arcade Extensions, Awesome tools, Useful tools, MakeCode Arcade, MakeCode Arcade tools, Arcade tools, Blog, Awesome Arcade blog, Blog post, Awesome Arcade blog post, All blog posts, All Awesome Arcade blog posts" | ||
| breadCrumbs={[ | ||
| createBreadCrumbSegment("Blog", "/blog"), | ||
| createBreadCrumbSegment("All blog posts", "/blog/all"), | ||
| ]} | ||
| > | ||
| <h1>All blog posts</h1> | ||
| <p>Here is a list of all blog posts on Awesome Arcade. Enjoy reading!</p> | ||
| { | ||
| <> | ||
| {props.blogPostPreviews.map((preview) => { | ||
| return ( | ||
| <BlogPostPreviewRenderer preview={preview} key={preview.title} /> | ||
| ); | ||
| })} | ||
| </> | ||
| } | ||
| </Layout> | ||
| ); | ||
| } | ||
|
|
||
| export async function getStaticProps(): Promise<{ | ||
| props: BlogProps; | ||
| }> { | ||
| const postsListData = await client.queries.postConnection(); | ||
|
|
||
| const previews: BlogPostPreview[] = []; | ||
|
|
||
| for (const edge of postsListData.data.postConnection.edges ?? []) { | ||
| if (!edge || !edge.node) { | ||
| continue; | ||
| } | ||
| const post = edge.node; | ||
| previews.push({ | ||
| title: post.title, | ||
| author: post.author as Authors, | ||
| description: post.description ?? "", | ||
| postedDate: post.datePosted == null ? null : post.datePosted, | ||
| link: `/blog/${post._sys.filename}`, | ||
| }); | ||
| } | ||
|
|
||
| previews.sort((a, b) => { | ||
| if (a.postedDate === null) { | ||
| return 1; | ||
| } | ||
| if (b.postedDate === null) { | ||
| return -1; | ||
| } | ||
| return new Date(b.postedDate).getTime() - new Date(a.postedDate).getTime(); | ||
| }); | ||
|
|
||
| return { | ||
| props: { | ||
| blogPostPreviews: previews, | ||
| appProps: await getAppProps(), | ||
| }, | ||
| }; | ||
| } |
Oops, something went wrong.