diff --git a/src/components/ReferenceDirectory/index.astro b/src/components/ReferenceDirectory/index.astro new file mode 100644 index 0000000000..ee13f92967 --- /dev/null +++ b/src/components/ReferenceDirectory/index.astro @@ -0,0 +1,92 @@ +--- +import type { ReferenceDocContentItem } from "@/src/content/types"; +import flask from "@src/content/ui/images/icons/flask.svg?raw"; +import warning from "@src/content/ui/images/icons/warning.svg?raw"; + +type ReferenceDirectoryEntry = ReferenceDocContentItem & { + data: { + path: string; + title: string; + description: string; + beta?: boolean; + deprecated?: boolean; + }; +}; + +interface Props { + categoryData: { + name: string; + subcats: { + name: string; + entry?: ReferenceDirectoryEntry; + entries: ReferenceDirectoryEntry[]; + }[]; + }[]; +} + +const { categoryData } = Astro.props; + +const getOneLineDescription = (description: string): string => { + const firstParagraphRegex = /^

(.*?)<\/p>/; + let [oneLineDescription] = + description.replace(/\n/g, " ").trim().match(firstParagraphRegex) ?? []; + + if (!oneLineDescription && description) oneLineDescription = description; + + return ( + oneLineDescription + ?.replace(/^

|<\/p>$/g, "") + .replace(/<\/?code>/g, "") + .replace(/(\d+?)(\d+?)<\/sup><\/var>/g, "$1^$2") + .replace(/|<\/a>/g, "") + .split(/\.\s|\?\s|!\s|।\s|。/)[0] ?? "" + ); +}; +--- +

