andrzej
/
devlog
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make code blocks always dark

This commit is contained in:
andrzej 2024-11-14 22:34:09 +01:00
parent cddc7e9304
commit 17e481db14
12 changed files with 73 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
content/posts/hard-problem.md
View File

@ -1,7 +1,7 @@
+++
date = '2024-11-13T14:24:21+01:00'
draft = true
title = 'Hard Problem: Invalidating the browser cache'
title = 'Hard Problem? Invalidating the browser cache'
+++
**I had a bit of an issue with my [website](https://demos.ajstepien.xyz) recently.**
@ -47,9 +47,11 @@ Then, `sed -i "s/css?=\w*/css?v=${COMMIT}/g" index.html` does a find and replace
Now, whenever we push a new commit, any CSS imports in `index.html` will be changed to something like this:
```html
<link rel="stylesheet" href="css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b" />
<link rel="stylesheet"
href="css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b"
/>
```
Pretty neat, huh?
There's just one thing bugging me: surely I do actually want the CSS to be cached *sometimes*. Caching exists for a reason, and I don't want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed... Sounds like a topic for another blogpost!
There's just one thing bugging me: surely I do actually want the CSS to be cached *sometimes*. Caching exists for a reason, and I don't want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed... Sounds like a topic for another blogpost...

4
content/posts/permissions-strike-again.md
View File

@ -4,11 +4,9 @@ draft = false
title = 'Permissions Strike Again'
+++
## It's always permissions
Configuring Apache really isn't rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it's one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.
**And it almost always has to do with permissions.**
***And it almost always has to do with permissions.***
So, I'm writing this post both as a means of christening this devlog ([Hi! I'm Andrzej! Hire me!](https://demos.ajstepien.xyz)) and also as a reminder to myself that *the home folder is not executable by default.*

27
public/css/main.css
View File

@ -64,14 +64,15 @@ body {
max-width: 768px;
}
b {
color: var(--rp-love);
strong {
color: var(--rp-rose);
}
i {
color: var(--rp-muted)
em {
color: var(--rp-rose);
}
header {
border-bottom: 1px solid #222;
margin-bottom: 1rem;
@ -85,27 +86,26 @@ footer {
a {
color: var(--rp-foam);
text-decoration: none;
text-decoration: underline dotted;
}
a:visited {
color: var(--rp-pine);
color: var(--rp-subtle);
}
h1 {
color: var(--rp-gold);
/* background-color: var(--rp-overlay); */
background-image: linear-gradient(to bottom, var(--rp-overlay), var(--rp-overlay), var(--rp-base));
background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base));
border-radius: 1rem 1rem 0 0;
padding: 1rem;
text-shadow: 1px 1px 2px black;
}
h2 {
color: var(--rp-gold);
}
code {
background: var(--rp-surface);
color: var(--rp-gold);
padding: 0.3em;
border-radius: 1em;
font-size: 1.2em;
@ -115,10 +115,13 @@ code {
}
}
.chroma>code {
background-color: hsl(247deg, 23%, 15%);
}
.highlight {
padding: 1rem;
background-color: var(--rp-surface);
border-radius: 1rem;
background-color: hsl(247deg, 23%, 15%);
border-radius: 0.7rem;
}

33
public/css/syntax.css
View File

@ -1,34 +1,19 @@
:root {
/* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%);
--rp-surface: hsl(35deg, 100%, 98%);
--rp-overlay: hsl(33deg, 43%, 91%);
}
@media (prefers-color-scheme: dark) {
:root {
/* Rosé Pine */
--rp-base: hsl(249deg, 22%, 12%);
--rp-surface: hsl(247deg, 23%, 15%);
--rp-overlay: hsl(248deg, 25%, 18%);
}
}
/* TODO: map all these hexes to media var */
/* Background */
.bg {
color: #e0def4;
background-color: var(--rp-surface);
background-color: hsl(247deg, 23%, 15%);
}
/* PreWrapper */
.chroma {
color: #e0def4;
background-color: var(--rp-surface);
background-color: hsl(247deg, 23%, 15%);
}
/* Other */
.chroma .x {}
@ -38,7 +23,14 @@
}
/* CodeLine */
.chroma .cl {}
.chroma .cl {
background-color: hsl(247deg, 23%, 15%);
}
.chroma .cl>* {
background-color: hsl(247deg, 23%, 15%);
}
/* LineLink */
.chroma .lnlinks {
@ -91,6 +83,7 @@
/* Line */
.chroma .line {
display: flex;
background-color: hsl(247deg, 23%, 15%);
}
/* Keyword */

4
public/index.html
View File

@ -45,9 +45,9 @@
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p>
<h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2>
<h2 id="its-always-permissions">It&rsquo;s always permissions</h2>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><strong>And it almost always has to do with permissions.</strong></p>
<p><em><strong>And it almost always has to do with permissions.</strong></em></p>
<p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p>
<h2><a href="/posts/post-3/">Post 3</a></h2>
<p>Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.</p>

2
public/index.xml
View File

@ -20,7 +20,7 @@
<link>http://localhost:1313/posts/permissions-strike-again/</link>
<pubDate>Wed, 13 Nov 2024 11:53:13 +0100</pubDate>
<guid>http://localhost:1313/posts/permissions-strike-again/</guid>
<description>&lt;h2 id=&#34;its-always-permissions&#34;&gt;It&amp;rsquo;s always permissions&lt;/h2&gt;&#xA;&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/p&gt;</description>
<description>&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;em&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;&#xA;&lt;p&gt;So, I&amp;rsquo;m writing this post both as a means of christening this devlog (&lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;Hi! I&amp;rsquo;m Andrzej! Hire me!&lt;/a&gt;) and also as a reminder to myself that &lt;em&gt;the home folder is not executable by default.&lt;/em&gt;&lt;/p&gt;</description>
</item>
<item>
<title>Post 3</title>

10
public/posts/hard-problem/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
Hard Problem: Invalidating the browser cache | CODING WITH ANDRZEJ
Hard Problem? Invalidating the browser cache | CODING WITH ANDRZEJ
</title>
<link rel="stylesheet" href="/css/main.css" />
@ -36,7 +36,7 @@
</header>
<main>
<h1>Hard Problem: Invalidating the browser cache</h1>
<h1>Hard Problem? Invalidating the browser cache</h1>
@ -61,9 +61,11 @@
<p><code>COMMIT=&quot;$(git rev-parse HEAD)&quot;</code> gets the commit id from Git and assigns it the variable <code>$COMMIT</code>.</p>
<p>Then, <code>sed -i &quot;s/css?=\w*/css?v=${COMMIT}/g&quot; index.html</code> does a find and replace on <code>index.html</code>. The regular expression <code>css?=\w*</code> matches &lsquo;css?=&rsquo; plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag <code>-i</code> tells sed to edit the file in place. The <code>g</code> tells it to perform the operation on the whole file.</p>
<p>Now, whenever we push a new commit, any CSS imports in <code>index.html</code> will be changed to something like this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b&#34;</span> <span class="p">/&gt;</span>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span>
</span></span><span class="line"><span class="cl"><span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">/&gt;</span>
</span></span></code></pre></div><p>Pretty neat, huh?</p>
<p>There&rsquo;s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don&rsquo;t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed&hellip; Sounds like a topic for another blogpost!</p>
<p>There&rsquo;s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don&rsquo;t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed&hellip; Sounds like a topic for another blogpost&hellip;</p>

4
public/posts/index.html
View File

@ -46,9 +46,9 @@
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p>
<h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2>
<h2 id="its-always-permissions">It&rsquo;s always permissions</h2>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><strong>And it almost always has to do with permissions.</strong></p>
<p><em><strong>And it almost always has to do with permissions.</strong></em></p>
<p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p>
<h2><a href="/posts/post-3/">Post 3</a></h2>
<p>Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.</p>

2
public/posts/index.xml
View File

@ -20,7 +20,7 @@
<link>http://localhost:1313/posts/permissions-strike-again/</link>
<pubDate>Wed, 13 Nov 2024 11:53:13 +0100</pubDate>
<guid>http://localhost:1313/posts/permissions-strike-again/</guid>
<description>&lt;h2 id=&#34;its-always-permissions&#34;&gt;It&amp;rsquo;s always permissions&lt;/h2&gt;&#xA;&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/p&gt;</description>
<description>&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;em&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;&#xA;&lt;p&gt;So, I&amp;rsquo;m writing this post both as a means of christening this devlog (&lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;Hi! I&amp;rsquo;m Andrzej! Hire me!&lt;/a&gt;) and also as a reminder to myself that &lt;em&gt;the home folder is not executable by default.&lt;/em&gt;&lt;/p&gt;</description>
</item>
<item>
<title>Post 3</title>

3
public/posts/permissions-strike-again/index.html
View File

@ -42,9 +42,8 @@
<time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time>
<h2 id="its-always-permissions">It&rsquo;s always permissions</h2>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><strong>And it almost always has to do with permissions.</strong></p>
<p><em><strong>And it almost always has to do with permissions.</strong></em></p>
<p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p>
<p>Please, Andrzej. Please. The next time you&rsquo;re building a website, be it for a client or for yourself, and you find yourself scratching your head, wondering what error you may have made in the <code>.confs</code>, checking the permissions of your symlink again and again, ask yourself: is my symlink pointing to a directory in the home folder? Because Apache can&rsquo;t open the home folder until you change the permissions!</p>
<h2 id="what">What?</h2>

17
themes/cuqui/assets/css/main.css
View File

@ -64,14 +64,15 @@ body {
max-width: 768px;
}
b {
color: var(--rp-love);
strong {
color: var(--rp-rose);
}
i {
color: var(--rp-muted)
em {
color: var(--rp-rose);
}
header {
border-bottom: 1px solid #222;
margin-bottom: 1rem;
@ -85,19 +86,20 @@ footer {
a {
color: var(--rp-foam);
text-decoration: none;
text-decoration: underline dotted;
}
a:visited {
color: var(--rp-pine);
color: var(--rp-subtle);
}
h1 {
color: var(--rp-gold);
/* background-color: var(--rp-overlay); */
background-image: linear-gradient(to bottom, var(--rp-overlay), var(--rp-overlay), var(--rp-base));
background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base));
border-radius: 1rem 1rem 0 0;
padding: 1rem;
text-shadow: 1px 1px 2px black;
}
h2 {
@ -106,6 +108,7 @@ h2 {
code {
background: var(--rp-surface);
color: var(--rp-gold);
padding: 0.3em;
border-radius: 1em;
font-size: 1.2em;

33
themes/cuqui/assets/css/syntax.css
View File

@ -1,34 +1,19 @@
:root {
/* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%);
--rp-surface: hsl(35deg, 100%, 98%);
--rp-overlay: hsl(33deg, 43%, 91%);
}
@media (prefers-color-scheme: dark) {
:root {
/* Rosé Pine */
--rp-base: hsl(249deg, 22%, 12%);
--rp-surface: hsl(247deg, 23%, 15%);
--rp-overlay: hsl(248deg, 25%, 18%);
}
}
/* TODO: map all these hexes to media var */
/* Background */
.bg {
color: #e0def4;
background-color: var(--rp-surface);
background-color: hsl(247deg, 23%, 15%);
}
/* PreWrapper */
.chroma {
color: #e0def4;
background-color: var(--rp-surface);
background-color: hsl(247deg, 23%, 15%);
}
/* Other */
.chroma .x {}
@ -38,7 +23,14 @@
}
/* CodeLine */
.chroma .cl {}
.chroma .cl {
background-color: hsl(247deg, 23%, 15%);
}
.chroma .cl>* {
background-color: hsl(247deg, 23%, 15%);
}
/* LineLink */
.chroma .lnlinks {
@ -91,6 +83,7 @@
/* Line */
.chroma .line {
display: flex;
background-color: hsl(247deg, 23%, 15%);
}
/* Keyword */