hmm

.editorconfig

@@ -1,7 +1,7 @@
 root = true
 
 [*]
-indent_style = tab
+indent_style = space
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true

_data/metadata.js

@@ -1,11 +1,10 @@
 module.exports = {
-	title: "Eleventy Base Blog v8",
+	title: "The Ramblings of TerribleDev",
-	url: "https://example.com/",
+	url: "https://blog.terrible.dev/",
 	language: "en",
 	description: "I am writing about my experiences as a naval navel-gazer.",
 	author: {
-		name: "Your Name Here",
+		name: "Tommy Parnell",
-		email: "youremailaddress@example.com",
+		url: "https://blog.terrible.dev/about/"
-		url: "https://example.com/about-me/"
 	}
 }

_includes/layouts/base.njk

@@ -11,9 +11,9 @@
     <link rel="manifest" href="/manifest.json">
     <meta name="author" content="Tommy &quot;TerribleDev&quot; Parnell" />
     <link rel="icon" href="/favicon.ico" />
-		{%- css %}{% include "public/css/site.css" %}{% endcss %}
+		{%- css %}{% include "wwwroot/css/site.css" %}{% endcss %}
-		{%- css %}{% include "public/css/site.mobile.css" %}{% endcss %}
+		{%- css %}{% include "wwwroot/css/site.mobile.css" %}{% endcss %}
-		{%- css %}{% include "public/css/site.desktop.css" %}{% endcss %}
+		{%- css %}{% include "wwwroot/css/site.desktop.css" %}{% endcss %}
 		{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
 		<style>{% getBundle "css" %}</style>
 		{% block head %}
@@ -33,6 +33,7 @@
           </main>
       </div>
     </div>
+    <script src="/js/swi.js"></script>
 		{% block scripts %}
 		{% endblock %}
 </body>

_includes/layouts/baseold.njk

@@ -24,7 +24,7 @@
 		{#- Add an arbitrary string to the bundle #}
 		{%- css %}* { box-sizing: border-box; }{% endcss %}
 		{#- Add the contents of a file to the bundle #}
-		{%- css %}{% include "public/css/index.css" %}{% endcss %}
+		{%- css %}{% include "wwwroot/css/index.css" %}{% endcss %}
 		{#- Or add from node_modules #}
 		{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
 

_includes/layouts/home.njk

@@ -1,16 +0,0 @@
----
-layout: layouts/base.njk
----
-<!-- Delete this message, it will also remove the component CSS from the bundle -->
-{%- css %}{% include "public/css/message-box.css" %}{% endcss %}
-<div class="message-box">
-	<ol>
-		<li>Edit the <code>_data/metadata.js</code> with your blog’s information.</li>
-		<li>(Optional) Edit <code>eleventy.config.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
-		<li>Delete this message from <code>_includes/layouts/home.njk</code>.</li>
-	</ol>
-	<p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
-</div>
-<!-- Stop deleting -->
-
-{{ content | safe }}

_includes/layouts/post.njk

@@ -1,28 +1,36 @@
 ---
 layout: layouts/base.njk
 ---
-{# Only include the syntax highlighter CSS on blog posts #}
-{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
-{%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
-<h1>{{ title }}</h1>
 
-<ul class="post-metadata">
+    {%- set summerizedPost = content | summerizePost %}
-	<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
+		{%- block head %}
+      <meta name="description" content="{{ summerizedPost }}" />
+      <meta property="og:type" content="blog">
+      <meta property="og:title" content="{{ title }}">
+      <meta property="og:url" content="{{ url }}">
+      <meta property="og:site_name" content="{{ metadata.title }}">
+      <meta property="og:description" content="{{ content | summerizePost | nohtml }}">
+      <meta property="og:updated_time" content="{{ date | htmlDateString}}">
+      <meta name="twitter:card" content="summary">
+      <meta name="twitter:title" content="{{ title }}">
+      <meta name="twitter:description" content="{{ content | summerizePost | nohtml }}">
+      <meta name="twitter:site" content="@@TerribleDev">
+      <meta name="twitter:creator" content="@@TerribleDev">
+      <link rel="canonical" href="{{ url }}" />
+		{% endblock %}
+
+<article itemprop="blogPost">
+    <h1 itemprop="headline" class="headline">{{ title }}</h1>
+    <time class="headlineSubtext" itemprop="datePublished" datetime="{{ date | htmlDateString }}">{{ date | readableDate}}</time>
+    {{ content | safe}}
+    {%- if tags | filterTagList %}
+        <div>
+            <span>Tagged In:</span><br />
             {%- for tag in tags | filterTagList %}
-	{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+                <a href="/tag/{{ tag | slugify }}" class="btn block">{{ tag }}</a>
-	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</li>
             {%- endfor %}
-</ul>
+        </div>
+    {%- endif %}
 
-{{ content | safe }}
+</article>
 
-{%- if collections.posts %}
-{%- set previousPost = collections.posts | getPreviousCollectionItem %}
-{%- set nextPost = collections.posts | getNextCollectionItem %}
-{%- if nextPost or previousPost %}
-<ul class="links-nextprev">
-	{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
-	{%- if nextPost %}<li>Next: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
-</ul>
-{%- endif %}
-{%- endif %}

_includes/postSummary.njk

@@ -1,6 +1,6 @@
 <article class="btmRule">
     <h3 itemprop="headline" class="headline"><a href="{{ post.url }}" class="link-unstyled">{{ post.data.title }}</a></h3>
-    <time class="headlineSubtext" itemprop="datePublished" datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate("D") }}</time>
+    <time class="headlineSubtext" itemprop="datePublished" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
     <div itemprop="articleBody">
         {{ post.content | summerizePost | safe }}
     </div>

_includes/postslist.njk

@@ -1,6 +1,5 @@
-{%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
 <ol reversed class="postlist">
-{% for post in postslist | reverse %}
+{% for post in postslist %}
 	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
 		<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
 		<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>

_includes/stockmeta.njk

@@ -0,0 +1,11 @@
+<meta name="description" content="My name is Tommy Parnell. I usually go by TerribleDev on the internets. These are just some of my writings and rants about the software space." />
+<meta property="og:type" content="blog">
+<meta property="og:title" content="{{ metadata.title }}">
+<meta property="og:url" content="https://blog.terrible.dev/">
+<meta property="og:site_name" content="{{ metadata.title }}">
+<meta property="og:description" content="My name is Tommy Parnell. I usually go by TerribleDev on the internets. These are just some of my writings and rants about the software space.">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="{{ metadata.title }}">
+<meta name="twitter:description" content="My name is Tommy Parnell. I usually go by TerribleDev on the internets. These are just some of my writings and rants about the software space.">
+<meta name="twitter:creator" content="@@TerribleDev">
+<meta property="og:image" content="https://www.gravatar.com/avatar/333e3cea32cd17ff2007d131df336061?s=640" />

content/404.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/home.njk
+layout: layouts/base.njk
 permalink: 404.html
 eleventyExcludeFromCollections: true
 ---

content/blog.njk

@@ -1,5 +1,5 @@
 ---
-layout: layouts/home.njk
+layout: layouts/base.njk
 eleventyNavigation:
   key: Archive
   order: 2

content/feed/feed.njk

@@ -1,6 +1,6 @@
 ---
 # Metadata comes from _data/metadata.js
-permalink: /feed/feed.xml
+permalink: /rss.xml
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">
@@ -12,7 +12,6 @@ permalink: /feed/feed.xml
 	<id>{{ metadata.url }}</id>
 	<author>
 		<name>{{ metadata.author.name }}</name>
-		<email>{{ metadata.author.email }}</email>
 	</author>
 	{%- for post in collections.posts | reverse %}
 	{% set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.url) }}{% endset %}

content/index.njk

@@ -1,22 +1,25 @@
 ---
 layout: layouts/base.njk
-eleventyNavigation:
+pagination:
-  key: Home Page
+  data: collections.posts
-  order: 1
+  reverse: true
-numberOfLatestPostsToShow: 3
+  size: 10
+permalink: "/{{ pagination.pageNumber | getPermalinkForHomePage }}"
 ---
-{% set postslist = collections.posts %}
+		{% block head %}
-{% for post in postslist | reverse %}
+        {%- include 'stockmeta.njk' %}
+        <link rel="canonical" href="https://blog.terrible.dev/">
+		{% endblock %}
+
+{% for post in pagination.items %}
 				{% include "postSummary.njk" %}
 {% endfor %}
 	<div class="bottomNavButtons">
-					<a href="{{ previous }}" class="btn">&#8592; Previous Page</a>
+      {% if pagination.href.previous %}
+            <a href="{{ pagination.href.previous }}" class="btn">&#8592; Previous Page</a>
+      {% endif %}
 			<div class="spacer"></div>
-					<a href="{{ next }}" class="btn">Next Page &#8594;</a>
+        {% if pagination.href.next %}
+					<a href="{{ pagination.href.next }}" class="btn">Next Page &#8594;</a>
+        {% endif %}
 	</div>
-
-				{# LD data #}
-
-	{% block head %}
-		<link rel="canonical" href="https://blog.terrible.dev/">
-	{% endblock %}

content/js/swi.js

@@ -3,7 +3,7 @@ if (navigator && navigator.serviceWorker && navigator.serviceWorker.controller)
 } else if (navigator && navigator.serviceWorker) {
 
     //Register the ServiceWorker
-    navigator.serviceWorker.register('/sw.min.js', {
+    navigator.serviceWorker.register('/sw.js', {
         scope: '/'
     }).then(() => {
         console.log('SW');

content/tags-list.njk

@@ -1,12 +1,16 @@
 ---
-permalink: /tags/
+permalink: /all-tags/
-layout: layouts/home.njk
+layout: layouts/base.njk
 ---
 <h1>Tags</h1>
 
+{% block head %}
+    {%- include 'stockmeta.njk' %}
+    <link rel="canonical" href="https://blog.terrible.dev/all-tags/" />
+{% endblock %}
+
 <ul>
 {% for tag in collections.all | getAllTags | filterTagList %}
-	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<a href="/tags/{{ tag | slugify}}" class="btn block">{{ tag }}</a>
-	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
 {% endfor %}
 </ul>

content/tags.njk

@@ -9,14 +9,14 @@ pagination:
     - posts
     - tagList
   addAllPagesToCollections: true
-layout: layouts/home.njk
+layout: layouts/base.njk
 eleventyComputed:
   title: Tagged “{{ tag }}”
-permalink: /tag/{{ tag | slugify }}/
+permalink: /tags/{{ tag | slugify }}/
 ---
-<h1>Tagged “{{ tag }}”</h1>
-
 {% set postslist = collections[ tag ] %}
-{% include "postslist.njk" %}
+{% for post in postslist %}
+				{% include "postSummary.njk" %}
+{% endfor %}
 
-<p>See <a href="/tags/">all tags</a>.</p>
+<p>See <a href="/all-tags/">all tags</a>.</p>

eleventy.config.js

@@ -14,8 +14,7 @@ module.exports = function(eleventyConfig) {
 	// Copy the contents of the `public` folder to the output folder
 	// For example, `./public/css/` ends up in `_site/css/`
 	eleventyConfig.addPassthroughCopy({
-		"./public/": "/",
+		"./wwwroot/": "/",
-		"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css"
 	});
 
 	// Run Eleventy when these files change:
@@ -67,12 +66,23 @@ module.exports = function(eleventyConfig) {
 
 	eleventyConfig.addFilter("summerizePost", post => {
     // get content
-		return post.split('<!-- more -->')[0];
+		const splitted =  post.split('<!-- more -->');
+    if(splitted.length > 1) {
+      return splitted[0];
+    }
+    // return the first paragraph
+    return post.split('\n')[0];
   });
 
-	eleventyConfig.addFilter("getPermalinkForHomePage", post => {
+  eleventyConfig.addFilter("nohtml", content => {
+    // remove all html tags
+    return content.replace(/(<([^>]+)>)/gi, "");
+
+  });
+
+	eleventyConfig.addFilter("getPermalinkForHomePage", pageNumber => {
     // get content
-		return post.split('<!-- more -->')[0];
+		return pageNumber === 0 ? '/' : '/page/' + (pageNumber + 1);
   });
 
 	// Return all the tags used in a collection
@@ -90,18 +100,18 @@ module.exports = function(eleventyConfig) {
 	});
 
 	// Customize Markdown library settings:
-	eleventyConfig.amendLibrary("md", mdLib => {
+	// eleventyConfig.amendLibrary("md", mdLib => {
-		mdLib.use(markdownItAnchor, {
+	// 	mdLib.use(markdownItAnchor, {
-			permalink: markdownItAnchor.permalink.ariaHidden({
+	// 		permalink: markdownItAnchor.permalink.ariaHidden({
-				placement: "after",
+	// 			placement: "after",
-				class: "header-anchor",
+	// 			class: "header-anchor",
-				symbol: "#",
+	// 			symbol: "#",
-				ariaHidden: false,
+	// 			ariaHidden: false,
-			}),
+	// 		}),
-			level: [1,2,3,4],
+	// 		level: [1,2,3,4],
-			slugify: eleventyConfig.getFilter("slugify")
+	// 		slugify: eleventyConfig.getFilter("slugify")
-		});
+	// 	});
-	});
+	// });
 
 	// Features to make your build faster (when you need them)
 
@@ -126,7 +136,7 @@ module.exports = function(eleventyConfig) {
 		],
 
 		// Pre-process *.md files with: (default: `liquid`)
-		markdownTemplateEngine: 'md',
+		markdownTemplateEngine: false,
 
 		// Pre-process *.html files with: (default: `liquid`)
 		htmlTemplateEngine: "njk",

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "eleventy-base-blog",
+	"name": "terribledev-blog",
 	"version": "8.0.0",
 	"description": "A starter repository for a blog web site using the Eleventy site generator.",
 	"scripts": {

public/css/index.css

@@ -1,270 +0,0 @@
-/* Defaults */
-:root {
-	--font-family: -apple-system, system-ui, sans-serif;
-	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
-}
-
-/* Theme colors */
-:root {
-	--color-gray-20: #e0e0e0;
-	--color-gray-50: #C0C0C0;
-	--color-gray-90: #333;
-
-	--background-color: #fff;
-
-	--text-color: var(--color-gray-90);
-	--text-color-link: #082840;
-	--text-color-link-active: #5f2b48;
-	--text-color-link-visited: #17050F;
-
-	--syntax-tab-size: 2;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--color-gray-20: #e0e0e0;
-		--color-gray-50: #C0C0C0;
-		--color-gray-90: #dad8d8;
-
-		/* --text-color is assigned to --color-gray-_ above */
-		--text-color-link: #1493fb;
-		--text-color-link-active: #6969f7;
-		--text-color-link-visited: #a6a6f8;
-
-		--background-color: #15202b;
-	}
-}
-
-
-/* Global stylesheet */
-* {
-	box-sizing: border-box;
-}
-
-html,
-body {
-	padding: 0;
-	margin: 0 auto;
-	font-family: var(--font-family);
-	color: var(--text-color);
-	background-color: var(--background-color);
-}
-html {
-	overflow-y: scroll;
-}
-body {
-	max-width: 40em;
-}
-
-/* https://www.a11yproject.com/posts/how-to-hide-content/ */
-.visually-hidden {
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	height: 1px;
-	overflow: hidden;
-	position: absolute;
-	white-space: nowrap;
-	width: 1px;
-}
-
-p:last-child {
-	margin-bottom: 0;
-}
-p {
-	line-height: 1.5;
-}
-
-li {
-	line-height: 1.5;
-}
-
-a[href] {
-	color: var(--text-color-link);
-}
-a[href]:visited {
-	color: var(--text-color-link-visited);
-}
-a[href]:hover,
-a[href]:active {
-	color: var(--text-color-link-active);
-}
-
-main {
-	padding: 1rem;
-}
-main :first-child {
-	margin-top: 0;
-}
-
-header {
-	border-bottom: 1px dashed var(--color-gray-20);
-}
-header:after {
-	content: "";
-	display: table;
-	clear: both;
-}
-
-.links-nextprev {
-	list-style: none;
-	border-top: 1px dashed var(--color-gray-20);
-	padding: 1em 0;
-}
-
-table {
-	margin: 1em 0;
-}
-table td,
-table th {
-	padding-right: 1em;
-}
-
-pre,
-code {
-	font-family: var(--font-family-monospace);
-}
-pre:not([class*="language-"]) {
-	margin: .5em 0;
-	line-height: 1.375; /* 22px /16 */
-	-moz-tab-size: var(--syntax-tab-size);
-	-o-tab-size: var(--syntax-tab-size);
-	tab-size: var(--syntax-tab-size);
-	-webkit-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-	direction: ltr;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-}
-code {
-	word-break: break-all;
-}
-
-/* Header */
-header {
-	display: flex;
-	gap: 1em .5em;
-	flex-wrap: wrap;
-	align-items: center;
-	padding: 1em;
-}
-.home-link {
-	font-size: 1em; /* 16px /16 */
-	font-weight: 700;
-	margin-right: 2em;
-}
-.home-link:link:not(:hover) {
-	text-decoration: none;
-}
-
-/* Nav */
-.nav {
-	display: flex;
-	padding: 0;
-	margin: 0;
-	list-style: none;
-}
-.nav-item {
-	display: inline-block;
-	margin-right: 1em;
-}
-.nav-item a[href]:not(:hover) {
-	text-decoration: none;
-}
-.nav a[href][aria-current="page"] {
-	text-decoration: underline;
-}
-
-/* Posts list */
-.postlist {
-	list-style: none;
-	padding: 0;
-	padding-left: 1.5rem;
-}
-.postlist-item {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
-	counter-increment: start-from -1;
-	margin-bottom: 1em;
-}
-.postlist-item:before {
-	display: inline-block;
-	pointer-events: none;
-	content: "" counter(start-from, decimal-leading-zero) ". ";
-	line-height: 100%;
-	text-align: right;
-	margin-left: -1.5rem;
-}
-.postlist-date,
-.postlist-item:before {
-	font-size: 0.8125em; /* 13px /16 */
-	color: var(--color-gray-90);
-}
-.postlist-date {
-	word-spacing: -0.5px;
-}
-.postlist-link {
-	font-size: 1.1875em; /* 19px /16 */
-	font-weight: 700;
-	flex-basis: calc(100% - 1.5rem);
-	padding-left: .25em;
-	padding-right: .5em;
-	text-underline-position: from-font;
-	text-underline-offset: 0;
-	text-decoration-thickness: 1px;
-}
-.postlist-item-active .postlist-link {
-	font-weight: bold;
-}
-
-/* Tags */
-.post-tag {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	text-transform: capitalize;
-	font-style: italic;
-}
-.postlist-item > .post-tag {
-	align-self: center;
-}
-
-/* Tags list */
-.post-metadata {
-	display: inline-flex;
-	flex-wrap: wrap;
-	gap: .5em;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.post-metadata time {
-	margin-right: 1em;
-}
-
-/* Direct Links / Markdown Headers */
-.header-anchor {
-	text-decoration: none;
-	font-style: normal;
-	font-size: 1em;
-	margin-left: .1em;
-}
-a[href].header-anchor,
-a[href].header-anchor:visited {
-	color: transparent;
-}
-a[href].header-anchor:focus,
-a[href].header-anchor:hover {
-	text-decoration: underline;
-}
-a[href].header-anchor:focus,
-:hover > a[href].header-anchor {
-	color: #aaa;
-}
-
-h2 + .header-anchor {
-	font-size: 1.5em;
-}

public/css/message-box.css

@@ -1,18 +0,0 @@
-/* Message Box */
-.message-box {
-	--color-message-box: #ffc;
-
-	display: block;
-	background-color: var(--color-message-box);
-	color: var(--color-gray-90);
-	padding: 1em 0.625em; /* 16px 10px /16 */
-}
-.message-box ol {
-	margin-top: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-	.message-box {
-		--color-message-box: #082840;
-	}
-}

public/css/prism-diff.css

@@ -1,45 +0,0 @@
-/*
- * New diff- syntax
- */
-
-pre[class*="language-diff-"] {
-	--eleventy-code-padding: 1.25em;
-	padding-left: var(--eleventy-code-padding);
-	padding-right: var(--eleventy-code-padding);
-}
-.token.deleted {
-	background-color: hsl(0, 51%, 37%);
-	color: inherit;
-}
-.token.inserted {
-	background-color: hsl(126, 31%, 39%);
-	color: inherit;
-}
-
-/* Make the + and - characters unselectable for copy/paste */
-.token.prefix.unchanged,
-.token.prefix.inserted,
-.token.prefix.deleted {
-	-webkit-user-select: none;
-	user-select: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.token.prefix.inserted,
-.token.prefix.deleted {
-	width: var(--eleventy-code-padding);
-	background-color: rgba(0,0,0,.2);
-}
-
-/* Optional: full-width background color */
-.token.inserted:not(.prefix),
-.token.deleted:not(.prefix) {
-	display: block;
-	margin-left: calc(-1 * var(--eleventy-code-padding));
-	margin-right: calc(-1 * var(--eleventy-code-padding));
-	text-decoration: none; /* override del, ins, mark defaults */
-	color: inherit; /* override del, ins, mark defaults */
-}