\ No newline at end of file diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx index 5ce59bcd73..a31c922343 100644 --- a/src/components/ReferenceDirectoryWithFilter/index.tsx +++ b/src/components/ReferenceDirectoryWithFilter/index.tsx @@ -1,202 +1,17 @@ -import type { ReferenceDocContentItem } from "@/src/content/types"; -import { useMemo, useRef, useState } from "preact/hooks"; +import { useRef, useState } from "preact/hooks"; import { type JSX } from "preact"; import { Icon } from "../Icon"; -import flask from "@src/content/ui/images/icons/flask.svg?raw"; -import warning from "@src/content/ui/images/icons/warning.svg?raw"; - -type ReferenceDirectoryEntry = ReferenceDocContentItem & { - data: { - path: string; - title: string; - description: string; - }; -}; - -type FilteredCategoryData = { - name: string; - subcats: { - name: string; - entries: ReferenceDirectoryEntry[]; - }[]; -}; type ReferenceDirectoryWithFilterProps = { - categoryData: { - name: string; - subcats: { - name: string; - entry?: ReferenceDirectoryEntry; - entries: ReferenceDirectoryEntry[]; - }[]; - }[]; uiTranslations: { [key: string]: string }; }; -/** - * Convert Reference description to one-line description - * @param description String description - * @returns One-line description - */ -const getOneLineDescription = (description: string): string => { - // Matches first paragraph tag, remove HTML tags, then trim to first fullstop - const firstParagraphRegex = /^

(.*?)<\/p>/; - let [oneLineDescription] = - description.replace(/\n/g, " ").trim().match(firstParagraphRegex) ?? []; - - if (!oneLineDescription && description) { - oneLineDescription = description; - } - - if (oneLineDescription) { - oneLineDescription = oneLineDescription - .replace(/^

|<\/p>$/g, "") - .replace(/<\/?code>/g, "") - .replace(/(\d+?)(\d+?)<\/sup><\/var>/g, "$1^$2") - .replace(/|<\/a>/g, "") - .split(/\.\s|\?\s|!\s|।\s|。/)[0]; - } - - return oneLineDescription ?? ""; -}; - export const ReferenceDirectoryWithFilter = ({ - categoryData, uiTranslations, }: ReferenceDirectoryWithFilterProps) => { const [searchKeyword, setSearchKeyword] = useState(""); const inputRef = useRef(null); - const filteredEntries = useMemo(() => { - if (!searchKeyword) return categoryData; - - return categoryData.reduce((acc: FilteredCategoryData[], category) => { - const filteredSubcats = category.subcats.reduce( - (subAcc: typeof category.subcats, subcat) => { - const filteredEntries = subcat.entries.filter((entry) => - entry.data.title - .toLowerCase() - .includes(searchKeyword.toLowerCase()), - ); - if ( - subcat.entry && - subcat.entry.data.title - .toLowerCase() - .includes(searchKeyword.toLowerCase()) - ) { - filteredEntries.push(subcat.entry); - } - - if (filteredEntries.length > 0) { - subAcc.push({ ...subcat, entries: filteredEntries }); - } - return subAcc; - }, - [], - ); - - if (filteredSubcats.length > 0) { - acc.push({ ...category, subcats: filteredSubcats }); - } - return acc; - }, []); - }, [categoryData, searchKeyword]); - - const renderEntries = (entries: ReferenceDirectoryEntry[]) => - entries.length === 0 ? null : ( -

- {entries.map((entry) => ( -
- - - {entry.data.beta && ( -
- )} - {entry.data.deprecated && ( -
- )} - - -

{`${getOneLineDescription(entry.data.description)}`}

- -
- ))} -
- ); - - const subcatShouldHaveHeading = ( - subcat: { name: string }, - category: { name: string }, - ) => { - return !(!subcat.name || !category.name); - }; - - const getSubcatHeading = ( - subcat: { name: string; entry?: any }, - category: { name: string }, - ) => { - if (!subcatShouldHaveHeading(subcat, category)) { - return null; - } - - return ( - <> - {subcat.entry ? ( - -

{subcat.name}

- - ) : ( -

- {subcat.name} -

- )} - - ); - }; - - const renderCategoryData = () => { - if (filteredEntries.length === 0) { - return
{uiTranslations["No Results"]}
; - } - return filteredEntries.map((category) => ( -
-

- {category.name} -

- {category.subcats.map((subcat) => ( -
- {getSubcatHeading(subcat, category)} - {renderEntries(subcat.entries)} -
- ))} -
- )); - }; - const clearInput = () => { if (inputRef.current) { inputRef.current.value = ""; @@ -207,7 +22,7 @@ export const ReferenceDirectoryWithFilter = ({ return (
); }; diff --git a/src/content/ui/en.yaml b/src/content/ui/en.yaml index 5d09de5fd1..10668607fe 100644 --- a/src/content/ui/en.yaml +++ b/src/content/ui/en.yaml @@ -122,6 +122,7 @@ exampleCategories: Classes And Objects: "Classes And Objects" Loading And Saving Data: "Loading And Saving Data" Math And Physics: "Math And Physics" + Parallel Loading Promise: "Parallel Loading Promise" referenceCategories: modules: Foundation: Foundation diff --git a/src/content/ui/es.yaml b/src/content/ui/es.yaml index 2fec30651e..e77f7ceff8 100644 --- a/src/content/ui/es.yaml +++ b/src/content/ui/es.yaml @@ -51,7 +51,23 @@ briefPageDescriptions: People: Conoce al equipo de p5.js. exampleCategories: - Featured: Destacado + Featured: "Destacado" + Shapes And Color: "Formas y Color" + Animation And Variables: "Animación y Variables" + Imported Media: "Medios Importados" + Input Elements: "Elementos de Entrada" + Transformation: "Transformación" + Calculating Values: "Cálculo de Valores" + Repetition: "Repetición" + Listing Data with Arrays: "Listar Datos con Arreglos" + Angles And Motion: "Ángulos y Movimiento" + Games: "Juegos" + 3D: "3D" + Advanced Canvas Rendering: "Renderizado Avanzado de Canvas" + Classes And Objects: "Clases y Objetos" + Loading And Saving Data: "Cargar y Guardar Datos" + Math And Physics: "Matemáticas y Física" + Parallel Loading Promise: "Carga Paralela con Promise" referenceCategories: modules: diff --git a/src/content/ui/hi.yaml b/src/content/ui/hi.yaml index be22ec3f79..7f03c332c4 100644 --- a/src/content/ui/hi.yaml +++ b/src/content/ui/hi.yaml @@ -51,8 +51,23 @@ briefPageDescriptions: People: p5.js टीम को जानें। exampleCategories: - Featured: प्रमुख - + "Featured": "विशेष" + "Shapes And Color": "आकार और रंग" + "Animation And Variables": "एनीमेशन और चर" + "Imported Media": "आयातित मीडिया" + "Input Elements": "इनपुट तत्व" + "Transformation": "रूपांतरण" + "Calculating Values": "मानों की गणना" + "Repetition": "पुनरावृत्ति" + "Listing Data with Arrays": "एरे के साथ डेटा सूचीबद्ध करना" + "Angles And Motion": "कोण और गति" + "Games": "खेल" + "3D": "3D" + "Advanced Canvas Rendering": "उन्नत कैनवास रेंडरिंग" + "Classes And Objects": "क्लास और ऑब्जेक्ट्स" + "Loading And Saving Data": "डेटा लोड करना और सहेजना" + "Math And Physics": "गणित और भौतिकी" + "Parallel Loading Promise": "समानांतर लोडिंग प्रॉमिस" referenceCategories: modules: Typography: टाइपोग्राफी diff --git a/src/content/ui/ko.yaml b/src/content/ui/ko.yaml index cf8fd106f7..5648a780b2 100644 --- a/src/content/ui/ko.yaml +++ b/src/content/ui/ko.yaml @@ -48,6 +48,25 @@ briefPageDescriptions: Libraries: 커뮤니티가 만든 라이브러리로 p5.js의 가능성을 확장하세요. About: p5.js의 미션, 가치 및 주요 인물에 대해 알아보세요. People: p5.js 팀을 알아보세요. +exampleCategories: + Featured: "추천" + Shapes And Color: "도형과 색상" + Animation And Variables: "애니메이션과 변수" + Imported Media: "미디어 불러오기" + Input Elements: "입력 요소" + Transformation: "변환" + Calculating Values: "값 계산" + Repetition: "반복" + Listing Data with Arrays: "배열로 데이터 나열하기" + Angles And Motion: "각도와 움직임" + Games: "게임" + 3D: "3D" + Advanced Canvas Rendering: "고급 캔버스 렌더링" + Classes And Objects: "클래스와 객체" + Loading And Saving Data: "데이터 불러오기 및 저장하기" + Math And Physics: "수학과 물리" + Parallel Loading Promise: "병렬 로딩 Promise" + referenceCategories: modules: Math: 수학 diff --git a/src/content/ui/zh-Hans.yaml b/src/content/ui/zh-Hans.yaml index 5559b1f493..e36861174e 100644 --- a/src/content/ui/zh-Hans.yaml +++ b/src/content/ui/zh-Hans.yaml @@ -106,21 +106,22 @@ tutorialsPage: view-education-resources: 查看教育资源 exampleCategories: Featured: "精选" - Shapes And Color: "形状和颜色" - Animation And Variables: "动画和变量" + Shapes And Color: "形状与颜色" + Animation And Variables: "动画与变量" Imported Media: "导入媒体" Input Elements: "输入元素" Transformation: "变换" - Calculating Values: "计算值" + Calculating Values: "数值计算" Repetition: "重复" - Listing Data With Arrays: "使用数组列出数据" - Angles And Motion: "角度和运动" + Listing Data with Arrays: "使用数组列出数据" + Angles And Motion: "角度与运动" Games: "游戏" 3D: "3D" Advanced Canvas Rendering: "高级画布渲染" - Classes And Objects: "类和对象" - Loading And Saving Data: "加载和保存数据" - Math And Physics: "数学和物理" + Classes And Objects: "类与对象" + Loading And Saving Data: "加载与保存数据" + Math And Physics: "数学与物理" + Parallel Loading Promise: "并行加载 Promise" referenceCategories: modules: Foundation: 基础 diff --git a/src/layouts/ReferenceLayout.astro b/src/layouts/ReferenceLayout.astro index 3a952b922a..b6c2e84ef8 100644 --- a/src/layouts/ReferenceLayout.astro +++ b/src/layouts/ReferenceLayout.astro @@ -4,6 +4,7 @@ import Head from "@components/Head/index.astro"; import BaseLayout from "./BaseLayout.astro"; import { ReferenceDirectoryWithFilter } from "@components/ReferenceDirectoryWithFilter/"; import { categories } from "../content/reference/config"; +import ReferenceDirectory from "@components/ReferenceDirectory/index.astro"; import { getRefEntryTitleConcatWithParen, normalizeReferenceRoute, @@ -157,9 +158,9 @@ setJumpToState(pageJumpToState); + - + \ No newline at end of file