fix(website): Fixed broken links on home page (#662)

## 📺 PR Description

<!-- summary of the change + which issue is fixed if applicable. -->
Currently the links on the docs homepage are broken, because when we run
the website locally it uses [just a slash as the `prefix`/`baseUrl`, but
when run as a production build it uses `/television` as the
`baseUrl`](1d6b996c83/website/docusaurus.config.ts (L21)).
So I added a hook that will take the `baseUrl` and append it to the link
you provide. This hook should be used for any relative link that we add
to the app in React (`.tsx`) files.

## Checklist

<!-- a quick pass through the following items to make sure you haven't
forgotten anything -->

- [x] my commits **and PR title** follow the [conventional
commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format
- [ ] if this is a new feature, I have added tests to consolidate the
feature and prevent regressions
- [ ] if this is a bug fix, I have added a test that reproduces the bug
(if applicable)
- [ ] I have added a reasonable amount of documentation to the code
where appropriate

website/src/components/HomepageFeatures/index.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import clsx from "clsx";
 import Heading from "@theme/Heading";
 import styles from "./styles.module.css";
+import { useGenerateSiteUrl } from "@site/src/hooks";
 
 type FeatureItem = {
   title: string;
@@ -16,9 +17,8 @@ const FeatureList: FeatureItem[] = [
     imgSrc: require("@site/static/img/files-toml.png").default,
     description: (
       <>
-        Create your own channels in a simple TOML file and search through
-        files, git repositories, environment variables, docker images, and
-        more.
+        Create your own channels in a simple TOML file and search through files,
+        git repositories, environment variables, docker images, and more.
       </>
     ),
     link: "/docs/Users/channels",
@@ -37,6 +37,8 @@ const FeatureList: FeatureItem[] = [
 ];
 
 function Feature({ title, imgSrc, description, link }: FeatureItem) {
+  const generateSiteUrl = useGenerateSiteUrl();
+
   return (
     <div className={clsx("col col--6", styles.featureItem)}>
       <div
@@ -45,7 +47,9 @@ function Feature({ title, imgSrc, description, link }: FeatureItem) {
           styles.titleContainer
         )}
       >
-        <Heading as="h3"><a href={link}>{title}</a></Heading>
+        <Heading as="h3">
+          <a href={generateSiteUrl(link)}>{title}</a>
+        </Heading>
         <p>{description}</p>
       </div>
       <div className="featureImageContainer">

website/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useGenerateSiteUrl";

website/src/hooks/useGenerateSiteUrl.ts

@@ -0,0 +1,11 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export const useGenerateSiteUrl = () => {
+  const { siteConfig } = useDocusaurusContext();
+
+  return (path: string) => {
+    return `${siteConfig.baseUrl}${
+      path.startsWith("/") ? path.slice(1) : path
+    }`;
+  };
+};