Merge pull request #26 from tiktok/octogonz/website-fixes

Some cosmetic fixes for the website

apps/website/docs/index.md

@@ -4,10 +4,25 @@ hide_title: true
 custom_edit_url: null
 ---
 
+import { ThemedImage } from '@site/src/components/ThemedImage';
+
 <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-  <img src="images/site/sparo-logo.svg" alt="Sparo" title="Sparo" style={{ width: '380px', paddingTop: '30px' }} />
+  <ThemedImage
+    srcLight="images/site/sparo-logo.svg"
+    srcDark="images/site/sparo-logo-dark.svg"
+    alt="Sparo"
+    title="Sparo"
+    style={{ width: '380px', paddingTop: '30px' }}
+    />
 </div>
 
+> 🚧 UNDER CONSTRUCTION 🚧
+>
+> This is an early test release of the software.
+> It is not yet ready for general usage.
+> If you have questions about this project, let us know
+> using [GitHub discussions](https://github.com/tiktok/sparo/discussions).
+
 ## Clone faster!
 
 Sparo optimizes performance of Git operations for your large frontend monorepo.

apps/website/docs/pages/guide/getting_started.md

@@ -2,6 +2,13 @@
 title: Getting Started
 ---
 
+> 🚧 UNDER CONSTRUCTION 🚧
+>
+> This is an early test release of the software.
+> It is not yet ready for general usage.
+> If you have questions about this project, let us know
+> using [GitHub discussions](https://github.com/tiktok/sparo/discussions).
+
 ## Everyday workflow
 
 ### Step 1: Upgrade Git

apps/website/docusaurus.config.js

@@ -82,7 +82,8 @@ const config = {
         title: '',
         logo: {
           alt: 'Sparo',
-          src: 'images/site/sparo-title.svg'
+          src: 'images/site/sparo-title.svg',
+          srcDark: 'images/site/sparo-title-dark.svg'
         },
         items: [
           {

apps/website/package.json

@@ -20,6 +20,7 @@
     "@algolia/client-search": "^4.22.1",
     "@docusaurus/core": "3.1.1",
     "@docusaurus/preset-classic": "3.1.1",
+    "@docusaurus/theme-common": "3.1.1",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.0",
     "prism-react-renderer": "^2.3.1",

apps/website/src/components/ThemedImage.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+/**
+ * An `<img>` tag with a different URLs for light vs dark mode.
+ */
+const ThemedImage = ({ srcLight, srcDark, alt, title, style }) => {
+  const { colorMode } = useColorMode();
+  const src = colorMode === 'dark' ? srcDark : srcLight;
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <img src={src} alt={alt} title={title} style={style} />
+    </div>
+  );
+};
+
+export { ThemedImage };