Merge commit '3553e5ebc9f853d944e378bc24e8d91275163e37' into HEAD

.github/workflows/pr-preview.yml

@@ -35,6 +35,9 @@ jobs:
           DOCUSAURUS_BASE_URL: /${{ github.event.repository.name }}/pr-preview/pr-${{ github.event.number }}/
           # Prevent PR previews from being indexed by search engines
           DOCUSAURUS_NO_INDEX: 1
+          # Add an announcement at the top to indicate that this is a preview
+          DOCUSAURUS_PR_NUMBER: ${{ github.event.number }}
+          DOCUSAURUS_PR_URL: ${{ github.event.pull_request.html_url }}
       # Deploy preview
       - name: Deploy preview
         uses: rossjrw/pr-preview-action@v1

docusaurus.config.ts

@@ -56,7 +56,8 @@ const config: Config = {
   projectName: 'documentation', // Usually your repo name.
 
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  onBrokenAnchors: 'throw',
+  onBrokenMarkdownLinks: 'throw',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -202,6 +203,15 @@ const config: Config = {
   themeConfig: {
     // TODO Replace with your project's social card
     // image: 'img/docusaurus-social-card.jpg',
+    announcementBar: process.env.DOCUSAURUS_PR_NUMBER
+      ? {
+          id: 'pr_preview',
+          content: `This is a preview of the documentation website from <a target="_blank" rel="noopener noreferrer" href="${process.env.DOCUSAURUS_PR_URL}">pull request #${process.env.DOCUSAURUS_PR_NUMBER}</a>.`,
+          backgroundColor: '#9cb9c9',
+          textColor: '#344a5e',
+          isCloseable: false,
+        }
+      : undefined,
     navbar: {
       title: 'Docs',
       logo: {
@@ -284,6 +294,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
+      additionalLanguages: ['java', 'groovy', 'objectivec', 'brightscript']
     },
   } satisfies Preset.ThemeConfig,
 };

sidebarsOpenVideoUI.ts

@@ -29,7 +29,7 @@ const sidebars: SidebarsConfig = {
         { type: 'doc', id: 'web/getting-started' },
         {
           type: 'category',
-          label: 'Guides',
+          label: 'How-to guides',
           link: { type: 'generated-index', slug: 'web/guides' },
           items: [{ type: 'autogenerated', dirName: 'external/web-ui/docs/guides' }],
         },
@@ -63,7 +63,7 @@ const sidebars: SidebarsConfig = {
         { type: 'doc', id: 'react/getting-started' },
         {
           type: 'category',
-          label: 'Guides',
+          label: 'How-to guides',
           link: { type: 'generated-index', slug: 'react/guides' },
           items: [
             // { type: 'autogenerated', dirName: 'external/web-ui/docs/guides' }
@@ -93,7 +93,7 @@ const sidebars: SidebarsConfig = {
         { type: 'doc', id: 'android/getting-started' },
         {
           type: 'category',
-          label: 'Guides',
+          label: 'How-to guides',
           link: { type: 'generated-index', slug: 'android/guides' },
           items: [{ type: 'autogenerated', dirName: 'external/android-ui/docs/guides' }],
         },

sidebarsTheoplayer.ts

@@ -16,6 +16,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Getting started',
+      collapsed: false,
       description: 'Set up your first THEOplayer in just a few minutes!',
       customProps: {
         icon: '🚀',
@@ -25,13 +26,32 @@ const sidebars: SidebarsConfig = {
     },
     {
       type: 'category',
-      label: 'Guides',
+      label: 'How-to guides',
       description: 'Learn how to implement our rich set of features and integrations.',
       customProps: {
         icon: '📖',
       },
-      link: { type: 'generated-index', slug: 'guides' },
-      items: [{ type: 'autogenerated', dirName: 'guides' }],
+      link: { type: 'doc', id: 'how-to-guides/index' },
+      items: [{ type: 'autogenerated', dirName: 'how-to-guides' }],
+    },
+    {
+      type: 'category',
+      label: 'Knowledge base',
+      description: 'Learn about topics in the video industry from our experts.',
+      customProps: {
+        icon: '🧠',
+      },
+      link: { type: 'doc', id: 'knowledge-base/index' },
+      items: [{ type: 'autogenerated', dirName: 'knowledge-base' }],
+    },
+    {
+      type: 'link',
+      label: 'FAQ',
+      description: `Answers to common questions we've received from our customers over the years.`,
+      customProps: {
+        icon: '❔',
+      },
+      href: '/theoplayer/faq/',
     },
     {
       type: 'category',
@@ -40,7 +60,7 @@ const sidebars: SidebarsConfig = {
       customProps: {
         icon: '🛝',
       },
-      link: { type: 'generated-index', slug: 'examples' },
+      link: { type: 'doc', id: 'examples/index' },
       items: [{ type: 'autogenerated', dirName: 'examples' }],
     },
     'changelog',
@@ -51,7 +71,7 @@ const sidebars: SidebarsConfig = {
       customProps: {
         icon: '*️⃣',
       },
-      link: { type: 'generated-index', slug: 'api' },
+      link: { type: 'generated-index', slug: 'api-reference' },
       items: [
         {
           type: 'link',
@@ -80,9 +100,24 @@ const sidebars: SidebarsConfig = {
           },
           href: 'pathname:///theoplayer/v6/api-reference/ios/',
         },
+        'api-reference/roku',
       ],
     },
   ],
+  faq: [
+    {
+      type: 'link',
+      label: '« Back',
+      href: '/theoplayer/',
+    },
+    {
+      type: 'category',
+      label: 'FAQ',
+      collapsible: false,
+      link: { type: 'doc', id: 'faq/index' },
+      items: [{ type: 'autogenerated', dirName: 'faq' }],
+    },
+  ],
 };
 
 export default sidebars;

src/components/HomepageFeatures/index.tsx

@@ -7,7 +7,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 type FeatureItem = {
   title: string;
-  Image?: (props: Omit<Props, 'sources'>) => JSX.Element;
+  Image: (props: Omit<Props, 'sources'>) => JSX.Element;
   description: JSX.Element;
   to: string;
 };
@@ -29,8 +29,15 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Open Video UI',
-    // TODO Logo for Open Video UI?
-    Image: undefined,
+    Image: (props) => (
+      <ThemedImage
+        {...props}
+        sources={{
+          light: useBaseUrl('/img/open-video-ui.svg'),
+          dark: useBaseUrl('/img/open-video-ui_dark.svg'),
+        }}
+      />
+    ),
     description: (
       <>
         A comprehensive library of open-source UI components, making it easier to build and customize your video player UI to match your branding
@@ -58,8 +65,8 @@ const FeatureList: FeatureItem[] = [
 function Feature({ title, Image, description, to }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
-      <div className={clsx('text--center', Image && styles.featureHeadingWithImage)}>
-        {Image ? <Image className={styles.featureImage} /> : <h2 className={styles.featureTitle}>{title}</h2>}
+      <div className={clsx('text--center', styles.featureHeading)}>
+        <Image className={styles.featureImage} title={title} />
       </div>
       <div className="text--center padding-horiz--md">
         <p>{description}</p>

src/components/HomepageFeatures/styles.module.css

@@ -5,19 +5,11 @@
   width: 100%;
 }
 
-.featureHeadingWithImage {
+.featureHeading {
   line-height: 0;
 }
 
 .featureImage {
   height: 100px;
   width: 200px;
 }
-
-.featureTitle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  margin: 0;
-}

src/components/SubcategoryDocCardList/index.tsx

@@ -0,0 +1,24 @@
+import { Fragment } from 'react';
+import DocCardList, { type Props as DocCardListProps } from '@theme/DocCardList';
+import { useCurrentSidebarCategory } from '@docusaurus/theme-common';
+import { PropSidebarItem, PropSidebarItemCategory } from '@docusaurus/plugin-content-docs';
+import Heading, { type HeadingType } from '@theme/Heading';
+
+export interface Props extends Omit<DocCardListProps, 'items'> {
+  headingLevel?: HeadingType;
+}
+
+function isCategory(item: PropSidebarItem): item is PropSidebarItemCategory {
+  return item.type === 'category';
+}
+
+export default function SubcategoryDocCardList({ headingLevel, ...props }: Props) {
+  const category = useCurrentSidebarCategory();
+  const subcategories = category.items.filter(isCategory);
+  return subcategories.map((subcategory) => (
+    <Fragment key={subcategory.label}>
+      <Heading as={headingLevel ?? 'h2'}>{subcategory.label}</Heading>
+      <DocCardList items={subcategory.items} {...props} />
+    </Fragment>
+  ));
+}

src/theme/DocCardList/index.tsx

@@ -2,12 +2,17 @@ import React from 'react';
 import clsx from 'clsx';
 import { filterDocCardListItems, useCurrentSidebarCategory } from '@docusaurus/theme-common';
 import type { PropSidebarItem } from '@docusaurus/plugin-content-docs';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import type { Props } from '@theme/DocCardList';
 import DocCard from '@theme/DocCard';
 
 function DocCardListForCurrentSidebarCategory({ className }: Props) {
+  const doc = useDoc();
   const category = useCurrentSidebarCategory();
-  return <DocCardList items={category.items} className={className} />;
+  const filteredItems = category.items
+    // Hide the current doc page from list
+    .filter((item) => !(item.type === 'link' && item.docId === doc.metadata.id));
+  return <DocCardList items={filteredItems} className={className} />;
 }
 
 function isIndexLink(item: PropSidebarItem): boolean {