Skip to content

reading time & last updated indicator designs #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 7, 2025
Merged

reading time & last updated indicator designs #891

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
53949a6
create and use hourglass icon for the reading time
0xa3k5 Feb 28, 2025
1d7f036
add calendar icon for last edited
0xa3k5 Feb 28, 2025
a7a868c
remove fragment
0xa3k5 Feb 28, 2025
fc7c288
format
0xa3k5 Feb 28, 2025
80e0cd4
use ExperimentalIcon, rename props, make default value for the Calend…
0xa3k5 Mar 3, 2025
7866d78
update prop name and add todo for moving to gds
0xa3k5 Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions website/src/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,12 @@ import {
} from '@edgeandnode/gds/icons'

import {
CalendarIcon,
Callout,
CodeBlock,
DocSearch,
Heading,
HourglassIcon,
Image,
Link,
type LinkProps,
Expand Down Expand Up @@ -710,32 +712,18 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
) : null}
{!frontMatter.hideContentHeader ? (
<header className="col-[container] pt-12 transition-[padding] duration-[var(--graph-docs-layout-transition-duration)]">
{readingTime ? (
// TODO: Use space-600 from the new colors when GDS is updated
<span className="mb-3 flex items-center gap-1 text-text">
<HourglassIcon value={Math.ceil(readingTime.minutes)} />
<p className="text-body-small">
{Math.ceil(readingTime.minutes)} {t('global.page.readingTime.minutes')}
</p>
</span>
) : null}
{frontMatter.title ? (
<h1 className="text-heading-large text-white xs:text-heading-xlarge">{frontMatter.title}</h1>
) : null}
{/* TODO: Design "last updated" and "reading time" */}
{lastUpdated ? (
<p className="text-body-small mt-3 text-white/48">
<span>{t('global.page.lastUpdated')}:</span>{' '}
<time
dateTime={lastUpdated.toISOString()}
// Removes hydration errors because `toLocaleDateString` show different results in Node.js and in browser for some languages like `ar`
suppressHydrationWarning
>
{lastUpdated.toLocaleDateString(locale, {
month: 'long',
day: 'numeric',
year: 'numeric',
})}
</time>
</p>
) : null}
{readingTime ? (
<p className="text-body-small mt-3 text-white/48">
{t('global.page.readingTime.title')}: {Math.ceil(readingTime.minutes)}{' '}
{t('global.page.readingTime.minutes')}
</p>
) : null}
</header>
) : null}
<section
Expand Down Expand Up @@ -784,7 +772,26 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
>
{children}
</section>
<div className="col-[container] flex justify-end pb-12 group-data-[hide-table-of-contents]/layout-toc-grid:hidden xl:hidden">
<div className="col-[container] flex items-center justify-between pb-12">
{lastUpdated ? (
<span className="flex items-center gap-1 text-text">
<CalendarIcon value={lastUpdated.getDate()} />
{/* TODO: Use space-600 from the new colors when GDS is updated */}
<p className="text-body-xsmall">
<time
dateTime={lastUpdated.toISOString()}
// Removes hydration errors because `toLocaleDateString` show different results in Node.js and in browser for some languages like `ar`
suppressHydrationWarning
>
{lastUpdated.toLocaleDateString(locale, {
month: 'long',
day: 'numeric',
year: 'numeric',
})}
</time>
</p>
</span>
) : null}
{/* TODO: Use `ExperimentalLink` */}
<LegacyLink variant="secondary" href={editPageUrl} target="_blank" size="14px">
<SocialGitHub alt="" />
Expand Down Expand Up @@ -837,11 +844,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
>
<header className="mb-4 flex gap-4">
<div>{t('global.page.onThisPage')}</div>
{/* TODO: Use `ExperimentalLink` */}
<LegacyLink variant="secondary" href={editPageUrl} target="_blank" size="14px">
<SocialGitHub alt="" />
{t('global.page.edit')}
</LegacyLink>
</header>
{headings.length > 0 ? (
<nav
Expand Down
33 changes: 33 additions & 0 deletions website/src/components/CalendarIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { ComponentPropsWithoutRef } from 'react'

interface CalendarIconProps extends ComponentPropsWithoutRef<'svg'> {
value?: number
}

export const CalendarIcon = ({ value = 1 }: CalendarIconProps) => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="calendar-path"
d="M13 2H11.5V1.5C11.5 1.36739 11.4473 1.24021 11.3536 1.14645C11.2598 1.05268 11.1326 1 11 1C10.8674 1 10.7402 1.05268 10.6464 1.14645C10.5527 1.24021 10.5 1.36739 10.5 1.5V2H5.5V1.5C5.5 1.36739 5.44732 1.24021 5.35355 1.14645C5.25979 1.05268 5.13261 1 5 1C4.86739 1 4.74021 1.05268 4.64645 1.14645C4.55268 1.24021 4.5 1.36739 4.5 1.5V2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2ZM3 5V3H4.5V3.5C4.5 3.63261 4.55268 3.75979 4.64645 3.85355C4.74021 3.94732 4.86739 4 5 4C5.13261 4 5.25979 3.94732 5.35355 3.85355C5.44732 3.75979 5.5 3.63261 5.5 3.5V3H10.5V3.5C10.5 3.63261 10.5527 3.75979 10.6464 3.85355C10.7402 3.94732 10.8674 4 11 4C11.1326 4 11.2598 3.94732 11.3536 3.85355C11.4473 3.75979 11.5 3.63261 11.5 3.5V3H13V5H3Z"
/>
<mask id="text-mask">
<rect width="16" height="16" fill="white" />
<text
x="8"
y="10"
textAnchor="middle"
dominantBaseline="middle"
fill="black"
fontSize="7px"
fontWeight="bold"
>
{value}
</text>
</mask>
</defs>
<use href="#calendar-path" fill="currentColor" mask="url(#text-mask)" />
</svg>
)
}
37 changes: 37 additions & 0 deletions website/src/components/HourglassIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { ComponentPropsWithoutRef } from 'react'

