fix: fix the install endpoint

.gitignore

@@ -12,3 +12,5 @@
 
 # VS Code
 .vscode/
+.next
+node_modules

www/.gitignore

@@ -1 +1,3 @@
 .vercel
+.next
+node_modules

www/components/AccentButton.tsx

@@ -1,36 +1,44 @@
-import React, {ReactNode} from 'react';
+import { ReactNode } from "react"
 
-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
-};
-
-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;
+  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>
+    )
+  }
+}
+
+export default AccentButton

www/components/AnnouncementBar/index.tsx

@@ -1,39 +1,39 @@
-import React, {useState} from "react"
+import { useState } from "react"
 
 import styles from "./styles.module.css"
 
 const AnnouncementBar = () => {
-    const [isClosed, setClosed] = useState(false);
+  const [isClosed, setClosed] = useState(false)
 
-    if (isClosed) {
-        return null
-    }
+  if (isClosed) {
+    return null
+  }
 
-    return (
-        <div className={styles.announcement} role="banner">
-            <p className={styles.announcement__content}>
-                ⭐️ If you like Synth,&nbsp;
-                <a
-                    className={styles.announcement__link}
-                    href={"https://github.com/getsynth/synth"}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                >
-                    give it a star on GitHub
-                </a>
-                !
-            </p>
+  return (
+    <div className={styles.announcement} role="banner">
+      <p className={styles.announcement__content}>
+        ⭐️ If you like Synth,&nbsp;
+        <a
+          className={styles.announcement__link}
+          href={"https://github.com/getsynth/synth"}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          give it a star on GitHub
+        </a>
+        !
+      </p>
 
-            <button
-                aria-label="Close"
-                className={styles.announcement__close}
-                type="button"
-                onClick={() =>setClosed(true)}
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-    )
+      <button
+        aria-label="Close"
+        className={styles.announcement__close}
+        type="button"
+        onClick={() => setClosed(true)}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  )
 }
 
-export default AnnouncementBar
+export default AnnouncementBar

www/components/CallToAction.tsx

@@ -1,28 +1,33 @@
-import AccentButton from "./AccentButton";
-import {faExternalLinkAlt} from "@fortawesome/free-solid-svg-icons";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router"
 
 type CallToActionProps = {
-    copy?: string
+  copy?: string
 }
 
