more preparation for styled components

.github/workflows/webmentions.yml

@@ -1,27 +0,0 @@
-name: Fetch Webmentions
-
-on:
-  schedule:
-    - cron: "0 */12 * * *" # run every twelve hours at top of hour
-  workflow_dispatch:
-
-jobs:
-  fetch:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 1
-          lfs: false
-      - name: Get webmentions data
-        run: wget -nv -O data/webmentions.json "https://webmention.io/api/mentions.json?domain=jarv.is&token=$WEBMENTIONS_TOKEN"
-        env:
-          WEBMENTIONS_TOKEN: ${{ secrets.WEBMENTIONS_TOKEN }}
-      - name: Format JSON
-        run: npx prettier --write data/webmentions.json
-      - name: Push changes
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git commit -am "Add new webmentions 🎉" || echo "No new mentions... 😢"
-          git push origin main

components/ContactForm/ContactForm.module.css

@@ -9,14 +9,6 @@
   border-color: var(--light);
 }
 
-textarea.input {
-  height: 12em;
-  min-height: 6em;
-  margin-bottom: 0;
-  line-height: 1.5;
-  resize: vertical;
-}
-
 .input:focus {
   outline: none;
   border-color: var(--link);
@@ -26,6 +18,14 @@ textarea.input {
   border-color: var(--error);
 }
 
+.textarea {
+  height: 12em;
+  min-height: 6em;
+  margin-bottom: 0;
+  line-height: 1.5;
+  resize: vertical;
+}
+
 .markdown_tip {
   font-size: 0.825em;
   line-height: 1.75;
@@ -71,6 +71,7 @@ textarea.input {
 .result_success,
 .result_error {
   font-weight: 600;
+  line-height: 1.5;
 }
 
 .result_success {

components/ContactForm/ContactForm.tsx

@@ -114,7 +114,7 @@ const ContactForm = () => {
             disabled={success}
           />
           <Field
-            className={cx({ input: true, missing: errors.message && touched.message })}
+            className={cx({ input: true, textarea: true, missing: errors.message && touched.message })}
             name="message"
             component="textarea"
             placeholder="Write something..."

components/Content/Content.module.css

@@ -3,6 +3,8 @@
   line-height: 1.7;
 }
 
+/* TODO: These will all be their own components... eventually. */
+
 .content h2,
 .content h3,
 .content h4 {
@@ -50,6 +52,18 @@
   background-color: var(--light);
 }
 
+/* all code */
+.content code {
+  font-size: 0.925em;
+  page-break-inside: avoid;
+  border: 1px solid var(--kinda-light);
+}
+
+/* inline code in paragraphs/elsewhere (single backticks) */
+.content :not(pre) code {
+  padding: 0.1em 0.25em;
+}
+
 /* sub-heading anchor styles */
 .content :global(.h-anchor) {
   margin: 0 0.25em;

components/Figure/Figure.module.css

@@ -11,5 +11,5 @@
 
 /* some figcaptions contain paragraphs, some don't, so reset all of them */
 .caption p {
-  margin: 0;
+  margin: 0 !important;
 }

components/Footer/Footer.module.css

@@ -40,16 +40,7 @@
 
 @media screen and (max-width: 768px) {
   .footer {
-    padding: 1em 1.25em 0;
+    padding: 1em 1.25em;
-
-    /*
-     * Safari iOS menu bar reappears below 44px:
-     * https://www.eventbrite.com/engineering/mobile-safari-why/
-     */
-    padding-bottom: 45px !important;
-
-    /* Allows you to scroll below the viewport; default value is visible */
-    overflow-y: scroll;
   }
 
   /* stack columns on left instead of flexboxing across */

components/Name/Name.module.css

@@ -1,4 +1,4 @@
-.name {
+.link {
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
@@ -6,27 +6,27 @@
   padding-bottom: 0;
 }
 
-.name .selfie {
+.link:hover {
+  color: var(--link);
+}
+
+.selfie {
   width: 50px;
   height: 50px;
   line-height: 0;
   padding: 0;
 }
 
-.name .selfie img {
+.selfie img {
   border: 1px solid var(--light) !important;
   border-radius: 50%;
 }
 
-.name:hover {
+.link:hover .selfie {
-  color: var(--link);
-}
-
-.name:hover .selfie {
   opacity: 0.9;
 }
 
-.name span:last-of-type {
+.name {
   margin: 0 0.6em;
   font-size: 1.2em;
   font-weight: 500;
@@ -34,12 +34,12 @@
 }
 
 @media screen and (max-width: 768px) {
-  .name .selfie {
+  .selfie {
     width: 70px;
     height: 70px;
   }
 
-  .name span:last-of-type {
+  .name {
     display: none;
   }
 }

components/Name/Name.tsx

@@ -8,11 +8,11 @@ import meJpg from "../../public/static/images/me.jpg";
 
 const Name = () => (
   <Link href="/">
-    <a className={styles.name}>
+    <a className={styles.link}>
       <div className={styles.selfie}>
         <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
       </div>
-      <span>Jake Jarvis</span>
+      <span className={styles.name}>Jake Jarvis</span>
     </a>
   </Link>
 );

lib/mdx-components.ts

@@ -3,10 +3,11 @@ import dynamic from "next/dynamic";
 // Bundle these components by default:
 export { default as Image } from "../components/Image/Image";
 export { default as Figure } from "../components/Figure/Figure";
-// `code` is intentionally lowercase here -- replaces `<code>` tag from remark
+
+// These (mostly very small) components are direct replacements for HTML tags generated by remark:
 export { default as code } from "../components/CodeBlock/CodeBlock";
 
-// All of these components are technically passed into all posts, but next/dynamic ensures they're loaded only
+// ...and these components are technically passed into all posts, but next/dynamic ensures they're loaded only
 // when they're referenced in the individual mdx files.
 export const IFrame = dynamic(() => import("../components/IFrame/IFrame"));
 export const Video = dynamic(() => import("../components/Video/Video"));

package.json

@@ -95,7 +95,7 @@
     "eslint-plugin-import": "~2.25.4",
     "eslint-plugin-mdx": "~1.16.0",
     "eslint-plugin-prettier": "~4.0.0",
-    "lint-staged": "^12.2.0",
+    "lint-staged": "^12.2.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "^5.0.2",

pages/contact.tsx

@@ -34,7 +34,7 @@ const Contact = () => (
         <p>
           <LockIcon /> You can grab my public key here:{" "}
           <a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
-            <code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
+            <code className="pubkey">6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
           </a>
           .
         </p>
@@ -49,7 +49,7 @@ const Contact = () => (
         margin: 0 auto;
       }
 
-      .wrapper code {
+      .pubkey {
         background: none;
         border: 0;
         padding: 0;

pages/privacy.tsx

@@ -81,7 +81,7 @@ const Privacy = () => (
         </a>{" "}
         and{" "}
         <a
-          href="https://github.com/jakejarvis/jarv.is/blob/main/components/notes/HitCounter.tsx"
+          href="https://github.com/jakejarvis/jarv.is/blob/main/components/HitCounter/HitCounter.tsx"
           target="_blank"
           rel="noopener noreferrer"
         >

styles/index.css

@@ -27,10 +27,7 @@ a.no-underline {
   transition: none;
 }
 
-/*
+/* make SVG icons relative in size/position to surrounding text */
- * make SVG icons relative to surrounding text:
- * https://github.com/twitter/twemoji#inline-styles
- */
 .icon {
   display: inline-block;
   height: 1.2em;
@@ -38,18 +35,6 @@ a.no-underline {
   vertical-align: -0.2em;
 }
 
-/* all code */
-code {
-  font-size: 0.925em;
-  page-break-inside: avoid;
-  border: 1px solid var(--kinda-light);
-}
-
-/* inline code in paragraphs/elsewhere (single backticks) */
-:not(pre) code {
-  padding: 0.1em 0.25em;
-}
-
 /* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
 @media (prefers-reduced-motion: reduce) {
   *,

yarn.lock

@@ -1565,9 +1565,9 @@
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
 "@types/node@*":
-  version "17.0.9"
+  version "17.0.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.9.tgz#0b7f161afb5b1cc12518d29b2cdc7175d5490628"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab"
-  integrity sha512-5dNBXu/FOER+EXnyah7rn8xlNrfMOQb/qXnw4NQgLkCygKBKhdmF/CA5oXVOKZLBEahw8s2WP9LxIcN/oDDRgQ==
+  integrity sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -2563,9 +2563,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.4.17:
-  version "1.4.47"
+  version "1.4.48"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.47.tgz#5d5535cdbca2b9264abee4d6ea121995e9554bbe"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.48.tgz#1948b5227aa0ca1ed690945eae1adbe9e7904575"
-  integrity sha512-ZHc8i3/cgeCRK/vC7W2htAG6JqUmOUgDNn/f9yY9J8UjfLjwzwOVEt4MWmgJAdvmxyrsR5KIFA/6+kUHGY0eUA==
+  integrity sha512-RT3SEmpv7XUA+tKXrZGudAWLDpa7f8qmhjcLaM6OD/ERxjQ/zAojT8/Vvo0BSzbArkElFZ1WyZ9FuwAYbkdBNA==
 
 email-regex@^5.0.0:
   version "5.0.0"
@@ -3958,10 +3958,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-lint-staged@^12.2.0:
+lint-staged@^12.2.1:
-  version "12.2.0"
+  version "12.2.1"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.0.tgz#6f7298399519efc382a414d36717949714b705c3"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.1.tgz#e37b5a81deaabf5823f43b3aa903a70c15c9d0b3"
-  integrity sha512-TnNciMBhmEqzqM+RvzqqdvrG4TsI8wCDMX1Vg9+rj2Y9uY70Nq84Mb1WOIiwxW9l5tUlCOqtY5La71RM2fSgfA==
+  integrity sha512-VCVcA9C2Vt5HHxSR4EZVZFJcQRJH984CGBeY+cJ/xed4mBd+JidbM/xbKcCq5ASaygAV0iITtdsCTnID7h/1OQ==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.16"
@@ -6170,9 +6170,9 @@ slice-ansi@^5.0.0:
     is-fullwidth-code-point "^4.0.0"
 
 source-map-js@^1.0.1:
-  version "1.0.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map@0.7.3:
   version "0.7.3"