Documentation website

website/.eleventy.js

@@ -0,0 +1,112 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+const sass = require('sass');
+
+const navigationPlugin = require('@11ty/eleventy-navigation');
+const { EleventyHtmlBasePlugin: basePlugin } = require("@11ty/eleventy");
+const { glob, globSync } = require('glob');
+
+const markdown = require('markdown-it')({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typographer: true,
+});
+
+// Add target="_blank" to external links
+const defaultAnchorRenderer = markdown.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+  return self.renderToken(tokens, idx, options);
+};
+markdown.renderer.rules.link_open = function(tokens, idx, options, env, self) {
+  const url = tokens[idx].attrGet('href');
+  if (url?.startsWith('http')) {
+    const aIndex = tokens[idx].attrIndex('target');
+    if (aIndex < 0) {
+      tokens[idx].attrPush(['target', '_blank']);
+    }
+    else {
+      tokens[idx].attrs[aIndex][1] = '_blank';
+    }
+    }
+
+  return defaultAnchorRenderer(tokens, idx, options, env, self);
+};
+
+const indir = path.join(__dirname, '/../docs');
+const outdir = path.join(__dirname, '/../website-dist');
+
+function buildStyles() {
+   const { css } = sass.compile(__dirname+'/sass/styles.scss', {
+    loadPaths: [__dirname+'/sass'],
+    style: 'compressed',
+  });
+
+  fs.mkdirSync(outdir, { recursive: true });
+  fs.writeFileSync(outdir+'/styles.css', css);
+}
+
+function buildScript() {
+  esbuild.buildSync({
+    entryPoints: [__dirname+'/js/script.js'],
+    outdir: outdir,
+    minify: true,
+    target: 'es2016',
+  });
+}
+
+function copyStatic() {
+  fs.mkdirSync(outdir, { recursive: true });
+  fs.readdirSync(__dirname+'/static').forEach(function(fname) {
+    fs.copyFileSync(__dirname+'/static/'+fname, outdir+'/'+fname);
+  });
+  globSync(indir+'/**/*.{png,jpg,jpeg}').forEach(function(fname) {
+    const dest = outdir+'/'+fname.slice(indir.length + 1);
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.copyFileSync(fname, dest);
+  });
+}
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.setLibrary('md', markdown);
+  eleventyConfig.addPlugin(navigationPlugin);
+  eleventyConfig.addPlugin(basePlugin);
+  eleventyConfig.addGlobalData('layout', 'page.liquid');
+
+  // Static files
+  eleventyConfig.on('eleventy.before', copyStatic);
+
+  // Sass rendering
+  eleventyConfig.addWatchTarget(__dirname+'/sass/');
+  eleventyConfig.on('eleventy.before', buildStyles);
+
+  // JS compilation
+  eleventyConfig.addWatchTarget(__dirname+'/js/');
+  eleventyConfig.on('eleventy.before', buildScript);
+
+  // Markdown filter
+  eleventyConfig.addFilter('markdowninline', function (text) {
+    return markdown.renderInline(text);
+  });
+
+  // Retrieve content of a file
+  eleventyConfig.addFilter('filecontent', function (fname) {
+    const buf = fs.readFileSync(path.join(indir, fname));
+    return buf.toString();
+  });
+
+  // Global options
+  return {
+    dir: {
+      input: indir,
+      includes: '../website/includes',
+      layouts: '../website/layouts',
+      data: '../website/data',
+      output: outdir,
+    },
+    templateFormats: ['html', 'liquid', 'md', '11ty.js'],
+    markdownTemplateEngine: 'liquid',
+    htmlTemplateEngine: 'liquid',
+    pathPrefix: '/rolens/',
+  };
+};

website/data/eleventyComputed.js

@@ -0,0 +1,17 @@
+module.exports = {
+  eleventyNavigation: {
+    key: data => data.title,
+    parent: data => data.parent,
+    order: data => data.order,
+  },
+
+  navigationOptions: {
+    activeKey: data => data.eleventyNavigation.key,
+  },
+
+  github: {
+    reportDocsIssue: data => `${data.meta.repoUrl}/issues/new?assignees=garraflavatra&labels=documentation&projects=&template=docs.yml&source=${encodeURIComponent(data.meta.siteUrl + data.page.url)}`,
+    licenseUrl: data => `${data.meta.repoUrl}/blob/main/LICENSE`,
+    pageSourceUrl: data => `${data.meta.repoUrl}/blob/main/${data.page.inputPath}`,
+  },
+};

website/data/github.js

@@ -0,0 +1,13 @@
+const { default: fetch } = require("node-fetch")
+
+module.exports = async function() {
+  try {
+    const res = await fetch('https://api.github.com/repos/garraflavatra/alphabets');
+    const json = await res.json();
+    return { stars: json.stargazers_count || 0 };
+  }
+  catch (error) {
+    console.error('ERROR | Could not fetch GitHub stars:', error);
+    return { stars: 0 };
+  }
+}

website/data/meta.json

