Feat/awesome (#195)

Author: vaynevayne

astro.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig } from 'astro/config';
 import react from "@astrojs/react";
 import starlight from "@astrojs/starlight";
 import starlightTypeDoc, { typeDocSidebarGroup } from 'starlight-typedoc';
+import fs from 'node:fs'
 
 import sitemap from '@astrojs/sitemap';
 
@@ -47,20 +48,23 @@ export default defineConfig({
       './src/layouts/colorvars.css',
     ],
     plugins: [
-      // Generate the documentation.
-      starlightTypeDoc({
-        entryPoints: ['./fabric.js/fabric.ts'],
-        tsconfig: './fabric.js/typedoc.config.json',
-        typeDoc: {
-          plugin: ['typedoc-plugin-no-inherit'],
-          readme: 'none',
-          gitRemote: 'https://github.com/fabricjs/fabric.js/blob',
-          entryFileName: 'index.md',
-          includeVersion: true,
-          sourceLinkExternal: true,
-          sourceLinkTemplate: 'https://github.com/fabricjs/fabric.js/blob/{gitRevision}/{path}#L{line}',
-        },
-      }),
-    ],
+      // Generate the documentation only if local sources exist.
+      // This avoids dev crashes when `fabric.js` sources are not checked out.
+      (fs.existsSync(new URL('./fabric.js/fabric.ts', import.meta.url)) &&
+       fs.existsSync(new URL('./fabric.js/typedoc.config.json', import.meta.url))) &&
+        starlightTypeDoc({
+          entryPoints: ['./fabric.js/fabric.ts'],
+          tsconfig: './fabric.js/typedoc.config.json',
+          typeDoc: {
+            plugin: ['typedoc-plugin-no-inherit'],
+            readme: 'none',
+            gitRemote: 'https://github.com/fabricjs/fabric.js/blob',
+            entryFileName: 'index.md',
+            includeVersion: true,
+            sourceLinkExternal: true,
+            sourceLinkTemplate: 'https://github.com/fabricjs/fabric.js/blob/{gitRevision}/{path}#L{line}',
+          },
+        }),
+    ].filter(Boolean),
   }), react(), sitemap()],
 });

src/components/Header/Header.astro

@@ -25,6 +25,11 @@
             Api specs
           </a>
         </li>
+        <li>
+          <a href="/resources">
+            Resources
+          </a>
+        </li>
         <li>
           <a href="/team">
             Team

src/components/Resources/Resources.astro

@@ -0,0 +1,27 @@
+---
+import './resources.css';
+const links = [
+  {
+    link: 'https://github.com/cs-open/react-fabric',
+    description:
+      ' - A high-extensibility library with a composite style, built with React',
+    name: '@cs-open/react-fabric',
+  },
+];
+---
+
+<section id="resources">
+  <h2>Resources</h2>
+  <ul>
+    {
+      links.map((link) => (
+        <li>
+          <a href={link.link} target="_blank" class="resource-label">
+            {link.name}
+          </a>{' '}
+          &nbsp;<span class="resource-value">{link.description}</span>
+        </li>
+      ))
+    }
+  </ul>
+</section>

src/components/Resources/resources.css

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

src/pages/resources.astro

@@ -0,0 +1,13 @@
+---
+import Layout from '../layouts/Layout.astro';
+import ResourcesList from '../components/Resources/Resources.astro';
+---
+
+<Layout
+  title="Fabric.js Javascript Resources"
+  description="Using fabricjs related projects"
+>
+  <main>
+    <ResourcesList />
+  </main>
+</Layout>