Migrate documentation from old website (#9)

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
@@ -293,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/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 {