Merge pull request #331 from processing/ui-bugs-2

UI bugs 2
processing · May 1, 2024 · 78960d2 · 78960d2
2 parents f0957d0 + d9ae508
commit 78960d2
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 68 deletions.
diff --git a/src/components/GridItem/ContributorDoc.astro b/src/components/GridItem/ContributorDoc.astro
@@ -20,9 +20,9 @@ const { item } = Astro.props;
       {item.data.title}
     </span>
   </div>
-  <div
-    class="text-sm text-ellipsis line-clamp-3 text-pretty break-words break-keep"
+  <p
+    class="mt-xs text-body-caption text-ellipsis line-clamp-3 text-pretty break-words break-keep"
   >
     {item.data.description}
-  </div>
+  </p>
 </a>
diff --git a/src/components/GridItem/Event.astro b/src/components/GridItem/Event.astro
@@ -27,8 +27,8 @@ const dayString = new Date(item.data.date).toLocaleDateString(currentLocale, {
     alt={item.data.featuredImageAlt}
     width="800"
   />
-  <div class="text-xl mt-xs break-words break-keep group-hover:underline">
+  <p class="text-body mt-xs break-words break-keep group-hover:underline">
     {item.data.title}
-  </div>
-  <div class="text-sm">{dayString}</div>
+  </p>
+  <p class="text-body-caption mt-xxs">{dayString}</p>
 </a>
diff --git a/src/components/GridItem/Example.astro b/src/components/GridItem/Example.astro
@@ -23,10 +23,10 @@ const { item, lazyLoad } = Astro.props;
     class="w-3/5"
     loading={lazyLoad ? "lazy" : "eager"}
   />
-  <div class="text-xl mt-xs break-words break-keep group-hover:underline">
+  <p class="text-body mt-xs break-words break-keep group-hover:underline">
     {item.data.title}
-  </div>
-  <div class="text-sm">
+  </p>
+  <p class="text-body-caption mt-xxs">
     {item.data.oneLineDescription}
-  </div>
+  </p>
 </a>
diff --git a/src/components/GridItem/Library.astro b/src/components/GridItem/Library.astro
@@ -35,12 +35,12 @@ if (!/[.!]\)?$/.test(description)) {
     width="400"
     class="w-3/5"
   />
-  <div
+  <p
     class="text-xl mt-xs text-wrap break-words break-keep group-hover:underline"
   >
     {item.data.name}
-  </div>
-  <div class="text-sm">
+  </p>
+  <p class="text-body-caption mt-xxs">
     {description} By {authorsString}
-  </div>
+  </p>
 </a>
diff --git a/src/components/GridItem/Person.astro b/src/components/GridItem/Person.astro
@@ -16,12 +16,11 @@ const { item: person } = Astro.props;
     aspectRatio="square"
   />
 </div>
-<div class="mt-xs">
-  <a
-    href={person.data.url}
-    aria-label={`Link to ${person.data.name}'s personal website'`}
-  >
-    {person.data.name}
-  </a>
-</div>
-<p class="text-body-caption mt-0">{person.data.role}</p>
+<a
+  class="text-body mt-xs"
+  href={person.data.url}
+  aria-label={`Link to ${person.data.name}'s personal website'`}
+>
+  {person.data.name}
+</a>
+<p class="text-body-caption mt-xxs">{person.data.role}</p>
diff --git a/src/components/GridItem/Reference.astro b/src/components/GridItem/Reference.astro
@@ -13,12 +13,12 @@ const { item } = Astro.props;
   class="group hover:no-underline"
   href={`/reference/${normalizeReferenceRoute(item.id)}`}
 >
-  <div
-    class="text-xl mt-xs text-body-mono break-words break-keep group-hover:underline"
+  <p
+    class="text-body mt-xs text-body-mono break-words break-keep group-hover:underline"
   >
     {item.data.title}
-  </div>
-  <p class="text-sm mt-0">
+  </p>
+  <p class="text-body-caption mt-xxs">
     {
       `${item.data.description.replace(/<[^>]*>/g, "").split(/\.(\s|$)/, 1)[0]}.`
     }

diff --git a/src/components/GridItem/Sketch.astro b/src/components/GridItem/Sketch.astro
@@ -30,10 +30,10 @@ const { item, lazyLoad } = Astro.props;
     height={thumbnailDimensions}
     loading={lazyLoad ? "lazy" : "eager"}
   />
-  <div
-    class="text-xl mt-xs text-wrap break-words break-keep group-hover:underline"
+  <p
+    class="text-body mt-xs text-wrap break-words break-keep group-hover:underline"
   >
     {item.title}
-  </div>
-  <div class="text-sm">{item.fullname}</div>
+  </p>
+  <p class="text-body-caption mt-xxs">{item.fullname}</p>
 </a>
diff --git a/src/components/GridItem/Tutorial.astro b/src/components/GridItem/Tutorial.astro
@@ -0,0 +1,28 @@
+---
+import Image from "@components/Image/index.astro";
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  item: CollectionEntry<"tutorials">;
+  lazyLoad?: boolean;
+}
+
+const { item, lazyLoad } = Astro.props;
+---
+
+<a href={`/tutorials/${item.slug}`} class="group hover:no-underline">
+  {
+    item.data.featuredImageAlt && item.data.featuredImage && (
+      <Image
+        src={item.data.featuredImage}
+        alt={item.data.featuredImageAlt}
+        width="440"
+        loading={lazyLoad ? "lazy" : "eager"}
+      />
+    )
+  }
+  <p class="mt-xs text-body group-hover:underline">
+    {item.data.title}
+  </p>
+  <p class="text-body-caption mt-xxs">{item.data.description}</p>
+</a>
diff --git a/src/layouts/LibrariesLayout.astro b/src/layouts/LibrariesLayout.astro
@@ -62,7 +62,7 @@ setJumpToState({
   variant="item"
   topic="community"
 >
-  <div class="rendered-markdown !max-w-screen-lg">
+  <div class="rendered-markdown">
     <Content />
   </div>
 

diff --git a/src/layouts/TextDetailLayout.astro b/src/layouts/TextDetailLayout.astro
@@ -31,7 +31,7 @@ setJumpToState(null);
   className={pageTopic}
   subtitle={null}
 >
-  <div class="max-w-screen-lg [&>*:first-child]:mt-0 rendered-markdown">
+  <div class="max-w-screen-md [&>*:first-child]:mt-0 rendered-markdown">
     <Content />
   </div>
 </BaseLayout>
diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro
@@ -61,7 +61,7 @@ const relatedExamples =
 >
   {entry.data.authors && <h6>By {entry.data.authors.join(", ")}</h6>}
   {entry.data.authorsNote && <h7>{entry.data.authorsNote}</h7>}
-  <div class="rendered-markdown !max-w-screen-lg">
+  <div class="rendered-markdown">
     <Content
       components={{
         ...components,

diff --git a/src/layouts/TutorialsLayout.astro b/src/layouts/TutorialsLayout.astro
@@ -2,11 +2,11 @@
 import { type CollectionEntry } from "astro:content";
 import Head from "@components/Head/index.astro";
 import BaseLayout from "./BaseLayout.astro";
-import Image from "@components/Image/index.astro";
 import { setJumpToState, type JumpToLink } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { categories } from "../content/tutorials/config";
 import LinkButton from "@components/LinkButton/index.astro";
+import GridItemTutorial from "@components/GridItem/Tutorial.astro";
 
 type TutorialEntry = CollectionEntry<"tutorials">;
 
@@ -27,13 +27,17 @@ const sections = categories.map((slug) => {
   return { slug, name, sectionEntries };
 });
 
-const pageJumpToLinks = categories.map((category) => ({
-  url: `#${category}`,
-  label: t("tutorialCategories", category),
-})).concat([{
-  url: '#education-resources',
-  label: t("tutorialsPage", "education-resources"),
-}]);
+const pageJumpToLinks = categories
+  .map((category) => ({
+    url: `#${category}`,
+    label: t("tutorialCategories", category),
+  }))
+  .concat([
+    {
+      url: "#education-resources",
+      label: t("tutorialsPage", "education-resources"),
+    },
+  ]);
 
 setJumpToState({
   links: pageJumpToLinks as JumpToLink[],
@@ -52,31 +56,18 @@ setJumpToState({
         <ul class="content-grid pb-4xl mb-lg border-b border-sidebar-type-color last:border-0 ">
           {sectionEntries.map((entry: TutorialEntry, i: number) => (
             <li class="col-span-3">
-              <a
-                href={`/tutorials/${entry.slug}`}
-                class="group hover:no-underline"
-              >
-                {entry.data.featuredImageAlt && entry.data.featuredImage && (
-                  <Image
-                    src={entry.data.featuredImage}
-                    alt={entry.data.featuredImageAlt}
-                    width="440"
-                    loading={i <= 3 ? "eager" : "lazy"}
-                  />
-                )}
-                <p class="mt-sm text-body group-hover:underline">
-                  {entry.data.title}
-                </p>
-                <p class="text-body-caption mt-xxs">{entry.data.description}</p>
-              </a>
+              <GridItemTutorial item={entry} lazyLoad={i > 3} />
             </li>
           ))}
         </ul>
       </>
     ))
   }
   <section class="mt-md mb-xl">
-    <h2 class="mb-lg">{t("tutorialsPage", "education-resources")}<a id="education-resources"></a></h2>
+    <h2 class="mb-lg">
+      {t("tutorialsPage", "education-resources")}<a id="education-resources"
+      ></a>
+    </h2>
     <p>{t("tutorialsPage", "education-resources-snippet")}</p>
     <LinkButton url="/education-resources" variant="link" class="mt-lg">
       {t("tutorialsPage", "view-education-resources")}

diff --git a/src/pages/_utils.ts b/src/pages/_utils.ts
@@ -379,14 +379,13 @@ export const generateJumpToState = async (
             }) as JumpToLink,
         ),
       );
-
-      const hasCurrent = categoryLinks.some((link) => link.current);
-      // If the current entry is in this category, move this category to the top
-      if (hasCurrent) {
-        jumpToLinks.unshift(...categoryLinks);
-      } else {
-        jumpToLinks.push(...categoryLinks);
-      }
+    }
+    const hasCurrent = categoryLinks.some((link) => link.current);
+    // If the current entry is in this category, move this category to the top
+    if (hasCurrent) {
+      jumpToLinks.unshift(...categoryLinks);
+    } else {
+      jumpToLinks.push(...categoryLinks);
     }
   }
 

diff --git a/styles/code-editor.scss b/styles/code-editor.scss
@@ -3,7 +3,15 @@
   padding: var(--spacing-sm);
 }
 
+.cm-editor * {
+  font-family: var(--font-serif), monospace;
+}
+
 .cm-scroller,
 .cm-editor {
   border-radius: 20px;
 }
+
+.cm-focused {
+  outline-offset: -1px;
+}