improve content layout, change bg image

going to start filling in the "content" pages so want a standard way of doing this. extracting strings can leave room for Intl if we want to do that down the road sharing the structured text logic that was roughed in in the Post component with the content pages for use in strings.json
sterlingwes · Jan 31, 2024 · 953a1d6 · 953a1d6
1 parent 8ac971c
commit 953a1d6
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 166 deletions.
diff --git a/site/public/fonts/PTSerif-Regular.ttf b/site/public/fonts/PTSerif-Regular.ttf
diff --git a/site/public/gaza-drone.jpeg b/site/public/gaza-drone.jpeg
diff --git a/site/public/gaza_wapo.jpeg b/site/public/gaza_wapo.jpeg
diff --git a/site/src/components/ContentBox.astro b/site/src/components/ContentBox.astro
@@ -0,0 +1,17 @@
+---
+
+---
+
+<div class="content-box">
+  <slot />
+</div>
+<style>
+  .content-box {
+    background-color: rgba(0, 0, 0, 50%);
+    margin-bottom: 2rem;
+    border: 1px solid rgba(255, 255, 255, 25%);
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 50%);
+  }
+</style>
diff --git a/site/src/components/Post.astro b/site/src/components/Post.astro
@@ -1,5 +1,6 @@
 ---
 import PostTypeIcon from "../components/PostTypeIcon.astro";
+import StructuredText from "./StructuredText.astro";
 import type { getEnhancedPosts } from "../lib/server/posts";
 
 interface Props {
@@ -28,19 +29,7 @@ const { post, postDelayLookup, enablerImageUrl } = Astro.props;
       {
         post.structuredText.length > 0 && (
           <div class="post-body">
-            {post.structuredText.map((part) =>
-              part.type === "url" ? (
-                <a href={part.href} title={part.href} target="_blank">
-                  {part.text}
-                </a>
-              ) : part.type === "space" ? (
-                <span>&nbsp;</span>
-              ) : part.type === "break" ? (
-                <div class="post-linebreak" />
-              ) : (
-                part.text
-              )
-            )}
+            <StructuredText parts={post.structuredText} />
           </div>
         )
       }
@@ -59,19 +48,7 @@ const { post, postDelayLookup, enablerImageUrl } = Astro.props;
             <div class="post-quoted-body">
               {post.structuredQuoteText.length > 0 && (
                 <div class="post-body">
-                  {post.structuredQuoteText.map((part) =>
-                    part.type === "url" ? (
-                      <a href={part.href} title={part.href} target="_blank">
-                        {part.text}
-                      </a>
-                    ) : part.type === "space" ? (
-                      <span>&nbsp;</span>
-                    ) : part.type === "break" ? (
-                      <div class="post-linebreak" />
-                    ) : (
-                      part.text
-                    )
-                  )}
+                  <StructuredText parts={post.structuredQuoteText} />
                 </div>
               )}
             </div>
@@ -189,11 +166,6 @@ const { post, postDelayLookup, enablerImageUrl } = Astro.props;
     overflow: hidden;
   }
 
