pages (#1)

Execute anonymous function

Signed-off-by: Etzelia <etzelia@hotmail.com>

Exclude pages.html, it's only used as a template

Signed-off-by: Etzelia <etzelia@hotmail.com>

Add pages

Signed-off-by: Etzelia <etzelia@hotmail.com>

Reviewed-on: https://git.birbmc.com/BirbMC/birbmc.com/pulls/1
Co-Authored-By: Etzelia <etzelia@hotmail.com>
Co-Committed-By: Etzelia <etzelia@hotmail.com>

.drone.yml

@@ -1,5 +1,18 @@
 ---
 kind: pipeline
+name: compliance
+trigger:
+  event:
+    - pull_request
+steps:
+  - name: build
+    pull: always
+    image: node:14
+    commands:
+      - npm install
+      - npm run build
+---
+kind: pipeline
 name: release
 trigger:
   event:
@@ -12,9 +25,7 @@ steps:
     image: node:14
     commands:
       - npm install
-      - npm run webfonts
+      - npm run build
-      - npm run sass
-      - npm run dist
   - name: archive
     pull: always
     image: jolheiser/drone-arc:latest
@@ -30,4 +41,4 @@ steps:
         from_secret: gitea_token
       base: https://git.etztech.xyz
       files:
-        - "dist.tar.gz"
+        - "dist.tar.gz"

package-lock.json

@@ -35,6 +35,15 @@
         "picomatch": "^2.0.4"
       }
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -162,6 +171,12 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -181,6 +196,15 @@
         "path-exists": "^4.0.0"
       }
     },
+    "front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -281,6 +305,16 @@
       "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
       "dev": true
     },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -423,6 +457,170 @@
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
       "dev": true
     },
+    "showdown": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/showdown/-/showdown-1.9.1.tgz",
+      "integrity": "sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==",
+      "dev": true,
+      "requires": {
+        "yargs": "^14.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "14.2.3",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
+          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^15.0.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "15.0.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.1.tgz",
+          "integrity": "sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "string-width": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",

package.json

@@ -7,7 +7,9 @@
     "sass-noscript": "npx dart-sass -s compressed src/assets/sass/noscript.scss src/assets/css/noscript.css",
     "sass": "npm run sass-main && npm run sass-noscript",
     "webfonts": "npx copyfiles --flat node_modules/@fortawesome/fontawesome-free/webfonts/* src/assets/webfonts/",
-    "dist": "npx copyfiles --exclude src/elements.html --exclude src/generic.html --up 1 src/* src/assets/css/* src/assets/js/* src/assets/webfonts/* src/images/* dist/"
+    "dist": "npx copyfiles --exclude src/elements.html --exclude src/generic.html --exclude src/pages.html --up 1 src/* src/assets/css/* src/assets/js/* src/assets/webfonts/* src/images/* dist/",
+    "pages": "node pages.js",
+    "build": "npm run webfonts && npm run sass && npm run dist && npm run pages"
   },
   "repository": {
     "type": "git",
@@ -18,6 +20,8 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
     "copyfiles": "^2.4.0",
-    "dart-sass": "^1.25.0"
+    "dart-sass": "^1.25.0",
+    "front-matter": "^4.0.2",
+    "showdown": "^1.9.1"
   }
 }

pages.js

