├── .editorconfig
├── .eleventy.js
├── .eleventyignore
├── .gitignore
├── .node-version
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .tool-versions
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs
    └── development.md
├── eleventy
    ├── collections.js
    ├── env.js
    ├── filters
    │   ├── collections.js
    │   ├── dates.js
    │   ├── misc.js
    │   └── urls.js
    ├── shortcodes.js
    └── utils.js
├── netlify.toml
├── package-lock.json
├── package.json
├── paths.js
├── postcss.config.js
└── src
    ├── assets
        ├── css
        │   ├── components
        │   │   ├── author-card.css
        │   │   ├── container.css
        │   │   ├── notice.css
        │   │   ├── post-card.css
        │   │   └── post.css
        │   ├── modules
        │   │   ├── atkinson-hyperlegible-font.css
        │   │   ├── sticky-footer.css
        │   │   ├── syntax.css
        │   │   └── typography.css
        │   ├── style.css
        │   ├── system
        │   │   ├── mq.css
        │   │   ├── selectors.css
        │   │   └── tokens.css
        │   └── themes
        │   │   └── prism-one-light.css
        ├── font
        │   ├── Atkinson-Hyperlegible-Bold-102.woff
        │   ├── Atkinson-Hyperlegible-Bold-102.woff2
        │   ├── Atkinson-Hyperlegible-BoldItalic-102.woff
        │   ├── Atkinson-Hyperlegible-BoldItalic-102.woff2
        │   ├── Atkinson-Hyperlegible-Italic-102.woff
        │   ├── Atkinson-Hyperlegible-Italic-102.woff2
        │   ├── Atkinson-Hyperlegible-Regular-102.woff
        │   └── Atkinson-Hyperlegible-Regular-102.woff2
        ├── img
        │   ├── 8EC7AF25-A29D-4414-9732-DAEB476C9B64.jpg
        │   ├── 9DA6F832-DDEE-4C5B-A880-28046613BAE4.jpg
        │   ├── jane-doe-this-person-does-not-exist.jpeg
        │   ├── leaves.jpeg
        │   ├── vivaldi.jpg
        │   ├── vivaldi_fosstodon.png
        │   └── vivaldi_plausible.png
        └── js
        │   └── index.js
    ├── content
        ├── content.11tydata.js
        ├── feeds
        │   └── primary.liquid
        ├── pages
        │   └── about.md
        ├── post
        │   ├── note
        │   │   ├── 94075ed4bf58.md
        │   │   ├── b5cb4b5c1b88.md
        │   │   └── dedf7ab03e83.md
        │   ├── photo
        │   │   ├── 4be63568ba03.md
        │   │   └── ecd97ddb244e.md
        │   └── reply
        │   │   ├── 597a082f97d2.md
        │   │   └── be7fa084d4e5.md
        └── special-pages
        │   ├── index.liquid
        │   ├── posts.liquid
        │   ├── robots.txt.liquid
        │   ├── sitemap.liquid
        │   └── tag.liquid
    ├── data
        ├── config.js
        ├── navigation.js
        └── site.json
    ├── includes
        ├── author-card.liquid
        ├── comment-via-email.liquid
        ├── footer.liquid
        ├── head.liquid
        ├── header.liquid
        ├── old-post-notice.liquid
        ├── page-title.liquid
        ├── post-card-article.liquid
        ├── post-card-note.liquid
        ├── post-card-photo.liquid
        ├── post-card-reply-context.liquid
        ├── post-card-reply.liquid
        └── post-card.liquid
    └── layouts
        ├── default.liquid
        ├── page.liquid
        └── post
            ├── article.liquid
            ├── note.liquid
            ├── photo.liquid
            ├── reply-context.liquid
            └── reply.liquid


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Unix-style newlines with a newline ending every file
 2 | [*]
 3 | end_of_line = lf
 4 | insert_final_newline = true
 5 | # Set default charset
 6 | charset = utf-8
 7 | 
 8 | # 4 space indentation
 9 | [*.{html,js}]
10 | indent_style = tab
11 | indent_size = 4
12 | 
13 | [*.{yml,yaml,css}]
14 | indent_style = space
15 | indent_size = 2
16 | 
17 | # Matches the exact files either package.json or .travis.yml
18 | [{package.json,.travis.yml}]
19 | indent_style = tab
20 | indent_size = 2
21 | 
22 | [*.md]
23 | indent_style = space
24 | indent_size = 2
25 | 


--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
  1 | module.exports = function(config) {
  2 | 	// *** Collection imports
  3 | 	const collections = require("./eleventy/collections");
  4 | 
  5 | 	// *** Filter imports
  6 | 	const collectionFilters = require("./eleventy/filters/collections");
  7 | 	const urlFilters = require("./eleventy/filters/urls");
  8 | 	const dateFilters = require("./eleventy/filters/dates");
  9 | 
 10 | 	// *** Shortcode imports
 11 | 	const shortcodes = require("./eleventy/shortcodes");
 12 | 
 13 | 	// *** Misc imports
 14 | 	const env = require("./eleventy/env");
 15 | 
 16 | 	// *** Plugins
 17 | 	const rssPlugin = require("@11ty/eleventy-plugin-rss");
 18 | 	config.addPlugin(rssPlugin);
 19 | 	// Syntax highlighting
 20 | 	config.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight"));
 21 | 	// Typeset
 22 | 	if (env.is11tyProduction || env.is11tyStaging)
 23 | 		config.addPlugin(require("eleventy-plugin-typeset")());
 24 | 	// Safe external links
 25 | 	config.addPlugin(require("@hirusi/eleventy-plugin-safe-external-links"), {
 26 | 		pattern: "https{0,1}://", // RegExp pattern for external links
 27 | 		noopener: true, // Whether to include noopener
 28 | 		noreferrer: true, // Whether to include noreferrer
 29 | 		files: [
 30 | 			// What output file extensions to work on
 31 | 			".html"
 32 | 		]
 33 | 	});
 34 | 	// Minified HTML.
 35 | 	if (env.is11tyProduction || env.is11tyStaging) {
 36 | 		config.addPlugin(require("@sardine/eleventy-plugin-tinyhtml"));
 37 | 	}
 38 | 	const Image = require("@11ty/eleventy-img");
 39 | 
 40 | 	async function imageShortcode(src, alt, extraAttrs, sizes = "100vw") {
 41 | 		if (alt === undefined) {
 42 | 			// You bet we throw an error on missing alt (alt="" works okay)
 43 | 			throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
 44 | 		}
 45 | 
 46 | 		let metadata = await Image(src, {
 47 | 			widths: [600, null],
 48 | 			formats: ["avif", "webp", "jpeg"],
 49 | 			urlPath: "/assets/img/",
 50 | 			outputDir: "./dist/assets/img/"
 51 | 		});
 52 | 
 53 | 		let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
 54 | 
 55 | 		return `<picture>
 56 |     ${Object.values(metadata)
 57 | 		.map(imageFormat => {
 58 | 			return `  <source type="${
 59 | 				imageFormat[0].sourceType
 60 | 			}" srcset="${imageFormat
 61 | 				.map(entry => entry.srcset)
 62 | 				.join(", ")}" sizes="${sizes}">`;
 63 | 		})
 64 | 		.join("\n")}
 65 |       <img
 66 |         src="${highsrc.url}"
 67 |         width="${highsrc.width}"
 68 |         height="${highsrc.height}"
 69 |         alt="${alt}"
 70 |         loading="lazy"
 71 |         decoding="async"
 72 | 		${extraAttrs}
 73 | 		>
 74 |     </picture>`;
 75 | 	}
 76 | 
 77 | 	// *** Shortcodes
 78 | 	// Jekyll replacement for post_url tag as an 11ty shortcode
 79 | 	config.addShortcode("getUrl", shortcodes.postUrl);
 80 | 	config.addShortcode("getOwnerInfo", shortcodes.getOwnerInfo);
 81 | 	config.addShortcode("getPostType", shortcodes.getPostType);
 82 | 	config.addShortcode("isOldPost", shortcodes.isOldPost);
 83 | 	config.addLiquidShortcode("image", imageShortcode);
 84 | 
 85 | 	// *** Filters
 86 | 	// Dates
 87 | 	config.addFilter("friendlyDate", dateFilters.friendlyDate);
 88 | 	config.addFilter("dateToIso8601", dateFilters.dateToIso8601);
 89 | 	// Filter posts per tag
 90 | 	config.addFilter("byTag", collectionFilters.byTag);
 91 | 	// Absolute url
 92 | 	config.addFilter("absoluteUrl", urlFilters.absoluteUrl);
 93 | 
 94 | 	// The official RSS plugin exports only Nunjucks filters. They can be used with Liquid like so.
 95 | 	config.addFilter("htmlToAbsoluteUrls", rssPlugin.convertHtmlToAbsoluteUrls);
 96 | 	config.addFilter("dateToRfc3339", rssPlugin.dateToRfc3339);
 97 | 	config.addFilter(
 98 | 		"getNewestCollectionItemDate",
 99 | 		rssPlugin.getNewestCollectionItemDate
100 | 	);
101 | 
102 | 	// *** Collections
103 | 	// Articles
104 | 	config.addCollection("primary", collections.primary);
105 | 
106 | 	// *** Misc
107 | 	// Copy fonts as-is.
108 | 	config.addPassthroughCopy({ "src/assets/font": "assets/font" });
109 | 
110 | 	return {
111 | 		pathPrefix: "/", // useful for GitHub pages
112 | 		dir: {
113 | 			input: "./",
114 | 			output: "dist",
115 | 			includes: "src/includes",
116 | 			layouts: "src/layouts",
117 | 			data: "src/data"
118 | 		}
119 | 	};
120 | };
121 | 


--------------------------------------------------------------------------------
/.eleventyignore:
--------------------------------------------------------------------------------
 1 | gulpfile.babel.js
 2 | gulp_tasks
 3 | src/assets
 4 | tailwind.config.js
 5 | paths.js
 6 | npm-debug.log
 7 | package.json
 8 | package-lock.json
 9 | README.md
10 | LICENSE
11 | .editorconfig
12 | .babelrc
13 | .prettierrc
14 | CHANGELOG.md
15 | docs
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | node_modules
3 | dist
4 | .DS_store
5 | 


--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 16
2 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 16
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | *.md
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"singleQuote": false,
 3 | 	"useTabs": true,
 4 | 	"tabWidth": 4,
 5 | 	"overrides": [
 6 | 		{
 7 | 			"files": "*.{yaml,yml}",
 8 | 			"options": {
 9 | 				"useTabs": false,
10 | 				"tabWidth": 2
11 | 			}
12 | 		},
13 | 		{
14 | 			"files": "*.css",
15 | 			"options": {
16 | 				"useTabs": false,
17 | 				"tabWidth": 2
18 | 			}
19 | 		}
20 | 	]
21 | }
22 | 


--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | nodejs lts
2 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
  2 | 
  3 | ## v0.0.9 - Unreleased
  4 | 
  5 | [All changes](https://github.com/hirusi/smix-eleventy-starter/compare/v0.0.8...main)
  6 | 
  7 | ### Added
  8 | 
  9 | - To-do.
 10 | 
 11 | ### Changed
 12 | 
 13 | - Instructions for local development have moved from `README.md` to `docs/development.md`.
 14 | - Instructions for publishing on Forestry/Netlify have moved from `README.md` to `docs/development.md`.
 15 | - Specify installation of Node.js via `asdf` as an alternate option to `nvm` in the development docs.
 16 | - Remove emojis from `README.md` and use bold highlighting instead.
 17 | - Remove webmentions from `To-Do` as I no longer wish to implement those.
 18 | - Add note about setting `ELEVENTY_ENV` on staging and production environments.
 19 | - Dependency updates (security-related PRs opened by @dependabot)
 20 |   - `lodash` from 4.17.20 to 4.17.21
 21 |   - `hosted-git-info` from 2.8.8 to 2.8.9
 22 |   - `cssnano` upgraded from `^4` to `^5`.
 23 | - Upgrade to Node LTS v16 and npm v8.
 24 | 
 25 | ### Removed
 26 | 
 27 | - To-do.
 28 | 
 29 | ## v0.0.8 - 2021-04-12
 30 | 
 31 | [All changes](https://github.com/hirusi/smix-eleventy-starter/compare/v0.0.7...v0.0.8).
 32 | 
 33 | ### Added
 34 | 
 35 | * Compatibility with asdf-nodejs. #24 
 36 | * MIT license.
 37 | * Netlify configuration to keep draft posts out from the production site, but include in staging site. #25 closed by #26
 38 | * One-click Forestry import. #31
 39 | 
 40 | ### Changed
 41 | 
 42 | * Dependencies updated per SemVer.
 43 |   * Includes development dependencies.
 44 | * Upgrade to Eleventy v0.12.1. #32.
 45 | ## v0.0.7 - 21 October 2020
 46 | 
 47 | ### Added
 48 | 
 49 | * A central `CHANGELOG.md` file.
 50 | 
 51 | ### Changed
 52 | 
 53 | * SEO improvements for demo site
 54 | * Fix the URL to forestry.io in README (@drnic)
 55 | * Dependencies updated/affected per npm log:
 56 |   * **@11ty/eleventy-plugin-rss@1.0.9**
 57 |   * **@hirusi/eleventy-plugin-safe-external-links@0.14.3**
 58 |   * @11ty/eleventy@0.11.0
 59 |   * **autoprefixer@9.8.6**
 60 |   * browserify@16.5.2
 61 |   * @fullhuman/postcss-purgecss@1.3.0
 62 |   * babelify@10.0.0
 63 |   * @babel/runtime@7.12.1
 64 |   * @babel/plugin-transform-runtime@7.12.1
 65 |   * @babel/register@7.12.1
 66 |   * @babel/core@7.12.3
 67 |   * @babel/preset-env@7.12.1
 68 |   * child_process@1.0.2
 69 |   * cssnano@4.1.10
 70 |   * **date-fns@2.16.1**
 71 |   * gulp-imagemin@6.2.0
 72 |   * fancy-log@1.3.3
 73 |   * gulp-babel@8.0.0
 74 |   * gulp-concat@2.6.1
 75 |   * gulp@4.0.2
 76 |   * gulp-if@3.0.0
 77 |   * gulp-htmlmin@5.0.1
 78 |   * **date-fns-tz@1.0.12**
 79 |   * **liquidjs@9.16.1**
 80 |   * gulp-postcss@8.0.0
 81 |   * gulp-uglify@3.0.2
 82 |   * **postcss-import@12.0.1**
 83 |   * watchify@3.11.1
 84 |   * **lodash.merge@4.6.2**
 85 |   * vinyl-buffer@1.0.1
 86 |   * vinyl-source-stream@2.0.0
 87 |   * **postcss-nesting@7.0.1**
 88 |   * npm-run-all@4.1.5
 89 |   * **tailwindcss@1.9.5**
 90 |   * **eleventy-plugin-typeset@1.0.1**
 91 | 
 92 | ## v0.0.6 - 10 August 2020
 93 | 
 94 | ### Added
 95 | 
 96 | * microformats2
 97 |   * h-card for author info
 98 |   * h-feed for articles
 99 |   * h-entry for article
100 | * typeset on staging and production environments for more professional looking content
101 | 
102 | ### Changed
103 | 
104 | * Custom liquid engine as Eleventy uses a very old version (v6 to v9, if I'm not wrong)
105 | * Update all dependencies per semver
106 | * Better site socials and site authors structure in site data file
107 | * Use JAMstack style content procesing for safe external links instead of client-side JS
108 | * Default design/layout
109 | * Work started on removing usage of deprecated include liquid tag
110 | * Cleanup of extra spacing in head
111 | 
112 | ### Fixed
113 | * Use correct siteBaseUrl in meta tags
114 | * Ran npm audit fix to fix automatically fix-able dependency issues
115 | * Fix pagination for articles based on new liquid syntax
116 | * The develop script watches assets now
117 | * Node env correctly defaults to development if no environment specified
118 | * Draft content is automatically excluded from collections on production
119 | 
120 | ### Removed
121 | 
122 | * Client-side JS for safe external links -- externalLinks class names are no longer added toe external links (likewise for internal links)
123 | 
124 | ## v0.0.5 - 08 August 2020
125 | 
126 | ### Added
127 | 
128 | - Add a sitemap.xml
129 | - Add a robots.txt
130 | - Add an Atom feed for articles
131 | - Add social meta tags (Twitter and Facebook Open Graph)
132 | 
133 | ### Changed
134 | 
135 | - Fix bug with permalink generation on production environment
136 | - Remove guests info from authors data file
137 | - Add author picture key in authors data file
138 | - Bump lodash from 4.17.15 to 4.17.19
139 | - Bump elliptic from 6.5.2 to 6.5.3
140 | 
141 | ## v0.0.4 - 16 May 2020
142 | 
143 | ### Added
144 | 
145 | - Exclude from build: draft articles/pages on production
146 | - Ignore Markdown files from husky (ocassionally causing issue with YAML front-matter formatting)
147 | - New `clean` npm script to run before each development build
148 | - `.forestry` directory with a default configuration in place for posts and pages, as well as `site.json`, for faster CMS setup
149 | - Add a `page-title` include for displaying page titles on page templates and special pages like index, blog, tag
150 | 
151 | ### Changed
152 | 
153 | - Update to Eleventy v0.11.0
154 | - Refactor Eleventy configuration
155 |   - Collections are now defined in a separate file
156 |   - Filters have been modularized into separate files, each for `collections`, `dates`, `urls`, and `misc`
157 |   - Single `env` file for all Eleventy files
158 |   - Passthrough copy `admin` directory only on production
159 |   - Move all content, layouts, includes, data to `src` directory
160 | - Renamed `config.js` to `paths.js` to better reflect its intention
161 | - Switch to `lodash.merge` for merging browserify configuration instead of `Object.assign`
162 | - Rename layout to `article` from `post`
163 | - Rename layout for sample articles to `article` (earlier `post`)
164 | - Update `blog/` permalinks to `articles/`
165 | 
166 | ### Removed
167 | - Ability to specify files to clean before each build in `paths.js`
168 | - Type definitions for `browser-sync` and `axios`
169 | - `axios` removed as no calls being made in the starter kit. `node-fetch` recommended.
170 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 hirusi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🌻 Smix
  2 | 
  3 | A standards-respecting starter kit for Eleventy. Go Indie.
  4 | 
  5 | ⚠️ This project is now considered more-or-less complete for the author's needs. Any further enhancements will require a pull request to come from the community.
  6 | 
  7 | ## Reading.
  8 | 
  9 | For nice text, there's [Typeset](https://www.npmjs.com/package/typeset). While it adds to the build time, it makes for a more polished reading experience.
 10 | 
 11 | It seems [people do rely on RSS feeds](https://twitter.com/mxbck/status/1490698469312536578) even in 2022! Cheers to that; there's an Atom feed that is standards-compliant. It understands the published and updated datetime stamps on posts, and uses the RFC822 date format.
 12 | 
 13 | Dark mode is included out of the box using a custom media query. (More in future-ready section below).
 14 | 
 15 | Date filters such as for friendly dates (10 March 2020) and machine-parseable dates (ISO8601) are available to use via filters.
 16 | 
 17 | ## Discoverability/SEO.
 18 | 
 19 | Meta tags for social networks (Open Graph as well as Twitter). This allows for a nice card display when you (or someone else) shares a link to your post or site. Support for `content-description` meta tag -- this helps decide what text to show for a page/post when shared on social media, as well as in search engines.
 20 | 
 21 | Sitemap with `changeFrequency` -- so bots only come back when they need to. (please also see [issue #7](https://github.com/hirusi/smix-eleventy-starter/issues/7)). `robots.txt` is a cherry on the top -- I would also recommend using it to [hide your personal picture](https://rusingh.com/block-images-appearing-in-search/) if so desired.
 22 | 
 23 | 
 24 | ## Writing
 25 | 
 26 | Write in Markdown, much loved among developers. If you don't already know it, it's [easy to get started](https://commonmark.org/help/tutorial/). You can also use separate apps and then copy-paste your content into a new file. This allows for focusing on content first, before messing with any technicals. I recommend [Bear](https://bear.app/).
 27 | 
 28 | ### Linking to pages or posts.
 29 | 
 30 | `postUrl` shortcode similar to Jekyll's `post_url` and `link` liquid tags:
 31 | 
 32 | ```liquid
 33 | {% postUrl collections.primary 'on-burnout' %}
 34 | ```
 35 | 
 36 | ### Code blocks.
 37 | 
 38 | Code blocks are made possible via [an Eleventy plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/). Many [Prism](https://prismjs.com/) themes are [available to use](https://github.com/PrismJS/prism-themes/tree/master/themes).
 39 | 
 40 | ## IndieWeb
 41 | 
 42 | For those pushing [#IndieWeb](https://www.smashingmagazine.com/2020/08/autonomy-online-indieweb/), some basic [Microformats2](https://indieweb.org/microformats2) support is included. From h-card to understand authorship, h-entry to understand a post, and h-feed to have Microformat feeds. This allows following a website in [Microsub readers](https://indieweb.org/Microsub).
 43 | 
 44 | The following [post-types](https://indieweb.org/posts#Types_of_Posts) are supported:
 45 | 
 46 | - 📄 Article
 47 | - 📔 Note
 48 | - ↪ Reply
 49 | - 📷 Photo
 50 | 
 51 | A single microformats2 feeds is offered via `h-feed`. This includes articles, notes, replies (with or without context), and image(s). These post types also seamlessly work in the Atom feed.
 52 | 
 53 | ## Future-ready.
 54 | 
 55 | The CSS is written with upcoming CSS standards in mind. This is made possible thanks to PostCSS. Inclusions: imports, nesting, purge, minification, autoprefixer, custom properties, custom media queries (this makes a dark mode easy to build!), custom selectors, and [LCH color coding](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/).
 56 | 
 57 | JavaScript is transpiled and bundled via `esbuild`.
 58 | 
 59 | ## Accessible.
 60 | 
 61 | [Atkinson font by The Braille Institute](https://brailleinstitute.org/freefont) is included if you wish to use it. If not, there's a sans, serif, and mono fallback to system fonts.
 62 | 
 63 | Care is taken to have good contrast all around.
 64 | 
 65 | Should you choose to include some animations, do make use of a custom media query for those who prefer less motion:
 66 | 
 67 | ```css
 68 | /* Prefers reduced motion. */
 69 | @media screen and (--rm) {
 70 |   .fancy {
 71 |     /* Disable animations. */
 72 |   }
 73 | }
 74 | ```
 75 | 
 76 | ## Under The Hood.
 77 | 
 78 | ### Handling JavaScript.
 79 | 
 80 | ES Modules are [now well supported](https://caniuse.com/es6-module) and you should move to them. In that spirit, we use [`esbuild`](https://esbuild.github.io/).
 81 | 
 82 | If you want to bundle a single file and that is the default `index.js` source, running `npm run dev:js` is enough.
 83 | 
 84 | To allow for page-specific JavaScript files, we have a convenience command to put together a new JS bundle.
 85 | 
 86 | ```sh
 87 | npm run dev:jsb --in=portfolio.js --out=portfolio.js
 88 | ```
 89 | 
 90 | This will create a JS bunlde (hence `jsb`), entering at `src/assets/js/portfolio.js` and outputting at `dist/assets/js/portfolio.js`
 91 | 
 92 | Include them in the required page by using the `pageJavaScript` [`block`](https://liquidjs.com/tutorials/partials-and-layouts.html#Layout-Templates-Extends):
 93 | 
 94 | ```liquid
 95 | {% block pageJavascript %}
 96 | <script type="module" src="/assets/js/portfolio.js">
 97 | {% endblock}
 98 | 
 99 | My content here.
