Some basic styling and components

penelopeysm · Aug 18, 2024 · 00a7d8e · 00a7d8e
1 parent f98073a
commit 00a7d8e
Show file tree

Hide file tree

Showing 21 changed files with 138 additions and 94 deletions.
diff --git a/src/components/Page.astro b/src/components/Page.astro
@@ -0,0 +1,33 @@
+---
+const { title } = Astro.props;
+
+import '../styles/global.css';
+---
+
+<html lang="en">
+    <head>
+        <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <meta charset="utf-8" />
+        <title>{title}</title>
+    </head>
+
+    <body>
+        <main>
+            <slot />
+        </main>
+    </body>
+</html>
+
+<style>
+    body {
+        display: flex;
+        justify-content: center;
+        margin: 20px 50px 0 50px;
+        background-color: #e9e9f7;
+    }
+    main {
+        max-width: 1000px;
+    }
+</style>
diff --git a/src/components/PostList.astro b/src/components/PostList.astro
@@ -0,0 +1,35 @@
+---
+import { getCollection } from "astro:content";
+import PostListItem from "./PostListItem.astro";
+
+async function getAllPosts() {
+  let posts = await getCollection("posts");
+  posts.sort((a, b) => {
+    if (a.data.publishDate < b.data.publishDate) {
+      return 1;
+    } else if (a.data.publishDate > b.data.publishDate) {
+      return -1;
+    } else {
+      const aSortOrder = a.data.sortOrder === undefined ? 1 : a.data.sortOrder;
+      const bSortOrder = b.data.sortOrder === undefined ? 1 : b.data.sortOrder;
+      return bSortOrder - aSortOrder;
+    }
+  });
+  return posts;
+}
+
+const allPosts = await getAllPosts();
+---
+
+<div id="post-list">
+  {allPosts.map((post) => <PostListItem post={post} />)}
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    row-gap: 10px;
+    column-gap: 30px;
+  }
+</style>
diff --git a/src/components/PostListItem.astro b/src/components/PostListItem.astro
@@ -0,0 +1,20 @@
+---
+const { post } = Astro.props;
+
+function formatDate(date) {
+  return new Date(date).toLocaleDateString("en-GB", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+---
+
+{formatDate(post.data.publishDate)}
+<a href={`posts/${post.slug}`}>{post.data.title}</a>
+
+<style>
+    li {
+        style: none;
+    }
+</style>
diff --git a/src/content/posts/2017-01-21-argerich-prokofiev/index.md b/src/content/posts/2017-01-21-argerich-prokofiev/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Recollections: Martha Argerich, Prokofiev 3"
-description: "As far back as my memory goes!"
 publishDate: "2017-01-21"
 tags: ["classical-live", "sheldonian-theatre"]
 ---

diff --git a/src/content/posts/2019-09-05-wang-rach3/index.md b/src/content/posts/2019-09-05-wang-rach3/index.md
@@ -1,6 +1,5 @@
 ---
-title: "Recollections: Yuja Wang, Rachmaninoff 3"
-description: "Prom 63, BBC Proms 2019"
+title: "Recollections: Prom 63, Yuja Wang, Rachmaninoff 3"
 publishDate: "2019-09-05"
 tags: ["classical-live", "proms", "royal-albert-hall"]
 ---

diff --git a/src/content/posts/2023-04-05-uchida-beethoven/index.md b/src/content/posts/2023-04-05-uchida-beethoven/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Recollections: Mitsuko Uchida, Beethoven Opp. 109–111"
-description: "Not quite the same as the legendary recording"
 publishDate: "2023-04-05"
 tags: ["classical-live", "southbank-centre"]
 ---

diff --git a/src/content/posts/2024-01-09-nutcracker/index.md b/src/content/posts/2024-01-09-nutcracker/index.md
@@ -1,6 +1,5 @@
 ---
 title: "The Royal Ballet: The Nutcracker"
-description: "Dancing! And music I never get to hear!"
 publishDate: "2024-01-09"
 tags: ["classical-live", "ballet", "royal-opera-house"]
 ---

diff --git a/src/content/posts/2024-01-11-vengerov-mendelssohn/index.md b/src/content/posts/2024-01-11-vengerov-mendelssohn/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Vengerov, Oxford Phil: Mendelssohn concerto, Brahms 1"
-description: "A bit too much Mendelssohn"
 publishDate: "2024-01-11"
 tags: ["classical-live", "sheldonian-theatre"]
 ---

diff --git a/src/content/posts/2024-01-13-collins-talich-brahms/index.md b/src/content/posts/2024-01-13-collins-talich-brahms/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Michael Collins et al.: Brahms chamber pieces"
-description: "A bumper programme of late Brahms"
 publishDate: "2024-01-13"
 tags: ["classical-live", "southbank-centre"]
 ---

diff --git a/src/content/posts/2024-01-24-thibaudet-debussy/index.md b/src/content/posts/2024-01-24-thibaudet-debussy/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Thibaudet: Debussy Preludes"
-description: "Perhaps slightly spoilt by my seat..."
 publishDate: "2024-01-24"
 tags: ["classical-live", "barbican-centre"]
 ---

diff --git a/src/content/posts/2024-01-25-ning-zee-brahms/index.md b/src/content/posts/2024-01-25-ning-zee-brahms/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Ning Feng, Zee Zee: Brahms violin sonatas"
-description: "Beautiful, intimate music-making. This concert made me actually start a blog!"
 publishDate: "2024-01-25"
 tags: ["classical-live", "wigmore-hall"]
 ---

diff --git a/src/content/posts/2024-02-20-lost-birds/index.md b/src/content/posts/2024-02-20-lost-birds/index.md
@@ -1,6 +1,5 @@
 ---
 title: "What I'm listening to: The Lost Birds"
-description: "A 2022 album from VOCES8, Christopher Tin, Royal Philharmonic Orchestra"
 publishDate: "2024-02-20"
 tags: ["listening"]
 ---

diff --git a/src/content/posts/2024-02-21-northanger-abbey/index.md b/src/content/posts/2024-02-21-northanger-abbey/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Northanger Abbey at the Orange Tree Theatre"
-description: "And something completely different..."
 publishDate: "2024-02-21"
 tags: ["theatre", "austen", "orange-tree-theatre"]
 ---

diff --git a/src/content/posts/2024-03-24-lewis-schubert/index.md b/src/content/posts/2024-03-24-lewis-schubert/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Paul Lewis: Schubert D958, D959, D960"
-description: "A straightforward rendition allowing Schubert's late masterpieces room to shine"
 publishDate: "2024-03-24"
 tags: ["classical-live", "wigmore-hall"]
 ---

diff --git a/src/content/posts/2024-07-19-prom1/index.md b/src/content/posts/2024-07-19-prom1/index.md
@@ -1,6 +1,5 @@
 ---
 title: "First Night of the Proms"
-description: ""
 publishDate: "2024-07-19"
 tags: ["bbc-proms"]
 ---

diff --git a/src/content/posts/2024-07-21-prom3/index.md b/src/content/posts/2024-07-21-prom3/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Prom 3: VOCES8 and The King's Singers"
-description: ""
 publishDate: "2024-07-21"
 tags: ["bbc-proms"]
 ---

diff --git a/src/content/posts/2024-07-21-_prom4/index.md → src/content/posts/2024-07-21-prom4/index.md b/src/content/posts/2024-07-21-_prom4/index.md → src/content/posts/2024-07-21-prom4/index.md
@@ -1,7 +1,7 @@
 ---
 title: "Prom 4: Mahler 5"
-description: ""
 publishDate: "2024-07-21"
+sortOrder: 2
 tags: ["bbc-proms"]
 ---
 
@@ -22,9 +22,10 @@ https://www.bbc.co.uk/events/e6drn3
 
 ## My thoughts
 
-First of all, pardon the awkward URL slug.
+<s>First of all, pardon the awkward URL slug.
 It's like this because I need to get it to sort lexicographically lower than Prom 3 so that it shows up 'later' in the list of posts.
-Maybe I can fix this in the code at some point in time, but I'm sleepy, and really quite tired after going for [two Proms today](/posts/2024-07-21-prom3), standing for both, and to top it off taking the bus there both times because the train was not running.
+Maybe I can fix this in the code at some point in time, but I'm sleepy,</s> and really quite tired after going for [two Proms today](/posts/2024-07-21-prom3), standing for both, and to top it off taking the bus there both times because the train was not running.
+*(Update, 18 Aug 2024: it has been fixed.)*
 
 That said, I'd totally do it again in a heartbeat!
 

diff --git a/src/content/posts/2024-08-11-prom31/index.md b/src/content/posts/2024-08-11-prom31/index.md
@@ -1,6 +1,5 @@
 ---
 title: "Prom 31: Mutter, Barenboim, West-Eastern Divan Orchestra"
-description: ""
 publishDate: "2024-08-11"
 tags: ["bbc-proms"]
 ---

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,73 +1,40 @@
 ---
-import { getCollection } from "astro:content";
-const title = "A penny for...";
+import Page from "../components/Page.astro";
+import PostList from "../components/PostList.astro";
 
-async function getAllPosts() {
-  let posts = await getCollection("posts");
-  posts.sort((a, b) => {
-    if (a.data.publishDate < b.data.publishDate) {
-      return 1;
-    } else if (a.data.publishDate > b.data.publishDate) {
-      return -1;
-    } else {
-      const aSortOrder = a.data.sortOrder === undefined ? 1 : a.data.sortOrder;
-      const bSortOrder = b.data.sortOrder === undefined ? 1 : b.data.sortOrder;
-      return aSortOrder - bSortOrder;
-    }
-  });
-  return posts;
-}
+const overallTitle = "A penny for...";
 
-const allPosts = await getAllPosts();
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-  </head>
-  <body>
-    <h1>{title}</h1>
+<Page title={overallTitle}>
+  <h1>{overallTitle}</h1>
 
-    <p>
-      At long last I&rsquo;ve decided to start collecting classical music
-      concerts that I&rsquo;ve attended. I&rsquo;ll try to talk a little bit
-      about what I enjoyed (or did not enjoy) about each of them with some
-      justification, although these are of course all subjective, and are not
-      intended as a review of how <i>good</i> the performance was. Unfortunately
-      I don&rsquo;t have full records of concerts before 2024, although I&rsquo;m
-      trying to add those I still remember.
-    </p>
+  <p>
+    At long last I&rsquo;ve decided to start collecting classical music concerts
+    that I&rsquo;ve attended. I&rsquo;ll try to talk a little bit about what I
+    enjoyed (or did not enjoy) about each of them with some justification,
+    although these are of course all subjective, and are not intended as a
+    review of how <i>good</i> the performance was. Unfortunately I don&rsquo;t have
+    full records of concerts before 2024, although I&rsquo;m trying to add those
+    I still remember.
+  </p>
 
-    <p>
-      I&rsquo;m a software engineer at my day job. I love writing Haskell, but
-      realistically most of my job is <s>Python</s>
-      <s>Julia</s> GitHub Actions. If I have lots of spare time I might write a bit
-      about programming or other stuff, but no promises. You can find me on GitHub
-      at <a href="https://github.com/penelopeysm" target="_blank"
-        >@penelopeysm</a
-      >.
-    </p>
+  <p>
+    I&rsquo;m a software engineer at my day job. I love writing Haskell, but
+    realistically most of my job is <s>Python</s>
+    <s>Julia</s> GitHub Actions. If I have lots of spare time I might write a bit
+    about programming or other stuff, but no promises. You can find me on GitHub
+    at <a href="https://github.com/penelopeysm" target="_blank">@penelopeysm</a
+    >.
+  </p>
 
-    <p>
-      This blog is done using Astro. The layout is extremely bare-bones at the
-      moment because I'm redoing it from scratch instead of using a template.
-      Hopefully you like the late-1990s aesthetic.
-    </p>
+  <p>
+    This blog is done using Astro. The layout is extremely bare-bones at the
+    moment because I'm redoing it from scratch instead of using a template. That
+    will, hopefully, force me to actually learn how Astro works, and also let me
+    customise it more to my liking.
+  </p>
 
-    <h2>Posts</h2>
-    <ul>
-      {
-        allPosts.map((post) => (
-          <li>
-            {post.data.publishDate}:
-            <a href={`posts/${post.slug}`}>{post.data.title}</a>
-          </li>
-        ))
-      }
-    </ul>
-  </body>
-</html>
+  <h2>Posts</h2>
+  <PostList />
+</Page>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
@@ -1,5 +1,6 @@
 ---
 import { getCollection } from "astro:content";
+import Page from "../../components/Page.astro";
 
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
@@ -14,15 +15,8 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<head>
-    <title>{entry.data.title}</title>
-    <meta charset="utf-8" />
-</head>
-
-<body>
-<h1>{entry.data.title}</h1>
-
-<a href="/">Back to home</a>
-
-<Content />
-</body>
+<Page title={entry.data.title}>
+    <h1>{entry.data.title}</h1>
+    <a href="/">Back to home</a>
+    <Content />
+</Page>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');
+
+html {
+    font-family: "Fira Sans", sans-serif;
+    box-sizing: border-box;
+    font-size: 14px;
+    line-height: 1.5;
+}