Merge pull request #23 from GemCopeland/eleventy

Eleventy

.eleventy.js

@@ -1,5 +1,108 @@
-module.exports = function(eleventyConfig) {
+const { DateTime } = require("luxon");
+const CleanCSS = require("clean-css");
+const UglifyJS = require("uglify-es");
+
+const now = new Date();
+
+module.exports = eleventyConfig => {
   eleventyConfig.setBrowserSyncConfig({
     notify: true
   });
+
+  // Add profile collection so that we can access this outside of homepage
+  // TODO Surely there is a better way to do this? Possible to create a data file that pulls from home.md?
+  eleventyConfig.addCollection("profile", collection => {
+    return collection.getAll().filter(item => {
+      return item.data.section == "home";
+    });
+  });
+
+  // Minify CSS
+  eleventyConfig.addFilter("cssmin", code => {
+    return new CleanCSS({}).minify(code).styles;
+  });
+
+  // Minify JS
+  eleventyConfig.addFilter("jsmin", code => {
+    let minified = UglifyJS.minify(code);
+    if (minified.error) {
+      console.log("UglifyJS error: ", minified.error);
+      return code;
+    }
+    return minified.code;
+  });
+
+  // Date formatting
+  eleventyConfig.addFilter("machineDate", dateObj => {
+    return DateTime.fromJSDate(dateObj).toFormat("yyyy-MM-dd");
+  });
+  eleventyConfig.addFilter("readableDate", dateObj => {
+    return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy");
+  });
+  eleventyConfig.addFilter("activityDate", dateObj => {
+    return DateTime.fromJSDate(dateObj).toFormat("MM.yyyy");
+  });
+  eleventyConfig.addFilter("activityYear", dateObj => {
+    return DateTime.fromJSDate(dateObj).toFormat("yyyy");
+  });
+
+  // Create Posts collection
+  eleventyConfig.addCollection("posts", collection => {
+    const livePosts = p => p.date <= now;
+    return collection
+      .getFilteredByGlob("./src/posts/*.md")
+      .filter(livePosts)
+      .reverse();
+  });
+
+  // Create activityCurrent collection
+  eleventyConfig.addCollection("activityCurrent", collection => {
+    return collection
+      .getFilteredByGlob("./src/activity/*.md")
+      .filter(item => {
+        return item.data.dateEnd >= now;
+      })
+      .reverse();
+  });
+
+  // Create activityPast collection
+  eleventyConfig.addCollection("activityPast", collection => {
+    return collection
+      .getFilteredByGlob("./src/activity/*.md")
+      .filter(item => {
+        return item.data.dateEnd < now;
+      })
+      .reverse();
+  });
+
+  // Markdown
+  let markdownIt = require("markdown-it");
+  let options = {
+    html: true,
+    breaks: true,
+    linkify: true
+  };
+  eleventyConfig.addNunjucksFilter("markdownify", markdownString =>
+    markdownIt(options).render(markdownString)
+  );
+
+  // Copy the fonts
+  eleventyConfig.addPassthroughCopy({ "src/_includes/assets/fonts": "fonts" });
+
+  return {
+    templateFormats: ["md", "njk", "html", "liquid", "woff", "woff2"],
+
+    pathPrefix: "/",
+
+    markdownTemplateEngine: "liquid",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+    // passthroughFileCopy: true,
+    dir: {
+      input: "src/.",
+      includes: "_includes",
+      data: "_data",
+      output: "_dist"
+    }
+  };
 };

.eleventyignore

@@ -0,0 +1,2 @@
+README.md
+**/_drafts/*

.gitignore

@@ -1,2 +1,4 @@
-_site/
+
+.DS_Store
+_dist/
 node_modules/

README.md

@@ -1,6 +1,8 @@
 # personal-website
 
-This is a simple website for publishing a CV, research and writing. It will be used for [gemmacope.land](gemmacope.land).
+This is a simple website for publishing a CV, research and writing. It will be used for [gemmacope.land](https://gemmacope.land).
+
+It is a WORK IN PROGRESS!
 
 ## Rationale
 
@@ -25,21 +27,37 @@ At this point, we’ve got the static site generator [Eleventy](https://www.11ty
 
 ### Deploying your site
 
-To deploy the website to a more traditional web host via FTP / SFTP<sup id="ref-11"><a href="#footnote-11">11</a></sup>, compile the website by running `npx @11ty/eleventy`. This will put all of your website files in to the output folder `/_site`, the Eleventy default.
+To deploy the website to a more traditional web host via FTP / SFTP<sup id="ref-11"><a href="#footnote-11">11</a></sup>, compile the website by running `npx @11ty/eleventy`. This will put all of your website files in to the output folder `/_dist`.
 
 Alternatively, <mark>hook the repo up to Netlify</mark>. [Here’s a step-by-step guide](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/). These are the settings you’d use:
 
 Branch: `master`  
-Dir: `_site`  
+Dir: `_dist`  
 Build command: `npx @11ty/eleventy`
 
-This tells Netlify that when some change happens on the `master` branch<sup id="ref-12"><a href="#footnote-12">12</a></sup>, it should run the build command `npx @11ty/eleventy` and deploy any files in the `/_site` directory.
+This tells Netlify that when some change happens on the `master` branch<sup id="ref-12"><a href="#footnote-12">12</a></sup>, it should run the build command `npx @11ty/eleventy` and deploy any files in the `/_dist` directory.
 
 ### Editing content
 
+All of the content files can be found in `/src`. As a general rule, you should feel confident editing Markdown files (files ending in `.md`). Editing template files (`.njk`), styles (`.css`), JavaScript (`.js`), or data (`.json`), but changes to these files may require more delicate consideration.
+
+Within the Markdown files, you will find frontmatter at the top of the file delimited by `---`. This defines data that is separate from the main page content found beneath the frontmatter.
+
+The content that you will edit most frequently is:
+
+- `/src/activity` – Used to populate the activity list on the homepage
+- `/src/pages` – Includes your main pages (Home, Thinking, etc.) as well as default pages such as Privacy
+- `/src/posts` - Used to populate the Writing feed
+
+Within these directories, you may find a `/_drafts` folder. Files within this folder will not be published, so you can safely keep WIP files within these folders. See the demo markdown files within these folders for examples of how to format content
+
+You may also find a `.json` file within these folders. These data files set default values for their sibling `.md` files so that it does not need to be rewritten again and again.
+
 To edit content locally, open up your local site files in your preferred text editor<sup id="ref-13"><a href="#footnote-13">13</a></sup> and then fire up your local server by running `npx @11ty/eleventy --serve`.
 
-TODO Some information about where the files are stored, markdown, etc.
+The content is primarily written in Markdown, so please refer to their documentation for syntax tips. Keep an eye on your curly quotes and apostrophes.
+
+Be sure to push your edits when you’re done!
 
 ### Editing styles
 

package.json

@@ -4,20 +4,32 @@
   "description": "This is a simple website for publishing a CV, research and writing. It will be used for [gemmacope.land](gemmacope.land).",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "npx eleventy",
+    "watch": "npx eleventy --watch",
+    "debug": "DEBUG=* npx eleventy"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/GemCopeland/personal-website.git"
   },
   "keywords": [],
-  "author": "",
+  "author": {
+    "name": "Piper Haywood",
+    "email": "[email protected]",
+    "url": "https://piperhaywood.com/"
+  },
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/GemCopeland/personal-website/issues"
   },
   "homepage": "https://github.com/GemCopeland/personal-website#readme",
   "devDependencies": {
-    "@11ty/eleventy": "^0.9.0"
+    "@11ty/eleventy": "^0.9.0",
+    "are.na": "^0.1.1",
+    "luxon": "^1.17.2"
+  },
+  "dependencies": {
+    "clean-css": "^4.2.1",
+    "uglify-es": "^3.3.9"
   }
 }

src/404.md

@@ -0,0 +1,7 @@
+---
+title: 404
+layout: layouts/page.njk
+permalink: /404.html
+---
+
+Uh oh, the resource you requested isn’t here. Sorry.

src/_data/arena.js

@@ -0,0 +1,96 @@
+// TODO Make this an environment variable
+// https://www.11ty.io/docs/data-js/#example%3A-exposing-environment-variables
+const arenaChannelId = 479545;
+
+// Required package
+const Arena = require("are.na");
+
+const getChannelImages = async arena => {
+  return arena
+    .channel(channel.id)
+    .contents({ page: 1, per: 10 }) // NOTE We’re manually getting the contents because channel.contents sometimes returns null
+    .then(contents => {
+      // Get images within channel contents
+      return contents
+        .filter(b => b.image)
+        .map(b => {
+          return b.image.thumb.url;
+        });
+    });
+};
+
+const getArenaChannels = async channelId => {
+  // Set up the Arena instance
+  const arena = new Arena();
+  // Get the channel
+  let rootChannel = arena.channel(channelId);
+  // Set up base URL
+  let url = "https://are.na/";
+
+  // Get the channels
+  let channels = rootChannel
+    .get()
+    .then(async channel => {
+      // Add the user to the base URL
+      url = url + channel.user.slug + "/";
+
+      // Create a new array of channel contents
+      let reducedChannels = await Promise.all(
+        channel.contents
+          .filter(block => block.base_class == "Channel")
+          .map(async channel => {
+            // Set up the new channel object, somewhat reduced from the default
+            let newChannel = {
+              title: channel.title,
+              description: channel.metadata
+                ? channel.metadata.description
+                : null,
+              images: null,
+              count: channel.length,
+              url: url + channel.slug
+            };
+            // Add some further content to the channel via its child blocks
+            newChannel = await arena
+              .channel(channel.id)
+              .contents() // NOTE We’re manually getting the contents because channel.contents sometimes returns null
+              .then(contents => {
+                // Get images within channel contents
+                newChannel.images = contents
+                  .filter(b => b.image)
+                  .map(b => {
+                    return b.image.thumb.url;
+                  })
+                  .reverse()
+                  .slice(0, 10);
+
+                // Get a description from the text blocks if necessary
+                if (newChannel.description == null) {
+                  let text = contents
+                    .filter(b => {
+                      return b.class == "Text";
+                    })
+                    .map(b => {
+                      return b.content;
+                    })
+                    .join(" ")
+                    .slice(0, 140);
+                  newChannel.description = text ? text + "…" : null;
+                }
+                // Return the channel with the additional image and description content
+                return newChannel;
+              });
+
+            // Return the formatted channel object
+            return newChannel;
+          })
+      );
+      return reducedChannels.reverse();
+    })
+    .catch(err => {
+      console.log(err);
+      return null;
+    });
+  return await channels;
+};
+
+module.exports = getArenaChannels(arenaChannelId);