octobug template

.github/workflows/eleventy_build.yml

@@ -0,0 +1,20 @@
+name: Eleventy Build
+on: [push]
+
+jobs:
+  build_deploy:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Build
+        uses: TartanLlama/actions-eleventy@master
+        with:
+          install_dependencies: true
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: _site
+          publish_branch: gh-pages
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,4 @@
+_site/
+node_modules/
+package-lock.json
+.cache

README.md

@@ -0,0 +1,47 @@
+## Github repo setup
+
+1. Clone this repo. Make note of the resulting HTTPS URL, it should look something like
+   "https://github.com/${your username}/${the repo name}". You'll be collecting more things in your notes to go along with this.
+
+## GitHub app setup
+
+1. Go to Settings -> at the bottom, select "Developer settings"
+2. Click on "New GitHub App" in the top right corner
+3. Give it a name and URL (these don't really matter, but you'll need to find it by name later). Generate the app.
+4. on the app's "General" page (you should have been sent there after the app was created),
+   make note of the "App ID" near the top of the page in the same place you stored the repo URL.
+5. scroll down to "Private keys" and hit "Generate a private key". It will download a .pem file. Put that somewhere you won't lose it.
+6. CLick on "Permissions & events" in the left sidebar. Scroll down to "Contents" and choose "Access: Read and write". Scroll all the way down and hit Save.
+7. Click on "Install App" in the left sidebar. Choose your account. You should now be on an "installation" page, with a URL like "/settings/installations/${a number}". Make note of the number where you recorded the other secrets; this is your "Installation ID".
+8. On the installation page, you can choose under "Repository access" to give it access to just the repo you set up for this purpose. Hit "Save".
+
+## Private Key preparation
+
+Github provides your App's Private Key as a PKCS#1 format .pem file.
+To authenticate with their REST API, they require your private key as a string in PKCS#8 format. So that's cool.
+
+For now you'll need access to the command line to do this next step; hopefully we can streamline this process eventually, but for now run:
+
+```
+openssl pkcs8 -topk8 -inform PEM -outform PEM -in filename -out filename -nocrypt | awk 1 ORS='\\n'
+```
+
+if you're on macOS you can add ` | pbcopy` at the end to copy the result to your clipboard, otherwise do it manually and save that in the same place you saved the App ID and Installation ID earlier. At this point you should have your App ID, your Installation ID, your Private Key, and your Github repo URL in your notes.
+
+## Github Pages setup
+
+Go to your repo's Settings page and in the left sidebar click on "Pages" under "Code and automation". Select "Deploy from a branch" under "Source", then under "Branch" select "gh-pages" in the dropdown. "/ (root)" should be fine for the directory. Hit "Save".
+
+> [!NOTE]
+> If you don't see that branch listed, the Github Action probably didn't run correctly after you cloned the repo. Go to the repo's Actions tab, find the most recent `Eleventy Build` run, and look for errors. (Hopefully there will be more assistance for you eventually! Sorry!)
+
+at this point Github should start running a Github Pages deploy; if it succeeds it should show you the deployed `github.io` URL. If you're happy with how it looks you can follow GitHub's guidelines for adding a custom domain to your site, or else you can just use the provided subdomain/directory.
+
+## Posting
+
+1. To post, start by adding `/octobug` to the URL of your site and bookmark that page.
+2. You need to configure the API credentials-- this is where the notes you took earlier come in. Enter values for all of the authentication fields based on what you recorded above and hit "Update". This will store the values in your browser's local storage on that subdomain-- this means:
+   a. you'll have to re-enter these values any time you want to post from a new device or if you clear local storage for this subdomain/domain for any reason
+   b. you can post to different blogs without having to log out / back in!
+3. You can also set a post author name. This is mostly a hack right now; I'm hoping to support multiple authors on a single blog at some point and that metadata will theoretically be set via some kind of split credential or come via the git metadata or something like that. But for now you can impersonate whoever you want, create multiple identities, etc.
+4. Once the stuff in the Secrets form has been set up successfully (right now you need to verify that by making a post, but there will be some kind of visual indication on the page in the future), you're ready to start posting! You can ignore the Secrets form and just use the Post form.

TODO.md

