feat(): Add a reference on the home to the latest release and link to the repo in resources

src/components/Header/Header.astro

@@ -1,45 +1,33 @@
 <header id="site-header">
-    <a id="logo" href="/">
-      <img alt="Fabric.js logo" src="/logo.svg" width="200" height="63" />
-    </a>
-    <slot />
-    <nav>
-      <ul>
-        <li>
-          <a href="/">
-            Home
-          </a>
-        </li>
-        <li>
-          <a href="/demos">
-            Demos
-          </a>
-        </li>
-        <li>
-          <a href="/docs">
-            Docs
-          </a>
-        </li>
-        <li>
-          <a href="/api">
-            Api specs
-          </a>
-        </li>
-        <li>
-          <a href="/resources">
-            Resources
-          </a>
-        </li>
-        <li>
-          <a href="/team">
-            Team
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </header>
+  <a id="logo" href="/">
+    <img alt="Fabric.js logo" src="/logo.svg" width="200" height="63" />
+  </a>
+  <slot />
+  <nav>
+    <ul>
+      <li>
+        <a href="/"> Home </a>
+      </li>
+      <li>
+        <a href="/demos"> Demos </a>
+      </li>
+      <li>
+        <a href="/docs"> Docs </a>
+      </li>
+      <li>
+        <a href="/api"> Api specs </a>
+      </li>
+      <li>
+        <a href="/resources"> Resources </a>
+      </li>
+      <li>
+        <a href="/team"> Team </a>
+      </li>
+    </ul>
+  </nav>
+</header>
 
-  <style>
+<style>
   #site-header {
     display: flex;
     align-items: center;
@@ -55,7 +43,7 @@
     text-align: center;
     align-self: flex-start;
   }
-  
+
   #site-header > nav {
     position: fixed;
     bottom: 0;
@@ -92,7 +80,7 @@
     z-index: -1;
     pointer-events: none;
   }
-  
+
   #site-header > nav > ul {
     width: 100%;
     display: flex;
@@ -106,7 +94,7 @@
     padding: 0px;
   }
   /*#site-header>nav>ul>li{display:inline-block;width:25%}*/
-  
+
   #site-header > nav > ul > li > a {
     color: var(--font-color-normal);
     display: block;
@@ -121,7 +109,7 @@
   #site-header > nav > ul > li > a:hover {
     color: var(--primary-color);
   }
-  
+
   @media (orientation: landscape) {
     #site-header > nav {
       width: 300px;
@@ -137,13 +125,13 @@
       flex-flow: row nowrap;
       align-items: center; /*vertical alignment; 'stretch' will give full height*/
       justify-content: space-between;
-  
+
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: var(--header-height);
-      padding: 0 var(--padding-left-right);
+      padding: 0 1rem;
       background: #fff;
       /*border-bottom:1px solid #eee;/*#eaeaea*/
       z-index: 9;
@@ -164,9 +152,8 @@
       border-radius: unset;
       padding: 0;
       box-shadow: unset;
-      margin-left: 16px;
     }
-  
+
     #site-header > nav > ul > li > a {
       height: var(--header-height);
       padding: 24px 0;
@@ -177,4 +164,4 @@
       box-shadow: 0 -3px 0 0 var(--primary-color) inset;
     }
   }
-  </style>
+</style>

src/components/Header/HeaderWithSearch.astro

@@ -4,5 +4,5 @@ import Header from './Header.astro';
 ---
 
 <Header>
-    <Search {...Astro.props} />
-</Header>
+  <Search {...Astro.props} />
+</Header>

src/components/LatestRelease/LatestRelease.astro

@@ -0,0 +1,72 @@
+---
+export interface Props {
+  version?: string;
+  url?: string;
+  subtitle?: string;
+}
+const {
+  version = '6.9.0',
+  url = 'https://github.com/fabricjs/fabric.js/releases',
+  subtitle = 'Download latest release from GitHub',
+} = Astro.props as Props;
+---
+
+<a
+  class="release-card"
+  href={url}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label="Fabric.js latest releases on GitHub"
+>
+  <span class="icon" aria-hidden="true">
+    <!-- GitHub Mark (simple) -->
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.2 1.87.86 2.33.66.07-.52.28-.86.51-1.06-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      ></path>
+    </svg>
+  </span>
+  <span class="content">
+    <strong class="title">Latest release {version}</strong>
+    <span class="subtitle">{subtitle}</span>
+  </span>
+</a>
+
+<style>
+  .release-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0.75rem;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: var(--color-text, #111);
+    text-decoration: none;
+    max-width: fit-content;
+    margin: 20px auto;
+    transition:
+      transform 0.12s ease,
+      box-shadow 0.12s ease;
+  }
+  .release-card .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 8px;
+  }
+  .release-card .subtitle {
+    display: block;
+    font-size: 0.75rem
+    color: rgba(0, 0, 0, 0.6);
+  }
+</style>

