Merge pull request #7 from ghivert/refactor/switch-to-new-ui

Revamp the UI

.editorconfig

@@ -0,0 +1,8 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 120

.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

.gitignore

@@ -14,3 +14,5 @@ Thumbs.db
 *.logs
 dist/
 .yarn/
+
+.mise.local.toml

.mise.toml

@@ -0,0 +1,11 @@
+# Runtimes used by the stack.
+[tools]
+gleam = "1.3.2"
+erlang = "27"
+node = "22"
+deno = "latest"
+
+# Environment variables shared by all applications.
+[env]
+NODE_ENV = "development"
+GLEAM_ENV = "development"

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "proseWrap": "always",
+  "importOrder": [
+    "^\\@.*$",
+    "^[^@\\.].*$",
+    "^\\..*$"
+  ],
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports"
+  ]
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+plugins:
+  - ./plugins/yarn-mise.js

CODE_OF_CONDUCT.md

@@ -1,4 +1,3 @@
-
 # Contributor Covenant Code of Conduct
 
 ## Our Pledge
@@ -18,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
+- Focusing on what is best not just for us as individuals, but for the overall
   community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or advances of
+- The use of sexualized language or imagery, and sexual attention or advances of
   any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
   without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=x86_64 ghcr.io/gleam-lang/gleam:v1.3.1-erlang-alpine AS builder
+FROM --platform=x86_64 ghcr.io/gleam-lang/gleam:v1.3.2-erlang-alpine AS builder
 
 RUN apk add build-base ca-certificates
 RUN mkdir -p /build/backend/src
@@ -10,7 +10,7 @@ COPY packages /packages
 
 RUN cd /build/backend && gleam export erlang-shipment
 
-FROM --platform=x86_64 ghcr.io/gleam-lang/gleam:v1.3.1-erlang-alpine as runner
+FROM --platform=x86_64 ghcr.io/gleam-lang/gleam:v1.3.2-erlang-alpine as runner
 LABEL org.opencontainers.image.source https://github.com/ghivert/gloogle
 
 RUN apk add build-base ca-certificates inotify-tools

README.md

@@ -17,7 +17,8 @@ Some features are already implemented, and some others are still on the roadmap!
 - Find a way to expose the database
 - Get GitHub stars for each package on a regular basis
 - Enables Search in documentation directly
-- Filters included with `in:module`, `in:name`, `in:signature` and `in:documentation`
+- Filters included with `in:module`, `in:name`, `in:signature` and
+  `in:documentation`
 
 ## Future developments
 
@@ -40,8 +41,8 @@ Open an issue on the repo! That would be extremely helpful!
 
 ## Copyrights
 
-All rights for Lucy (the gleam mascott) belongs to their creators. Every Lucy will
-be removed upon demands.
+All rights for Lucy (the gleam mascott) belongs to their creators. Every Lucy
+will be removed upon demands.
 
 This project can have lived thanks to Louis Pilfold, who did an amazing work on
 [Gleam Packages](https://github.com/gleam-lang/packages), that has been used as

apps/backend/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "backend",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "backend:dev": "gleam run"
+  },
+  "dependencies": {
+    "@chouqueth/gleam": "^1.3.2"
+  }
+}

apps/frontend/index.html

@@ -8,17 +8,42 @@
     <link rel="stylesheet" href="/hljs-theme.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gloogle</title>
-    <script defer data-domain="gloogle.run" src="https://plausible.io/js/script.js"></script>
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
+    <script
+      defer
+      data-domain="gloogle.run"
+      src="https://plausible.io/js/script.js"
+    ></script>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicons/favicon-16x16.png"
+    />
     <link rel="manifest" href="/favicons/site.webmanifest" />
-    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link
+      rel="mask-icon"
+      href="/favicons/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
     <link rel="shortcut icon" href="/favicons/favicon.ico" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
     <meta name="theme-color" content="#292d3e" />
