replace dev docs links yaml with json

Author: pettinarip

overrides.d.ts

@@ -1,8 +1,8 @@
-declare module "*developer-docs-links.yaml" {
-  import { DeveloperDocsLink } from "./src/types"
-  const content: Array<DeveloperDocsLink>
-  export default content
-}
+// declare module "./src/data/developerDocsLinks.json" {
+//   import { DeveloperDocsLink } from "./src/types"
+//   const content: Array<DeveloperDocsLink>
+//   export default content
+// }
 
 declare module "*.mp4" {
   const src: string

src/components/DeveloperDocsLinks.tsx

@@ -2,15 +2,17 @@ import React from "react"
 import { ListItem, UnorderedList } from "@chakra-ui/react"
 import Translation from "./Translation"
 import Link from "./Link"
-import docLinks from "../data/developer-docs-links.yaml"
+import { DeveloperDocsLink } from "../types"
+
+import docLinks from "../data/developerDocsLinks.json"
 
 export interface IProps {
   headerId: string
 }
 
 const DeveloperDocsLinks: React.FC<IProps> = ({ headerId }) => (
   <React.Fragment>
-    {docLinks
+    {(docLinks as Array<DeveloperDocsLink>)
       .filter(({ id }) => id.includes(headerId))
       .map(({ items, id }) => (
         <UnorderedList ml={6} spacing={3} key={id}>
@@ -26,7 +28,7 @@ const DeveloperDocsLinks: React.FC<IProps> = ({ headerId }) => (
                 )}
                 <i>
                   {" – "}
-                  <Translation id={description} />
+                  <Translation id={description!} />
                 </i>
                 <UnorderedList
                   ml={6}

src/components/DocsNav.tsx

@@ -13,7 +13,7 @@ import Link from "./Link"
 import Emoji from "./Emoji"
 import Translation from "./Translation"
 
-import docLinks from "../data/developer-docs-links.yaml"
+import docLinks from "../data/developerDocsLinks.json"
 import { DeveloperDocsLink } from "../types"
 import { TranslationKey } from "../utils/translations"
 
@@ -102,13 +102,13 @@ const DocsNav: React.FC<IProps> = ({ relativePath }) => {
         getDocs(item.items)
       } else {
         // If object has no further 'items', add and continue
-        docsArray.push({ to: item.to, id: item.id })
+        docsArray.push({ to: item.to!, id: item.id })
       }
     }
   }
 
-  // Initiate recursive loop with full docLinks yaml
-  getDocs(docLinks)
+  // Initiate recursive loop with full docLinks json
+  getDocs(docLinks as Array<DeveloperDocsLink>)
 
   // Find index that matches current page
   let currentIndex = 0

src/components/SideNav.tsx

@@ -8,7 +8,7 @@ import Link from "./Link"
 import Translation from "./Translation"
 import { dropdownIconContainerVariant } from "./SharedStyledComponents"
 
-import docLinks from "../data/developer-docs-links.yaml"
+import docLinks from "../data/developerDocsLinks.json"
 import { translateMessageId } from "../utils/translations"
 import { DeveloperDocsLink } from "../types"
 
@@ -87,7 +87,7 @@ export interface IPropsNavLink {
 }
 
 const NavLink: React.FC<IPropsNavLink> = ({ item, path }) => {
-  const isLinkInPath = path.includes(item.to) || path.includes(item.path)
+  const isLinkInPath = path.includes(item.to!) || path.includes(item.path)
   const [isOpen, setIsOpen] = useState<boolean>(isLinkInPath)
 
   useEffect(() => {
@@ -158,7 +158,7 @@ const SideNav: React.FC<IProps> = ({ path }) => {
 
   return (
     <Nav aria-label={translateMessageId("nav-developers-docs", intl)}>
-      {docLinks.map((item, idx) => (
+      {(docLinks as Array<DeveloperDocsLink>).map((item, idx) => (
         <NavLink item={item} path={path} key={idx} />
       ))}
     </Nav>

src/components/SideNavMobile.tsx

@@ -9,7 +9,7 @@ import { isLang } from "../utils/languages"
 import { dropdownIconContainerVariant } from "./SharedStyledComponents"
 import { IPropsNavLink as INavLinkProps } from "./SideNav"
 
-import docLinks from "../data/developer-docs-links.yaml"
+import docLinks from "../data/developerDocsLinks.json"
 import { DeveloperDocsLink } from "../types"
 import { TranslationKey } from "../utils/translations"
 
@@ -182,7 +182,10 @@ const SideNavMobile: React.FC<IProps> = ({ path }) => {
   if (isLang(pagePath.split("/")[1])) {
     pagePath = pagePath.substring(3)
   }
-  let pageTitleId = getPageTitleId(pagePath, docLinks)
+  let pageTitleId = getPageTitleId(
+    pagePath,
+    docLinks as Array<DeveloperDocsLink>
+  )
   if (!pageTitleId) {
     console.warn(`No id found for "pagePath": `, pagePath)
     pageTitleId = `Change page` as TranslationKey
@@ -219,7 +222,7 @@ const SideNavMobile: React.FC<IProps> = ({ path }) => {
               },
             }}
           >
-            {docLinks.map((item, idx) => (
+            {(docLinks as Array<DeveloperDocsLink>).map((item, idx) => (
               <NavLink
                 item={item}
                 path={path}