-const CallToAction = ({copy}: CallToActionProps) => {
-    const {basePath} = useRouter();
-    copy = copy == null ? "Synth helps you write better software, faster. Join the community!" : copy;
-    return (
-        <div className="relative w-full bg-gray-700">
-            <div className="container lg:w-8/12 w-10/12 mx-auto">
-                <div className="text-center pt-32 pb-28">
-                    <div className="text-2xl pb-3">
-                        {copy}
-                    </div>
-                    <div className="justify-center flex pt-10">
-                    <a href="https://discord.gg/H33rRDTm3p"><img className="w-44 h-auto" alt="discord" src={`${basePath}/images/discord-bw.png`}/></a>
-                    </div>
-                </div>
-            </div>
+const CallToAction = ({ copy }: CallToActionProps) => {
+  const { basePath } = useRouter()
+  copy =
+    copy == null
+      ? "Synth helps you write better software, faster. Join the community!"
+      : copy
+  return (
+    <div className="relative w-full bg-gray-700">
+      <div className="container lg:w-8/12 w-10/12 mx-auto">
+        <div className="text-center pt-32 pb-28">
+          <div className="text-2xl pb-3">{copy}</div>
+          <div className="justify-center flex pt-10">
+            <a href="https://discord.gg/H33rRDTm3p">
+              <img
+                className="w-44 h-auto"
+                alt="discord"
+                src={`${basePath}/images/discord-bw.png`}
+              />
+            </a>
+          </div>
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
 export default CallToAction

www/components/Card.tsx

@@ -1,48 +1,42 @@
-import React, {useState} from 'react';
-import {useRouter} from 'next/router';
+import { useState } from "react"
+import { useRouter } from "next/router"
 
-import LearnMore from "./LearnMore";
+import LearnMore from "./LearnMore"
 
 type CardProps = {
-    header?: string,
-    title: string,
-    imageUrl: string,
-    copy?: string,
-    link?: string,
+  header?: string
+  title: string
+  imageUrl: string
+  copy?: string
+  link?: string
 }
 
-const Card = ({header, title, copy, imageUrl, link}: CardProps) => {
-    const {basePath} = useRouter();
-    const [arrow, setArrow] = useState(false);
-    return (
-        <a href={link}>
-            <div
-                className="flex flex-col md:w-full sm:w-2/3 sm:mr-auto rounded-md shadow-lg overflow-hidden hover:-translate-y-3 transform transition hover:shadow-2xl"
-                onMouseEnter={() => setArrow(true)}
-                onMouseLeave={() => setArrow(false)}
-            >
-                <div className="h-80 bg-gray-800 p-6 flex">
-                    <img src={`${basePath}/images/${imageUrl}`} className="m-auto" alt={title}/>
-                </div>
-                <div className="flex flex-col h-64 bg-gray-700 p-6">
-                    {
-                        header && <div className="text-gray-300 pb-1">
-                            {header}
-                        </div>
-                    }
-                    <div className="flex-grow text-xl font-medium">
-                        {title}
-                    </div>
-                    {
-                        copy && <div className="text-gray-400">
-                            {copy}
-                        </div>
-                    }
-                    <LearnMore text="View on GitHub" arrow={arrow}/>
-                </div>
-            </div>
-        </a>
-    );
+const Card = ({ header, title, copy, imageUrl, link }: CardProps) => {
+  const { basePath } = useRouter()
+  const [arrow, setArrow] = useState(false)
+  return (
+    <a href={link}>
+      <div
+        className="flex flex-col md:w-full sm:w-2/3 sm:mr-auto rounded-md shadow-lg overflow-hidden hover:-translate-y-3 transform transition hover:shadow-2xl"
+        onMouseEnter={() => setArrow(true)}
+        onMouseLeave={() => setArrow(false)}
+      >
+        <div className="h-80 bg-gray-800 p-6 flex">
+          <img
+            src={`${basePath}/images/${imageUrl}`}
+            className="m-auto"
+            alt={title}
+          />
+        </div>
+        <div className="flex flex-col h-64 bg-gray-700 p-6">
+          {header && <div className="text-gray-300 pb-1">{header}</div>}
+          <div className="flex-grow text-xl font-medium">{title}</div>
+          {copy && <div className="text-gray-400">{copy}</div>}
+          <LearnMore text="View on GitHub" arrow={arrow} />
+        </div>
+      </div>
+    </a>
+  )
 }
 
-export default Card;
+export default Card

www/components/CardNoLink.tsx

@@ -1,40 +1,30 @@
-import React, {useState} from 'react';
+import { useState } from "react"
 
 type CardProps = {
-    header?: string,
-    title: string,
-    copy?: string,
-    path?: string,
+  header?: string
+  title: string
+  copy?: string
+  path?: string
 }
 
-const CardNoLink = ({header, title, copy, path}: CardProps) => {
-    const [arrow, setArrow] = useState(false);
-    return (
-            <div
-                className="flex flex-col md:w-full sm:w-2/3 rounded-md shadow-lg overflow-hidden transform transition hover:shadow-2xl"
-                onMouseEnter={() => setArrow(true)}
-                onMouseLeave={() => setArrow(false)}
-            >
-                <div className="h-60 bg-gray-800 p-12 flex object-contain  justify-center">
-                    <img className="object-contain" src={`${path}`}/>
-                </div>
-                <div className="flex flex-grow flex-col bg-gray-700 p-8">
-                    {
-                        header && <div className="text-gray-300 pb-1">
-                            {header}
-                        </div>
-                    }
-                    <div className="flex-grow text-xl  font-medium">
-                        {title}
-                    </div>
-                    {
-                        copy && <div className="text-gray-400">
-                            {copy}
-                        </div>
-                    }
-                </div>
-            </div>
-    );
+const CardNoLink = ({ header, title, copy, path }: CardProps) => {
+  const [arrow, setArrow] = useState(false)
+  return (
+    <div
+      className="flex flex-col md:w-full sm:w-2/3 rounded-md shadow-lg overflow-hidden transform transition hover:shadow-2xl"
+      onMouseEnter={() => setArrow(true)}
+      onMouseLeave={() => setArrow(false)}
+    >
+      <div className="h-60 bg-gray-800 p-12 flex object-contain  justify-center">
+        <img className="object-contain" src={`${path}`} />
+      </div>
+      <div className="flex flex-grow flex-col bg-gray-700 p-8">
+        {header && <div className="text-gray-300 pb-1">{header}</div>}
+        <div className="flex-grow text-xl  font-medium">{title}</div>
+        {copy && <div className="text-gray-400">{copy}</div>}
+      </div>
+    </div>
+  )
 }
 
-export default CardNoLink;
+export default CardNoLink