@@ -0,0 +1,4 @@
+{
+  "siteUrl": "https://garraflavatra.github.io/rolens",
+  "repoUrl": "https://github.com/garraflavatra/rolens"
+}

website/data/shortcuts.json

@@ -0,0 +1,14 @@
+{
+  "collections": [
+    { "description": "Open Stats panel", "option": true, "ctrl": true, "symbol": "H", "link": "/user-guide/collections/stats/" },
+    { "description": "Open Find panel", "option": true, "ctrl": true, "symbol": "F", "link": "/user-guide/collections/find/" },
+    { "description": "Open Insert panel", "option": true, "ctrl": true, "symbol": "I", "link": "/user-guide/collections/insert/" },
+    { "description": "Open Update panel", "option": true, "ctrl": true, "symbol": "U", "link": "/user-guide/collections/update/" },
+    { "description": "Open Remove panel", "option": true, "ctrl": true, "symbol": "R", "link": "/user-guide/collections/remove/" },
+    { "description": "Open Indexes panel", "option": true, "ctrl": true, "symbol": "X", "link": "/user-guide/collections/indexes/" },
+    { "description": "Open Aggregate panel", "option": true, "ctrl": true, "symbol": "A", "link": "/user-guide/collections/aggregate/" }
+  ],
+  "preferences": [
+    { "description": "Open preferences", "ctrl": true, "symbol": ",", "link": "/user-guide/preferences/" }
+  ]
+}

website/includes/githubstars.liquid

@@ -0,0 +1,9 @@
+<a class="githubstars" href="https://github.com/garraflavatra/rolens" target="_blank">
+  <span class="star">★</span>
+
+  {% if github.stars %}
+  <span class="count">{{ github.stars }}</span>
+  {% endif %}
+
+  Star on GitHub!
+</a>

website/includes/shortcut.liquid

@@ -0,0 +1,3 @@
+{%- if shortcut.option -%}<kbd>⌥</kbd>{%- endif -%}
+{%- if shortcut.ctrl -%}<kbd>⌘</kbd>{%- endif -%}
+{%- if shortcut.symbol -%}<kbd>{{ shortcut.symbol }}</kbd>{%- endif -%}

website/includes/shortcuts.liquid

@@ -0,0 +1,10 @@
+<table><thead><tr><th>Shortcut</th><th>Action</th></tr></thead><tbody>
+    {%- for sc in shortcuts -%}
+      <tr><td>
+        {%- if sc.link -%}<a href="{{ sc.link }}">{%- endif -%}
+        {%- render "shortcut", shortcut: sc -%}
+        {%- if sc.link -%}</a>{%- endif -%}
+      </td>
+      <td>{{ sc.description }}</td></tr>
+    {%- endfor -%}
+</tbody></table>

website/layouts/base.liquid

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>{% if title %}{{ title }} — {% endif %}Rolens</title>
+    <meta name="author" content="Romein van Buren" />
+
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>

website/layouts/page.liquid

@@ -0,0 +1,68 @@
+---
+layout: base.liquid
+navigationOptions:
+  listItemHasChildrenClass: haschildren
+  activeAnchorClass: current
+---
+
+<main>
+  <aside>
+    <header id="sitehead">
+      <a href="/">
+        <img src="/logo.png" alt="" />
+        <div>
+          <div class="sitetitle">Rolens</div>
+          <div class="tagline">The intuitive MongoDB administration tool</div>
+        </div>
+      </a>
+    </header>
+
+    <label id="sitetoctoggle" for="sitetocopen">
+      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
+      Toggle navigation
+    </label>
+    <input type="checkbox" id="sitetocopen" />
+
+    <nav id="sitetoc">
+      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml: navigationOptions }}
+    </nav>
+  </aside>
+
+  <article>
+    {% if title or summary %}
+    <header>
+      {% if title %}<h1>{{ title }}</h1>{% endif %}
+      {% if summary %}<p>{{ summary | markdowninline }}</p>{% endif %}
+    </header>
+    {% endif %}
+
+    {{ content }}
+
+    {% if stub %}
+    <div class="wipdoc">
+      <p>
+        Oops… this Rolens documentation page is a work-in-progress! You could
+        <a href="{{ github.pageSourceUrl }}" target="_blank">help writing it</a> — thanks!
+      </p>
+    </div>
+    {% endif %}
+
+    <footer>
+      <p>
+        Spotted an error on this page? Please
+        <a href="{{ github.reportDocsIssue }}" target="_blank">report it</a>
+        — thank you! You could also directly
+        <a href="{{ github.pageSourceUrl }}" target="_blank">edit the page</a>
+        on GitHub.
+      </p>
+      <p>{% render "githubstars" %}</p>
+      <p>
+        © <a href="mailto:romein@vburen.nl">Romein van Buren</a> 2023.
+        The <a href="{{ meta.repoUrl }}">source code</a> and compiled
+        binaries are released under the
+        <a href="{{ github.licenseUrl }}">GNU GPLv3</a>
+        license.
+      </p>
+    </footer>
+  </article>
+</main>

