Initial commit

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
+# More: https://editorconfig.org/
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+charset = utf-8
+end_of_line = lf
+
+[Makefile]
+indent_style = tab

.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

README.md

@@ -0,0 +1,3 @@
+# Hackage UI
+
+Fresh look for the <https://hackage.haskell.org/>.

hackage-ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

hackage-ui/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

hackage-ui/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+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.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.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

hackage-ui/components/branding/Logo.module.css

@@ -0,0 +1,15 @@
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  color: #fff;
+  font-weight: bold;
+}
+
+.svg {
+  position: relative;
+  height: 100%;
+  width: auto;
+}
+

hackage-ui/components/branding/Logo.tsx

@@ -0,0 +1,26 @@
+import s from './Logo.module.css';
+
+const Logo = (props: { fontSize: number }) => {
+  return (
+    <div
+      className={s.logo}
+      style={{ fontSize: `${props.fontSize}rem`, height: `${props.fontSize}rem` }}
+    >
+      <svg
+        className={s.svg}
+        xmlns="http://www.w3.org/2000/svg"
+        width="120"
+        height="80"
+        viewBox="0 0 120 80"
+        style={{ top: `-${props.fontSize * 0.07}rem`}}
+      >
+        <path d="M1.842 77.722L26.586 40.63 1.842 3.537H20.4L45.144 40.63 20.4 77.722H1.842zm0 0" fill="#453a62" />
+        <path d="M26.586 77.722L51.33 40.63 26.586 3.537h18.558L94.63 77.722H76.074L60.61 54.54 45.143 77.722H26.586zm0 0" fill="#453a62" />
+        <path d="M86.384 56.085L78.136 43.72h28.868v12.366h-20.62zM74.012 37.54l-8.248-12.365h41.24V37.54H74.012zm0 0" fill="#453a62" />
+      </svg>
+      <span style={{ marginLeft: '4rem'}}>hackage.haskell.org</span>
+    </div>
+  );
+};
+
+export default Logo;

hackage-ui/components/forms/Button.module.css

@@ -0,0 +1,47 @@
+.regularButton {
+  position: relative;
+  margin: 12px auto 0 auto;
+  padding: 8px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-size: 16px;
+  background-color: var(--surface-color);
+  box-shadow: 0 4px 6px rgb(0 0 0 / 27%);
+  border: 1px solid var(--surface-color);
+  color: var(--text-color);
+  user-select: none;
+  transition: var(--transition-short);
+}
+
+.regularButton:hover {
+  cursor: pointer;
+  transition: var(--transition-short);
+  border: 1px solid var(--purple-color-2);
+}
+
+.promoButton {
+  position: relative;
+  margin: 12px auto 0 auto;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--surface-color);
+  box-shadow: 0 4px 6px rgb(0 0 0 / 27%);
+  user-select: none;
+  transition: var(--transition-short);
+  padding: 12px 24px;
+  display: flex;
+  background: var(--purple-color-2);
+  color: var(--background-color);
+  font-size: 18rem;
+  font-weight: bold;
+  border-radius: 24rem;
+  border: 1px solid transparent;
+}
+
+.promoButton:hover {
+  cursor: pointer;
+  border: 1px solid transparent;
+  opacity: 0.8;
+}

hackage-ui/components/forms/Button.tsx

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes, StyleHTMLAttributes } from 'react';
+import s from './Button.module.css';
+
+type Props = {
+  text: string,
+  onClick: () => void
+  type: 'regularButton' | 'promoButton',
+  tabIndex?: number,
+  overrides?: ButtonHTMLAttributes<HTMLButtonElement>
+};
+
+const Button = (props: Props) => {
+  return (
+    <button type="button" className={s[props.type]} tabIndex={props.tabIndex} {...props.overrides}>{props.text}</button>
+  );
+}
+
+export default Button;

hackage-ui/components/forms/ContactForm.module.css

@@ -0,0 +1,8 @@
+.formGroup {
+  margin-bottom: 24rem;
+}
+
+.formGroupLabel {
+  margin: 0;
+  margin-bottom: 8rem;
+}

hackage-ui/components/forms/ContactForm.tsx

