From fb95a55e75a6867017f38833fad894469c17c660 Mon Sep 17 00:00:00 2001 From: evelyn masso Date: Tue, 30 Apr 2024 16:08:17 -0700 Subject: [PATCH 1/5] fix font and spacing on grid items --- src/components/GridItem/ContributorDoc.astro | 6 +-- src/components/GridItem/Event.astro | 6 +-- src/components/GridItem/Example.astro | 8 ++-- src/components/GridItem/Library.astro | 8 ++-- src/components/GridItem/Person.astro | 17 ++++---- src/components/GridItem/Reference.astro | 8 ++-- src/components/GridItem/Sketch.astro | 8 ++-- src/components/GridItem/Tutorial.astro | 28 +++++++++++++ src/layouts/TutorialsLayout.astro | 43 ++++++++------------ 9 files changed, 75 insertions(+), 57 deletions(-) create mode 100644 src/components/GridItem/Tutorial.astro diff --git a/src/components/GridItem/ContributorDoc.astro b/src/components/GridItem/ContributorDoc.astro index 8eee5c2636..be3be55d33 100644 --- a/src/components/GridItem/ContributorDoc.astro +++ b/src/components/GridItem/ContributorDoc.astro @@ -20,9 +20,9 @@ const { item } = Astro.props; {item.data.title} -
{item.data.description} -
+

diff --git a/src/components/GridItem/Event.astro b/src/components/GridItem/Event.astro index 5e5240dcbc..86adcfcdbe 100644 --- 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" /> -
+

{item.data.title} -

-
{dayString}
+

+

{dayString}

diff --git a/src/components/GridItem/Example.astro b/src/components/GridItem/Example.astro index 42e510ecad..dfe94e61c8 100644 --- 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"} /> -
+

{item.data.title} -

-
+

+

{item.data.oneLineDescription} -

+

diff --git a/src/components/GridItem/Library.astro b/src/components/GridItem/Library.astro index dc1c0d5894..f6c9892843 100644 --- 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" /> -
{item.data.name} -
-
+

+

{description} By {authorsString} -

+

diff --git a/src/components/GridItem/Person.astro b/src/components/GridItem/Person.astro index e61f9ffbe4..489fd5d52c 100644 --- a/src/components/GridItem/Person.astro +++ b/src/components/GridItem/Person.astro @@ -16,12 +16,11 @@ const { item: person } = Astro.props; aspectRatio="square" /> -
- - {person.data.name} - -
-

{person.data.role}

+ + {person.data.name} + +

{person.data.role}

diff --git a/src/components/GridItem/Reference.astro b/src/components/GridItem/Reference.astro index 0c35e3da71..97ae183acc 100644 --- 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)}`} > -
{item.data.title} -
-

+

+

{ `${item.data.description.replace(/<[^>]*>/g, "").split(/\.(\s|$)/, 1)[0]}.` } diff --git a/src/components/GridItem/Sketch.astro b/src/components/GridItem/Sketch.astro index fc3d0ce01a..bce1dd6a1b 100644 --- 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"} /> -

{item.title} -
-
{item.fullname}
+

+

{item.fullname}

diff --git a/src/components/GridItem/Tutorial.astro b/src/components/GridItem/Tutorial.astro new file mode 100644 index 0000000000..2c869f816b --- /dev/null +++ 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; +--- + + + { + item.data.featuredImageAlt && item.data.featuredImage && ( + {item.data.featuredImageAlt} + ) + } +

+ {item.data.title} +

+

{item.data.description}

+ diff --git a/src/layouts/TutorialsLayout.astro b/src/layouts/TutorialsLayout.astro index 17173b1c69..6c0b735755 100644 --- 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,23 +56,7 @@ setJumpToState({ @@ -76,7 +64,10 @@ setJumpToState({ )) }
-

{t("tutorialsPage", "education-resources")}

+

+ {t("tutorialsPage", "education-resources")} +

{t("tutorialsPage", "education-resources-snippet")}

{t("tutorialsPage", "view-education-resources")} From 4d4d9d327ee24fdaa68233a415d44caf31ee210c Mon Sep 17 00:00:00 2001 From: evelyn masso Date: Tue, 30 Apr 2024 16:11:18 -0700 Subject: [PATCH 2/5] standardize content width to screen-md --- src/layouts/LibrariesLayout.astro | 2 +- src/layouts/TextDetailLayout.astro | 2 +- src/layouts/TutorialLayout.astro | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layouts/LibrariesLayout.astro b/src/layouts/LibrariesLayout.astro index 86e7f2fb44..7afd7f7965 100644 --- a/src/layouts/LibrariesLayout.astro +++ b/src/layouts/LibrariesLayout.astro @@ -62,7 +62,7 @@ setJumpToState({ variant="item" topic="community" > -
+
diff --git a/src/layouts/TextDetailLayout.astro b/src/layouts/TextDetailLayout.astro index 9bb709ac4b..6eda070b81 100644 --- a/src/layouts/TextDetailLayout.astro +++ b/src/layouts/TextDetailLayout.astro @@ -31,7 +31,7 @@ setJumpToState(null); className={pageTopic} subtitle={null} > -
+
diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro index aba7d873e4..d8374f5467 100644 --- a/src/layouts/TutorialLayout.astro +++ b/src/layouts/TutorialLayout.astro @@ -61,7 +61,7 @@ const relatedExamples = > {entry.data.authors &&
By {entry.data.authors.join(", ")}
} {entry.data.authorsNote && {entry.data.authorsNote}} -
+
Date: Tue, 30 Apr 2024 16:20:17 -0700 Subject: [PATCH 3/5] use courier in editable code blocks --- styles/code-editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/code-editor.scss b/styles/code-editor.scss index 475aaec077..d42e4bd427 100644 --- a/styles/code-editor.scss +++ b/styles/code-editor.scss @@ -3,6 +3,10 @@ padding: var(--spacing-sm); } +.cm-editor * { + font-family: var(--font-serif), monospace; +} + .cm-scroller, .cm-editor { border-radius: 20px; From 315ca2818bf191011e0e02c5e73d9578e970afe8 Mon Sep 17 00:00:00 2001 From: evelyn masso Date: Tue, 30 Apr 2024 16:23:44 -0700 Subject: [PATCH 4/5] inset code mirror select halo --- styles/code-editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/code-editor.scss b/styles/code-editor.scss index d42e4bd427..b3681d2607 100644 --- a/styles/code-editor.scss +++ b/styles/code-editor.scss @@ -11,3 +11,7 @@ .cm-editor { border-radius: 20px; } + +.cm-focused { + outline-offset: -1px; +} From d9ae5083251480295ef9d87f719fe732875659ca Mon Sep 17 00:00:00 2001 From: evelyn masso Date: Tue, 30 Apr 2024 16:57:24 -0700 Subject: [PATCH 5/5] show all categories in example page jump to links --- src/pages/_utils.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/_utils.ts b/src/pages/_utils.ts index 92e153b445..1b6bf68109 100644 --- 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); } }