feat: Redesign (#40)

* Improve README a bit

* Add python check to makefile

* Refactor fontawesome files

* First sweep of color changes

* Add new fonts

* Update header font usage

* use Noto Sans Mono for 'code'

* Various styling adjustments

* Various styling adjustments

* remove unused CSS

* Update dependencies

* refine footer style

* Update generator

* replace halfmoon js with custom JS

* add new tooltip for copy

* formatting

* Adjust menu style

Author: fhennig

Makefile

@@ -2,6 +2,7 @@ site:
 	./crddocs-generator/build-site.sh repos.yaml template static site
 
 serve:
+	@command -v python >/dev/null 2>&1 || { echo >&2 "Python is not installed. Aborting."; exit 1; }
 	sleep 1 && xdg-open 'http://localhost:8000' &
 	python -m http.server --directory site
 

README.md

@@ -1,14 +1,16 @@
 # Stackable CRD docs
 
-Generated with https://github.com/stackabletech/crddocs-generator (have a look there for how it works)
+https://crds.stackable.tech/
 
 ## Building
 
 run `make`, the site is generated in the `site` directory.
 
+Generated with https://github.com/stackabletech/crddocs-generator (have a look there for how it works).
+
 ## Configuring
 
-configure the repos and versions in the `repo.yaml`.
+Configure the repos and versions in the `repo.yaml`.
 
 HTML templates are in the `template` dir, styling in `static`.
 

crddocs-generator

@@ -4,14 +4,13 @@ import ClipboardJS from 'clipboard'
 import { render } from 'react-dom'
 import DOMPurify from 'dompurify'
 import { html } from 'htm/react'
-import halfmoon from 'halfmoon'
 import slugify from 'slugify'
 import { marked } from 'marked'
 
 // Syntax highlighting imports
-import { getHighlighterCore } from 'shiki/core'
+import { createHighlighterCore } from 'shiki/core'
 import dracula from 'shiki/themes/dracula.mjs'
-import { getWasmInlined } from 'shiki/wasm'
+import getWasm from 'shiki/wasm'
 import yaml from 'shiki/langs/yaml.mjs'
 
 const supportedLangs = ['yaml'];
@@ -20,14 +19,37 @@ window.bus = bus;
 
 const clipboard = new ClipboardJS('.copy-url');
 clipboard.on('success', e => {
-  halfmoon.initStickyAlert({
-    content: "Copied Link!",
-    timeShown: 2000
-  })
+    // Get the button that was clicked
+    var button = e.trigger;
+
+    // Create the tooltip
+    var tooltip = document.createElement('span');
+    tooltip.className = 'tooltip';
+    tooltip.innerHTML = 'Copied!';
+    button.appendChild(tooltip);
+
+    // Show the tooltip
+    setTimeout(function() {
+      tooltip.classList.add('show');
+    }, 50);
+
+    // Hide the tooltip after 2 seconds and remove it
+    setTimeout(function() {
+      tooltip.classList.remove('show');
+      setTimeout(function() {
+        tooltip.remove();
+      }, 10);
+    }, 1500);
+
+    // Clear selection
+    e.clearSelection();
+});
+clipboard.on('error', e => {
+  console.error('Copy failed!');
 });
 
-const highlighter = await getHighlighterCore({
-  loadWasm: getWasmInlined,
+const highlighter = await createHighlighterCore({
+  loadWasm: getWasm,
   themes: [dracula],
   langs: [yaml],
 })

js/doc.js

@@ -1,5 +1,15 @@
-import halfmoon from 'halfmoon'
+function toggleMenu() {
+  var menu = document.getElementById('operator-menu');
+  menu.classList.toggle('active');
+}
 
-document.addEventListener('DOMContentLoaded', () => {
-  halfmoon.onDOMContentLoaded()
-})
+window.toggleMenu = toggleMenu;
+
+// Close the menu when clicking outside
+document.addEventListener('click', function(event) {
+  var isClickInside = document.querySelector('#operator-menu-button').contains(event.target) ||
+                      document.querySelector('#operator-menu').contains(event.target);
+  if (!isClickInside) {
+    document.getElementById('operator-menu').classList.remove('active');
+  }
+});

js/nav.js

@@ -7,14 +7,13 @@
     "build": "pnpm build:nav && pnpm build:home && pnpm build:org && pnpm build:doc"
   },
   "devDependencies": {
-    "esbuild": "^0.21.1",
-    "shiki": "^1.4.0"
+    "esbuild": "^0.23.1",
+    "shiki": "^1.14.1"
   },
   "dependencies": {
     "clipboard": "2.0.11",
     "dompurify": "3.0.6",
     "eventemitter3": "5.0.1",
-    "halfmoon": "^1.1.1",
     "htm": "^3.1.1",
     "marked": "11.1.0",
     "react": "^16.14.0",