Skip to content

Commit f327971

Browse files
0xa3k50xa3k5
authored
reading time & last updated indicator designs (#891)
* create and use hourglass icon for the reading time * add calendar icon for last edited * remove fragment * format * use ExperimentalIcon, rename props, make default value for the CalendarIcon today's date * update prop name and add todo for moving to gds
1 parent 8db2b50 commit f327971

File tree

4 files changed

+111
-29
lines changed

4 files changed

+111
-29
lines changed

‎website/src/Layout.tsx

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,12 @@ import {
5151
} from '@edgeandnode/gds/icons'
5252

5353
import {
54+
CalendarIcon,
5455
Callout,
5556
CodeBlock,
5657
DocSearch,
5758
Heading,
59+
HourglassIcon,
5860
Image,
5961
Link,
6062
type LinkProps,
@@ -710,32 +712,18 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
710712
) : null}
711713
{!frontMatter.hideContentHeader ? (
712714
<header className="col-[container] pt-12 transition-[padding] duration-[var(--graph-docs-layout-transition-duration)]">
715+
{readingTime ? (
716+
// TODO: Use space-600 from the new colors when GDS is updated
717+
<span className="mb-3 flex items-center gap-1 text-text">
718+
<HourglassIcon readingTime={Math.ceil(readingTime.minutes)} />
719+
<p className="text-body-small">
720+
{Math.ceil(readingTime.minutes)} {t('global.page.readingTime.minutes')}
721+
</p>
722+
</span>
723+
) : null}
713724
{frontMatter.title ? (
714725
<h1 className="text-heading-large text-white xs:text-heading-xlarge">{frontMatter.title}</h1>
715726
) : null}
716-
{/* TODO: Design "last updated" and "reading time" */}
717-
{lastUpdated ? (
718-
<p className="text-body-small mt-3 text-white/48">
719-
<span>{t('global.page.lastUpdated')}:</span>{' '}
720-
<time
721-
dateTime={lastUpdated.toISOString()}
722-
// Removes hydration errors because `toLocaleDateString` show different results in Node.js and in browser for some languages like `ar`
723-
suppressHydrationWarning
724-
>
725-
{lastUpdated.toLocaleDateString(locale, {
726-
month: 'long',
727-
day: 'numeric',
728-
year: 'numeric',
729-
})}
730-
</time>
731-
</p>
732-
) : null}
733-
{readingTime ? (
734-
<p className="text-body-small mt-3 text-white/48">
735-
{t('global.page.readingTime.title')}: {Math.ceil(readingTime.minutes)}{' '}
736-
{t('global.page.readingTime.minutes')}
737-
</p>
738-
) : null}
739727
</header>
740728
) : null}
741729
<section
@@ -784,7 +772,26 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
784772
>
785773
{children}
786774
</section>
787-
<div className="col-[container] flex justify-end pb-12 group-data-[hide-table-of-contents]/layout-toc-grid:hidden xl:hidden">
775+
<div className="col-[container] flex items-center justify-between pb-12">
776+
{lastUpdated ? (
777+
<span className="flex items-center gap-1 text-text">
778+
<CalendarIcon date={lastUpdated.getDate()} />
779+
{/* TODO: Use space-600 from the new colors when GDS is updated */}
780+
<p className="text-body-xsmall">
781+
<time
782+
dateTime={lastUpdated.toISOString()}
783+
// Removes hydration errors because `toLocaleDateString` show different results in Node.js and in browser for some languages like `ar`
784+
suppressHydrationWarning
785+
>
786+
{lastUpdated.toLocaleDateString(locale, {
787+
month: 'long',
788+
day: 'numeric',
789+
year: 'numeric',
790+
})}
791+
</time>
792+
</p>
793+
</span>
794+
) : null}
788795
{/* TODO: Use `ExperimentalLink` */}
789796
<LegacyLink variant="secondary" href={editPageUrl} target="_blank" size="14px">
790797
<SocialGitHub alt="" />
@@ -837,11 +844,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
837844
>
838845
<header className="mb-4 flex gap-4">
839846
<div>{t('global.page.onThisPage')}</div>
840-
{/* TODO: Use `ExperimentalLink` */}
841-
<LegacyLink variant="secondary" href={editPageUrl} target="_blank" size="14px">
842-
<SocialGitHub alt="" />
843-
{t('global.page.edit')}
844-
</LegacyLink>
845847
</header>
846848
{headings.length > 0 ? (
847849
<nav

‎website/src/components/CalendarIcon.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { WithOptional } from '@edgeandnode/common'
2+
import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
3+
4+
interface CalendarIconProps extends WithOptional<IconProps, 'alt'> {
5+
date?: number
6+
}
7+
8+
// TODO: move to gds
9+
export const CalendarIcon = ({ date = new Date().getDate(), ...props }: CalendarIconProps) => {
10+
return (
11+
<Icon alt="Calendar Icon" {...props}>
12+
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
13+
<defs>
14+
<path
15+
id="calendar-path"
16+
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"
17+
/>
18+
<mask id="text-mask">
19+
<rect width="16" height="16" fill="white" />
20+
<text
21+
x="8"
22+
y="10"
23+
textAnchor="middle"
24+
dominantBaseline="middle"
25+
fill="black"
26+
fontSize="7px"
27+
fontWeight="bold"
28+
>
29+
{date}
30+
</text>
31+
</mask>
32+
</defs>
33+
<use href="#calendar-path" fill="currentColor" mask="url(#text-mask)" />
34+
</svg>
35+
</Icon>
36+
)
37+
}

‎website/src/components/HourglassIcon.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { WithOptional } from '@edgeandnode/common'
2+
import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
3+
4+
interface HourglassIconProps extends WithOptional<IconProps, 'alt'> {
5+
readingTime?: number
6+
}
7+
8+
// TODO: move to gds
9+
export const HourglassIcon = ({ readingTime = 0, ...props }: HourglassIconProps) => {
10+
return (
11+
<Icon alt="Hourglass Icon" {...props}>
12+
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
13+
<mask
14+
id="hourglass-mask"
15+
style={{ maskType: 'alpha' }}
16+
maskUnits="userSpaceOnUse"
17+
x="3"
18+
y="1"
19+
width="10"
20+
height="14"
21+
>
22+
<path
23+
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"
24+
fill="white"
25+
/>
26+
</mask>
27+
28+
<g mask="url(#hourglass-mask)">
29+
<rect x="3.5" y={15 - readingTime} width="9" height={readingTime} fill="currentColor" />
30+
</g>
31+
32+
<path
33+
fillRule="evenodd"
34+
clipRule="evenodd"
35+
fill="currentColor"
36+
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"
37+
/>
38+
</svg>
39+
</Icon>
40+
)
41+
}

‎website/src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
export * from './CalendarIcon'
12
export * from './Callout'
23
export * from './Card'
34
export * from './CodeBlock'
45
export * from './DocSearch'
56
export * from './Heading'
7+
export * from './HourglassIcon'
68
export * from './Image'
79
export * from './Link'
810
export * from './Navigation'

0 commit comments

Comments
 (0)