100 | ```
101 | 
102 | ### Misc Features
103 | 
104 | * __Prettier and editorconfig__ for consistent formatting of the codebase.
105 | 
106 | ## To-Do
107 | 
108 | * Feed per tag (this could easily go into 10s or 100s, but you know, choice is important!)
109 | * Scheduled blog posts.
110 | * Re-do development and production docs as needed.
111 | 
112 | ## Built off of
113 | 
114 | Sites that took Smix Eleventy Starter and made something of their own:
115 | 
116 | - [Add your site here]
117 | 


--------------------------------------------------------------------------------
/docs/development.md:
--------------------------------------------------------------------------------
1 | # Local development setup
2 | 
3 | * Use the specified Node.js version for this project with `asdf install`.
4 | * Install dependencies with `npm install`.
5 | * Start a local build process with `npm run dev`.
6 | * Open [`http://localhost:8080`](http://localhost:8080) (the actual port might change depending on whether the default port `8080` is already in use) on your browser.
7 | 


--------------------------------------------------------------------------------
/eleventy/collections.js:
--------------------------------------------------------------------------------
 1 | // *** Imports
 2 | const collectionFilters = require("./filters/collections");
 3 | const utils = require("./utils");
 4 | 
 5 | // *** Content Globs
 6 | const articleDir = "src/content/post/article/*.md";
 7 | const noteDir = "src/content/post/note/*.md";
 8 | const photoDir = "src/content/post/photo/*.md";
 9 | const replyDir = "src/content/post/reply/*.md";
10 | 
11 | module.exports = {
12 | 	article: collection => {
13 | 		return collection
14 | 			.getFilteredByGlob(articleDir)
15 | 			.filter(collectionFilters.publishedItems)
16 | 			.sort(collectionFilters.sortByDate);
17 | 	},
18 | 	note: collection => {
19 | 		return collection
20 | 			.getFilteredByGlob(noteDir)
21 | 			.filter(collectionFilters.publishedItems)
22 | 			.sort(collectionFilters.sortByDate);
23 | 	},
24 | 	photo: collection => {
25 | 		return collection
26 | 			.getFilteredByGlob(photoDir)
27 | 			.filter(collectionFilters.publishedItems)
28 | 			.sort(collectionFilters.sortByDate);
29 | 	},
30 | 	reply: collection => {
31 | 		return collection
32 | 			.getFilteredByGlob(replyDir)
33 | 			.filter(collectionFilters.publishedItems)
34 | 			.sort(collectionFilters.sortByDate);
35 | 	},
36 | 	primary: collection => {
37 | 		return collection
38 | 			.getFilteredByGlob([articleDir, noteDir, photoDir, replyDir])
39 | 			.filter(collectionFilters.publishedItems)
40 | 			.sort(collectionFilters.sortByDate);
41 | 	}
42 | };
43 | 


--------------------------------------------------------------------------------
/eleventy/env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	isNodeProduction: process.env.NODE_ENV === "production",
3 | 	isNodeDevelopment: process.env.NODE_ENV
4 | 		? process.env.NODE_ENV === "development"
5 | 		: "development",
6 | 	is11tyProduction: process.env.ELEVENTY_ENV === "production",
7 | 	is11tyStaging: process.env.ELEVENTY_ENV === "staging"
8 | };
9 | 


--------------------------------------------------------------------------------
/eleventy/filters/collections.js:
--------------------------------------------------------------------------------
 1 | const utils = require("../utils");
 2 | const env = require("../env");
 3 | 
 4 | module.exports = {
 5 | 	liveItems: item => (env.is11tyProduction ? item.date <= new Date() : true),
 6 | 	publishedItems: item => (env.is11tyProduction ? !item.data.draft : true),
 7 | 	sortByOrder: (a, b) =>
 8 | 		a.data.order === b.data.order
 9 | 			? 0
10 | 			: a.data.order > b.data.order
11 | 			? -1
12 | 			: 1,
13 | 	sortByDate: (a, b) => utils.sortByDateDesc(a.date, b.date),
14 | 	byTag: (collection, tag) => {
15 | 		if (!collection.length) return [];
16 | 
17 | 		collection = collection.filter(item => {
18 | 			if (item.data.tags) {
19 | 				// Convert data.tags and tag to lowercase
20 | 				const lcTags = item.data.tags.map(tag => tag.toLowerCase());
21 | 				const filterTag = tag.toLowerCase();
22 | 				return lcTags.includes(filterTag) ? true : false;
23 | 			}
24 | 		});
25 | 
26 | 		collection = collection.sort((item1, item2) =>
27 | 			utils.sortByDateDesc(item1.date, item2.date)
28 | 		);
29 | 
30 | 		return collection;
31 | 	}
32 | };
33 | 


