[ECO-1871] Add Docusaurus skeleton (#107)

Co-authored-by: Matt <90358481+xbtmatt@users.noreply.github.com>

.github/workflows/verify-doc-site-build.yaml

@@ -0,0 +1,28 @@
+---
+jobs:
+  build-docs:
+    defaults:
+      run:
+        working-directory: 'doc/doc-site'
+    runs-on: 'ubuntu-latest'
+    steps:
+    - uses: 'actions/checkout@v3'
+    - uses: 'actions/setup-node@v3'
+      with:
+        node-version: 20
+    - uses: 'pnpm/action-setup@v2'
+      with:
+        run_install: false
+        version: '9.1.2'
+    - run: 'pnpm install --frozen-lockfile'
+    - run: 'pnpm build'
+name: 'Verify docs site build'
+'on':
+  pull_request:
+    branches:
+    - 'main'
+    paths:
+    - 'doc/doc-site/**'
+    - '.github/workflows/verify-doc-site-build.yaml'
+  workflow_dispatch: null
+...

cfg/pre-commit-config.yaml

@@ -1,6 +1,7 @@
 # cspell:word autofix
 # cspell:word autoflake
 # cspell:word isort
+# cspell:word frontmatter
 # cspell:word latexindent
 # cspell:word markdownlint
 # cspell:word mdformat
@@ -133,6 +134,8 @@ repos:
   hooks:
   - additional_dependencies:
     - 'mdformat-gfm'
+    - 'mdformat-frontmatter'
+    - 'mdformat-myst'
     id: 'mdformat'
   repo: 'https://github.com/executablebooks/mdformat'
   rev: '0.7.17'

doc/doc-site/.gitignore

@@ -0,0 +1,3 @@
+.docusaurus
+/build
+/node_modules

doc/doc-site/README.md

@@ -0,0 +1,28 @@
+# emojicoin dot fun Docs
+
+## Building locally
+
+1. Install [Homebrew] or a similar package manager.
+
+1. Install [pnpm]:
+
+   ```zsh
+   brew install pnpm
+   ```
+
+1. Install the docs site package dependencies:
+
+   ```zsh
+   pnpm install
+   ```
+
+1. To serve a local site preview:
+
+   ```zsh
+   pnpm start
+   ```
+
+1. Open <http://localhost:3000>
+
+[homebrew]: https://brew.sh
+[pnpm]: https://pnpm.io/

doc/doc-site/docs/security.md

@@ -0,0 +1,3 @@
+# Security
+
+Doesn't get more secure than this.

doc/doc-site/docs/this-is-a-subdir/some-doc-page.md

@@ -0,0 +1,5 @@
+# Some doc page
+
+## Heading
+
+This is text.

doc/doc-site/docs/this-is-another-subdir/index.md

@@ -0,0 +1,3 @@
+# Some index
+
+This is the index page.

doc/doc-site/docs/this-is-another-subdir/some-other-doc-page.md

@@ -0,0 +1,5 @@
+# Some doc page
+
+## Heading
+
+This is text.

doc/doc-site/docs/welcome.md

@@ -0,0 +1,142 @@
+---
+slug: /
+title: 🍆 Welcome 🍆
+hide_title: true
+description: Documentation for emojicoin dot fun
+---
+
+![Check out this alt text](/img/banner.svg)
+
+This is text. Hello `kristina-in-monospace`!
+
+## 🍆🍆🍆 Hello
+
+That's right, you can use emojis in a header.
+
+Or in a paragraph: 🍆🍆🍆🍆🍆🍆🍆🍆🍆🍆🍆🍆🍆🍆🍆
+
+## Equations
+
+Inline mode: $x = \frac{a}{b}$
+
+Display mode:
+
+$$
+x = \frac{a}{b}
+$$
+
+## Mermaid diagram
+
+```mermaid
+flowchart TB
+
+subgraph gcp[Google Cloud Platform]
+    subgraph load-balancer[Global Load Balancer]
+        subgraph armor[GCP Cloud Armor]
+        direction LR
+            rate-limiting[IP Rate Limiting]
+            ddos[Layer 7 DDoS Protection]
+        end
+    end
+    load-balancer-->rest-service
+    subgraph rest-service[REST API Cloud Run Service]
+        subgraph r-instance-1[PostgREST Instance]
+            ri1c[Container]
+        end
+        subgraph r-instance-2[PostgREST Instance]
+            ri2c[Container]
+        end
+    end
+    rest-service --> rest-connector
+    subgraph vpc[PostgreSQL VPC]
+        aggregator-container-->|Private IP|cloud-pg
+        processor-container-->|Private IP|cloud-pg
+        subgraph processor-image[Processor VM]
+            processor-container[Container]
+        end
+        subgraph aggregator-image[Aggregator VM]
+            aggregator-container[Container]
+        end
+        processor-container-->processor_disk[Config disk]
+        cloud-pg[(PostgreSQL via Cloud SQL)]
+        rest-connector(REST VPC connector)--->cloud-pg
+    end
+end
+processor-container-->grpc[Aptos Labs gRPC]
+pg_admin[PostgreSQL Admin]-->|Public IP|cloud-pg
+leaderboard[Vercel Leaderboard]-->load-balancer
+
+classDef blue fill:#134d52
+classDef green fill:#13521d
+classDef yellow fill:#979e37
+classDef purple fill:#800080
+class load-balancer purple;
+class gcp blue;
+class vpc green;
+class ws-service yellow;
+class rest-service yellow;
+```
+
+## Reference link
+
+This sentence uses reference links: [the security page].
+
+## A table
+
+| A column | Account address |
+| -------- | --------------- |
+| Hi       | `hey`           |
+| There    | `you`           |
+
+:::tip
+
+This is a tip admonition.
+
+:::
+
+:::note
+
+This is a note admonition.
+
+:::
+
+:::caution
+
+This is a caution admonition.
+
+:::
+
+Check out this monospace code block:
+
+> ```text
+>                                    1001 [35 -> 38]
+>                                   /    \
+>               [50 -> 60 -> 55] 1000    1003 [20]
+> AVL queue head ^                      /    \
+>                          [15 -> 5] 1002    1004 [4 -> 10]
+>                                                       ^ AVL queue tail
+> ```
+
+Check out this fenced code block:
+
+```toml
+[dependencies.Econia]
+git = "https://github.com/econia-labs/econia"
+subdir = "src/move/econia"
+rev = "mainnet"
+```
+
+## External resources
+
+This is a list where each item is a reference link:
+
+- [Discord]
+- [GitHub]
+- [Medium]
+- [Twitter]
+
+[discord]: https://discord.gg/econia
+[github]: https://github.com/econia-labs/econia
+[medium]: https://medium.com/econialabs
+[the security page]: security
+[twitter]: https://twitter.com/econialabs

doc/doc-site/docusaurus.config.js

@@ -0,0 +1,101 @@
+// cspell:word crossorigin
+// cspell:word easyops
+// cspell:word katex
+// cspell:word rehype
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+
+const math = require('remark-math');
+const katex = require('rehype-katex');
+
+module.exports = {
+  title: "emojicoin dot fun Docs",
+  tagline: "Documentation for emojicoin dot fun",
+  url: "https://docs.emojicoin.fun",
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.png",
+
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      ({
+        docs: {
+          sidebarPath: require.resolve("./sidebar.js"),
+          sidebarCollapsible: false,
+          sidebarCollapsed: false,
+          routeBasePath: "/",
+          editUrl: "https://github.com/econia-labs/emojicoin-dot-fun/tree/main/doc/doc-site/",
+          breadcrumbs: false,
+          showLastUpdateAuthor: false,
+          showLastUpdateTime: false,
+          remarkPlugins: [math],
+          rehypePlugins: [katex],
+        },
+        blog: false,
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
+      }),
+    ],
+  ],
+
+  markdown: {
+    mermaid: true,
+  },
+
+  plugins: ["@docusaurus/theme-mermaid"],
+
+  themes: [
+    [
+      require.resolve("@easyops-cn/docusaurus-search-local"),
+      {
+        hashed: true,
+        docsRouteBasePath: "/",
+      },
+    ],
+  ],
+
+  stylesheets: [
+    "https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@300;400;500;600;700&display=swap",
+    { // KaTeX, for typesetting equations.
+      href: "https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css",
+      type: "text/css",
+      integrity: "sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM",
+      crossorigin: "anonymous",
+    }
+  ],
+
+  themeConfig:
+    ({
+      metadata: [
+        { name: "twitter:card", content: "summary" },
+        { name: "og:image:width", content: "1200" },
+        { name: "og:image:height", content: "630" }
+      ],
+      image: "img/social-preview.jpg",
+      navbar: {
+        logo: {
+          alt: "Header",
+          src: "img/header.svg",
+          width: "156px",
+          height: "24px",
+        },
+        items: [],
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+      colorMode: {
+        defaultMode: "dark",
+        disableSwitch: true,
+      },
+    }),
+};

