Merge branch 'processing:main' into main

sebastian-meier · web-flow · commit 522b0e437c19 · 2024-10-09T20:59:26.000+02:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -17,6 +17,7 @@ if (shouldSkipCompress) {
 
 // https://astro.build/config
 export default defineConfig({
+  site: 'https://p5js.org',
   integrations: [
     preact({
       compat: true,
diff --git a/public/assets/img/p5js.png b/public/assets/img/p5js.png
diff --git a/public/images/by-nc-sa.svg b/public/images/by-nc-sa.svg
diff --git a/src/components/Head/index.astro b/src/components/Head/index.astro
@@ -10,7 +10,7 @@ interface Props {
 
 const {
   title,
-  featuredImageSrc = "/favicon.svg",
+  featuredImageSrc = "/assets/img/p5js.png",
   locale,
   description,
 } = Astro.props;
@@ -28,6 +28,9 @@ const t = await getUiTranslator(locale);
 const localizedTitle = t(title) as string;
 const localizedDescription =
   description || (t("briefPageDescriptions", title) as string);
+
+const rootUrl = new URL('/', process.env.NODE_ENV === "production" ? Astro.site : Astro.url.href);
+const ogpImageSrc = new URL(featuredImageSrc, rootUrl);
 ---
 
 <head>
@@ -38,14 +41,14 @@ const localizedDescription =
   <meta name="description" content={localizedDescription} />
   <meta property="og:title" content={title} />
   <meta property="og:description" content={localizedDescription} />
-  <meta property="og:image" content={featuredImageSrc} />
+  <meta property="og:image" content={ogpImageSrc} />
   <meta property="og:url" content={Astro.url.href} />
   <meta property="og:type" content="website" />
   <meta property="og:locale" content={localeContentMap[locale]} />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@p5xjs" />
   <meta name="twitter:title" content={title} />
   <meta name="twitter:description" content={localizedDescription} />
-  <meta name="twitter:image" content={featuredImageSrc} />
+  <meta name="twitter:image" content={ogpImageSrc} />
   <meta name="twitter:url" content={Astro.url.href} />
 </head>
diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro
@@ -65,12 +65,18 @@ const { Content } = await example.render();
     </div>
     <EditableSketch code={code} />
     <p>{example.data.arialabel}</p>
+    <div class="rendered-markdown">
+      <p>
+        <a href={Astro.url.pathname}>{example.data.title}</a> by <a href="https://p5js.org/people">p5.js Contributors</a> and the <a href="https://processingfoundation.org/people">Processing Foundation</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>.
+      </p>
+      <img src="/images/by-nc-sa.svg" />
+    </div>
   </div>
   <div class="grid gap-y-4xl lg:gap-y-mb-3xl mt-2xl">
     {
       relatedReferences.length > 0 ? (
         <RelatedItems
-          title={t("Related Reference") as string}
+          title={t("Related References") as string}
           items={relatedReferences}
         />
       ) : null
diff --git a/src/pages/_utils.ts b/src/pages/_utils.ts
@@ -339,7 +339,7 @@ export const generateJumpToState = async (
       break;
     case "examples":
       categories = new Set(
-        localeEntries.map((entry) => getExampleCategory(entry.slug)),
+        localeEntries.map((entry) => getExampleCategory(entry.id)),
       );
       break;
     default:
@@ -365,23 +365,28 @@ export const generateJumpToState = async (
   // Loop through each category and add entries to the jumpToLinks
   for (const category of categories ?? []) {
     const categoryLinks = [] as JumpToLink[];
+    const categoryLabel = getCategoryLabel(category);
     categoryLinks.push({
-      label: getCategoryLabel(category),
-      url: `/${collectionType}#${category}`,
+      label: categoryLabel,
+      url:
+        collectionType === "examples"
+          ? `/${collectionType}/#${categoryLabel.toLowerCase()}`
+          : `/${collectionType}/#${category}`,
       current: false,
     });
 
     // Examples are a special case where subentries are only shown if they are in the current category
     if (
       collectionType !== "examples" ||
-      category === getExampleCategory(currentEntrySlug)
+      category === getExampleCategory(currentEntrySlug) ||
+      category.toLowerCase() === getExampleCategory(currentEntrySlug)
     ) {
       // Get all entries in the current category
       let currentCategoryEntries = localeEntries.filter(
         (entry) =>
           category ===
           (collectionType === "examples"
-            ? getExampleCategory(entry.slug)
+            ? getExampleCategory(entry.id)
             : // @ts-expect-error - We know that the category exists because of the collection type
               entry.data.category ?? ""),
       );
