assume images should be centered for now

2025-07-21 00:21:16 -04:00 · 2022-01-09 23:14:35 -05:00
parent 6436a34c59
commit f56006d627
14 changed files with 22 additions and 126 deletions
--- a/components/embeds/Image.tsx
+++ b/components/embeds/Image.tsx
@@ -8,7 +8,7 @@ import type { ImageProps } from "next/image";
 const CustomImg = (props: ImageProps) => {
  return (
    // the required height and width are part of the props, so they get automatically passed here with {...props}
-    <div className={props.className}>
+    <div style={{ margin: "1em auto", textAlign: "center" }}>
      <Image
        src={props.src}
        layout="intrinsic"
--- a/notes/bernie-sanders-bern-app-data.mdx
+++ b/notes/bernie-sanders-bern-app-data.mdx
@@ -68,21 +68,9 @@ Here's one of the instructional videos provided internally to volunteers:

 ...and a few privacy-related questions about the friend-to-friend feature were answered by campaign staff in a separate closed webinar for volunteers this week:

-<Image
-  className="center"
-  src="/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-1.png"
-  width="400"
-  height="155"
-  alt="Q&A 1"
-/>
+<Image src="/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-1.png" width="400" height="155" alt="Q&A 1" />

-<Image
-  className="center"
-  src="/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-2.png"
-  width="400"
-  height="184"
-  alt="Q&A 2"
-/>
+<Image src="/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-2.png" width="400" height="184" alt="Q&A 2" />

 Defenders of the BERN app have pointed out that the information used is already available from public voter rolls maintained independently by each state. This is true. But these public records have never been tied to a campaign's internal voter files through a tool that's wide open to the entire internet, with incentives to add valuable data that benefits one candidate.

@@ -141,7 +129,7 @@ BERN is taking this to an unprecedented level. Allowing anybody on the internet
 In addition to the points system, it was revealed in the webinar mentioned above that the campaign is planning on giving out shiny rewards based on how many friends one adds, setting expectations at 50+ contacts to reach the "Bernie Super Bundler" tier — whatever that means.

 <Image
-  className="center"
+
 src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-1.png"
 width="700"
 height="451"
@@ -151,7 +139,7 @@ In addition to the points system, it was revealed in the webinar mentioned above
 In the middle of the webinar, the organizer also paused the presentation for _fifteen minutes_ — complete with a countdown clock — and told volunteers to race to add as many of their friends as possible in that time. She announced afterwards that participants added 20 to 40 friends into the app on average, with some allegedly adding close to 100 in fifteen minutes.

 <Image
-  className="center"
+
 src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-2.png"
 width="700"
 height="451"
--- a/notes/cool-bash-tricks-for-your-terminal-dotfiles.mdx
+++ b/notes/cool-bash-tricks-for-your-terminal-dotfiles.mdx
@@ -15,7 +15,6 @@ image: "/static/images/notes/cool-bash-tricks-for-your-terminal-dotfiles/termina
 import Image from "./components/embeds/Image";

 <Image
-  className="center"
  src="/static/images/notes/cool-bash-tricks-for-your-terminal-dotfiles/terminal.png"
  width="320"
  height="284"
--- a/notes/coronavirus-open-source.mdx
+++ b/notes/coronavirus-open-source.mdx
@@ -28,7 +28,6 @@ The maintainers are also [fully transparent](https://covidtracking.com/about-tra
 <figure>
  <a className="no-underline" href="https://covidtracking.com/" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/covidtracking.png"
      width="680"
      height="328"
@@ -46,7 +45,6 @@ _Please_ look up your local hospitals on [#findthemasks](https://findthemasks.co
 <figure>
  <a className="no-underline" href="https://findthemasks.com/" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/findthemasks.png"
      width="600"
      height="295"
@@ -64,7 +62,6 @@ The [GitHub community](https://github.com/flore2003/staythefuckhome/pulls?q=is%3
 <figure>
  <a className="no-underline" href="https://staythefuckhome.com/" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/staythefuckhome.png"
      width="600"
      height="215"
@@ -80,7 +77,6 @@ This collection of various visualizations is fascinating (and sobering) to look
 <figure>
  <a className="no-underline" href="https://covid19dashboards.com/" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/covid19dashboards.png"
      width="580"
      height="442"
@@ -111,7 +107,6 @@ A bit more family-friendly than [#StayTheFuckHome](https://staythefuckhome.com/)
 <figure>
  <a className="no-underline" href="https://stayinghome.club/" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/stayinghome.png"
      width="600"
      height="137"
@@ -164,7 +159,6 @@ The maintainers at the [Neher Lab in Basel, Switzerland](https://neherlab.org/)
 <figure>
  <a className="no-underline" href="https://neherlab.org/covid19/" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/scenarios.png"
      width="740"
      height="433"
@@ -180,7 +174,6 @@ Similar to the [COVID Tracking Project](https://covidtracking.com/) above, the [
 <figure>
  <a className="no-underline" href="https://coronadatascraper.com/#home" target="_blank" rel="noopener noreferrer">
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/coronadatascraper.png"
      width="750"
      height="358"
@@ -211,7 +204,6 @@ To wrap this list up, I thought I'd include [yet another API](https://github.com
    rel="noopener noreferrer"
  >
    <Image
-      className="center"
      src="/static/images/notes/coronavirus-open-source/tracker-api.png"
      width="712"
      height="371"
--- a/notes/dropping-dropbox.mdx
+++ b/notes/dropping-dropbox.mdx
@@ -71,13 +71,7 @@ The infamous [Apple Ecosystem™](https://medium.com/swlh/the-irresistible-lure-

 I've never been a proponent of leaving all your eggs in one basket. But it's hard to ignore the convenience of Apple's streamlined (and [finally](https://www.imore.com/developers-encounter-major-icloud-issues-ios-13-beta) reliable) [**iCloud Drive**](https://www.apple.com/icloud/), which is already installed on all of my devices (and actually cheaper than Dropbox gigabyte-for-gigabyte, at \$9.99/month for 2 TB). In fact, it's nearly invisible on macOS: I can simply save files in my Documents or Desktop folders as I always have and they're uploaded in the background. Git repositories now sync just fine and my files reappeared without a hitch after I recently formatted my Mac.

-<Image
-  className="center"
-  src="/static/images/notes/dropping-dropbox/icloud-drive.png"
-  width="680"
-  height="423"
-  alt="iCloud Drive"
-/>
+<Image src="/static/images/notes/dropping-dropbox/icloud-drive.png" width="680" height="423" alt="iCloud Drive" />

 I still use (and highly recommend) [**Backblaze**](https://www.backblaze.com/) ([referral link](https://secure.backblaze.com/r/00x84e)) to backup my home folder and add a second layer of redundancy to storing all of my most important files on ["someone else's computer."](https://www.zdnet.com/article/stop-saying-the-cloud-is-just-someone-elses-computer-because-its-not/) And as long as I remember to plug in my external SSD every so often, they're also backed up locally via [Time Machine](https://support.apple.com/en-us/HT201250).

--- a/notes/github-actions.mdx
+++ b/notes/github-actions.mdx
@@ -15,7 +15,6 @@ import Image from "./components/embeds/Image";
 import Gist from "./components/embeds/Gist";

 <Image
-  className="center"
  src="/static/images/notes/github-actions/actions-flow.png"
  width="780"
  height="322"
--- a/notes/github-rename-master.mdx
+++ b/notes/github-rename-master.mdx
@@ -62,7 +62,6 @@ You can verify this worked by running `git branch -r`. You should see something
 Setting the default branch remotely is the only step that can't be done on the command line (although you can technically [use the GitHub API](https://github.com/erbridge/github-branch-renamer)). Head to **Settings → Branches** on GitHub to [change the default branch](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/changing-the-base-branch-of-a-pull-request).

 <Image
-  className="center"
  src="/static/images/notes/github-rename-master/github-default.png"
  width="810"
  height="405"
@@ -86,7 +85,6 @@ Do a quick search of your codebase for `master` to manually replace any dead ref
 Pay attention to CI files — `.travis.yml`, `.github/workflows/`, `.circleci/config.yml`, etc. — and make sure there aren't any external services relying on `master` being there. For example, I almost forgot to change the branch [Netlify triggers auto-deploys](https://docs.netlify.com/site-deploys/overview/#branches-and-deploys) from to build this site:

 <Image
-  className="center"
  src="/static/images/notes/github-rename-master/netlify-deploy.png"
  width="720"
  height="460"
--- a/notes/how-to-pull-request-fork-github.mdx
+++ b/notes/how-to-pull-request-fork-github.mdx
@@ -36,13 +36,7 @@ Starting from the very beginning, we'll fork an existing repository to our accou

 Assuming you're using GitHub, this step is easy. Just find the repository you're contributing to and press the Fork button in the upper left. This will create an exact copy of the repository (and all of its branches) under your own username.

-<Image
-  className="center"
-  src="/static/images/notes/how-to-pull-request-fork-github/step1.png"
-  width="865"
-  height="80"
-  alt="Step 1"
-/>
+<Image src="/static/images/notes/how-to-pull-request-fork-github/step1.png" width="865" height="80" alt="Step 1" />

 ## 2. Clone your new fork locally

@@ -52,13 +46,7 @@ GitHub will automatically redirect you to the forked repository under your usern
 git clone git@github.com:jakejarvis/react-native.git
 ```

-<Image
-  className="center"
-  src="/static/images/notes/how-to-pull-request-fork-github/step2.png"
-  width="420"
-  height="208"
-  alt="Step 2"
-/>
+<Image src="/static/images/notes/how-to-pull-request-fork-github/step2.png" width="420" height="208" alt="Step 2" />

 ## 3. Track the original repository as a remote of the fork

@@ -106,21 +94,9 @@ git push -u origin fix-readme-typo

 You're now all ready to submit the improvement you've made to the project's maintainers for approval. Head over to the original repositories Pull Requests tab, and you should see an automatic suggestion from GitHub to create a pull request from your new branch.

-<Image
-  className="center"
-  src="/static/images/notes/how-to-pull-request-fork-github/step7-1.png"
-  width="865"
-  height="75"
-  alt="Step 7.1"
-/>
+<Image src="/static/images/notes/how-to-pull-request-fork-github/step7-1.png" width="865" height="75" alt="Step 7.1" />

-<Image
-  className="center"
-  src="/static/images/notes/how-to-pull-request-fork-github/step7-2.png"
-  width="700"
-  height="354"
-  alt="Step 7.2"
-/>
+<Image src="/static/images/notes/how-to-pull-request-fork-github/step7-2.png" width="700" height="354" alt="Step 7.2" />

 ---

--- a/notes/how-to-shrink-linux-virtual-disk-vmware.mdx
+++ b/notes/how-to-shrink-linux-virtual-disk-vmware.mdx
@@ -84,7 +84,6 @@ VMware on macOS makes this a little tricky, since it packages VMs in what looks
 We need to right click on the .vmwarevm "file," and select **Show Package Contents** to see what's really in there. You should see the actual .VMDK file sitting there — normally we're looking for the plain VMDK file (named _Virtual Disk.vmdk_ by default) without a bunch of numbers after it, but if you have snapshots associated with your VM, this might not be the file we actually want. But run the command below with it anyways, and the output will tell you if you need to use a different file.

 <Image
-  className="center"
  src="/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-1-58-42-pm.png"
  width="680"
  height="572"
--- a/notes/my-first-code.mdx
+++ b/notes/my-first-code.mdx
@@ -20,13 +20,7 @@ import Image from "./components/embeds/Image";
  alt="Awesome First Code on GitHub"
 />

-<Image
-  className="center"
-  src="/static/images/notes/my-first-code/badges.png"
-  width="537"
-  height="36"
-  alt="Code Quality: A for effort"
-/>
+<Image src="/static/images/notes/my-first-code/badges.png" width="537" height="36" alt="Code Quality: A for effort" />

 I recently published my terrible, horrible, no good, very bad [first HTML site](https://jakejarvis.github.io/my-first-website/) and [first PHP project](https://github.com/jakejarvis/jbb#readme) ever and developed a new addiction to Web 1.0 nostalgia, fed by others who were brave enough to do the same.

--- a/notes/security-headers-cloudflare-workers.mdx
+++ b/notes/security-headers-cloudflare-workers.mdx
@@ -31,7 +31,6 @@ In 2019, it's becoming more and more important to harden websites via HTTP respo
 [Cloudflare Workers](https://www.cloudflare.com/products/cloudflare-workers/) are a great feature of [Cloudflare](https://www.cloudflare.com/) that allows you to modify responses on-the-fly between your origin server and the user, similar to [AWS Lambda](https://aws.amazon.com/lambda/) (but much simpler). We'll use a Worker to add the headers.

 <Image
-  className="center"
  src="/static/images/notes/security-headers-cloudflare-workers/cf-workers.png"
  width="650"
  height="325"
--- a/notes/shodan-search-queries.mdx
+++ b/notes/shodan-search-queries.mdx
@@ -61,7 +61,6 @@ The world and its devices are quickly becoming more connected through the shiny
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/billboard3.png"
  width="450"
  height="329"
@@ -75,7 +74,6 @@ The world and its devices are quickly becoming more connected through the shiny
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/7-11.png"
  width="600"
  height="226"
@@ -89,7 +87,6 @@ P372 "ANPR enabled"
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/plate-reader.png"
  width="680"
  height="284"
@@ -152,7 +149,6 @@ Shodan made a pretty sweet [Ship Tracker](https://shiptracker.shodan.io/) that m
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/sailor-vsat.png"
  width="700"
  height="361"
@@ -212,7 +208,6 @@ Secured by default, thankfully, but these 1,700+ machines still [have no busines
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/power-gaugetech.png"
  width="500"
  height="246"
@@ -257,7 +252,6 @@ Secured by default, thankfully, but these 1,700+ machines still [have no busines

 <figure>
  <Image
-    className="center"
    src="/static/images/notes/shodan-search-queries/vnc.png"
    width="500"
    height="375"
@@ -301,13 +295,7 @@ Older versions were insecure by default. [Very scary.](https://krebsonsecurity.c
 "MongoDB Server Information" port:27017 -authentication
 ```

-<Image
-  className="center"
-  src="/static/images/notes/shodan-search-queries/mongo.png"
-  width="500"
-  height="238"
-  alt="Example: MongoDB"
-/>
+<Image src="/static/images/notes/shodan-search-queries/mongo.png" width="500" height="238" alt="Example: MongoDB" />

 ### [Mongo Express](https://github.com/mongo-express/mongo-express) Web GUI [🔎 →](https://www.shodan.io/search?query=%22Set-Cookie%3A+mongo-express%3D%22+%22200+OK%22)

@@ -318,7 +306,6 @@ Like the [infamous phpMyAdmin](https://www.cvedetails.com/vulnerability-list/ven
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/mongo-express.png"
  width="700"
  height="395"
@@ -332,7 +319,6 @@ Like the [infamous phpMyAdmin](https://www.cvedetails.com/vulnerability-list/ven
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/jenkins.png"
  width="700"
  height="225"
@@ -384,7 +370,6 @@ Lantronix password port:30718 -secured
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/citrix.png"
  width="700"
  height="273"
@@ -418,7 +403,6 @@ Telnet Configuration: [🔎 →](https://www.shodan.io/search?query=%22Polycom+C
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/polycom.png"
  width="550"
  height="251"
@@ -452,7 +436,6 @@ HP-ILO-4 !"HP-ILO-4/2.53" !"HP-ILO-4/2.54" !"HP-ILO-4/2.55" !"HP-ILO-4/2.60" !"H
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/owa2007.png"
  width="450"
  height="494"
@@ -466,7 +449,6 @@ HP-ILO-4 !"HP-ILO-4/2.53" !"HP-ILO-4/2.54" !"HP-ILO-4/2.55" !"HP-ILO-4/2.60" !"H
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/owa2010.png"
  width="450"
  height="429"
@@ -480,7 +462,6 @@ HP-ILO-4 !"HP-ILO-4/2.53" !"HP-ILO-4/2.54" !"HP-ILO-4/2.55" !"HP-ILO-4/2.60" !"H
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/owa2013.png"
  width="580"
  height="230"
@@ -530,7 +511,6 @@ Concerning [default network shares of QuickBooks](https://quickbooks.intuit.com/
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/iomega.png"
  width="600"
  height="215"
@@ -544,7 +524,6 @@ Redirecting sencha port:9000
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/buffalo.png"
  width="580"
  height="140"
@@ -558,7 +537,6 @@ Redirecting sencha port:9000
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/logitech.png"
  width="500"
  height="224"
@@ -578,7 +556,6 @@ Redirecting sencha port:9000
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/plexpy.png"
  width="560"
  height="266"
@@ -625,13 +602,7 @@ html:"DVR_H264 ActiveX"
 "Serial Number:" "Built:" "Server: HP HTTP"
 ```

-<Image
-  className="center"
-  src="/static/images/notes/shodan-search-queries/hp.png"
-  width="700"
-  height="272"
-  alt="Example: HP Printers"
-/>
+<Image src="/static/images/notes/shodan-search-queries/hp.png" width="700" height="272" alt="Example: HP Printers" />

 ### Xerox Copiers/Printers [🔎 →](https://www.shodan.io/search?query=ssl%3A%22Xerox+Generic+Root%22)

@@ -640,7 +611,6 @@ ssl:"Xerox Generic Root"
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/xerox.png"
  width="620"
  height="263"
@@ -658,7 +628,6 @@ ssl:"Xerox Generic Root"
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/epson.png"
  width="550"
  height="308"
@@ -676,7 +645,6 @@ ssl:"Xerox Generic Root"
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/canon.png"
  width="550"
  height="195"
@@ -694,7 +662,6 @@ ssl:"Xerox Generic Root"
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/yamaha.png"
  width="550"
  height="349"
@@ -732,7 +699,6 @@ title:"OctoPrint" -title:"Login" http.favicon.hash:1307375944
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/octoprint.png"
  width="700"
  height="335"
@@ -746,7 +712,6 @@ title:"OctoPrint" -title:"Login" http.favicon.hash:1307375944
 ```

 <Image
-  className="center"
  src="/static/images/notes/shodan-search-queries/eth.png"
  width="800"
  height="141"
--- a/pages/license.tsx
+++ b/pages/license.tsx
@@ -37,7 +37,7 @@ const License = () => (
      </p>
      <hr />
      <h2>Creative Commons Attribution 4.0 International Public License</h2>
-      <p className="center">
+      <p style={{ textAlign: "center" }}>
        <a
          className="no-underline"
          href="https://creativecommons.org/licenses/by/4.0/"
--- a/styles/index.css
+++ b/styles/index.css
@@ -57,13 +57,6 @@ pre code {
  tab-size: 2;
 }

-.center {
-  display: block;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 /* sub-heading anchor styles */
 .h-anchor {
  margin: 0 0.25em;