build: use @urbit/foundation-design-system

2024-10-04 01:07:47 +03:00 · 2022-08-02 12:53:24 -07:00 · 2022-08-02 12:53:24 -07:00 · d39a6261d1
commit d39a6261d1
parent f315288591
24 changed files with 984 additions and 4331 deletions
--- a/components/BasicPage.js
+++ b/components/BasicPage.js
@ -8,7 +8,7 @@ import {
  Section,
  Markdown,
  TableOfContents,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";
 import Header from "./Header";
 import Footer from "./Footer";
 import classNames from "classnames";
--- a/components/BlogPreview.js
+++ b/components/BlogPreview.js
@ -1,4 +1,4 @@
-import { BackgroundImage } from "foundation-design-system";
+import { BackgroundImage } from "@urbit/foundation-design-system";
 import Link from "next/link";
 import { generateDisplayDate, formatDate } from "../lib/lib";

@ -8,17 +8,18 @@ export default function BlogPreview({ post }) {
    <div key={post.slug} className="mb-20 cursor-pointer">
      <Link href={`/blog/${post.slug}`}>
        <div class="flex items-center md:flex-row flex-col">
-
          <div class="flex w-full">
-          {
-            // Not all blog posts have images
-            post.extra.image ? (
-              <BackgroundImage
-                src={post.extra.image}
-                className="rounded-lg aspect-w-5 aspect-h-4 w-full"
-              />
-            ) : <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100"/>
-          }
+            {
+              // Not all blog posts have images
+              post.extra.image ? (
+                <BackgroundImage
+                  src={post.extra.image}
+                  className="rounded-lg aspect-w-5 aspect-h-4 w-full"
+                />
+              ) : (
+                <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100" />
+              )
+            }
          </div>

          <div class="w-full md:pl-6 ">
@ -40,10 +41,11 @@ export default function BlogPreview({ post }) {
                ) : null}
              </div>
            </div>
-            <div className="text-wall-500 type-sub mt-1">{formatDate(date)}</div>
+            <div className="text-wall-500 type-sub mt-1">
+              {formatDate(date)}
+            </div>

            {post?.description && <p className="mt-6">{post.description}</p>}
-
          </div>
        </div>
      </Link>
--- a/components/ContentArea.js
+++ b/components/ContentArea.js
@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/router";
-import { TableOfContents } from "foundation-design-system";
+import { TableOfContents } from "@urbit/foundation-design-system";

 export default function ContentArea(props) {
  const [shortcut, setShortcut] = useState("");
--- a/components/Footer.js
+++ b/components/Footer.js
@ -1,4 +1,4 @@
-import { Footer as FooterComponent } from "foundation-design-system";
+import { Footer as FooterComponent } from "@urbit/foundation-design-system";
 import { footerData } from "../lib/constants";

 export default function Footer() {
--- a/components/Header.js
+++ b/components/Header.js
@ -4,7 +4,7 @@ import { useState } from "react";
 import classnames from "classnames";
 import MenuTray from "../components/MenuTray";
 import { capitalize } from "../lib/lib";
-import { IntraNav } from "foundation-design-system";
+import { IntraNav } from "@urbit/foundation-design-system";

 function ActiveLink({ children, href, className, currentPath }) {
  const firstCrumb = currentPath.split("/")[1];
--- a/components/PostPreview.js
+++ b/components/PostPreview.js
@ -1,5 +1,5 @@
 import Link from "next/link";
-import { BackgroundImage } from "foundation-design-system";
+import { BackgroundImage } from "@urbit/foundation-design-system";
 import { formatDate, generateDisplayDate } from "../lib/lib";

 export default function PostPreview(props) {
--- a/lib/cache.js
+++ b/lib/cache.js
@ -2,7 +2,7 @@ const fs = require("fs");
 const path = require("path");
 const matter = require("gray-matter");
 const toml = require("@iarna/toml");
-const markdoc = require("@markdoc/markdoc");
+const markdoc = require("@urbit/markdoc");

 const options = {
  engines: {
--- a/next.config.js
+++ b/next.config.js
@ -1,5 +1,4 @@
-const withTM = require("next-transpile-modules")(["foundation-design-system"]);
-module.exports = withTM({
+module.exports = {
  reactStrictMode: false,
  // target: 'serverless',
  webpack: (config, { isServer }) => {
@ -24,4 +23,4 @@ module.exports = withTM({
    // }
    return config;
  },
-});
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -15,27 +15,38 @@
  },
  "dependencies": {
    "@iarna/toml": "^2.2.5",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tlon/sigil-js": "^1.4.5",
-    "browserify-zlib": "^0.2.0",
+    "@urbit/foundation-design-system": "^0.1.1",
+    "@urbit/markdoc": "^0.1.4",
+    "axios": "^0.26.1",
+    "buffer": "^6.0.3",
    "classnames": "^2.3.1",
-    "downshift": "^6.1.7",
-    "foundation-design-system": "github:urbit/foundation-design-system",
+    "deepmerge": "^4.2.2",
+    "downshift": "^6.1.5",
+    "feed": "^4.2.2",
    "gray-matter": "^4.0.3",
    "leven-sort": "^3.0.0",
    "lodash.debounce": "^4.0.8",
-    "luxon": "^2.4.0",
-    "next": "12.1.6",
-    "next-transpile-modules": "^9.0.0",
+    "lodash.omit": "^4.5.0",
+    "luxon": "^2.0.2",
+    "next": "^12.1.5",
    "path-browserify": "^1.0.1",
-    "react": "^17",
-    "react-dom": "^17",
+    "prismjs": "^1.28.0",
+    "process": "^0.11.10",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
    "react-hotkeys": "^2.0.0",
-    "react-swipeable": "^7.0.0",
+    "react-swipeable": "^6.2.1",
+    "react-use-localstorage": "^3.5.3",
    "stream-browserify": "^3.0.0",
    "urbit-ob": "^5.0.1"
  },
  "devDependencies": {
-    "eslint": "8.18.0",
-    "eslint-config-next": "12.1.6"
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12",
+    "prettier": "^2.3.1",
+    "pretty-quick": "^3.1.0",
+    "tailwindcss": "^3.0.24"
  }
 }
--- a/pages/404.js
+++ b/pages/404.js
@ -1,6 +1,10 @@
 import Head from "next/head";
 import Meta from "../components/Meta";
-import { Container, SingleColumn, Section } from "foundation-design-system";
+import {
+  Container,
+  SingleColumn,
+  Section,
+} from "@urbit/foundation-design-system";
 import Header from "../components/Header";
 import Footer from "../components/Footer";

--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 import { configure, GlobalHotKeys } from "react-hotkeys";
 import Search from "../components/Search";
-import Head from 'next/head';
+import Head from "next/head";

-import "foundation-design-system/styles/globals.css";
-import "foundation-design-system/styles/markdown.css";
-import "foundation-design-system/styles/prism.css";
+import "@urbit/foundation-design-system/styles/globals.css";
+import "@urbit/foundation-design-system/styles/markdown.css";
+import "@urbit/foundation-design-system/styles/prism.css";
 import "../styles/developers.css";

 function MyApp({ Component, pageProps }) {
@ -50,14 +50,27 @@ function MyApp({ Component, pageProps }) {

  return (
    <>
-
-     <Head>
-      <link rel="icon" type="image/png" href="/images/favicon.ico" />
-      <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"/>
-      <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
-      <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
-      <link rel="manifest" href="/images/site.webmanifest"/>
-    </Head>
+      <Head>
+        <link rel="icon" type="image/png" href="/images/favicon.ico" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/images/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/images/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/images/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/images/site.webmanifest" />
+      </Head>

      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
      <Search
@ -74,7 +87,6 @@ function MyApp({ Component, pageProps }) {
          openSearch: openSearch,
        }}
      />
-
    </>
  );
 }
--- a/pages/blog.js
+++ b/pages/blog.js
@ -2,7 +2,11 @@ import Head from "next/head";
 import Header from "../components/Header";
 import Meta from "../components/Meta";
 import BlogPreview from "../components/BlogPreview";
-import { Container, SingleColumn, Section } from "foundation-design-system";
+import {
+  Container,
+  SingleColumn,
+  Section,
+} from "@urbit/foundation-design-system";
 import { getAllPosts } from "../lib/lib";
 import Footer from "../components/Footer";

--- a/pages/blog/[slug].js
+++ b/pages/blog/[slug].js
@ -20,7 +20,7 @@ import {
  SingleColumn,
  Section,
  TwoUp,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";

 export default function BlogPost({
  post,
--- a/pages/community/directory.js
+++ b/pages/community/directory.js
@ -6,7 +6,7 @@ import {
  SingleColumn,
  Section,
  TwoUp,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";
 import Sigil from "../../components/Sigil";
 import Card from "../../components/Card";
 import Meta from "../../components/Meta";
@ -50,8 +50,8 @@ export default function Directory({ search, directory }) {
        <Section>
          <p class="text-xl">
            Our community is comprised of individuals, all of whom happen to be
-            pretty friendly. Here’s a list of prominent groups and figures you’ll likely
-            encounter that are open to being contacted.
+            pretty friendly. Here’s a list of prominent groups and figures
+            you’ll likely encounter that are open to being contacted.
          </p>
        </Section>
        <Section>
--- a/pages/community/index.js
+++ b/pages/community/index.js
@ -7,7 +7,7 @@ import {
  Section,
  SingleColumn,
  TwoUp,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";
 import Meta from "../../components/Meta";
 import Card from "../../components/Card";

@ -28,12 +28,12 @@ export default function Community({ search }) {
        <Section>
          <h1>Community</h1>
        </Section>
-          <Section>
-            <p class="text-xl">
-              The developer community is a combination of top-down stewardship
-              from the Urbit Foundation and Tlon, as well as organic, bottom-up
-              coordination from unaffiliated enthusiasts.
-            </p>
+        <Section>
+          <p class="text-xl">
+            The developer community is a combination of top-down stewardship
+            from the Urbit Foundation and Tlon, as well as organic, bottom-up
+            coordination from unaffiliated enthusiasts.
+          </p>

          <div className="md:columns-2 mt-10 gap-x-8 pb-16">
            <p className="">
@ -97,13 +97,7 @@ export default function Community({ search }) {
              callout="Get Support"
              className="h-full"
            />
-            <Card
-              title=""
-              text=""
-              href=""
-              callout=""
-              className="hidden"
-            />
+            <Card title="" text="" href="" callout="" className="hidden" />
          </TwoUp>
        </Section>
      </SingleColumn>
--- a/pages/community/opportunities.js
+++ b/pages/community/opportunities.js
@ -1,6 +1,6 @@
 import { getPostBySlug } from "../../lib/lib";
 import BasicPage from "../../components/BasicPage";
-import { Markdown } from "foundation-design-system";
+import { Markdown } from "@urbit/foundation-design-system";

 export default function Post({ post, markdown, search, index }) {
  return (
--- a/pages/community/support.js
+++ b/pages/community/support.js
@ -1,6 +1,6 @@
 import { getPostBySlug } from "../../lib/lib";
 import BasicPage from "../../components/BasicPage";
-import { Markdown } from "foundation-design-system";
+import { Markdown } from "@urbit/foundation-design-system";

 export default function Post({ post, markdown, search, index }) {
  return (
--- a/pages/courses.js
+++ b/pages/courses.js
@ -7,7 +7,7 @@ import {
  SingleColumn,
  Section,
  TwoUp,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";
 import Header from "../components/Header";
 import Footer from "../components/Footer";

--- a/pages/guides/[[...slug]].js
+++ b/pages/guides/[[...slug]].js
@ -18,8 +18,13 @@ import {
  SingleColumn,
  TwoUp,
  Markdown,
-} from "foundation-design-system";
-import { Comms, Ringsig, MintFiller, guideDefault } from "../../components/icons";
+} from "@urbit/foundation-design-system";
+import {
+  Comms,
+  Ringsig,
+  MintFiller,
+  guideDefault,
+} from "../../components/icons";
 import guidesTree from "../../cache/guides.json";
 import { join } from "path";
 import { getPage, getPreviousPost, getNextPost } from "../../lib/lib";
--- a/pages/index.js
+++ b/pages/index.js
@ -9,7 +9,7 @@ import {
  SingleColumn,
  Section,
  TwoUp,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";
 import Link from "next/link";
 import {
  Comms,
--- a/pages/overview/[[...slug]].js
+++ b/pages/overview/[[...slug]].js
@ -9,7 +9,7 @@ import {
  Section,
  SingleColumn,
  TwoUp,
-} from "foundation-design-system";
+} from "@urbit/foundation-design-system";
 import Header from "../../components/Header";
 import Card from "../../components/Card";
 import Sidebar from "../../components/Sidebar";
@ -219,11 +219,12 @@ function Landing({ search }) {
          <div className="md:columns-2 space-y-4 mt-4 gap-x-8">
            <p>
              Urbit application development involves a client/server stack,
-              where Urbit is the server and the client can be any normal interface.
-              Unlike other servers, Urbit is also an entire operating system and ACID
-              datastore. The Urbit OS includes a filesystem, encrypted P2P network, timer,
-              application sandbox, software distribution mechanism, built-in identity
-              layer (Urbit ID), and HTTP server. This means that you can build and distribute
+              where Urbit is the server and the client can be any normal
+              interface. Unlike other servers, Urbit is also an entire operating
+              system and ACID datastore. The Urbit OS includes a filesystem,
+              encrypted P2P network, timer, application sandbox, software
+              distribution mechanism, built-in identity layer (Urbit ID), and
+              HTTP server. This means that you can build and distribute
              production-grade applications without dealing Linux, databases,
              authentication systems, devops, or proprietary app stores.
            </p>
--- a/pages/reference/[[...slug]].js
+++ b/pages/reference/[[...slug]].js
@ -8,7 +8,7 @@ import ContentArea from "../../components/ContentArea";
 import Sidebar from "../../components/Sidebar";
 import Pagination from "../../components/Pagination";
 import BasicPage from "../../components/BasicPage";
-import { Markdown } from "foundation-design-system";
+import { Markdown } from "@urbit/foundation-design-system";
 import referenceTree from "../../cache/reference.json";
 import { join } from "path";
 import { getPage, getPreviousPost, getNextPost } from "../../lib/lib";
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,10 +1,10 @@
-const markdoc = require("@markdoc/markdoc");
+const markdoc = require("@urbit/markdoc");

 module.exports = {
-  presets: [require("foundation-design-system/tailwind.config")],
+  presets: [require("@urbit/foundation-design-system/tailwind.config")],
  content: {
    files: [
-      "./node_modules/foundation-design-system/**/*.js",
+      "./node_modules/@urbit/foundation-design-system/dist/**/*.js",
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
      "./content/**/*.md",