Feb

patrickpatrickpatrick · Mar 11, 2024 · d07d7eb · d07d7eb
1 parent c7009a7
commit d07d7eb
Show file tree

Hide file tree

Showing 8 changed files with 338 additions and 8 deletions.
diff --git a/_includes/layouts/email.njk b/_includes/layouts/email.njk
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="{{ metadata.language }}">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="generator" content="{{ eleventy.generator }}">
+
+		{%- css %}{% include "public/css/index.css" %}{% endcss %}
+
+		<style>{% getBundle "css" %}</style>
+	</head>
+	<body>
+		<a href="#skip" class="visually-hidden">Skip to main content</a>
+
+		<header class="header">
+			<a class="header__title" href="https://patworld.world" class="home-link">
+				<pre aria-hidden="true">
+                         .             o8o            oooo
+                       .o8             `"'            `888
+oo.ooooo.   .oooo.   .o888oo oooo d8b oooo   .ooooo.   888  oooo
+ 888' `88b `P  )88b    888   `888""8P `888  d88' `"Y8  888 .8P'
+ 888   888  .oP"888    888    888      888  888        888888.
+ 888   888 d8(  888    888 .  888      888  888   .o8  888 `88b.
+ 888bod8P' `Y888""8o   "888" d888b    o888o `Y8bod8P' o888o o888o
+ 888
+o888o
+                </pre>
+				<span class="visually-hidden">Patrick's Website</span>
+			</a>
+		</header>
+
+		<main id="skip">
+			{{ content | safe }}
+		</main>
+	</body>
+</html>
diff --git a/_includes/layouts/mailinglist.njk b/_includes/layouts/mailinglist.njk
@@ -0,0 +1,37 @@
+---
+layout: layouts/base.njk
+---
+
+<form class="mailing-list-form">
+  <div class="mailing-list-form__form-title">
+    Sign up to the mailing list
+  </div>
+  <fieldset class="mailing-list-form__fieldset">
+    <div class="mailing-list-form__section">
+      {# <label class="mailing-list-form__label">Email:</label> #}
+      <input placeholder="Email address" class="mailing-list-form__input-text" type="text" name="email" />
+    </div>
+  </fieldset>
+  <div class="mailing-list-form__section">
+    <fieldset class="mailing-list-form__fieldset mailing-list-form__radios">
+      <legend class="mailing-list-form__legend">
+        What posts do you want to get emails about?
+      </legend>
+      <div class="mailing-list-form__radio">
+        <input name="mailing-list" type="radio" value="all" />
+        <label for="all-posts">All posts</label>
+      </div>
+      <div class="mailing-list-form__radio">
+        <input name="mailing-list" type="radio" value="tech" />
+        <label for="tech-posts">Tech posts</label>
+      </div>
+      <div class="mailing-list-form__radio">
+        <input name="mailing-list" type="radio" value="not-tech" />
+        <label for="not-tech-posts">Other posts</label>
+      </div>
+    </fieldset>
+    <button class="mailing-list-form__button" type="submit">
+      Submit
+    </button>
+  </div>
+</form>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -7,22 +7,59 @@ layout: layouts/base.njk
 <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 %}
+  <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 }}
 