--------------------------------------------------------------------------------
/eleventy/filters/dates.js:
--------------------------------------------------------------------------------
 1 | const { parseISO, format, formatISO } = require("date-fns");
 2 | const { utcToZonedTime } = require("date-fns-tz");
 3 | 
 4 | module.exports = {
 5 | 	prepareDate: d => {
 6 | 		// format() expects Date or Number
 7 | 		// YAML dates are already in ISO8601 and it gives us dates in UTC.
 8 | 		// They may be a string or an object.
 9 | 		// If string, convert to ISO date object first.
10 | 		// If an object, no need to do anything. We can directly format it.
11 | 		switch (typeof d) {
12 | 			case "string":
13 | 				return parseISO(d);
14 | 			case "object":
15 | 			default:
16 | 				return d;
17 | 		}
18 | 	},
19 | 	friendlyDate: d => {
20 | 		const date = utcToZonedTime(
21 | 			module.exports.prepareDate(d),
22 | 			"Asia/Kolkata"
23 | 		);
24 | 		return format(date, "d MMMM yyyy");
25 | 	},
26 | 	dateToIso8601: d => {
27 | 		return formatISO(module.exports.prepareDate(d));
28 | 	}
29 | };
30 | 


--------------------------------------------------------------------------------
/eleventy/filters/misc.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/eleventy/filters/urls.js:
--------------------------------------------------------------------------------
 1 | const { URL } = require("url");
 2 | const config = require("../../src/data/config.js")();
 3 | 
 4 | module.exports = {
 5 | 	absoluteUrl: (url, base = config.siteBaseUrl) => {
 6 | 		try {
 7 | 			return new URL(url, base).toString();
 8 | 		} catch (e) {
 9 | 			console.error(
10 | 				`Trying to convert ${url} to be an absolute url with base ${base} and failed, returning: ${url} (invalid url)`
11 | 			);
12 | 			return url;
13 | 		}
14 | 	}
15 | };
16 | 


--------------------------------------------------------------------------------
/eleventy/shortcodes.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	postUrl: (collection, slug) => {
 3 | 		try {
 4 | 			if (collection.length < 1) throw "Collection appears to be empty";
 5 | 			if (!Array.isArray(collection))
 6 | 				throw "Collection is an invalid type - it must be an array!";
 7 | 			if (typeof slug !== "string")
 8 | 				throw "Slug is an invalid type - it must be a string!";
 9 | 
10 | 			const found = collection.find(p => p.fileSlug.includes(slug));
11 | 			if (found === 0 || found === undefined)
12 | 				throw `${slug} not found in specified collection.`;
13 | 			else return found.url;
14 | 		} catch (e) {
15 | 			console.error(
16 | 				`An error occured while searching for the url to ${slug}. Details:`,
17 | 				e
18 | 			);
19 | 		}
20 | 	},
21 | 	isOldPost: date => {
22 | 		const { getUnixTime } = require("date-fns");
23 | 
24 | 		const postTimestamp = getUnixTime(new Date(date));
25 | 
26 | 		const cutoffTimestamp = getUnixTime(
27 | 			new Date().setFullYear(new Date().getFullYear() - 1)
28 | 		);
29 | 
30 | 		// QUESTION Is this one of the ideal ways to compare dates?
31 | 		if (cutoffTimestamp < postTimestamp) {
32 | 			return false;
33 | 		} else {
34 | 			return true;
35 | 		}
36 | 	},
37 | 	/**
38 | 	 * @param {string} key
39 | 	 * @returns {any}
40 | 	 */
41 | 	getOwnerInfo: key => {
42 | 		const { authors } = require(process.cwd() + "/src/data/site.json");
43 | 		const owner = authors.filter(author =>
44 | 			author.roles.includes("owner")
45 | 		)[0];
46 | 
47 | 		return owner[key];
48 | 	},
49 | 	getPostType: layout => {
50 | 		switch (layout) {
51 | 			case "post/article":
52 | 				return "article";
53 | 			case "post/note":
54 | 				return "note";
55 | 			case "post/photo":
56 | 				return "photo";
57 | 			case "post/reply-context":
58 | 				return "reply-context";
59 | 			case "post/reply":
60 | 				return "reply";
61 | 		}
62 | 	}
63 | };
64 | 


--------------------------------------------------------------------------------
/eleventy/utils.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	sortByDateDesc: (d1, d2) => {
 3 | 		const date1 = new Date(d1);
 4 | 		const date2 = new Date(d2);
 5 | 		if (date1 > date2) {
 6 | 			return -1;
 7 | 		} else if (date1 < date2) {
 8 | 			return 1;
 9 | 		} else {
10 | 			// No change
11 | 			return 0;
12 | 		}
13 | 	}
14 | };
15 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 |   publish = "dist/"
 3 |   command = "npm run prod"
 4 | 
 5 | [build.environment]
 6 |   NODE_ENV = "production"
 7 |   ELEVENTY_ENV = "staging"
 8 | 
 9 | [context.production.environment]
10 |   ELEVENTY_ENV = "production" # excludes Forestry drafts from production build
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "smix-eleventy-starter",
 3 | 	"version": "0.0.8",
 4 | 	"description": "A gulp-based starter kit for @11ty/eleventy.",
 5 | 	"main": "",
 6 | 	"engines": {
 7 | 		"node": "^16",
 8 | 		"npm": "^8"
 9 | 	},
10 | 	"scripts": {
11 | 		"dev:clean": "rm -rf dist && mkdir -p dist/assets",
12 | 		"dev:11ty": "eleventy --port 8080 --serve --incremental",
13 | 		"dev:js": "esbuild --watch --bundle --sourcemap --outfile=dist/assets/js/index.js src/assets/js/index.js",
14 | 		"dev:jsb": "esbuild --watch --bundle --sourcemap --outfile=dist/assets/js/$npm_config_out src/assets/js/$npm_config_in",
15 | 		"dev:css": "postcss src/assets/css/style.css --output dist/assets/css/style.css --watch",
16 | 		"dev:watchers": "run-p dev:js dev:css dev:11ty",
17 | 		"dev": "run-s dev:clean dev:watchers",
18 | 		"prod": "run-s prod:js prod:css prod:11ty",
19 | 		"prod:css": "postcss src/assets/css/style.css --output dist/assets/css/style.css",
20 | 		"prod:11ty": "eleventy",
21 | 		"prod:js": "esbuild --minify --bundle --outfile=dist/assets/js/index.js src/assets/js/index.js",
22 | 		"test": "echo \"Error: no test specified\" && exit 1"
23 | 	},
24 | 	"husky": {
25 | 		"hooks": {
26 | 			"pre-commit": "pretty-quick --staged"
27 | 		}
28 | 	},
29 | 	"author": {
30 | 		"name": "Ru Singh",
31 | 		"email": "hello@rusingh.com",
32 | 		"url": "https://rusingh.com/"
33 | 	},
34 | 	"license": "GNU GPLv3",
35 | 	"devDependencies": {
36 | 		"husky": "^4.3.8",
37 | 		"prettier": "^1.19.1",
38 | 		"pretty-quick": "^2.0.2"
39 | 	},
40 | 	"dependencies": {
41 | 		"@11ty/eleventy": "^1.0.0",
42 | 		"@11ty/eleventy-img": "^2.0.1",
43 | 		"@11ty/eleventy-plugin-rss": "^1.1.1",
44 | 		"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
45 | 		"@hirusi/eleventy-plugin-safe-external-links": "^0.14.3",
46 | 		"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
47 | 		"autoprefixer": "^10.4.2",
48 | 		"cssnano": "^5.1.14",
49 | 		"date-fns": "^2.20.2",
50 | 		"date-fns-tz": "^1.1.3",
51 | 		"eleventy-plugin-typeset": "github:liamfiddler/eleventy-plugin-typeset",
52 | 		"esbuild": "^0.15.13",
53 | 		"esm": "^3.2.25",
54 | 		"lodash.merge": "^4.6.2",
55 | 		"npm-run-all": "^4.1.5",
56 | 		"postcss": "^8.4.7",
57 | 		"postcss-cli": "^10.0.0",
58 | 		"postcss-import": "^15.0.0",
59 | 		"postcss-preset-env": "^7.4.1"
60 | 	},
61 | 	"browserslist": ">1%, Firefox ESR, last 2 versions"
62 | }
63 | 


--------------------------------------------------------------------------------
/paths.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | // Src
 4 | const projectSrcDir = path.resolve(__dirname, ".");
 5 | const assetSrcDir = path.resolve(__dirname, "src/assets");
 6 | // Dist
 7 | const projectDestDir = path.resolve(__dirname, "dist");
 8 | const assetDestDir = `${projectDestDir}/assets`;
 9 | 
10 | const paths = {
11 | 	html: {
12 | 		src: `${projectDestDir}/**/*.html`,
13 | 		dest: projectDestDir
14 | 	},
15 | 	img: {
16 | 		src: `${assetSrcDir}/img/**/*.{png,jpg,jpeg,svg}`,
17 | 		dest: `${assetDestDir}/img`
18 | 	},
19 | 	css: {
20 | 		src: `${assetSrcDir}/css`,
21 | 		dest: `${assetDestDir}/css`,
22 | 		name: "style.css",
23 | 		additionalWatch: [`${projectSrcDir}/tailwind.config.js`],
24 | 		purge: {
25 | 			content: [`${projectDestDir}/**/*.html`]
26 | 		}
27 | 	},
28 | 	font: {
29 | 		src: `${assetSrcDir}/font/**/*`,
30 | 		dest: `${assetDestDir}/font`
31 | 	},
32 | 	projectDestDir: projectDestDir
33 | };
34 | 
35 | export { paths };
36 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const env = require("./eleventy/env");
 2 | 
 3 | const plugins = [
 4 | 	require("postcss-import"),
 5 | 	require("postcss-preset-env")({
 6 | 		stage: 2,
 7 | 		features: {
 8 | 			"nesting-rules": true,
 9 | 			"custom-media-queries": true,
10 | 			"custom-selectors": true,
11 | 			"logical-properties-and-values": true,
12 | 			"lab-function": true
13 | 		}
14 | 	}),
15 | 	require("autoprefixer")
16 | ];
17 | 
18 | if (env.is11tyProduction) {
19 | 	plugins.push(require("cssnano"));
20 | }
21 | 
22 | module.exports = {
23 | 	plugins: plugins
24 | };
25 | 


--------------------------------------------------------------------------------
/src/assets/css/components/author-card.css:
--------------------------------------------------------------------------------
 1 | /* When included with an article, we want to distance the author card from the content body. */
 2 | article > footer > .author-card {
 3 |   margin-top: 6rem;
 4 | }
 5 | 
 6 | .author-picture-container {
 7 |   flex: none;
 8 |   width: 10rem;
 9 |   height: 10rem;
10 |   margin-bottom: 1rem;
11 | }
12 | 
13 | .author-picture {
14 |   border-radius: 9999px;
15 |   width: 100%;
16 |   height: auto;
17 |   object-fit: cover;
18 | }
19 | 
20 | .author-name {
21 |   margin-top: 0;
22 | 
23 |   & a {
24 |     font-size: inherit;
25 |   }
26 | }
27 | 
28 | @media screen and (--lg) {
29 |   .author-name {
30 |     margin-top: 0;
31 |   }
32 | }
33 | 
34 | .author-socials {
35 |   display: flex;
36 |   flex-direction: row;
37 |   flex-wrap: wrap;
38 |   gap: 0.5rem;
39 | }
40 | 


