From 53949a6a023d0ddd294372331303392f0a3e9eb2 Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
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<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="flex items-center gap-1 text-text mb-3">
+                  <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}
@@ -730,12 +741,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
                   </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
diff --git a/website/src/components/HourglassIcon.tsx b/website/src/components/HourglassIcon.tsx
new file mode 100644
index 000000000000..73f7f66ba699
--- /dev/null
+++ b/website/src/components/HourglassIcon.tsx
@@ -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" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask
+        id="hourglassMask"
+        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(#hourglassMask)">
+        <rect x="3.5" y={15 - value} width="9" height={value} 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>
+  )
+}

From 1d7f036c505bdf7a9f22cf357cc85edb3480f1fd Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
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<Nextra
             <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="flex items-center gap-1 text-text mb-3">
+                <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')}
@@ -724,23 +724,6 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
               {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}
             </header>
           ) : null}
           <section
@@ -789,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 text-text gap-1">
+                <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="" />
@@ -842,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
diff --git a/website/src/components/CalendarIcon.tsx b/website/src/components/CalendarIcon.tsx
new file mode 100644
index 000000000000..c3ba4532d061
--- /dev/null
+++ b/website/src/components/CalendarIcon.tsx
@@ -0,0 +1,35 @@
+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>
+    </>
+  )
+}
diff --git a/website/src/components/HourglassIcon.tsx b/website/src/components/HourglassIcon.tsx
index 73f7f66ba699..e066b41ba25b 100644
--- a/website/src/components/HourglassIcon.tsx
+++ b/website/src/components/HourglassIcon.tsx
@@ -6,9 +6,9 @@ interface HourglassIconProps extends ComponentPropsWithoutRef<'svg'> {
 
 export const HourglassIcon = ({ value = 0 }: HourglassIconProps) => {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <mask
-        id="hourglassMask"
+        id="hourglass-mask"
         style={{ maskType: 'alpha' }}
         maskUnits="userSpaceOnUse"
         x="3"
@@ -22,7 +22,7 @@ export const HourglassIcon = ({ value = 0 }: HourglassIconProps) => {
         />
       </mask>
 
-      <g mask="url(#hourglassMask)">
+      <g mask="url(#hourglass-mask)">
         <rect x="3.5" y={15 - value} width="9" height={value} fill="currentColor" />
       </g>
 
diff --git a/website/src/components/index.ts b/website/src/components/index.ts
index b227ed4c9ab1..27d22749aa7c 100644
--- a/website/src/components/index.ts
+++ b/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'

From a7a868c7d500e46d169b57d2a5e177108c670023 Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Fri, 28 Feb 2025 20:34:52 +0300
Subject: [PATCH 3/6] remove fragment

---
 website/src/components/CalendarIcon.tsx | 48 ++++++++++++-------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/website/src/components/CalendarIcon.tsx b/website/src/components/CalendarIcon.tsx
index c3ba4532d061..f39be208868e 100644
--- a/website/src/components/CalendarIcon.tsx
+++ b/website/src/components/CalendarIcon.tsx
@@ -6,30 +6,28 @@ interface CalendarIconProps extends ComponentPropsWithoutRef<'svg'> {
 
 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>
-    </>
+    <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>
   )
 }

From fc7c288faef28a78af076de89e95ceebf58588dd Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Fri, 28 Feb 2025 20:37:04 +0300
Subject: [PATCH 4/6] format

---
 website/src/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
index 5b99691afbe7..0338c0d7ab4f 100644
--- a/website/src/Layout.tsx
+++ b/website/src/Layout.tsx
@@ -774,7 +774,7 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
           </section>
           <div className="col-[container] flex items-center justify-between pb-12">
             {lastUpdated ? (
-              <span className="flex items-center text-text gap-1">
+              <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">

From 80e0cd4a08018db4dd62951e2d0869518fc91ee0 Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Mon, 3 Mar 2025 14:13:42 +0300
Subject: [PATCH 5/6] use ExperimentalIcon, rename props, make default value
 for the CalendarIcon today's date

---
 website/src/Layout.tsx                   |  4 +-
 website/src/components/CalendarIcon.tsx  | 57 +++++++++++-----------
 website/src/components/HourglassIcon.tsx | 61 +++++++++++++-----------
 3 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
index 0338c0d7ab4f..16a136805834 100644
--- a/website/src/Layout.tsx
+++ b/website/src/Layout.tsx
@@ -715,7 +715,7 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
               {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)} />
+                  <HourglassIcon fillPercent={Math.ceil(readingTime.minutes)} />
                   <p className="text-body-small">
                     {Math.ceil(readingTime.minutes)} {t('global.page.readingTime.minutes')}
                   </p>
@@ -775,7 +775,7 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
           <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()} />
+                <CalendarIcon date={lastUpdated.getDate()} />
                 {/* TODO: Use space-600 from the new colors when GDS is updated */}
                 <p className="text-body-xsmall">
                   <time
diff --git a/website/src/components/CalendarIcon.tsx b/website/src/components/CalendarIcon.tsx
index f39be208868e..2c58b59cc6db 100644
--- a/website/src/components/CalendarIcon.tsx
+++ b/website/src/components/CalendarIcon.tsx
@@ -1,33 +1,36 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { WithOptional } from '@edgeandnode/common'
+import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
 
-interface CalendarIconProps extends ComponentPropsWithoutRef<'svg'> {
-  value?: number
+interface CalendarIconProps extends WithOptional<IconProps, 'alt'> {
+  date?: number
 }
 
-export const CalendarIcon = ({ value = 1 }: CalendarIconProps) => {
+export const CalendarIcon = ({ date = new Date().getDate(), ...props }: 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>
+    <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>
   )
 }
diff --git a/website/src/components/HourglassIcon.tsx b/website/src/components/HourglassIcon.tsx
index e066b41ba25b..1bd1ea88aceb 100644
--- a/website/src/components/HourglassIcon.tsx
+++ b/website/src/components/HourglassIcon.tsx
@@ -1,37 +1,40 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { WithOptional } from '@edgeandnode/common'
+import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
 
-interface HourglassIconProps extends ComponentPropsWithoutRef<'svg'> {
-  value?: number
+interface HourglassIconProps extends WithOptional<IconProps, 'alt'> {
+  fillPercent?: number
 }
 
-export const HourglassIcon = ({ value = 0 }: HourglassIconProps) => {
+export const HourglassIcon = ({ fillPercent = 0, ...props }: 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>
+    <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 - value} width="9" height={value} fill="currentColor" />
-      </g>
+        <g mask="url(#hourglass-mask)">
+          <rect x="3.5" y={15 - fillPercent} width="9" height={fillPercent} 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>
+        <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>
   )
 }

From 7866d78c6387a118c117cbe80614d55a2dac8206 Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Fri, 7 Mar 2025 11:33:25 +0300
Subject: [PATCH 6/6] update prop name and add todo for moving to gds

---
 website/src/Layout.tsx                   | 2 +-
 website/src/components/CalendarIcon.tsx  | 1 +
 website/src/components/HourglassIcon.tsx | 7 ++++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
index 16a136805834..752f75eca33e 100644
--- a/website/src/Layout.tsx
+++ b/website/src/Layout.tsx
@@ -715,7 +715,7 @@ function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<Nextra
               {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 fillPercent={Math.ceil(readingTime.minutes)} />
+                  <HourglassIcon readingTime={Math.ceil(readingTime.minutes)} />
                   <p className="text-body-small">
                     {Math.ceil(readingTime.minutes)} {t('global.page.readingTime.minutes')}
                   </p>
diff --git a/website/src/components/CalendarIcon.tsx b/website/src/components/CalendarIcon.tsx
index 2c58b59cc6db..0597550d41df 100644
--- a/website/src/components/CalendarIcon.tsx
+++ b/website/src/components/CalendarIcon.tsx
@@ -5,6 +5,7 @@ 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}>
diff --git a/website/src/components/HourglassIcon.tsx b/website/src/components/HourglassIcon.tsx
index 1bd1ea88aceb..7ff77936ee21 100644
--- a/website/src/components/HourglassIcon.tsx
+++ b/website/src/components/HourglassIcon.tsx
@@ -2,10 +2,11 @@ import type { WithOptional } from '@edgeandnode/common'
 import { ExperimentalIcon as Icon, type ExperimentalIconProps as IconProps } from '@edgeandnode/gds'
 
 interface HourglassIconProps extends WithOptional<IconProps, 'alt'> {
-  fillPercent?: number
+  readingTime?: number
 }
 
-export const HourglassIcon = ({ fillPercent = 0, ...props }: HourglassIconProps) => {
+// 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">
@@ -25,7 +26,7 @@ export const HourglassIcon = ({ fillPercent = 0, ...props }: HourglassIconProps)
         </mask>
 
         <g mask="url(#hourglass-mask)">
-          <rect x="3.5" y={15 - fillPercent} width="9" height={fillPercent} fill="currentColor" />
+          <rect x="3.5" y={15 - readingTime} width="9" height={readingTime} fill="currentColor" />
         </g>
 
         <path