docs: Website (#6)

.github/workflows/website.yml

@@ -0,0 +1,41 @@
+name: Website
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+    paths:
+      - website/**
+
+permissions:
+  pull-requests: write
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'push'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+      - name: Install
+        run: yarn install
+      - name: Deploy
+        uses: the-guild-org/shared-config/website-cf@main
+        with:
+          cloudflareApiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          cloudflareAccountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          projectName: heltin
+          prId: ${{ github.event.pull_request.number }}
+          websiteDirectory: website
+          buildScript: yarn build
+          artifactDir: out

.gitignore

@@ -8,7 +8,10 @@
 **/.yarn/*
 !**/.yarn/releases
 !**/.yarn/plugins
+**/.next
+tsconfig.tsbuildinfo
 .gitsecret/keys/random_seed
 secrets/*
 !secrets/*.secret
 **/database_data_dump*
+website/out/

package.json

@@ -4,7 +4,8 @@
   "packageManager": "[email protected]",
   "workspaces": [
     "graphql",
-    "app"
+    "app",
+    "website"
   ],
   "scripts": {
     "check:format": "prettier -c .",

website/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

website/next.config.mjs

@@ -0,0 +1,5 @@
+import { withGuildDocs } from '@theguild/components/next.config';
+
+export default withGuildDocs({
+  output: 'export',
+});

website/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "website",
+  "scripts": {
+    "start": "next",
+    "build": "next build",
+    "check:type": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@theguild/components": "6.1.0-alpha-20231123155316-a66de54",
+    "clsx": "^2.0.0",
+    "next": "^14.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
+    "sharp": "^0.32.6"
+  },
+  "devDependencies": {
+    "@theguild/tailwind-config": "^0.3.0",
+    "@types/node": "^20.9.4",
+    "@types/react": "^18.2.38",
+    "typescript": "^5.3.2"
+  }
+}

website/postcss.config.cjs

@@ -0,0 +1,3 @@
+// @ts-expect-error
+const config = require('@theguild/tailwind-config/postcss.config');
+module.exports = config;

website/src/SignUpForm.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import { FaCheck, FaPaperPlane, FaRepeat, FaTriangleExclamation } from 'react-icons/fa6';
+
+export function SignUpForm() {
+  const [state, setState] = useState<
+    | null
+    | 'pending'
+    | { name: string; email: string } // success
+    | Error
+  >(null);
+
+  if (state === 'pending') {
+    return (
+      <div className="w-full text-center flex flex-col items-center text-gray-400 dark:text-gray-600">
+        <FaPaperPlane size={36} />
+        <p>Sending...</p>
+      </div>
+    );
+  }
+
+  if (state instanceof Error) {
+    return (
+      <div className="w-full text-center flex flex-col items-center">
+        <FaTriangleExclamation className="text-yellow-500" size={36} />
+        <p>Oops, something went wrong!</p>
+        <br />
+        <pre>{state.message}</pre>
+        <br />
+        <button
+          type="button"
+          className="flex items-center justify-center w-full sm:w-auto text-white font-medium rounded-lg px-5 py-2.5 !bg-gray-400 hover:!bg-gray-500 gap-2"
+          onClick={() => setState(null)}
+        >
+          <FaRepeat className="inline" />
+          <span>Try Again</span>
+        </button>
+      </div>
+    );
+  }
+
+  if (state) {
+    return (
+      <div className="w-full text-center flex flex-col items-center">
+        <FaCheck className="text-blue-700 dark:text-blue-500" size={36} />
+        <p>
+          Thank you, <strong>{state.name}</strong>!
+          <br />
+          We'll get back to you on <strong>{state.email}</strong> as soon as possible.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+
+        const data = new FormData(e.currentTarget);
+        const values = {
+          name: data.get('name').toString(),
+          email: data.get('email').toString(),
+          notes: data.get('notes').toString(),
+        };
+
+        setState('pending');
+        fetch('https://utils.the-guild.dev/api/heltin/signup', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(values),
+        })
+          .then(() => setState(values))
+          .catch(setState);
+      }}
+    >
+      <div className="flex flex-row gap-4">
+        <div className="flex-1">
+          <label
+            htmlFor="SignUpForm_name"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >
+            Your Name
+          </label>
+          <input
+            id="SignUpForm_name"
+            type="text"
+            name="name"
+            required
+            className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+          />
+        </div>
+        <div className="flex-1">
+          <label
+            htmlFor="SignUpForm_email"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >
+            Email Address
+          </label>
+          <input
+            id="SignUpForm_email"
+            type="email"
+            name="email"
+            required
+            className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+          />
+        </div>
+      </div>
+      <div>
+        <textarea
+          id="SignUpForm_notes"
+          name="notes"
+          required
+          placeholder="Write down your use-case and expectations..."
+          className="min-h-[120px] bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+        />
+      </div>
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          className="flex items-center justify-center w-full sm:w-auto text-white font-medium rounded-lg px-5 py-2.5 !bg-blue-500 hover:!bg-blue-600 dark:hover:!bg-blue-400 gap-2"
+        >
+          <FaPaperPlane className="inline" />
+          <span>Submit</span>
+        </button>
+      </div>
+    </form>
+  );
+}