Tweak styling (#6)

docusaurus.config.ts

@@ -149,6 +149,19 @@ const config: Config = {
     },
   ],
 
+  stylesheets: [
+    {
+      rel: 'preconnect',
+      href: 'https://fonts.googleapis.com',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://fonts.gstatic.com',
+      crossOrigin: true,
+    },
+    'https://fonts.googleapis.com/css2?family=Francois+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap',
+  ],
+
   themeConfig: {
     // TODO Replace with your project's social card
     // image: 'img/docusaurus-social-card.jpg',

sidebarsTheoplayer.ts

@@ -21,16 +21,28 @@ const sidebars: SidebarsConfig = {
         {
           type: 'link',
           label: 'Web',
+          description: 'API references for the THEOplayer Web SDK',
+          customProps: {
+            icon: '🌐',
+          },
           href: 'pathname:///theoplayer/v6/api-reference/web/',
         },
         {
           type: 'link',
           label: 'Android',
+          description: 'API references for the THEOplayer Android SDK',
+          customProps: {
+            icon: '🤖',
+          },
           href: 'pathname:///theoplayer/v6/api-reference/android/',
         },
         {
           type: 'link',
           label: 'iOS',
+          description: 'API references for the THEOplayer iOS/tvOS SDK',
+          customProps: {
+            icon: '🍎',
+          },
           href: 'pathname:///theoplayer/v6/api-reference/ios/',
         },
       ],

src/css/custom.css

@@ -4,6 +4,12 @@
  * work well for content-centric websites.
  */
 
+:root {
+  --ifm-font-family-base: 'Open Sans', sans-serif;
+  --ifm-heading-font-family: 'Francois One', sans-serif;
+  --ifm-heading-font-weight: 400;
+}
+
 /*
  * Generated with https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima
  * Primary color (dark):  #ffc50f = hsl(46, 100%, 53%)
@@ -31,3 +37,13 @@
   --ifm-color-primary-lightest: #ffd960;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.hero--primary {
+  --ifm-hero-background-color: #9cb9c9;
+  --ifm-hero-text-color: #344a5e;
+}
+
+[data-theme='dark'] .hero--primary {
+  --ifm-hero-background-color: #445f6e;
+  --ifm-hero-text-color: var(--ifm-font-color-base);
+}

src/pages/index.module.css

@@ -8,10 +8,16 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+
+  background-image: url('/img/hero-banner.png');
+  background-position: top right;
+  background-repeat: no-repeat;
+  background-size: contain;
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 1.5rem;
+    background-image: none;
   }
 }

src/theme/DocCard/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import { findFirstSidebarItemLink, useDocById } from '@docusaurus/theme-common/internal';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import { translate } from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+function CardContainer({ href, children }) {
+  return (
+    <Link href={href} className={clsx('card padding--lg', styles.cardContainer)}>
+      {children}
+    </Link>
+  );
+}
+
+function CardLayout({ href, icon, title, description }) {
+  return (
+    <CardContainer href={href}>
+      <Heading as="h2" className={clsx('text--truncate', styles.cardTitle)} title={title}>
+        {icon} {title}
+      </Heading>
+      {description && (
+        <p className={clsx('text--truncate', styles.cardDescription)} title={description}>
+          {description}
+        </p>
+      )}
+    </CardContainer>
+  );
+}
+
+function CardCategory({ item }) {
+  const icon = item.customProps?.icon ?? '🗃️';
+  const href = findFirstSidebarItemLink(item);
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
+  return (
+    <CardLayout
+      href={href}
+      icon={icon}
+      title={item.label}
+      description={
+        item.description ??
+        translate(
+          {
+            message: '{count} items',
+            id: 'theme.docs.DocCard.categoryDescription',
+            description: 'The default description for a category card in the generated index about how many items this category includes',
+          },
+          { count: item.items.length }
+        )
+      }
+    />
+  );
+}
+
+function CardLink({ item }) {
+  const icon = item.customProps?.icon ?? (isInternalUrl(item.href) ? '📄️' : '🔗');
+  const doc = useDocById(item.docId ?? undefined);
+  return <CardLayout href={item.href} icon={icon} title={item.label} description={item.description ?? doc?.description} />;
+}
+
+export default function DocCard({ item }) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+    case 'category':
+      return <CardCategory item={item} />;
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}

src/theme/DocCard/styles.module.css

@@ -0,0 +1,27 @@
+.cardContainer {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+  margin-bottom: 0;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+}

theoplayer/examples/01-basic.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_custom_props: { icon: '▶️' }
+---
+
 # Basic player
 
 import useBaseUrl from '@docusaurus/useBaseUrl';

theoplayer/getting-started/web.mdx

@@ -1,6 +1,7 @@
 ---
 sidebar_position: 1
 sidebar_label: Web
+sidebar_custom_props: { icon: '🌐' }
 ---
 
 # Getting started on Web

theoplayer/guides/ads.mdx

@@ -1,5 +1,6 @@
 ---
 sidebar_position: 1
+sidebar_custom_props: { icon: '💰' }
 ---
 
 # Advertisements