reading time & last updated indicator designs

website/src/Layout.tsx

@@ -51,10 +51,12 @@ import {
 } from '@edgeandnode/gds/icons'
 
 import {
+  CalendarIcon,
   Callout,
   CodeBlock,
   DocSearch,
   Heading,
+  HourglassIcon,
   Image,
   Link,
   type LinkProps,
@@ -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 readingTime={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
@@ -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 date={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="" />
@@ -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

website/src/components/CalendarIcon.tsx

@@ -0,0 +1,37 @@
+import type { WithOptional } from '@edgeandnode/common'
+import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
+
+interface CalendarIconProps extends WithOptional<IconProps, 'alt'> {
+  date?: number
+}
+
+// TODO: move to gds
+export const CalendarIcon = ({ date = new Date().getDate(), ...props }: CalendarIconProps) => {
+  return (
+    <Icon alt="Calendar Icon" {...props}>
+      <svg 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"
+            >
+              {date}
+            </text>
+          </mask>
+        </defs>
+        <use href="#calendar-path" fill="currentColor" mask="url(#text-mask)" />
+      </svg>
+    </Icon>
+  )
+}

website/src/components/HourglassIcon.tsx

@@ -0,0 +1,41 @@
+import type { WithOptional } from '@edgeandnode/common'
+import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
+
+interface HourglassIconProps extends WithOptional<IconProps, 'alt'> {
+  readingTime?: number
+}
+
+// TODO: move to gds
+export const HourglassIcon = ({ readingTime = 0, ...props }: HourglassIconProps) => {
+  return (
+    <Icon alt="Hourglass Icon" {...props}>
+      <svg 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 - readingTime} width="9" height={readingTime} fill="currentColor" />
+        </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>
+    </Icon>
+  )
+}

website/src/components/index.ts

@@ -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'