-    <script src="https://js-de.sentry-cdn.com/2798874d6ff29bdb35b2478129b5563d.min.js" crossorigin="anonymous"></script>
+    <script
+      src="https://js-de.sentry-cdn.com/2798874d6ff29bdb35b2478129b5563d.min.js"
+      crossorigin="anonymous"
+    ></script>
     <script>
       if (typeof Sentry !== 'undefined') {
         Sentry.onLoad(function () {

apps/frontend/manifest.toml

@@ -10,15 +10,15 @@ packages = [
   { name = "gleam_javascript", version = "0.11.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "483631D3001FCE8EB12ADEAD5E1B808440038E96F93DA7A32D326C82F480C0B2" },
   { name = "gleam_json", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "9063D14D25406326C0255BDA0021541E797D8A7A12573D849462CAFED459F6EB" },
   { name = "gleam_otp", version = "0.10.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "0B04FE915ACECE539B317F9652CAADBBC0F000184D586AAAF2D94C100945D72B" },
-  { name = "gleam_stdlib", version = "0.38.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "663CF11861179AF415A625307447775C09404E752FF99A24E2057C835319F1BE" },
+  { name = "gleam_stdlib", version = "0.39.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "2D7DE885A6EA7F1D5015D1698920C9BAF7241102836CE0C3837A4F160128A9C4" },
   { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
   { name = "grille_pain", version = "1.0.1", build_tools = ["gleam"], requirements = ["birl", "gleam_stdlib", "lustre", "plinth", "sketch", "tardis"], otp_app = "grille_pain", source = "hex", outer_checksum = "F0CA9AA0BD4D03B8E190AB4CBB9429DE9389BC2152CF566C3410261F5729827C" },
-  { name = "lustre", version = "4.3.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], source = "local", path = "../../packages/lustre" },
+  { name = "lustre", version = "4.3.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], source = "local", path = "../../packages/lustre" },
   { name = "lustre_http", version = "0.5.2", build_tools = ["gleam"], requirements = ["gleam_fetch", "gleam_http", "gleam_javascript", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_http", source = "hex", outer_checksum = "FB0478CBFA6B16DBE8ECA326DAE2EC15645E04900595EF2C4F039ABFA0512ABA" },
   { name = "modem", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "modem", source = "hex", outer_checksum = "4C6E448089B09A57C179455D44526A717E4E217D4000B91201617FD2D9F18E68" },
-  { name = "plinth", version = "0.4.7", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "BBDD8F05368A1C9AB09A8BF50BBD98E5C23A6AA754DFF2E9B36C87988AC82D47" },
+  { name = "plinth", version = "0.4.8", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "89C9003F4F57AEF76A8051C9A0613926B7C6D742901019DEBBE036F8D1465069" },
   { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" },
-  { name = "sketch", version = "2.2.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "AE2FE447AB1C993CE4884D9EFE915D1971AEDED335904B77BE875B5BE3D7378B" },
+  { name = "sketch", version = "2.3.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "C4BDDB207A3CC94AC83BFB4D1300C51A9D0048569213ED4B35C9D982B305AF9D" },
   { name = "tardis", version = "0.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "tardis", source = "hex", outer_checksum = "C8E7BAB95C59EF50332905A06B82BB35526B7BE2F191580F3CD8790903AA49F7" },
   { name = "thoas", version = "1.2.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "E38697EDFFD6E91BD12CEA41B155115282630075C2A727E7A6B2947F5408B86A" },
 ]

apps/frontend/package.json

@@ -4,12 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "frontend:dev": "vite",
+    "frontend:build": "tsc && vite build",
+    "frontend:preview": "vite preview"
   },
   "dependencies": {
-    "@chouqueth/gleam": "^1.2.1",
+    "@chouqueth/gleam": "^1.3.2",
     "@gleam-lang/highlight.js-gleam": "^1.5.0",
     "@sentry/browser": "^8.0.0",
     "dompurify": "^3.1.4",
@@ -27,6 +27,5 @@
     "typescript": "^5.4.2",
     "vite": "^5.1.6",
     "vite-gleam": "^0.4.0"
-  },
-  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }

apps/frontend/public/hljs-theme.css

@@ -23,9 +23,9 @@ hue-6-2: #e6c07b
   overflow-x: auto;
   padding: 12px;
   color: #abb2bf;
-  background: #1e1e1e;
-  border-radius: 6px;
-  border: 1px solid #4e4e4c;
+  background: rgba(254, 254, 252, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(254, 254, 252, 0.1);
   line-height: 1.4;
   font-size: 14px;
 }

apps/frontend/public/main.css

@@ -2,7 +2,17 @@ body {
   min-height: 100vh;
   background: var(--background);
   color: var(--text-color);
-  font-family: Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-family:
+    Lexend,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Noto Sans',
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
 }
 
 :root {
@@ -13,22 +23,22 @@ body {
   --text-color: #000;
   --text-grey-color: #555;
   --border-color: #ddd;
-  --green: #01FF70;
-  --purple: #8C3A96;
+  --green: #01ff70;
+  --purple: #8c3a96;
   --white: white;
-  --orange: #FF851B;
-  --link: #0074D9;
+  --orange: #ff851b;
+  --link: #0074d9;
   --disabled: #ddd;
   --text-disabled: #333;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #222;
+    --background: rgb(22, 25, 36);
     --card-background: #333;
     --border-color: #111;
     --input-background: #121212;
-    --text-color: #CCC;
+    --text-color: #ccc;
     --text-grey-color: #999;
     --border-color: #333;
     --disabled: #444;
@@ -51,7 +61,7 @@ h6 {
 
 @font-face {
   font-family: Lexend;
-  src: url("/Lexend-VariableFont_wght.ttf") format("woff2-variations");
+  src: url('/Lexend-VariableFont_wght.ttf') format('woff2-variations');
   font-weight: 100 1000;
   font-stretch: 25% 151%;
 }
@@ -62,14 +72,14 @@ a {
 
 @keyframes bg-spin {
   0% {
-      background-position: 0% 50%;
-    }
+    background-position: 0% 50%;
+  }
 
-    50% {
-      background-position: 100% 50%;
-    }
+  50% {
+    background-position: 100% 50%;
+  }
 
-    100% {
-      background-position: 0% 50%;
-    }
+  100% {
+    background-position: 0% 50%;
+  }
 }