@@ -0,0 +1,29 @@
+import s from './ContactForm.module.css';
+import { useState } from 'react';
+import Textarea from './Textarea';
+import Input from './Input';
+import Button from './Button';
+
+const ContactForm = () => {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  return (
+    <div>
+      <h3 style={{ color: 'var(--purple-color-2)' }}>Ask a Question</h3>
+      <div className={s.formGroup}>
+        <h4 className={s.formGroupLabel}>Your Email</h4>
+        <Input value={email} placeholder="abc@xyz" onChange={setEmail} />
+      </div>
+
+      <div className={s.formGroup}>
+        <h4 className={s.formGroupLabel}>Message</h4>
+        <Textarea value={message} onChange={setMessage} placeholder="abc@xyz" rows={10} />
+      </div>
+
+      <Button onClick={() => { }} text='Send' type='regularButton' />
+    </div>
+  )
+}
+
+export default ContactForm;

hackage-ui/components/forms/Input.module.css

@@ -0,0 +1,30 @@
+.input {
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+
+.inputInput {
+  position: relative;
+  background-color: #fff;
+  border-radius: 24rem;
+  padding: 8rem 18rem 8rem 18rem;
+  border: none;
+  display: flex;
+  flex: 1 0 auto;
+  font-size: 14px;
+  color: var(--text-color);
+  caret-color: var(--text-color);
+  transition: var(--transition-short);
+  box-shadow: 1rem 3rem 2rem rgb(0 0 0 / 0.27);
+}
+
+.inputInput:focus {
+  transition: var(--transition-short);
+  outline: none;
+}
+
+.inputInput::placeholder {
+  opacity: 0.5;
+  color: var(--text-color);
+}

hackage-ui/components/forms/Input.tsx

@@ -0,0 +1,28 @@
+import s from './Input.module.css';
+import { useEffect, useRef } from 'react';
+
+const Input = ({ value, placeholder, onChange, focusOnMount }: { placeholder: string, value: string, onChange: (v: string) => void, focusOnMount?: boolean }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+
+  useEffect(() => {
+    if (focusOnMount) {
+      inputRef?.current?.focus();
+    }
+  }, [focusOnMount]);
+
+  return (
+    <div className={s.input}>
+      <input
+        ref={inputRef}
+        className={`${s.inputInput}`}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default Input;

hackage-ui/components/forms/Textarea.module.css

@@ -0,0 +1,34 @@
+.textarea {
+  display: flex;
+  position: relative;
+  align-items: center;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 0.27);
+}
+
+.textareaTextarea {
+  position: relative;
+  background-color: var(--surface-color);
+  border-radius: 6px;
+  border: 1px solid #555;
+  padding: 12px 18px 12px 18px;
+  display: flex;
+  flex: 1 0 auto;
+  font-size: 14px;
+  color: var(--text-color);
+  caret-color: var(--text-color);
+  transition: var(--transition-short);
+}
+
+.textareaTextarea:focus {
+  border: 1px solid var(--purple-color-2);
+  transition: var(--transition-short);
+}
+
+.textareaTextarea:focus {
+  outline: none;
+}
+
+.textareaTextarea::placeholder {
+  opacity: 0.5;
+  color: var(--text-color);
+}

hackage-ui/components/forms/Textarea.tsx

@@ -0,0 +1,27 @@
+import s from './Textarea.module.css';
+import { useEffect, useRef } from 'react';
+
+const Textarea = ({ value, placeholder, rows, onChange, focusOnMount }: { placeholder: string, value: string, rows: number, onChange: (v: string) => void, focusOnMount?: boolean }) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (focusOnMount) {
+      textareaRef?.current?.focus();
+    }
+  }, [focusOnMount]);
+
+  return (
+    <div className={s.textarea}>
+      <textarea
+        ref={textareaRef}
+        className={`${s.textareaTextarea}`}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+      />
+    </div>
+  );
+};
+
+export default Textarea;

hackage-ui/components/layout/Footer.module.css