@@ -0,0 +1,33 @@
+# NOW
+
+- get github action publishing to github pages
+- get public/octobug files copied into eleventy build
+- test out publishing from the deployed github page
+- move DNS for domain over to start propagation ASAP
+- move secrets setting stuff into separate page linked from post page
+- validate post fields
+- validate secret fields
+
+# MVP
+
+- display name + author name + swatch beats timestamp on all posts
+- full post setup working from any web browser to topposts.net
+- blog layout with paginated full-post feed, tag pages with paginated full-post feeds
+- BASIC layout for "settings" overlay
+- BASIC layout for "post" overlay
+- working image / audio / video posts if written by hand in VSCode similar to motd
+- bring over markdown config (single linebreak) + plugins (embeds for youtube URLs, tweets, etc) from motd config
+- rss/atom/json feeds working the way you'd want them to
+- delete post from web interface
+- edit post from web interface
+- drafts (localstorage only?)
+
+# SOMEDAY
+
+- tighten up posting interface
+- web interface for setting "profile" fields (display name, bio, avatar?)
+- some kind of lightweight redis-like "likes" feed. localstorage hack to send me your name when you hit like
+- document & open-source for other people
+- image upload to S3-like storage (just inserts the correct markup into the post field like Github's drag-and-drop)
+- audio upload to S3-like storage
+- multi-author support? (how to verify yaml frontmatter?)

_data/metadata.js

@@ -0,0 +1,11 @@
+module.exports = {
+	title: "Eleventy Base Blog v8",
+	url: "https://example.com/",
+	language: "en",
+	description: "I am writing about my experiences as a naval navel-gazer.",
+	author: {
+		name: "Your Name Here",
+		email: "[email protected]",
+		url: "https://example.com/about-me/"
+	}
+}

_includes/layouts/base.njk

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="{{ metadata.language }}">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{ title or metadata.title }}</title>
+		<meta name="description" content="{{ description or metadata.description }}">
+
+		{#- Atom and JSON feeds included by default #}
+		<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
+
+		{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
+		{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
+
+		{#-
+		CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
+		1. You can add to them using `{% css %}`
+		2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
+		3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
+		4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
+		#}
+
+		{#- 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 %}
+		{#- Or add from node_modules #}
+		{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
+
+		{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
+		<style>{% getBundle "css" %}</style>
+		{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
+		{#- <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
+	</head>
+	<body>
+		<a href="#skip" class="visually-hidden">Skip to main content</a>
+
+		<header>
+			<a href="/" class="home-link">{{ metadata.title }}</a>
+
+			{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
+			<nav>
+				<h2 class="visually-hidden">Top level navigation menu</h2>
+				<ul class="nav">
+				{%- for entry in collections.all | eleventyNavigation %}
+					<li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
+				{%- endfor %}
+				</ul>
+			</nav>
+		</header>
+
+		<main id="skip">
+			{{ content | safe }}
+		</main>
+
+		<footer></footer>
+
+		<!-- This page `{{ page.url | htmlBaseUrl }}` was built on {% currentBuildDate %} -->
+	</body>
+</html>

_includes/layouts/home.njk

@@ -0,0 +1,16 @@
+---
+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

@@ -0,0 +1,28 @@
+---
+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">
+	<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
+	{%- for tag in tags | filterTagList %}
+	{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</li>
+	{%- endfor %}
+</ul>
+
+{{ content | safe }}
+
+{%- 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/postslist.njk

@@ -0,0 +1,9 @@
+{%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
+<ol reversed class="postlist">
+{% for post in postslist | reverse %}
+	<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>
+	</li>
+{% endfor %}
+</ol>

content/404.md

@@ -0,0 +1,19 @@
+---
+layout: layouts/home.njk
+permalink: 404.html
+eleventyExcludeFromCollections: true
+---
+# Content not found.
+
+Go <a href="/">home</a>.
+
+<!--
+
+Read more: https://www.11ty.dev/docs/quicktips/not-found/
+
+This will work for both GitHub pages and Netlify:
+
+* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
+* https://www.netlify.com/docs/redirects/#custom-404
+
+-->

content/about/index.md

@@ -0,0 +1,9 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: About Me
+  order: 3
+---
+# About Me
+
+I am a person that writes stuff.

content/blog.njk

@@ -0,0 +1,10 @@
+---
+layout: layouts/home.njk
+eleventyNavigation:
+  key: Archive
+  order: 2
+---
+<h1>Archive</h1>
+
+{% set postslist = collections.posts %}
+{% include "postslist.njk" %}

content/blog/blog.11tydata.js

@@ -0,0 +1,6 @@
+module.exports = {
+	tags: [
+		"posts"
+	],
+	"layout": "layouts/post.njk",
+};

content/blog/fifthpost.md

@@ -0,0 +1,6 @@
+---
+title: This is a fifth post (draft)
+date: 2023-01-23
+draft: true
+---
+This is a draft post

content/blog/firstpost.md

@@ -0,0 +1,26 @@
+---
+title: This is my first post.
+description: This is a post on My Blog about agile frameworks.
+date: 2018-05-01
+tags:
+  - another tag
+---
+Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+
+## Section Header
+
+Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+
+```diff-js
+ // this is a command
+ function myCommand() {
++  let counter = 0;
+-  let counter = 1;
+   counter++;
+ }
+
+ // Test with a line break above this line.
+ console.log('Test');
+```

content/blog/fourthpost/fourthpost.md

@@ -0,0 +1,16 @@
+---
+title: This is my fourth post!
+description: This is a post on My Blog about touchpoints and circling wagons.
+date: 2018-09-30
+tags: second tag
+---
+Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+
+{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+
+## Section Header
+
+Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+

content/blog/secondpost.md

@@ -0,0 +1,17 @@
+---
+title: This is my second post with a much longer title.
+description: This is a post on My Blog about leveraging agile frameworks.
+date: 2018-07-04
+tags:
+  - number 2
+---
+Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+## Section Header
+
+<a href="/blog/firstpost/">First post</a>
+<a href="/blog/thirdpost/">Third post</a>
+
+Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+
+Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.