Merge pull request #31 from JavaScriptMN/11ty

11ty

Author: BrianMitchL

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.eleventy.js

@@ -0,0 +1,96 @@
+const fs = require('fs');
+const inclusiveLangPlugin = require('@11ty/eleventy-plugin-inclusive-language');
+const cacheBuster = require('@mightyplow/eleventy-plugin-cache-buster');
+const htmlmin = require('html-minifier');
+const { minify } = require('terser');
+const siteSettings = require('./src/globals/site.json');
+const {
+  version: eleventyVersion,
+} = require('./node_modules/@11ty/eleventy/package.json');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy('./src/css/tailwind.include.css');
+  eleventyConfig.addPassthroughCopy({ public: './' });
+
+  eleventyConfig.addShortcode('year', function () {
+    return new Date().getFullYear().toString();
+  });
+
+  eleventyConfig.addShortcode('eleventyVersion', function () {
+    return `Eleventy ${eleventyVersion}`;
+  });
+
+  eleventyConfig.addFilter('formatDateTime', function (date) {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZoneName: 'short',
+    });
+  });
+
+  eleventyConfig.addPlugin(inclusiveLangPlugin);
+
+  if (process.env.ELEVENTY_ENV === 'production') {
+    eleventyConfig.addPlugin(cacheBuster({ outputDirectory: 'dist' }));
+
+    eleventyConfig.addTransform('htmlmin', function (content, outputPath) {
+      if (outputPath && outputPath.endsWith('.html')) {
+        return htmlmin.minify(content, {
+          useShortDoctype: true,
+          removeComments: true,
+          collapseWhitespace: true,
+        });
+      }
+
+      return content;
+    });
+  }
+
+  eleventyConfig.addNunjucksAsyncFilter('jsmin', async function (
+    code,
+    callback
+  ) {
+    if (process.env.ELEVENTY_ENV === 'production') {
+      try {
+        const minified = await minify(code);
+        callback(null, minified.code);
+      } catch (err) {
+        console.error('Terser error: ', err);
+        // Fail gracefully.
+        callback(null, code);
+      }
+    } else {
+      callback(null, code);
+    }
+  });
+
+  eleventyConfig.setBrowserSyncConfig({
+    callbacks: {
+      ready: function (err, bs) {
+        bs.addMiddleware('*', (req, res) => {
+          const content_404 = fs.readFileSync('dist/404.html');
+          // Provides the 404 content without redirect.
+          res.write(content_404);
+          // Add 404 http status code in request header.
+          res.writeHead(404, { 'Content-Type': 'text/html' });
+          res.end();
+        });
+      },
+    },
+  });
+
+  return {
+    pathPrefix: siteSettings.baseUrl,
+    dir: {
+      input: 'src',
+      output: 'dist',
+      includes: 'includes',
+      layouts: 'includes/layouts',
+      data: 'globals',
+    },
+  };
+};

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: CI
+on:
+  pull_request:
+    branches: [build]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build site
+        run: npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,24 @@
+name: Deploy
+on:
+  push:
+    branches:
+      - build
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build site
+        run: npm run build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: master
+          publish_dir: ./dist

.gitignore

@@ -1,12 +1,13 @@
 # Project dependencies
 .cache
 node_modules
-yarn-error.log
 
 # Build directory
-/public
+/dist
 .DS_Store
 
 # IDE specific
 .idea/
 .vscode/
+
+*.include.css

.prettierignore

@@ -0,0 +1,4 @@
+/dist
+*.include.css
+package.json
+package-lock.json

.prettierrc

@@ -1,21 +1,23 @@
 # JavaScriptMN
-This site is generated with [Gatsby.js](https://github.com/gatsbyjs/gatsby).
 
-PRs should be made against the `build` branch. Upon merging, a maintainer will separately run the deploy scripts which commits a build version of the site to the `master` branch.
+This site is built with Eleventy and Tailwind.
+
+PRs should be made against the `build` branch. Upon merging, a GitHub Action will build and deploy the site to the `master` branch.
 
 ## Prerequisites
+
 Install dependencies with `npm install`.
 
 ## Develop
-Run `npm run develop` and access the dev server at the address it reports.
+
+Run `npm run start` and access the dev server at the address it reports.
 
 ## Build
-Run `npm build`, and a built version will be written to `/dist`. This will
-also update the markdown files that define our code of conduct, speaker
-questionnaire, and sponsorship levels from the [admin repository](https://github.com/javascriptmn/javascriptmn)
 
-## Style
-This repository is configured to use [prettier](https://prettier.io/) on commit.
+Run `npm build`, and a built version will be written to `/dist`. You can run the built site in a web server, for example, `npx serve dist`.
+
+Building for production minifies HTML, CSS, and JavaScript files as well as adds a cachebusting parameter to those resources.
+
+## Events
 
-It will lint and format your changes automatically, so don't worry about following
-format standards (so long as your code passes the lint-staged step).
+A list of events (past and upcoming) are stored in [src/globals/events.js](src/globals/events.js). The newest non-hidden event that is in the future will be treated as the featured upcoming event. A small amount of clientside JavaScript will automatically hide this event the day after it has occurred.