@@ -0,0 +1,37 @@
+.footer {
+  margin-top: 72rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24rem;
+  background: var(--surface-color);
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+  border-top-right-radius: 12rem;
+  border-top-left-radius: 12rem;
+}
+
+.footerContent {
+  font-size: 14rem;
+  max-width: 1024rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 auto;
+  padding: 18rem 0 18rem 0;
+}
+
+.block {
+  padding: 0 24rem;
+}
+
+.block:first-child {
+  padding-left: 0;
+}
+
+.block:last-child {
+  padding-left: 0;
+}
+
+.block a:hover {
+  color: var(--purple-color-2);
+}

hackage-ui/components/layout/Footer.tsx

@@ -0,0 +1,31 @@
+import s from './Footer.module.css';
+
+const Footer = () => {
+  return (
+    <>
+      <footer className={s.footer}>
+        <div className={s.footerContent}>
+          <div className={s.block}>
+            <a href="#">hackage.haskell.org</a>
+          </div>
+
+          <div className={s.block}>
+            <a href="#">Privacy Policy</a>
+          </div>
+
+          <div className={s.block}>
+            <a href="#">Terms & Conditions</a>
+          </div>
+
+          <div className={s.block}>
+            <a href="mailto:contact@haskell.org">contact@haskell.org</a>
+          </div>
+        </div>
+
+      </footer>
+    </>
+  )
+}
+
+
+export default Footer;

hackage-ui/components/layout/GlobalMenu.module.css