+{# <div class="mailing-list-container">
+<form class="mailing-list-form">
+  <div class="mailing-list-form__form-title">
+    Sign up to the mailing list
+  </div>
+  <fieldset class="mailing-list-form__fieldset">
+    <div class="mailing-list-form__section">
+      <label class="mailing-list-form__label">Email:</label>
+      <input class="mailing-list-form__input-text" type="text" name="email" />
+    </div>
+  </fieldset>
+  <div class="mailing-list-form__section">
+    <fieldset class="mailing-list-form__fieldset mailing-list-form__radios">
+      <legend class="mailing-list-form__legend">
+        What posts do you want to get emails about?
+      </legend>
+      <div class="mailing-list-form__radio">
+        <input name="mailing-list" type="radio" value="all" />
+        <label for="all-posts">All posts</label>
+      </div>
+      <div class="mailing-list-form__radio">
+        <input name="mailing-list" type="radio" value="tech" />
+        <label for="tech-posts">Tech posts</label>
+      </div>
+      <div class="mailing-list-form__radio">
+        <input name="mailing-list" type="radio" value="not-tech" />
+        <label for="not-tech-posts">Other posts</label>
+      </div>
+    </fieldset>
+    <button class="mailing-list-form__button" type="submit">
+      Submit
+    </button>
+  </div>
+</form>
+</div>
+ #}
+
 {%- 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 %}
+  {%- 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 %}
+{%- endif %}
diff --git a/content/blog/feb24.md b/content/blog/feb24.md
@@ -0,0 +1,59 @@
+---
+title: Feb 2024
+description: Feb 24 Roundup
+date: 2024-02-29
+---
+
+How do people manage to do weeknotes? Month-notes are hard enough!!
+
+## February Playlist
+
+### Ovlov - I'm Your Dini
+
+Can't believe I'm actually going to see Ovlov (twice!) next month. Literally a dream come true, never thought it'd ever happen (as they rarely tour overseas). [AM](https://ovlov.bandcamp.com/album/am) is basically everything I want in a guitar record. It's been a consistent presence in my life and the guitar tones and solos it contains have served as an effective balm for the standard psychic damage that life has wrought. ["The Great Crocodile"](https://ovlov.bandcamp.com/track/the-great-crocodile-2) has also proved to be indispensable to helping me persevere to the end of countless fifth kilometres.
+
+When I checked out some recent live performances ([that](https://www.youtube.com/watch?v=T4ybvcagSXs&pp=ygUKb3Zsb3YgbGl2ZQ%3D%3D) [rip](https://www.youtube.com/watch?v=XxgB22WNwCs&pp=ygUKb3Zsb3YgbGl2ZQ%3D%3D) btw), I clocked some songs from ["Greatest Hits Vol 2"](https://ovlov.bandcamp.com/album/greatest-hits-vol-ii) were on their setlists. This is compilation of works recorded before the release of AM but I had never thought to listen to it before. Turns out, it contains some of their best songs! "I'm Your Dini" is a highlight for me because it does the fantastic Ovlov thing of the song just blasting off into space on the back of one of the heaviest riffs you've ever heard in your entire life.
+
+[Listen to "I'm Your Dini" here](https://www.youtube.com/watch?v=EthGd6XFdNU)
+
+### Shygirl - tell me
+
+Remember [Music 3000](https://en.wikipedia.org/wiki/Music_3000)? Me too.
+
+[Listen to 'tell me' here](https://www.youtube.com/watch?v=nhhUNE3aJ0E&pp=ygUPc2h5Z2lybCB0ZWxsIG1l)
+
+### Can - Bel Air
+
+[Shout out to the legend Damo Suzuki (RIP)](https://www.rollingstone.com/music/music-features/damo-suzuki-can-tribute-1234964749/).
+
+The news of his passing made me revisit the classic work he did with the iconic Can. I'm fairly well acquainted with [Tago Mago](https://en.wikipedia.org/wiki/Tago_Mago) and [Ege Bamyasi](https://en.wikipedia.org/wiki/Ege_Bamyasi) but for some reason I had never listened to [Future Days](https://en.wikipedia.org/wiki/Future_Days). Turns out, Future Days is my favourite Can album and I feel silly for not having listened to it earlier! Although I know this not to be the case due to the nature of Can albums (the "songs" being choice cuts edited from jams), Future Days feels like a more deliberate work than the other classic Suzuki records. It's def their most accessible record but I think something can be accessible without being "dumbed down". As an entire start-to-finish listen, there are no skips and nowhere does it become "interesting" rather than "captivating". Bel Air, the twenty minute juggernaut that closes the record, is my favourite track. It's a completely memerising listen and I can't believe this album is over 50 years old.
+
+(the main reason this is a shorter playlist this month is because I just listened to 'Future Days' and 'Bel Air' most of February lol)
+
+[Listen to "Bel Air" here](https://www.youtube.com/watch?v=Gj1Ry9upvpA)
+
+### Mk.gee - Alesis
+
+Sorry but I'm very down for a record that sounds like ["Every Little Thing She Does Is Magic"](https://www.youtube.com/watch?v=VaPZDLfj4b0&pp=ygUvZXZlcnkgbGl0dGxlIHRoaW5nIHNoZSBkb2VzIGlzIG1hZ2ljIHRoZSBwb2xpY2U%3D) and the [best Bon Iver album](https://en.wikipedia.org/wiki/22,_A_Million).
+
+[Listen to "Alesis" here](https://www.youtube.com/watch?v=er3C8_FlQi4)
+
+### Baggio - Mangetout
+
+Baggio is a band that I've had the pleasure of seeing on numerous occasions at the [best](https://www.ivyhousenunhead.co.uk/) [venues](https://thecavendisharmsstockwell.co.uk/) [London](https://thegeorgetavern.london/) has to offer. Not only do they keep the much missed tradition of the [indie](https://en.wikipedia.org/wiki/The_Polyphonic_Spree) [ensemble](https://en.wikipedia.org/wiki/Dananananaykroyd) [band](https://en.wikipedia.org/wiki/Fucked_Up) alive (up to 8 members on stage sometimes!), they pick up sonically from where [Purple Mountains](https://en.wikipedia.org/wiki/Purple_Mountains_(album)) (sadly) left off with lyrics about battling the various existential crises one faces in their 20s. It's easy to treat one's past self harshly but listening to the music of Baggio makes one feel that they should be kinder to the person they used to be. Or something.
+
+[Listen to "Mangetout" here](https://www.youtube.com/watch?v=5p1VUvt4vjM&pp=ygUQYmFnZ2lvIG1hbmdldG91dA%3D%3D)
+
+### MGMT - Mother Nature
+
+MGMT made another [beautiful ballad](https://www.youtube.com/watch?v=cB7IAXrCkO8&pp=ygUUbWdtdCBjb25ncmF0dWxhdGlvbnM%3D) [about friendship](https://www.youtube.com/watch?v=OTHHeIAYfuU&pp=ygUTbWUgYW5kIG1pY2hhZWwgbWdtdA%3D%3D)? Of course it rules.
+
+[Listen to "Mother Nature" here](https://www.youtube.com/watch?v=sDzIO5ahGE8&pp=ygUSbWdtdCBtb3RoZXIgbmF0dXJl)
+
+
+## Patchnotes
+
+Thanks to [mjjodea](https://linktr.ee/mjjodea) for pointing me to [Cloudflare](https://www.cloudflare.com/en-gb/), which is an excellent hosting/workers platform and provides a whole lotta free stuff. I'm gonna move the entire site there instead of using Github Pages and a VPS for hosting services.
+
+There's still no mailing list but I've got most of how I'm going to implement it mapped out. Cloudflare makes sending emails straightforward, so it might be ready for next month? 
+
diff --git a/content/mailinglist/confirm-email.njk b/content/mailinglist/confirm-email.njk
@@ -0,0 +1,11 @@
+---
+layout: layouts/email.njk
+---
+
+<h1>Confirm Patworld Mailing List Sign-Up</h1>
+
+<p>To have recieved this email, you (or someone else) requested to join the mailing list for Patworld. If you did request this, please follow this link to confirm the sign-up. Otherwise, please ignore this e-mail.</p>
+
+<p>
+	This email originated from <a href="https://patworld.world">https://patworld.world</a>, thanks for reading!
+</p>
diff --git a/content/mailinglist/confirmed.njk b/content/mailinglist/confirmed.njk
@@ -0,0 +1,7 @@
+---
+layout: layouts/base.njk
+---
+
+<h1>Sign up confirmed!</h1>
+
+<p>You've confirmed your subscription to the mailing list. Thanks!</p>
diff --git a/content/mailinglist/submitted.njk b/content/mailinglist/submitted.njk
@@ -0,0 +1,7 @@
+---
+layout: layouts/base.njk
+---
+
+<h1>Sign up submitted!</h1>
+
+<p>You will need to confirm your subscription via a confirmation email. Please check your inbox!</p>
diff --git a/public/css/index.css b/public/css/index.css
@@ -317,3 +317,139 @@ h3 {
 ul li {
 	font-size: 1.5em;
 }
+
+/* form */
+
+.mailing-list-container {
+	border-color: var(--color-white);
+	border-style: dashed;
+	border-width: 2px 0 2px 0;
+	margin: 0 3em;
+}
+
+.mailing-list-form {
+	border: 1px solid var(--color-white);
+	position: relative;
+	padding: 1em 20px 1em 1em;
+	margin-top: 3em;
+	margin-bottom: 3em;
+}
+
+.mailing-list-form__fieldset {
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
+.mailing-list-form__form-title {
+	background-color: var(--background-color);
+	font-size: 2em;
+	left: 50%;
+	padding: 0 0.5em;
+	position: absolute;
+  text-wrap: nowrap;
+  top: -15px;
+  transform: translateX(-50%);
+}
+
+.mailing-list-form__label {
+	font-size: 2em;
+	padding-right: 10px;
+}
+
+.mailing-list-form__label--hidden {
+	display: none;
+}
+
+.mailing-list-form__section {
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	padding-top: 1em;
+}
+
+.mailing-list-form__radios legend {
+	padding-bottom: 0.5em;
+}
+
+.mailing-list-form__radios {
+	flex-grow: 2;
+	font-size: 1.30em;
+}
+
+.mailing-list-form__button {
+	background-color: var(--background-color);
+	border: 1px solid var(--color-white);
+	color: var(--color-white);
+	font-family: var(--font-family);
+	font-size: 1.5em;
+	padding: 0.5em;
+}
+
+.mailing-list-form__button:focus {
+	outline: 4px solid var(--text-color-link);
+}
+
+.mailing-list-form__button:hover {
+	background-color: var(--color-white);
+	color: var(--background-color);
+	cursor: pointer;
+}
+
+.mailing-list-form__input-text {
+	background-color: var(--background-color);
+	border: 1px solid var(--color-white);
+	color: var(--color-white);
+	font-family: var(--font-family);
+	font-size: 2em;
+	padding: 0.25em;
+	width: 100%;
+}
+
+
+.mailing-list-form__input-text:focus {
+	outline: 4px solid var(--text-color-link);
+}
+
+
+.mailing-list-form__radio {
+	display: inline;
+	position: relative;
+}
+
+input[type="radio"] {
+	cursor: pointer;
+	position: absolute;
+	opacity: 0;
+	z-index: 9999;
+	width: 2em;
+}
+
+input[type="radio"]+label {
+	padding-right: 0.25em;
+	position: relative;
+	margin-left: 30px;
+}
+
+input[type="radio"]:focus+label:before {
+	outline: 4px solid var(--text-color-link);
+}
+
+
+input[type="radio"]:checked+label:before {
+	border: 1px solid var(--background-color);
+	background-color: var(--text-color-link);
+	outline: 1px solid var(--color-white);
+}
+
+input[type="radio"]+label:before {
+	border: 1px solid var(--color-white);
+	border-radius: 30px;
+	content: '';
+	display: inline-block;
+	height: 15px;
+	left: -1.25em;
+	margin-right: 10px;
+	position: absolute;
+	width: 15px;
+}