~uglyduck/uglyduck.srht.site

f51942c37e1b7b67c012dc998c436da76aaf934d — Bradley Taunt 2 years ago 464125a 
new post: Converting files to HTML in Finder
patch browse .tar.gz 
17 files changed, 221 insertions(+), 42 deletions(-)

M _includes/aside.html
M _includes/footer.html
M _includes/promo.html
M _layouts/post.html
M _posts/2021-09-23-safari-extensions-catalina-patcher.md
M _posts/2021-10-15-batch-webp-conversion.md
M _posts/2021-10-28-pihole-cloudflare.md
M _posts/2021-12-03-using-netlify-url-redirects.md
M _posts/2022-01-06-future-os-google.md
A _posts/2022-01-28-macos-convert-to-html.md
A public/images/macos-convert-1.webp
A public/images/macos-convert-2.webp
A public/images/macos-convert-3.webp
A public/images/new-automator-2.webp
A public/images/new-automator.webp
M style.css
M uses.md

M _includes/aside.html => _includes/aside.html +37 -15
@@ 1,17 1,39 @@
<aside>
    <img src="/public/images/my-face-thumbnail.webp" alt="Bradley Taunt">
    {% include navigation.html %}
    <dl>
        <dt>email</dt>
        <dd><a href="mailto:hello@tdarb.org">hello@tdarb.org</a></dd>
        <dt>sourcehut</dt>
        <dd><a href="https://sr.ht/~uglyduck/">~uglyduck</a></dd>
        <dt>github</dt>
        <dd><a href="https://github.com/bradleytaunt">bradleytaunt</a></dd>
        <dt>dribbble</dt>
        <dd><a href="https://dribbble.com/hustlepizza">tdarb</a></dd>
        <dt>donate</dt>
        <dd><a href="https://en.liberapay.com/tdarb">liberapay</a></dd>
    </dl>
    <p><small>Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and vintage electronics. You can learn more <a href="/about">details about me here</a>.</small></p>
    <div class="blob">
        {% include navigation.html %}
    </div>
    <div class="blob">
        <h2>About Me</h2>
        <img src="/public/images/my-face-thumbnail.webp" alt="Bradley Taunt">
        <p><small>Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and vintage electronics. You can learn more <a href="/about">details about me here</a>.</small></p>
    </div>
    <div class="blob">
        <h2>Contact</h2>
        <table style="font-size:90%;">
            <tr>
                <td>email</td>
                <td><a href="mailto:hello@tdarb.org">hello@tdarb.org</a></td>
            </tr>
            <tr>
                <td>sourcehut</td>
                <td><a href="https://sr.ht/~uglyduck/">~uglyduck</a></td>
            </tr>
            <tr>
                <td>github</td>
                <td><a href="https://github.com/bradleytaunt">bradleytaunt</a></td>
            </tr>
            <tr>
                <td>mastodon</td>
                <td><a href="https://fosstodon.org/@tdarb">@tdarb</a></td>
            </tr>
            <tr>
                <td>dribbble</td>
                <td><a href="https://dribbble.com/hustlepizza">tdarb</a></td>
            </tr>
            <tr>
                <td>donate</td>
                <td><a href="https://en.liberapay.com/tdarb">liberapay</a></td>
            </tr>
        </table>
    </div>
</aside>
\ No newline at end of file


M _includes/footer.html => _includes/footer.html +3 -2
@@ 3,11 3,12 @@
    <hr>
    {% include navigation.html %}
    <hr>
    <p style="text-align: center;">This site is part of the Fediverse webring:<br>
    <p>This site is part of the Fediverse webring:<br>
    <a href="https://fediring.net/previous?host=tdarb.org">←</a>&nbsp;<a href="https://fediring.net/">Fediring</a>&nbsp;<a href="https://fediring.net/next?host=tdarb.org">→</a></p>
    <hr>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/tdarb">Liberapay</a>. Hosted through <a href="https://srht.site">Sourcehut Pages</a>. View the <a href="https://git.sr.ht/~uglyduck/uglyduck.srht.site">website source code</a> Maintained with &hearts; for the web. Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
        Hosted through <a href="https://srht.site">Sourcehut Pages</a>.<br>
        Help keep this website ad-free by supporting via <a href="https://en.liberapay.com/tdarb">Liberapay</a>.<br> View the <a href="https://git.sr.ht/~uglyduck/uglyduck.srht.site">website source code</a>. Maintained with &hearts; for the web.<br> Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <br><br>
    <small>This webpage <i>should</i> be <a href="https://validator.w3.org/nu/?doc={{ site.url}}{{ page.url}}">valid XHTML</a></small><br>