@@ -0,0 +1,70 @@
+.menuItem,
+.menuItems {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+
+  background-color: var(--purple-color-2);
+  backdrop-filter: var(--backdrop-filter-blur);
+  transition: var(--transition-short);
+  z-index: 100;
+}
+
+.menuAtTop {
+  background-color: var(--surface-color-backdrop);
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+  transition: var(--transition-short);
+}
+
+.menuItems {
+  display: flex;
+}
+
+.content {
+  max-width: var(--max-content-width);
+  margin: auto;
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: space-between;
+}
+
+.menuItem {
+  display: flex;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24rem;
+  padding-top: 2rem;
+}
+
+.menuItemLink {
+  color: #fff;
+}
+
+.menuItemLink:hover {
+  opacity: 0.8;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchInput {
+  flex: 1 1 auto;
+  padding-left: 24rem;
+  position: relative;
+}

hackage-ui/components/layout/GlobalMenu.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import s from './GlobalMenu.module.css';
+import Logo from '../branding/Logo';
+import Input from '../forms/Input';
+
+const heightPx = 60;
+
+type Props = {
+  items: Array<{
+    id: string,
+    title: string,
+    href: string
+  }>
+};
+
+export const defaultMenuProps: Props = {
+  items: [
+    { id: 'browse-all-packages', href: '#browser-all-packages', title: 'Browse All Packages' },
+  ]
+};
+
+const GlobalMenu = (props: Props) => {
+  let [atTop, setAtTop] = useState(false);
+
+  function handleScroll(): void {
+    let scrollY = window.scrollY;
+    if (scrollY > heightPx) {
+      setAtTop(true);
+      return;
+    }
+
+    setAtTop(false);
+  }
+
+  useEffect(() => {
+    handleScroll();
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        // Fix margin top for elements below menu.
+        style={{ height: `${heightPx}rem` }}
+      ></div>
+      <div
+        className={`${s.menu} ${atTop ? s.menuAtTop : ''}`}
+        style={{ height: `${heightPx}rem` }}
+      >
+        <div className={s.content}>
+          <a className={s.logo} href="#">
+            <Logo fontSize={18} />
+          </a>
+
+          <div className={s.searchInput}>
+            <Input onChange={() => { }} placeholder='Click to search ...' value='' />
+          </div>
+
+          <ul className={s.menuItems}>
+            {props.items.map(item => {
+              return (
+                <li key={item.id} className={s.menuItem}>
+                  <a className={s.menuItemLink} href={item.href}>{item.title}</a>
+                </li>
+              );
+            })}
+          </ul>
+
+
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default GlobalMenu;

hackage-ui/components/layout/Panel.module.css

@@ -0,0 +1,5 @@
+.panel {
+  background-color: var(--surface-color);
+  padding: 24rem 48rem;
+  border-radius: 18rem;
+}

hackage-ui/components/layout/Panel.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import s from './Panel.module.css';
+
+const Panel = (props: { children: ReactNode }) => {
+  return (
+    <div className={s.panel}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Panel;

hackage-ui/components/pages/Home.module.css

@@ -0,0 +1,82 @@
+.greeting {
+  display: flex;
+  justify-content: center;
+  background-color: var(--purple-color-2);
+  position: relative;
+  overflow: hidden;
+}
+
+.greeting:after {
+  content: "";
+  width: 100%;
+  position: absolute;
+  bottom: -4rem;
+  box-shadow: 0 -4rem 8rem rgb(0 0 0 / 27%);
+  height: 4rem;
+}
+
+.greetingContent {
+  max-width: var(--max-content-width);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.greetingHeader {
+  margin: 0;
+  margin: auto;
+  padding: 24rem 0 64rem 0;
+  color: #fff;
+  text-shadow: 1rem 3rem 2rem rgb(0 0 0 / 0.27);
+  font-size: 42rem;
+  text-align: center;
+}
+
+.gettingStarted {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24rem;
+}
+
+
+.statsContainer {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  max-width: var(--max-content-width);
+  margin: auto;
+  margin-top: 24rem;
+}
+
+.statsContainer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 4rem;
+  background-color: var(--surface-color);
+  border-radius: 4rem;
+}
+
+.stats {
+  display: flex;
+}
+
+.statsText {
+  padding: 24rem;
+  padding-left: 0;
+}
+
+.statsGroup {
+  display: flex;
+  flex-direction: column;
+  padding: 24rem 24rem 0 24rem;
+  padding-right: 0;
+  text-align: right;
+}
+
+.statsAmount {
+  font-size: 32rem;
+  font-weight: bold;
+}

hackage-ui/components/pages/Home.tsx

@@ -0,0 +1,84 @@
+import GlobalMenu, { defaultMenuProps } from "../layout/GlobalMenu";
+import s from './Home.module.css';
+import Button from "../forms/Button";
+
+const Home = () => {
+  return (
+    <div>
+      <GlobalMenu {...defaultMenuProps} />
+      <div className={s.greeting}>
+        <div className={s.greetingContent}>
+          <h1 className={s.greetingHeader}>The Haskell community’s<br /> package registry</h1>
+        </div>
+      </div>
+      <div className={s.gettingStarted}>
+        <div>
+          <Button onClick={() => { }} text="Install Cabal" type="promoButton" overrides={{ style: { width: '200rem' } }} />
+        </div>
+        <div style={{ width: '48rem' }}></div>
+        <div>
+          <Button onClick={() => { }} text="Getting Started" type="promoButton" overrides={{ style: { width: '200rem' } }} />
+        </div>
+      </div>
+
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+      <div className={s.statsContainer}>
+        <Stats downloadsTotal={1234324324} packagesTotal={34534534534} />
+      </div>
+    </div>
+  );
+}
+
+type StatsProps = {
+  downloadsTotal: number,
+  packagesTotal: number
+}
+
+const Stats = (props: StatsProps) => {
+  return (
+    <div className={s.stats}>
+      <div className={s.statsText}>
+        Instantly publish your packages and install them.
+        <br />
+        Use the API to interact and find out more information about available packages.
+        <br />
+        Become a contributor and enhance the site with your work.
+      </div>
+      <div className={s.statsGroups}>
+        <div className={s.statsGroup}>
+          <span className={s.statsAmount}>{props.downloadsTotal}</span>
+          <span className={s.statsUnit}>Downloads</span>
+        </div>
+        <div className={s.statsGroup}>
+          <span className={s.statsAmount}>{props.packagesTotal}</span>
+          <span className={s.statsUnit}>Packages in stock</span>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default Home;
+

hackage-ui/components/pages/Packages.tsx

@@ -0,0 +1,12 @@
+import GlobalMenu, { defaultMenuProps} from "../layout/GlobalMenu";
+
+const Packages = () => {
+  return (
+    <div>
+      <GlobalMenu {...defaultMenuProps} />
+      Packages
+    </div>
+  );
+}
+
+export default Packages;

hackage-ui/components/withAnchor.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+// Fixes wrong scroll position with html anchors.
+const withAnchor = (anchor: string, el: ReactNode): ReactNode => {
+  return (
+    <>
+      <div id={anchor} style={{ height: '80rem' }}></div>
+      {el}
+    </>
+  )
+}
+
+export default withAnchor;

hackage-ui/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.

hackage-ui/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}

hackage-ui/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "hackage-ui",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/mapbox-gl": "^2.6.0",
+    "mapbox-gl": "^2.6.1",
+    "next": "12.0.7",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.4",
+    "@types/react": "17.0.38",
+    "eslint": "8.5.0",
+    "eslint-config-next": "12.0.7",
+    "typescript": "4.5.4"
+  }
+}

hackage-ui/pages/_app.tsx

@@ -0,0 +1,9 @@
+import '../styles/normalize.css'
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

hackage-ui/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

hackage-ui/pages/index.tsx

@@ -0,0 +1,12 @@
+import { NextPage } from 'next';
+import React from 'react';
+import PackagesPage from '../components/pages/Packages';
+import HomePage from '../components/pages/Home';
+
+const Home: NextPage = () => {
+  return (
+    <HomePage />
+  )
+}
+
+export default Home

hackage-ui/public/images/hackage-logo.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="80" viewBox="0 0 512.00001 80">
+	<script xmlns="" />
+	<g fill="#333" fill-opacity=".937">
+		<path d="M188.778 3.424v74.198h-20.39V48.57h-24.89v29.05h-20.39V3.424h20.39v27.38h24.89V3.424h20.39zm26.79 75.243q-4.078 0-7.634-1.36-3.555-1.357-6.17-3.657-2.51-2.403-3.973-5.643-1.46-3.24-1.46-7.002 0-4.18 1.78-7.628 1.78-3.45 4.92-5.957 3.14-2.508 7.43-3.867 4.39-1.358 9.62-1.358 6.7 0 11.09 2.09v-1.672q0-3.867-2.3-5.748-2.19-1.88-7.21-1.88-4.7 0-8.68 1.566-3.97 1.47-8.36 4.39l-5.75-12.33q10.876-7 24.78-7 13.177 0 20.288 5.86 7.11 5.86 7.11 17.56v10.66q0 2.82 1.05 3.97 1.05 1.05 3.77 1.26v16.72q-2.72.52-5.126.73-2.407.32-4.29.32-5.332 0-8.156-1.88-2.72-1.98-3.56-5.75l-.42-1.98q-3.66 4.71-8.47 7.21-4.81 2.41-10.25 2.41zm5.96-14.213q1.778 0 3.66-.522 1.882-.628 3.346-1.568 1.15-.836 1.883-1.777.732-1.045.732-2.09v-4.075q-1.78-.627-3.87-1.045-2.1-.418-3.77-.418-3.66 0-6.07 1.77t-2.41 4.49q0 2.3 1.78 3.76 1.88 1.46 4.7 1.46zm65.41 14.213q-3.45 0-7.424-.523-3.974-.522-7.843-1.358-3.76-.836-7.32-1.986-3.55-1.254-6.16-2.717l7.64-13.48q5.75 3.03 10.98 4.597 5.23 1.568 9.73 1.568 5.23 0 5.23-2.613 0-1.36-2.09-2.404-2.09-1.04-7.94-2.5-5.85-1.56-9.83-3.13-3.97-1.56-6.37-3.45-2.41-1.98-3.45-4.28-1.05-2.4-1.05-5.54 0-4.18 1.674-7.73 1.777-3.55 4.914-6.16 3.136-2.61 7.423-3.97 4.39-1.46 9.515-1.46 5.544 0 11.82 1.57 6.38 1.57 12.965 4.6l-7.64 12.63q-5.86-2.72-9.728-3.87-3.87-1.25-7.43-1.25-2.3 0-3.763.73-1.36.63-1.36 2.09 0 .84.42 1.47.42.52 1.47 1.044 1.05.523 2.83 1.15 1.88.523 4.6 1.15 6.275 1.567 10.56 3.344 4.29 1.68 6.8 3.77 2.613 1.99 3.66 4.6 1.15 2.51 1.15 5.85 0 8.47-6.484 13.38-6.38 4.92-17.465 4.92zm66.962-1.045l-12.445-20.065-3.973 4.39V77.62h-19.87V1.332h19.87v41.7l14.64-20.38h20.914l-18.928 24.036 20.81 30.934h-21.02z" />
+		<path d="M402.905 78.667q-7.215 0-12.862-2.195-5.647-2.3-9.516-6.166-3.764-3.866-5.75-8.883-1.988-5.016-1.988-10.555 0-5.956 1.88-11.286 1.98-5.33 5.75-9.3 3.87-3.972 9.41-6.27 5.64-2.405 13.07-2.405 7.32 0 12.97 2.404 5.64 2.3 9.41 6.27 3.87 3.87 5.75 9.1 1.98 5.12 1.98 10.77 0 1.57-.21 3.24-.11 1.57-.32 2.82H393.9q.315 4.39 3.243 6.38 2.927 1.88 6.377 1.88 3.25 0 6.07-1.46 2.93-1.46 3.87-4.07l16.84 4.81q-3.344 6.59-10.35 10.77-6.902 4.18-17.045 4.18zm8.784-34.382q-.53-3.97-2.93-6.27-2.41-2.3-6.17-2.3-3.77 0-6.17 2.3t-2.93 6.27h18.19zm27.54-42.952h19.86v53.09q0 6.27 5.12 6.27 1.25 0 2.72-.42 1.46-.417 2.72-1.15l2.51 15.99q-3.56 1.673-8.06 2.613-4.39.94-8.37.94-7.95 0-12.24-4.075-4.29-4.07-4.29-11.8V1.34zm37.98 0h19.87v53.09q0 6.27 5.12 6.27 1.25 0 2.72-.42 1.46-.417 2.72-1.15l2.51 15.99q-3.56 1.673-8.06 2.613-4.39.94-8.37.94-7.95 0-12.23-4.075-4.29-4.07-4.29-11.8V1.34z" />
+	</g>
+	<path d="M1.842 77.722L26.586 40.63 1.842 3.537H20.4L45.144 40.63 20.4 77.722H1.842zm0 0" fill="#453a62" />
+	<path d="M26.586 77.722L51.33 40.63 26.586 3.537h18.558L94.63 77.722H76.074L60.61 54.54 45.143 77.722H26.586zm0 0" fill="#5e5086" />
+	<path d="M86.384 56.085L78.136 43.72h28.868v12.366h-20.62zM74.012 37.54l-8.248-12.365h41.24V37.54H74.012zm0 0" fill="#8f4e8b" />
+</svg>

hackage-ui/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

hackage-ui/styles/globals.css

@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+
+:root {
+  font-size: 1px;
+  --background-color: #ffffff;
+  --background-color-backdrop: rgba(94, 80, 134, 0.8);
+  --surface-color: #888888;
+  --surface-color-backdrop: rgba(94, 80, 134, 0.9);
+  --text-color: rgb(70, 70, 70);
+  --purple-color-1: #453a62;
+  --purple-color-2: #5e5086;
+  --purple-color-3: #8f4e8b;
+  --transition-short: all 220ms ease 0s;
+  --backdrop-filter-blur: blur(12px);
+  --accent-color-green: var(--purple-color-2);
+  --accent-color-red: #853232;
+  --accent-color-yellow: #ff9042;
+  --accent-color-blue: #5084ff;
+  --accent-color-purple: #9d50ff;
+  --max-content-width: 800rem;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Fira Sans",Helvetica,Arial,sans-serif;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-size: 16rem;
+  line-height: 1.4;
+}
+
+a {
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

hackage-ui/styles/normalize.css

@@ -0,0 +1,285 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size (opinionated).
+*/
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+	-moz-tab-size: 4; /* 3 */
+	tab-size: 4; /* 3 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+1. Remove the margin in all browsers.
+2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+	margin: 0; /* 1 */
+	font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji'; /* 2 */
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+	text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+	text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+	box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}

hackage-ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}