-  .post-linebreak {
-    display: block;
-    margin-bottom: 10px;
-  }
-
   .post-image img,
   .post-quoted-image img {
     max-width: 100%;

diff --git a/site/src/components/StructuredText.astro b/site/src/components/StructuredText.astro
@@ -0,0 +1,43 @@
+---
+import type { StructuredText } from "../lib/shared/structured-text";
+
+interface Props {
+  parts: StructuredText[];
+}
+
+const { parts } = Astro.props;
+---
+
+<span>
+  {
+    parts.map((part) =>
+      part.type === "url" ? (
+        <a href={part.href} title={part.href} target="_blank">
+          {part.text}
+        </a>
+      ) : part.type === "space" ? (
+        <span>&nbsp;</span>
+      ) : part.type === "break" ? (
+        <span class="linebreak" />
+      ) : part.type === "para" ? (
+        <p>{part.text}</p>
+      ) : (
+        part.text
+      )
+    )
+  }
+</span>
+
+<style>
+  p {
+    margin: 0;
+    margin-bottom: 2rem;
+  }
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+  .linebreak {
+    display: block;
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/site/src/layouts/ContentPageLayout.astro b/site/src/layouts/ContentPageLayout.astro
@@ -0,0 +1,72 @@
+---
+import OpacityOverlay from "../components/OpacityOverlay.astro";
+
+interface Props {
+  title: string;
+  clip?: boolean;
+}
+
+const { title, clip } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body class={clip ? "clip" : undefined}>
+    <OpacityOverlay />
+    <main>
+      <div class="content">
+        <h1>{title}</h1>
+        <slot />
+      </div>
+    </main>
+  </body>
+</html>
+<style is:global>
+  html {
+    font-family: system-ui, sans-serif;
+    background: rgb(28, 14, 14);
+    min-height: 100vh;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url("/gaza-drone.jpeg");
+    background-attachment: fixed;
+  }
+  @font-face {
+    font-family: "PTSerif";
+    src: url("/fonts/PTSerif-Regular.ttf") format("ttf");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+  }
+  .content {
+    position: relative;
+    z-index: 1;
+    color: rgba(255, 255, 255, 80%);
+  }
+  h1 {
+    font-family: "PTSerif";
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+  }
+</style>
diff --git a/site/src/layouts/Layout.astro → site/src/layouts/PlayerLayout.astro b/site/src/layouts/Layout.astro → site/src/layouts/PlayerLayout.astro
diff --git a/site/src/lib/constants/strings.json b/site/src/lib/constants/strings.json
@@ -0,0 +1,6 @@
+{
+  "mission_statement": {
+    "type": "text",
+    "text": "This website seeks to collect public statements from those supporting Israel's strategy of mass displacement, starvation, and murder of Palestinian people, and to contrast those statements with the human toll of that inhumane campaign."
+  }
+}
diff --git a/site/src/lib/constants/strings.ts b/site/src/lib/constants/strings.ts
@@ -0,0 +1,9 @@
+import type { StructuredText } from "../shared/structured-text";
+import strings from "./strings.json";
+
+export const getString = (key: keyof typeof strings) => {
+  if (!strings[key]) {
+    throw new Error(`No match for string lookup by key: ${key}`);
+  }
+  return strings[key] as StructuredText;
+};
diff --git a/site/src/lib/server/posts.ts b/site/src/lib/server/posts.ts
@@ -1,19 +1,14 @@
 import { parseISO, format } from "date-fns";
 import readingTime from "reading-time";
 import type { EnablerPost } from "../../schemas/enabler";
+import type { StructuredText } from "../shared/structured-text";
 
 const orderEarliestToLatest = (posts: EnablerPost[]) => {
   return posts.slice(0).sort((a, b) => {
     return parseISO(a.date).valueOf() - parseISO(b.date).valueOf();
   });
 };
 
-type StructuredText =
-  | { type: "text"; text: string }
-  | { type: "url"; text: string; href: string }
-  | { type: "space" }
-  | { type: "break" };
-
 const naiveSingleUrlMatcher = /\s+(http[^\s]+)\s+/;
 
 const formatDisplayUrl = (url: string) => {

diff --git a/site/src/lib/shared/structured-text.ts b/site/src/lib/shared/structured-text.ts
@@ -0,0 +1,6 @@
+export type StructuredText =
+  | { type: "text"; text: string }
+  | { type: "para"; text: string }
+  | { type: "url"; text: string; href: string }
+  | { type: "space" }
+  | { type: "break" };
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
@@ -1,68 +1,10 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import OpacityOverlay from "../components/OpacityOverlay.astro";
+import Layout from "../layouts/ContentPageLayout.astro";
+import ContentBox from "../components/ContentBox.astro";
 ---
 
-<Layout title="genocide.club">
-  <main>
-    <OpacityOverlay />
-    <div class="content">
-      <h1>404 : genocide club</h1>
-      <div class="about-text">
-        <p>Page not found.</p>
-      </div>
-      <div class="about-text">
-        <p>
-          This website seeks to collect public statements from those supporting
-          Israel's strategy of mass displacement, starvation, and murder of the
-          Palestinian people, and to contrast those statements with the human
-          toll of that horrific campaign.
-        </p>
-        <p>
-          An individual or group does not have to explicitly call for these
-          specific brutal acts to be a member of the Genocide Club. Simple
-          indifference to the plight of Palestinians while unquestioningly
-          supporting Israel's campaign is enough to implicitly condone those
-          actions and the resulting effects.
-        </p>
-      </div>
-    </div>
-  </main>
+<Layout title="genocide.club • 404 Not Found">
+  <ContentBox>
+    <p>Sorry, the page you were looking for was not found.</p>
+  </ContentBox>
 </Layout>
-
-<style>
-  main {
-    margin: auto;
-    padding: 1rem;
-    width: 800px;
-    max-width: calc(100% - 2rem);
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-  }
-  .content {
-    position: relative;
-    z-index: 1;
-    color: rgba(255, 255, 255, 80%);
-  }
-  h1 {
-    font-size: 3rem;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    margin-bottom: 1em;
-  }
-  .about-text {
-    margin-bottom: 2rem;
-    border: 1px solid rgba(255, 255, 255, 25%);
-    padding: 1.5rem;
-    border-radius: 8px;
-  }
-  .about-text p {
-    margin: 0;
-    margin-bottom: 2rem;
-  }
-  .about-text p:last-of-type {
-    margin-bottom: 0;
-  }
-</style>
diff --git a/site/src/pages/[...enabler].astro b/site/src/pages/[...enabler].astro
@@ -2,7 +2,7 @@
 import type { Enabler } from "../schemas/enabler";
 import { getCollection } from "astro:content";
 import Post from "../components/Post.astro";
-import Layout from "../layouts/Layout.astro";
+import PlayerLayout from "../layouts/PlayerLayout.astro";
 import KilledGraph from "../generated/killed.astro";
 import OpacityOverlay from "../components/OpacityOverlay.astro";
 import PlayerControls from "../components/PlayerControls.astro";
@@ -37,7 +37,7 @@ const {
 } = getTimeline({ svgDomain, posts });
 ---
 
-<Layout clip title={`genocide.club • ${enabler.name}`}>
+<PlayerLayout clip title={`genocide.club • ${enabler.name}`}>
   <main>
     <OpacityOverlay />
     <div class="graph">
@@ -236,7 +236,7 @@ const {
     <div class="scroll-bottom-fade"></div>
     <PlayerControls />
   </main>
-</Layout>
+</PlayerLayout>
 
 <style define:vars={{ aspectRatio: svgDomain.aspectRatio }}>
   @import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;600;700&display=swap");
@@ -249,7 +249,7 @@ const {
     aspect-ratio: var(--aspectRatio);
     background-size: cover;
     background-repeat: no-repeat;
-    background-image: url("/gaza_wapo.jpeg");
+    background-image: url("/gaza-drone.jpeg");
     overflow: hidden;
   }