doc/doc-site/package.json

@@ -0,0 +1,51 @@
+{
+  "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ]
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.4.3",
+    "@docusaurus/preset-classic": "2.4.3",
+    "@docusaurus/theme-mermaid": "2.4.3",
+    "@easyops-cn/docusaurus-search-local": "^0.33.6",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "got": "^11.8.6",
+    "hast-util-is-element": "1.1.0",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "redocusaurus": "^1.6.3",
+    "rehype-katex": "5",
+    "remark-math": "^3.0.1",
+    "trim": "^0.0.3"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.4.3"
+  },
+  "engines": {
+    "node": ">=16.14"
+  },
+  "name": "emojicoin-dot-fun-docs",
+  "private": true,
+  "scripts": {
+    "build": "docusaurus build",
+    "clear": "docusaurus clear",
+    "deploy": "docusaurus deploy",
+    "docusaurus": "docusaurus",
+    "serve": "docusaurus serve",
+    "start": "docusaurus start",
+    "swizzle": "docusaurus swizzle",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "write-translations": "docusaurus write-translations"
+  },
+  "version": "1.0.0"
+}

doc/doc-site/sidebar.js

@@ -0,0 +1,27 @@
+module.exports = {
+  docs: [
+    'welcome',
+    {
+      type: 'category',
+      label: 'Generated index type category',
+      link: {
+        type: 'generated-index'
+      },
+      items: [
+        'this-is-a-subdir/some-doc-page',
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Doc type category',
+      link: {
+        type: 'doc',
+        id: 'this-is-another-subdir/index'
+      },
+      items: [
+        'this-is-another-subdir/some-other-doc-page',
+      ]
+    },
+    'security'
+  ]
+}

doc/doc-site/src/css/custom.css

@@ -0,0 +1,258 @@
+/**
+ cspell:word infima
+ cspell:word jost
+ cspell:word sublabel
+ cspell:word sublist
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #086cd9;
+  --ifm-color-primary-dark: #086cd9;
+  --ifm-color-primary-darker: #086cd9;
+  --ifm-color-primary-darkest: #086cd9;
+  --ifm-color-primary-light: #086cd9;
+  --ifm-color-primary-lighter: #086cd9;
+  --ifm-color-primary-lightest: #086cd9;
+  --ifm-code-font-size: 95%;
+  --ifm-font-family-base: "Roboto Mono", monospace;
+
+  --ifm-navbar-height: 72px;
+  --ifm-navbar-background-color: #020202;
+  --ifm-navbar-padding-horizontal: 22px;
+  --ifm-navbar-search-input-icon: url(/img/search-icon.svg);
+  --ifm-navbar-search-input-background-color: #020202;
+
+  --ifm-menu-color-background-active: #020202;
+  --ifm-menu-color-background-hover: #020202;
+
+  --ifm-h2-font-size: 48px;
+  --ifm-h2-line-height: 58px;
+
+  --ifm-heading-color: #ffffff;
+  --ifm-heading-font-family: "Jost", sans-serif;
+  --ifm-heading-font-weight: bold;
+  --ifm-heading-line-height: 58px;
+
+  --ifm-spacing-horizontal: 40px;
+  --ifm-spacing-horizontal: 40px;
+
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --ifm-card-border-radius: 0px;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary: #086cd9;
+  --ifm-color-primary-dark: #086cd9;
+  --ifm-color-primary-darker: #086cd9;
+  --ifm-color-primary-darkest: #086cd9;
+  --ifm-color-primary-light: #086cd9;
+  --ifm-color-primary-lighter: #086cd9;
+  --ifm-color-primary-lightest: #086cd9;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+html {
+  background: #020202;
+  background-image: url("https://global-uploads.webflow.com/62fce47e1be865a7155ff71c/633467a79910d8300a274060_bg-noise.png");
+}
+
+.navbar {
+  border-bottom: 1px solid #565656;
+  display: flex;
+  justify-content: center;
+  background-image: url("https://global-uploads.webflow.com/62fce47e1be865a7155ff71c/633467a79910d8300a274060_bg-noise.png");
+}
+
+.navbar__inner {
+  max-width: 1600px;
+}
+
+.padding-top--md {
+  padding-top: 40px !important;
+}
+
+.main-wrapper {
+  width: 100%;
+  max-width: 1600px;
+  align-self: center;
+}
+
+.navbar__search-input {
+  border-radius: 0px;
+  border: 1px solid #aaaaaa;
+  color: #ffffff;
+  padding: "8px 8px 0px 36px";
+  width: 252px;
+  height: 36px;
+}
+
+.navbar__search-input::placeholder {
+  text-transform: uppercase;
+  color: #ffffff;
+}
+
+.menu__list {
+  margin-right: 4px;
+}
+
+.menu__link {
+  border-radius: 0px;
+  color: #aaa;
+}
+
+.menu__link:hover {
+  color: var(--ifm-color-primary);
+}
+
+.menu__link--active:not(.menu__link--sublist) {
+  color: #ffffff;
+}
+
+.menu__link--active:hover:not(.menu__link--sublist) {
+  color: var(--ifm-color-primary);
+}
+
+.customTable {
+  width: 100%;
+  display: table;
+}
+
+th {
+  text-align: left;
+}
+
+.table-of-contents__link {
+  color: #aaa;
+}
+
+.table-of-contents__link--active {
+  color: #ffffff;
+}
+
+.pagination-nav {
+  gap: 16px;
+}
+
+.pagination-nav__link {
+  border-radius: 0px;
+  padding: 0px;
+  border: none;
+  transition: background-color 300ms ease, transform 300ms ease,
+    color 300ms ease, -webkit-transform 300ms ease;
+}
+
+.pagination-nav__link:hover {
+  transform: translate3d(0px, -3px, 0.01px);
+}
+
+.pagination-nav__sublabel {
+  display: none;
+}
+
+.pagination-nav__link--prev {
+  text-align: left;
+  background: #161616;
+  color: #ffffff;
+}
+
+.pagination-nav__link--prev:hover {
+  color: #ffffff;
+}
+
+.pagination-nav__link--next {
+  text-align: right;
+  background: #ffffff;
+  color: #161616;
+}
+
+.pagination-nav__link--next:hover {
+  color: #161616;
+}
+
+.pagination-nav__label {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: normal;
+  padding: 12px 8px;
+  line-height: 20px;
+}
+
+.card {
+  --ifm-color-emphasis-200: #565656;
+}
+
+.welcome-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--ifm-leading);
+}
+
+.welcome-heading-mobile {
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--ifm-leading);
+}
+
+@media (max-width: 768px) {
+  .welcome-heading {
+    display: none;
+  }
+
+  .welcome-heading-mobile {
+    display: block;
+  }
+}
+
+.link-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 40px;
+  gap: 24px;
+}
+
+.link-card {
+  background-color: #020202;
+  padding: 36px;
+  width: 400px;
+  height: 200px;
+  cursor: pointer;
+  border: 1px solid #565656;
+  transition: all 300ms ease, transform 300ms ease, color 300ms ease,
+    -webkit-transform 300ms ease;
+}
+
+.link-card:hover {
+  border: 1px solid var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.link-card-title {
+  display: block;
+  font-family: "Jost";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+  color: #ffffff;
+  margin-bottom: 12px;
+}
+
+.link-card-description {
+  display: block;
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #dadada;
+}

doc/doc-site/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}