[onefetch.dev] switch to dark theme (#1297)

* use sakura-dark.css

* fix text

* fix text

* revert last change

* Update docs/vercel/README.md

Co-authored-by: Spenser Black <[email protected]>

* rename sakura.css to sakura-dark.css

* fix

* fix

---------

Co-authored-by: Spenser Black <[email protected]>

Author: o2sh

docs/vercel/.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+    parser: '@typescript-eslint/parser',
+    extraFileExtensions: ['.svelte'],
+  },
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+    },
+  ],
+};

docs/vercel/.eslintrc.json

@@ -7,5 +7,7 @@
   "bracketSameLine": true,
   "singleAttributePerLine": false,
   "quoteProps": "consistent",
-  "plugins": ["prettier-plugin-svelte"]
+  "plugins": ["prettier-plugin-svelte"],
+  "svelteSortOrder": "scripts-options-markup-styles",
+  "svelteIndentScriptAndStyle": true
 }

docs/vercel/.prettierrc.json renamed to docs/vercel/.prettierrc

@@ -8,5 +8,5 @@
 npm i
 
 # run server with hot reloading
-npm run dev
+npm start
 ```

docs/vercel/README.md

@@ -4,7 +4,7 @@
     <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" />
+    <link rel="stylesheet" href="/sakura-dark.css" type="text/css" />
     <title>Onefetch</title>
   </head>
 

docs/vercel/index.html

@@ -4,14 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
     "build": "vite build",
     "format": "prettier -w .",
     "preview": "vite preview",
-    "check": "check:svelte && check:prettier && check:eslint",
+    "check": "npm run check:svelte && npm run check:prettier && npm run check:lint",
     "check:svelte": "svelte-check",
     "check:prettier": "prettier --check **/*.{ts,js,svelte,css,html,json}",
-    "check:lint": "eslint 'src/**/*.{ts,js,svelte}'"
+    "check:lint": "eslint src/**/*.{ts,js,svelte}"
   },
   "devDependencies": {
     "@rollup/plugin-yaml": "^4.1.2",

docs/vercel/package-lock.json

@@ -1,3 +1,4 @@
+/* $color-text: #dedce5; */
 /* Sakura.css v1.5.0
  * ================
  * Minimal css theme.
@@ -15,8 +16,8 @@ body {
   line-height: 1.618;
   max-width: 38em;
   margin: auto;
-  color: #222222;
-  background-color: #ffffff;
+  color: #c9c9c9;
+  background-color: #222222;
   padding: 13px;
 }
 
@@ -84,19 +85,19 @@ sup {
 }
 
 hr {
-  border-color: #007559;
+  border-color: #ffffff;
 }
 
 a {
   text-decoration: none;
-  color: #007559;
+  color: #ffffff;
 }
 a:visited {
-  color: #004232;
+  color: #e6e6e6;
 }
 a:hover {
-  color: #006994;
-  border-bottom: 2px solid #222222;
+  color: #c9c9c9;
+  border-bottom: 2px solid #c9c9c9;
 }
 
 ul {
@@ -116,9 +117,9 @@ blockquote {
   padding-top: 0.8em;
   padding-bottom: 0.8em;
   padding-right: 0.8em;
-  border-left: 5px solid #007559;
+  border-left: 5px solid #ffffff;
   margin-bottom: 2.5rem;
-  background-color: #f7f7f7;
+  background-color: #4a4a4a;
 }
 
 blockquote p {
@@ -135,7 +136,7 @@ video {
 
 /* Pre and Code */
 pre {
-  background-color: #f7f7f7;
+  background-color: #4a4a4a;
   display: block;
   padding: 1em;
   overflow-x: auto;
@@ -149,7 +150,7 @@ kbd,
 samp {
   font-size: 0.9em;
   padding: 0 0.5em;
-  background-color: #f7f7f7;
+  background-color: #4a4a4a;
   white-space: pre-wrap;
 }
 
@@ -171,17 +172,17 @@ table {
 td,
 th {
   padding: 0.5em;
-  border-bottom: 1px solid #f7f7f7;
+  border-bottom: 1px solid #4a4a4a;
 }
 
 /* Buttons, forms and input */
 input,
 textarea {
-  border: 1px solid #222222;
+  border: 1px solid #c9c9c9;
 }
 input:focus,
 textarea:focus {
-  border: 1px solid #007559;
+  border: 1px solid #ffffff;
 }
 
 textarea {
@@ -199,10 +200,10 @@ input[type='file']::file-selector-button {
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
-  background-color: #007559;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #222222;
   border-radius: 1px;
-  border: 1px solid #007559;
+  border: 1px solid #ffffff;
   cursor: pointer;
   box-sizing: border-box;
 }
@@ -221,8 +222,8 @@ input[type='submit']:hover,
 input[type='reset']:hover,
 input[type='button']:hover,
 input[type='file']::file-selector-button:hover {
-  background-color: #006994;
-  color: #ffffff;
+  background-color: #c9c9c9;
+  color: #222222;
   outline: 0;
 }
 .button:focus-visible,
@@ -238,24 +239,24 @@ input[type='file']::file-selector-button:focus-visible {
 textarea,
 select,
 input {
-  color: #222222;
+  color: #c9c9c9;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   margin-bottom: 10px;
-  background-color: #f7f7f7;
-  border: 1px solid #f7f7f7;
+  background-color: #4a4a4a;
+  border: 1px solid #4a4a4a;
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box;
 }
 textarea:focus,
 select:focus,
 input:focus {
-  border: 1px solid #007559;
+  border: 1px solid #ffffff;
   outline: 0;
 }
 
 input[type='checkbox']:focus {
-  outline: 1px dotted #007559;
+  outline: 1px dotted #ffffff;
 }
 
 label,

docs/vercel/package.json

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AsciiPreview from './lib/AsciiPreview.svelte';
+  import AsciiPreview from './components/AsciiPreview.svelte';
   import data from '../../../languages.yaml';
   import type { Languages, Language } from '../../../languages.yaml';
   import { onMount } from 'svelte';
@@ -45,7 +45,7 @@
   {#if tagName && htmlUrl}
     <div class="banner">
       <small
-        >Version {tagName} is available 🎉 Check the
+        >🎉 Version {tagName} is available, check the
         <a href={htmlUrl}>release notes</a>!!</small>
     </div>
   {/if}
@@ -62,20 +62,19 @@
 </header>
 <main>
   <p>
-    This page shows you an ASCII preview for all the programming languages
-    supported by onefetch. Like the binary, the data is taken from the <a
+    This page displays an ASCII preview for all the programming languages
+    supported by onefetch. Like the binary, the data is sourced from the <a
       href="https://raw.githubusercontent.com/o2sh/onefetch/main/languages.yaml"
-      ><code>Languages.yaml</code></a> file and the layout is meant to mimic the
-    way the logo would look inside a terminal.
+      ><code>Languages.yaml</code></a> file, and the layout aims to replicate how
+    the logo would appear inside a terminal.
   </p>
   <p>
     Suggestions and PRs are welcome at <a
       href="https://github.com/o2sh/onefetch">github.com/o2sh/onefetch</a>
   </p>
   <div class="title">
     <h3>Languages <small>({$filteredLanguages.length})</small></h3>
-    <button class="filter-button" on:click={() => (showMenu = !showMenu)}
-      >Filter by type</button>
+    <button on:click={() => (showMenu = !showMenu)}>Filter by type</button>
   </div>
 
   <div class:hide={!showMenu}>
@@ -110,13 +109,14 @@
 
 <style>
   .banner {
-    background-color: #e1f6e5;
+    background-color: black;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     text-align: center;
     padding: 0.5rem 0;
+    color: white;
   }
 
   .title {

docs/vercel/public/sakura.css renamed to docs/vercel/public/sakura-dark.css

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { mapToDefaultTerminalFgColor } from '../lib/utils';
   import Chip from './Chip.svelte';
   import TitleLink from './TitleLink.svelte';
 
@@ -27,10 +28,6 @@
       return `${htmlLine}${'</span>'.repeat(spanCount)}`;
     })
     .join('\n');
-
-  function mapToDefaultTerminalFgColor(color: string, dark: boolean): string {
-    return color === 'white' && !dark ? 'black' : color;
-  }
 </script>
 
 <div class="title-row">
@@ -59,6 +56,7 @@
   .logo-container {
     display: flex;
     justify-content: center;
+    background-color: white;
   }
 
   .logo-container.dark {