Set up docusaurus (#1)

.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

docusaurus.config.js

@@ -0,0 +1,100 @@
+// @ts-check
+
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: "OpenTF Documentation",
+  favicon: "/img/favicon32.png",
+  url: "https://docs.opentf.org",
+
+  baseUrl: "/",
+
+  // TODO: Provide final values
+  organizationName: "opentf",
+  projectName: "docs",
+
+  // TODO: Once we clean up links we can switch to "throw"
+  onBrokenLinks: "warn",
+  onBrokenMarkdownLinks: "warn",
+
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        theme: {
+          customCss: [require.resolve("./src/css/custom.css")],
+        },
+        docs: {
+          sidebarPath: require.resolve("./sidebars.js"),
+          routeBasePath: "/",
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // TODO: Do we want to support light mode?
+      colorMode: {
+        defaultMode: "dark",
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
+      docs: {
+        sidebar: {
+          autoCollapseCategories: true,
+        },
+      },
+      navbar: {
+        title: "OpenTF",
+        logo: {
+          alt: "OpenTF",
+          src: "img/logo.svg",
+        },
+        items: [
+          {
+            to: "/intro",
+            label: "Introduction",
+            position: "left",
+          },
+          {
+            to: "/cli",
+            label: "CLI",
+            position: "left",
+          },
+          {
+            to: "/internals",
+            label: "Internals",
+            position: "left",
+          },
+          {
+            to: "/language",
+            label: "Language",
+            position: "left",
+          },
+          {
+            // TODO: Make sure this is final
+            href: "https://github.com/opentffoundation/opentf",
+            position: "right",
+            className: "header-github-link",
+          },
+        ],
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+        additionalLanguages: ["hcl"],
+      },
+    }),
+};
+
+module.exports = config;

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "documentation",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.4.1",
+    "@docusaurus/preset-classic": "2.4.1",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "striptags": "^3.2.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.4.1",
+    "@tsconfig/docusaurus": "^1.0.5",
+    "typescript": "^4.7.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}

sidebars.js

@@ -0,0 +1,67 @@
+// @ts-check
+const stripHtml = require("striptags");
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {};
+
+const cliNavData = require("./data/cli-nav-data.json");
+const internalsNavData = require("./data/internals-nav-data.json");
+const introNavData = require("./data/intro-nav-data.json");
+const languageNavData = require("./data/language-nav-data.json");
+
+function processNavItems(navItems) {
+  return navItems.map(processNavItem).filter(Boolean);
+}
+
+function processTitle(value) {
+  return stripHtml(value);
+}
+
+function processNavItem(navItem) {
+  if (navItem.hidden) {
+    return null;
+  }
+
+  if (navItem.heading) {
+    return {
+      type: "html",
+      value: `<strong>${navItem.heading}</strong>`,
+    };
+  }
+
+  if (navItem.divider) {
+    return {
+      type: "html",
+      value: `<hr>`,
+    };
+  }
+
+  if (navItem.routes) {
+    return {
+      type: "category",
+      label: processTitle(navItem.title),
+      items: processNavItems(navItem.routes),
+    };
+  }
+
+  if (navItem.path) {
+    return {
+      type: "doc",
+      id: navItem.path,
+      label: processTitle(navItem.title),
+    };
+  }
+
+  return {
+    type: "link",
+    href: navItem.href,
+    label: processTitle(navItem.title),
+  };
+}
+
+sidebars.cli = processNavItems(cliNavData);
+sidebars.internals = processNavItems(internalsNavData);
+sidebars.intro = processNavItems(introNavData);
+sidebars.language = processNavItems(languageNavData);
+
+module.exports = sidebars;

src/components/HomePage/index.module.css

