[docs] Redesign cloudprober.org (#327)

* Hugo theme we were using is discontinued for a long time now and is hard to mantain.
* New design has better contrast and makes information more readable.

.github/workflows/hugo.yml

@@ -3,47 +3,50 @@ name: Build and deploy gh-pages
 on:
   push:
     paths:
-    - 'docs/**'
-    - '.github/workflows/hugo.yml'
+      - 'docs/**'
+      - '.github/workflows/hugo.yml'
 
 jobs:
   build-and-deploy:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
-
-    - name: Set up hugo
-      uses: peaceiris/actions-hugo@v2
-      with:
-        hugo-version: '0.61.0'
-
-    - name: Setup public worktree
-      run: cd docs && git worktree add public gh-pages
-
-    - name: Create a branch for pull request
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      run: |
-        cd docs/public
-        git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-        git push origin --delete gh-pages-github-action || true
-        git checkout -b gh-pages-github-action gh-pages
-
-    - name: Build pages
-      run: cd docs && hugo
-
-    - name: Deploy
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      run: |
-        cd docs/public
-        git config user.name "${GITHUB_ACTOR}"
-        git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
-        git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-        git add --all
-        git status
-        git diff-index --quiet HEAD || git commit -m "Update gh-pages" && git push --set-upstream origin gh-pages-github-action
-
-
+      - uses: actions/checkout@v1
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'npm'
+          cache-dependency-path: 'docs/package-lock.json'
+
+      - name: Setup public worktree
+        run: cd docs && git worktree add public gh-pages
+
+      - name: Create a branch for pull request
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          cd docs/public
+          git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          git push origin --delete gh-pages-github-action || true
+          git checkout -b gh-pages-github-action gh-pages
+
+      - name: Build pages
+        run: |
+          cd docs
+          npm install
+          npm run build
+          ls public
+          cd public && git status
+
+      - name: Deploy
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          cd docs/public
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+          git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          git add --all
+          git status
+          git diff-index --quiet HEAD || git commit -m "Update gh-pages" && git push --set-upstream origin gh-pages-github-action

.gitignore

@@ -1,2 +1,4 @@
+docs/node_modules
 docs/public
+docs/resources
 vendor/

docs/assets/js/app.js

@@ -0,0 +1 @@
+/** Custom scripts */

docs/assets/js/highlight.js

@@ -0,0 +1,29 @@
+import hljs from "highlight.js/lib/core";
+
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import bash from "highlight.js/lib/languages/bash";
+import go from "highlight.js/lib/languages/go";
+import proto from "highlight.js/lib/languages/protobuf";
+import ini from "highlight.js/lib/languages/ini";
+import yaml from "highlight.js/lib/languages/yaml";
+import markdown from "highlight.js/lib/languages/markdown";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("shell", bash);
+hljs.registerLanguage("go", go);
+hljs.registerLanguage("golang", go);
+hljs.registerLanguage("proto", proto);
+hljs.registerLanguage("protobuf", proto);
+hljs.registerLanguage("ini", ini);
+hljs.registerLanguage("toml", ini);
+hljs.registerLanguage("yaml", yaml);
+hljs.registerLanguage("md", markdown);
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("pre code").forEach((block) => {
+    hljs.highlightBlock(block);
+  });
+});

docs/assets/scss/app.scss

@@ -0,0 +1,39 @@
+/** Import Bootstrap functions */
+@import "bootstrap/scss/functions";
+
+/** Import theme variables */
+@import "common/variables";
+@import "common/vars";
+
+/** Import Bootstrap */
+@import "bootstrap/scss/bootstrap";
+
+/** Import highlight.js */
+@import "highlight.js/scss/github";
+
+/** Import KaTeX */
+@import "katex/dist/katex";
+
+/** Import theme styles */
+@import "common/fonts";
+@import "common/global";
+@import "common/dark";
+@import "components/alerts";
+@import "components/buttons";
+@import "components/code";
+@import "components/details";
+@import "components/syntax";
+@import "components/comments";
+@import "components/forms";
+@import "components/images";
+@import "components/mermaid";
+@import "components/search";
+@import "components/tables";
+@import "layouts/footer";
+@import "layouts/header";
+@import "layouts/pages";
+@import "layouts/posts";
+@import "layouts/sidebar";
+
+/** Import custom styles */
+@import "common/custom";

docs/assets/scss/common/_custom.scss

@@ -0,0 +1,4 @@
+/** Custom styles */
+::selection {
+  background: rgba(118, 215, 254, 0.2);
+}

docs/assets/scss/common/_vars.scss

@@ -0,0 +1,18 @@
+$font-size-sm: $font-size-base * 0.8;
+
+$purple-100: rgb(83, 111, 227);
+$pink-500: red;
+
+$primary: #176bab;
+$color-btn-bg: $primary;
+$color-btn-border: darken($primary, 5%);
+$color-btn-text: $white;
+
+$h1-font-size: calc(1.3rem + 0.9vw);
+$h2-font-size: calc(1.2rem + 0.6vw);
+$h3-font-size: calc(1.1rem + 0.3vw);
+
+$font-family-sans-serif: 'Jost', -apple-system, blinkmacsystemfont, 'Segoe UI',
+  roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+$font-family-base: $font-family-sans-serif;