--------------------------------------------------------------------------------
/src/assets/css/components/container.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   max-width: 100%;
 3 |   padding-left: var(--space-2xl);
 4 |   padding-right: var(--space-2xl);
 5 | }
 6 | 
 7 | @media screen and (--lg) {
 8 |   .container {
 9 |     width: 41.666667%;
10 |     margin-left: 20vw;
11 |     margin-right: auto;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/assets/css/components/notice.css:
--------------------------------------------------------------------------------
 1 | .notice {
 2 |   padding-top: var(--space-xs);
 3 |   padding-bottom: var(--space-xs);
 4 |   margin-top: 0;
 5 |   margin-bottom: 0;
 6 | 
 7 |   & * {
 8 |     font-size: var(--text-base);
 9 |     margin-top: 0;
10 |     margin-bottom: var(--space-xs);
11 |   }
12 | }
13 | 
14 | .notice--info,
15 | .notice--warn {
16 |   position: relative;
17 | 
18 |   &::before {
19 |     position: absolute;
20 |     top: var(--space-xs);
21 |     left: calc(var(--space-lg) * -1);
22 |   }
23 | }
24 | 
25 | .notice--info {
26 |   & * {
27 |     color: lch(50% 39 266);
28 |   }
29 | 
30 |   &::before {
31 |     content: "ℹ️";
32 |   }
33 | }
34 | 
35 | .notice--warn {
36 |   & * {
37 |     color: lch(50% 41 82);
38 |   }
39 | 
40 |   &::before {
41 |     content: "⚠️";
42 |   }
43 | }
44 | 
45 | @media screen and (--dm) {
46 |   .notice--info {
47 |     & * {
48 |       color: lch(65% 39 266);
49 |     }
50 |   }
51 | 
52 |   .notice--warn {
53 |     & * {
54 |       color: lch(65% 41 82);
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/assets/css/components/post-card.css:
--------------------------------------------------------------------------------
  1 | .post-card {
  2 |   margin-top: 0;
  3 |   margin-bottom: var(--space-2xl);
  4 | }
  5 | 
  6 | .post-card__published-date {
  7 |   font-size: var(--text-base);
  8 |   margin-top: 0;
  9 |   margin-bottom: 0;
 10 | }
 11 | 
 12 | .post-card__title {
 13 |   color: inherit;
 14 |   margin-top: var(--space-xs);
 15 |   margin-bottom: 0;
 16 | }
 17 | 
 18 | .post-card[data-type^="article"] {
 19 |   position: relative;
 20 | 
 21 |   &::before {
 22 |     position: absolute;
 23 |     top: 0;
 24 |     left: calc(var(--space-xl) * -1);
 25 |     content: "📄";
 26 |   }
 27 | }
 28 | 
 29 | @media screen and (--lg) {
 30 |   .post-card[data-type^="article"] {
 31 |     &::before {
 32 |       left: calc(var(--space-lg) * -4);
 33 |       content: "📄 Article";
 34 |     }
 35 |   }
 36 | }
 37 | 
 38 | .post-card[data-type^="note"] {
 39 |   position: relative;
 40 | 
 41 |   &::before {
 42 |     position: absolute;
 43 |     top: 0;
 44 |     left: calc(var(--space-xl) * -1);
 45 |     content: "📔";
 46 |   }
 47 | }
 48 | 
 49 | @media screen and (--lg) {
 50 |   .post-card[data-type^="note"] {
 51 |     &::before {
 52 |       left: calc(var(--space-lg) * -4);
 53 |       content: "📔 Note";
 54 |     }
 55 |   }
 56 | }
 57 | 
 58 | .post-card[data-type^="photo"] {
 59 |   position: relative;
 60 | 
 61 |   & .u-photo {
 62 |     margin-top: var(--space-lg);
 63 |     margin-bottom: 0;
 64 |     max-width: 100%;
 65 |   }
 66 | 
 67 |   &::before {
 68 |     position: absolute;
 69 |     top: 0;
 70 |     left: calc(var(--space-xl) * -1);
 71 |     content: "📷";
 72 |   }
 73 | }
 74 | 
 75 | @media screen and (--lg) {
 76 |   .post-card[data-type^="photo"] {
 77 |     & .post-card-photos {
 78 |       display: flex;
 79 |       flex-wrap: row;
 80 |       gap: var(--space-sm);
 81 |       grid-gap: var(--space-sm);
 82 |     }
 83 | 
 84 |     & .u-photo {
 85 |       flex: 0 1 auto;
 86 |     }
 87 | 
 88 |     &::before {
 89 |       left: calc(var(--space-lg) * -4);
 90 |       content: "📷 Photo";
 91 |     }
 92 |   }
 93 | }
 94 | 
 95 | .post-card[data-type^="reply"] {
 96 |   position: relative;
 97 | 
 98 |   &::before {
 99 |     position: absolute;
100 |     top: 0;
101 |     left: calc(var(--space-xl) * -1);
102 |     content: "↪";
103 |   }
104 | }
105 | 
106 | @media screen and (--lg) {
107 |   .post-card[data-type^="reply"] {
108 |     &::before {
109 |       left: calc(var(--space-lg) * -4);
110 |       content: "↪ Reply";
111 |     }
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/src/assets/css/components/post.css:
--------------------------------------------------------------------------------
 1 | article.post {
 2 |   & .post-datetime,
 3 |   & .post-tags {
 4 |     margin-top: 0.25rem;
 5 |     margin-bottom: 0.25rem;
 6 | 
 7 |     & * {
 8 |       font-size: var(--text-sm);
 9 |     }
10 |   }
11 | 
12 |   & .post-tags {
13 |     display: flex;
14 |     flex-direction: row;
15 |     flex-wrap: wrap;
16 |     align-items: flex-start;
17 |   }
18 | 
19 |   & > header,
20 |   & > main {
21 |     border-bottom: 1px dashed var(--gray-300);
22 |   }
23 | }
24 | 
25 | @media screen and (--dm) {
26 |   article.post {
27 |     & > header,
28 |     & > main {
29 |       border-bottom: 1px dashed var(--gray-800);
30 |     }
31 |   }
32 | }
33 | 
34 | @media screen and (--lg) {
35 |   .article {
36 |     & .post-tags {
37 |       align-items: center;
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/assets/css/modules/atkinson-hyperlegible-font.css:
--------------------------------------------------------------------------------
 1 | /* Regular */
 2 | @font-face {
 3 |   font-family: "Atkinson Hyperlegible";
 4 |   src: local("Atkinson Hyperlegible"), local("Atkinson Hyperlegible"),
 5 |     url("/assets/font/Atkinson-Hyperlegible-Regular-102.woff2") format("woff2"),
 6 |     url("/assets/font/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
 7 |   font-weight: normal;
 8 |   font-style: normal;
 9 |   font-display: swap;
10 | }
11 | 
12 | /* Italic */
13 | @font-face {
14 |   font-family: "Atkinson Hyperlegible";
15 |   src: local("Atkinson Hyperlegible Italic"), local("Atkinson Hyperlegible"),
16 |     url("/assets/font/Atkinson-Hyperlegible-Italic-102.woff2") format("woff2"),
17 |     url("/assets/font/Atkinson-Hyperlegible-Italic-102.woff") format("woff");
18 |   font-weight: normal;
19 |   font-style: italic;
20 |   font-display: swap;
21 | }
22 | 
23 | /* Bold */
24 | @font-face {
25 |   font-family: "Atkinson Hyperlegible";
26 |   src: local("Atkinson Hyperlegible Bold"), local("Atkinson Hyperlegible"),
27 |     url("/assets/font/Atkinson-Hyperlegible-Bold-102.woff2") format("woff2"),
28 |     url("/assets/font/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
29 |   font-weight: 600;
30 |   font-style: normal;
31 |   font-display: swap;
32 | }
33 | 
34 | /* Bold Italic */
35 | @font-face {
36 |   font-family: "Atkinson Hyperlegible";
37 |   src: local("Atkinson Hyperlegible Bold Italic"),
38 |     local("Atkinson Hyperlegible"),
39 |     url("/assets/font/Atkinson-Hyperlegible-BoldItalic-102.woff2")
40 |       format("woff2"),
41 |     url("/assets/font/Atkinson-Hyperlegible-BoldItalic-102.woff") format("woff");
42 |   font-weight: 600;
43 |   font-style: italic;
44 |   font-display: swap;
45 | }
46 | 
47 | body {
48 |   font-family: "Atkinson Hyperlegible", var(--sans-fontset);
49 | }
50 | 


--------------------------------------------------------------------------------
/src/assets/css/modules/sticky-footer.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   height: 100%;
 4 | }
 5 | 
 6 | .body-holder {
 7 |   display: flex;
 8 |   flex-direction: column;
 9 |   min-height: 100%;
10 | 
11 |   & > header,
12 |   & > footer {
13 |     flex: none;
14 | 
15 |     /* Cosmetic */
16 |     padding-top: 2rem;
17 |     padding-bottom: 2rem;
18 |   }
19 | 
20 |   & > main {
21 |     flex: 1 0 auto;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/assets/css/modules/syntax.css:
--------------------------------------------------------------------------------
 1 | @import "../themes/prism-one-light.css";
 2 | 
 3 | /* Pre blocks */
 4 | pre {
 5 |   border-radius: 0.25rem;
 6 |   margin-top: 0.25rem;
 7 |   margin-bottom: 2rem;
 8 |   margin-left: -1rem;
 9 |   margin-right: -1rem;
10 |   padding: 1rem;
11 |   overflow-x: auto;
12 | }
13 | 
14 | /* Inline code */
15 | /* WARNING Be careful, this can affect code inside pre blocks */
16 | code {
17 |   font-family: var(--mono-fontset);
18 |   margin-left: 0.25rem;
19 |   margin-right: 0.25rem;
20 |   padding: 0.25rem;
21 |   border-radius: 0.25rem;
22 |   font-size: var(--text-sm);
23 |   /* background-color: var(--pink-100); */
24 |   /* color: var(--pink-700); */
25 |   vertical-align: middle;
26 | }
27 | 
28 | @media screen and (--dm) {
29 |   code {
30 |     /* background-color: var(--gray-900); */
31 |     /* color: var(--pink-300); */
32 |   }
33 | }
34 | 
35 | /* Code inside pre blocks */
36 | pre > code[class*="language-"] {
37 |   font-family: var(--mono-fontset);
38 |   margin-bottom: 0;
39 |   padding-left: 0;
40 |   padding-right: 0;
41 |   font-size: var(--text-base);
42 |   background-color: inherit;
43 |   white-space: pre-wrap;
44 |   word-break: break-word;
45 | 
46 |   & * {
47 |     color: inherit;
48 |   }
49 | }
50 | 
51 | @media screen and (--dm) {
52 |   pre > code[class*="language-"] {
53 |     background-color: inherit;
54 |     & * {
55 |       color: inherit;
56 |     }
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/assets/css/modules/typography.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: var(--sans-fontset);
  3 | }
  4 | 
  5 | /* Exclusions to margin-bottom. */
  6 | a {
  7 |   margin-bottom: 0;
  8 | }
  9 | 
 10 | p,
 11 | .p {
 12 |   font-family: var(--sans-fontset);
 13 |   font-size: var(--text-base);
 14 |   font-weight: normal;
 15 | }
 16 | 
 17 | @media screen and (--dm) {
 18 |   * {
 19 |     color: var(--gray-400);
 20 |   }
 21 | }
 22 | 
 23 | :--hx {
 24 |   font-weight: 500;
 25 |   line-height: 1.25;
 26 |   color: var(--gray-700);
 27 |   margin-top: var(--space-base);
 28 |   margin-bottom: var(--space-2xs);
 29 |   font-family: var(--serif-fontset);
 30 | }
 31 | 
 32 | @media screen and (--lg) {
 33 |   :--hx {
 34 |     margin-top: var(--space-base);
 35 |     margin-bottom: var(--space-2xs);
 36 |   }
 37 | }
 38 | 
 39 | @media screen and (--dm) {
 40 |   :--hx {
 41 |     color: var(--gray-100);
 42 |   }
 43 | }
 44 | 
 45 | @media screen and (--lg) {
 46 |   :root {
 47 |     --multiplier: 1.3;
 48 |   }
 49 | }
 50 | 
 51 | :--h1 {
 52 |   font-size: calc(var(--text-3xl) * var(--multiplier));
 53 | }
 54 | 
 55 | :--h2 {
 56 |   font-size: calc(var(--text-3xl) * var(--multiplier));
 57 | }
 58 | 
 59 | :--h3 {
 60 |   font-size: calc(var(--text-2xl) * var(--multiplier));
 61 | }
 62 | 
 63 | :--h4 {
 64 |   font-size: calc(var(--text-xl) * var(--multiplier));
 65 | }
 66 | 
 67 | :--h5 {
 68 |   font-size: var(--text-xl);
 69 |   color: var(--gray-600);
 70 | }
 71 | 
 72 | @media screen and (--dm) {
 73 |   :--h5 {
 74 |     color: var(--gray-200);
 75 |   }
 76 | }
 77 | 
 78 | :--h6 {
 79 |   font-size: var(--text-lg);
 80 |   color: var(--gray-600);
 81 | }
 82 | 
 83 | @media screen and (--dm) {
 84 |   :--h6 {
 85 |     color: var(--gray-200);
 86 |   }
 87 | }
 88 | 
 89 | li {
 90 |   margin-bottom: var(--space-2xs);
 91 | }
 92 | 
 93 | ol:not(.unstyled-list) {
 94 |   list-style-type: decimal;
 95 |   list-style-position: outside;
 96 |   margin-inline-start: var(--space-xl);
 97 | 
 98 |   & ol:not(.unstyled-list) {
 99 |     list-style-type: decimal;
100 |     margin-inline-start: var(--space-xl);
101 |     margin-block-end: 0;
102 | 
103 |     & li {
104 |       color: var(--gray-700);
105 | 
106 |       &:first-child {
107 |         margin-top: var(--space-2xs);
108 |       }
109 | 
110 |       &:last-child {
111 |         margin-bottom: 0;
112 |       }
113 |     }
114 |   }
115 | }
116 | 
117 | ul:not(.unstyled-list) {
118 |   list-style-type: disc;
119 |   list-style-position: outside;
120 |   margin-inline-start: var(--space-xl);
121 | 
122 |   & ul:not(.unstyled-list) {
123 |     list-style-type: disc;
124 |     margin-inline-start: var(--space-xl);
125 |     margin-block-end: 0;
126 | 
127 |     & li {
128 |       color: var(--gray-700);
129 | 
130 |       &:first-child {
131 |         margin-block-top: var(--space-2xs);
132 |       }
133 | 
134 |       &:last-child {
135 |         margin-block-end: 0;
136 |       }
137 |     }
138 |   }
139 | }
140 | 
141 | @media screen and (--dm) {
142 |   ol {
143 |     & ol {
144 |       & li {
145 |         color: var(--gray-100);
146 |       }
147 |     }
148 |   }
149 | 
150 |   ul {
151 |     & ul {
152 |       & li {
153 |         color: var(--gray-100);
154 |       }
155 |     }
156 |   }
157 | }
158 | 
159 | a {
160 |   color: var(--pink-700);
161 | 
162 |   &:focus {
163 |     outline-style: solid;
164 |   }
165 | 
166 |   &:hover {
167 |     text-decoration-line: underline;
168 |   }
169 | }
170 | 
171 | @media screen and (--dm) {
172 |   a {
173 |     color: var(--pink-600);
174 |   }
175 | }
176 | 
177 | hr {
178 |   border-width: 0;
179 |   background-color: var(--gray-800);
180 |   width: 80%;
181 |   height: 1px;
182 |   margin-bottom: var(--space-3xl);
183 |   margin-top: var(--space-3xl);
184 |   margin-left: auto;
185 |   margin-right: auto;
186 | }
187 | 
188 | @media screen and (--dm) {
189 |   hr {
190 |     background-color: var(--gray-900);
191 |   }
192 | }
193 | 
194 | blockquote {
195 |   border-left-width: 0.25rem;
196 |   border-left-style: solid;
197 |   border-left-color: var(--gray-700);
198 |   padding-left: var(--space-lg);
199 |   margin-top: var(--space-base);
200 |   margin-bottom: var(--space-lg);
201 |   margin-left: calc(var(--space--xl) * -1);
202 | }
203 | 
204 | @media screen and (--dm) {
205 |   blockquote {
206 |     border-color: var(--gray-300);
207 |   }
208 | }
209 | 
210 | pre {
211 |   margin-top: calc(0.5rem * var(--multiplier));
212 |   margin-bottom: calc(0.5rem * var(--multiplier));
213 | }
214 | 
215 | img {
216 |   max-width: 100%;
217 |   height: auto;
218 | }
219 | 
220 | @media screen and (--dm) {
221 |   img {
222 |     opacity: 0.85;
223 | 
224 |     &:hover {
225 |       opacity: 1;
226 |     }
227 |   }
228 | }
229 | 


--------------------------------------------------------------------------------
/src/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | 
 3 | /* System */
 4 | @import "./system/selectors.css";
 5 | @import "./system/tokens.css";
 6 | @import "./system/mq.css";
 7 | 
 8 | /*
 9 | ** Remove this comment and the following imports to get a blank slate.
10 | */
11 | @import "./modules/typography.css";
12 | @import "./modules/syntax.css";
13 | /* @import "./modules/atkinson-hyperlegible-font.css"; */
14 | @import "./modules/sticky-footer.css";
15 | 
16 | /* Pre-built components in use. */
17 | @import "./components/notice.css";
18 | @import "./components/container.css";
19 | @import "./components/post.css";
20 | @import "./components/author-card.css";
21 | @import "./components/post-card.css";
22 | 
23 | @media screen and (--dm) {
24 |   body {
25 |     background: var(--black);
26 |   }
27 | }
28 | 
29 | /* Although the universal selector does not have a specificity of its own, source order comes into play and can affect your overrides. To prevent this situation, we tuck this in at the end, acting as a sane default when nothing is specified. */
30 | * {
31 |   font-size: var(--text-base);
32 |   color: var(--gray-800);
33 |   line-height: 1.625;
34 |   margin-inline: 0 initial;
35 |   margin-block: initial var(--space-lg);
36 |   padding-inline: 0;
37 | }
38 | 
39 | @media screen and (--dm) {
40 |   * {
41 |     color: var(--gray-400);
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/assets/css/system/mq.css:
--------------------------------------------------------------------------------
 1 | /* ** Accessibility */
 2 | /* Dark mode */
 3 | @custom-media --dm (prefers-color-scheme: dark);
 4 | 
 5 | /* Reduced motion */
 6 | @custom-media --rm (prefers-reduced-motion);
 7 | 
 8 | /* Responsive breakpoints */
 9 | @custom-media --xs (min-width: 320px);
10 | @custom-media --sm (min-width: 640px);
11 | @custom-media --md (min-width: 768px);
12 | @custom-media --lg (min-width: 1024px);
13 | @custom-media --xl (min-width: 1280px);
14 | 


--------------------------------------------------------------------------------
/src/assets/css/system/selectors.css:
--------------------------------------------------------------------------------
1 | @custom-selector :--hx h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6;
2 | @custom-selector :--h1 h1, .h1;
3 | @custom-selector :--h2 h2, .h2;
4 | @custom-selector :--h3 h3, .h3;
5 | @custom-selector :--h4 h4, .h4;
6 | @custom-selector :--h5 h5, .h5;
7 | @custom-selector :--h6 h6, .h6;
8 | 


--------------------------------------------------------------------------------
/src/assets/css/system/tokens.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --white: #ffffff;
 3 |   --black: #000000;
 4 | 
 5 |   /* Primary color - TailwindCSS' pink */
 6 |   /* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
 7 |   --pink-100: #fff5f7;
 8 |   --pink-200: #fed7e2;
 9 |   --pink-300: #fbb6ce;
10 |   --pink-400: #f687b3;
11 |   --pink-500: #ed64a6;
12 |   --pink-600: #d53f8c;
13 |   --pink-700: #b83280;
14 |   --pink-800: #97266d;
15 |   --pink-900: #702459;
16 |   --pink-1000: #32031f;
17 | 
18 |   /* Hand-picked personal colors */
19 |   --mine-100: #ffffff;
20 |   --mine-200: #ffffff;
21 |   --mine-300: #ffffff;
22 |   --mine-400: #ffffff;
23 |   --mine-500: #ffffff;
24 |   --mine-600: #4a1b70;
25 |   --mine-700: #ffffff;
26 |   --mine-800: #1f0534;
27 |   --mine-900: #150324;
28 | 
29 |   /* Grays - TailwindCSS 3.0's neutral gray */
30 |   /* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
31 |   --gray-100: #f7fafc;
32 |   --gray-200: #edf2f7;
33 |   --gray-300: #e2e8f0;
34 |   --gray-400: #cbd5e0;
35 |   --gray-500: #a0aec0;
36 |   --gray-600: #718096;
37 |   --gray-700: #4a5568;
38 |   --gray-800: #2d3748;
39 |   --gray-900: #1a202c;
40 | 
41 |   /* ** Typography */
42 | 
43 |   --sans-fontset: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
44 |     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
45 |     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
46 | 
47 |   /* As seen on https://systemfontstack.com/ on 2022-02-17. */
48 |   --serif-fontset: "Iowan Old Style", "Apple Garamond", Baskerville,
49 |     "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif,
50 |     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
51 | 
52 |   /* As seen on https://systemfontstack.com/ on 2022-02-17. */
53 |   --mono-fontset: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console",
54 |     monospace;
55 | 
56 |   --text-sm: 0.875rem;
57 |   --text-base: 1rem;
58 |   --text-lg: 1.125rem;
59 |   --text-xl: 1.25rem;
60 |   --text-2xl: 1.5rem;
61 |   --text-3xl: 1.875rem;
62 |   --text-4xl: 2.25rem;
63 |   --text-5xl: 3rem;
64 | 
65 |   /* ** Spacing */
66 |   --space-2xs: 0.25rem;
67 |   --space-xs: 0.625rem;
68 |   --space-sm: 0.875rem;
69 |   --space-base: 1rem;
70 |   --space-lg: 1.25rem;
71 |   --space-xl: 1.5rem;
72 |   --space-2xl: 1.875rem;
73 |   --space-3xl: 2rem;
74 | 
75 |   /* ** Borders */
76 |   --rounded-sm: 0.125rem;
77 |   --rounded: 0.25rem;
78 |   --rounded-lg: 0.5rem;
79 |   --rounded-full: 9999px;
80 | 
81 |   /* ** Responsiveness */
82 |   --multiplier: 1;
83 | }
84 | 


--------------------------------------------------------------------------------
/src/assets/css/themes/prism-one-light.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * One Light theme for prism.js
  3 |  * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
  4 |  */
  5 | 
  6 | /**
  7 |  * One Light colours (accurate as of commit eb064bf on 19 Feb 2021)
  8 |  * From colors.less
  9 |  * --mono-1: hsl(230, 8%, 24%);
 10 |  * --mono-2: hsl(230, 6%, 44%);
 11 |  * --mono-3: hsl(230, 4%, 64%)
 12 |  * --hue-1: hsl(198, 99%, 37%);
 13 |  * --hue-2: hsl(221, 87%, 60%);
 14 |  * --hue-3: hsl(301, 63%, 40%);
 15 |  * --hue-4: hsl(119, 34%, 47%);
 16 |  * --hue-5: hsl(5, 74%, 59%);
 17 |  * --hue-5-2: hsl(344, 84%, 43%);
 18 |  * --hue-6: hsl(35, 99%, 36%);
 19 |  * --hue-6-2: hsl(35, 99%, 40%);
 20 |  * --syntax-fg: hsl(230, 8%, 24%);
 21 |  * --syntax-bg: hsl(230, 1%, 98%);
 22 |  * --syntax-gutter: hsl(230, 1%, 62%);
 23 |  * --syntax-guide: hsla(230, 8%, 24%, 0.2);
 24 |  * --syntax-accent: hsl(230, 100%, 66%);
 25 |  * From syntax-variables.less
 26 |  * --syntax-selection-color: hsl(230, 1%, 90%);
 27 |  * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
 28 |  * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
 29 |  */
 30 | 
 31 | code[class*="language-"],
 32 | pre[class*="language-"] {
 33 |   background: hsl(230, 1%, 98%);
 34 |   color: hsl(230, 8%, 24%);
 35 |   font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono",
 36 |     monospace;
 37 |   direction: ltr;
 38 |   text-align: left;
 39 |   white-space: pre;
 40 |   word-spacing: normal;
 41 |   word-break: normal;
 42 |   line-height: 1.5;
 43 |   -moz-tab-size: 2;
 44 |   -o-tab-size: 2;
 45 |   tab-size: 2;
 46 |   -webkit-hyphens: none;
 47 |   -moz-hyphens: none;
 48 |   -ms-hyphens: none;
 49 |   hyphens: none;
 50 | }
 51 | 
 52 | /* Selection */
 53 | code[class*="language-"]::-moz-selection,
 54 | code[class*="language-"] *::-moz-selection,
 55 | pre[class*="language-"] *::-moz-selection {
 56 |   background: hsl(230, 1%, 90%);
 57 |   color: inherit;
 58 | }
 59 | 
 60 | code[class*="language-"]::selection,
 61 | code[class*="language-"] *::selection,
 62 | pre[class*="language-"] *::selection {
 63 |   background: hsl(230, 1%, 90%);
 64 |   color: inherit;
 65 | }
 66 | 
 67 | /* Code blocks */
 68 | pre[class*="language-"] {
 69 |   padding: 1em;
 70 |   margin: 0.5em 0;
 71 |   overflow: auto;
 72 |   border-radius: 0.3em;
 73 | }
 74 | 
 75 | /* Inline code */
 76 | :not(pre) > code[class*="language-"] {
 77 |   padding: 0.2em 0.3em;
 78 |   border-radius: 0.3em;
 79 |   white-space: normal;
 80 | }
 81 | 
 82 | .token.comment,
 83 | .token.prolog,
 84 | .token.cdata {
 85 |   color: hsl(230, 4%, 64%);
 86 | }
 87 | 
 88 | .token.doctype,
 89 | .token.punctuation,
 90 | .token.entity {
 91 |   color: hsl(230, 8%, 24%);
 92 | }
 93 | 
 94 | .token.attr-name,
 95 | .token.class-name,
 96 | .token.boolean,
 97 | .token.constant,
 98 | .token.number,
 99 | .token.atrule {
100 |   color: hsl(35, 99%, 36%);
101 | }
102 | 
103 | .token.keyword {
104 |   color: hsl(301, 63%, 40%);
105 | }
106 | 
107 | .token.property,
108 | .token.tag,
109 | .token.symbol,
110 | .token.deleted,
111 | .token.important {
112 |   color: hsl(5, 74%, 59%);
113 | }
114 | 
115 | .token.selector,
116 | .token.string,
117 | .token.char,
118 | .token.builtin,
119 | .token.inserted,
120 | .token.regex,
121 | .token.attr-value,
122 | .token.attr-value > .token.punctuation {
123 |   color: hsl(119, 34%, 47%);
124 | }
125 | 
126 | .token.variable,
127 | .token.operator,
128 | .token.function {
129 |   color: hsl(221, 87%, 60%);
130 | }
131 | 
132 | .token.url {
133 |   color: hsl(198, 99%, 37%);
134 | }
135 | 
136 | /* HTML overrides */
137 | .token.attr-value > .token.punctuation.attr-equals,
138 | .token.special-attr > .token.attr-value > .token.value.css {
139 |   color: hsl(230, 8%, 24%);
140 | }
141 | 
142 | /* CSS overrides */
143 | .language-css .token.selector {
144 |   color: hsl(5, 74%, 59%);
145 | }
146 | 
147 | .language-css .token.property {
148 |   color: hsl(230, 8%, 24%);
149 | }
150 | 
151 | .language-css .token.function,
152 | .language-css .token.url > .token.function {
153 |   color: hsl(198, 99%, 37%);
154 | }
155 | 
156 | .language-css .token.url > .token.string.url {
157 |   color: hsl(119, 34%, 47%);
158 | }
159 | 
160 | .language-css .token.important,
161 | .language-css .token.atrule .token.rule {
162 |   color: hsl(301, 63%, 40%);
163 | }
164 | 
165 | /* JS overrides */
166 | .language-javascript .token.operator {
167 |   color: hsl(301, 63%, 40%);
168 | }
169 | 
170 | .language-javascript
171 |   .token.template-string
172 |   > .token.interpolation
173 |   > .token.interpolation-punctuation.punctuation {
174 |   color: hsl(344, 84%, 43%);
175 | }
176 | 
177 | /* JSON overrides */
178 | .language-json .token.operator {
179 |   color: hsl(230, 8%, 24%);
180 | }
181 | 
182 | .language-json .token.null.keyword {
183 |   color: hsl(35, 99%, 36%);
184 | }
185 | 
186 | /* MD overrides */
187 | .language-markdown .token.url,
188 | .language-markdown .token.url > .token.operator,
189 | .language-markdown .token.url-reference.url > .token.string {
190 |   color: hsl(230, 8%, 24%);
191 | }
192 | 
193 | .language-markdown .token.url > .token.content {
194 |   color: hsl(221, 87%, 60%);
195 | }
196 | 
197 | .language-markdown .token.url > .token.url,
198 | .language-markdown .token.url-reference.url {
199 |   color: hsl(198, 99%, 37%);
200 | }
201 | 
202 | .language-markdown .token.blockquote.punctuation,
203 | .language-markdown .token.hr.punctuation {
204 |   color: hsl(230, 4%, 64%);
205 |   font-style: italic;
206 | }
207 | 
208 | .language-markdown .token.code-snippet {
209 |   color: hsl(119, 34%, 47%);
210 | }
211 | 
212 | .language-markdown .token.bold .token.content {
213 |   color: hsl(35, 99%, 36%);
214 | }
215 | 
216 | .language-markdown .token.italic .token.content {
217 |   color: hsl(301, 63%, 40%);
218 | }
219 | 
220 | .language-markdown .token.strike .token.content,
221 | .language-markdown .token.strike .token.punctuation,
222 | .language-markdown .token.list.punctuation,
223 | .language-markdown .token.title.important > .token.punctuation {
224 |   color: hsl(5, 74%, 59%);
225 | }
226 | 
227 | /* General */
228 | .token.bold {
229 |   font-weight: bold;
230 | }
231 | 
232 | .token.comment,
233 | .token.italic {
234 |   font-style: italic;
235 | }
236 | 
237 | .token.entity {
238 |   cursor: help;
239 | }
240 | 
241 | .token.namespace {
242 |   opacity: 0.8;
243 | }
244 | 
245 | /* Plugin overrides */
246 | /* Selectors should have higher specificity than those in the plugins' default stylesheets */
247 | 
248 | /* Show Invisibles plugin overrides */
249 | .token.token.tab:not(:empty):before,
250 | .token.token.cr:before,
251 | .token.token.lf:before,
252 | .token.token.space:before {
253 |   color: hsla(230, 8%, 24%, 0.2);
254 | }
255 | 
256 | /* Toolbar plugin overrides */
257 | /* Space out all buttons and move them away from the right edge of the code block */
258 | div.code-toolbar > .toolbar.toolbar > .toolbar-item {
259 |   margin-right: 0.4em;
260 | }
261 | 
262 | /* Styling the buttons */
263 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
264 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
265 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
266 |   background: hsl(230, 1%, 90%);
267 |   color: hsl(230, 6%, 44%);
268 |   padding: 0.1em 0.4em;
269 |   border-radius: 0.3em;
270 | }
271 | 
272 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
273 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
274 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
275 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
276 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
277 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
278 |   background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */
279 |   color: hsl(230, 8%, 24%);
280 | }
281 | 
282 | /* Line Highlight plugin overrides */
283 | /* The highlighted line itself */
284 | .line-highlight.line-highlight {
285 |   background: hsla(230, 8%, 24%, 0.05);
286 | }
287 | 
288 | /* Default line numbers in Line Highlight plugin */
289 | .line-highlight.line-highlight:before,
290 | .line-highlight.line-highlight[data-end]:after {
291 |   background: hsl(230, 1%, 90%);
292 |   color: hsl(230, 8%, 24%);
293 |   padding: 0.1em 0.6em;
294 |   border-radius: 0.3em;
295 |   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
296 | }
297 | 
298 | /* Hovering over a linkable line number (in the gutter area) */
299 | /* Requires Line Numbers plugin as well */
300 | pre[id].linkable-line-numbers.linkable-line-numbers
301 |   span.line-numbers-rows
302 |   > span:hover:before {
303 |   background-color: hsla(230, 8%, 24%, 0.05);
304 | }
305 | 
306 | /* Line Numbers and Command Line plugins overrides */
307 | /* Line separating gutter from coding area */
308 | .line-numbers.line-numbers .line-numbers-rows,
309 | .command-line .command-line-prompt {
310 |   border-right-color: hsla(230, 8%, 24%, 0.2);
311 | }
312 | 
313 | /* Stuff in the gutter */
314 | .line-numbers .line-numbers-rows > span:before,
315 | .command-line .command-line-prompt > span:before {
316 |   color: hsl(230, 1%, 62%);
317 | }
318 | 
319 | /* Match Braces plugin overrides */
320 | /* Note: Outline colour is inherited from the braces */
321 | .rainbow-braces .token.token.punctuation.brace-level-1,
322 | .rainbow-braces .token.token.punctuation.brace-level-5,
323 | .rainbow-braces .token.token.punctuation.brace-level-9 {
324 |   color: hsl(5, 74%, 59%);
325 | }
326 | 
327 | .rainbow-braces .token.token.punctuation.brace-level-2,
328 | .rainbow-braces .token.token.punctuation.brace-level-6,
329 | .rainbow-braces .token.token.punctuation.brace-level-10 {
330 |   color: hsl(119, 34%, 47%);
331 | }
332 | 
333 | .rainbow-braces .token.token.punctuation.brace-level-3,
334 | .rainbow-braces .token.token.punctuation.brace-level-7,
335 | .rainbow-braces .token.token.punctuation.brace-level-11 {
336 |   color: hsl(221, 87%, 60%);
337 | }
338 | 
339 | .rainbow-braces .token.token.punctuation.brace-level-4,
340 | .rainbow-braces .token.token.punctuation.brace-level-8,
341 | .rainbow-braces .token.token.punctuation.brace-level-12 {
342 |   color: hsl(301, 63%, 40%);
343 | }
344 | 
345 | /* Diff Highlight plugin overrides */
346 | /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
347 | pre.diff-highlight > code .token.token.deleted:not(.prefix),
348 | pre > code.diff-highlight .token.token.deleted:not(.prefix) {
349 |   background-color: hsla(353, 100%, 66%, 0.15);
350 | }
351 | 
352 | pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
353 | pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
354 | pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
355 | pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
356 |   background-color: hsla(353, 95%, 66%, 0.25);
357 | }
358 | 
359 | pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
360 | pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
361 | pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
362 | pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
363 |   background-color: hsla(353, 95%, 66%, 0.25);
364 | }
365 | 
366 | pre.diff-highlight > code .token.token.inserted:not(.prefix),
367 | pre > code.diff-highlight .token.token.inserted:not(.prefix) {
368 |   background-color: hsla(137, 100%, 55%, 0.15);
369 | }
370 | 
371 | pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
372 | pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
373 | pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
374 | pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
375 |   background-color: hsla(135, 73%, 55%, 0.25);
376 | }
377 | 
378 | pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
379 | pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
380 | pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
381 | pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
382 |   background-color: hsla(135, 73%, 55%, 0.25);
383 | }
384 | 
385 | /* Previewers plugin overrides */
386 | /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
387 | /* Border around popup */
388 | .prism-previewer.prism-previewer:before,
389 | .prism-previewer-gradient.prism-previewer-gradient div {
390 |   border-color: hsl(0, 0, 95%);
391 | }
392 | 
393 | /* Angle and time should remain as circles and are hence not included */
394 | .prism-previewer-color.prism-previewer-color:before,
395 | .prism-previewer-gradient.prism-previewer-gradient div,
396 | .prism-previewer-easing.prism-previewer-easing:before {
397 |   border-radius: 0.3em;
398 | }
399 | 
400 | /* Triangles pointing to the code */
401 | .prism-previewer.prism-previewer:after {
402 |   border-top-color: hsl(0, 0, 95%);
403 | }
404 | 
405 | .prism-previewer-flipped.prism-previewer-flipped.after {
406 |   border-bottom-color: hsl(0, 0, 95%);
407 | }
408 | 
409 | /* Background colour within the popup */
410 | .prism-previewer-angle.prism-previewer-angle:before,
411 | .prism-previewer-time.prism-previewer-time:before,
412 | .prism-previewer-easing.prism-previewer-easing {
413 |   background: hsl(0, 0%, 100%);
414 | }
415 | 
416 | /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
417 | /* For time, this is the alternate colour */
418 | .prism-previewer-angle.prism-previewer-angle circle,
419 | .prism-previewer-time.prism-previewer-time circle {
420 |   stroke: hsl(230, 8%, 24%);
421 |   stroke-opacity: 1;
422 | }
423 | 
424 | /* Stroke colours of the handle, direction point, and vector itself */
425 | .prism-previewer-easing.prism-previewer-easing circle,
426 | .prism-previewer-easing.prism-previewer-easing path,
427 | .prism-previewer-easing.prism-previewer-easing line {
428 |   stroke: hsl(230, 8%, 24%);
429 | }
430 | 
431 | /* Fill colour of the handle */
432 | .prism-previewer-easing.prism-previewer-easing circle {
433 |   fill: transparent;
434 | }
435 | 


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-Bold-102.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-Bold-102.woff


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-Bold-102.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-Bold-102.woff2


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-BoldItalic-102.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-BoldItalic-102.woff


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-BoldItalic-102.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-BoldItalic-102.woff2


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-Italic-102.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-Italic-102.woff


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-Italic-102.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-Italic-102.woff2


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-Regular-102.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-Regular-102.woff


--------------------------------------------------------------------------------
/src/assets/font/Atkinson-Hyperlegible-Regular-102.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/font/Atkinson-Hyperlegible-Regular-102.woff2


--------------------------------------------------------------------------------
/src/assets/img/8EC7AF25-A29D-4414-9732-DAEB476C9B64.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/8EC7AF25-A29D-4414-9732-DAEB476C9B64.jpg


--------------------------------------------------------------------------------
/src/assets/img/9DA6F832-DDEE-4C5B-A880-28046613BAE4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/9DA6F832-DDEE-4C5B-A880-28046613BAE4.jpg


--------------------------------------------------------------------------------
/src/assets/img/jane-doe-this-person-does-not-exist.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/jane-doe-this-person-does-not-exist.jpeg


--------------------------------------------------------------------------------
/src/assets/img/leaves.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/leaves.jpeg


--------------------------------------------------------------------------------
/src/assets/img/vivaldi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/vivaldi.jpg


--------------------------------------------------------------------------------
/src/assets/img/vivaldi_fosstodon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/vivaldi_fosstodon.png


--------------------------------------------------------------------------------
/src/assets/img/vivaldi_plausible.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MaybeThisIsRu/smix-eleventy-starter/8740331ca4f800c16b072cc1f3675fb177a8cce9/src/assets/img/vivaldi_plausible.png


--------------------------------------------------------------------------------
/src/assets/js/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("DOMContentLoaded", event => {});
2 | 


--------------------------------------------------------------------------------
/src/content/content.11tydata.js:
--------------------------------------------------------------------------------
 1 | const env = require("../../eleventy/env");
 2 | 
 3 | /**
 4 |  *
 5 |  * @param {object} data
 6 |  * @returns {string|false}
 7 |  */
 8 | const getPermalink = data => {
 9 | 	return env.is11tyProduction
10 | 		? data.draft
11 | 			? false
12 | 			: data.permalink
13 | 		: data.permalink;
14 | };
15 | 
16 | module.exports = () => {
17 | 	return {
18 | 		eleventyComputed: {
19 | 			permalink: getPermalink,
20 | 			eleventyExcludeFromCollections: data =>
21 | 				getPermalink(data) ? false : true
22 | 		}
23 | 	};
24 | };
25 | 


--------------------------------------------------------------------------------
/src/content/feeds/primary.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: "/feed.xml"
 3 | eleventyExcludeFromCollections: true
 4 | metadata:
 5 |   title: "Articles, notes, replies, and photos by/from Jane Doe"
 6 |   subtitle: "Site description/subtitle"
 7 |   url: "http://localhost:8080"
 8 |   author:
 9 |     name: "Jane Doe"
10 |     email: "smix@rusingh.com"
11 | ---
12 | {% assign imageBaseUrl = config.siteBaseUrl | append: '/assets/img/' %}
13 | {% assign siteUrl = config.siteBaseUrl | append: '/' %}
14 | 
15 | <?xml version="1.0" encoding="utf-8"?>
16 | <feed xmlns="http://www.w3.org/2005/Atom">
17 |     <title>{{ metadata.title }}</title>
18 |     <subtitle>{{ metadata.subtitle }}</subtitle>
19 |     <link href="{{ permalink | absoluteUrl }}" rel="self"/>
20 |     <link href="{{ metadata.url }}"/>
21 |     <id>{{ metadata.url }}</id>
22 |     <author>
23 |         <name>{{ metadata.author.name }}</name>
24 |         <email>{{ metadata.author.email }}</email>
25 |     </author>
26 |     {% assign collectionSize = collections.primary.length %}
27 |     {% if collectionSize %}
28 |     <updated>{{ collections.primary | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
29 |     {% for post in collections.primary limit: 25 %}
30 |     <entry>
31 |         {% if post.data.title %}
32 |         <title>{{ post.data.title }}</title>
33 |         {% endif %}
34 |         <link href="{{ post.url | absoluteUrl }}"/>
35 |         <updated>{% if post.data.updated %}{{ post.data.updated | dateToRfc3339 }}{% else %}{{ post.date | dateToRfc3339 }}{% endif %}</updated>
36 |         <id>{{ absolutePostUrl }}</id>
37 |         <content type="html">
38 |             {% if post.data.photo %}
39 |             <![CDATA[
40 |     {% for photo in post.data.photo %}
41 |     <img src="{{ photo.src | absoluteUrl: imageBaseUrl }}" alt="{{ photo.alt }}">
42 |     {% endfor %}
43 |     {{ post.templateContent | htmlToAbsoluteUrls: siteUrl }}
44 |     {% render 'comment-via-email', subject: "Comment on photo.", url: absolutePostUrl, feed: true %}
45 | ]]>
46 |             {% elsif post.data['reply-context'] %}
47 |             <![CDATA[
48 |     {{ post.templateContent | htmlToAbsoluteUrls: siteUrl }}
49 |     <p>In reply to <a href="{{ post.data['reply-to'] }}">{{ post.data['reply-to'] }}</a>:</p>
50 |     <blockquote>
51 |         {{ post.data['reply-context'] }}
52 |     </blockquote>
53 |     {% render 'comment-via-email', subject: "Comment on reply.", url: absolutePostUrl, feed: true %}
54 | ]]>
55 |             {% elsif post.data['reply-to'] %}
56 |             <![CDATA[
57 |     {{ post.templateContent | htmlToAbsoluteUrls: siteUrl }}
58 |     <p>In reply to <a href="{{ post.data['reply-to'] }}">{{ post.data['reply-to'] }}</a>.</p>
59 |     {% render 'comment-via-email', subject: "Comment on reply.", url: absolutePostUrl, feed: true %}
60 | ]]>
61 |             {% else %}
62 |             <![CDATA[
63 |     {{ post.templateContent | htmlToAbsoluteUrls: siteUrl }}
64 |     {% render 'comment-via-email', subject: "Comment on article/note.", url: absolutePostUrl, feed: true %}
65 | ]]>
66 |             {% endif %}
67 |         </content>
68 |     </entry>
69 |     {% endfor %}
70 |     {% endif %}
71 | </feed>
72 | 


--------------------------------------------------------------------------------
/src/content/pages/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "About"
4 | permalink: "/about/"
5 | ---
6 | 
7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8 | 


--------------------------------------------------------------------------------
/src/content/post/note/94075ed4bf58.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/note
 3 | date: 2020-04-12 18:00:00 +05:30
 4 | updated:
 5 | draft: false
 6 | 
 7 | tags: ["basics"]
 8 | author: 'jane-doe'
 9 | ---
10 | 
11 | This is ~~some~~ content.
12 | 
13 | **Bold**
14 | 
15 | **italic**
16 | 


--------------------------------------------------------------------------------
/src/content/post/note/b5cb4b5c1b88.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/note
 3 | date: 2020-05-16 14:00:00 +05:30
 4 | updated:
 5 | draft: true
 6 | 
 7 | tags: ["advanced"]
 8 | author: 'jane-doe'
 9 | ---
10 | 
11 | This is a draft post and will only be visible on the development and staging environments.
12 | 


--------------------------------------------------------------------------------
/src/content/post/note/dedf7ab03e83.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/note
 3 | date: 2020-04-10 19:00:00 +05:30
 4 | updated: 2022-02-22 22:12:22 +05:30
 5 | draft: false
 6 | 
 7 | tags: ["typography"]
 8 | author: 'jane-doe'
 9 | ---
10 | 
11 | While this would appear as a double dash on development, it will appear as an em dash on production:
12 | 
13 | > Hello -- a word that is universally understood, or one that I hope is -- is an English word that signifies a greeting.
14 | 
15 | This is thanks to [Typeset](https://github.com/davidmerfield/Typeset).
16 | 


--------------------------------------------------------------------------------
/src/content/post/photo/4be63568ba03.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/photo
 3 | date: 2022-02-22 19:00:00 +05:30
 4 | 
 5 | photo:
 6 | - src: leaves.jpeg
 7 |   alt: "A close-up shot of green leaves from the top-down. Some leaves are blurred, others not."
 8 | 
 9 | updated: 
10 | draft: false
11 | 
12 | tags: ["vacation"]
13 | author: 'jane-doe'
14 | ---
15 | 
16 | Testing my new phone!
17 | 


--------------------------------------------------------------------------------
/src/content/post/photo/ecd97ddb244e.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/photo
 3 | date: 2022-02-22 21:00:00 +05:30
 4 | 
 5 | photo:
 6 | - src: 9DA6F832-DDEE-4C5B-A880-28046613BAE4.jpg
 7 |   alt: "Close up of a sipper plastic cup, with a chocolate-based delicacy in the back."
 8 | - src: 8EC7AF25-A29D-4414-9732-DAEB476C9B64.jpg
 9 |   alt: "Birds in a blue sky."
10 | 
11 | updated: 
12 | draft: false
13 | 
14 | tags: ["vacation"]
15 | author: 'jane-doe'
16 | ---
17 | 
18 | An interesting day -- took my new phone through the paces.
19 | 


--------------------------------------------------------------------------------
/src/content/post/reply/597a082f97d2.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/reply
 3 | date: 2022-02-23 00:44:00 +05:30
 4 | updated:
 5 | draft: false
 6 | 
 7 | reply-to: https://jamesvandyne.com/0724bd76-d8ea-4091-abbd-d0e1a53a3ba3
 8 | 
 9 | tags:
10 | - indieweb
11 | author: 'jane-doe'
12 | ---
13 | 
14 | Congratulations, James!
15 | 


--------------------------------------------------------------------------------
/src/content/post/reply/be7fa084d4e5.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post/reply-context
 3 | date: 2022-02-22 23:24:00 +05:30
 4 | updated:
 5 | draft: false
 6 | 
 7 | reply-to: https://jamesvandyne.com/0724bd76-d8ea-4091-abbd-d0e1a53a3ba3
 8 | reply-context: "Huge milestone that's taken over a year: someone else is blogging with Tanzawa!"
 9 | 
10 | tags:
11 | - indieweb
12 | author: 'jane-doe'
13 | ---
14 | 
15 | Congratulations, James!
16 | 


--------------------------------------------------------------------------------
/src/content/special-pages/index.liquid:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Home"
4 | permalink: "/"
5 | content-description: " A standards-respecting starter kit for Eleventy. Go Indie. "
6 | ---
7 | 
8 | {% render 'author-card', authors: site.authors, slug: 'jane-doe' %}
9 | 


--------------------------------------------------------------------------------
/src/content/special-pages/posts.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: "Articles, notes, photos, and replies."
 4 | pagination:
 5 |   data: collections.primary
 6 |   size: 10
 7 |   alias: posts
 8 | permalink: "/archive/post/primary/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}"
 9 | eleventyComputed:
10 |   content-description: "Articles, notes, photos, and replies by {% getOwnerInfo 'name' %}"
11 | ---
12 | <section>
13 | 	{% include 'page-title' title:title %}
14 | 	<main>
15 | 		{% for post in posts %}
16 | 			{% include 'post-card' post:post %}
17 | 		{% endfor %}
18 | 	</main>
19 | </section>
20 | 


--------------------------------------------------------------------------------
/src/content/special-pages/robots.txt.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /robots.txt
 3 | eleventyExcludeFromCollections: true
 4 | ---
 5 | 
 6 | Sitemap: {{config.siteBaseUrl}}/sitemap.xml
 7 | 
 8 | User-agent: *
 9 | Disallow:
10 | 


--------------------------------------------------------------------------------
/src/content/special-pages/sitemap.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /sitemap.xml
 3 | eleventyExcludeFromCollections: true
 4 | ---
 5 | <?xml version="1.0" encoding="utf-8"?>
 6 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 7 |     {% for page in collections.all %}
 8 |     <url>
 9 |         <loc>{{ page.url | absoluteUrl: config.siteBaseUrl | append: '/' }}</loc>
10 |         <lastmod>{% if page.updated %}{{ page.updated | dateToIso8601 }}{% else %}{{ page.date | dateToIso8601 }}{% endif %}</lastmod>
11 |         {% if page.data.changeFrequency %}<changefreq>{{page.data.changeFrequency}}</changefreq>{% endif %}
12 |     </url>
13 |     {% endfor %}
14 | </urlset>
15 | 


--------------------------------------------------------------------------------
/src/content/special-pages/tag.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | pagination:
 4 |     data: collections
 5 |     size: 1
 6 |     alias: tag
 7 |     filter:
 8 |       - primary
 9 |       - all
10 | permalink: /archive/tag/{{ tag }}/
11 | content-description: Archive for tagged posts by  {% getOwnerInfo 'name' %}
12 | eleventyComputed:
13 |   title: "Archive of posts with tag '{{tag}}'"
14 | ---
15 | <div>
16 | 	{% include 'page-title' title:title %}
17 | 	<main>
18 | 		{% assign posts = collections.primary | byTag: tag %}
19 | 		<ul class="unstyled-list">
20 | 			{% for post in posts %}
21 |     			{% include 'post-card' post:post %}
22 | 			{% endfor %}
23 | 		</ul>
24 | 	</main>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/src/data/config.js:
--------------------------------------------------------------------------------
 1 | var merge = require("lodash.merge");
 2 | 
 3 | module.exports = function() {
 4 | 	var src = {
 5 | 		default: {},
 6 | 		development: {
 7 | 			siteBaseUrl: "http://localhost:8080"
 8 | 		},
 9 | 		production: {
10 | 			siteBaseUrl: "https://smix.netlify.app"
11 | 		}
12 | 	};
13 | 
14 | 	var config = merge({}, src.default);
15 | 	process.env.NODE_ENV === "production"
16 | 		? merge(config, src.production)
17 | 		: merge(config, src.development);
18 | 
19 | 	return config;
20 | };
21 | 


--------------------------------------------------------------------------------
/src/data/navigation.js:
--------------------------------------------------------------------------------
 1 | module.exports = [
 2 | 	{
 3 | 		title: "Home",
 4 | 		link: "/"
 5 | 	},
 6 | 	{
 7 | 		title: "Posts",
 8 | 		link: "/archive/post/primary/"
 9 | 	},
10 | 	{
11 | 		title: "About",
12 | 		link: "/about/"
13 | 	}
14 | ];
15 | 


--------------------------------------------------------------------------------
/src/data/site.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"title": "Jane Doe",
 3 | 	"subtitle": "",
 4 | 	"authors": [
 5 | 		{
 6 | 			"name": "Jane Doe",
 7 | 			"slug": "jane-doe",
 8 | 			"introduction": "I'm a florist and a mother of two kids. I work at <a href='https://thispersondoesnotexist.com'>This Person Does Not Exist</a>. I enjoy taking long walks at the beach and playing games on my Nintendo Switch.",
 9 | 			"roles": ["owner"],
10 | 			"website": "/",
11 | 			"socials": [
12 | 				{
13 | 					"slug": "email",
14 | 					"label": "Email",
15 | 					"username": "",
16 | 					"link": "mailto:smix@rusingh.com"
17 | 				},
18 | 				{
19 | 					"slug": "twitter",
20 | 					"label": "Twitter",
21 | 					"username": "MaybeThisIsRu",
22 | 					"link": "https://twitter.com/MaybeThisIsRu"
23 | 				},
24 | 				{
25 | 					"slug": "github",
26 | 					"label": "GitHub",
27 | 					"username": "MaybeThisIsRu",
28 | 					"link": "https://github.com/MaybeThisIsRu"
29 | 				}
30 | 			],
31 | 			"picture": "jane-doe-this-person-does-not-exist.jpeg"
32 | 		}
33 | 	]
34 | }
35 | 


--------------------------------------------------------------------------------
/src/includes/author-card.liquid:
--------------------------------------------------------------------------------
 1 | {% assign author = authors | where: 'slug', slug | first %}
 2 | <section class="author-card h-card {% if post %}p-author{% endif %} {% if hide %}hidden{% endif %}">
 3 |     <div class="author-picture-container">
 4 |         {% assign imageSrc = author.picture | prepend: "./src/assets/img/" %}
 5 |         {% assign imageAlt = author.name | append: "'s picture."%}
 6 |         {% image imageSrc, imageAlt, "class='author-picture u-photo'" %}
 7 |     </div>
 8 |     <h1 class="h2 author-name">
 9 |         <a href="/" class="p-name u-url">{{ author.name }}</a>
10 |     </h1>
11 |     <p class="p-note">{{ author.introduction }}</p>
12 |     <div class="author-socials">
13 |         {% for social in author.socials %}
14 |         <a
15 |             href="{{social.link}}"
16 |             target="_blank"
17 |             rel="me"
18 |         >{{ social.label }}</a>
19 |         {% endfor %}
20 |     </div>
21 | </section> 
22 | 


--------------------------------------------------------------------------------
/src/includes/comment-via-email.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 |     TODO Include email from the site data file.
 3 | {% endcomment %}
 4 | {% assign permalink = url | absoluteUrl %}
 5 | {% if feed != true %}
 6 | <section class="notice notice--info">
 7 | {% endif %}
 8 |     <p>Comments are not enabled on my site. I encourage you to get in touch over email by using the following convenience link: <a href="mailto:smix@rusingh.com?subject={{ subject }}&body=Post link: {{ permalink }}">comment via email</a>.</p>
 9 | {% if feed != true %}
10 | </section>
11 | {% endif %}
12 | 


--------------------------------------------------------------------------------
/src/includes/footer.liquid:
--------------------------------------------------------------------------------
1 | <footer>
2 |     <p>Bar the fictional photo on the home page, all photos used on this website belong to <a href="https://rusingh.com/">Ru Singh</a>. Usage without permission is prohibited.</p>
3 |     <p>&copy; {% getOwnerInfo 'name' %} 2020–2022</p>
4 | </footer>
5 | 


--------------------------------------------------------------------------------
/src/includes/head.liquid:
--------------------------------------------------------------------------------
 1 | <head>
 2 | 	<meta charset="UTF-8">
 3 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 4 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 5 | 	<title>{{siteTitle}}{% if pageTitle %} - {{ pageTitle }}{% endif %}</title>
 6 | 
 7 | 	{%- if content-description != "" and content-description != nil -%}
 8 | 		<meta name="Description" content="{{content-description}}">
 9 | 	{%- endif -%}
10 | 	{%- if draft == true -%}
11 |         <meta name="robots" content="noindex">
12 | 	{%- endif %}
13 | 	
14 |     {% comment %} RSS/Atom feed {% endcomment %}
15 | 	<link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Articles by {% getOwnerInfo 'name' %}" />
16 |     
17 |     {% comment %} IndieWeb/microformats2 {% endcomment %}
18 |     {% if pageUrl == '/' -%}
19 |         {% comment %} Add any links to h-feeds here {% endcomment %}
20 |         <link rel="feed" href="/articles/">
21 |     {%- endif -%}
22 | 
23 | 	{% comment %} Facebook Open Graph + Twitter {% endcomment %}
24 |     <meta property="og:site_name" content="{{siteTitle}}" key="ogsitename"/>
25 |     <meta property="og:title" content="{{pageTitle}}" key="ogtitle"/>
26 |     <meta property="twitter:title" content="{{pageTitle}}"/>
27 | 
28 |     <meta property="og:url" content="{{ pageUrl | absoluteUrl: config.siteBaseUrl | append: '/' }}" key="ogurl"/>
29 | 
30 |     {%- if content-description -%}
31 |     <meta property="og:description" content="{{content-description}}" key="ogdesc"/>
32 |     <meta property="twitter:description" content="{{content-description}}"/>
33 |     {%- endif -%}
34 | 
35 |     {%- if cover-image -%}
36 |     <meta property="og:image" content="{{ cover-image.image | absoluteUrl: config.siteBaseUrl | append: '/' }}" key="ogimage"/>
37 |     <meta property="twitter:image" content="{{ cover-image.image | absoluteUrl: config.siteBaseUrl | append: '/' }}"/>
38 |     <meta content="summary_large_image" key="twcard" name="twitter:card"/>
39 |     {%- else -%}
40 |     {% comment %} if no cover image, fallback to author's picture {% endcomment %}
41 |     {% capture ownerPicture %}{% getOwnerInfo "picture" %}{% endcapture %}
42 |     <meta property="og:image" content="{{ ownerPicture | absoluteUrl: config.siteBaseUrl | append: '/' }}" key="ogimage"/>
43 |     <meta property="twitter:image" content="{{ ownerPicture | absoluteUrl: config.siteBaseUrl | append: '/' }}"/>
44 |     {% comment %}Since we are falling back on the author picture here, show the smaller twitter card.{% endcomment %}
45 |     <meta content="summary" key="twcard" name="twitter:card"/>
46 |     {%- endif -%}
47 | 
48 |     {% comment %} where will return an array, even if of one element {% endcomment %}
49 |     {% capture ownerSocials %}{% getOwnerInfo 'socials' %}{% endcapture %}
50 |     {%- assign twitterInfo = ownerSocials | where: "slug", "twitter" | first -%}
51 |     <meta name="twitter:creator" content="{{ twitterInfo.username }}" key="twhandle"/>
52 |     
53 |     <script defer data-domain="smix.netlify.app" src="https://plausible.io/js/plausible.js"></script>
54 | 
55 | 	<link rel="stylesheet" href="/assets/css/style.css">
56 | 
57 |     {% block pageJavascript %}{% endblock %}
58 | </head>
59 | 


--------------------------------------------------------------------------------
/src/includes/header.liquid:
--------------------------------------------------------------------------------
 1 | {% capture isHomePage %}{% if url == "/" %}true{% else %}false{% endif %}{% endcapture %}
 2 | <header>
 3 |     {% unless isHomePage == "true" %}
 4 |     <div class="my-2">
 5 |         <h1 class="text-xl lg:text-2xl mt-0 lg:mt-0">{{title}}</h1>
 6 |         <p class="text-lg lg:text-xl mt-0 lg:mt-0">{{subtitle}}</p>
 7 |     </div>
 8 |     {% endunless %}
 9 | 
10 |     <nav>
11 |         {% assign lastItem = navigation | last %}
12 |         {% for item in navigation %}
13 |             <a href="{{ item.link }}">{{ item.title }}</a>
14 |         {% endfor %}
15 |     </nav>
16 | </header>
17 | 


--------------------------------------------------------------------------------
/src/includes/old-post-notice.liquid:
--------------------------------------------------------------------------------
 1 | {% capture isOldPost %}
 2 | {% isOldPost date %}
 3 | {% endcapture %}
 4 | 
 5 | {% if isOldPost %}
 6 | <section class="notice notice--warn">
 7 |     <p>This post is over a year old! Information may be stale. Please read with caution.</p>
 8 | </section>
 9 | {% endif %}
10 | 


--------------------------------------------------------------------------------
/src/includes/page-title.liquid:
--------------------------------------------------------------------------------
1 | <header>
2 |     <h1 class="{% if page.url == '/articles/' %}p-name{% endif %}">{{title}}</h1>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/src/includes/post-card-article.liquid:
--------------------------------------------------------------------------------
1 | <h1
2 |     class="p post-card__title p-name"
3 | >{{ post.data.title -}}</h1>
4 | 


--------------------------------------------------------------------------------
/src/includes/post-card-note.liquid:
--------------------------------------------------------------------------------
1 | <div class="e-content">{{ post.templateContent }}</div>
2 | 


--------------------------------------------------------------------------------
/src/includes/post-card-photo.liquid:
--------------------------------------------------------------------------------
1 | <section class="post-card-photos">
2 | {% for photo in post.data.photo %}
3 |     {% assign imageSrc = "./src/assets/img/" | append: photo.src %}
4 |     {% image imageSrc, photo.alt, 'class="u-photo"' %}
5 | {% endfor %}
6 | </section>
7 | <div class="p-content">{{ post.templateContent }}</div>
8 | 


--------------------------------------------------------------------------------
/src/includes/post-card-reply-context.liquid:
--------------------------------------------------------------------------------
1 | <div class="p-name e-content">
2 |     {{ post.templateContent }}
3 | </div>
4 | <section class="u-in-reply-to h-cite">In reply to <a href="{{ post.data.reply-to }}" class="u-url">{{ post.data.reply-to }}</a>:
5 |     <blockquote class="p-content">
6 |     {{ post.data.reply-context }}
7 |     </blockquote>
8 | </section>
9 | 


--------------------------------------------------------------------------------
/src/includes/post-card-reply.liquid:
--------------------------------------------------------------------------------
1 | <section class="p-name e-content">
2 |     {{ post.templateContent }}
3 | </section>
4 | <p class="u-in-reply-to">In reply to <a href="{{ post.data.reply-to }}" class="u-url">{{ post.data.reply-to }}</a>.
5 | </p>
6 | 


--------------------------------------------------------------------------------
/src/includes/post-card.liquid:
--------------------------------------------------------------------------------
 1 | {% assign postLayout = post.data.layout %}
 2 | {% capture postType %}
 3 | {%- getPostType postLayout -%}
 4 | {% endcapture %}
 5 | 
 6 | 
 7 | <article
 8 |     class="post-card h-entry"
 9 |     data-type="{{ postType }}"
10 | >
11 |     <a class="u-url u-uid" href="{{ post.url }}">
12 |         <time
13 |             class="post-card__published-date dt-published"
14 |             datetime="{{ post.date | dateToIso8601 }}"
15 |         >
16 |             {{- post.date | friendlyDate -}}
17 |         </time>
18 |     </a>
19 | 
20 |     {% if postType == "article" %}
21 |         {% include 'post-card-article' %}
22 |     {% elsif postType == "note" %}
23 |         {% include 'post-card-note' %}
24 |     {% elsif postType == "photo" %}
25 |         {% include 'post-card-photo' %}
26 |     {% elsif postType == "reply-context" %}
27 |         {% include 'post-card-reply-context' %}
28 |     {% elsif postType == "reply" %}
29 |         {% include 'post-card-reply' %}
30 |     {% endif %}
31 | 
32 | </article>
33 | 
34 | 


--------------------------------------------------------------------------------
/src/layouts/default.liquid:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" {% if page.url == '/articles/' %}class="h-feed"{% endif %}>
 3 | {% render 'head',
 4 | 	siteTitle: site.title,
 5 | 	pageTitle:title,
 6 | 	content-description:content-description,
 7 | 	draft:draft,
 8 | 	cover-image:cover-image,
 9 | 	config:config,
10 | 	pageUrl:page.url,
11 | -%}
12 | <body class="container">
13 | 
14 | 	<div class="body-holder">
15 | 	
16 | 		{% render 'header',
17 | 			url:page.url, 
18 | 			title:site.title,
19 | 			subtitle:site.subtitle,
20 | 			navigation:navigation
21 | 		%}
22 | 
23 | 		<main>{{ content }}</main>
24 | 
25 | 		{% render 'footer' %}
26 | 
27 | 	</div>
28 | 
29 | 
30 | 	<script src="/assets/js/index.min.js"></script>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/src/layouts/page.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | <section>
 6 |     {% include 'page-title' title:title %}
 7 |     
 8 |     <main>
 9 |         {{ content }}
10 |     </main>
11 | 
12 | </section>
13 | 


--------------------------------------------------------------------------------
/src/layouts/post/article.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | permalink: "/post/article/{{ page.date | date: '%Y' }}/{{ page.fileSlug }}/"
 4 | ---
 5 | 
 6 | <article class="h-entry post" data-type="article">
 7 |     <header class="post-header">
 8 |         <h1 class="p-name">{{ title }}</h1>
 9 |         <p class="post-datetime">
10 |             <a href="{{page.url}}" class="u-url u-uid"><time datetime="{{page.date | dateToIso8601}}" class="dt-published">{{ page.date | friendlyDate }}</time></a>
11 |             {% if updated %}
12 |                 {% assign publishDate = page.date | friendlyDate %}
13 |                 {% assign updateDate = updated | friendlyDate %}
14 |                 {% unless publishDate == updateDate %}
15 |                     <span class=" text-italic">(last updated on <time class="dt-updated" datetime="{{ updated | dateToIso8601 }}">{{ updated | friendlyDate }}</time>)</span>
16 |                 {% endunless %}
17 |             {% endif %}
18 |         </p>
19 |         {%- if tags.size > 0 -%}
20 | 			<div class="post-tags">
21 | 				<span>Tagged&nbsp;</span>
22 | 				{% for tag in tags %}
23 | 				{% assign tag_name = tag | slugify %}
24 | 					<a href="{{ '/archive/tag/' | append: tag_name }}/" class="p-category">#{{tag}}</a>
25 | 				{% endfor %}
26 | 			</div>
27 | 		{%- endif -%}
28 |         {% if featured-image %}
29 |             {{ featured-image }}
30 |         {% endif %}
31 |         {% render 'old-post-notice' date: page.date %}
32 |     </header>
33 |     <main class="e-content">
34 |         {{ content }}
35 |     </main>
36 |     <footer>
37 |         {% assign emailSubject = title | prepend: "Comment on article: " %}
38 | 
39 |         {% render 'comment-via-email', subject: emailSubject, url: page.url %}
40 | 
41 |         {% render 'author-card',
42 |             authors: site.authors,
43 |             slug: page.author,
44 |             hide: true,
45 |             post: true
46 |         %}
47 |     </footer>
48 | </article>
49 | 


--------------------------------------------------------------------------------
/src/layouts/post/note.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | permalink: "/post/note/{{ page.date | date: '%Y' }}/{{ page.fileSlug }}/"
 4 | ---
 5 | 
 6 | <article class="post h-entry" data-type="note">
 7 |     <header class="post-header">
 8 |         <h1 class="p-name"></h1>
 9 |         <p class="post-datetime">
10 |             <a href="{{page.url}}" class="u-url u-uid"><time datetime="{{page.date | dateToIso8601}}" class="dt-published">{{ page.date | friendlyDate }}</time></a>
11 |             {% if updated %}
12 |                 {% assign publishDate = page.date | friendlyDate %}
13 |                 {% assign updateDate = updated | friendlyDate %}
14 |                 {% unless publishDate == updateDate %}
15 |                     <span class=" text-italic">(last updated on <time class="dt-updated" datetime="{{ updated | dateToIso8601 }}">{{ updated | friendlyDate }}</time>)</span>
16 |                 {% endunless %}
17 |             {% endif %}
18 |         </p>
19 |         {%- if tags.size > 0 -%}
20 | 			<div class="post-tags mb-4 flex flex-row flex-wrap items-top lg:items-center">
21 | 				<span>Tagged&nbsp;</span>
22 | 				{% for tag in tags %}
23 | 				{% assign tag_name = tag | slugify %}
24 | 					<a href="{{ '/archive/tag/' | append: tag_name }}" class="p-category">#{{tag}}</a>
25 | 				{% endfor %}
26 | 			</div>
27 | 		{%- endif -%}
28 |         {% render 'old-post-notice' date: page.date %}
29 |     </header>
30 |     <main class="e-content">
31 |         {{ content }}
32 |     </main>
33 |     <footer>
34 | 
35 |         {% render 'comment-via-email', subject: "Comment on note.", url: page.url %}
36 | 
37 |         {% render 'author-card',
38 |             authors: site.authors,
39 |             slug: page.author,
40 |             hide: true,
41 |             post: true
42 |         %}
43 |     </footer>
44 | </article>
45 | 


--------------------------------------------------------------------------------
/src/layouts/post/photo.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | permalink: "/post/photo/{{ page.date | date: '%Y' }}/{{ page.fileSlug }}/"
 4 | ---
 5 | 
 6 | <article class="post h-entry" data-type="photo">
 7 |     <header class="post-header">
 8 |         <p class="post-datetime">
 9 |             <a href="{{page.url}}" class="u-url u-uid"><time datetime="{{page.date | dateToIso8601}}" class="dt-published">{{ page.date | friendlyDate }}</time></a>
10 |             {% if updated %}
11 |                 {% assign publishDate = page.date | friendlyDate %}
12 |                 {% assign updateDate = updated | friendlyDate %}
13 |                 {% unless publishDate == updateDate %}
14 |                     <span class=" text-italic">(last updated on <time class="dt-updated" datetime="{{ updated | dateToIso8601 }}">{{ updated | friendlyDate }}</time>)</span>
15 |                 {% endunless %}
16 |             {% endif %}
17 |         </p>
18 |         {%- if tags.size > 0 -%}
19 | 			<div class="post-tags">
20 | 				<span>Tagged&nbsp;</span>
21 | 				{% for tag in tags %}
22 | 				{% assign tag_name = tag | slugify %}
23 | 					<a href="{{ '/archive/tag/' | append: tag_name }}" class="p-category">#{{tag}}</a>
24 | 				{% endfor %}
25 | 			</div>
26 | 		{%- endif -%}
27 |     </header>
28 |     <main>
29 |         <section class="post-photos">
30 |         {% for photo in photo %}
31 |             {% assign photoSrc = 'src/assets/img/' | append: photo.src %}
32 |             {% image photoSrc, photo.alt, "class='u-photo'" %}
33 |         {% endfor %}
34 |         </section>
35 |         <div class="p-content">{{ content }}</div>
36 |     </main>
37 |     <footer>
38 |         {% render 'comment-via-email', subject: "Comment on photo.", url: page.url %}
39 | 
40 |         {% render 'author-card',
41 |             authors: site.authors,
42 |             slug: page.author,
43 |             hide: true,
44 |             post: true
45 |         %}
46 |     </footer>
47 | </article>
48 | 


--------------------------------------------------------------------------------
/src/layouts/post/reply-context.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | permalink: "/post/reply/{{ page.date | date: '%Y' }}/{{ page.fileSlug }}/"
 4 | ---
 5 | 
 6 | <article class="post h-entry" data-type="reply">
 7 |     <header class="post-header">
 8 |         <p class="post-datetime">
 9 |             <a href="{{page.url}}" class="u-url u-uid"><time datetime="{{page.date | dateToIso8601}}" class="dt-published">{{ page.date | friendlyDate }}</time></a>
10 |             {% if updated %}
11 |                 {% assign publishDate = page.date | friendlyDate %}
12 |                 {% assign updateDate = updated | friendlyDate %}
13 |                 {% unless publishDate == updateDate %}
14 |                     <span class=" text-italic">(last updated on <time class="dt-updated" datetime="{{ updated | dateToIso8601 }}">{{ updated | friendlyDate }}</time>)</span>
15 |                 {% endunless %}
16 |             {% endif %}
17 |         </p>
18 |         {%- if tags.size > 0 -%}
19 | 			<div class="post-tags">
20 | 				<span>Tagged&nbsp;</span>
21 | 				{% for tag in tags %}
22 | 				{% assign tag_name = tag | slugify %}
23 | 					<a href="{{ '/archive/tag/' | append: tag_name }}" class="p-category">#{{tag}}</a>
24 | 				{% endfor %}
25 | 			</div>
26 | 		{%- endif -%}
27 |     </header>
28 |     <main>
29 |         <section class="p-name e-content">
30 |             {{ content }}
31 |         </section>
32 |         <section class="u-in-reply-to h-cite">In reply to <a href="{{ reply-to }}" class="u-url">{{ reply-to }}</a>:
33 |             <blockquote class="p-content">
34 |                 {{ reply-context }}
35 |             </blockquote>
36 |         </section>
37 |     </main>
38 |     <footer>
39 |         {% render 'comment-via-email', subject: "Comment on reply.", url: page.url %}
40 | 
41 |         {% render 'author-card',
42 |             authors: site.authors,
43 |             slug: page.author,
44 |             hide: true,
45 |             post: true
46 |         %}
47 |     </footer>
48 | </article>
49 | 


--------------------------------------------------------------------------------
/src/layouts/post/reply.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | permalink: "/post/reply/{{ page.date | date: '%Y' }}/{{ page.fileSlug }}/"
 4 | ---
 5 | 
 6 | <article class="post h-entry" data-type="reply">
 7 |     <header class="post-header">
 8 |         <p class="post-datetime">
 9 |             <a href="{{page.url}}" class="u-url u-uid"><time datetime="{{page.date | dateToIso8601}}" class="dt-published">{{ page.date | friendlyDate }}</time></a>
10 |             {% if updated %}
11 |                 {% assign publishDate = page.date | friendlyDate %}
12 |                 {% assign updateDate = updated | friendlyDate %}
13 |                 {% unless publishDate == updateDate %}
14 |                     <span class=" text-italic">(last updated on <time class="dt-updated" datetime="{{ updated | dateToIso8601 }}">{{ updated | friendlyDate }}</time>)</span>
15 |                 {% endunless %}
16 |             {% endif %}
17 |         </p>
18 |         {%- if tags.size > 0 -%}
19 | 			<div class="post-tags">
20 | 				<span>Tagged&nbsp;</span>
21 | 				{% for tag in tags %}
22 | 				{% assign tag_name = tag | slugify %}
23 | 					<a href="{{ '/archive/tag/' | append: tag_name }}" class="p-category">#{{tag}}</a>
24 | 				{% endfor %}
25 | 			</div>
26 | 		{%- endif -%}
27 |     </header>
28 |     <main>
29 |         <section class="p-name e-content">
30 |             {{ content }}
31 |         </section>
32 |         <p class="u-in-reply-to">In reply to <a href="{{ reply-to }}" class="u-url">{{ reply-to }}</a>.
33 |         </p>
34 |     </main>
35 |     <footer>
36 |         {% render 'comment-via-email', subject: "Comment on reply.", url: page.url %}
37 | 
38 |         {% render 'author-card',
39 |             authors: site.authors,
40 |             slug: page.author,
41 |             hide: true,
42 |             post: true
43 |         %}
44 |     </footer>
45 | </article>
46 | 


--------------------------------------------------------------------------------