use 11ty (#367)

.eleventy.js

@@ -0,0 +1,81 @@
+const htmlmin = require("html-minifier");
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const {Liquid} = require("liquidjs");
+const markdownIt = require("markdown-it");
+
+function watchAndPass(file, config) {
+    config.addWatchTarget(file);
+    config.addPassthroughCopy(file);
+}
+module.exports = function (eleventyConfig) {
+    watchAndPass("./assets/js", eleventyConfig);
+    watchAndPass("./assets/dist", eleventyConfig);
+    watchAndPass("./assets/img", eleventyConfig);
+    watchAndPass("./api", eleventyConfig);
+    watchAndPass("./favicon.ico", eleventyConfig);
+    watchAndPass("./favicon-16x16.png", eleventyConfig);
+    watchAndPass("./favicon-32x32.png", eleventyConfig);
+    watchAndPass("./android-chrome-192x192.png", eleventyConfig);
+    watchAndPass("./android-chrome-256x256.png", eleventyConfig);
+    watchAndPass("./safari-pinned-tab.svg", eleventyConfig);
+    watchAndPass("./apple-touch-icon.png", eleventyConfig);
+    eleventyConfig.addWatchTarget("./docs");
+
+    eleventyConfig.addPlugin(syntaxHighlight);
+
+    // Reduce HTML output size
+    eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
+        if( this.outputPath && this.outputPath.endsWith(".html") ) {
+          let minified = htmlmin.minify(content, {
+            useShortDoctype: true,
+            removeComments: true,
+            collapseWhitespace: true
+          });
+          return minified;
+        }
+
+        return content;
+    });
+
+    eleventyConfig.addCollection("apps", function(collectionApi) {
+        return collectionApi.getFilteredByGlob("_apps/*.md");
+    });
+
+    eleventyConfig.addCollection("docs", function(collectionApi) {
+        return collectionApi.getFilteredByGlob("_docs/*.md");
+    });
+
+    // Pass custom options to liquid
+    let options = {
+        extname: ".liquid",
+        dynamicPartials: true,
+        strict_filters: true,
+        root: ["_includes"]
+    };
+    const liquid = new Liquid(options);
+    liquid.registerTag('octicon', require("./js/octicons-liquid/tag.js"));
+    eleventyConfig.setLibrary("liquid", liquid);
+
+    // Customize markdown-it settings
+    let markdown = markdownIt({
+        html: true,
+        breaks: true,
+        linkify: true
+    });
+
+    eleventyConfig.addFilter('markdown', function(value) {
+        return markdown.render(value);
+    });
+
+    eleventyConfig.setLibrary("md", markdown);
+
+    // Speed up dev builds by not watching JS deps for changes
+    eleventyConfig.setWatchJavaScriptDependencies(false);
+
+	return {
+		passthroughFileCopy: true,
+        dir: {
+            layouts: "_layouts"
+        }
+	}
+}

.eleventyignore

@@ -0,0 +1,10 @@
+README.md
+CONTRIBUTING.md
+CODE_OF_CONDUCT.md
+LICENSE
+node_modules
+_submodules
+.yarn
+api
+assets/sass
+.github

.eslintrc.yml

@@ -0,0 +1,13 @@
+env:
+  es2020: true
+  node: true
+extends:
+  - 'plugin:prettier/recommended'
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaVersion: 12
+  sourceType: module
+plugins:
+  - '@typescript-eslint'
+  - 'prettier'
+rules: {}

.github/workflows/build.yml

@@ -0,0 +1,42 @@
+name: Build Eleventy
+
+on:
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Cache yarn packages
+        uses: actions/cache@v2
+        with:
+          path: |
+            .yarn/cache
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies & build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git submodule init
+          git submodule update 
+          yarn
+          yarn sass
+          yarn build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: ./_site
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sync.yml

@@ -0,0 +1,44 @@
+name: Sync app data
+
+on:
+  schedule:
+    - cron:  '0 0 * * *'
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Cache yarn packages
+        uses: actions/cache@v2
+        with:
+          path: |
+            .yarn/cache
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies & sync data
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          yarn install
+          yarn sync-data
+
+      - name: Determine default branch
+        run: |
+          DEFAULT_BRANCH=$(git remote show origin | awk '/HEAD branch/ {print $NF}')
+          echo "default_branch=$DEFAULT_BRANCH" >> $GITHUB_ENV
+          echo "default_branch_ref=refs/heads/$DEFAULT_BRANCH" >> $GITHUB_ENV
+
+      - name: Commit & Push changes
+        uses: davidolrik/push@b88b2c57f3a4c23bf2abf091c319e77088dd0172
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          message: 'chore: Sync data'
+          branch: ${{ env.default_branch }}