M _includes/promo.html => _includes/promo.html +1 -1
@@ 1,5 1,5 @@
<div class="promo">
    <span><strong>Enjoying the content? Consider supporting my work!</strong>&nbsp; My goal is to keep this blog advertisement and tracker free - forever. So, if you're feeling generous, please consider <a href="https://en.liberapay.com/tdarb">donating</a> or using one of the following referral links I <i>personally</i> recommend below:</span>
    <span><strong>Enjoying the content? Consider supporting my work!</strong><hr> My goal is to keep this blog advertisement and tracker free - forever. So, if you're feeling generous, please consider <a href="https://en.liberapay.com/tdarb">donating</a> or using one of the following referral links I <i>personally</i> recommend below:</span>
    <ul>
        <li><a href="https://usefathom.com/ref/DKHJVX">Fathom</a> - Privacy-focused analytics without compromise</li>
        <li><a href="https://divjoy.com/?via=bradley">Divjoy</a> - Create the perfect codebase for your next project</li>


M _layouts/post.html => _layouts/post.html +9 -3
@@ 3,11 3,17 @@

  {% include head.html %}

  <body>
  <body class="post">
    <main>
      <header>
        <h1>{{ page.title }}</h1>
        <span><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time> on <a href="{{ site.url }}">Bradley Taunt's blog</a></span>
        <span class="time-date">
          <span><strong>{{ page.title }}</strong></span>
          <span>
            <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time> on <a href="{{ site.url }}">Bradley Taunt's blog</a>
          </span>
        </span>
        <h1 class="hero">{{ page.title }}</h1>
        <p class="subhead">{{ page.summary }}</p>
        <hr>
      </header>
      <article class="single">


M _posts/2021-09-23-safari-extensions-catalina-patcher.md => _posts/2021-09-23-safari-extensions-catalina-patcher.md +3 -3
@@ 1,10 1,10 @@
---
title: "Enabling Safari Extensions with the macOS Catalina Patcher"
title: "Enabling Safari Extensions with the MacOS Catalina Patcher"
layout: post
summary: "A quick guide on how to activate Safari extensions when using the macOS Catalina Patcher"
summary: "A quick guide on how to activate Safari extensions when using the MacOS Catalina Patcher"
---

*I have an old 2011 MacBook Air that is running the latest version* of macOS Catalina thanks to the very wonderful [Catalina Patcher](http://dosdude1.com/catalina/) by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15.
*I have an old 2011 MacBook Air that is running the latest version* of MacOS Catalina thanks to the very wonderful [Catalina Patcher](http://dosdude1.com/catalina/) by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15.

I ran into a small bug early on though – Safari extensions couldn’t be activated via the preferences menu. Luckily I discovered a very simple fix. My hope is this might help others (as small of a demographic that might be) who run into the same issue with the Catalina Patcher.



M _posts/2021-10-15-batch-webp-conversion.md => _posts/2021-10-15-batch-webp-conversion.md +2 -2
@@ 1,5 1,5 @@
---
title: "Batch Converting Images to webp with macOS Automator"
title: "Batch Converting Images to webp with MacOS Automator"
layout: post
summary: "An easy-to-follow tutorial on setting up batch webp conversion of images on MacOS"
---


@@ 22,7 22,7 @@ You *could* download one of the many native apps from the Mac App Store to do th

## Creating our custom Automator script

1) Open the macOS Automator from the Applications folder
1) Open the MacOS Automator from the Applications folder

