Merge pull request #1 from urbit/copy-edits

Developer QOL fixes

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: false,
+    node: true,
+  },
+  extends: ["plugin:react/recommended", "standard", "prettier"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 8,
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: { "react/prop-types": 0 },
+};

components/Container.js

@@ -1,4 +1,5 @@
-// Ensures the root container is always 100vw, min 100vh, and centers all children along the y-axis
+import React from "react";
+
 export default function Container({ children }) {
   return (
     <div className="flex flex-col min-h-screen w-full items-center">

components/Header.js

@@ -1,10 +1,8 @@
+import React from "react";
 import Link from "next/link";
 import SingleColumn from "./SingleColumn";
 import { useRouter } from "next/router";
-// import { useState, useEffect } from "react";
 import classnames from "classnames";
-// import path from "path";
-// import Section from "../components/Section";
 
 function ActiveLink({ children, href, className, currentPath }) {
   const firstCrumb = currentPath.split("/")[1];
@@ -23,10 +21,6 @@ function ActiveLink({ children, href, className, currentPath }) {
 
 export default function Header(props) {
   const currentPath = useRouter().asPath;
-
-  const routeDepth = currentPath.split("/").length;
-
-  const firstCrumb = currentPath.split("/")[1];
   return (
     <div className="flex flex-col w-full items-center">
       <SingleColumn>

components/Layout.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Meta from "./Meta";
 import Header from "./Header";
 

components/Markdown.js

@@ -0,0 +1,24 @@
+import remark from "remark";
+import gfm from "remark-gfm";
+import slug from "remark-slug";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import rehypeRaw from "rehype-raw";
+
+const options = {
+  handlers: {},
+};
+
+export default async function Markdown(content) {
+  const result = await remark()
+    .use(remarkParse, options)
+    .use(gfm)
+    .use(slug)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeRaw)
+    .use(rehypeStringify)
+    .process(content);
+
+  return result.toString();
+}

components/Meta.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Head from "next/head";
 
 export default function Meta() {

components/Section.js

@@ -1,3 +1,4 @@
+import React from "react";
 import classnames from "classnames";
 
 // Provides a flexible layout building block

components/Sigil.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { sigil, reactRenderer } from "@tlon/sigil-js";
 
 export default function Sigil(props) {

components/SingleColumn.js

@@ -1,4 +1,5 @@
-// Provides a limited-width column with all children center-aligned along the vertical axis
+import React from "react";
+
 export default function SingleColumn({ children }) {
   return (
     <div className="flex flex-col w-full items-center max-w-screen-2xl">

content/learn.page.md

@@ -42,3 +42,5 @@ courses:
     link: https://urbit.org/docs/userspace/threads/overview
     description: TODO Maybe this is better for 101?
 ---
+
+We’ve made several self-guided tutorials and guides available to get your started on your journey, which should be read in order. All-in-all, a programmer with some experience should be able to work through this material and become proficient at Urbit programming in under a month of regular study.

content/why.md

@@ -2,6 +2,9 @@
 title: Why become an Urbit developer?
 ---
 
+by `~wolref-podlex`<br />
+Executive Director, Urbit Foundation
+
 Urbit is a novel general-purpose computer that’s captivated thousands, and it’s no wonder why—truly novel computing architectures are few and far between, and they tend to be highly transformative. For recent examples, consider iOS and Ethereum. We think Urbit is at least as big of a deal.
 
 Most developers are drawn to Urbit because they’re fascinated by it—this author being no exception. The artful elegance of Nock, Hoon, and Arvo are reason enough for many, but are by no means the only reasons to bother learning Urbit.

package.json

@@ -9,19 +9,32 @@
     "@tailwindcss/typography": "^0.4.1",
     "@tlon/sigil-js": "^1.4.4",
     "classnames": "^2.3.1",
+    "deepmerge": "^4.2.2",
     "gray-matter": "^4.0.3",
+    "html-entities": "^2.3.2",
     "next": "latest",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-remark": "^2.0.3",
-    "remark": "13.0.0",
+    "rehype-raw": "^6.1.0",
+    "rehype-stringify": "^9.0.2",
+    "remark": "13",
+    "remark-gfm": "^3.0.0",
     "remark-html": "13.0.1",
+    "remark-parse": "^10.0.0",
     "remark-prism": "^1.3.6",
+    "remark-rehype": "^10.0.0",
     "remark-slug": "^7.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.3.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.26.1",
     "postcss": "^8.3.8",
     "tailwindcss": "^2.2.16"
   }

pages/[slug].js

@@ -1,25 +1,17 @@
+import React from "react";
 import fs from "fs";
-import matter from "gray-matter";
-import html from "remark-html";
-import { Remark } from "react-remark";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-import Head from "next/head";
-import Link from "next/link";
 import path from "path";
-import remarkSlug from "remark-slug";
+import Head from "next/head";
+import matter from "gray-matter";
+import { decode } from "html-entities";
 import { contentFilePaths, CONTENT_PATH } from "../lib/api";
+import Markdown from "../components/Markdown";
 import Container from "../components/Container";
 import Layout from "../components/Layout";
 import Section from "../components/Section";
 import SingleColumn from "../components/SingleColumn";
 
-export default function DynamicPage({ content, data }) {
-  const router = useRouter();
-  // if (!router.isFallback && !source?.slug) {
-  //   return <div>You die</div>;
-  // }
-
+export default function DynamicPage({ markdown, data }) {
   return (
     <Layout>
       <Head>
@@ -32,7 +24,7 @@ export default function DynamicPage({ content, data }) {
           </Section>
           <Section>
             <div className="prose lg:prose-lg">
-              <Remark remarkPlugins={[html]}>{content}</Remark>
+              <div dangerouslySetInnerHTML={{ __html: decode(markdown) }} />
             </div>
           </Section>
         </SingleColumn>
@@ -45,11 +37,12 @@ export const getStaticProps = async ({ params }) => {
   const pagePath = path.join(CONTENT_PATH, `${params.slug}.md`);
   const source = fs.readFileSync(pagePath);
   const { content, data } = matter(source);
+  const markdown = await Markdown(content);
 
   return {
     props: {
-      content: content,
-      data: data,
+      markdown,
+      data,
     },
   };
 };

pages/_app.js

@@ -1,3 +1,4 @@
+import React from "react";
 import "../styles/globals.css";
 import "../styles/prism.css";
 

pages/community.js

@@ -1,17 +1,15 @@
+import React from "react";
 import Head from "next/head";
 import matter from "gray-matter";
-import html from "remark-html";
-import { Remark } from "react-remark";
+import { decode } from "html-entities";
 import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Section from "../components/Section";
 import SingleColumn from "../components/SingleColumn";
+import Markdown from "../components/Markdown";
 import Sigil from "../components/Sigil";
 
-export default function StaticCommunityPage() {
-  const source = require(`../content/community.page.md`);
-  const { content, data } = matter(source.default);
-
+export default function DynamicPage({ parsed, data }) {
   return (
     <Layout>
       <Head>
@@ -23,9 +21,10 @@ export default function StaticCommunityPage() {
             <h1>{data.title}</h1>
           </Section>
           <Section>
-            <div className="prose lg:prose-lg">
-              <Remark remarkPlugins={[html]}>{content}</Remark>
-            </div>
+            <div
+              className="prose lg:prose-lg"
+              dangerouslySetInnerHTML={{ __html: decode(parsed) }}
+            />
             <div className="prose lg:prose-lg">
               <div className="py-8 grid gap-8 xl:grid-cols-2">
                 {data.directory.map((person, i) => (
@@ -57,3 +56,16 @@ export default function StaticCommunityPage() {
     </Layout>
   );
 }
+
+export const getServerSideProps = async ({ context }) => {
+  const source = require(`../content/community.page.md`);
+  const { content, data } = matter(source.default);
+  const parsed = await Markdown(content);
+
+  return {
+    props: {
+      parsed,
+      data,
+    },
+  };
+};

pages/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import Container from "../components/Container";

pages/learn.js

@@ -1,17 +1,14 @@
-import Head from "next/head";
-import matter from "gray-matter";
-import html from "remark-html";
-import { Remark } from "react-remark";
-import Layout from "../components/Layout";
-import Container from "../components/Container";
-import Section from "../components/Section";
-import SingleColumn from "../components/SingleColumn";
-import Sigil from "../components/Sigil";
-
-export default function StaticLearnPage() {
-  const source = require(`../content/learn.page.md`);
-  const { content, data } = matter(source.default);
+import React from 'react'
+import Head from 'next/head'
+import matter from 'gray-matter'
+import { decode } from 'html-entities'
+import Layout from '../components/Layout'
+import Container from '../components/Container'
+import Section from '../components/Section'
+import SingleColumn from '../components/SingleColumn'
+import Markdown from '../components/Markdown'
 
+export default function DynamicPage ({ parsed, data }) {
   return (
     <Layout>
       <Head>
@@ -23,15 +20,10 @@ export default function StaticLearnPage() {
             <h1>{data.title}</h1>
           </Section>
           <Section>
-            <div className="prose lg:prose-lg">
-              <p>
-                We’ve made several self-guided tutorials and guides available to
-                get your started on your journey, which should be read in order.
-                All-in-all, a programmer with some experience should be able to
-                work through this material and become proficient at Urbit
-                programming in under a month of regular study.
-              </p>
-            </div>
+            <div
+              className="prose lg:prose-lg"
+              dangerouslySetInnerHTML={{ __html: decode(parsed) }}
+            />
           </Section>
         </SingleColumn>
         <SingleColumn>
@@ -42,19 +34,22 @@ export default function StaticLearnPage() {
           </Section>
         </SingleColumn>
         <div className="px-8 lg:px-16 grid gap-8 lg:grid-cols-2 2xl:grid-cols-4 prose">
-          {data.courses
-            .filter((course) => course.course.includes("101"))
-            .map((course, i) => (
-              <div className="px-8 rounded-xl bg-wall-100" key={course.link}>
-                <h3>
-                  <a href={course.link}>{course.title}</a>
-                </h3>
-                <p>{course.description}</p>
-                <p className="text-sm uppercase tracking-wide">
-                  {course.duration}
-                </p>
-              </div>
-            ))}
+          {data.courses.map((course, i) => {
+            if (course.course === 'Urbit 101') {
+              return (
+                <div className="px-8 rounded-xl bg-wall-100" key={course.link}>
+                  <h3>
+                    <a href={course.link}>{course.title}</a>
+                  </h3>
+                  <p>{course.description}</p>
+                  <p className="text-sm uppercase tracking-wide">
+                    {course.duration}
+                  </p>
+                </div>
+              )
+            }
+            return false
+          })}
         </div>
         <SingleColumn>
           <Section>
@@ -69,21 +64,37 @@ export default function StaticLearnPage() {
           </Section>
         </SingleColumn>
         <div className="px-8 lg:px-16 grid gap-8 lg:grid-cols-2 2xl:grid-cols-4 prose pb-16">
-          {data.courses
-            .filter((course) => course.course.includes("201"))
-            .map((course, i) => (
-              <div className="px-8 rounded-xl bg-wall-100" key={course.link}>
-                <h3>
-                  <a href={course.link}>{course.title}</a>
-                </h3>
-                <p>{course.description}</p>
-                <p className="text-sm uppercase tracking-wide">
-                  {course.duration}
-                </p>
-              </div>
-            ))}
+          {data.courses.map((course, i) => {
+            if (course.course === 'Urbit 201') {
+              return (
+                <div className="px-8 rounded-xl bg-wall-100" key={course.link}>
+                  <h3>
+                    <a href={course.link}>{course.title}</a>
+                  </h3>
+                  <p>{course.description}</p>
+                  <p className="text-sm uppercase tracking-wide">
+                    {course.duration}
+                  </p>
+                </div>
+              )
+            }
+            return false
+          })}
         </div>
       </Container>
     </Layout>
-  );
+  )
+}
+
+export const getServerSideProps = async ({ context }) => {
+  const source = require('../content/learn.page.md')
+  const { content, data } = matter(source.default)
+  const parsed = await Markdown(content)
+
+  return {
+    props: {
+      parsed,
+      data
+    }
+  }
 }