docs: Amazingly incredibly sexy docs redesign (#158)

* add dynamic background * add new fonts * add button * tweaks to fonts, colors and sizings * adjust footer text darkmode color * add simple button * work on hero section * adjust colors, disable darkmode (for now) * fix wrong url on button * fix wrong sidebar id * add new icons * cleanup, adjust graphic sizes * compress logo svg, adjust colors, adjust docs sidebar * put installation navbar item to the right * adjust colors, code block, sidebar and pagination * adjust inline code, adjust colors again * adjust online code blocks * add style for flow diagram * cleanup and add descriptions * add makeshift dark mode * adjust algolia search button design and placement * tweak dark mode * restyle table, restyle table of content, fix nav hover * update og image
mrousavy · Sep 30, 2024 · 6d8a4ee · 6d8a4ee
1 parent 377fbd8
commit 6d8a4ee
Show file tree

Hide file tree

Showing 15 changed files with 894 additions and 122 deletions.
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -1,10 +1,11 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
+import { themes as prismThemes } from 'prism-react-renderer';
+import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'Nitro Modules',
-  tagline: 'A framework to build mindblowingly fast native modules with type-safe statically compiled JS bindings.',
+  tagline:
+    'A framework to build mindblowingly fast native modules with type-safe statically compiled JS bindings.',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
@@ -18,7 +19,6 @@ const config: Config = {
   projectName: 'nitro',
   deploymentBranch: 'gh-pages',
   trailingSlash: false,
-
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
@@ -55,37 +55,55 @@ const config: Config = {
       minHeadingLevel: 2,
       maxHeadingLevel: 5,
     },
+    headTags: [
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'stylesheet',
+          href: 'https://api.fontshare.com/css?f[]=clash-display@500&display=swap',
+        },
+      },
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'stylesheet',
+          href: 'https://api.fontshare.com/css?f[]=satoshi@500,600,700&display=swap',
+        },
+      },
+    ],
     colorMode: {
       defaultMode: 'light',
       disableSwitch: false,
       respectPrefersColorScheme: true,
     },
     navbar: {
-      title: 'Nitro',
       logo: {
         alt: 'Nitrous Logo',
-        src: 'img/nos.png',
+        src: 'img/logo.svg',
+        srcDark: 'img/logo-dark.svg',
+        height: 32,
+        width: 160,
       },
       items: [
         {
           type: 'docSidebar',
           sidebarId: 'docs',
-          position: 'left',
+          position: 'right',
           label: 'Docs',
         },
         {
           type: 'doc',
           docId: 'for-users',
-          position: 'left',
+          position: 'right',
           label: 'Installation',
         },
         {
-          type: 'search',
+          href: 'https://github.com/mrousavy/nitro',
+          label: 'GitHub',
           position: 'right',
         },
         {
-          href: 'https://github.com/mrousavy/nitro',
-          label: 'GitHub',
+          type: 'search',
           position: 'right',
         },
       ],
@@ -105,7 +123,7 @@ const config: Config = {
       ignorePatterns: ['/tags/**'],
       filename: 'sitemap.xml',
       createSitemapItems: async (params) => {
-        const {defaultCreateSitemapItems, ...rest} = params;
+        const { defaultCreateSitemapItems, ...rest } = params;
         const items = await defaultCreateSitemapItems(rest);
         return items.filter((item) => !item.url.includes('/page/'));
       },
@@ -153,27 +171,29 @@ const config: Config = {
     metadata: [
       {
         name: 'author',
-        content: 'Marc Rousavy'
+        content: 'Marc Rousavy',
       },
       {
         name: 'keywords',
-        content: 'react, native, nitro, modules, react-native, native, turbo, expo, documentation, coding, docs, guides, marc, rousavy, mrousavy'
+        content:
+          'react, native, nitro, modules, react-native, native, turbo, expo, documentation, coding, docs, guides, marc, rousavy, mrousavy',
       },
       {
         name: 'og:title',
-        content: 'Nitro Documentation'
+        content: 'Nitro Documentation',
       },
       {
         name: 'og:type',
-        content: 'application'
+        content: 'application',
       },
       {
         name: 'og:description',
-        content: 'A framework to build mindblowingly fast native modules with type-safe statically compiled JS bindings.'
+        content:
+          'A framework to build mindblowingly fast native modules with type-safe statically compiled JS bindings.',
       },
       {
         name: 'og:image',
-        content: '/img/social-card.png'
+        content: '/img/social-card.png',
       },
     ],
     prism: {
@@ -192,15 +212,15 @@ const config: Config = {
         {
           className: 'theme-code-block-highlighted-line',
           line: 'highlight-next-line',
-          block: {start: 'highlight-start', end: 'highlight-end'},
+          block: { start: 'highlight-start', end: 'highlight-end' },
         },
         {
           className: 'code-block-diff-add-line',
-          line: 'diff-add'
+          line: 'diff-add',
         },
         {
           className: 'code-block-diff-remove-line',
-          line: 'diff-remove'
+          line: 'diff-remove',
         },
         {
           className: 'code-block-error-line',

diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx
@@ -11,48 +11,50 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
     title: 'Mindblowingly Fast',
-    imageSource: require('@site/static/img/graphic-rocket.png').default,
+    imageSource: require('@site/static/img/lightning-bolt.png').default,
     description: (
       <>
-        Nitro Modules are built ontop of a highly optimized JSI foundation
-        that handles caching and property lookup really well.
-        Nitro's communication layer is incredibly efficient and lightweight in memory!
+        Nitro Modules are built ontop of a highly optimized JSI foundation that
+        handles caching and property lookup really well. Nitro's communication
+        layer is incredibly efficient and lightweight in memory!
       </>
     ),
   },
   {
     title: 'Statically Typed',
-    imageSource: require('@site/static/img/graphic-ladder.png').default,
+    imageSource: require('@site/static/img/dna.png').default,
     description: (
       <>
-        Nitro's code-generator ("Nitrogen") statically generates <b>type-safe</b> C++/Swift/Kotlin
-        types from your TypeScript interfaces.
+        Nitro's code-generator ("Nitrogen") statically generates{' '}
+        <b>type-safe</b> C++/Swift/Kotlin types from your TypeScript interfaces.
         This way you'll never pass wrong types, nulls or undefined again!
       </>
     ),
   },
   {
     title: 'Powerful and Flexible',
-    imageSource: require('@site/static/img/graphic-spring.png').default,
+    imageSource: require('@site/static/img/spring.png').default,
     description: (
       <>
-        Similar to pure JavaScript objects, a "HybridObject" in Nitro can
-        work with almost <b>all JavaScript types</b> such as primitives, typed- or untyped-
-        objects, arrays and even variants or other native objects.
+        Similar to pure JavaScript objects, a "HybridObject" in Nitro can work
+        with almost <b>all JavaScript types</b> such as primitives, typed- or
+        untyped- objects, arrays and even variants or other native objects.
       </>
     ),
   },
 ];
 
-function Feature({title, imageSource, description}: FeatureItem) {
+function Feature({ title, imageSource, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
         <img src={imageSource} className={styles.featureSvg} />
       </div>
       <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+        <Heading as="h3" className={styles.title}>
+          {title}
+        </Heading>
+        <p className={styles.description}>{description}</p>
       </div>
     </div>
   );

diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css
@@ -1,15 +1,50 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 4rem 0;
   width: 100%;
+  border-top: 2px solid #232a3f;
+  background-color: #f0f9ff;
+}
+
+[data-theme='dark'] .features {
+  border-top: 2px solid #4e5b79;
+  background-color: #111625;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 120px;
+  width: 120px;
+  margin-bottom: 1rem;
+}
+
+[data-theme='dark'] .featureSvg {
+  filter: brightness(0.8) contrast(1.2);
 }
 
 .highlight {
   color: var(--ifm-color-accent);
 }
+
+[data-theme='dark'] .highlight {
+  color: var(--ifm-color-accent);
+}
+
+.description {
+  opacity: 0.8;
+}
+
+[data-theme='dark'] .description {
+  opacity: 0.9;
+  color: #a8c4d8;
+}
+
+.title {
+  font-family: 'Clash Display', sans-serif;
+  font-weight: 500;
+  font-size: 1.8rem;
+}
+
+[data-theme='dark'] .title {
+  color: #e0e0e0;
+}