Merge pull request #501 from amelioro/misc-touchups-8

Misc touchups 8
amelioro · Sep 12, 2024 · b6b3469 · b6b3469
2 parents 042cd96 + 43f6b4c
commit b6b3469
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 65 deletions.
diff --git a/docs-site/pages/getting-started/core-ideas.mdx b/docs-site/pages/getting-started/core-ideas.mdx
@@ -61,7 +61,7 @@ Since these nodes are used to defined the Topic's breakdown, they're sometimes r
 
 <Callout type="info">
   All possible nodes and their purpose can be seen in the [Ontology
-  Topic](https://ameliorate.app/keyserj/ameliorate-ontology?view=All+structure+with+selected+node).
+  Topic](https://ameliorate.app/examples/ontology?view=All+breakdown).
 </Callout>
 
 <Callout type="warning">

diff --git a/docs-site/pages/getting-started/your-first-topic.mdx b/docs-site/pages/getting-started/your-first-topic.mdx
@@ -47,17 +47,11 @@ Once you create an account, you'll need to select a username:
   height={212}
 />
 
-After selecting a username, you'll be redirected to the page you were just on. To get to your user page where you'll create topics, click on your profile icon and select "My Topics":
+After selecting a username, you'll be redirected to the page you were just on. To get to your user page where you'll create topics, click on "My Topics" in the header:
 
 <Image
-  src="https://github.com/amelioro/ameliorate/assets/13872370/c9a45f0f-e903-425e-8b52-18fbc71b6ee0"
-  width={413}
-  height={133}
-/>
-
-<Image
-  src="https://github.com/amelioro/ameliorate/assets/13872370/123f8b80-e4aa-4c24-ac01-b55c3bf8a70e"
-  width={405}
+  src="https://github.com/user-attachments/assets/e4625189-1c6b-4dac-8991-789c66b309c8"
+  width={477}
   height={157}
 />
 

diff --git a/src/web/common/urls.ts b/src/web/common/urls.ts
@@ -1,14 +1,13 @@
-import path from "path";
-
 export const examplesPage = "/examples";
 
 export const docsPage = "https://ameliorate.app/docs";
-export const discourseSessionsPage = path.join(docsPage, "/discourse-sessions");
-export const gettingStartedPage = path.join(docsPage, "/getting-started");
+// would be nice if there were an easy way to join these; `path.join` doesn't work well with "https://", and `new URL` doesn't allow appending to a basepath with subdirectories
+export const discourseSessionsPage = docsPage + "/discourse-sessions";
+export const gettingStartedPage = docsPage + "/getting-started";
 
 export const githubRepo = "https://github.com/amelioro/ameliorate";
-export const contributingPage = path.join(githubRepo, "/blob/main/CONTRIBUTING.md");
-export const feedbackPage = path.join(githubRepo, "/blob/main/CONTRIBUTING.md#providing-feedback");
+export const contributingPage = githubRepo + "/blob/main/CONTRIBUTING.md";
+export const feedbackPage = githubRepo + "/blob/main/CONTRIBUTING.md#providing-feedback";
 
 export const celebrateGif =
   "https://github.com/user-attachments/assets/e87009a0-4423-4406-b2f1-5a161d620fbb";

diff --git a/src/web/home/CoreIdeasSection.tsx b/src/web/home/CoreIdeasSection.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import { useState } from "react";
 
 import { Link } from "@/web/common/components/Link";
+import { gettingStartedPage } from "@/web/common/urls";
 import { Card } from "@/web/home/Card";
 
 export const CoreIdeasSection = () => {
@@ -79,7 +80,7 @@ export const CoreIdeasSection = () => {
       <Typography variant="h4">Break things down</Typography>
       <Typography variant="body1">
         Check out{" "}
-        <Link href="https://ameliorate.app/docs/getting-started" target="_blank">
+        <Link href={gettingStartedPage} target="_blank">
           Getting Started
         </Link>{" "}
         for a more detailed explanation of the core ideas.

diff --git a/src/web/home/Footer.tsx b/src/web/home/Footer.tsx
@@ -6,8 +6,10 @@ import {
   contributingPage,
   discordInvite,
   discourseSessionsPage,
+  docsPage,
   facebookPage,
   feedbackPage,
+  gettingStartedPage,
   githubRepo,
   youtubeChannel,
 } from "@/web/common/urls";
@@ -17,10 +19,10 @@ export const Footer = () => {
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 [&_a]:text-sm">
       <div className="flex flex-col">
         <Typography variant="h6">Ameliorate</Typography>
-        <NavLink href="https://ameliorate.app/docs" target="_blank">
+        <NavLink href={docsPage} target="_blank">
           Docs
         </NavLink>
-        <NavLink href="https://ameliorate.app/docs/getting-started" target="_blank">
+        <NavLink href={gettingStartedPage} target="_blank">
           Getting Started
         </NavLink>
         <NavLink href="/examples" target="_blank">

diff --git a/src/web/topic/components/CriteriaTable/EdgeCell.tsx b/src/web/topic/components/CriteriaTable/EdgeCell.tsx
@@ -4,7 +4,7 @@ import { Edge } from "@/web/topic/utils/graph";
 
 export const EdgeCell = ({ edge }: { edge: Edge }) => {
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className="flex h-full flex-col items-center justify-center">
       <CommonIndicators graphPartId={edge.id} notes={edge.data.notes} />
       <ContentIndicators
         className="ml-0"

diff --git a/src/web/tutorial/steps/addingNuance.tsx b/src/web/tutorial/steps/addingNuance.tsx
@@ -25,11 +25,12 @@ export const addingNuanceSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key="https://github.com/user-attachments/assets/47b18abe-cf40-47cf-9b18-f376dfbe7723"
             src="https://github.com/user-attachments/assets/47b18abe-cf40-47cf-9b18-f376dfbe7723"
             alt="scoring a node"
             width={434}
             height={328}
-            key="https://github.com/user-attachments/assets/47b18abe-cf40-47cf-9b18-f376dfbe7723"
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />
@@ -51,11 +52,12 @@ export const addingNuanceSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key="https://github.com/user-attachments/assets/bdf7fd16-d44a-4a74-8e5e-24cd577dc647"
             src="https://github.com/user-attachments/assets/bdf7fd16-d44a-4a74-8e5e-24cd577dc647"
             alt="viewing other perspectives"
             width={492}
             height={411}
-            key="https://github.com/user-attachments/assets/bdf7fd16-d44a-4a74-8e5e-24cd577dc647"
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />
@@ -79,11 +81,12 @@ export const addingNuanceSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key="https://github.com/user-attachments/assets/4b3f2bcb-9890-4e02-aa33-fea8e8721ea9"
             src="https://github.com/user-attachments/assets/4b3f2bcb-9890-4e02-aa33-fea8e8721ea9"
             alt="justifying sentiments"
             width={600}
             height={353}
-            key="https://github.com/user-attachments/assets/4b3f2bcb-9890-4e02-aa33-fea8e8721ea9"
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />
@@ -106,11 +109,12 @@ export const addingNuanceSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key="https://github.com/user-attachments/assets/9e12369a-c41f-47c9-ba40-ab95f60985d3"
             src="https://github.com/user-attachments/assets/9e12369a-c41f-47c9-ba40-ab95f60985d3"
             alt="adding research"
             width={579}
             height={379}
-            key="https://github.com/user-attachments/assets/9e12369a-c41f-47c9-ba40-ab95f60985d3"
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />
@@ -130,19 +134,19 @@ export const addingNuanceSteps: StepType[] = [
         imageSlot={
           <>
             <Image
+              key="https://github.com/user-attachments/assets/a1e9b490-2dad-4662-81f2-121524708140"
               src="https://github.com/user-attachments/assets/a1e9b490-2dad-4662-81f2-121524708140"
               alt="note"
               width={377}
               height={140}
-              key="https://github.com/user-attachments/assets/a1e9b490-2dad-4662-81f2-121524708140"
               className="mr-3 shadow-lg"
             />
             <Image
+              key="https://github.com/user-attachments/assets/e7a9c06c-71f4-4f41-9fc5-d89bf81d60ad"
               src="https://github.com/user-attachments/assets/e7a9c06c-71f4-4f41-9fc5-d89bf81d60ad"
               alt="comment"
               width={382}
               height={224}
-              key="https://github.com/user-attachments/assets/e7a9c06c-71f4-4f41-9fc5-d89bf81d60ad"
               className="ml-3 pt-3 shadow-lg"
             />
           </>
@@ -163,11 +167,12 @@ export const addingNuanceSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key="https://github.com/user-attachments/assets/5f363814-a2d5-469e-b033-63d7fc0b6cf5"
             src="https://github.com/user-attachments/assets/5f363814-a2d5-469e-b033-63d7fc0b6cf5"
             alt="indicators"
             width={507}
             height={360}
-            key="https://github.com/user-attachments/assets/5f363814-a2d5-469e-b033-63d7fc0b6cf5"
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />
@@ -189,11 +194,12 @@ export const addingNuanceSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key={celebrateGif}
             src={celebrateGif}
             alt="Celebrate completed tutorial!"
             width={256}
             height={143}
-            key={celebrateGif}
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />

diff --git a/src/web/tutorial/steps/breakdown.tsx b/src/web/tutorial/steps/breakdown.tsx
@@ -32,11 +32,11 @@ export const breakdownSteps: StepType[] = [
         imageSlot={
           <>
             <Image
+              key="https://github.com/user-attachments/assets/dc5029a6-51c5-4b03-92c8-ed67ab9eb500"
               src="https://github.com/user-attachments/assets/dc5029a6-51c5-4b03-92c8-ed67ab9eb500"
               alt="layout of details via cars-going-too-fast"
               width={1237}
               height={911}
-              key="https://github.com/user-attachments/assets/dc5029a6-51c5-4b03-92c8-ed67ab9eb500"
             />
             <Typography variant="caption">
               From:{" "}
@@ -72,11 +72,11 @@ export const breakdownSteps: StepType[] = [
         imageSlot={
           <>
             <Image
+              key="https://github.com/user-attachments/assets/7d6769ba-a20d-419e-b72f-280a25fc4a79"
               src="https://github.com/user-attachments/assets/7d6769ba-a20d-419e-b72f-280a25fc4a79"
               alt="problem details of climate-change"
               width={711}
               height={572}
-              key="https://github.com/user-attachments/assets/7d6769ba-a20d-419e-b72f-280a25fc4a79"
             />
             <Typography variant="caption">
               From:{" "}
@@ -110,11 +110,11 @@ export const breakdownSteps: StepType[] = [
         imageSlot={
           <>
             <Image
+              key="https://github.com/user-attachments/assets/a1121e7a-0845-4a92-937e-2f168e34a871"
               src="https://github.com/user-attachments/assets/a1121e7a-0845-4a92-937e-2f168e34a871"
               alt="solution details of mta-congestion-pricing"
               width={653}
               height={545}
-              key="https://github.com/user-attachments/assets/a1121e7a-0845-4a92-937e-2f168e34a871"
             />
             <Typography variant="caption">
               From:{" "}
@@ -141,11 +141,12 @@ export const breakdownSteps: StepType[] = [
         imageSlot={
           <>
             <Image
+              key="https://github.com/user-attachments/assets/03dc8f21-b7da-46db-bbee-ebacd490d016"
               src="https://github.com/user-attachments/assets/03dc8f21-b7da-46db-bbee-ebacd490d016"
               alt="showing that a benefit addresses a cause"
               width={738}
               height={636}
-              key="https://github.com/user-attachments/assets/03dc8f21-b7da-46db-bbee-ebacd490d016"
+              unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
             />
             <Typography variant="caption">
               From:{" "}
@@ -179,11 +180,11 @@ export const breakdownSteps: StepType[] = [
         imageSlot={
           <>
             <Image
+              key="https://github.com/user-attachments/assets/d3467cd8-f805-46cf-a5e5-84a031ad98cc"
               src="https://github.com/user-attachments/assets/d3467cd8-f805-46cf-a5e5-84a031ad98cc"
               alt="showing a benefit fulfilling a criterion"
               width={627}
               height={547}
-              key="https://github.com/user-attachments/assets/d3467cd8-f805-46cf-a5e5-84a031ad98cc"
             />
             <Typography variant="caption">
               From:{" "}
@@ -212,11 +213,12 @@ export const breakdownSteps: StepType[] = [
         }
         imageSlot={
           <Image
+            key={celebrateGif}
             src={celebrateGif}
             alt="Celebrate completed tutorial!"
             width={256}
             height={143}
-            key={celebrateGif}
+            unoptimized // without this, nextjs sometimes tries to optimize the gif as an image - not sure why only sometimes though; thanks https://github.com/vercel/next.js/discussions/18628#discussioncomment-4036940
           />
         }
       />