clean up

www/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

www/README.md

@@ -4,15 +4,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 First, run the development server:
 
-```bash
-npm run dev
-# or
+```
 yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
 [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
 
@@ -44,6 +42,3 @@ $ vercel --prod
 ```
 
 will deploy to production and override the current `shuttle.rs` page.
-
-## Testing
-All Synth code block examples should be marked as 'json synth' to automatically run them on the CI.

www/components/AccentButton.tsx

@@ -1,36 +1,47 @@
-import React, {ReactNode} from 'react';
+import React, { ReactNode } from "react";
 
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {IconProp} from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
-import Link from 'next/link'
+import Link from "next/link";
 
 type AccentButtonProps = {
-    link?: string,
-    compact?: boolean,
-    className?: string,
-    children: ReactNode
+  link?: string;
+  compact?: boolean;
+  className?: string;
+  children: ReactNode;
 };
 
-const AccentButton = ({link, className, compact, children}: AccentButtonProps) => {
-    const paddingy = compact ? "pt-1 pb-1" : "pt-2 pb-2";
-
-    const classNameEval = className === undefined ? `text-white bg-brand-600 hover:bg-brand-400 font-bold ${paddingy} pr-3 pl-3 text-sm` : className;
-
-    const button = <button
-        className={`${classNameEval} focus:outline-none relative inline-flex rounded border-transparent transition`}>
-        {children}
-    </button>;
-
-    if (link === undefined) {
-        return button;
-    } else {
-        return <Link href={link}>
-            <a>
-                {button}
-            </a>
-        </Link>
-    }
+const AccentButton = ({
+  link,
+  className,
+  compact,
+  children,
+}: AccentButtonProps) => {
+  const paddingy = compact ? "pt-1 pb-1" : "pt-2 pb-2";
+
+  const classNameEval =
+    className === undefined
+      ? `text-white bg-brand-600 hover:bg-brand-400 font-bold ${paddingy} pr-3 pl-3 text-sm`
+      : className;
+
+  const button = (
+    <button
+      className={`${classNameEval} focus:outline-none relative inline-flex rounded border-transparent transition`}
+    >
+      {children}
+    </button>
+  );
+
+  if (link === undefined) {
+    return button;
+  } else {
+    return (
+      <Link href={link}>
+        <a>{button}</a>
+      </Link>
+    );
+  }
 };
 
-export default AccentButton;
+export default AccentButton;

www/components/Code.tsx

@@ -1,33 +1,43 @@
-import ReactTooltip from 'react-tooltip';
-import NoSsr from './NoSsr';
+import ReactTooltip from "react-tooltip";
+import NoSsr from "./NoSsr";
 
 // Todo should rename this to something more descriptive
 
 type CodeProps = {
-    code: string,
-    lang?: string
-}
+  code: string;
+  lang?: string;
+};
 
 const copyToClipboard = (code) => {
-    navigator.clipboard.writeText(code);
-}
+  navigator.clipboard.writeText(code);
+};
 
-const Code = ({code, lang}: CodeProps) => {
-    const language = lang ? lang : "language-javascript";
-    return (
-        <div className="flex flex-grow rounded-md cursor-pointer overflow-x-auto" data-tip data-for="copiedTip" data-event="click" data-event-off="click" data-delay-hide='2000'>
-                <pre className={`rounded-md flex-grow ${lang}`}>
-                    <code className={`${language}`}>
-                        $ {code}
-                    </code>
-                </pre>
-                <NoSsr>
-                    <ReactTooltip id="copiedTip" place="top" effect="float" afterShow={() => copyToClipboard(code)}>
-                        <b>Copied to clipboard!</b>
-                    </ReactTooltip>
-                </NoSsr>
-        </div>
-    );
-}
+const Code = ({ code, lang }: CodeProps) => {
+  const language = lang ? lang : "language-javascript";
+  return (
+    <div
+      className="flex flex-grow rounded-md cursor-pointer overflow-x-auto"
+      data-tip
+      data-for="copiedTip"
+      data-event="click"
+      data-event-off="click"
+      data-delay-hide="2000"
+    >
+      <pre className={`rounded-md flex-grow ${lang}`}>
+        <code className={`${language}`}>$ {code}</code>
+      </pre>
+      <NoSsr>
+        <ReactTooltip
+          id="copiedTip"
+          place="top"
+          effect="float"
+          afterShow={() => copyToClipboard(code)}
+        >
+          <b>Copied to clipboard!</b>
+        </ReactTooltip>
+      </NoSsr>
+    </div>
+  );
+};
 
-export default Code;
+export default Code;