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>
+ );
+}