From 53949a6a023d0ddd294372331303392f0a3e9eb2 Mon Sep 17 00:00:00 2001 From: ak Date: Fri, 28 Feb 2025 19:47:46 +0300 Subject: [PATCH 1/6] create and use hourglass icon for the reading time --- website/src/Layout.tsx | 17 +++++++---- website/src/components/HourglassIcon.tsx | 37 ++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 website/src/components/HourglassIcon.tsx diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx index 618db31baffd..d5f998dc81ac 100644 --- a/website/src/Layout.tsx +++ b/website/src/Layout.tsx @@ -65,6 +65,8 @@ import { } from '@/components' import { useI18n } from '@/i18n' +import { HourglassIcon } from './components/HourglassIcon' + const MAX_HEADING_DEPTH = 3 const removeBasePathFromUrl = (url: string) => url.substring((process.env.BASE_PATH ?? '').length) @@ -710,6 +712,15 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef + {readingTime ? ( + // TODO: Use space-600 from the new colors when GDS is updated + + +

+ {Math.ceil(readingTime.minutes)} {t('global.page.readingTime.minutes')} +

+
+ ) : null} {frontMatter.title ? (

{frontMatter.title}

) : null} @@ -730,12 +741,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef

) : null} - {readingTime ? ( -

- {t('global.page.readingTime.title')}: {Math.ceil(readingTime.minutes)}{' '} - {t('global.page.readingTime.minutes')} -

- ) : null} ) : null}
{ + value?: number +} + +export const HourglassIcon = ({ value = 0 }: HourglassIconProps) => { + return ( + + + + + + + + + + + + ) +} From 1d7f036c505bdf7a9f22cf357cc85edb3480f1fd Mon Sep 17 00:00:00 2001 From: ak Date: Fri, 28 Feb 2025 20:25:14 +0300 Subject: [PATCH 2/6] add calendar icon for last edited --- website/src/Layout.tsx | 49 +++++++++++------------- website/src/components/CalendarIcon.tsx | 35 +++++++++++++++++ website/src/components/HourglassIcon.tsx | 6 +-- website/src/components/index.ts | 2 + 4 files changed, 63 insertions(+), 29 deletions(-) create mode 100644 website/src/components/CalendarIcon.tsx diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx index d5f998dc81ac..5b99691afbe7 100644 --- a/website/src/Layout.tsx +++ b/website/src/Layout.tsx @@ -51,10 +51,12 @@ import { } from '@edgeandnode/gds/icons' import { + CalendarIcon, Callout, CodeBlock, DocSearch, Heading, + HourglassIcon, Image, Link, type LinkProps, @@ -65,8 +67,6 @@ import { } from '@/components' import { useI18n } from '@/i18n' -import { HourglassIcon } from './components/HourglassIcon' - const MAX_HEADING_DEPTH = 3 const removeBasePathFromUrl = (url: string) => url.substring((process.env.BASE_PATH ?? '').length) @@ -714,7 +714,7 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef {readingTime ? ( // TODO: Use space-600 from the new colors when GDS is updated - +

{Math.ceil(readingTime.minutes)} {t('global.page.readingTime.minutes')} @@ -724,23 +724,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef{frontMatter.title} ) : null} - {/* TODO: Design "last updated" and "reading time" */} - {lastUpdated ? ( -

- {t('global.page.lastUpdated')}:{' '} - -

- ) : null} ) : null}
{children}
-
+
+ {lastUpdated ? ( + + + {/* TODO: Use space-600 from the new colors when GDS is updated */} +

+ +

+
+ ) : null} {/* TODO: Use `ExperimentalLink` */} @@ -842,11 +844,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef
{t('global.page.onThisPage')}
- {/* TODO: Use `ExperimentalLink` */} - - - {t('global.page.edit')} -
{headings.length > 0 ? (