Create Vercel app for onefetch with ASCII preview (#701)

* Create folder for vercel app

* Ignore vercel directory for CI

* Exclude contents of vercel folder from package

* Initialize Svelte+TS project

* Add API endpoint for getting all languages

* Convert YAML to JSON in build

* Add API endpoint for getting a single language

* Don't stringify JSON before responding

* Add function to get language data

Conditionally gets data based on environment. If in production, then it
is gotten from the API, but if in development, it gets it from the local
file.

* Pluralize API

* Add some styling with a simple navbar

* Add route to ASCII preview

* Colorize ASCII previews

* Reduce vertical spacing in ASCII previews

* Add installation instructions to homepage

* Set type of key parameter

Co-authored-by: Ossama Hjaji <ossama-hjaji@live.fr>

* Fix incorrect response value

Requesting an individual language value was actually returning all languages.

Co-authored-by: Ossama Hjaji <ossama-hjaji@live.fr>

* Darken background of dark preview

The "terminal" background was too light and not representative of a typical configuration.

Co-authored-by: Ossama Hjaji <ossama-hjaji@live.fr>

* Display colored chip next to name in preview

* Move chip out of `<h3>`

Co-authored-by: Ossama Hjaji <ossama-hjaji@live.fr>

* Add language count to preview header

Co-authored-by: Ossama Hjaji <ossama-hjaji@live.fr>

* Fix chip on different line than title

* remove unused div

* fix hyperlink

* remove useless css class

* remove bg color of nav

* remove unused div

* remove app.css

* try to fix build

* bump sakura.css dep

* revert change on tsconfig.ts

* update tsconfig

* remove api

* directly read from yaml

* revert change on tsconfig

* bg set to white when dark checkbox is false

* remove yarn.lock

* reorganize folders

* link sakura.css from HTML

* switch to black if not dark and color is white

* only default to terminal fg color when ansi

* add .gitattributes file to exclude vercel from stats

* switch to language-documentation

* fix ally warning + type

* simplify logic for true color checkbox

* run prettier on all files

* added eslint

* run prettier

* run prettier

* static assets are served from root path

* prettier on .svelte files

* Resolve type error on YAML

* Ignore `dist/`

If a user runs `npm run build` locally to build the Vite deployment,
this folder will be generated with built assets. We probably don't want
those assets to be tracked.

* Make `languages.yaml` module pattern more specific

* use sakura earthly theme

* Add Vercel Deployment CI

* Fix labels for preview checkboxes

* Fix check step

* Fix styling of labels

* Make svelte-check more strict in CI

* Rename main vercel CI job

* Register Vercel subproject for dependabot

* fix alignement of label + checkbox

* add entry  for vercel/ in CODEOWNERS

* fix svelte check

Co-authored-by: o2sh <ossama-hjaji@live.fr>

.gitattributes

@@ -0,0 +1 @@
+vercel/** linguist-documentation

.github/CODEOWNERS

@@ -5,3 +5,4 @@
 /templates/language.rs @spenserblack
 /src/info/deps/ @HallerPatrick @o2sh
 /src/cli.rs @spenserblack @o2sh
+/vercel/ @spenserblack

.github/dependabot.yml

@@ -8,3 +8,7 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+  - package-ecosystem: npm
+    directory: vercel
+    schedule:
+      interval: monthly

.github/workflows/ci.yml

@@ -5,11 +5,13 @@ on:
     paths-ignore:
       - "docs/**"
       - "**.md"
+      - "vercel/**"
   pull_request:
     branches: [main]
     paths-ignore:
       - "docs/**"
       - "**.md"
+      - "vercel/**"
 
 jobs:
   build:

.github/workflows/vercel-ci.yml

@@ -0,0 +1,35 @@
+name: Vercel Deployment CI
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - "vercel/**"
+  pull_request:
+    branches: [main]
+    paths:
+      - "vercel/**"
+
+jobs:
+  check:
+    name: Check Vercel Code Quality
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: vercel
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: npm
+          cache-dependency-path: vercel/package-lock.json
+
+      - name: Install Dependencies
+        run: npm ci
+      # NOTE Since build is automated by vercel, it's probably
+      # redundant to test it here, too
+      - name: Svelte Check
+        run: npm run check -- --fail-on-warnings --fail-on-hints

Cargo.toml

@@ -3,7 +3,7 @@ authors = ["o2sh <ossama-hjaji@live.fr>"]
 categories = ["command-line-utilities"]
 description = "Git repository summary on your terminal"
 edition = "2018"
-exclude = ["assets/*"]
+exclude = ["assets/*", "vercel/*"]
 keywords = [
   "git",
   "cli",

vercel/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2019,
+    "sourceType": "module"
+  },
+  "plugins": ["svelte3"],
+  "extends": ["eslint:recommended"],
+  "overrides": [
+    {
+      "files": ["**/*.svelte"],
+      "processor": "svelte3/svelte3"
+    }
+  ]
+}

vercel/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules
+/build
+/.vercel_build_output
+.vercel
+dist/

vercel/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "singleAttributePerLine": false,
+  "quoteProps": "consistent"
+}

vercel/README.md

@@ -0,0 +1,12 @@
+# Onefetch Web
+
+## Development
+
+```bash
+# setup
+## install dependencies
+npm i
+
+# run server with hot reloading
+npm run dev
+```

vercel/ascii-preview/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/onefetch.ico" />
+    <link rel="stylesheet" href="/sakura.css" type="text/css" />
+    <title>Onefetch - ASCII Preview</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/routes/ascii-preview/main.ts"></script>
+  </body>
+</html>

vercel/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/onefetch.ico" />
+    <link rel="stylesheet" href="/sakura.css" type="text/css" />
+    <title>Onefetch</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/routes/main.ts"></script>
+  </body>
+</html>