Port Documentation pages, and REMOVE DOCPAD (#247)

* flixel-docs install command stuff and prettier stuff

* create github actions test

* replace shopify theme check with eleventy --dryrun

* readme documentation

* more lil info

* docs in progress...

* proper render documentation main page

* remove docpad stuff in progress

* formatting fixies

* remove docpad from build script

* html base for better local sites

* pathprefix input

* flipped the if statement

* npm extra dashes

* package.json script fix for test deploys

.eleventy.js

@@ -1,9 +1,16 @@
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const Image = require("@11ty/eleventy-img");
 const Sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 
 module.exports = function(eleventyConfig) {
     eleventyConfig.addPlugin(EleventyRenderPlugin);
+    eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
+    eleventyConfig.ignores.add("**/README.md");
+    eleventyConfig.ignores.add("**/LICENSE.md");
 
     // used to set the current active dropdown list item to active, depending on current page
     eleventyConfig.addShortcode("dropdownActive", function(dropdownItem) {
@@ -31,7 +38,37 @@ module.exports = function(eleventyConfig) {
       return Image.generateHTML(metadata, imageAttributes);
     });
 
+
     eleventyConfig.addPassthroughCopy({ "src/files/images": "images" });
+
+    // gets folders for documentation collections, except for the images folder!
+    let docPath = path.join(__dirname, "11ty-source/documentation/flixel-docs/documentation");
+    let dirs = fs.readdirSync(docPath, { withFileTypes: true }).map(dirent => dirent.name).filter(dirent => dirent != "images");
+
+    for (const dir in dirs)
+    {
+      const cleanDir = dirs[dir].replace(/^[^a-zA-Z]+/g, "");
+      console.log("Clean DIR: ", cleanDir);
+      eleventyConfig.addCollection(cleanDir, function(collection) {
+        let cool = fs.readdirSync(path.join(docPath, dirs[dir]));
+        // console.log("Dir: ", dirs[dir]);
+        var collectionItem = collection.getFilteredByGlob(`**/flixel-docs/documentation/${dirs[dir]}/**`);
+        // console.log("Collection item: ", collectionItem);
+        collectionItem.map(item => item.data.tags.push(cleanDir));
+        collectionItem.map(item => item.data.docGroup = cleanDir);
+        // collectionItem.map(item => console.log(item.data));
+        // collectionItem.data.push(cleanDir);
+        return collectionItem;
+      });
+    }
+
+
+    eleventyConfig.addFilter("docsRegexp", function (value) {
+      let replacedValue = value.replace(/^[\d\-]+/, "");
+      replacedValue = replacedValue.replace(/\.html$/, "");
+      // console.log(replacedValue);
+      return replacedValue;
+    });
 
     // Return your Object options:
     return {
@@ -50,4 +87,4 @@ async function resizeImage(src, width, height, mode) {
           fastShrinkOnLoad: false
         }})
         .toBuffer();
-}
+}

.github/workflows/main.yml

@@ -1,60 +1,60 @@
 name: CI
 
-on: 
+on:
   push:
   pull_request:
   repository_dispatch:
   workflow_dispatch:
     inputs:
       deploy_gh_pages:
