joeac/joeac.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

style improvements, block-comments

Browse Source
This commit is contained in:
Joe Carstairs
2025-07-04 22:02:46 +01:00
parent c9161a750c
commit c510415b64
6 changed files with 1318 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.editorconfig
View File

@@ -1,4 +1,7 @@
root = true
[*]
indent_size = 2
[*.{md,markdown,mdx}]
max_line_length = 80

1014
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -8,6 +8,7 @@
"astro": "cd website && astro"
},
"dependencies": {
"@astrojs/mdx": "^4.3.0",
"@astrojs/rss": "^4.0.10",
"@astrojs/sitemap": "^3.2.1",
"astro": "^5.1.1",

3
website/astro.config.mjs
View File

@@ -1,9 +1,10 @@
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config
export default defineConfig({
site: 'https://joeac.net',
integrations: [sitemap()],
integrations: [mdx(), sitemap()],
});

137
website/public/css/base.css
View File

@@ -69,14 +69,15 @@ body {
line-height: 1.5;
/* Geometric Humanist stack from https://modernfontstacks.com */
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
sans-serif;
}
small {
font-size: var(--font-size-sm);
}
:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol) {
:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol, blockquote) {
margin-block-start: var(--spacing-block-sm);
}
@@ -99,15 +100,15 @@ img {
height: auto;
}
@media (min-width: 48rem) {
@media (min-width: 60rem) {
body {
display: grid;
grid-template-columns:
[media-start]
[grid-start media-start]
var(--grid-margin-inline)
[content-start]
[media-end content-start]
minmax(var(--grid-max-content-width), auto)
[content-end];
[content-end grid-end];
column-gap: var(--spacing-block-sm);
max-width: var(--grid-total-width);
@@ -115,22 +116,26 @@ img {
--grid-margin-inline: 6rem;
--grid-total-width: 48rem;
--grid-max-content-width: calc(
var(--grid-total-width)
- var(--body-margin-inline-start)
- var(--grid-margin-inline)
- var(--spacing-block-sm)
- var(--grid-margin-inline)
var(--grid-total-width) - var(--body-margin-inline-start) -
var(--grid-margin-inline) - var(--spacing-block-sm) -
var(--grid-margin-inline)
);
}
:is(main, article, nav) {
display: grid;
grid-column: media-start / content-end;
grid-column: grid;
grid-template-columns: subgrid;
}
:is(section, header, aside) {
grid-column: content-start / content-end;
> :is(section, header, aside) {
display: grid;
grid-template-columns: subgrid;
grid-column: grid;
> :not(.not-grid-content) {
grid-column: content;
}
}
}
:is(h1, h2, h3, h4, h5, h6) {
@@ -138,6 +143,22 @@ img {
}
}
@media (min-width: 80rem) {
body {
grid-template-columns:
[grid-start media-start]
var(--grid-margin-inline)
[media-end content-start]
minmax(auto, var(--grid-max-content-width))
[content-end margin-start]
minmax(auto, var(--grid-max-content-width))
[margin-end grid-end];
--grid-total-width: 80rem;
--grid-max-content-width: 36rem;
}
}
/** Headings */
h1 {
@@ -152,7 +173,10 @@ h2 {
margin-block-start: var(--spacing-block-xl);
}
h3, h4, h5, h6 {
h3,
h4,
h5,
h6 {
font-size: var(--font-size-md);
font-weight: 600;
margin-block-start: var(--spacing-block-lg);
@@ -286,3 +310,84 @@ pre code {
border-radius: none;
padding: none;
}
/* verse */
.verse {
span {
display: block;
}
}
.verse--hanging-indents {
span + span:not(.not-hanging) {
margin-inline-start: var(--spacing-inline-md);
}
}
/* block-comment */
block-comment {
display: grid;
grid-template-columns: subgrid;
grid-column: grid;
> * {
grid-column: content;
}
> blockquote:last-of-type {
padding-block: var(--spacing-block-sm);
padding-inline: var(--spacing-inline-md);
overflow-y: scroll;
border: 2px solid var(--colour-primary-fg);
--colour-scroll-shadow: color-mix(
in srgb,
var(--colour-primary-fg),
transparent 20%
);
background:
linear-gradient(var(--colour-primary-bg) 30%, transparent) center top,
linear-gradient(transparent, var(--colour-primary-bg) 70%) center bottom,
radial-gradient(
farthest-side at 50% 0,
var(--colour-scroll-shadow),
transparent
)
center top,
radial-gradient(
farthest-side at 50% 100%,
var(--colour-scroll-shadow),
transparent
)
center bottom;
background-repeat: no-repeat;
background-size:
100% 2rem,
100% 2rem,
100% 1rem,
100% 1rem;
background-attachment: local, local, scroll, scroll;
> :first-child {
margin-block-start: 0;
}
}
}
@media (min-width: 80rem) {
block-comment {
align-items: center;
> blockquote:last-of-type {
grid-column: margin;
max-height: 67vh;
}
}
}
/* utilities */
:is(
.para-spacing-tight:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol),
.para-spacing-tight :is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol)
) {
margin-block-start: var(--spacing-block-xs);
}

169
website/src/content/blog/2025/07/03/ps118.md → website/src/content/blog/2025/07/03/ps118.mdx
View File

@@ -15,7 +15,7 @@ and sixty quotes and allusions to Psalm 118 in the New Testament. It has been
frequently set and re-set to music, memorised, sung, interpreted and
re-interpreted.
But why should we care about an old song and its ensemble of interpreations? At
But why should we care about an old song and its ensemble of interpretations? At
least part of the answer that its long history of usage includes another
Biblical text which urgently appeals to us today: the Gospel of Matthew.
@@ -31,12 +31,88 @@ page on what the psalm actually says.
The psalm features four characters: a hero, a congregation, some enemies, and
the Lord.
The hero narrates psalm's central block, from verse 5 to verse 21. He is a
<block-comment class="not-grid-content">
The hero narrates the psalm's central block, from verse 5 to verse 21. He is a
warrior hero: he 'cuts off' his enemies. He is nearly defeated, but is
eventually victorious, and ascribes his victory to the Lord. He then approaches
the 'gates through which the righteous shall enter', and appeals to go through
so that he can praise the Lord there.
<blockquote class="verse verse--hanging-indents para-spacing-tight">
<p>
<span>When hard pressed, I cried to the Lord;</span>
<span>he brought me into a spacious place.</span>
</p>
<p>
<span>The Lord is with me; I will not be afraid.</span>
<span>What can mere mortals do to me?</span>
</p>
<p>
<span>The Lord is with me; he is my helper.</span>
<span>I look in triumph on my enemies.</span>
</p>
<p>
<span>It is better to take refuge in the Lord</span>
<span>than to trust in humans.</span>
</p>
<p>
<span>It is better to take refuge in the Lord</span>
<span>than to trust in princes.</span>
</p>
<p>
<span>All the nations surrounded me,</span>
<span>but in the name of the Lord I cut them down.</span>
</p>
<p>
<span>They surrounded me on every side,</span>
<span>but in the name of the Lord I cut them down.</span>
</p>
<p>
<span>They swarmed around me like bees,</span>
<span>but they were consumed as quickly as burning thorns;</span>
<span>in the name of the Lord I cut them down.</span>
</p>
<p>
<span>I was pushed back and about to fall,</span>
<span>but the Lord helped me.</span>
</p>
<p>
<span>The Lord is my strength and my defense;</span>
<span>he has become my salvation.</span>
</p>
<p>
<span>Shouts of joy and victory</span>
<span>resound in the tents of the righteous:</span>
</p>
<p>
<span>“The Lord’s right hand has done mighty things!</span>
<span>The Lord’s right hand is lifted high;</span>
<span>the Lord’s right hand has done mighty things!”</span>
</p>
<p>
<span>I will not die but live,</span>
<span>and will proclaim what the Lord has done.</span>
</p>
<p>
<span>The Lord has chastened me severely,</span>
<span>but he has not given me over to death.</span>
</p>
<p>
<span>Open for me the gates of the righteous;</span>
<span>I will enter and give thanks to the Lord.</span>
</p>
<p>
<span>This is the gate of the Lord</span>
<span>through which the righteous may enter.</span>
</p>
<p>
<span>I will give you thanks, for you answered me;</span>
<span>you have become my salvation.</span>
</p>
</blockquote>
</block-comment>
<block-comment class="not-grid-content">
Having heard the hero's account, the final section is dominated by the
congregation. They thank the Lord for his saving work, which they describe thus:
'the stone the builders rejected has become the chief cornerstone.' This implies
@@ -45,6 +121,38 @@ show their praise by bringing a sacrifice bound with branches up to the altar,
and finally the psalm is book-ended by repetition of the opening motif: 'give
thanks to the Lord, for he is good, for his mercy endures forever!'
<blockquote class="verse verse--hanging-indents para-spacing-tight">
<p>
<span>The stone the builders rejected</span>
<span>has become the cornerstone;</span>
</p>
<p>
<span>the Lord has done this,</span>
<span>and it is marvelous in our eyes.</span>
</p>
<p>
<span>The Lord has done it this very day;</span>
<span>let us rejoice today and be glad.</span>
</p>
<p>
<span>Lord, save us!</span>
<span>Lord, grant us success!</span>
</p>
<p>
<span>Blessed is he who comes in the name of the Lord.</span>
<span>From the house of the Lord we bless you.</span>
</p>
<p>
<span>The Lord is God,</span>
<span>and he has made his light shine on us.</span>
</p>
<p>
<span>With boughs in hand, join in the festal procession</span>
<span>up to the horns of the altar.</span>
</p>
</blockquote>
</block-comment>
There is potentially a fifth character, the 'builders' who rejected the stone.
Interpreters often identify these 'builders' either with the enemies or with the
congregation, though not always. The text doesn't say.
@@ -66,6 +174,7 @@ most popular Jewish interpretations.
The first is Moses. Psalm 118 lays on thick the references to the Song of the
Sea in Ex 15.
<block-comment class="not-grid-content">
The central line, 'the Lord is my strength and song, he has become my
salvation!' is a direct quote from Ex 15:2. Like Ex 15, the psalm uses the
divine name frequently. Not only that, but the psalm, like Ex 15, prefers the
@@ -74,6 +183,36 @@ relatively unusual form YH rather than the more common YHWH. The psalm echoes Ex
chosen hero being hard-pressed by foreign nations and enjoying the Lord's
'salvation', and by the hero's response, 'praising' and 'exalting' the Lord.
<blockquote class="verse verse--hanging-indents para-spacing-tight">
<p>
<span>The Lord is my strength and my defense;</span>
<span>he has become my salvation.</span>
<span class="not-hanging">He is my God, and I will praise him,</span>
<span>my father’s God, and I will exalt him.</span>
</p>
<p>
<span>The Lord is a warrior;</span>
<span>the Lord is his name.</span>
</p>
<p>
<span>Pharaoh’s chariots and his army</span>
<span>he has hurled into the sea.</span>
<span class="not-hanging">The best of Pharaoh’s officers</span>
<span>are drowned in the Red Sea.</span>
</p>
<p>
<span>The deep waters have covered them;</span>
<span>they sank to the depths like a stone.</span>
</p>
<p>
<span>Your right hand, Lord,</span>
<span>was majestic in power.</span>
<span class="not-hanging">Your right hand, Lord,</span>
<span>shattered the enemy.</span>
</p>
</blockquote>
</block-comment>
In short, the psalm is absolutely reeking with references to the Song of the
Sea, Moses' classic number-1 hit. No ancient Jew, for whom the psalm was
originally written, could have failed to smell it.
@@ -140,6 +279,7 @@ didn't refer to Scripture arbitrarily, but they subverted shared interpretations
in order to tell a new story. The cleverest instance of this is in the Gospel of
Matthew.
<block-comment class="not-grid-content">
Matthew first gets his reader tuned in to Psalm 118 as Jesus enters Jerusalem on
the back of a colt. Matthew quotes the crowds quoting Psalm 118, shouting
'Hosanna to the son of David! Blessed is he who comes in the name of the Lord!'
@@ -148,14 +288,37 @@ prophecy of Zechariah: Jesus is the coming king who will fulfil God's promises.
The crowd also wave him in with branches, typical of Sukkoth celebrations and a
reference to Ps 118:27.
<blockquote>
A very large crowd spread their cloaks on the road, while others cut branches from the trees and spread them on the road. The crowds that went ahead of him and those that followed shouted, 'Hosanna to the Son of David!' 'Blessed is he who comes in the name of the Lord!' 'Hosanna in the highest heaven!'
</blockquote>
</block-comment>
So now we know Jesus is the returning king, we're expecting his imminent victory
over his enemies, right? That's what Psalm 118, and its traditional Mosaic and
Davidic interpretations, suggests, and so it's clearly what Matthew wants us to
think. But that's when things take a sudden turn.
<block-comment class="not-grid-content">
Immediately after this, Jesus tells the Parable of the Tenants. He implies that
the well-educated, respectable religious leaders are complicit in murder and
enemies of God. It's a shocking teaching, and it doesn't go down well.
enemies of God. It's a shocking teaching, and it doesn't go down well. Perplexingly,
Jesus quotes Psalm 118 again in the midst of this teaching.
<blockquote>
Jesus said to them, 'Have you never read in the Scriptures:
<p class="verse verse--hanging-indents">
<span>"The stone the builders rejected</span>
<span>has become the cornerstone;</span>
<span class="not-hanging">the Lord has done this,</span>
<span>and it is marvelous in our eyes"?</span>
</p>
'Therefore I tell you that the kingdom of God will be taken away from you
and given to a people who will produce its fruit. Anyone who falls on this
stone will be broken to pieces; anyone on whom it falls will be crushed.'
</blockquote>
</block-comment>
Matthew depicts Jesus continuing to teach in the Temple while sparring with the
religious elites. Jesus caps off what was already a dreadful day by declaring