Add sitemap and rename some images.

app/components/ChapterDropdown.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { Link } from "@remix-run/react";
 import { Menu, Transition } from "@headlessui/react";
-import chapters from "~/data/chapterMeta.json";
+import { chapterMeta } from "~/data/chapterMeta";
 import type { TChapterMeta, ChapterTitle } from "~/types/chapterMetaTags";
 
 export default function ChapterDropdown() {
@@ -21,17 +21,17 @@ export default function ChapterDropdown() {
       >
         <Menu.Items className="absolute left-0 mt-2 origin-top-right text-lg divide-gray-100 rounded-md shadow-md shadow-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="grid-wrapper w-max divide-y border">
-            {Object.keys(chapters as TChapterMeta).map((chapter, index) => (
+            {Object.keys(chapterMeta as TChapterMeta).map((chapter, index) => (
               <Menu.Item key={chapter}>
                 {({ active }) => (
                   <Link
                     className={`${
                       active ? "bg-playfairPrimary" : "bg-black"
                     } inline-block focus:bg-playfairPrimary hover:bg-playfairPrimary pl-2 pr-3 pb-0.5 pt-0.5`}
-                    to={`/chapters/${chapter}`}
+                    to={`/chapterMeta/${chapter}`}
                   >
                     {index == 0 ? "" : `${index}. `}
-                    {chapters[chapter as ChapterTitle].title}
+                    {chapterMeta[chapter as ChapterTitle].title}
                   </Link>
                 )}
               </Menu.Item>

app/data/chapterMeta.ts

@@ -0,0 +1,65 @@
+export const chapterMeta = {
+  intro: {
+    title: "Introduction",
+    subtitle: "A Counterhistory of Data Visualization",
+    description: "",
+    image:
+      "/images/intro/7-1786_Playfair_-_1_Chart_of_all_the_import_and_exports_to_and_from_England_from_the_year_1700_to_1782.jpg",
+    imageWidth: "1145",
+    imageHeight: "804",
+  },
+  description: {
+    title: "Every Datapoint a Person",
+    subtitle: "Description of a Slave Ship",
+    description:
+      "Before there are data, there are people. People who offer up their lives as data — or whose lives become data without consent.",
+    image: "/images/description/5-The_history_of_the_rise.jpg",
+    imageWidth: "1280",
+    imageHeight: "913",
+  },
+  playfair: {
+    title: "What Visualization Reveals",
+    subtitle: "William Playfair's Time-Series Charts",
+    description:
+      "Data visualization has never been neutral or objective. There is a meaning — and an argument — conveyed through each design.",
+    image: "/images/playfair/1-northamerica.jpg",
+    imageWidth: "1364",
+    imageHeight: "801",
+  },
+  shanawdithit: {
+    title: "The Power of the Frame",
+    subtitle: "Shanawdithit's Thematic Maps",
+    description:
+      "Maps can represent reality and can contest it. How can we learn to see the lines of power that they encode?",
+    image: "/images/shanawdithit/DRW-II.jpg",
+    imageWidth: "10189",
+    imageHeight: "6595",
+  },
+  peabody: {
+    title: "The Work of Knowledge",
+    subtitle: "Elizabeth Palmer Peabody's Chronological Grids",
+    description:
+      "We have explored only part of the history of data visualization. What possibilities can we imagine when we expand our view of the past?",
+    image: "/images/peabody/1600s.jpg",
+    imageWidth: "1019",
+    imageHeight: "1012",
+  },
+  dubois: {
+    title: "Between Data and Truth",
+    subtitle: "W.E.B. Du Bois's “Data Portraits”",
+    description:
+      "How can data visualization bear witness to oppression? How can we hold space for what cannot be conveyed through data alone?",
+    image: "/images/dubois/887.jpg",
+    imageWidth: "807",
+    imageHeight: "1024",
+  },
+  labor: {
+    title: "From Idea to Insight",
+    subtitle: "The Making of Data by Design",
+    description:
+      "Any digital project is the work of many hands. How can this labor be visualized? What remains out of sight?",
+    image: "/images/labor/data-traces.jpg",
+    imageWidth: "2252",
+    imageHeight: "1698",
+  },
+};

app/utils.ts

@@ -1,9 +1,9 @@
-import chapterMetaData from "~/data/chapterMeta.json";
+import { chapterMeta as chapterMetaData } from "~/data/chapterMeta";
 import type { TChapterMeta, ChapterTitle } from "./types/chapterMetaTags";
 
 export const classNames = (...classes: (string | boolean | undefined)[]) => {
   return classes.filter(Boolean).join(" ");
-}
+};
 
 export function* numberRange(start: number, end: number) {
   for (let i = start; i <= end; i++) {
@@ -13,25 +13,33 @@ export function* numberRange(start: number, end: number) {
 
 export const spacesToHyphens = (str: string) => {
   return str.replace(/\s/g, "-").toLowerCase();
-}
+};
 
 export const random = (min: number, max: number) => {
   min = Math.floor(min);
   max = Math.floor(max) - min;
   return Math.floor(Math.random() * max + min);
-}
+};
 
 // Stolen from p5
 // https://github.com/processing/p5.js/blob/45ada83739efa51f6747fc037e95d4b7eb9b351f/src/math/calculation.js#L397
-export const map = (n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean) => {
-  const newValue = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+export const map = (
+  n: number,
+  start1: number,
+  stop1: number,
+  start2: number,
+  stop2: number,
+  withinBounds?: boolean
+) => {
+  const newValue =
+    ((n - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
   if (!withinBounds) {
     return newValue;
   }
   if (start2 < stop2) {
-    return Math.max(Math.min(newValue, stop2), start2)
+    return Math.max(Math.min(newValue, stop2), start2);
   } else {
-    return Math.max(Math.min(newValue, start2), stop2)
+    return Math.max(Math.min(newValue, start2), stop2);
   }
 };
 
@@ -43,18 +51,26 @@ export const chapterMeta = (chapter: ChapterTitle) => {
     { charset: "utf-8" },
     { title: `${metaData[chapter].title}: ${metaData[chapter].subtitle}` },
     { name: "viewport", content: "width=device-width,initial-scale=1" },
-    { name: "og:title", content: `${chapterMetaData[chapter].title}: ${chapterMetaData[chapter].subtitle}` },
-    { name: "twitter:title", content: `${chapterMetaData[chapter].title}: ${chapterMetaData[chapter].subtitle}` },
-    { name: "og:url", content: `${hostName}/chapters/${chapter}`},
+    {
+      name: "og:title",
+      content: `${chapterMetaData[chapter].title}: ${chapterMetaData[chapter].subtitle}`,
+    },
+    {
+      name: "twitter:title",
+      content: `${chapterMetaData[chapter].title}: ${chapterMetaData[chapter].subtitle}`,
+    },
+    { name: "og:url", content: `${hostName}/chapters/${chapter}` },
     { name: "description", content: chapterMetaData[chapter].description },
     { name: "og:description", content: chapterMetaData[chapter].description },
-    { name: "twitter:description", content: chapterMetaData[chapter].description },
-    { name: "image", content: imageUrl},
-    { name: "og:image", content: imageUrl},
+    {
+      name: "twitter:description",
+      content: chapterMetaData[chapter].description,
+    },
+    { name: "image", content: imageUrl },
+    { name: "og:image", content: imageUrl },
     { name: "og:image:width", content: chapterMetaData[chapter].imageWidth },
     { name: "og:image:height", content: chapterMetaData[chapter].imageHeight },
-    { name: "twitter:image", content: imageUrl},
+    { name: "twitter:image", content: imageUrl },
     { name: "og:site_name", content: "Data by Design" },
-  ]
-}
-
+  ];
+};

package.json

@@ -51,6 +51,7 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^5.0.2",
     "vite": "^5.2.10",
+    "vite-plugin-sitemap": "^0.5.3",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "engines": {

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://dataxdesign.io/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml"
+  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
+  xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+  <url>
+    <loc>https://dataxdesign.io/about</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/intro</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/description</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/playfair</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/shanawdithit</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/peabody</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/dubois</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://dataxdesign.io/chapter/labor</loc>
+    <lastmod>2024-05-08T18:44:25.000Z</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

tailwind.config.ts

@@ -1,4 +1,4 @@
-import chapters from "./app/data/chapterMeta.json";
+import {chapterMeta} from "./app/data/chapterMeta";
 import type { Config } from 'tailwindcss'
 
 export default {
@@ -44,13 +44,13 @@ export default {
         14: "repeat(14, minmax(0, 1fr))",
       },
       backgroundImage: {
-        description: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.description.image}')`,
-        dubois: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.dubois.image}')`,
-        intro: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.intro.image}')`,
-        labor: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.labor.image}')`,
-        peabody: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.peabody.image}')`,
-        playfair: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.playfair.image}')`,
-        shanawdithit: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapters.shanawdithit.image}')`,
+        description: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.description.image}')`,
+        dubois: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.dubois.image}')`,
+        intro: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.intro.image}')`,
+        labor: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.labor.image}')`,
+        peabody: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.peabody.image}')`,
+        playfair: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.playfair.image}')`,
+        shanawdithit: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${chapterMeta.shanawdithit.image}')`,
       },
       colors: {
         black: "#1C1817",
@@ -267,9 +267,9 @@ export default {
     "border-opacity-70",
     "opacity-20",
     "md:mt-28",
-    ...Object.keys(chapters).map((chapter) => `bg-${chapter}`),
-    ...Object.keys(chapters).map((chapter) => `hover:bg-${chapter}`),
-    ...Object.keys(chapters).map((chapter) => `outline-${chapter}Primary`),
-    ...Object.keys(chapters).map((chapter) => `outline-${chapter}Secondary`),
+    ...Object.keys(chapterMeta).map((chapter) => `bg-${chapter}`),
+    ...Object.keys(chapterMeta).map((chapter) => `hover:bg-${chapter}`),
+    ...Object.keys(chapterMeta).map((chapter) => `outline-${chapter}Primary`),
+    ...Object.keys(chapterMeta).map((chapter) => `outline-${chapter}Secondary`),
   ],
 } satisfies Config;