Merge pull request #58 from GemCopeland/dev

v0.3

.eleventy.js

@@ -90,15 +90,20 @@ module.exports = eleventyConfig => {
   let options = {
     html: true,
     breaks: true,
-    linkify: true
+    linkify: true,
+    typographer: true
   };
+  eleventyConfig.setLibrary("md", markdownIt(options));
   eleventyConfig.addNunjucksFilter("markdownify", markdownString =>
     markdownIt(options).render(markdownString)
   );
 
   // Copy the fonts
   eleventyConfig.addPassthroughCopy({ "src/_includes/assets/fonts": "fonts" });
 
+  // Copy the favicon contents
+  eleventyConfig.addPassthroughCopy({ "src/_includes/assets/favicon": "/" });
+
   return {
     templateFormats: ["md", "njk", "html", "liquid", "woff", "woff2"],
 

.gitignore

@@ -2,3 +2,4 @@
 .DS_Store
 _dist/
 node_modules/
+.vscode/

src/_data/arena.js

@@ -1,39 +1,26 @@
-// TODO Make this an environment variable
-// https://www.11ty.io/docs/data-js/#example%3A-exposing-environment-variables
+// The Arena channel ID
 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/";
-
+  // Set up number per page
+  const per = 60;
+  // Set up number of images per block
+  const imgPerBlock = 30;
   // 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
@@ -45,27 +32,41 @@ const getArenaChannels = async channelId => {
               description: channel.metadata
                 ? channel.metadata.description
                 : null,
-              images: null,
+              images: [],
               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);
 
-                // Return the channel with the additional image and description content
-                return newChannel;
-              });
+            // Calculate the options based on the total pages
+            // NOTE If we could pass `sort_by` and / or `direction` to the opts, we would not need to do this
+            let totalPages = Math.ceil(channel.length / per);
+            let opts = { per: per };
+            // Loop through the pages backwards
+            for (let i = totalPages; i > 0; i--) {
+              // Stop looping through pages if we have enough images
+              if (newChannel.images.length > imgPerBlock) {
+                break;
+              }
+              // Set page to next
+              opts.page = i;
+              // Add some further content to the channel via its child blocks
+              newChannel = await arena
+                .channel(channel.id)
+                .contents(opts) // NOTE We’re manually getting the contents because channel.contents sometimes returns null
+                .then(contents => {
+                  // Get images within channel contents
+                  contents = contents
+                    .filter(b => b.image)
+                    .map(b => {
+                      return b.image.thumb.url;
+                    });
+                  // Add contents to images array
+                  newChannel.images = contents.concat(newChannel.images);
+                  // Return the channel with the additional image and description content
+                  return newChannel;
+                });
+            }
+            newChannel.images = newChannel.images.reverse();
 
             // Return the formatted channel object
             return newChannel;

src/_data/global.json

@@ -4,5 +4,6 @@
   "arrowsTop": "↟, ⇑, ⬏, ↑, ⇡, ⟰, ⤴",
   "lang": "en",
   "schemaType": "Person",
-  "siteTitle": "Gemma Copeland"
+  "siteTitle": "Gemma Copeland",
+  "twitterHandle": "gemcopeland"
 }

src/_includes/assets/css/base.css

@@ -50,18 +50,38 @@ time {
 }
 
 h1,
-h2,
-h3,
+h3 {
+  color: var(--color-1);
+  font-size: var(--font-small);
+  font-weight: inherit;
+  line-height: var(--line-height-small);
+  margin: 0;
+}
+
+h2 {
+  color: var(--color-1);
+  font-weight: inherit;
+  font-size: inherit;
+  margin: 0;
+  line-height: 1.5;
+}
+
 h4,
 h5,
 h6 {
-  color: var(--color-1);
+  color: var(--color-black);
   font-size: var(--font-small);
   font-weight: inherit;
   line-height: var(--line-height-small);
   margin: 0;
 }
 
+strong {
+  font-family: "Standard Book", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+}
+
 ol,
 ul,
 p {
@@ -75,9 +95,10 @@ ul {
 
 a {
   border: 1px solid transparent;
-  border-bottom: 1px solid var(--color-1);
   color: currentColor;
-  text-decoration: none;
+  text-decoration-color: var(--color-1);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25rem;
 }
 
 a:hover {
@@ -87,6 +108,7 @@ a:hover {
 a:focus {
   border: 1px solid var(--color-1);
   color: var(--color-1);
+  text-decoration: none;
 }
 
 img {

src/_includes/assets/css/components.blocks.css

@@ -4,13 +4,12 @@
 
 .block {
   background-color: var(--color-white);
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--gutter);
   padding: 1rem;
   position: relative;
 }
 
 .block__link {
-  border-bottom: none;
   bottom: 0;
   display: block;
   left: 0;
@@ -43,7 +42,11 @@
 }
 
 .block__desc a {
-  border-bottom: none;
+  text-decoration: none;
+}
+
+.block__desc a:focus {
+  border: 1px solid var(--color-1);
 }
 
 .block__media {

src/_includes/assets/css/components.css

@@ -1,12 +1,12 @@
 .button {
   background-color: var(--color-2);
-  border-bottom: 1px solid transparent;
   border-radius: 0.125rem;
   color: var(--color-white);
   display: inline-block;
   margin-bottom: 1rem;
   margin-top: 0.5rem;
   padding: 0.125rem 0.5rem;
+  text-decoration: none;
 }
 
 .tags {
@@ -20,15 +20,15 @@
   line-height: var(--line-height-small);
 }
 
+.tag a {
+  text-decoration: none;
+}
+
 .tag:after {
   content: ",";
   margin-right: 0.2rem;
 }
 
-.tag:hover {
-  text-decoration: none;
-}
-
 .tag:last-child:after {
   content: none;
 }
@@ -41,10 +41,6 @@
   color: var(--color-grey-dark);
 }
 
-.article__time {
-  display: inline-block;
-}
-
 .header--article {
   margin-bottom: 0.875rem;
 }

src/_includes/assets/css/components.footer.css

@@ -1,20 +1,29 @@
 .footer {
   font-size: var(--font-small);
   line-height: var(--line-height-small);
+  position: relative;
 }
 
 .footer--site {
   background-color: var(--color-2);
+  padding-top: 1rem;
 }
 
 .footer .section {
-  padding: 1rem;
+  padding-bottom: 1.25rem;
+  padding-left: var(--gutter);
+  padding-right: var(--gutter);
 }
 
 .footer--site h2 {
   color: var(--color-1);
   font-size: var(--font-small);
   line-height: var(--line-height-small);
+  margin-top: 0 !important;
+}
+
+.footer--site *:last-child {
+  margin-bottom: 0;
 }
 
 .section--footer > * {