inherentlee/leecat.art
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build last two commits

Browse Source
This commit is contained in:
Lee Cattarin
2026-03-24 10:11:20 -07:00
parent ff9eb09838
commit 21e3dca187
278 changed files with 3912 additions and 3366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
_site/moving-images/index.html
View File

@ -623,6 +623,8 @@ a:active {
a.ha,
span.ha-placeholder {
color: var(--color-pink);
font-size: .8em;
vertical-align: .1em;
}
span.ha-placeholder {
opacity: .55;
@ -1427,20 +1429,20 @@ export { HeadingAnchors }</script>
<p>today I decided to finally clean up the <code>assets/img</code> directory for this site. Since 2022, when I started this project, I've just been adding images directly to that directory with no further segmentation - messy of me, I know! It's gotten unwieldy and I'm starting to get worried about generic names leading to duplicates at some point, particularly for the non-gallery images where I have a tendency to <a href="/stationery-exchange">use</a> <a href="/favorite-git-flag">lots</a> <a href="/trans-networks">of</a> <a href="/no-politics">mushroom</a> <a href="/domain-and-site-setup">images</a>.</p>
<p>so it's time to move them into year-based folders. Let's talk about how I did that. <code>bash</code> away!</p>
<p>(want to <a href="#result">skip right to the completed script?</a>)</p>
<h2 id="find">find</h2>
<h2 id="find"><code>find</code></h2>
<p>let's start with the basics: a list of posts. <code>find</code> gets us everything under a specific directory - in this case, the <code>_posts</code> directory. We can filter out the directories a few different ways, but I piped the <code>find</code> output through a basic <code>grep</code> looking for <code>.md</code> in the filename.</p>
<pre class="language-sh"><code class="language-sh"><span class="token keyword">for</span> <span class="token for-or-select variable">FILE</span> <span class="token keyword">in</span> <span class="token variable"><span class="token variable">$(</span><span class="token function">find</span> _posts <span class="token operator">|</span> <span class="token function">grep</span> .md<span class="token variable">)</span></span>
<span class="token keyword">do</span>
<span class="token comment"># TBD</span>
<span class="token keyword">done</span></code></pre>
<h2 id="grep">grep</h2>
<h2 id="grep"><code>grep</code></h2>
<p><code>grep</code> can also help us get image names with the regex <code>&quot;name:.+jpg|png&quot;</code>. I add <code>name:</code> to the regex because there are <em>very occasionally</em> images that aren't the featured image for the post, and those don't fit the pattern of <code>name: &lt;img&gt;</code>. Since there's so few of those, I ended up handling them manually.</p>
<p>to make <code>grep</code> work with regex, it needs the <code>-E</code> flag.</p>
<pre class="language-sh"><code class="language-sh"><span class="token comment"># gives us</span>
<span class="token comment"># name: &lt;img></span>
<span class="token comment"># note the 4 spaces at the beginning of the line</span>
<span class="token assign-left variable">IMAGE_LINE</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span><span class="token function">cat</span> $FILE <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-E</span> <span class="token string">"name:.+jpg|png$"</span><span class="token variable">)</span></span></code></pre>
<h2 id="cut">cut</h2>
<h2 id="cut"><code>cut</code></h2>
<p>that output gets us the full line of text that includes the image filename. Let's trim out what we actually want.</p>
<p>below, <code>-d</code> sets a delimiter, and <code>-f</code> chooses what field we want to return. Because there's 4 spaces before <code>name</code>, our field index is actually pretty high - <code>cut</code> is creating 4 empty strings.</p>
<pre class="language-sh"><code class="language-sh"><span class="token assign-left variable">IMAGE</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span><span class="token builtin class-name">echo</span> $IMAGE_LINE <span class="token operator">|</span> <span class="token function">cut</span> <span class="token parameter variable">-d</span> <span class="token string">' '</span> <span class="token parameter variable">-f</span> <span class="token number">6</span> -<span class="token variable">)</span></span></code></pre>
@ -1448,7 +1450,7 @@ export { HeadingAnchors }</script>
<pre class="language-sh"><code class="language-sh"><span class="token assign-left variable">IMAGE</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span><span class="token function">cat</span> $FILE <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-E</span> <span class="token string">"name:.+jpg|png$"</span> <span class="token operator">|</span> <span class="token function">cut</span> <span class="token parameter variable">-d</span> <span class="token string">' '</span> <span class="token parameter variable">-f</span> <span class="token number">6</span> -<span class="token variable">)</span></span></code></pre>
<p>with <code>cut</code>, we can also get the year of the post:</p>
<pre class="language-sh"><code class="language-sh"><span class="token assign-left variable">YEAR</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span><span class="token builtin class-name">echo</span> $FILE <span class="token operator">|</span> <span class="token function">cut</span> <span class="token parameter variable">-d</span> <span class="token string">'/'</span> <span class="token parameter variable">-f</span> <span class="token number">2</span> -<span class="token variable">)</span></span></code></pre>
<h2 id="sed">sed</h2>
<h2 id="sed"><code>sed</code></h2>
<p>there's two major things we need to do with the information we've gathered:</p>
<ol>
<li>replace the image filename in-place in the post's markdown file</li>
@ -1457,7 +1459,7 @@ export { HeadingAnchors }</script>
<p>we can do replacement with <code>sed</code>, where our pattern should be something like this: <code>s/$IMAGE/$YEAR\/&amp;\</code> (the <code>&amp;</code> subs in the found string - in this case <code>$IMAGE</code>). We could also use comma separators if we don't want to escape the slash, like <code>s,$IMAGE,$YEAR/&amp;,</code> - I did this for ease of reading.</p>
<p>by default, <code>sed</code> prints to standard output, so we'll tell it to edit in-place instead with <code>-i</code>. Here's our full <code>sed</code> command:</p>
<pre class="language-sh"><code class="language-sh"><span class="token function">sed</span> <span class="token string">"s,<span class="token variable">$IMAGE</span>,<span class="token variable">$YEAR</span>/&amp;,"</span> <span class="token parameter variable">-i</span> <span class="token variable">$FILE</span></code></pre>
<h2 id="mving-and-shaking">mving and shaking</h2>
<h2 id="mving-and-shaking"><code>mv</code>ing and shaking</h2>
<p>(my mom thinks I'm funny.)</p>
<p>now we'll handle moving the image file from its original location into a new directory. let's create our image paths, source and destination:</p>
<pre class="language-sh"><code class="language-sh"><span class="token assign-left variable">IMG_DIR</span><span class="token operator">=</span>assets/img
@ -1538,11 +1540,11 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/handedness-toggle/">
<a class="postlink" href="/redirections/">
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle</h2>
<h2 data-ha-exclude="" id="redirections">redirections</h2>
<ul class="postlist-tags">
<li>software</li>
@ -1552,11 +1554,11 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/comparing-text-editors/">
<a class="postlink" href="/intro-to-wireframing/">
<img src="/img/horsetail.jpg" alt="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
<h2 data-ha-exclude="" id="comparing-text-editors">comparing text editors</h2>
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing</h2>
<ul class="postlist-tags">
<li>software</li>
@ -1566,13 +1568,15 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/an-intro-to-git/">
<a class="postlink" href="/designing-a-bag/">
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
<h2 data-ha-exclude="" id="an-intro-to-git">an intro to git</h2>
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag</h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
@ -1610,6 +1614,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/moving-images/` was built on 2026-03-24T16:54:11.078Z -->
<!-- This page `/moving-images/` was built on 2026-03-24T17:11:02.666Z -->
</body>
</html>