Initial draft

2022-07-30 23:59:56 +02:00 · 2022-07-30 23:59:56 +02:00 · ee20ad0230
commit ee20ad0230
26 changed files with 1152 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
+node_modules/
+.vercel
+.next
+build/
+
+.env
+.env.*
+.*.env
--- a/components/Button.tsx
+++ b/components/Button.tsx
@ -0,0 +1,25 @@
+import Icon from "components/Icon";
+import Link from "next/link";
+import styles from "styles/Button.module.sass";
+import { SocialButton } from "utils/types";
+
+const Button = (props: SocialButton) => {
+  return (
+    <>
+      <Link href={props.url}>
+        <a>
+          <div className={styles.button}>
+            <Icon className={styles.icon} icon={props.icon} />
+            <div className={styles.platform_username}>
+              <p className={styles.platform}>{props.platform}</p>
+              <p className={styles.username}> {props.username} </p>
+            </div>
+            <Icon className={styles.link} icon="arrow-up-right" />
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+};
+
+export default Button;
--- a/components/ButtonGrid.tsx
+++ b/components/ButtonGrid.tsx
@ -0,0 +1,31 @@
+import Button from "./Button";
+import styles from "styles/Button.module.sass";
+import { SocialButton } from "utils/types";
+import { CSSProperties } from "react";
+
+const ButtonGrid = ({
+  Buttons,
+  style,
+}: {
+  Buttons: SocialButton[];
+  style?: CSSProperties;
+}) => {
+  return (
+    <div className={styles.grid} style={style}>
+      {Buttons.map((button, index) => {
+        return (
+          <Button
+            id={button.id}
+            key={`${button.platform}-${index}`}
+            icon={button.icon}
+            platform={button.platform}
+            username={button.username}
+            url={button.url}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default ButtonGrid;
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@ -0,0 +1,11 @@
+import { Icon } from "utils/types";
+
+const Icon = ({icon, className}: {icon: Icon, className?:string}) => {
+    return (
+        <svg className={className} width={"1.2em"} height={"1.2em"}>
+            <use href={`/icons.svg#${icon}`} />
+        </svg>
+    )
+}
+
+export default Icon
--- a/components/Lanyard.tsx
+++ b/components/Lanyard.tsx
@ -0,0 +1,39 @@
+// import { lanyard } from "utils/shared/lanyard";
+import { useLanyard } from "use-lanyard";
+import styles from "styles/Lanyard.module.sass";
+import Image from "next/image";
+
+const Lanyard = () => {
+  const id = process.env.NEXT_DISCORD_ID || "318044130796109825";
+  const lanyard = useLanyard(id).data;
+
+  if (!lanyard?.listening_to_spotify) return;
+  let artists;
+  if (lanyard.spotify.artist.split(";").length > 2) {
+    artists = [
+      lanyard.spotify.artist.split(";")[0],
+      lanyard.spotify.artist.split(";")[1],
+    ].join(",");
+  } else {
+    artists = lanyard.spotify.artist.split(";").join(",");
+  }
+
+  return (
+    <>
+      <div className={[styles.container, styles.badge].join(" ")}>
+        <Image
+          className={styles.albumart}
+          src={lanyard.spotify.album_art_url}
+          width={100}
+          height={100}
+        />
+        <div className={styles.artist_song}>
+          <p className={styles.song}>{lanyard.spotify.song}</p>
+          <p className={styles.artist}>{artists}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Lanyard;
--- a/components/Title.tsx
+++ b/components/Title.tsx
@ -0,0 +1,13 @@
+import styles from "styles/Title.module.sass";
+
+const Title = () => {
+    return (
+        <>
+        <h1 className={styles.title}>
+            Lio's Domain
+        </h1>
+        </>
+    )
+}
+
+export default Title
--- a/next-env.d.ts
+++ b/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.
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,6 @@
+// next.config.js
+module.exports = {
+    images: {
+      domains: ['i.scdn.co'],
+    },
+  }
--- a/package.json
+++ b/package.json
@ -0,0 +1,27 @@
+{
+  "name": "void",
+  "version": "4.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "@react-ui-org/react-ui": "^0.47.0",
+    "@supabase/supabase-js": "^1.35.4",
+    "next": "^12.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-use-lanyard": "^0.1.2",
+    "sass": "^1.53.0",
+    "use-lanyard": "^1.1.0"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "typescript": "^4.7.4"
+  }
+}
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -0,0 +1,11 @@
+import React from 'react'
+// import { AppProps } from 'next/app'
+
+// import 'tailwindcss/tailwind.css'
+import '../styles/main.sass'
+
+function MyApp({ Component, pageProps }) {
+    return <Component {...pageProps} />
+}
+
+export default MyApp
--- a/pages/api/lanyard.ts
+++ b/pages/api/lanyard.ts
@ -0,0 +1,6 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { jsonyard } from 'utils/shared/lanyard'
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+    return res.json(await jsonyard())
+}
--- a/pages/api/profiles.ts
+++ b/pages/api/profiles.ts
@ -0,0 +1,6 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import getProfiles from 'utils/shared/profiles'
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+    return res.json(await getProfiles())
+}
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -0,0 +1,30 @@
+import ButtonGrid from "components/ButtonGrid";
+import Lanyard from "components/Lanyard";
+import Title from "components/Title";
+import getProfiles from "utils/shared/profiles";
+import { SocialButton } from "utils/types";
+import styles from "styles/Index.module.sass";
+
+export async function getStaticProps() {
+  const profiles = await getProfiles();
+  return {
+    props: {
+      profiles,
+    },
+  };
+}
+
+const IndexPage = (props: { profiles: SocialButton[] }) => (
+  <>
+    <div className={styles.center}>
+      <Title />
+      <div>
+        <p>Profiles</p>
+        <ButtonGrid Buttons={props.profiles} />
+      </div>
+    </div>
+    <Lanyard />
+  </>
+);
+
+export default IndexPage;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -0,0 +1,704 @@
+lockfileVersion: 5.4
+
+specifiers:
+  '@react-ui-org/react-ui': ^0.47.0
+  '@supabase/supabase-js': ^1.35.4
+  '@types/node': ^18.0.5
+  '@types/react': ^18.0.15
+  '@types/react-dom': ^18.0.6
+  next: ^12.2.2
+  react: ^18.2.0
+  react-dom: ^18.2.0
+  react-use-lanyard: ^0.1.2
+  sass: ^1.53.0
+  typescript: ^4.7.4
+  use-lanyard: ^1.1.0
+
+dependencies:
+  '@react-ui-org/react-ui': 0.47.0_biqbaboplfbrettd7655fr4n2y
+  '@supabase/supabase-js': 1.35.4
+  next: 12.2.2_b7sksnfkdyiidz7vzaadim75qm
+  react: 18.2.0
+  react-dom: 18.2.0_react@18.2.0
+  react-use-lanyard: 0.1.2_react@18.2.0
+  sass: 1.53.0
+  use-lanyard: 1.1.0_react@18.2.0
+
+devDependencies:
+  '@types/node': 18.0.5
+  '@types/react': 18.0.15
+  '@types/react-dom': 18.0.6
+  typescript: 4.7.4
+
+packages:
+
+  /@next/env/12.2.2:
+    resolution: {integrity: sha512-BqDwE4gDl1F608TpnNxZqrCn6g48MBjvmWFEmeX5wEXDXh3IkAOw6ASKUgjT8H4OUePYFqghDFUss5ZhnbOUjw==}
+    dev: false
+
+  /@next/swc-android-arm-eabi/12.2.2:
+    resolution: {integrity: sha512-VHjuCHeq9qCprUZbsRxxM/VqSW8MmsUtqB5nEpGEgUNnQi/BTm/2aK8tl7R4D0twGKRh6g1AAeFuWtXzk9Z/vQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-android-arm64/12.2.2:
+    resolution: {integrity: sha512-v5EYzXUOSv0r9mO/2PX6mOcF53k8ndlu9yeFHVAWW1Dhw2jaJcvTRcCAwYYN8Q3tDg0nH3NbEltJDLKmcJOuVA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-darwin-arm64/12.2.2:
+    resolution: {integrity: sha512-JCoGySHKGt+YBk7xRTFGx1QjrnCcwYxIo3yGepcOq64MoiocTM3yllQWeOAJU2/k9MH0+B5E9WUSme4rOCBbpA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-darwin-x64/12.2.2:
+    resolution: {integrity: sha512-dztDtvfkhUqiqpXvrWVccfGhLe44yQ5tQ7B4tBfnsOR6vxzI9DNPHTlEOgRN9qDqTAcFyPxvg86mn4l8bB9Jcw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-freebsd-x64/12.2.2:
+    resolution: {integrity: sha512-JUnXB+2xfxqsAvhFLPJpU1NeyDsvJrKoOjpV7g3Dxbno2Riu4tDKn3kKF886yleAuD/1qNTUCpqubTvbbT2VoA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-arm-gnueabihf/12.2.2:
+    resolution: {integrity: sha512-XeYC/qqPLz58R4pjkb+x8sUUxuGLnx9QruC7/IGkK68yW4G17PHwKI/1njFYVfXTXUukpWjcfBuauWwxp9ke7Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-arm64-gnu/12.2.2:
+    resolution: {integrity: sha512-d6jT8xgfKYFkzR7J0OHo2D+kFvY/6W8qEo6/hmdrTt6AKAqxs//rbbcdoyn3YQq1x6FVUUd39zzpezZntg9Naw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-arm64-musl/12.2.2:
+    resolution: {integrity: sha512-rIZRFxI9N/502auJT1i7coas0HTHUM+HaXMyJiCpnY8Rimbo0495ir24tzzHo3nQqJwcflcPTwEh/DV17sdv9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-x64-gnu/12.2.2:
+    resolution: {integrity: sha512-ir1vNadlUDj7eQk15AvfhG5BjVizuCHks9uZwBfUgT5jyeDCeRvaDCo1+Q6+0CLOAnYDR/nqSCvBgzG2UdFh9A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-x64-musl/12.2.2:
+    resolution: {integrity: sha512-bte5n2GzLN3O8JdSFYWZzMgEgDHZmRz5wiispiiDssj4ik3l8E7wq/czNi8RmIF+ioj2sYVokUNa/ekLzrESWw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-win32-arm64-msvc/12.2.2:
+    resolution: {integrity: sha512-ZUGCmcDmdPVSAlwJ/aD+1F9lYW8vttseiv4n2+VCDv5JloxiX9aY32kYZaJJO7hmTLNrprvXkb4OvNuHdN22Jg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-win32-ia32-msvc/12.2.2:
+    resolution: {integrity: sha512-v7ykeEDbr9eXiblGSZiEYYkWoig6sRhAbLKHUHQtk8vEWWVEqeXFcxmw6LRrKu5rCN1DY357UlYWToCGPQPCRA==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-win32-x64-msvc/12.2.2:
+    resolution: {integrity: sha512-2D2iinWUL6xx8D9LYVZ5qi7FP6uLAoWymt8m8aaG2Ld/Ka8/k723fJfiklfuAcwOxfufPJI+nRbT5VcgHGzHAQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@react-ui-org/react-ui/0.47.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-3WBzRtiAm7hjGp4/5HPT3jB2piXLEfkah3j8ESscY6rNGZjYHkL1NWNYFm09ldF12F2cmyy+k3IFnbdEE2m3KA==}
+    engines: {node: '>=16.14.0 <17', npm: '>=8.3.0'}
+    peerDependencies:
+      prop-types: ^15.7.2
+      react: ^17.0.2
+      react-dom: ^17.0.2
+    dependencies:
+      normalize.css: 8.0.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@supabase/functions-js/1.3.4:
+    resolution: {integrity: sha512-yYVgkECjv7IZEBKBI3EB5Q7R1p0FJ10g8Q9N7SWKIHUU6i6DnbEGHIMFLyQRm1hmiNWD8fL7bRVEYacmTRJhHw==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@supabase/gotrue-js/1.22.21:
+    resolution: {integrity: sha512-AhsbBU+5j7BKSqfpLDkEcxy3ruDD+J+dHaYxXGHNWiiIJBYtK2jmNcMYA7M30MYjajnhoILJFC7LtHWl1lWj2Q==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@supabase/postgrest-js/0.37.4:
+    resolution: {integrity: sha512-x+c2rk1fz9s6f1PrGxCJ0QTUgXPDI0G3ngIqD5sSiXhhCyfl8Q5V92mXl2EYtlDhkiUkjFNrOZFhXVbXOHgvDw==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@supabase/realtime-js/1.7.3:
+    resolution: {integrity: sha512-iNUWhVeYRi5+XUlW2zJ7ccGfhI6caLxcn2t6VuQK3OTJNzXdVXeKb25nffLx1g4F7Ty6VM8Xiue7i0z0cWG3pQ==}
+    dependencies:
+      '@types/phoenix': 1.5.4
+      websocket: 1.0.34
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@supabase/storage-js/1.7.2:
+    resolution: {integrity: sha512-HX4HAfLUJznVgAwiKVgdTe5QD0bpUcqgc0hpk/s5Uy8qoe1tHZAc5qE9kI+tqk7rQKyymFpiA7+bAHlzyZXxxQ==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@supabase/supabase-js/1.35.4:
+    resolution: {integrity: sha512-9krwmuG3hdoS7SfM1UmCIw88aW9V1WW2Zx91tofdnmQraWKfk5e2fIKfp+Wjb9owq7JIkuUIA/qziVs2qX0lLQ==}
+    dependencies:
+      '@supabase/functions-js': 1.3.4
+      '@supabase/gotrue-js': 1.22.21
+      '@supabase/postgrest-js': 0.37.4
+      '@supabase/realtime-js': 1.7.3
+      '@supabase/storage-js': 1.7.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
+  /@swc/helpers/0.4.2:
+    resolution: {integrity: sha512-556Az0VX7WR6UdoTn4htt/l3zPQ7bsQWK+HqdG4swV7beUCxo/BqmvbOpUkTIm/9ih86LIf1qsUnywNL3obGHw==}
+    dependencies:
+      tslib: 2.4.0
+    dev: false
+
+  /@types/node/18.0.5:
+    resolution: {integrity: sha512-En7tneq+j0qAiVwysBD79y86MT3ModuoIJbe7JXp+sb5UAjInSShmK3nXXMioBzfF7rXC12hv12d4IyCVwN4dA==}
+    dev: true
+
+  /@types/phoenix/1.5.4:
+    resolution: {integrity: sha512-L5eZmzw89eXBKkiqVBcJfU1QGx9y+wurRIEgt0cuLH0hwNtVUxtx+6cu0R2STwWj468sjXyBYPYDtGclUd1kjQ==}
+    dev: false
+
+  /@types/prop-types/15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
+
+  /@types/react-dom/18.0.6:
+    resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
+    dependencies:
+      '@types/react': 18.0.15
+    dev: true
+
+  /@types/react/18.0.15:
+    resolution: {integrity: sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.0
+    dev: true
+
+  /@types/scheduler/0.16.2:
+    resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+    dev: true
+
+  /anymatch/3.1.2:
+    resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: false
+
+  /binary-extensions/2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /braces/3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+    dev: false
+
+  /bufferutil/4.0.6:
+    resolution: {integrity: sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==}
+    engines: {node: '>=6.14.2'}
+    requiresBuild: true
+    dependencies:
+      node-gyp-build: 4.5.0
+    dev: false
+
+  /caniuse-lite/1.0.30001367:
+    resolution: {integrity: sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw==}
+    dev: false
+
+  /chokidar/3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.2
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: false
+
+  /cross-fetch/3.1.5:
+    resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
+    dependencies:
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /csstype/3.1.0:
+    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+    dev: true
+
+  /d/1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
+    dependencies:
+      es5-ext: 0.10.61
+      type: 1.2.0
+    dev: false
+
+  /debug/2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+    dev: false
+
+  /es5-ext/0.10.61:
+    resolution: {integrity: sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+      next-tick: 1.1.0
+    dev: false
+
+  /es6-iterator/2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.61
+      es6-symbol: 3.1.3
+    dev: false
+
+  /es6-symbol/3.1.3:
+    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+    dependencies:
+      d: 1.0.1
+      ext: 1.6.0
+    dev: false
+
+  /ext/1.6.0:
+    resolution: {integrity: sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==}
+    dependencies:
+      type: 2.6.1
+    dev: false
+
+  /fill-range/7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: false
+
+  /fsevents/2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /glob-parent/5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: false
+
+  /immutable/4.1.0:
+    resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
+    dev: false
+
+  /is-binary-path/2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: false
+
+  /is-extglob/2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /is-glob/4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: false
+
+  /is-number/7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: false
+
+  /is-typedarray/1.0.0:
+    resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+    dev: false
+
+  /js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
+
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: false
+
+  /ms/2.0.0:
+    resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
+    dev: false
+
+  /nanoid/3.3.4:
+    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: false
+
+  /next-tick/1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: false
+
+  /next/12.2.2_b7sksnfkdyiidz7vzaadim75qm:
+    resolution: {integrity: sha512-zAYFY45aBry/PlKONqtlloRFqU/We3zWYdn2NoGvDZkoYUYQSJC8WMcalS5C19MxbCZLUVCX7D7a6gTGgl2yLg==}
+    engines: {node: '>=12.22.0'}
+    hasBin: true
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^6.0.0 || ^7.0.0
+      react: ^17.0.2 || ^18.0.0-0
+      react-dom: ^17.0.2 || ^18.0.0-0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 12.2.2
+      '@swc/helpers': 0.4.2
+      caniuse-lite: 1.0.30001367
+      postcss: 8.4.5
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      sass: 1.53.0
+      styled-jsx: 5.0.2_react@18.2.0
+      use-sync-external-store: 1.1.0_react@18.2.0
+    optionalDependencies:
+      '@next/swc-android-arm-eabi': 12.2.2
+      '@next/swc-android-arm64': 12.2.2
+      '@next/swc-darwin-arm64': 12.2.2
+      '@next/swc-darwin-x64': 12.2.2
+      '@next/swc-freebsd-x64': 12.2.2
+      '@next/swc-linux-arm-gnueabihf': 12.2.2
+      '@next/swc-linux-arm64-gnu': 12.2.2
+      '@next/swc-linux-arm64-musl': 12.2.2
+      '@next/swc-linux-x64-gnu': 12.2.2
+      '@next/swc-linux-x64-musl': 12.2.2
+      '@next/swc-win32-arm64-msvc': 12.2.2
+      '@next/swc-win32-ia32-msvc': 12.2.2
+      '@next/swc-win32-x64-msvc': 12.2.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
+
+  /node-fetch/2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
+  /node-gyp-build/4.5.0:
+    resolution: {integrity: sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==}
+    hasBin: true
+    dev: false
+
+  /normalize-path/3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /normalize.css/8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+    dev: false
+
+  /picocolors/1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: false
+
+  /picomatch/2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: false
+
+  /postcss/8.4.5:
+    resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: false
+
+  /react-dom/18.2.0_react@18.2.0:
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+    dev: false
+
+  /react-use-lanyard/0.1.2_react@18.2.0:
+    resolution: {integrity: sha512-QScCarw4MQelEhjcQO9HvTKWUfpIvt+ZcMPvOOaaDRJk/QNPml27rNzILM7k4TrhrevSuMmgF+3WJtTcUlqidA==}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      react: 18.2.0
+      swr: 1.3.0_react@18.2.0
+      tslib: 2.4.0
+    dev: false
+
+  /react/18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
+  /readdirp/3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: false
+
+  /sass/1.53.0:
+    resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.1.0
+      source-map-js: 1.0.2
+    dev: false
+
+  /scheduler/0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
+  /source-map-js/1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /styled-jsx/5.0.2_react@18.2.0:
+    resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /swr/1.3.0_react@18.2.0:
+    resolution: {integrity: sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /to-regex-range/5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: false
+
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
+  /tslib/2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+    dev: false
+
+  /type/1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
+    dev: false
+
+  /type/2.6.1:
+    resolution: {integrity: sha512-OvgH5rB0XM+iDZGQ1Eg/o7IZn0XYJFVrN/9FQ4OWIYILyJJgVP2s1hLTOFn6UOZoDUI/HctGa0PFlE2n2HW3NQ==}
+    dev: false
+
+  /typedarray-to-buffer/3.1.5:
+    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
+    dependencies:
+      is-typedarray: 1.0.0
+    dev: false
+
+  /typescript/4.7.4:
+    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
+  /use-lanyard/1.1.0_react@18.2.0:
+    resolution: {integrity: sha512-9yfDnDKCNYR/VIUKSq5V+ACSwZECNrA1ogduigZzF8AuEVwCjrckFBL56dLQHISqsPiB5MfypgpVU+c757EZ3g==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=17'
+    dependencies:
+      react: 18.2.0
+      swr: 1.3.0_react@18.2.0
+    dev: false
+
+  /use-sync-external-store/1.1.0_react@18.2.0:
+    resolution: {integrity: sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /utf-8-validate/5.0.9:
+    resolution: {integrity: sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==}
+    engines: {node: '>=6.14.2'}
+    requiresBuild: true
+    dependencies:
+      node-gyp-build: 4.5.0
+    dev: false
+
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
+  /websocket/1.0.34:
+    resolution: {integrity: sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      bufferutil: 4.0.6
+      debug: 2.6.9
+      es5-ext: 0.10.61
+      typedarray-to-buffer: 3.1.5
+      utf-8-validate: 5.0.9
+      yaeti: 0.0.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
+  /yaeti/0.0.6:
+    resolution: {integrity: sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==}
+    engines: {node: '>=0.10.32'}
+    dev: false
--- a/public/icons.svg
+++ b/public/icons.svg
@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="arrow-left" xmlns="http://www.w3.org/2000/svg">
+ <path d="m7.25 3.75-4.5 4.5 4.5 4.5m-4.5-4.5h10.5" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="arrow-right" xmlns="http://www.w3.org/2000/svg">
+ <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="arrow-up-right" xmlns="http://www.w3.org/2000/svg">
+ <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="asterisk" xmlns="http://www.w3.org/2000/svg">
+ <path d="m7.75 1.25v14m-6-10.5 12 7m-12 0 12-7" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="chevron-left" xmlns="http://www.w3.org/2000/svg">
+ <path d="M 11.25,14.25 5,8 11.25,1.75" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="chevron-right" xmlns="http://www.w3.org/2000/svg">
+ <path d="M 4.75,14.25 11,8 4.75,1.75" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="envelope" xmlns="http://www.w3.org/2000/svg">
+ <path d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="git-branch" xmlns="http://www.w3.org/2000/svg">
+ <path d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="globe" xmlns="http://www.w3.org/2000/svg">
+ <path d="m1.75 8.25h12.5m-4 0a2.25 6.5 0 0 1-2.25 6.5 2.25 6.5 0 0 1-2.25-6.5 2.25 6.5 0 0 1 2.25-6.5 2.25 6.5 0 0 1 2.25 6.5zm4.25 0a6.5 6.5 0 0 1-6.5 6.5 6.5 6.5 0 0 1-6.5-6.5 6.5 6.5 0 0 1 6.5-6.5 6.5 6.5 0 0 1 6.5 6.5z" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="graph" xmlns="http://www.w3.org/2000/svg">
+ <path d="m5.25 13c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm9-3.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75c0-0.9665 0.7835-1.75 1.75-1.75s1.75 0.7835 1.75 1.75zm-7-6.5c0 0.9665-0.7835 1.75-1.75 1.75s-1.75-0.7835-1.75-1.75 0.7835-1.75 1.75-1.75 1.75 0.7835 1.75 1.75zm-2.0942 9.4126 5.6868-2.3235m-4.163-5.7868 4.5859 3.9307m-6.0863-3.5029-1.3496 6.543" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="hash" xmlns="http://www.w3.org/2000/svg">
+ <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="image" xmlns="http://www.w3.org/2000/svg">
+ <path d="m6.25 5.5a0.75 0.75 0 0 1-0.75 0.75 0.75 0.75 0 0 1-0.75-0.75 0.75 0.75 0 0 1 0.75-0.75 0.75 0.75 0 0 1 0.75 0.75zm-3 8.75 7.5-7.5 3.5 3.5m-11.75-8.5h11c0.4155 0 0.75 0.3345 0.75 0.75v11c0 0.4155-0.3345 0.75-0.75 0.75h-11c-0.4155 0-0.75-0.3345-0.75-0.75v-11c0-0.4155 0.3345-0.75 0.75-0.75z" fill="none" stroke="currentColor"/>
+</symbol><symbol viewBox="0 0 16 16" id="link" xmlns="http://www.w3.org/2000/svg">
+ <path d="m8.25 3.15 0.4519-0.4481c1.2692-1.2692 3.327-1.2692 4.5962 0s1.2692 3.327 0 4.5962l-2 2c-1.2692 1.2692-3.327 1.2692-4.5962 0" fill="none" stroke="currentColor"/>
+ <path d="m7.75 12.85-0.45662 0.45281c-1.2692 1.2692-3.327 1.2692-4.5962 0s-1.2692-3.327 0-4.5962l2-2c1.2692-1.2692 3.327-1.2692 4.5962 0" fill="none" stroke="currentColor"/>
+</symbol><symbol viewBox="0 0 16 16" id="messages" xmlns="http://www.w3.org/2000/svg">
+ <path d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z" fill="none" stroke="currentColor"/>
+ <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="parallelogram" xmlns="http://www.w3.org/2000/svg">
+ <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor"/>
+</symbol><symbol viewBox="0 0 16 16" id="shuffle" xmlns="http://www.w3.org/2000/svg">
+ <path d="m2.75 2.75 3 3" fill="none" stroke="currentColor"/>
+ <path d="m9.75 2.25h4v4m-11 7 11-11" fill="none" stroke="currentColor"/>
+ <path d="m10.25 10.25 3.5 3.5m-4 0h4v-4" fill="none" stroke="currentColor"/>
+</symbol><symbol viewBox="0 0 16 16" id="smile" xmlns="http://www.w3.org/2000/svg">
+ <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978" fill="none" stroke="currentColor"/>
+ <circle cx="8" cy="8" r="6.75" fill="none" stroke="currentColor"/>
+ <path d="m10.25 5.75v1.5" fill="none" stroke="currentColor"/>
+ <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor"/>
+</symbol><symbol fill="none" stroke="currentColor" viewBox="0 0 16 16" id="x" xmlns="http://www.w3.org/2000/svg">
+ <path d="m3 3 10 10m-10 0 10-10" fill="none" stroke="currentColor"/>
+</symbol></svg>
--- a/styles/Button.module.sass
+++ b/styles/Button.module.sass
@ -0,0 +1,29 @@
+.button
+    display: flex
+    background-color: #191919
+    align-items: center
+    transition: all .2s
+    &:hover
+        background-color: white
+        color: black
+        transform: translateY(-0.3em)
+
+.icon
+    padding: 10px
+
+.link
+    padding: 10px
+    margin-left: auto
+
+.platform_username
+    line-height: .5rem
+    padding-left: 1rem
+    .platform
+        font-weight: lighter
+    .username
+        color: grey
+
+.grid
+    display: grid
+    gap: .5rem
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
--- a/styles/Index.module.sass
+++ b/styles/Index.module.sass
@ -0,0 +1,4 @@
+.center
+    max-width: 45rem
+    margin-left: auto
+    margin-right: auto
--- a/styles/Lanyard.module.sass
+++ b/styles/Lanyard.module.sass
@ -0,0 +1,53 @@
+.container
+    position: absolute
+    bottom: 0
+    left: 0
+    margin: 10px
+    display: inline-flex
+    align-items: center
+    background-color: #222
+    max-width: 50rem
+    border-radius: .5rem
+    animation: skeleton-loading 2s linear infinite alternate
+
+.albumart
+    border-radius: 20px
+    padding: 10px !important
+
+.artist_song
+    line-height: .5rem
+    padding-left: 1rem
+    padding-right: 1rem
+    .artist
+        font-size: .8rem
+
+.badge:after
+        content: ''
+        position: absolute
+        top: -5px
+        right: -5px
+        font-size: .7em
+        background: #8cff96b4
+        color: white
+        width: 18px
+        height: 18px
+        text-align: center
+        line-height: 18px
+        border-radius: 50%
+        box-shadow: 0 0 1px #333
+        animation: pulse 4s linear infinite alternate
+
+@keyframes pulse
+    0%
+        transform: scale(1)
+    50%
+        transform: scale(1.4)
+    100%
+        transform: scale(1)
+
+@keyframes skeleton-loading
+    0%
+        background-color: #191919
+
+    100%
+        background-color: #222
--- a/styles/Title.module.sass
+++ b/styles/Title.module.sass
@ -0,0 +1,5 @@
+.title
+    display: inline-flex
+    font-size: 3rem
+    margin-top: 5rem
+    background-image: linear-gradient(to top, transparent 0.15em, rgb(0, 0, 0) 0.15em, rgb(0, 0, 0) 0.6em, transparent 0.6em)
--- a/styles/fonts/Flachbau.ttf
+++ b/styles/fonts/Flachbau.ttf
--- a/styles/main.sass
+++ b/styles/main.sass
@ -0,0 +1,17 @@
+a
+    text-decoration: none
+    color: white
+
+    // padding: 0
+    // margin: 0
+
+body
+    background: #111
+    color: white
+    font-family: "Flachbau"
+
+
+@font-face
+    font-family: "Flachbau"
+    src: local("fonts/Flachbau.ttf") format("truetype")
+    src: url("fonts/Flachbau.ttf") format("truetype")
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/utils/shared/lanyard.ts
+++ b/utils/shared/lanyard.ts
@ -0,0 +1,7 @@
+const id = process.env.NEXT_DISCORD_ID || "318044130796109825"
+
+export async function jsonyard() {
+  return await fetch(
+    `https://api.lanyard.rest/v1/users/${id}`,
+  ).then((r) => r.json());
+}
--- a/utils/shared/profiles.ts
+++ b/utils/shared/profiles.ts
@ -0,0 +1,7 @@
+import supabase from "utils/supabase"
+
+export default async function getProfiles() {
+    let {data,error} = await supabase.from("void_socials").select()
+    if(error) throw error
+    return data
+}
--- a/utils/supabase.ts
+++ b/utils/supabase.ts
@ -0,0 +1,5 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)
+
+export default supabase
--- a/utils/types.ts
+++ b/utils/types.ts
@ -0,0 +1,28 @@
+export type SocialButton = {
+  id: number;
+  icon: Icon;
+  platform: string;
+  username: string;
+  url?: string;
+};
+
+export type Icon =
+  | "x"
+  | "smile"
+  | "shuffle"
+  | "parallelogram"
+  | "messages"
+  | "link"
+  | "image"
+  | "hash"
+  | "graph"
+  | "globe"
+  | "git-branch"
+  | "envelope"
+  | "chevron-right"
+  | "chevron-left"
+  | "asterisk"
+  | "arrow-up-right"
+  | "arrow-right"
+  | "spotify"
+  | "arrow-right";