From 86d6783ccc574519dcfbdd1feeb34c77e41b162c Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Wed, 21 Apr 2021 23:55:54 +0200
Subject: [PATCH] Rename main exported files

Also add a page for test purposes, and change the layout of the CSS files a bit.
---
 Gruntfile.js                              |  4 +-
 package.json                              |  8 +-
 src/main/css/main.css                     |  8 +-
 src/main/css/nav.css                      | 89 +----------------------
 src/main/css/{ => snippets}/colors.css    |  0
 src/main/css/{ => snippets}/common.css    |  0
 src/main/css/snippets/nav.css             | 87 ++++++++++++++++++++++
 src/main/css/{ => snippets}/overrides.css |  0
 src/test/index.html                       | 53 ++++++++++++++
 9 files changed, 152 insertions(+), 97 deletions(-)
 rename src/main/css/{ => snippets}/colors.css (100%)
 rename src/main/css/{ => snippets}/common.css (100%)
 create mode 100644 src/main/css/snippets/nav.css
 rename src/main/css/{ => snippets}/overrides.css (100%)
 create mode 100644 src/test/index.html

diff --git a/Gruntfile.js b/Gruntfile.js
index 9ac2410..b405601 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -9,7 +9,7 @@ module.exports = grunt => {
         cssmin: {
             target: {
                 files: {
-                    "dist/bundle.css": "src/main/css/main.css",
+                    "dist/template.css": "src/main/css/main.css",
                     "dist/nav.css": ["src/main/css/colors.css", "src/main/css/nav.css"],
                 },
             },
@@ -36,7 +36,7 @@ module.exports = grunt => {
                 output: {
                     library: "fwdekker-template",
                     libraryTarget: "umd",
-                    filename: "bundle.js",
+                    filename: "template.js",
                     path: path.resolve(__dirname, "dist"),
                 }
             },
diff --git a/package.json b/package.json
index b95b170..a6edc25 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "1.1.0",
+    "version": "2.0.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker",
     "license": "MIT",
@@ -12,10 +12,10 @@
     "bugs": {
         "url": "https://git.fwdekker.com/FWDekker/fwdekker-template/issues"
     },
-    "browser": "bundle.js",
+    "browser": "template.js",
     "files": [
-        "dist/bundle.js",
-        "dist/bundle.css"
+        "dist/template.js",
+        "dist/template.css"
     ],
     "scripts": {
         "clean": "grunt clean",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index e4a676f..0926e4a 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,6 +1,6 @@
 @import "../../../node_modules/normalize.css/normalize.css";
 @import "../../../node_modules/milligram/dist/milligram.css";
-@import "colors.css";
-@import "common.css";
-@import "nav.css";
-@import "overrides.css";
+@import "snippets/colors.css";
+@import "snippets/common.css";
+@import "snippets/nav.css";
+@import "snippets/overrides.css";
diff --git a/src/main/css/nav.css b/src/main/css/nav.css
index 32c445a..80d992a 100644
--- a/src/main/css/nav.css
+++ b/src/main/css/nav.css
@@ -1,87 +1,2 @@
-nav {
-    margin: 0;
-    width: 100%;
-
-    background-color: var(--fwdekker-theme-color);
-    font-size: 120%;
-
-    --padding: calc(2em / 3);
-}
-
-nav * {
-    z-index: 10;
-    vertical-align: middle;
-}
-
-nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
-    display: inline-block;
-    margin: 0;
-    padding: calc(var(--padding)) calc(var(--padding));
-    width: 100%;
-
-    color: white;
-}
-
-
-nav .logo {
-    width: calc(1em + var(--padding));
-    height: calc(1em + var(--padding));
-
-    vertical-align: middle;
-    filter: brightness(0) invert(1);
-}
-nav div.logo {
-    display: inline-block;
-    margin-right: calc(1em / 3);
-}
-
-
-nav ul {
-    margin: 0;
-    padding: 0;
-
-    list-style: none;
-}
-
-nav ul li {
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-
-    position: relative;
-    background-color: var(--fwdekker-theme-color);
-}
-
-nav ul li:hover,
-nav ul li:focus-within {
-    cursor: pointer;
-    background-color: var(--fwdekker-theme-color-very-dark);
-}
-
-nav li.currentPage {
-    background-color: var(--fwdekker-theme-color-dark);
-}
-
-
-nav ul li ul {
-    display: none;
-    position: absolute;
-    left: 0;
-}
-
-nav ul li ul li ul {
-    left: 100%;
-    top: 0;
-}
-
-nav ul li:hover > ul,
-nav ul li:focus-within > ul,
-nav ul li ul:hover {
-    display: block;
-}
-
-nav ul li ul li {
-    min-width: 7em;
-    width: 100%;
-    white-space: nowrap;
-}
+@import "snippets/colors.css";
+@import "snippets/nav.css";
diff --git a/src/main/css/colors.css b/src/main/css/snippets/colors.css
similarity index 100%
rename from src/main/css/colors.css
rename to src/main/css/snippets/colors.css
diff --git a/src/main/css/common.css b/src/main/css/snippets/common.css
similarity index 100%
rename from src/main/css/common.css
rename to src/main/css/snippets/common.css
diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css
new file mode 100644
index 0000000..32c445a
--- /dev/null
+++ b/src/main/css/snippets/nav.css
@@ -0,0 +1,87 @@
+nav {
+    margin: 0;
+    width: 100%;
+
+    background-color: var(--fwdekker-theme-color);
+    font-size: 120%;
+
+    --padding: calc(2em / 3);
+}
+
+nav * {
+    z-index: 10;
+    vertical-align: middle;
+}
+
+nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
+    display: inline-block;
+    margin: 0;
+    padding: calc(var(--padding)) calc(var(--padding));
+    width: 100%;
+
+    color: white;
+}
+
+
+nav .logo {
+    width: calc(1em + var(--padding));
+    height: calc(1em + var(--padding));
+
+    vertical-align: middle;
+    filter: brightness(0) invert(1);
+}
+nav div.logo {
+    display: inline-block;
+    margin-right: calc(1em / 3);
+}
+
+
+nav ul {
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+}
+
+nav ul li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+
+    position: relative;
+    background-color: var(--fwdekker-theme-color);
+}
+
+nav ul li:hover,
+nav ul li:focus-within {
+    cursor: pointer;
+    background-color: var(--fwdekker-theme-color-very-dark);
+}
+
+nav li.currentPage {
+    background-color: var(--fwdekker-theme-color-dark);
+}
+
+
+nav ul li ul {
+    display: none;
+    position: absolute;
+    left: 0;
+}
+
+nav ul li ul li ul {
+    left: 100%;
+    top: 0;
+}
+
+nav ul li:hover > ul,
+nav ul li:focus-within > ul,
+nav ul li ul:hover {
+    display: block;
+}
+
+nav ul li ul li {
+    min-width: 7em;
+    width: 100%;
+    white-space: nowrap;
+}
diff --git a/src/main/css/overrides.css b/src/main/css/snippets/overrides.css
similarity index 100%
rename from src/main/css/overrides.css
rename to src/main/css/snippets/overrides.css
diff --git a/src/test/index.html b/src/test/index.html
new file mode 100644
index 0000000..c587269
--- /dev/null
+++ b/src/test/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="author" content="F.W. Dekker" />
+    <meta name="application-name" content="Test" />
+    <meta name="description" content="A test page" />
+    <meta name="theme-color" content="#0033cc" />
+
+    <title>Tools | FWDekker</title>
+
+    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
+    <link rel="stylesheet" href="../../dist/template.css" />
+</head>
+<body>
+<noscript>
+    <p style="color: red; font-weight: bold;">
+        This website does not function if JavaScript is disabled.
+        Please check the <a href="https://www.enable-javascript.com/">
+        instructions on how to enable JavaScript in your web browser</a>.
+    </p>
+</noscript>
+<main style="display: none;">
+    <div id="nav"></div>
+    <div id="contents">
+        <div id="header"></div>
+
+        <section class="container">
+            <p>These are the page contents.</p>
+
+            <p>These are some more contents.</p>
+        </section>
+    </div>
+    <div id="footer"></div>
+</main>
+
+<script src="../../dist/template.js"></script>
+<script>
+    const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
+
+    doAfterLoad(() => {
+        $("#nav").appendChild(nav("/Tools/Dice/"));
+        $("#header").appendChild(header({title: "Test", description: "A test page"}));
+        $("#footer").appendChild(footer({
+            vcsURL: "https://git.fwdekker.com/FWDekker/tools/",
+            version: "vTEST"
+        }));
+        showPage();
+    });
+</script>
+</body>
+</html>