website/package.json

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "dev": "npx @11ty/eleventy --serve"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-navigation": "^0.3.5",
+    "esbuild": "^0.17.19",
+    "glob": "^10.2.6",
+    "node-fetch": "^2.6.11",
+    "sass": "^1.62.1"
+  }
+}

website/sass/styles.scss

@@ -0,0 +1,283 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: #442cce;
+
+  &:active {
+    color: #b40101;
+  }
+}
+
+code {
+  background-color: #ddd;
+  border-radius: 4px;
+  padding: 3px 5px;
+}
+
+svg.icon {
+  width: 1em;
+  height: 1em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vertical-align: -2px;
+}
+
+kbd {
+  display: inline-block;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  margin: 0 1px;
+  padding: 0 4px;
+  font: inherit;
+  font-size: 80%;
+}
+
+// GLOBAL LAYOUT
+
+main {
+  display: grid;
+  line-height: 1.5;
+
+  > aside {
+    order: -1;
+    display: flex;
+    flex-direction: column;
+
+    > nav#sitetoc {
+      display: none;
+      flex: 1;
+    }
+
+    @media (min-width: 768px) {
+      position: sticky;
+      height: 100vh;
+      top: 0;
+    }
+  }
+
+  article { padding: 1rem 2rem; }
+}
+
+// SITEHEAD
+
+header#sitehead {
+  background-color: #b40101;
+  color: #fff;
+  text-align: center;
+
+  a {
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+    padding: 1rem;
+    display: grid;
+    grid-template: 1fr / auto 1fr;
+    align-items: center;
+    gap: 1rem;
+
+    &:hover {
+      background-color: #970404;
+    }
+  }
+
+  img {
+    width: 100px;
+    grid-row: 1 / 3;
+
+    @media (min-width: 768px) {
+      width: 150px;
+    }
+  }
+
+  .sitetitle {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+
+  .tagline {
+    font-size: 1.15rem;
+    line-height: 1.15;
+  }
+}
+
+// SITETOC
+
+nav#sitetoc {
+  padding: 1rem;
+  background-color: #efefef;
+  overflow-y: auto;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li.haschildren > ul {
+    border-left: 1px solid #ddd;
+    margin: 0.5rem 0;
+  }
+
+  a {
+    color: inherit;
+    display: block;
+    text-decoration: none;
+
+    &:hover {
+      color: #970404;
+    }
+
+    &.current {
+      font-weight: 700;
+      color: #970404;
+    }
+  }
+
+  > ul > li {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    > a {
+      font-weight: 500;
+      text-decoration: underline;
+    }
+
+    ul li {
+      margin: 0.2rem 0 0.2rem 1rem;
+    }
+  }
+}
+
+#sitetoctoggle {
+  display: block;
+  padding: 0.5rem 1rem;
+  background-color: #eee;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #ddd;
+  }
+}
+
+#sitetocopen {
+  display: none;
+
+  &:checked ~ nav#sitetoc {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  main { grid-template-columns: minmax(250px, 25%) 1fr; }
+  main > article { padding: 2rem 3rem; }
+  #sitetoctoggle { display: none; }
+  nav#sitetoc { display: block !important; }
+}
+
+// ARTICLE
+
+article {
+  h2, h3, h4, h5, h6 {
+    margin: 0;
+    margin-bottom: 0.5rem;
+    margin-top: 2rem;
+  }
+
+  h1 {
+    font-weight: 600;
+    font-size: 2.5rem;
+    margin: 0 0 2.75rem 0;
+  }
+
+  h2 {
+    font-weight: 600;
+    font-size: 1.6rem;
+    margin-top: 2rem;
+  }
+
+  h3 { font-size: 1.4rem; }
+
+  header {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #ddd;
+
+    h1 { margin-bottom: 0; }
+
+    p {
+      font-size: 1.45rem;
+      font-weight: 300;
+    }
+  }
+
+  p {
+    margin: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol, ul {
+    padding: 0 0 0 1rem;
+
+    li { margin: 0.2rem 0; }
+    + p { margin-top: 1rem; }
+  }
+
+  table {
+    max-width: 100%;
+    border-collapse: collapse;
+
+    th, td {
+      padding: 0.4rem 0.6rem;
+      border: 1px solid #ddd;
+    }
+
+    th {
+      text-align: left;
+      font-weight: 700;
+      background-color: #eee;
+    }
+  }
+
+  footer {
+    margin-top: 3rem;
+    padding-top: 1rem;
+    border-top: 1px solid #ddd;
+    color: #777;
+
+    a { color: #6b54ea; }
+  }
+}
+
+// MISC
+
+.githubstars {
+  display: inline-block;
+  text-decoration: none;
+  color: #000;
+  background-color: #ddd;
+  padding: 0 4px;
+  border-radius: 2px;
+  box-shadow: 0 1.25px #aaa;
+
+  &:hover { background-color: #ccc; }
+  .star { color: #a69e2c; }
+  .count { font-weight: 700; margin-right: 8px; }
+}