Update post meta to hopefully boost subscriptions etc.

- Bump the 'you can hire me' bit up to the top. - Add subscription info and put it second. Everything else is valuable, too, but should come *after* those first bits given my current goals.
chriskrycho · Oct 26, 2024 · abee321 · abee321
1 parent ca19f09
commit abee321
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 94 deletions.
diff --git a/eleventy/config.ts b/eleventy/config.ts
@@ -1,4 +1,5 @@
 import { env } from 'process';
+import { randomBytes } from 'node:crypto';
 
 import { DateTime } from 'luxon';
 
@@ -213,6 +214,10 @@ function config(config: Config): UserConfig {
       return safe.slice(0, safe.lastIndexOf(' ', 200)) + '…';
    });
 
+   config.addShortcode('randomHash', (env: string | undefined) =>
+      env === 'serve' ? `?v=${randomBytes(8).toString('hex')}` : '',
+   );
+
    config.addShortcode('localeDate', localeDate);
    config.addShortcode('copyright', copyright);
 
@@ -300,6 +305,8 @@ function config(config: Config): UserConfig {
       },
    });
 
+   config.addGlobalData('ENV', process.env.ELEVENTY_RUN_MODE);
+
    return {
       dir: {
          input: 'site',

diff --git a/package.json b/package.json
@@ -57,7 +57,8 @@
    "prettier": {
       "singleQuote": true,
       "printWidth": 90,
-      "trailingComma": "all"
+      "trailingComma": "all",
+      "tabWidth": 3
    },
    "scripts": {
       "build:styles": "gulp all",

diff --git a/site/_includes/base.njk b/site/_includes/base.njk
@@ -10,9 +10,9 @@
       <title>{{title | siteTitle(config) | striptags(true) | safe}}</title>
       <meta name='viewport' content='width=device-width, initial-scale=1'>
 
-      <link rel="stylesheet" href="/styles/style.css">
-      <link rel="stylesheet" href="/styles/fonts.css">
-      <link rel="stylesheet" href="/styles/print.css" media="print">
+      <link rel="stylesheet" href="/styles/style.css{% randomHash ENV %}">
+      <link rel="stylesheet" href="/styles/fonts.css{% randomHash ENV %}">
+      <link rel="stylesheet" href="/styles/print.css{% randomHash ENV %}" media="print">
 
       <meta name="view-transition" content="same-origin" />
 

diff --git a/site/_includes/components/item.njk b/site/_includes/components/item.njk
@@ -39,90 +39,140 @@
 {%- set DATE_FORMAT = 'MMMM d, yyyy' %}
 {%- set TIME_FORMAT = 'HH:mm' %}
 <footer class='post-meta'>
+   <div class='post-meta-section'>
+      <div class='section-label'>About:</div>
+      <div class='section-content'>
+         <p>
+            I’m Chris Krycho—a follower of Christ, a husband, and a dad.</p>
+         </p>
+
+         <p>
+            I help teams with front-end web strategy, TypeScript adoption and
+            conversions, and Rust adoption. <a href="/services/">Hire me to work
+            with you!</a>
+         </p>
+
+         <p>
+            In addition to <a href='/cv/'>software engineering</a>, I am also a
+            <a href='https://music.chriskrycho.com'>composer</a>, a writer and
+            theologian, a <a href='https://www.strava.com/athletes/chriskrycho'>runner
+            and cyclist</a>, and an erstwhile podcaster. <a href="/about">Read
+            more</a>.
+         </p>
+      </div>
+   </div>
+
+   <div class='post-meta-section'>
+      <div class='section-label'>Subscribe:</div>
+      <div class='section-content'>
+         <p>
+           Add the <a href="/feed.xml">feed</a> to your feed reader.
+         </p>
+         <form
+         action="https://buttondown.com/api/emails/embed-subscribe/sympolymathesy"
+         method="post"
+         target="popupwindow"
+         onsubmit="window.open('https://buttondown.com/sympolymathesy', 'popupwindow')"
+         class="embeddable-buttondown-form post-subscribe"
+         >
+         <label for="bd-email" class="post-subscribe__label">Subscribe via email:</label>
+         <input type="email" name="email" id="bd-email" class="post-subscribe__input" />
+         <button type="submit" class="post-subscribe__submit">Subscribe</button>
+         </form>
+      </div>
+   </div>
+
    {% if thanks is defined %}
-   <div class='section-label'>Thanks:</div>
-   <div class='section-content'>
-      {{thanks | safe}}
+   <div class='post-meta-section'>
+      <div class='section-label'>Thanks:</div>
+      <div class='section-content'>
+         {{thanks | safe}}
+      </div>
    </div>
    {% endif %}
 
-   <div class='section-label'>Posted:</div>
-   <div class='section-content'>
-      <p>
-         {% if draft %}
-            {% if started is defined -%}
-            This draft was started on {% localeDate started, DATE_FORMAT %}
-               {%- if updated is defined -%}
-                  , and last updated on {% localeDate updated, DATE_FORMAT %} (you can see the full revision history <a href='{{inputPath | historyLink}}'>here</a>)
+   <div class='post-meta-section'>
+      <div class='section-label'>Posted:</div>
+      <div class='section-content'>
+         <p>
+            {% if draft %}
+               {% if started is defined -%}
+               This draft was started on {% localeDate started, DATE_FORMAT %}
+                  {%- if updated is defined -%}
+                     , and last updated on {% localeDate updated, DATE_FORMAT %} (you can see the full revision history <a href='{{inputPath | historyLink}}'>here</a>)
+                  {%- endif -%}
+                  .
+               {% else %}
+                  {%- if updated is defined -%}
+                     This draft was last updated on {% localeDate updated, DATE_FORMAT %} (you can see the full revision history <a href='{{inputPath | historyLink}}'>here</a>).
+                  {%- endif -%}
                {%- endif -%}
-               .
             {% else %}
+               This entry was {% if updated is defined -%} originally {%- endif %} published in
+               <a href='/{{inputPath | toCollectionUrl(isGhostCollection)}}/'>{{inputPath | toCollectionName(isGhostCollection) | title}}</a>
+               on <span class='dt-published'>{% localeDate date, DATE_FORMAT %}</span>
                {%- if updated is defined -%}
-                  This draft was last updated on {% localeDate updated, DATE_FORMAT %} (you can see the full revision history <a href='{{inputPath | historyLink}}'>here</a>).
+               , and last updated on {% localeDate updated, DATE_FORMAT %} (you can see the full revision history <a href='{{inputPath | historyLink}}'>here</a>)
                {%- endif -%}
-            {%- endif -%}
-         {% else %}
-            This entry was {% if updated is defined -%} originally {%- endif %} published in
-            <a href='/{{inputPath | toCollectionUrl(isGhostCollection)}}/'>{{inputPath | toCollectionName(isGhostCollection) | title}}</a>
-            on <span class='dt-published'>{% localeDate date, DATE_FORMAT %}</span>
-            {%- if updated is defined -%}
-            , and last updated on {% localeDate updated, DATE_FORMAT %} (you can see the full revision history <a href='{{inputPath | historyLink}}'>here</a>)
-            {%- endif -%}
-            {% if started is defined -%}
-            ; it was started on {% localeDate started, DATE_FORMAT %}
-            {%- endif -%}
-            .
-         {% endif %}
-      </p>
+               {% if started is defined -%}
+               ; it was started on {% localeDate started, DATE_FORMAT %}
+               {%- endif -%}
+               .
+            {% endif %}
+         </p>
 
-      {%- if updates -%}
-      <div class='updates'>
-         <p><i>Meaningful changes since creating this page:</i></p>
-         <ul>
-         {%- for update in updates -%}
-         <li>
-            <i>{% localeDate update.at, DATE_FORMAT %}:</i>
-            {{update.changes | safe}}
-         </li>
-         {%- endfor -%}
-         </ul>
-      </div>
-      {%- endif -%}
+         {%- if updates -%}
+         <div class='updates'>
+            <p><i>Meaningful changes since creating this page:</i></p>
+            <ul>
+            {%- for update in updates -%}
+            <li>
+               <i>{% localeDate update.at, DATE_FORMAT %}:</i>
+               {{update.changes | safe}}
+            </li>
+            {%- endfor -%}
+            </ul>
+         </div>
+         {%- endif -%}
 
-      <p>Spotted a typo? <a href='{{inputPath | editLink}}'>Submit a correction!</a></p>
+         <p>Spotted a typo? <a href='{{inputPath | editLink}}'>Submit a correction!</a></p>
+      </div>
    </div>
 
    {%- if related.length > 0 -%}
-   <div class='section-label'>Related:</div>
-   <ul class='section-content'>
-      {%- for item in related %}
-      <li>{{item | inlineMd | safe}}</li>
-      {%- endfor -%}
-   </ul>
+   <div class='post-meta-section'>
+      <div class='section-label'>Related:</div>
+      <ul class='section-content'>
+         {%- for item in related %}
+         <li>{{item | inlineMd | safe}}</li>
+         {%- endfor -%}
+      </ul>
+   </div>
    {%- endif -%}
 
    {%- if tags.length > 0 %}
-   <div class='section-label'>Topics:</div>
-   <ul class='topics section-content'>
-      {%- for tag in tags %}
-      <li class='__topic'><a href='/topics/{{tag | slug}}'>{{tag}}</a></li>
-      {%- endfor -%}
-   </ul>
-   {%- endif %}
-
-   <div class='section-label'>Respond:</div>
-   <div class='section-content'>
-      {{ reply(title, discuss) }}
+   <div class='post-meta-section'>
+      <div class='section-label'>Topics:</div>
+      <ul class='topics section-content'>
+         {%- for tag in tags %}
+         <li class='__topic'><a href='/topics/{{tag | slug}}'>{{tag}}</a></li>
+         {%- endfor -%}
+      </ul>
    </div>
+   {%- endif %}
 
-   <div class='section-label'>About:</div>
-   <div class='section-content'>
-      {% include 'blocks/short-about.njk' %}
+   <div class='post-meta-section'>
+      <div class='section-label'>Respond:</div>
+      <div class='section-content'>
+         {{ reply(title, discuss) }}
+      </div>
    </div>
 
-   <div class='section-label'>Support:</div>
-   <div class='section-content'>
-      {% include 'blocks/sponsor-me.njk' %}
+   <div class='post-meta-section'>
+      <div class='section-label'>Support:</div>
+      <div class='section-content'>
+         {% include 'blocks/sponsor-me.njk' %}
+      </div>
    </div>
 </footer>
 {% endmacro %}
diff --git a/site/_includes/styles/_defaults.scss b/site/_includes/styles/_defaults.scss
@@ -179,3 +179,35 @@ mark {
 ::selection {
    background-color: var(--selection-bg);
 }
+
+input,
+textarea {
+   border: 1px solid var(--main-border);
+   color: var(--fg);
+   background: var(--bg);
+   font-family: var(--sans);
+   font-weight: 300;
+   font-size: 16px; // no zoom on mobile!
+   padding: 0.25em;
+   line-height: var(--line-height);
+
+   &:focus {
+      border-color: var(--blue-3);
+      outline: none;
+   }
+}
+
+button[type='submit'] {
+   border: 1px solid var(--main-border);
+   background: var(--kbd-bg);
+   color: var(--kdb-fg);
+   box-shadow: 1px 1px 0 var(--kbd-shadow);
+   font-family: var(--sans);
+   font-size: 16px;
+   font-weight: bold;
+   line-height: var(--line-height);
+
+   &:active {
+      box-shadow: inset 1px 1px 3px -1px var(--kbd-shadow);
+   }
+}
diff --git a/site/_includes/styles/components/_contact.scss b/site/_includes/styles/components/_contact.scss
@@ -18,35 +18,10 @@
    input,
    textarea {
       grid-column: span 2;
-      border: 1px solid var(--main-border);
-      color: var(--fg);
-      background: var(--bg);
-      font-family: var(--sans);
-      font-weight: 300;
-      font-size: 16px; // no zoom on mobile!
-      padding: 0.25em;
-      line-height: var(--line-height);
-
-      &:focus {
-         border-color: var(--blue-3);
-         outline: none;
-      }
    }
 
    &__submit {
       grid-column: span 2;
-      border: 1px solid var(--main-border);
-      background: var(--kbd-bg);
-      color: var(--kdb-fg);
-      box-shadow: 1px 1px 0 var(--kbd-shadow);
-      font-family: var(--sans);
-      font-size: 16px;
-      font-weight: bold;
-      line-height: var(--line-height);
-
-      &:active {
-         box-shadow: inset 1px 1px 3px -1px var(--kbd-shadow);
-      }
    }
 }
 

diff --git a/site/_includes/styles/components/post-meta.scss b/site/_includes/styles/components/post-meta.scss
@@ -54,6 +54,10 @@
    }
 }
 
+.post-meta-section {
+   display: contents;
+}
+
 .section-label {
    grid-column: 1 / 2;
    align-self: first baseline;

diff --git a/site/index.md b/site/index.md
@@ -7,4 +7,6 @@ summary: {{config.description}}
 
 Hello!
 
-{% include 'blocks/short-about.njk' %}
+I'm Chris Krycho—a follower of Christ, a husband, and a dad. I'm a [software engineer](/cv/) by trade; a theologian and [composer](https://music.chriskrycho.com) by vocation; and a writer, [runner and cyclist](https://www.strava.com/athletes/chriskrycho), and erstwhile podcaster by hobby.
+
+I help teams with front-end web strategy development, TypeScript adoption and conversion, and Rust adoption. [Hire me to work with you!](/services/)
diff --git a/types/eleventy.d.ts b/types/eleventy.d.ts
@@ -158,6 +158,16 @@ export interface EleventyClass {
 }
 
 export interface Config {
+   /**
+      In addition to Global Data Files global data can be added to the Eleventy
+      config object using the `addGlobalData` method. This is especially useful
+      for plugins.
+   
+      The first value of `addGlobalData` is the key that will be available to
+      your templates and the second value is the value of the value returned to
+      the template.
+   */
+   addGlobalData(key: string, value: string | undefined): void;
    dir?: {
       /** Controls the top level directory/file/glob that we’ll use to look for templates. */
       input?: string;