@@ -0,0 +1,52 @@
+const fs = require('fs');
+const path = require('path');
+const showdown = require('showdown');
+const frontmatter = require('front-matter');
+const converter = new showdown.Converter();
+
+// Pages to process
+const dir = 'src/pages';
+// Where to put them
+const distDir = 'dist'
+// Required meta
+const requiredMeta = ['title']
+
+// Actual processing
+function run() {
+    if (!fs.existsSync(distDir)) fs.mkdirSync(distDir);
+    fs.readdirSync(dir).forEach((file) => {
+        const filePath = path.join(dir, file)
+        const contents = fs.readFileSync(filePath);
+        const meta = frontmatter(contents.toString())
+        const errs = validateMeta(meta);
+        if (errs.length) throw `Errors in ${file}:\n${errs.join('\n')}`;
+        const dirPath = path.join(distDir, 'path' in meta.attributes ? meta.attributes.path : path.basename(file, '.md'));
+        if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath);
+        const body = converter.makeHtml(meta.body);
+        fs.writeFileSync(path.join(dirPath, 'index.html'), buildTemplate(meta.attributes.title, body))
+    });
+}
+
+
+// Generic template
+const template = fs.readFileSync(path.join('src', 'pages.html')).toString();
+
+// Inject the title and body
+function buildTemplate(title, body) {
+    return template
+        .replace('{{title}}', title)
+        .replace('{{body}}', body)
+}
+
+// Validate a page's metadata
+function validateMeta(meta) {
+    const attr = meta.attributes;
+    let errs = [];
+    requiredMeta.forEach((required) => {
+        if (!(required in attr)) errs.push(`missing ${required}`);
+    });
+    return errs
+}
+
+// Run the h*ckin' thing
+run();

src/assets/js/birbmc.js

@@ -0,0 +1,44 @@
+(function() {
+    // Logo Easter Egg
+    document.querySelector("span.logo").addEventListener("dblclick", (e) => {
+        e.currentTarget.classList.toggle("rotated");
+    });
+
+    // Konami Code Easter Egg
+    var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+    var current = 0;
+
+    var keyHandler = function (event) {
+
+        // If the key isn't in the pattern, or isn't the current key in the pattern, reset
+        if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
+            current = 0;
+            return;
+        }
+
+        // Update how much of the pattern is complete
+        current++;
+
+        // If complete, alert and reset
+        if (pattern.length === current) {
+            current = 0;
+            document.querySelector("body").classList.add("animate");
+        }
+
+    };
+
+    // Listen for keydown events
+    document.addEventListener('keydown', keyHandler, false);
+
+
+    // Discord
+    document.getElementById("discord").addEventListener("click", () => {
+        let widget = document.querySelector("#discord > .widget");
+
+        if (widget.style.display === "block") {
+            widget.style.display = "none";
+        } else {
+            widget.style.display = "block";
+        }
+    });
+})();

src/assets/js/main.js

@@ -120,47 +120,4 @@
 		speed: 1000
 	});
 
-	// Logo Easter Egg
+})(jQuery);
-	document.querySelector("span.logo").addEventListener("dblclick", (e) => {
-		e.currentTarget.classList.toggle("rotated");
-	});
-
-	// Konami Code Easter Egg
-	var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
-	var current = 0;
-
-	var keyHandler = function (event) {
-
-		// If the key isn't in the pattern, or isn't the current key in the pattern, reset
-		if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
-			current = 0;
-			return;
-		}
-
-		// Update how much of the pattern is complete
-		current++;
-
-		// If complete, alert and reset
-		if (pattern.length === current) {
-			current = 0;
-			document.querySelector("body").classList.add("animate");
-		}
-
-	};
-
-	// Listen for keydown events
-	document.addEventListener('keydown', keyHandler, false);
-
-
-	// Discord
-	document.getElementById("discord").addEventListener("click", () => {
-		let widget = document.querySelector("#discord > .widget");
-
-		if (widget.style.display === "block") {
-			widget.style.display = "none";
-		} else {
-			widget.style.display = "block";
-		}
-	});
-
-})(jQuery);

src/index.html

@@ -66,11 +66,6 @@
                 Please stop by! We have a greylist so anybody can come look
                 around before applying!
               </p>
-              <!--
-                <ul class="actions">
-                  <li><a href="generic.html" class="button">Learn More</a></li>
-                </ul>
-              -->
             </div>
             <span class="image"><img src="images/showcase.png" alt="" /></span>
           </div>
@@ -120,11 +115,6 @@
               </p>
             </li>
           </ul>
-          <!-- <footer class="major">
-            <ul class="actions special">
-              <li><a href="generic.html" class="button">Learn More</a></li>
-            </ul>
-          </footer> -->
         </section>
 
         <!-- Second Section -->
