init

.eleventy.js

@@ -0,0 +1,45 @@
+const { DateTime } = require('luxon')
+const navigationPlugin = require('@11ty/eleventy-navigation')
+const rssPlugin = require('@11ty/eleventy-plugin-rss')
+
+module.exports = (config) => {
+  config.addPlugin(navigationPlugin);
+  config.addPlugin(rssPlugin);
+
+  config.addPassthroughCopy('css');
+  config.addPassthroughCopy('static');
+
+  config.setDataDeepMerge(true);
+
+  config.addFilter('htmlDateString', (dateObj) => {
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
+  });
+
+  config.addFilter("readableDate", dateObj => {
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL, yyyy");
+  });
+
+  config.addCollection("tagList", collection => {
+    const tagsObject = {}
+    collection.getAll().forEach(item => {
+      if (!item.data.tags) return;
+      item.data.tags
+        .filter(tag => !['post', 'all'].includes(tag))
+        .forEach(tag => {
+          if(typeof tagsObject[tag] === 'undefined') {
+            tagsObject[tag] = 1
+          } else {
+            tagsObject[tag] += 1
+          }
+        });
+    });
+
+    const tagList = []
+    Object.keys(tagsObject).forEach(tag => {
+      tagList.push({ tagName: tag, tagCount: tagsObject[tag] })
+    })
+    return tagList.sort((a, b) => b.tagCount - a.tagCount)
+
+  });
+
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.vscode
+_site

README.md

@@ -0,0 +1,50 @@
+# Eleventy + Stylus Blog theme
+
+A theme repository that contains a blog built with [Eleventy](https://github.com/11ty/eleventy) and [Stylus](https://stylus-lang.com/)
+
+# Features
+ - 100% Lighthouse scores
+ - Tags as taxonomy
+ - Stylus CSS preprocessor
+ - Integrated with Eleventy's official [navigation plugin](https://www.11ty.dev/docs/plugins/navigation/)
+ - Also generates Atom RSS Feed with Eleventy's official [RSS plugin](https://www.11ty.dev/docs/plugins/rss/)
+ - Sitemap generation
+ - Non-post pages support (eg. About page, Contact page)
+ - Modular type scale implemented in with Stylus
+
+## Demos
+
+TBD
+
+## Screenshot
+
+![screenshot.png](website homepage screenshot)
+
+## Prerequisites
+[Node.js 12](https://nodejs.org/download/release/latest-v12.x/)
+[Yarn](https://yarnpkg.com/) package manager
+
+
+## Getting started
+
+1. Clone this repo
+```
+git clone https://github.com/ar363/eleventy-stylus-blog-theme my-blog
+```
+
+2. Navigate to the blog directory
+```
+cd my-blog
+```
+
+3. Install dependencies with [yarn](https://yarnpkg.com/)
+```
+yarn
+```
+4. Edit `_data/site.js` according to your site preferences
+
+5. Also optionally modify `stylus/abstracts/variables.styl` according to your preference
+
+To watch for changes in Eleventy and Stylus, use `yarn dev`
+
+To build without watching for changes, use `yarn build`

_data/helpers.js

@@ -0,0 +1,6 @@
+module.exports = {
+  currentYear() {
+    const today = new Date();
+    return today.getFullYear();
+  }
+};

_data/site.js

@@ -0,0 +1,20 @@
+module.exports = {
+  meta: {
+    title: "My Purple Blog",
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    lang: "en",
+    siteUrl: "https://example.com/",
+  },
+  feed: { // used in feed.xml.njk
+    subtitle: "Lorem ipsum dolor sit amet consecuteor",
+    filename: "atom.xml",
+    path: "/atom.xml",
+    id: "https://example.com/",
+    authorName: "John Doe",
+    authorEmail: "[email protected]"
+  },
+  hero: { // used in hero section of main page ie. index.html.njk
+    title: "Welcome to my purple blog",
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores accusantium deserunt odio esse."
+  }
+}

_includes/components/footer.njk

@@ -0,0 +1,3 @@
+<footer class="footer">
+  &copy; {{ helpers.currentYear() }} - {{ site.meta.title }}
+</footer>

_includes/components/navbar.njk

@@ -0,0 +1,30 @@
+{% set navPages = collections.all | eleventyNavigation %}
+<nav class="navbar">
+  <div class="navbar__inner">
+    <a class="navbar__logo" href="/">{{ site.meta.title }}</a>
+
+    <button class="navbar__hamburger" aria-expanded="false" aria-label="toggle menu">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#333333">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+      </svg>
+    </button>
+
+    <div class="navbar__links">
+      {% for entry in navPages %}
+        <a class="navbar__link {% if entry.url == page.url %}navbar__link--active{% endif %}" href="{{ entry.url | url }}">
+          {{ entry.title }}
+        </a>
+      {%- endfor %}
+    </div>
+  </div>
+
+  <div class="navbar__mobile-links">
+    {% for entry in navPages %}
+      <a class="navbar__mobile-link {% if entry.url == page.url %}navbar__mobile-link--active{% endif %}" href="{{ entry.url | url }}">
+        {{ entry.title }}
+      </a>
+    {%- endfor %}
+  </div>
+
+</nav>

_includes/components/postslist.njk

@@ -0,0 +1,20 @@
+<div class="card-grid">
+  {% for post in posts %}
+    <div class="card">
+      <h3 class="card__title">
+        <a href="{{ post.url }}">{{ post.data.title }}</a>
+      </h3>
+      <p class="card__date">{{ post.date | readableDate }}</p>
+      <p class="card__description">{{ post.data.description }}</p>
+      <p class="card__subtitle">Tags:</p>
+      <div class="card__tags">
+        {% for tag in post.data.tags %}
+          {% if tag != 'post' %}
+            <a href="/tags/{{ tag | slug }}">{{ tag }}</a>
+            {%- if not loop.last %}, {% endif %}
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+</div>

_includes/layouts/base.njk

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="{{ site.meta.lang }}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% if title %}{{ title }} | {{ site.meta.title }}{% else %}{{ site.meta.title }}{% endif %}</title>
+  <meta name="description" content="{% if description %}{{ description }}{% else %}{{ site.meta.description }}{% endif %}">
+
+  <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="/static/css/main.css" media="all">
+
+</head>
+<body>
+  {% include 'components/navbar.njk' %}
+  {{ content | safe }}
+  {% include 'components/footer.njk' %}
+
+  <script>
+    const ham = document.querySelector('.navbar__hamburger')
+    const menu = document.querySelector('.navbar__mobile-links')
+    ham.addEventListener('click', () => {
+      menu.classList.toggle('navbar__mobile-links--open')
+
+      let prevState = JSON.parse(ham.getAttribute('aria-expanded'))
+      ham.setAttribute('aria-expanded', !prevState)
+    })
+  </script>
+</body>
+</html>

_includes/layouts/post.njk

@@ -0,0 +1,21 @@
+---
+layout: layouts/base.njk
+---
+
+<div class="container-sm">
+  <h1>{{ title }}</h1>
+  {{ content | safe }}
+
+  <br><hr>
+  {% if not hideTagsList %}
+    <b>Tags: </b>
+    {% for tag in tags %}
+      {% if tag != 'post' %}
+        <a href="/tags/{{ tag | slug }}">{{ tag }}</a>
+        {%- if not loop.last %}, {% endif %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+  <br><br>
+  <a href="/">&larr; Back home</a>
+</div>

feed.xml.njk

@@ -0,0 +1,28 @@
+---
+permalink: "{{ site.feed.path }}"
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+	<title>{{ site.meta.title }}</title>
+	<subtitle>{{ site.feed.subtitle }}</subtitle>
+	{% set absoluteUrl %}{{ site.feed.path | url | absoluteUrl(metadata.url) }}{% endset %}
+	<link href="{{ absoluteUrl }}" rel="self"/>
+	<link href="{{ site.siteurl }}"/>
+	<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
+	<id>{{ site.feed.id }}</id>
+	<author>
+		<name>{{ site.feed.authorName }}</name>
+		<email>{{ site.feed.authorEmail }}</email>
+	</author>
+	{%- for post in collections.post | reverse %}
+	{% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
+	<entry>
+		<title>{{ post.data.title }}</title>
+		<link href="{{ absolutePostUrl }}"/>
+		<updated>{{ post.date | rssDate }}</updated>
+		<id>{{ absolutePostUrl }}</id>
+		<content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+	</entry>
+	{%- endfor %}
+</feed>

index.njk

@@ -0,0 +1,48 @@
+---
+eleventyComputed:
+  title: "{% if pagination.pageNumber > 0 %}Page {{ pagination.pageNumber + 1 }}{% else %}Homepage{% endif %}"
+layout: layouts/base.njk
+permalink: /{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}
+pagination:
+  data: collections.post
+  size: 6
+  alias: posts
+  reverse: true
+eleventyNavigation:
+  key: Home
+  weight: 0
+---
+
+<div class="container">
+  <div class="hero">
+    <h1>
+      {% if site.hero.title %}
+        {% if pagination.pageNumber != 0 %}Page {{ pagination.pageNumber + 1 }} | {% endif %}
+        {{ site.hero.title }}
+      {% else %}
+        {{ site.meta.title }}
+      {% endif %}
+    </h1>
+    <p class="hero__description">
+      {% if site.hero.description %}
+        {{ site.hero.description }}
+      {% else %}
+        {{ site.meta.description }}
+      {% endif %}
+    </p>
+  </div>
+
+  <h2 class="section-title">
+    Latest Posts
+    {%- if pagination.pageNumber != 0 %} - Page {{ pagination.pageNumber + 1 }}{% endif %}
+  </h2>
+  {% include "components/postslist.njk" %}
+  <div class="pagination">
+      {% if pagination.previous %}
+        <a href="{{ pagination.href.previous | url }}" class="pagination__prev">&larr; Prev Page</a>
+      {% endif %}
+      {% if pagination.next %}
+        <a href="{{ pagination.href.next | url }}" class="pagination__next">Next Page &rarr;</a>
+      {% endif %}
+  </div>
+</div>

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "11ty-purple",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@11ty/eleventy": "^0.12.1",
+    "@11ty/eleventy-navigation": "^0.1.6",
+    "@11ty/eleventy-plugin-rss": "^1.1.1",
+    "concurrently": "^6.0.0",
+    "luxon": "^1.26.0",
+    "stylus": "^0.54.8"
+  },
+  "scripts": {
+    "build:stylus": "stylus --compress ./stylus/ --out ./static/css/",
+    "watch:stylus": "stylus --watch ./stylus/ --out ./static/css/",
+    "build:11ty": "eleventy",
+    "watch:11ty": "eleventy --serve",
+    "build": "yarn build:stylus && yarn build:11ty",
+    "dev": "concurrently -n stylus,11ty \"yarn watch:stylus\" \"yarn watch:11ty\""
+  }
+}

pages/about.md

@@ -0,0 +1,32 @@
+---
+title: About Me
+description: All about me in this page
+layout: layouts/post.njk
+hideTagsList: true
+eleventyNavigation:
+  key: About
+  weight: 2
+---
+
+
+consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id aliquet lectus. Sit amet consectetur adipiscing elit duis. A diam maecenas sed enim ut. Dolor sit amet consectetur adipiscing elit pellentesque habitant. Gravida neque convallis a cras semper auctor. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Dolor sed viverra ipsum nunc aliquet bibendum. Netus et malesuada fames ac turpis egestas sed tempus. Nunc sed augue lacus viverra. Potenti nullam ac tortor vitae. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. 
+
+## Erat pellentesque adipiscing commodo elit at imperdiet.
+
+Ultrices in iaculis nunc sed augue lacus viverra vitae. Porttitor leo a diam sollicitudin. Nunc congue nisi vitae suscipit. Odio morbi quis commodo odio aenean sed adipiscing diam donec. 
+
+### Urna neque viverra justo nec ultrices. 
+
+Vitae aliquet nec ullamcorper sit amet risus. Neque viverra justo nec ultrices dui sapien eget mi. At consectetur lorem donec massa sapien faucibus et molestie. Mauris cursus mattis molestie a. Risus nec feugiat in fermentum posuere urna nec. Egestas sed sed risus pretium. 
+
+#### quam vulputate dignissim suspendisse in.
+
+Nulla aliquet porttitor lacus luctus accumsan tortor. Malesuada pellentesque elit eget gravida cum sociis natoque. Amet luctus venenatis lectus magna fringilla. Accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Condimentum id venenatis a condimentum. Vulputate ut pharetra sit amet. Dolor sit amet consectetur adipiscing. Odio eu feugiat pretium nibh ipsum consequat nisl. Amet cursus sit amet dictum sit amet justo donec. Nibh sed pulvinar proin gravida hendrerit. Eget egestas purus viverra accumsan in nisl nisi. Arcu risus quis varius quam quisque id diam vel. Ut tortor pretium.
+
+##### viverra suspendisse potenti nullam ac tortor.
+
+Facilisis gravida neque convallis a cras semper auctor. Turpis massa tincidunt dui ut ornare lectus. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Feugiat vivamus at augue eget arcu dictum. Posuere urna nec tincidunt praesent. Ipsum consequat nisl vel pretium lectus quam id leo in. Nulla malesuada pellentesque elit eget gravida cum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Mattis aliquam faucibus purus in massa. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Odio ut sem nulla pharetra diam sit amet nisl. Penatibus et magnis dis parturient montes nascetur ridiculus mus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Risus nullam eget felis eget nunc lobortis mattis. Lectus magna fringilla urna porttitor rhoncus dolor. Lorem ipsum dolor sit amet 
+
+###### consectetur adipiscing elit duis.
+
+Molestie a iaculis at erat pellentesque adipiscing commodo. Ullamcorper velit sed ullamcorper morbi. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Integer vitae justo eget magna fermentum iaculis. Odio tempor orci dapibus ultrices in iaculis nunc. Purus sit amet luctus venenatis lectus magna fringilla urna. Iaculis nunc sed augue lacus viverra vitae congue eu. Id velit ut tortor pretium viverra suspendisse. Tellus elementum sagittis vitae et leo. Nulla malesuada pellentesque elit eget gravida cum sociis. Eget aliquet nibh praesent tristique magna sit amet. Purus sit amet volutpat consequat mauris nunc congue nisi. Sit amet aliquam id diam maecenas ultricies. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Quis ipsum suspendisse ultrices gravida dictum fusce. Ut consequat semper viverra nam libero justo laoreet. Iaculis at erat pellentesque adipiscing commodo. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent.