Add logos for platform and framework icons (#16)

sidebarsOpenVideoUI.ts

@@ -52,7 +52,7 @@ const sidebars: SidebarsConfig = {
       label: 'React',
       description: 'Build a stunning player UI with React components.',
       customProps: {
-        icon: '⚛️',
+        icon: 'react',
       },
       link: {
         type: 'generated-index',
@@ -82,7 +82,7 @@ const sidebars: SidebarsConfig = {
       label: 'Android',
       description: 'Build a mobile-first player UI for Android with Jetpack Compose.',
       customProps: {
-        icon: '🤖',
+        icon: 'android',
       },
       link: {
         type: 'generated-index',

sidebarsTheoplayer.ts

@@ -87,7 +87,7 @@ const sidebars: SidebarsConfig = {
           label: 'Android',
           description: 'API references for the THEOplayer Android SDK',
           customProps: {
-            icon: '🤖',
+            icon: 'android',
           },
           href: 'pathname:///theoplayer/v6/api-reference/android/',
         },
@@ -96,7 +96,7 @@ const sidebars: SidebarsConfig = {
           label: 'iOS',
           description: 'API references for the THEOplayer iOS/tvOS SDK',
           customProps: {
-            icon: '🍎',
+            icon: 'apple',
           },
           href: 'pathname:///theoplayer/v6/api-reference/ios/',
         },

src/theme/DocCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import { findFirstSidebarItemLink, useDocById } from '@docusaurus/theme-common/internal';
@@ -8,6 +8,16 @@ import type { Props } from '@theme/DocCard';
 import type { PropSidebarItemCategory, PropSidebarItemLink } from '@docusaurus/plugin-content-docs';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import AmpIcon from '@site/static/img/amp.svg';
+import AndroidIcon from '@site/static/img/android.svg';
+import AngularIcon from '@site/static/img/angular.svg';
+import AppleIcon from '@site/static/img/apple.svg';
+import ChromecastIcon from '@site/static/img/chromecast.svg';
+import FlutterIcon from '@site/static/img/flutter.svg';
+import NuxtjsIcon from '@site/static/img/nuxtjs.svg';
+import ReactIcon from '@site/static/img/react.svg';
+import VuejsIcon from '@site/static/img/vuejs.svg';
+import WordPressIcon from '@site/static/img/wordpress.svg';
 
 function CardContainer({ href, children }) {
   return (
@@ -23,17 +33,53 @@ function CardLayout({ href, icon, title, description }) {
       <Heading as="h2" className={clsx('text--truncate', styles.cardTitle)} title={title}>
         {icon} {title}
       </Heading>
-      {description && (
-        <p className={clsx(styles.cardDescription)}>
-          {description}
-        </p>
-      )}
+      {description && <p className={clsx(styles.cardDescription)}>{description}</p>}
     </CardContainer>
   );
 }
 
+interface SidebarItemCustomProps {
+  icon?: string;
+}
+
+interface CardIconProps {
+  item: PropSidebarItemCategory | PropSidebarItemLink;
+  defaultIcon: string;
+}
+
+function CardIcon({ item, defaultIcon }: CardIconProps): JSX.Element | string | null {
+  const icon = (item.customProps as SidebarItemCustomProps)?.icon;
+  if (!icon) {
+    return defaultIcon;
+  }
+  switch (icon) {
+    case 'amp':
+      return <AmpIcon className={clsx(styles.cardIcon)} />;
+    case 'android':
+      return <AndroidIcon className={clsx(styles.cardIcon)} />;
+    case 'angular':
+      return <AngularIcon className={clsx(styles.cardIcon)} />;
+    case 'apple':
+      return <AppleIcon className={clsx(styles.cardIcon)} />;
+    case 'chromecast':
+      return <ChromecastIcon className={clsx(styles.cardIcon)} />;
+    case 'flutter':
+      return <FlutterIcon className={clsx(styles.cardIcon)} />;
+    case 'nuxtjs':
+      return <NuxtjsIcon className={clsx(styles.cardIcon)} />;
+    case 'react':
+      return <ReactIcon className={clsx(styles.cardIcon)} />;
+    case 'vuejs':
+      return <VuejsIcon className={clsx(styles.cardIcon)} />;
+    case 'wordpress':
+      return <WordPressIcon className={clsx(styles.cardIcon)} />;
+    default:
+      return icon;
+  }
+}
+
 function CardCategory({ item }: { item: PropSidebarItemCategory }) {
-  const icon = item.customProps?.icon ?? '🗃️';
+  const icon = <CardIcon item={item} defaultIcon="🗃️" />;
   const href = findFirstSidebarItemLink(item);
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
@@ -60,7 +106,7 @@ function CardCategory({ item }: { item: PropSidebarItemCategory }) {
 }
 
 function CardLink({ item }: { item: PropSidebarItemLink }) {
-  const icon = item.customProps?.icon ?? (isInternalUrl(item.href) ? '📄️' : '🔗');
+  const icon = <CardIcon item={item} defaultIcon={isInternalUrl(item.href) ? '📄️' : '🔗'} />;
   const doc = useDocById(item.docId ?? undefined);
   return <CardLayout href={item.href} icon={icon} title={item.label} description={item.description ?? doc?.description} />;
 }

src/theme/DocCard/styles.module.css

@@ -25,3 +25,10 @@
 .cardDescription {
   font-size: 0.8rem;
 }
+
+.cardIcon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  fill: var(--ifm-font-color-base);
+}

theoplayer/getting-started/01-sdks/02-android/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Android",
   "customProps": {
-    "icon": "🤖"
+    "icon": "android"
   }
 }

theoplayer/getting-started/01-sdks/03-ios/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "iOS & tvOS",
   "customProps": {
-    "icon": "🍎"
+    "icon": "apple"
   }
 }

theoplayer/getting-started/01-sdks/06-chromecast/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Chromecast",
   "customProps": {
-    "icon": "🛜"
+    "icon": "chromecast"
   }
 }

theoplayer/getting-started/02-frameworks/01-angular/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Angular",
   "customProps": {
-    "icon": "🅰️"
+    "icon": "angular"
   }
 }

theoplayer/getting-started/02-frameworks/02-react/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "React",
   "customProps": {
-    "icon": "⚛️"
+    "icon": "react"
   }
 }

theoplayer/getting-started/02-frameworks/03-react-native/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "React Native",
   "customProps": {
-    "icon": "⚛️"
+    "icon": "react"
   }
 }

theoplayer/getting-started/02-frameworks/04-nuxtjs/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Nuxt.js",
   "customProps": {
-    "icon": "⛰️"
+    "icon": "nuxtjs"
   }
 }

theoplayer/getting-started/02-frameworks/05-vuejs/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Vue.js",
   "customProps": {
-    "icon": "🌐"
+    "icon": "vuejs"
   }
 }

theoplayer/getting-started/02-frameworks/06-amp/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "AMP",
   "customProps": {
-    "icon": "⚡"
+    "icon": "amp"
   }
 }

theoplayer/getting-started/02-frameworks/07-wordpress/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "WordPress",
   "customProps": {
-    "icon": "📝"
+    "icon": "wordpress"
   }
 }

theoplayer/getting-started/02-frameworks/08-flutter/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Flutter",
   "customProps": {
-    "icon": "📱"
+    "icon": "flutter"
   }
 }

theoplayer/how-to-guides/03-cast/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Cast",
   "customProps": {
-    "icon": "🛜"
+    "icon": "chromecast"
   }
 }

theoplayer/how-to-guides/13-objective-C/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Objective-C",
   "customProps": {
-    "icon": "🍎"
+    "icon": "apple"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/01-sdks/02-android/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Android",
   "customProps": {
-    "icon": "🤖"
+    "icon": "android"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/01-sdks/03-ios/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "iOS",
   "customProps": {
-    "icon": "🍎"
+    "icon": "apple"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/01-sdks/04-android-tv/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Android TV",
   "customProps": {
-    "icon": "🤖"
+    "icon": "android"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/01-sdks/05-tvos/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "tvOS",
   "customProps": {
-    "icon": "🍎"
+    "icon": "apple"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/01-sdks/06-chromecast/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Chromecast",
   "customProps": {
-    "icon": "🛜"
+    "icon": "chromecast"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/01-angular/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Angular",
   "customProps": {
-    "icon": "🅰️"
+    "icon": "angular"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/02-react/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "React",
   "customProps": {
-    "icon": "⚛️"
+    "icon": "react"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/03-react-native/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "React Native",
   "customProps": {
-    "icon": "⚛️"
+    "icon": "react"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/04-nuxtjs/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Nuxt.js",
   "customProps": {
-    "icon": "⛰️"
+    "icon": "nuxtjs"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/05-vuejs/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Vue.js",
   "customProps": {
-    "icon": "🌐"
+    "icon": "vuejs"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/06-amp/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "AMP",
   "customProps": {
-    "icon": "⚡"
+    "icon": "amp"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/07-wordpress/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "WordPress",
   "customProps": {
-    "icon": "📝"
+    "icon": "wordpress"
   }
 }

theoplayer_versioned_docs/version-v4/getting-started/02-frameworks/08-flutter/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Flutter",
   "customProps": {
-    "icon": "📱"
+    "icon": "flutter"
   }
 }

theoplayer_versioned_docs/version-v4/how-to-guides/03-cast/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Cast",
   "customProps": {
-    "icon": "🛜"
+    "icon": "chromecast"
   }
 }

theoplayer_versioned_docs/version-v4/how-to-guides/13-objective-C/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Objective-C",
   "customProps": {
-    "icon": "🍎"
+    "icon": "apple"
   }
 }