more preparation for styled components

2025-04-26 13:18:26 -04:00 · 2022-01-19 11:00:28 -05:00 · 2022-01-19 11:00:28 -05:00 · 171bdd65b6
commit 171bdd65b6
parent caac9b905a
15 changed files with 60 additions and 271 deletions
--- a/.github/workflows/webmentions.yml
+++ b/.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
--- a/components/ContactForm/ContactForm.module.css
+++ b/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 {
--- a/components/ContactForm/ContactForm.tsx
+++ b/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..."
--- a/components/Content/Content.module.css
+++ b/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;
--- a/components/Figure/Figure.module.css
+++ b/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;
 }
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@ -40,16 +40,7 @@

@media screen and (max-width: 768px) {
  .footer {
-    padding: 1em 1.25em 0;
-
-    /*
-     * 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;
+    padding: 1em 1.25em;
  }

  /* stack columns on left instead of flexboxing across */
--- a/components/Name/Name.module.css
+++ b/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 {
-  color: var(--link);
-}
-
-.name:hover .selfie {
+.link: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;
  }
 }
--- a/components/Name/Name.tsx
+++ b/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>
 );
--- a/data/webmentions.json
+++ b/data/webmentions.json
--- a/lib/mdx-components.ts
+++ b/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"));
--- a/package.json
+++ b/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",
--- a/pages/contact.tsx
+++ b/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;
--- a/pages/privacy.tsx
+++ b/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"
        >
--- a/styles/index.css
+++ b/styles/index.css
@ -27,10 +27,7 @@ a.no-underline {
  transition: none;
 }

-/*
- * make SVG icons relative to surrounding text:
- * https://github.com/twitter/twemoji#inline-styles
- */
+/* make SVG icons relative in size/position to surrounding text */
 .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) {
  *,
--- a/yarn.lock
+++ b/yarn.lock
@ -1565,9 +1565,9 @@
  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==

 "@types/node@*":
-  version "17.0.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.9.tgz#0b7f161afb5b1cc12518d29b2cdc7175d5490628"
-  integrity sha512-5dNBXu/FOER+EXnyah7rn8xlNrfMOQb/qXnw4NQgLkCygKBKhdmF/CA5oXVOKZLBEahw8s2WP9LxIcN/oDDRgQ==
+  version "17.0.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab"
+  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"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.47.tgz#5d5535cdbca2b9264abee4d6ea121995e9554bbe"
-  integrity sha512-ZHc8i3/cgeCRK/vC7W2htAG6JqUmOUgDNn/f9yY9J8UjfLjwzwOVEt4MWmgJAdvmxyrsR5KIFA/6+kUHGY0eUA==
+  version "1.4.48"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.48.tgz#1948b5227aa0ca1ed690945eae1adbe9e7904575"
+  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:
-  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.0.tgz#6f7298399519efc382a414d36717949714b705c3"
-  integrity sha512-TnNciMBhmEqzqM+RvzqqdvrG4TsI8wCDMX1Vg9+rj2Y9uY70Nq84Mb1WOIiwxW9l5tUlCOqtY5La71RM2fSgfA==
+lint-staged@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.1.tgz#e37b5a81deaabf5823f43b3aa903a70c15c9d0b3"
+  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"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
-  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

 source-map@0.7.3:
  version "0.7.3"