2) Select `Quick Option` from the first prompt



M _posts/2021-10-28-pihole-cloudflare.md => _posts/2021-10-28-pihole-cloudflare.md +3 -1
@@ 32,7 32,9 @@ Now you need to navigate to your main pi-hole admin in your browser (most likely
    - *Custom 1 (IPv4)*: 1.1.1.2
    - *Custom 2 (IPv4)*: 1.0.0.2

![pihole cloudflare DNS setup](/public/images/pihole-cloudflare.webp)
<figure>
    <img src="/public/images/pihole-cloudflare.webp" alt="PiHole setup admin dashboard">
</figure>

### Ad-Block & Malware Protection



M _posts/2021-12-03-using-netlify-url-redirects.md => _posts/2021-12-03-using-netlify-url-redirects.md +0 -1
@@ 31,7 31,6 @@ That's it! Now Netlify will dynamically forward all your pre-existing URLs from 

Hopefully this helps others trying to dynamically redirect their domains without the headache.


---

### Footnotes


M _posts/2022-01-06-future-os-google.md => _posts/2022-01-06-future-os-google.md +1 -1
@@ 1,7 1,7 @@
---
title: "Chrome OS Could Become the Future Leader of Personal Computing"
layout: post
summary: "Deep diving into how Chrome OS could have the right idea for the future of computing"
summary: "Deep diving into how Chrome OS could have the right idea for the future of personal computing"
---

**FOSS Enthusiasts**: Warning! This article discusses the use of proprietary software and places it in a *positive* light. You have been warned. No angry emails please...


A _posts/2022-01-28-macos-convert-to-html.md => _posts/2022-01-28-macos-convert-to-html.md +117 -0
@@ 0,0 1,117 @@
---
title: "Convert Files to HTML with MacOS Automator Quick Actions"
layout: post
summary: "An easy-to-follow guide on setting up your own automator quick action to convert documents into pure HTML - directly in MacOS Finder"
---

Since a few people have reached out and thanked me for my previous post [Batch Converting Images to webp with MacOS Automator](/batch-webp-conversion/), I thought I would continue to share more of my own custom Automator Quick Actions. Today's post will cover the ability to convert *any* text-based document into pure HTML.

I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is *cooler*. Our conversion tool:

- Will run directly inside MacOS Finder (right-click actions FTW)
- Can batch convert multiple files at once
- Can convert mixed files types at the same time

And it can do all of this for free on your existing MacOS system. No apps required. So, enough chit-chat, let's get started!

## The Dependencies

Unfortunately, setting things up isn't as simple as clicking a single `Install` button and calling it a day. But don't start to panic! I assure you everything we'll be doing is actually quite easy to breeze through - *trust me*.

Our main requirements will consistent of the following:

- Homebrew
- Pandoc
- Ability to open Terminal

## Installing Homebrew

Homebrew is a simple package manager for MacOS. The beauty of having Homebrew is the flexibility in the future for installing other custom packages. Overall it's just a nice piece of software to have on your machine.

If you have already installed Homebrew in the past, ignore this step and continue down the page. If not, simply open your Terminal and run:

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

Let that finish and you're done! Also feel free to read more about Homebrew on the [official website](https://brew.sh). Knowledge is power!

## Installing Pandoc

The package that is going to be doing all the heavy-lifting for us is [pandoc](https://pandoc.org). Because we have Homebrew on our machine now, installing this package is as simple as opening our Terminal again and running:

```
brew install pandoc
```

Wait for everything to finish and you're done!

{% include promo.html %}

## Our Custom Automator Quick Action

Next you'll want to open the MacOS Automator app and create a new "Quick Action" when given the prompt to do so.

<figure>
    <img src="/public/images/new-automator.webp" alt="Toggle prompt for new automation in MacOS Automator">
    <figcaption>After opening Automator, select "Quick Action" from the menu</figcaption>
</figure>

Now do the following (reference the image further below to make sure your parameters match):

1. Set "Workflow receives current" to <strong>documents</strong> in <strong>any application</strong>
2. In the search bar type in "Run Shell Script"
3. Drag-and-drop the "Run Shell Script" from the left pane into the right pane
4. Set the "Shell" parameter to <strong>/bin/bash</strong>
5. Set "Pass input" as <strong>as arguments</strong>

Once all that is done, simply paste the following in the open text field within the "Run Shell Script" item:

```
for f in "$@"
do
/opt/homebrew/bin/pandoc -o "${f%.*}.html" "$f"
done
```

If you've done everything correctly it should look something like this:

<figure>
    <img src="/public/images/new-automator-2.webp" alt="Automator quick action details for converting to HTML">
    <figcaption>This is what your finished Automator quick action should look like</figcaption>
</figure>

Save this new Quick Action (Name is something like "Convert to HTML" to keep things simple). That's it! Amazing, right?

## Time to Convert

Now it is finally time to see our Quick Action is *action*! Navigate to any document file in a Finder window and follow along.

1. First, right-click on the file you wish to convert. ([Figure 1](#fig-1))
2. In the pop-up container, scroll down and hover over `Quick Actions`.
3. A secondary pop-out will appear. Look for the action `Convert File to HTML` and click it. ([Figure 2](#fig-2))

<figure id="fig-1">
    <img src="/public/images/macos-convert-1.webp" alt="A markdown file in MacOS Finder">
    <figcaption><strong>Figure 1:</strong> Finding and right-clicking on your desired file</figcaption>
</figure>

<figure id="fig-2">
    <img src="/public/images/macos-convert-2.webp" alt="Convert to HTML action selection">
    <figcaption><strong>Figure 2:</strong> From the "Quick Actions" menu, select "Convert to HTML"</figcaption>
</figure>

If everything was set up properly (and depending on the size of the file) you should see your converted HTML file show up right next to your existing document. Time to celebrate!

Don't forget - you can also *batch* convert multiple files and multiple file *types* at once. The possibilities are endless!

<figure>
    <img src="/public/images/macos-convert-3.webp" alt="Finder window showing a Markdown file and an HTML file">
    <figcaption>Our converted document is now available in HTML. Absolutely glorious.</figcaption>
</figure>

## No Limits

Although this article has mainly focused on converting documents to HTML, `pandoc` is so powerful you could do any number of conversions. Re-using these steps above, you have the ability to make as many different conversion quick actions as your heart desires!

Have fun converting!
\ No newline at end of file


A public/images/macos-convert-1.webp => public/images/macos-convert-1.webp +0 -0
A public/images/macos-convert-2.webp => public/images/macos-convert-2.webp +0 -0
A public/images/macos-convert-3.webp => public/images/macos-convert-3.webp +0 -0
A public/images/new-automator-2.webp => public/images/new-automator-2.webp +0 -0
A public/images/new-automator.webp => public/images/new-automator.webp +0 -0
M style.css => style.css +42 -12
@@ 1,27 1,57 @@
*{box-sizing:border-box;}
body{color:#333;font: 16px/1.4 SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;margin:auto;max-width:920px;padding:10px;}
body{color:#333;font: 17px/1.47059 -apple-system, BlinkMacSystemFont, sans-serif;font-synthesis: none;-webkit-font-smoothing: antialiased;font-weight:400;margin:auto;max-width:920px;padding:10px;}
body.post{padding-top:5rem;}
dl{font-size:90%;}
dt{font-weight:bold;}
h1,h2,h3,h4,h5,h6{font-family:SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.2;margin:2.5rem 0 0;}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin:2.5rem 0 0;}
h1{font-size:1.5rem;margin:0;}
h1 + span{display:block;margin:0 0 1rem;}
.hero{font-size: 48px;line-height: 1.08349;font-weight: 700;letter-spacing: -.003em;}
.subhead{font-size: 21px;line-height: 1.19048;font-weight: 500;letter-spacing: .011em;}
.time-date{background:ghostwhite;border-bottom:1px solid gainsboro;display:flex;justify-content:space-between;font-size: 14px;line-height: 1.28577;font-weight: 600;letter-spacing: -.016em;margin:0;padding:15px;position:fixed;width:100%;left:0;top:0;z-index:3;}
.time-date span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;}
.time-date span:last-of-type{color:#6e6e73;font-weight:500;text-align: right;}
p{letter-spacing: -.022em;}
img{max-width:100%;}
pre{background:#f9f9f9;overflow:auto;padding:10px;}
figure{border:1px solid;margin:2rem 0;max-width:800px;padding:10px;text-align:center;}
hr{background:gainsboro;border:0;height:1px;}
pre{background:#f9f9f9;border-radius:8px;overflow:auto;margin:2rem auto;max-width:576px;padding:10px;}
figure{margin:4rem 0;}
figure img{background:#f9f9f9;border-radius:8px;display: block;margin-left:auto;margin-right:auto;}
figcaption{color: #6e6e73;display:block;font-size: 12px;line-height: 1.33337;font-weight: 600;letter-spacing: -.01em;margin-top:1rem;text-align: center;}
code{font-size:14px;}
body.index{display:flex;flex-wrap:wrap;justify-content:space-between;}
body.index main{width:calc(100% - 300px);}
body.index{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:space-between;}
body.index main{width:calc(100% - 380px);}
body.index main article p{margin-bottom:0;}
body.index main article span {display:block;line-height:1.2;}
header + article{margin-top:2rem !important;}
article{margin-bottom:2rem;}
article p {margin-bottom: 0;}
aside{width:280px;}
aside img{border-radius:8px;display:block;margin:1rem auto;max-width:150px;}
.single, section{margin:0 auto;max-width:720px;}
.single .promo{background:aliceblue;border:double;display:block;margin:2rem 0;padding:15px;position:relative;width:100%;}
article hr{margin:2rem auto;}
aside{position:sticky;top:0;width:340px;}
aside .blob{background:ghostwhite;border-radius:8px;margin:1rem 0;padding:20px;}
aside .blob h2{margin-top:0;}
aside .blob p{margin-bottom:0;}
aside img{border-radius:8px;display:block;margin:1rem 0;max-width:150px;}
.single, section{margin:0 auto;max-width:100%;}
.single .promo, .single h1, .single h2, .single h3, .single h4, .single ul, .single ol, .single p, .single figcaption, .single dl,
section h1, section h2, section h3, .section h4, section ul, section ol, section p, section figcaption, section dl {margin-left:auto;margin-right:auto;max-width: 576px;}
.single .promo{background:ghostwhite;border:1px solid purple;border-radius:8px;display:block;margin:2rem auto;padding:20px;position:relative;width:100%;}
.single .promo:before{content:'😎';font-size:42px;position:absolute;right:10px;top:-25px;}
.single .promo hr {margin:0.8rem 0;}
header,footer{width:100%;}
nav{text-align:center;}
footer nav{text-align: left;}
.footnotes{font-size:85%;}
table{width:100%;}
table{border-collapse:collapse;margin:2rem auto;text-align:left;width:100%;}
table tr{border-bottom:1px solid grey;}
table th:last-of-type,
table td:last-of-type {text-align: right;}
@media(max-width:640px){
    body.index main{width:100%;}
    body.post{padding-top:0;}
    .time-date{background:none;border:0;left:auto;margin:1rem 0;padding:0;position:relative;top:auto;}
    .time-date span:first-of-type{display:none;}
    figcaption{text-align:left;}
    .single,section{width: 95%}
    .hero{font-size: 32px;line-height: 1.125;font-weight: 700;letter-spacing: .004em;}
    aside{display:none;}
}


M uses.md => uses.md +3 -1
@@ 7,7 7,9 @@ permalink: /uses/

This page contains a *somewhat* up-to-date listing of all hardware and software that I currently use. Seeing similar pages on other people's personal websites have proved quite valuable to me, so I figured I would do the same!

![My workstation](/public/images/workstation.webp)
<figure>
    <img src="/public/images/workstation.webp" alt="Monitor with MacBook Air, keyboard and mouse">
</figure>

## Hardware