Create basic setup for Jekyll-based website (#1208)

This Jekyll setup is intentionally simple and theme-less. Templating and front matter is kept out of the actual Markdown content files as much as possible such that those files can also be read directly on GitHub. The SCSS utilities under `_sass/utility/` mostly make use of class names employed by Tailwind CSS.
devlooped · Aug 28, 2021 · d3f63a9 · d3f63a9
1 parent 534b5cd
commit d3f63a9
Show file tree

Hide file tree

Showing 22 changed files with 404 additions and 0 deletions.
diff --git a/docs/Gemfile b/docs/Gemfile
@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'jekyll-relative-links'
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
@@ -0,0 +1,69 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.15.3)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.10)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-relative-links (0.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.1)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.0)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.26.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.7.0)
+
+PLATFORMS
+  x86_64-linux-musl
+
+DEPENDENCIES
+  jekyll-relative-links
+
+BUNDLED WITH
+   2.2.2
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -0,0 +1,14 @@
+baseurl: /moq4
+
+defaults:
+  - scope:
+      path: ""
+    values:
+      layout: "default"
+  - scope:
+      path: "index.md"
+    values:
+      layout: "homepage"
+
+plugins:
+  - jekyll-relative-links
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -0,0 +1,11 @@
+<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>{{ page.title }}</title>
+    <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400&display=swap" rel="stylesheet"> 
+</head>
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -0,0 +1,13 @@
+<header class="sticky top-0 h-64 w-full">
+    <div class="h-full max-w-650 mx-auto px-8 flex justify-stretch items-center space-x-16">
+        <a href="{{ '/' | relative_url }}" class="flex-grow flex items-center space-x-8">
+            <img class="w-42 h-42" src="{{ '/assets/images/moq-icon.png' | relative_url }}">
+            <span>Home</span>
+        </a>
+        <a href="{{ '/user-guide/' | relative_url }}">User Guide</a>
+        <a href="https://github.com/moq/moq4" class="flex items-center space-x-8">
+            <span>GitHub</span>
+            <img class="w-24 h-24" src="{{ '/assets/images/github-32.png' | relative_url }}">
+        </a>
+    </div>
+</header>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+    {% include head.html %}
+    <body>
+        {% include header.html %}
+        <main class="max-w-650 mx-auto my-36 px-8">
+            {{ content }}
+        </main>
+    </body>
+</html>
diff --git a/docs/_layouts/homepage.html b/docs/_layouts/homepage.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+    {% include head.html %}
+    <body>
+        {% include header.html %}
+        <main class="max-w-650 mx-auto my-36 px-8 text-center">
+            {{ content }}
+        </main>
+    </body>
+</html>
diff --git a/docs/_sass/reset.scss b/docs/_sass/reset.scss
@@ -0,0 +1,34 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+footer,
+header,
+main {
+    display: block;
+}
+
+blockquote,
+body,
+figure,
+h1,
+h2,
+h3,
+h4,
+img,
+p,
+pre {
+    margin: 0;
+    padding: 0;
+}
+
+:root,
+body {
+    min-height: 100%;
+}
+
+img {
+    display: inline-block;
+}
diff --git a/docs/_sass/utility/flex.scss b/docs/_sass/utility/flex.scss
@@ -0,0 +1,21 @@
+.flex {
+    display: flex;
+
+    &-grow {
+        flex-grow: 1;
+    }
+}
+
+.items {
+
+    &-center {
+        align-items: center;
+    }
+}
+
+.justify {
+
+    &-stretch {
+        justify-content: stretch;
+    }
+}
diff --git a/docs/_sass/utility/height.scss b/docs/_sass/utility/height.scss
@@ -0,0 +1,18 @@
+.h {
+
+    &-full {
+        height: 100%;
+    }
+
+    &-24 {
+        height: 24px;
+    }
+
+    &-42 {
+        height: 42px;
+    }
+
+    &-64 {
+        height: 64px;
+    }
+}
diff --git a/docs/_sass/utility/margin.scss b/docs/_sass/utility/margin.scss
@@ -0,0 +1,9 @@
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.my-36 {
+    margin-top: 36px;
+    margin-bottom: 36px;
+}
diff --git a/docs/_sass/utility/max-width.scss b/docs/_sass/utility/max-width.scss
@@ -0,0 +1,3 @@
+.max-w-650 {
+    max-width: 650px;
+}
diff --git a/docs/_sass/utility/padding.scss b/docs/_sass/utility/padding.scss
@@ -0,0 +1,7 @@
+.p {
+
+    &x-8 {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+}
diff --git a/docs/_sass/utility/position.scss b/docs/_sass/utility/position.scss
@@ -0,0 +1,15 @@
+.absolute {
+    position: absolute;
+}
+
+.relative {
+    position: relative;
+}
+
+.sticky {
+    position: sticky;
+}
+
+.top-0 {
+    top: 0;
+}
diff --git a/docs/_sass/utility/space-between.scss b/docs/_sass/utility/space-between.scss
@@ -0,0 +1,18 @@
+.space-x {
+
+    &-4 > * + * {
+        margin-left: 4px;
+    }
+
+    &-8 > * + * {
+        margin-left: 8px;
+    }
+
+    &-12 > * + * {
+        margin-left: 12px;
+    }
+
+    &-16 > * + * {
+        margin-left: 16px;
+    }
+}
diff --git a/docs/_sass/utility/text-alignment.scss b/docs/_sass/utility/text-alignment.scss
@@ -0,0 +1,3 @@
+.text-center {
+    text-align: center;
+}
diff --git a/docs/_sass/utility/width.scss b/docs/_sass/utility/width.scss
@@ -0,0 +1,14 @@
+.w {
+
+    &-full {
+        width: 100%;
+    }
+
+    &-24 {
+        width: 24px;
+    }
+
+    &-42 {
+        width: 42px;
+    }
+}
diff --git a/docs/assets/images/github-32.png b/docs/assets/images/github-32.png
diff --git a/docs/assets/images/moq-icon.png b/docs/assets/images/moq-icon.png