@@ -136,28 +126,6 @@
               server!
             </p>
           </header>
-          <!-- <ul class="statistics">
-            <li class="style1">
-              <span class="icon solid fa-code-branch"></span>
-              <strong>5,120</strong> Etiam
-            </li>
-            <li class="style2">
-              <span class="icon fa-folder-open"></span>
-              <strong>8,192</strong> Magna
-            </li>
-            <li class="style3">
-              <span class="icon solid fa-signal"></span>
-              <strong>2,048</strong> Tempus
-            </li>
-            <li class="style4">
-              <span class="icon solid fa-laptop"></span>
-              <strong>4,096</strong> Aliquam
-            </li>
-            <li class="style5">
-              <span class="icon fa-gem"></span>
-              <strong>1,024</strong> Nullam
-            </li>
-          </ul> -->
 
           <section class="two-column">
             <div style="break-inside: avoid">
@@ -296,75 +264,11 @@
             </span>
             <p>Take a look around and do <span style="font-family:monospace"><a href="https://birbmc.com/apply">/apply</a></span> when you're ready!</p>
           </header>
-          <!-- <footer class="major">
-            <ul class="actions special">
-              <li>
-                <p class="button primary">Discord</p>
-              </li>
-              <li>
-                <a href="https://www.reddit.com/r/BirbMC/" class="button"
-                  >Reddit</a
-                >
-              </li>
-            </ul>
-          </footer> -->
         </section>
       </div>
 
       <!-- Footer -->
       <footer id="footer">
-        <!--
-        <section>
-          <h2>Aliquam sed mauris</h2>
-          <p>
-            Sed lorem ipsum dolor sit amet et nullam consequat feugiat consequat
-            magna adipiscing tempus etiam dolore veroeros. eget dapibus mauris.
-            Cras aliquet, nisl ut viverra sollicitudin, ligula erat egestas
-            velit, vitae tincidunt odio.
-          </p>
-          <ul class="actions">
-            <li><a href="generic.html" class="button">Learn More</a></li>
-          </ul>
-        </section>
-        <section>
-          <h2>Etiam feugiat</h2>
-          <dl class="alt">
-            <dt>Address</dt>
-            <dd>1234 Somewhere Road &bull; Nashville, TN 00000 &bull; USA</dd>
-            <dt>Phone</dt>
-            <dd>(000) 000-0000 x 0000</dd>
-            <dt>Email</dt>
-            <dd><a href="#">information@untitled.tld</a></dd>
-          </dl>
-          <ul class="icons">
-            <li>
-              <a href="#" class="icon brands fa-twitter alt"
-                ><span class="label">Twitter</span></a
-              >
-            </li>
-            <li>
-              <a href="#" class="icon brands fa-facebook-f alt"
-                ><span class="label">Facebook</span></a
-              >
-            </li>
-            <li>
-              <a href="#" class="icon brands fa-instagram alt"
-                ><span class="label">Instagram</span></a
-              >
-            </li>
-            <li>
-              <a href="#" class="icon brands fa-github alt"
-                ><span class="label">GitHub</span></a
-              >
-            </li>
-            <li>
-              <a href="#" class="icon brands fa-dribbble alt"
-                ><span class="label">Dribbble</span></a
-              >
-            </li>
-          </ul>
-        -->
-        </section>
         <p class="copyright">
           &copy; BirbMC. Design: <a href="https://html5up.net">HTML5 UP</a>.
         </p>
@@ -389,6 +293,7 @@
     <script src="assets/js/breakpoints.min.js"></script>
     <script src="assets/js/util.js"></script>
     <script src="assets/js/main.js"></script>
+    <script src="assets/js/birbmc.js"></script>
     <script src="assets/js/clipboard.min.js"></script>
     <script type="text/javascript">
       new ClipboardJS(".copy-to-clipboard");