src/components/Resources/Resources.astro

@@ -1,6 +1,11 @@
 ---
 import './resources.css';
 const links = [
+  {
+    link: 'https://github.com/fabricjs/fabric.js',
+    name: '@fabricjs/fabric.js',
+    description: ' - The powerful and simple javascript HTML Canvas library',
+  },
   {
     link: 'https://github.com/cs-open/react-fabric',
     description:
@@ -18,8 +23,8 @@ const links = [
         <li>
           <a href={link.link} target="_blank" class="resource-label">
             {link.name}
-          </a>{' '}
-          &nbsp;<span class="resource-value">{link.description}</span>
+          </a>
+          <span class="resource-value">{link.description}</span>
         </li>
       ))
     }

src/components/Resources/resources.css

@@ -1,10 +1,19 @@
 #resources {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-items: center;
-
-}
-#resources .resource-label{
-    color: var(--primary-color)
-}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+}
+#resources ul {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+#resources li {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+#resources .resource-label {
+  color: var(--primary-color);
+}

src/content/docs/api/classes/Canvas.md

@@ -1354,6 +1354,27 @@ Defined in: [src/canvas/Canvas.ts:898](https://github.com/fabricjs/fabric.js/blo
 
 ***
 
+### \_chooseObjectsToRender()
+
+> **\_chooseObjectsToRender**(): [`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
+
+Defined in: [src/canvas/SelectableCanvas.ts:376](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/canvas/SelectableCanvas.ts#L376)
+
+Divides objects in two groups, one to render immediately
+and one to render as activeGroup.
+
+#### Returns
+
+[`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
+
+objects to render immediately and pushes the other in the activeGroup.
+
+#### Inherited from
+
+`SelectableCanvas._chooseObjectsToRender`
+
+***
+
 ### \_discardActiveObject()
 
 > **\_discardActiveObject**(`e?`, `object?`): `this is { _activeObject: undefined }`
@@ -1390,27 +1411,6 @@ true if the active object has been discarded
 
 ***
 
-### \_chooseObjectsToRender()
-
-> **\_chooseObjectsToRender**(): [`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
-
-Defined in: [src/canvas/SelectableCanvas.ts:376](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/canvas/SelectableCanvas.ts#L376)
-
-Divides objects in two groups, one to render immediately
-and one to render as activeGroup.
-
-#### Returns
-
-[`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
-
-objects to render immediately and pushes the other in the activeGroup.
-
-#### Inherited from
-
-`SelectableCanvas._chooseObjectsToRender`
-
-***
-
 ### \_onStackOrderChanged()
 
 > **\_onStackOrderChanged**(): `void`

src/content/docs/api/classes/FabricText.md

@@ -377,6 +377,21 @@ when being scaled via the controls.
 
 ***
 
+### charSpacing
+
+> **charSpacing**: `number`
+
+Defined in: [src/shapes/Text/Text.ts:347](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/shapes/Text/Text.ts#L347)
+
+additional space between characters
+expressed in thousands of em unit
+
+#### Implementation of
+
+`UniqueTextProps.charSpacing`
+
+***
+
 ### clipPath?
 
 > `optional` **clipPath**: [`BaseFabricObject`](/api/classes/basefabricobject/)\<`Partial`\<`ObjectProps`\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>
@@ -843,21 +858,6 @@ null
 
 ***
 
-### charSpacing
-
-> **charSpacing**: `number`
-
-Defined in: [src/shapes/Text/Text.ts:347](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/shapes/Text/Text.ts#L347)
-
-additional space between characters
-expressed in thousands of em unit
-
-#### Implementation of
-
-`UniqueTextProps.charSpacing`
-
-***
-
 ### includeDefaultValues
 
 > **includeDefaultValues**: `boolean`