feat(blog): move blog into app (tone-row#417)

* feat(blog): move blog into app

* chore(actions): update to latest actions

* chore(blog): remove old blog

* chore(research): link research to notion

* chore(i18n): add only in english warning

* chore(repo): remove shared package

Author: rob-gordon

.github/workflows/benchmark.yml

@@ -5,11 +5,9 @@ jobs:
     name: Benchmark
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 16.x
-      - uses: pnpm/[email protected]
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/[email protected]
         with:
           version: 7
       - name: Install Deps

.github/workflows/e2e.yml

@@ -25,7 +25,7 @@ jobs:
           URL=https://$(echo $CLEAN | jq --arg h "$CURRENT_HASH" '.deployments[] | select(.meta.githubCommitSha==$h) | .url')
           echo ::set-output name=preview_url::$(echo $URL)
       - name: Checkout Code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Add env
         run: |
           touch app/.env
@@ -34,10 +34,8 @@ jobs:
           echo SUPABASE_TEST_URL=${{ secrets.SUPABASE_TEST_URL }} >> app/.env
           echo SUPABASE_TEST_ANON_KEY=${{ secrets.SUPABASE_TEST_ANON_KEY }} >> app/.env
       - name: Setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16.x
-      - uses: pnpm/[email protected]
+        uses: actions/setup-node@v3
+      - uses: pnpm/[email protected]
         with:
           version: 7
       - name: Install Playwright

.github/workflows/release.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Automatic GitHub Release

.github/workflows/test.yml

@@ -5,11 +5,9 @@ jobs:
     name: Test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 16.x
-      - uses: pnpm/[email protected]
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/[email protected]
         name: Install pnpm
         id: pnpm-install
         with:

api/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  /* ignore javascript files */
+  "ignorePatterns": ["*.js"],
+  "rules": {
+    "@typescript-eslint/no-explicity-any": ["off"],
+    "@typescript-eslint/no-var-requires": ["off"]
+  }
+}

blog/src/components/fakeIssues.json renamed to api/_fixtures/issues.json

@@ -7,11 +7,10 @@ export function niceDate(d: string) {
 export function dateString(d: string) {
   return format(parse(d, "yyyy-MM-dd", new Date()), "yyyy-MM-dd");
 }
+export function dateAsNumber(d: string) {
+  return parseInt(format(parse(d, "yyyy-MM-dd", new Date()), "yyyyMMdd"), 10);
+}
 
 export function niceDateIso(d: string) {
   return format(parseISO(d), "LLLL d, yyyy");
 }
-
-export function dateAsNumber(d: string) {
-  return parseInt(format(parse(d, "yyyy-MM-dd", new Date()), "yyyyMMdd"), 10);
-}

blog/src/components/fakeData.json renamed to api/_fixtures/releases.json

@@ -0,0 +1,38 @@
+import { marked } from "marked";
+
+import { IssueConnection, LinearClient } from "@linear/sdk";
+
+const linear = new LinearClient({
+  apiKey: process.env.LINEAR_API_KEY,
+});
+
+export async function getIssues() {
+  let initialIssues: IssueConnection["nodes"];
+  if (process.env.NODE_ENV === "development") {
+    initialIssues = (require("../_fixtures/issues.json") as IssueConnection)
+      .nodes;
+  } else {
+    initialIssues = await getLinearIssues();
+  }
+
+  const issues = initialIssues.map((issue) => {
+    return {
+      title: issue.title,
+      description: marked.parse(issue.description ?? ""),
+    };
+  });
+
+  return issues;
+}
+
+async function getLinearIssues() {
+  const ff = await linear.team("FF");
+  const issues = await ff.issues({
+    first: 10,
+    filter: {
+      // priority: { lte: 2, neq: 0 }
+      state: { name: { eq: "Todo" } },
+    },
+  });
+  return issues.nodes;
+}

blog/src/components/niceData.ts renamed to api/_lib/_dates.ts

@@ -0,0 +1,69 @@
+import { Client } from "@notionhq/client";
+import { NotionToMarkdown } from "notion-to-md";
+import { QueryDatabaseResponse } from "@notionhq/client/build/src/api-endpoints";
+import hljs from "highlight.js";
+import { marked } from "marked";
+
+const auth = process.env.NOTION_ACCESS_TOKEN;
+if (!auth) throw new Error("NOTION_ACCESS_TOKEN is not defined");
+
+// Initializing a client
+export const notion = new Client({
+  auth,
+});
+
+export const n2m = new NotionToMarkdown({ notionClient: notion });
+
+type Properties = Extract<
+  QueryDatabaseResponse["results"][number],
+  { properties: unknown }
+>["properties"];
+
+/**
+ * Returns the nested properties of a Notion page on an object using the same keys
+ */
+export function getNestedProperties(properties: Properties) {
+  const props: Record<string, string> = {};
+  for (const key in properties) {
+    const property = properties[key];
+    if ("title" in property) {
+      props[key] = property.title[0].plain_text;
+    } else if ("rich_text" in property) {
+      props[key] = property.rich_text[0].plain_text;
+    } else if ("date" in property) {
+      const pDate = property.date;
+      if (pDate) {
+        props[key] = pDate.start;
+      }
+    } else if ("status" in property) {
+      const status = property["status"] as { name: string };
+      if (status) {
+        props[key] = status.name;
+      }
+    } else {
+      console.log("Unknown property", key, property);
+    }
+  }
+  return props;
+}
+
+marked.setOptions({
+  highlight: function (code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : "plaintext";
+    return hljs.highlight(code, { language }).value;
+  },
+  langPrefix: "hljs language-",
+});
+
+export async function getPostHtmlFromId(id: string) {
+  const mdblocks = await n2m.pageToMarkdown(id);
+  const mdString = n2m.toMarkdownString(mdblocks);
+  const html = marked(mdString);
+  return html;
+}
+
+// tonerow/Flowchart-Fun-Areas-of-Research-6797865c1d744aa0babbea7d1558e8b3
+const AREAS_OF_RESEARCH_PAGE_ID = "6797865c1d744aa0babbea7d1558e8b3";
+export async function getAreasOfResearchHtml() {
+  return await getPostHtmlFromId(AREAS_OF_RESEARCH_PAGE_ID);
+}

api/_lib/_linear.ts

@@ -0,0 +1,41 @@
+import { Octokit } from "@octokit/core";
+import { marked } from "marked";
+import { niceDateIso } from "./_dates";
+
+export async function getReleases() {
+  let initialReleases = [];
+
+  if (process.env.NODE_ENV === "development") {
+    initialReleases = require("../_fixtures/releases.json") as Awaited<
+      ReturnType<typeof githubReleases>
+    >;
+  } else {
+    initialReleases = await githubReleases();
+  }
+
+  if (!initialReleases) return [];
+
+  const releases = initialReleases.map((release) => ({
+    id: release.id,
+    name: release.name,
+    date: release.published_at,
+    niceDate: niceDateIso(release.published_at ?? ""),
+    body: marked.parse(release.body ?? ""),
+    url: release.html_url,
+  }));
+
+  return releases;
+}
+
+async function githubReleases() {
+  const octokit = new Octokit({
+    auth: process.env.GITHUB_PERSONAL_ACCESS_TOKEN,
+  });
+
+  const response = await octokit.request("GET /repos/{owner}/{repo}/releases", {
+    owner: "tone-row",
+    repo: "flowchart-fun",
+  });
+
+  return response.data;
+}

api/_lib/_notion.ts

@@ -0,0 +1,36 @@
+import { VercelRequest, VercelResponse } from "@vercel/node";
+import { niceDate } from "../_lib/_dates";
+import {
+  notion,
+  getNestedProperties,
+  getPostHtmlFromId,
+} from "../_lib/_notion";
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const slug = req.query.slug;
+  if (!slug || typeof slug != "string") throw new Error("No slug");
+
+  // get notion post form column slug
+  const response = await notion.databases.query({
+    database_id: "b7a09b10aa83485b94092269239a8b38",
+    filter: {
+      property: "slug",
+      text: {
+        equals: slug,
+      },
+    },
+  });
+
+  if (!response.results.length) throw new Error("No results");
+
+  const post = response.results[0];
+
+  if (!("properties" in post)) throw new Error("No properties");
+  const { properties = {}, id } = post;
+  const { date, ...props } = getNestedProperties(properties);
+  let publishDate = niceDate(date);
+
+  const htmlContent = await getPostHtmlFromId(id);
+
+  res.json({ id, htmlContent, publishDate, ...props });
+}

