2.0: Foldaway (#16)

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "plugins": ["simple-import-sort"],
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
+  "rules": {
+    // Import formatting.
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn",
+    "import/first": "warn",
+    "import/newline-after-import": "warn",
+    "import/no-duplicates": "warn"
+  }
+}

.gitignore

@@ -1,96 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Created by https://www.gitignore.io/api/node
-# Edit at https://www.gitignore.io/?templates=node
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# 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
-
-# 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/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
+# testing
+/coverage
 
-# Optional REPL history
-.node_repl_history
+# next.js
+/.next/
+/out/
 
-# 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 output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# End of https://www.gitignore.io/api/node
+# production
+/build
 
+# misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
 
-# gatsby files
-dist/
+# local env files
+.env*.local
 
+# vercel
 .vercel
 
-buildCache.json
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true
+}

README.md

@@ -1,24 +1,38 @@
-# landing
-[![Netlify Status](https://api.netlify.com/api/v1/badges/744c7980-7a7c-4642-bc4e-7ebd7ffe83f0/deploy-status)](https://app.netlify.com/sites/fch-landing/deploys)
+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).
 
-### Developing
-```shell
-$ yarn dev
-```
+## Getting Started
 
-and
+First, run the development server:
 
-```shell
-$ npx netlify-cms-proxy-server
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm 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.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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!
 
-### Deployment
-Create a GitHub App (this is an alternative to GitHub OAuth Apps and allow for scoping to a single repo). 
+## Deploy on Vercel
 
-Generate the client secret and then set these env vars in your production deployment host:
-- `OAUTH_CLIENT_ID`
-- `OAUTH_CLIENT_SECRET` 
-- `URL` (Netlify sets this automatically)
+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.
 
-If necessary, this should work with BitBucket and GitLab as well, although you will need to set `OAUTH_PROVIDER` as well.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/Paragraph.tsx

@@ -0,0 +1,11 @@
+type ParagraphProps = {
+  children: React.ReactNode;
+};
+
+export function Paragraph(props: ParagraphProps) {
+  return (
+    <p className="leading-relaxed text-neutral-900 dark:text-neutral-50">
+      {props.children}
+    </p>
+  );
+}

components/Project.tsx

@@ -0,0 +1,61 @@
+import classNames from "classnames";
+import Image from "next/image";
+
+import { Tooltip } from "./Tooltip";
+
+type ProjectProps = {
+  project: GitHub.GraphQL.API.PinnableItemEdge;
+  contributors: GitHub.GraphQL.API.User[];
+};
+
+export default function Project(props: ProjectProps) {
+  return (
+    <div
+      key={props.project.cursor}
+      className="group transition-transform hover:-translate-y-0.5"
+    >
+      <a
+        className={classNames(
+          "flex justify-between rounded-md py-4 px-6",
+          "transition-shadow dark:transition-colors",
+          // Background
+          "bg-white dark:bg-gradient-to-b dark:from-neutral-700 dark:to-neutral-800",
+          // Light mode: shadows
+          "shadow-skeuo group-hover:shadow-skeuo-lg dark:shadow-none",
+          // Dark mode: borders
+          "border border-transparent dark:border-neutral-600 dark:group-hover:border-neutral-500"
+        )}
+        href={props.project.node.url}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className="flex flex-col gap-1">
+          <h3>
+            <span className="group-hover:underline">
+              {props.project.node.name}
+            </span>
+            <span className="opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100">
+              &nbsp;↗
+            </span>
+          </h3>
+          <p className="text-sm text-neutral-400 line-clamp-1">
+            {props.project.node.description}
+          </p>
+        </div>
+        <div className="hidden shrink-0 items-center sm:flex">
+          {props.contributors.map((contributor) => (
+            <Tooltip key={contributor.login} content={contributor.name}>
+              <Image
+                src={contributor.avatarUrl}
+                alt={contributor.login}
+                height={24}
+                width={24}
+                className="-ml-1 rounded-full first:ml-0"
+              />
+            </Tooltip>
+          ))}
+        </div>
+      </a>
+    </div>
+  );
+}

components/Section.tsx

@@ -0,0 +1,15 @@
+type SectionProps = {
+  heading: string;
+  children: React.ReactNode;
+};
+4;
+export function Section(props: SectionProps) {
+  return (
+    <div className="flex flex-col gap-4 pt-12">
+      <h2 className="text-neutral-400 dark:text-neutral-500">
+        {props.heading}
+      </h2>
+      {props.children}
+    </div>
+  );
+}