-        description: 'Deploy to gh_pages branch (for use in forks)'
+        description: "Deploy to gh_pages branch (for use in forks)"
         required: false
         type: boolean
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 'latest'
-    - uses: krdlab/setup-haxe@v1
-    - name: Build Site
-      run: |
-        ls -lah
-        npm install
-        npm run build
-        ls -lah
-        haxe --run RemoveRedirects
-    # - name: Highlighting
-    #   run: |
-    #     git clone --recursive https://github.com/ninjamuffin99/Highlighter
-    #     cd Highlighter
-    #     npm install
-    #     node bin/highlighter.js ../out
-    #     cd ..
-    - name: Deploy gh_pages
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{secrets.GITHUB_TOKEN}}
-        publish_dir: ./out
-        force_orphan: true
-      if: inputs.deploy_gh_pages == true
-    - name: Deploy Master
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{secrets.GITHUB_TOKEN}}
-        publish_dir: ./out
-        force_orphan: true
-        cname: haxeflixel.com
-      if: github.ref == 'refs/heads/master'
-    - name: Deploy Dev
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        personal_token: ${{secrets.ACCESS_TOKEN}}
-        publish_dir: ./out
-        force_orphan: true
-        cname: dev.haxeflixel.com
-        external_repository: HaxeFlixel/dev.haxeflixel.com
-      if: github.ref == 'refs/heads/dev'
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+      - uses: krdlab/setup-haxe@v1
+      - name: Build Site
+        run: |
+          ls -lah
+          npm install
+          npm run build ${{ inputs.deploy_gh_pages && format('{0}', github.event.repository.name ) || '' }}
+          ls -lah
+          haxe --run RemoveRedirects
+      # - name: Highlighting
+      #   run: |
+      #     git clone --recursive https://github.com/ninjamuffin99/Highlighter
+      #     cd Highlighter
+      #     npm install
+      #     node bin/highlighter.js ../out
+      #     cd ..
+      - name: Deploy gh_pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{secrets.GITHUB_TOKEN}}
+          publish_dir: ./out
+          force_orphan: true
+        if: inputs.deploy_gh_pages == true
+      - name: Deploy Master
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{secrets.GITHUB_TOKEN}}
+          publish_dir: ./out
+          force_orphan: true
+          cname: haxeflixel.com
+        if: github.ref == 'refs/heads/master'
+      - name: Deploy Dev
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.ACCESS_TOKEN}}
+          publish_dir: ./out
+          force_orphan: true
+          cname: dev.haxeflixel.com
+          external_repository: HaxeFlixel/dev.haxeflixel.com
+        if: github.ref == 'refs/heads/dev'

.github/workflows/test.yml

@@ -0,0 +1,49 @@
+name: Tests
+on: [push, pull_request]
+
+jobs:
+  npm_install:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+      - uses: actions/cache@v4
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm install
+
+  test_matrix:
+    needs: npm_install
+    strategy:
+      fail-fast: false
+      matrix:
+        tests: ["test:js", "test:prettier", "test:liquid"]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+      - uses: actions/cache@v4
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm install
+      - run: npm run ${{ matrix.tests }}

.gitignore

@@ -3,8 +3,9 @@ node_modules/
 docpad.js
 .idea
 src/documents/documentation
+flixel-docs/
 npm-debug.log*
 out
 debug.log
 .DS_Store
-package-lock.json
+package-lock.json

.liquidrc

@@ -0,0 +1,3 @@
+{
+    "engine": "11ty"
+}

.prettierignore

@@ -0,0 +1,2 @@
+**/*.js
+**/vendor/

.prettierrc.yaml

@@ -0,0 +1,5 @@
+tabWidth: 2
+useTabs: true
+printWidth: 100
+bracketSameLine: true
+plugins: ["@shopify/prettier-plugin-liquid"]

.vscode/extensions.jsonc

@@ -0,0 +1,8 @@
+{
+	"recommendations": [
+		"sissel.shopify-liquid", // Liquid syntax highlighting
+		"syler.sass-indented", // Sass syntax highlighting
+		"standard.vscode-standard", // Javascript formatting / linting
+		"esbenp.prettier-vscode", // General linting (JSON + Liquid)
+	],
+}

.vscode/settings.json

@@ -1,8 +1,15 @@
 {
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnSave": true,
 	"files.associations": {
 		"*.eco": "html"
 	},
 	"[liquid]": {
-		"editor.formatOnSave": true
-	}
-}
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "standard.vscode-standard"
+	},
+	"standard.autoFixOnSave": true
+}

11ty-source/404.liquid

@@ -3,16 +3,18 @@ title: "Page not found"
 layout: 404-layout
 permalink: 404.html
 ---
-
 <div class="container">
-<div class="row">
-
-<h2>Strange, we are unable to find the page you have requested.</h2>
-
-<p>It might have been removed, lost or never existed.
-You could try and find it using <a href="https://google.com/search?q=site%3Ahaxeflixel.com">search</a>
+	<div class="row">
+		<h2>Strange, we are unable to find the page you have requested.</h2>
 
-<p>Otherwise ask on our <a href="https://github.com/HaxeFlixel/flixel/discussions">forums</a></p>
+		<p>
+			It might have been removed, lost or never existed. You could try and find it using
+			<a href="https://google.com/search?q=site%3Ahaxeflixel.com">search</a>
+		</p>
 
+		<p>
+			Otherwise ask on our
+			<a href="https://github.com/HaxeFlixel/flixel/discussions">forums</a>
+		</p>
+	</div>
 </div>
-</div>