@@ -0,0 +1,40 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 50vh;
+}
+
+.heading {
+  font-size: 26px;
+  margin-top: -38px;
+}
+
+.buttons {
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.button {
+  border-radius: 26px;
+  padding: 12px 24px;
+  color: #fff;
+  border: 0;
+  font-size: 18px;
+}
+
+.button:hover {
+  text-decoration: none;
+  color: #fff;
+  opacity: 0.9;
+}
+
+.buttonPrimary {
+  background: #923dfe;
+}
+
+.buttonSecondary {
+  box-shadow: inset 0 0 0 2px #923dfe;
+}

src/components/HomePage/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import cslx from "clsx";
+import LogoUrl from "@site/static/img/logo.png";
+import Link from "@docusaurus/Link";
+
+import styles from "./index.module.css";
+
+export default function Home() {
+  return (
+    <div className={styles.wrapper}>
+      <img src={LogoUrl} width="500px" alt="Logo" />
+      <p className={styles.heading}>
+        Supporting an impartial, open, and community-driven Terraform.
+      </p>
+      <div className={styles.buttons}>
+        <Link to="/intro" className={cslx(styles.button, styles.buttonPrimary)}>
+          Documentation
+        </Link>
+        <Link
+          to="https://github.com/opentffoundation/opentf"
+          className={cslx(styles.button, styles.buttonSecondary)}
+        >
+          GitHub Repository
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/Pattern/index.module.css

@@ -0,0 +1,9 @@
+.grid {
+  mask-image: radial-gradient(100% 100% at top, #fff, transparent);
+  stroke: rgb(255 255 255 / 0.05);
+  width: 100%;
+  height: 100%;
+  z-index: -10;
+  inset: 0;
+  position: absolute;
+}

src/components/Pattern/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import styles from "./index.module.css";
+
+export default function Pattern() {
+  return (
+    <svg className={styles.grid} aria-hidden="true">
+      <defs>
+        <pattern
+          id="grid"
+          width="120"
+          height="120"
+          x="50%"
+          y="-1"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M.5 120V.5H120" fill="none" />
+        </pattern>
+      </defs>
+
+      <rect width="100%" height="100%" stroke-width="0" fill="url(#grid)" />
+    </svg>
+  );
+}

src/css/custom.css

@@ -0,0 +1,24 @@
+html[data-theme="dark"] {
+  --ifm-color-primary: #b173ff;
+  --ifm-color-primary-dark: #9c4eff;
+  --ifm-color-primary-darker: #923cff;
+  --ifm-color-primary-darkest: #7304ff;
+  --ifm-color-primary-light: #c698ff;
+  --ifm-color-primary-lighter: #d0aaff;
+  --ifm-color-primary-lightest: #efe2ff;
+  --ifm-background-color: #21252b;
+  --ifm-navbar-background-color: #2c3036;
+}
+
+.navbar {
+  border-top: 2px solid #923dfe;
+}
+
+.header-github-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z'/%3E%3C/svg%3E")
+    no-repeat;
+}

src/pages/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Layout from "@theme/Layout";
+
+import Pattern from "../components/Pattern";
+import HomePage from "../components/HomePage";
+
+export default function Home() {
+  return (
+    <Layout>
+      <Pattern />
+      <HomePage />
+    </Layout>
+  );
+}

static/img/logo.svg

@@ -0,0 +1,3 @@
+<svg width="325" height="533" viewBox="0 0 325 533" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.473 0.281006L55.761 15.097L299.347 172.885L251.393 205.883L44.775 72.168L25.239 60.277L24.918 60.772V60.082L0.679001 45.327V152.681L86.507 212.087V475.385L95.938 481.689L144.932 514.557L173.054 532.461V492.992L173.046 492.991V402.605L206.72 424.831V508.407L230.96 491.831V440.829L251.34 454.281L324.168 403.463V296.575L324.207 296.518L324.168 296.492V296.434L324.125 296.463L299.577 279.993L324.168 262.834V174.58L324.193 174.542V160.301L315.729 154.829L315.935 154.749L77.473 0.281006ZM148.807 357.563V487.872L110.746 462.431V199.85H110.657L110.903 199.494L24.918 139.979V88.19L251.806 235.022L299.929 201.908V250.191L277.983 265.504L277.823 265.396L277.545 265.81L250.956 284.363L151.936 219.125V302.47H151.949V310.644L251.785 375.665L299.929 342.537V390.819L250.961 424.988L148.807 357.563ZM251.346 313.648L278.251 294.874L302.647 311.243L251.414 346.497L176.188 297.504V264.131L251.346 313.648Z" fill="#933EFF" style="fill:#933EFF;fill:color(display-p3 0.5765 0.2431 1.0000);fill-opacity:1;"/>
+</svg>

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "resolveJsonModule": true,
+    "module": "Node16"
+  }
+}