api/_lib/_releases.ts

@@ -0,0 +1,28 @@
+import { VercelRequest, VercelResponse } from "@vercel/node";
+import { dateAsNumber, dateString, niceDate } from "../_lib/_dates";
+import { notion, getNestedProperties } from "../_lib/_notion";
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const response = await notion.databases.query({
+    database_id: "b7a09b10aa83485b94092269239a8b38",
+  });
+  const posts = response.results.map((page) => {
+    if (!("properties" in page)) throw new Error("No properties");
+    const { properties = {}, id } = page;
+    const { date, ...props } = getNestedProperties(properties);
+    if (!("title" in props)) throw new Error("No title");
+    if (!("status" in props)) throw new Error("No status");
+    if (!("slug" in props)) throw new Error("No slug");
+    if (!("description" in props)) throw new Error("No description");
+
+    if (!date) throw new Error("No date");
+
+    let sanitizedDate = dateString(date);
+    let publishDate = niceDate(date);
+    let rawDate = dateAsNumber(date);
+
+    return { id, rawDate, date: sanitizedDate, publishDate, ...props };
+  });
+
+  res.json(posts);
+}

api/blog/post.ts

@@ -0,0 +1,7 @@
+import { VercelRequest, VercelResponse } from "@vercel/node";
+import { getReleases } from "./_lib/_releases";
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const releases = await getReleases();
+  res.json(releases);
+}

api/blog/posts.ts

@@ -4,16 +4,32 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "check": "tsc --noEmit"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@notionhq/client": "^0.4.11",
+    "@linear/sdk": "^2.0.0",
+    "@notionhq/client": "^0.4.13",
+    "@octokit/core": "^4.2.0",
     "@sendgrid/mail": "^7.4.6",
     "@supabase/supabase-js": "^2",
+    "@vercel/node": "^2.8.15",
+    "date-fns": "^2.29.3",
+    "highlight.js": "^11.7.0",
+    "marked": "^4.1.1",
     "moniker": "^0.1.2",
+    "notion-to-md": "^2.5.5",
     "stripe": "^8.222.0"
+  },
+  "devDependencies": {
+    "@types/marked": "^4.0.7",
+    "@types/node": "^12.20.55",
+    "@typescript-eslint/eslint-plugin": "^5",
+    "@typescript-eslint/parser": "^5",
+    "eslint": "^8.3.0",
+    "typescript": "^4.8.4"
   }
 }

api/changelog.ts

@@ -0,0 +1,11 @@
+import { VercelRequest, VercelResponse } from "@vercel/node";
+import { getIssues } from "./_lib/_linear";
+import { getAreasOfResearchHtml } from "./_lib/_notion";
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const [issues, areasOfResearch] = await Promise.all([
+    getIssues(),
+    getAreasOfResearchHtml(),
+  ]);
+  res.status(200).json({ issues, areasOfResearch });
+}