docs/config/_default/config.toml

@@ -0,0 +1,81 @@
+baseurl = "https://doks-child-theme.netlify.app/"
+canonifyURLs = false
+disableAliases = true
+disableHugoGeneratorInject = true
+enableEmoji = true
+enableGitInfo = false
+enableRobotsTXT = true
+paginate = 7
+rssLimit = 10
+
+# Multilingual
+defaultContentLanguage = "en"
+
+# add redirects/headers
+[outputs]
+home = ["HTML", "RSS", "REDIRECTS", "HEADERS"]
+section = ["HTML", "RSS", "SITEMAP"]
+
+# remove .{ext} from text/netlify
+[mediaTypes."text/netlify"]
+suffixes = [""]
+delimiter = ""
+
+# add output format for netlify _redirects
+[outputFormats.REDIRECTS]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+# add output format for netlify _headers
+[outputFormats.HEADERS]
+mediaType = "text/netlify"
+baseName = "_headers"
+isPlainText = true
+notAlternative = true
+
+# add output format for section sitemap.xml
+[outputFormats.SITEMAP]
+mediaType = "application/xml"
+baseName = "sitemap"
+isHTML = false
+isPlainText = true
+noUgly = true
+rel  = "sitemap"
+
+[caches]
+  [caches.getjson]
+    dir = ":cacheDir/:project"
+    maxAge = "10s"
+
+[sitemap]
+  changefreq = "weekly"
+  filename = "sitemap.xml"
+  priority = 0.5
+
+[taxonomies]
+  contributor = "contributors"
+  category = "categories"
+  tag = "tags"
+
+[permalinks]
+  blog = "/blog/:title/"
+# docs = "/docs/1.0/:sections[1:]/:title/"
+
+[minify.tdewolff.html]
+  keepWhitespace = false
+
+[related]
+  threshold = 80
+  includeNewer = true
+  toLower = false
+    [[related.indices]]
+    name = "categories"
+    weight = 100
+    [[related.indices]]
+    name = "tags"
+    weight = 80
+    [[related.indices]]
+    name = "date"
+    weight = 10

docs/config/_default/languages.toml

@@ -0,0 +1,7 @@
+[en]
+  languageName = "English"
+  contentDir = "content"
+  weight = 10
+  [en.params]
+    languageISO = "EN"
+    languageTag = "en-US"

docs/config/_default/markup.toml

@@ -0,0 +1,29 @@
+defaultMarkdownHandler = "goldmark"
+
+[goldmark]
+  [goldmark.extensions]
+    linkify = false
+  [goldmark.parser]
+    autoHeadingID = true
+    autoHeadingIDType = "github"
+    [goldmark.parser.attribute]
+      block = true
+      title = true
+  [goldmark.renderer]
+    unsafe = true
+
+[highlight]
+  codeFences = false
+  guessSyntax = false
+  hl_Lines = ""
+  lineNoStart = 1
+  lineNos = false
+  lineNumbersInTable = true
+  noClasses = false
+  style = "dracula"
+  tabWidth = 4
+
+[tableOfContents]
+  endLevel = 3
+  ordered = false
+  startLevel = 2

docs/config/_default/menus/menus.toml

@@ -0,0 +1,30 @@
+[[main]]
+  name = "Get Started"
+  identifier = "get-started"
+  url = "/docs/overview/getting-started"
+  weight = 30
+
+[[main]]
+  name = "How-Tos"
+  weight = 60
+  identifier = "how-to"
+  url = "/docs/how-to/external-probe"
+
+[[main]]
+  name = "Exporting Metrics (Surfacers)"
+  weight = 70
+  identifier = "surfacers"
+  url = "/docs/surfacers/overview"
+
+[[social]]
+  name = "GitHub"
+  pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>"
+  url = "https://github.com/cloudprober/cloudprober"
+  weight = 10
+
+[[social]]
+  name = "Slack"
+  pre = '<svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.08 9C19.81 1.41 16.54-.35 9 1.92S-.35 7.46 1.92 15 7.46 24.35 15 22.08 24.35 16.54 22.08 9z"></path><line x1="12.57" y1="5.99" x2="16.15" y2="16.39"></line><line x1="7.85" y1="7.61" x2="11.43" y2="18.01"></line><line x1="16.39" y1="7.85" x2="5.99" y2="11.43"></line><line x1="18.01" y1="12.57" x2="7.61" y2="16.15"></line></svg>'
+  url = "https://join.slack.com/t/cloudprober/shared_invite/enQtNjA1OTkyOTk3ODc3LWQzZDM2ZWUyNTI0M2E4NmM4NTIyMjM5M2E0MDdjMmU1NGQ3NWNiMjU4NTViMWMyMjg0M2QwMDhkZGZjZmFlNGE"
+  weight = 20
+