.gitignore

@@ -1,6 +1,12 @@
-.jekyll-metadata
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+.env
+private
+lib/tsconfig.tsbuildinfo
 _site
-Gemfile.lock
-vendor
-bin
-.bundle
+node_modules

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/node_modules/*/**": true,
+    "**/.yarn/cache/**": true,
+    "**/.yarn/unplugged/**": true,
+  }
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: 'node-modules'
+
+yarnPath: .yarn/releases/yarn-3.0.0-rc.5.cjs

404.html

@@ -8,19 +8,19 @@
     <div class="pb-0 pt-md-4 py-lg-6">
       <div class="d-md-flex flex-md-items-center flex-md-row-reverse flex-md-justify-center gutter-md-spacious">
         <div class="col-md-8 text-center text-md-left">
-          <h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">
+          <h1 class="h2 text-uppercase lh-condensed text-brand-blue">
             <code style="font-size: 1.05em">404</code>: Page not found
           </h1>
-          <h2 class="alt-h2 lh-condensed">
+          <h2 class="h2 lh-condensed">
             Something's missing.
           </h2>
-          <p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
+          <p class="alt-lead color-text-tertiary mt-2 lh-condensed" style="opacity: 0.6">
             The page at this URL doesn't exist.<br>
             Are you looking for <a href="/">the homepage</a> or <a href="/docs">the docs?</a>
           </p>
         </div>
         <div class="col-3 mx-auto mx-md-0 offset-md-1 text-center text-md-right">
-          <img src="/assets/logo.png" class="width-fit" alt="Probot logo">
+          <img src="/assets/img/logo.png" class="width-fit" alt="Probot logo">
         </div>
       </div>
     </div>

CONTRIBUTING.md

@@ -22,15 +22,13 @@ We also use the label 'help wanted' to show issues we want help on! If you'd lik
 ## Submitting a pull request
 
 1. [Fork][fork] and clone the repository
-1. Configure and install the dependencies: `script/bootstrap`
+1. Configure and install the dependencies: `yarn`
 1. Create a new branch: `git checkout -b my-branch-name`
-1. Run the server: `script/server`
+1. Run the server: `yarn watch`
 1. Make your changes
 1. Push to your fork and [submit a pull request][pr]
 1. Pat your self on the back and wait for your pull request to be reviewed and merged.
 
-**Note:** on Windows, instead of `script/bootstrap` you'll need to run `bundle install` and `npm install`. Instead of `script/server`, you'll need to run `bundle exec jekyll serve`.
-
 Here are a few things you can do that will increase the likelihood of your pull request being accepted:
 
 - Follow the [style guide][style] which uses the standard linter.

README.md

@@ -12,23 +12,18 @@ We also use this website to show off some of the cool probot apps built by the c
 
 ## Install and Usage
 
-If you'd like to work on this repository, clone it. We use [Jekyll](https://jekyllrb.com/) to build the website, hosted on [GitHub Pages](https://pages.github.com/). We also use Git submodules to pull docs from the docs folder in  [probot/probot](https://github.com/probot/probot/tree/master/docs).
+If you'd like to work on this repository, clone it. We use [11ty](https://www.11ty.dev/) to build the website, hosted on [GitHub Pages](https://pages.github.com/). We also use Git submodules to pull docs from the docs folder in  [probot/probot](https://github.com/probot/probot/tree/master/docs).
 
 Once you've cloned this repo, run these commands in this directory:
 
-```sh
+```bash
 # Only needed the first time:
-$ script/bootstrap
+$ yarn
 # And each time you work locally:
-$ script/server
-# Below is the expected output:
-Server address: http://127.0.0.1:4000
-Server running... press ctrl-c to stop.
+$ yarn watch
 ```
 
-You should then be able to navigate to the server address, and see live edits you make render in your browser. You'll likely have to familiarize yourself with how Jekyll works to do larger edits, but it's worth the effort!
-
-Another note: You can see more commands we use, such as our native build and server functions, in the [`script`](https://github.com/probot/probot.github.io/tree/master/script) folder. Go take a look!
+You should then be able to navigate to the server address, and see live edits you make render in your browser. You'll likely have to familiarize yourself with how 11ty works to do larger edits, but it's worth the effort!
 
 ## Contribute