interface HourglassIconProps extends ComponentPropsWithoutRef<'svg'> {
value?: number
}

export const HourglassIcon = ({ value = 0 }: HourglassIconProps) => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<mask
id="hourglass-mask"
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="3"
y="1"
width="10"
height="14"
>
<path
d="M12.5 4.7275V2.5C12.5 2.23478 12.3946 1.98043 12.2071 1.79289C12.0196 1.60536 11.7652 1.5 11.5 1.5H4.5C4.23478 1.5 3.98043 1.60536 3.79289 1.79289C3.60536 1.98043 3.5 2.23478 3.5 2.5V4.75C3.50046 4.90523 3.53687 5.05824 3.60638 5.19704C3.67589 5.33584 3.7766 5.45665 3.90062 5.55L7.16687 8L3.9 10.45C3.77605 10.5434 3.67543 10.6642 3.60603 10.803C3.53663 10.9418 3.50034 11.0948 3.5 11.25V13.5C3.5 13.7652 3.60536 14.0196 3.79289 14.2071C3.98043 14.3946 4.23478 14.5 4.5 14.5H11.5C11.7652 14.5 12.0196 14.3946 12.2071 14.2071C12.3946 14.0196 12.5 13.7652 12.5 13.5V11.2725C12.5 11.1178 12.4641 10.9652 12.3951 10.8267C12.3262 10.6882 12.226 10.5676 12.1025 10.4744L8.82875 8L12.1025 5.52563C12.2258 5.43224 12.3258 5.31161 12.3948 5.17315C12.4638 5.0347 12.4998 4.88218 12.5 4.7275Z"
fill="white"
/>
</mask>

<g mask="url(#hourglass-mask)">
<rect x="3.5" y={15 - value} width="9" height={value} fill="currentColor" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if value is a ridiculously huge number? :P

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

screenshot@2x
it works till this number, after that it just doesnt render the mask, i think this edge case is negligible wdyt?

</g>

<path
fillRule="evenodd"
clipRule="evenodd"
fill="currentColor"
d="M12.1025 5.52563C12.2258 5.43224 12.3258 5.31161 12.3948 5.17315C12.4638 5.0347 12.4998 4.88218 12.5 4.7275V2.5C12.5 2.23478 12.3946 1.98043 12.2071 1.79289C12.0196 1.60536 11.7652 1.5 11.5 1.5H4.5C4.23478 1.5 3.98043 1.60536 3.79289 1.79289C3.60536 1.98043 3.5 2.23478 3.5 2.5V4.75C3.50046 4.90523 3.53687 5.05824 3.60638 5.19704C3.67589 5.33584 3.7766 5.45665 3.90062 5.55L7.16687 8L3.9 10.45C3.77605 10.5434 3.67543 10.6642 3.60603 10.803C3.53663 10.9418 3.50034 11.0948 3.5 11.25V13.5C3.5 13.7652 3.60536 14.0196 3.79289 14.2071C3.98043 14.3946 4.23478 14.5 4.5 14.5H11.5C11.7652 14.5 12.0196 14.3946 12.2071 14.2071C12.3946 14.0196 12.5 13.7652 12.5 13.5V11.2725C12.5 11.1178 12.4641 10.9652 12.3951 10.8267C12.3262 10.6882 12.226 10.5676 12.1025 10.4744L8.82875 8L12.1025 5.52563ZM7.99868 7.37388L11.4988 4.72844C11.4988 4.72845 11.4988 4.72843 11.4988 4.72844C11.4991 4.72815 11.4995 4.72777 11.4997 4.72734C11.4999 4.72693 11.5 4.72648 11.5 4.72603C11.5 4.726 11.5 4.72605 11.5 4.72603V2.5H4.5V4.74724C4.50003 4.74794 4.50021 4.74864 4.50052 4.74927C4.50085 4.74993 4.50132 4.7505 4.5019 4.75096C4.50187 4.75093 4.50193 4.75098 4.5019 4.75096L7.99868 7.37388ZM7.99871 8.62614L4.50174 11.2487C4.5017 11.2487 4.50178 11.2487 4.50174 11.2487C4.5015 11.2489 4.50117 11.2492 4.50097 11.2494C4.50077 11.2497 4.50112 11.2491 4.50097 11.2494C4.50069 11.25 4.50002 11.2514 4.5 11.252V13.5H11.5V11.2725L7.99871 8.62614Z"
/>
</svg>
)
}
2 changes: 2 additions & 0 deletions website/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
export * from './CalendarIcon'
export * from './Callout'
export * from './Card'
export * from './CodeBlock'
export * from './DocSearch'
export * from './Heading'
export * from './HourglassIcon'
export * from './Image'
export * from './Link'
export * from './Navigation'
Expand Down