Home page features

docs/index.md

@@ -1,5 +1,6 @@
 ---
 slug: /
+title: Introduction
 sidebar_position: 1
 ---
 

docusaurus.config.js

@@ -7,14 +7,12 @@
 import 'dotenv/config'
 import { themes as prismThemes } from 'prism-react-renderer'
 import tailwindPlugin from './plugins/tailwind-config.cjs'
-import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Syncosaurus',
   tagline:
-    'Syncosaurus is a React-and-Javascript-based framework for building real-time, collaborative React applications backed by the Cloudflare edge network of Workers and Durable Objects.',
+    'An open-source framework for real-time, collaborative web applications',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
@@ -53,9 +51,7 @@ const config = {
           sidebarPath: './sidebars.js',
           sidebarCollapsed: false,
         },
-        blog: {
-          showReadingTime: true,
-        },
+        blog: false,
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -66,21 +62,22 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // Replace with your project's social card
-      image: 'img/docusaurus-social-card.jpg',
       navbar: {
         title: 'Syncosaurus',
         logo: {
           alt: 'Syncosaurus Logo',
-          src: 'img/logo.svg',
+          src: 'img/icons/logo_transparent.png',
         },
         items: [
           { to: '/case-study', label: 'Case Study', position: 'right' },
           { to: '/team', label: 'The Team', position: 'right' },
           { type: 'doc', label: 'Docs', docId: 'index', position: 'right' },
           {
-            to: 'https://github.com/syncosaurus',
-            label: 'GitHub',
+            type: 'html',
+            value: `
+              <a className="navbar__item" style={ text-decoration: none, color: black } href=https://github.com/syncosaurus>
+                Github <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+              </a>`,
             position: 'right',
           },
         ],
@@ -101,17 +98,27 @@ const config = {
                 to: '/case-study',
               },
               {
-                label: 'Team',
+                label: 'The Team',
                 to: '/team',
               },
               {
-                label: 'GitHub',
-                to: 'https://github.com/syncosaurus',
+                label: 'Docs',
+                to: '/docs',
               },
             ],
           },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Syncosaurus`,
+          {
+            title: 'More',
+            items: [
+              {
+                html: `
+                  <a className="navbar__item" style={ text-decoration: none, color: black } href=https://github.com/syncosaurus>
+                    Github <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" className="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+                  </a>`,
+              },
+            ],
+          },
+        ]
       },
       prism: {
         theme: prismThemes.github,

package.json

@@ -14,6 +14,7 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@babel/plugin-syntax-jsx": "^7.24.1",
     "@docusaurus/core": "3.2.1",
     "@docusaurus/preset-classic": "3.2.1",
     "@emotion/styled": "^11.11.5",

src/components/HomepageFeatures/FadeInSection.jsx

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import useIsVisible from '@site/src/hooks/useIsVisible'
+
+const FadeInSection = ({ children }) => {
+  const sectionRef = useRef();
+  const isVisible = useIsVisible(sectionRef);
+
+  return (
+    <div
+      ref={sectionRef}
+      className={`transition-opacity ease-in duration-700 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default FadeInSection;