feat(website): revamp documentation homepage

README.md

@@ -21,20 +21,16 @@ On iOS, install pods in your app's `ios` directory. Android links automatically
 ## Usage
 
 ```tsx
-import { View } from "react-native";
-import {
-  ReservedRegionsProvider,
-  useReservedRegions,
-} from "react-native-reserved-regions";
+import { View } from 'react-native';
+import { ReservedRegionsProvider, useReservedRegions } from 'react-native-reserved-regions';
 
 function Screen() {
   const fold = useReservedRegions().find(
-    (region) =>
-      region.kind === "division" && region.frame.height > region.frame.width,
+    (region) => region.kind === 'division' && region.frame.height > region.frame.width,
   );
   if (!fold) return <Detail />;
   return (
-    <View style={{ flex: 1, flexDirection: "row" }}>
+    <View style={{ flex: 1, flexDirection: 'row' }}>
       <View style={{ width: fold.frame.x }}>
         <List />
       </View>
@@ -62,12 +58,12 @@ The public type is a tagged union:
 ```ts
 type ReservedRegion =
   | {
-      kind: "division";
+      kind: 'division';
       frame: { x: number; y: number; width: number; height: number };
       occludesContent: boolean;
     }
   | {
-      kind: "occlusion";
+      kind: 'occlusion';
       frame: { x: number; y: number; width: number; height: number };
     };
 ```

website/docusaurus.config.mjs

@@ -3,7 +3,7 @@ import { themes } from 'prism-react-renderer';
 export default {
   title: 'Reserved Regions',
   tagline: 'Display divisions and occlusions in your React Native view coordinates.',
-  favicon: 'img/mark.svg',
+  favicon: 'img/logo.png',
   url: 'https://appandflow.github.io',
   baseUrl: '/react-native-reserved-regions/',
   organizationName: 'appandflow',

website/src/component/ConceptCard.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Illustration from './Illustration';
+import styles from '../css/ConceptCard.module.css';
+import shared from '../css/shared.module.css';
+
+export default function ConceptCard({ concept, isFirst }) {
+  return (
+    <article
+      style={{
+        borderTopWidth: isFirst ? 1 : 0,
+      }}
+      className={styles.concept}
+    >
+      <h2 className={shared.heading}>{concept.title}</h2>
+      <p className={[shared.description, styles.conceptDescription].join(' ')}>{concept.description}</p>
+      <Link to={concept.to} className={[shared.link, shared.textLink].join(' ')}>
+        {concept.label} <span aria-hidden="true">↗</span>
+      </Link>
+      <Illustration
+        file={concept.image}
+        reveal
+        alt={concept.alt}
+        width={concept.width}
+        height={concept.height}
+        style={{
+          maxWidth: concept.maxWidth,
+        }}
+        className={styles.conceptIllustration}
+      />
+    </article>
+  );
+}

website/src/component/Illustration.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from '../css/Illustration.module.css';
+
+export default function Illustration({ file, alt, width, height, style, reveal = false, className = '' }) {
+  const imageRef = useRef(null);
+  useEffect(() => {
+    if (!reveal || !('IntersectionObserver' in window)) return;
+    const image = imageRef.current;
+    image.dataset.reveal = 'pending';
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          image.dataset.reveal = 'visible';
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.15,
+      },
+    );
+    observer.observe(image);
+    return () => {
+      observer.disconnect();
+      delete image.dataset.reveal;
+    };
+  }, [reveal]);
+  return (
+    <img
+      ref={imageRef}
+      className={[styles.illustration, reveal ? styles.illustrationReveal : '', className].join(' ')}
+      src={useBaseUrl(`/img/${file}`)}
+      alt={alt}
+      width={width}
+      height={height}
+      style={style}
+    />
+  );
+}

website/src/css/ConceptCard.module.css

@@ -0,0 +1,23 @@
+.concept {
+  padding: 28px 24px 0;
+  border: 1px solid rgba(18, 18, 18, 0.1);
+  overflow: hidden;
+}
+
+.conceptDescription {
+  margin: 16px 0;
+}
+
+.concept a:hover {
+  color: #008cff;
+}
+
+.conceptIllustration {
+  margin: 64px auto 0;
+}
+
+@media (width <= 600px) {
+  .conceptIllustration {
+    margin: 40px auto 0;
+  }
+}

website/src/css/Illustration.module.css

@@ -0,0 +1,18 @@
+.illustration {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .illustrationReveal {
+    transition:
+      opacity 600ms ease,
+      translate 600ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .illustrationReveal[data-reveal='pending'] {
+    opacity: 0;
+    translate: 0 12px;
+  }
+}

website/src/css/custom.css

@@ -1,3 +1,27 @@
+@font-face {
+  font-family: 'GT Maru';
+  src: url('../font/GT-Maru-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../font/InterVariable.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../font/JetBrainsMono-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
 :root {
   --ifm-color-primary: #315de0;
   --ifm-color-primary-dark: #204ccd;