src/pages.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+	Stellar by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+<head>
+  <title>{{title}}</title>
+  <meta charset="utf-8" />
+  <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, user-scalable=no"
+  />
+  <link rel="shortcut icon" href="../images/logo.png" type="../image/png">
+  <link rel="stylesheet" href="../assets/css/main.css" />
+  <noscript>
+    <link rel="stylesheet" href="../assets/css/noscript.css" />
+  </noscript>
+</head>
+<body class="is-preload">
+<!-- Wrapper -->
+<div id="wrapper">
+
+  <!-- Padding -->
+  <br/>
+
+  <!-- Main -->
+  <div id="main">
+    <section id="second" class="main">
+      {{body}}
+    </section>
+  </div>
+
+  <!-- Footer -->
+  <footer id="footer">
+    <p class="copyright">
+      &copy; BirbMC. Design: <a href="https://html5up.net">HTML5 UP</a>.
+    </p>
+  </footer>
+</div>
+
+<!-- Scripts -->
+<script src="../assets/js/jquery.min.js"></script>
+<script src="../assets/js/jquery.scrollex.min.js"></script>
+<script src="../assets/js/jquery.scrolly.min.js"></script>
+<script src="../assets/js/browser.min.js"></script>
+<script src="../assets/js/breakpoints.min.js"></script>
+<script src="../assets/js/util.js"></script>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>

src/pages/smp-to-ssp.md

@@ -0,0 +1,43 @@
+---
+title: Converting Multiplayer Worlds to Singleplayer
+path: smp-to-ssp
+---
+# Converting Multiplayer Worlds to Singleplayer
+
+Multiplayer worlds are structured differently than single-player worlds, and as such, they can't be loaded directly without some re-structuring.
+
+Details in the guide below are assuming you're on Windows, but the same process will apply regardless of Mac, Linux, etc.
+
+1. Download the multiplayer ZIP file and extract it into a temporary folder.
+    * Some servers/server admins do multiple layers of zipping, so you may want to use 7zip for this. It is better (faster, and supports more file types) than the native Windows utilities.
+
+2. Open a Windows explorer window in that temp location when done. Leave the window open in the background for now.
+
+3. Launch Minecraft, create a new single-player world, and load it for the first time.
+    * The name of the world doesn't really matter; for the purposes of this guide, the new map will be called **Falcon**, and the old world will be called **Turnip**.
+    * Ideally this new world will be the same major and minor MC version that the multiplayer world was on.
+    * *Optional:* load up the end and nether, to ensure it creates the folders you need, but this step shouldn't be required.
+    * **Note:** Loading older multiplayer worlds onto newer single-player versions should generally be fine, but you don't want to load a newer world save onto an older version of Minecraft.
+
+4. Save and exit the new **Falcon** world, but don't close Minecraft.
+
+5. Open a second Windows explorer window and find your new world's save location. The default should be something like this:
+
+   `C:\Users\<user>\AppData\Roaming\.minecraft\saves\Falcon`
+
+   In the Temp folder location, you should see one folder per dimension.  
+   *Example: one folder named **Turnip**, another named **Turnip**_nether.*
+
+6. Open Turnip folder and you should now see folders named `region` and `playerdata`.
+
+7. Replace the region folder in **Falcon** with the one from **Turnip**.
+    * This may take a while. If it cries about files already existing, just replace them.
+    * Don't worry about the `playerdata` folder unless you care about your inventory/enderchest contents.  
+      If you want to retain that information, move that folder as well.
+
+8. Go back to the temp folder and now open the **Turnip**_nether folder. You should see a single folder called DIM-1. Use this to replace the DIM-1 folder in the **Falcon** folder.
+    * If you don't see it in **Falcon**, don't worry, you probably just didn't load the nether in an earlier step.  
+      Just move it underneath the root **Falcon** folder, so that it the same level as other folders like `advancements`, `data`, `playerdata`, `region`, `stats`, etc.
+
+That should be it! Launch the **Falcon** world and test it out!  
+To save space, go back and delete the temporary folders you made earlier.