Add relative time component for Markdown

Author: webstackdev

.gitattributes

@@ -1 +1,3 @@
 test/e2e/__screenshots__/** filter=lfs diff=lfs merge=lfs -text
+.github/* linguist-vendored=false
+.astro/** linguist-vendored

_TODO.md

@@ -229,10 +229,6 @@ Google Calendar, Apple Calendar,  Yahoo Calender,  Microsoft 365, Outlook, and T
 
 [Relative Time](https://github.com/BryceRussell/astro-github-elements/tree/main/packages/time#readme)
 
-### Display text in a circular layout
-
-[TextCircle](https://github.com/LoStisWorld/astro-textcircle#astro-textcircle)
-
 ## Markdown
 
 ## Code Block and Highlighting

package-lock.json

@@ -68,6 +68,7 @@
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/vercel": "^9.0.2",
     "@axe-core/playwright": "^4.11.0",
+    "@github/relative-time-element": "^5.0.0",
     "@glidejs/glide": "^3.7.1",
     "@googlemaps/extended-component-library": "^0.6.14",
     "@nanostores/lit": "^0.2.3",

package.json

@@ -0,0 +1,41 @@
+---
+type Common = {
+  format: 'datetime'|'relative'|'duration';
+  tense?: 'auto'|'past'|'future';
+  precision?: 'year'|'month'|'day'|'hour'|'minute'|'second';
+  threshold?: string;
+  prefix?: string;
+  formatStyle?: 'long'|'short'|'narrow';
+  second?: 'numeric'|'2-digit';
+  minute?: 'numeric'|'2-digit';
+  hour?: 'numeric'|'2-digit';
+  weekday?: 'short'|'long'|'narrow';
+  day?: 'numeric'|'2-digit';
+  month?: 'numeric'|'2-digit'|'short'|'long'|'narrow';
+  year?: 'numeric'|'2-digit';
+  timeZoneName?: 'long'|'short'|'shortOffset'|'longOffset' |'shortGeneric'|'longGeneric';
+}
+
+export interface Props extends Common {
+  datetime?: Date | string
+  now?: boolean
+}
+
+const { now, datetime, formatStyle, timeZoneName, ...attrs } = Astro.props as Props
+const resolvedDatetime = datetime ?? (now ? new Date() : undefined)
+---
+
+<script>
+  import '@github/relative-time-element'
+</script>
+
+<relative-time
+  datetime={resolvedDatetime instanceof Date ? resolvedDatetime.toISOString() : resolvedDatetime}
+  {...{
+    ...attrs,
+    'format-style':formatStyle,
+    'time-zone-name':timeZoneName,
+  }}
+>
+  <slot />
+</relative-time>

src/components/Time/client/__tests__/index.spec.ts

@@ -225,6 +225,14 @@ Display customer feedback and testimonials:
 
 <Testimonials count={3} />
 
+### Time Component
+
+```markdown
+Let's go to the disco <Time datetime="2026-01-01T00:00:00.000Z" />.
+```
+
+Let's go to the disco <Time datetime="2026-01-01T00:00:00.000Z" />.
+
 ## GFM
 
 ### Footnote

src/components/Time/index.astro

@@ -24,10 +24,11 @@ import Icon from '@components/Icon/index.astro'
 import MastodonModal from '@components/Social/Mastodon/index.astro'
 import Newsletter from '@components/CallToAction/Newsletter/index.astro'
 import Shares from '@components/Social/Shares/index.astro'
+import Time from '@components/Time/index.astro'
 import Testimonials from '@components/Testimonials/index.astro'
 
 /** Export components for use in MDX */
-const Components = { Avatar, Callout, Carousel, Contact, Embed, Featured, Highlighter, Icon, Image, MastodonModal, Newsletter, Picture, Shares, Testimonials }
+const Components = { Avatar, Callout, Carousel, Contact, Embed, Featured, Highlighter, Icon, Image, MastodonModal, Newsletter, Picture, Shares, Testimonials, Time }
 
 export interface Props {
   /** Author name */