feat(site): add support for custom docs url (#8601)

site/src/components/Dashboard/DashboardLayout.tsx

@@ -15,6 +15,7 @@ import Link from "@mui/material/Link"
 import Box from "@mui/material/Box"
 import InfoOutlined from "@mui/icons-material/InfoOutlined"
 import Button from "@mui/material/Button"
+import { docs } from "utils/docs"
 
 export const DashboardLayout: FC = () => {
   const styles = useStyles()
@@ -79,9 +80,7 @@ export const DashboardLayout: FC = () => {
               <Box>
                 Coder {updateCheck?.version} is now available. View the{" "}
                 <Link href={updateCheck?.url}>release notes</Link> and{" "}
-                <Link href="https://coder.com/docs/coder-oss/latest/admin/upgrade">
-                  upgrade instructions
-                </Link>{" "}
+                <Link href={docs("/admin/upgrade")}>upgrade instructions</Link>{" "}
                 for more information.
               </Box>
             </Box>

site/src/components/PortForwardButton/PortForwardButton.tsx

@@ -17,6 +17,7 @@ import { Maybe } from "components/Conditionals/Maybe"
 import { useMachine } from "@xstate/react"
 import { portForwardMachine } from "xServices/portForward/portForwardXService"
 import { SecondaryAgentButton } from "components/Resources/AgentButton"
+import { docs } from "utils/docs"
 
 export interface PortForwardButtonProps {
   host: string
@@ -129,7 +130,7 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
       </Maybe>
 
       <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/networking/port-forwarding#dashboard">
+        <HelpTooltipLink href={docs("/networking/port-forwarding#dashboard")}>
           Learn more about web port forwarding
         </HelpTooltipLink>
       </HelpTooltipLinksGroup>

site/src/components/SSHButton/SSHButton.tsx

@@ -9,6 +9,7 @@ import {
   HelpTooltipLinksGroup,
   HelpTooltipText,
 } from "../Tooltips/HelpTooltip"
+import { docs } from "utils/docs"
 
 export interface SSHButtonProps {
   workspaceName: string
@@ -85,16 +86,16 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
         </Stack>
 
         <HelpTooltipLinksGroup>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/install">
+          <HelpTooltipLink href={docs("/install")}>
             Install Coder CLI
           </HelpTooltipLink>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#vs-code-remote">
+          <HelpTooltipLink href={docs("/ides#vs-code-remote")}>
             Connect via VS Code Remote SSH
           </HelpTooltipLink>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#jetbrains-gateway">
+          <HelpTooltipLink href={docs("/ides#jetbrains-gateway")}>
             Connect via JetBrains Gateway
           </HelpTooltipLink>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#ssh-configuration">
+          <HelpTooltipLink href={docs("/ides#ssh-configuration")}>
             SSH configuration
           </HelpTooltipLink>
         </HelpTooltipLinksGroup>

site/src/components/Tooltips/AuditHelpTooltip.tsx

@@ -6,6 +6,7 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "./HelpTooltip"
+import { docs } from "utils/docs"
 
 export const Language = {
   title: "What is an audit log?",
@@ -19,7 +20,7 @@ export const AuditHelpTooltip: FC = () => {
       <HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
       <HelpTooltipText>{Language.body}</HelpTooltipText>
       <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/admin/audit-logs">
+        <HelpTooltipLink href={docs("/admin/audit-logs")}>
           {Language.docs}
         </HelpTooltipLink>
       </HelpTooltipLinksGroup>

site/src/components/Tooltips/UserRoleHelpTooltip.tsx

@@ -6,6 +6,7 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "./HelpTooltip"
+import { docs } from "utils/docs"
 
 export const Language = {
   title: "What is a role?",
@@ -21,7 +22,7 @@ export const UserRoleHelpTooltip: FC = () => {
       <HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
       <HelpTooltipText>{Language.text}</HelpTooltipText>
       <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/admin/users#roles">
+        <HelpTooltipLink href={docs("/admin/users#roles")}>
           {Language.link}
         </HelpTooltipLink>
       </HelpTooltipLinksGroup>

site/src/components/Tooltips/WorkspaceHelpTooltip.tsx

@@ -6,6 +6,7 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "./HelpTooltip"
+import { docs } from "utils/docs"
 
 const Language = {
   workspaceTooltipTitle: "What is a workspace?",
@@ -22,13 +23,13 @@ export const WorkspaceHelpTooltip: FC = () => {
       <HelpTooltipTitle>{Language.workspaceTooltipTitle}</HelpTooltipTitle>
       <HelpTooltipText>{Language.workspaceTooltipText}</HelpTooltipText>
       <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/workspaces#create-workspaces">
+        <HelpTooltipLink href={docs("/workspaces#create-workspaces")}>
           {Language.workspaceTooltipLink1}
         </HelpTooltipLink>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/workspaces#connect-with-ssh">
+        <HelpTooltipLink href={docs("/workspaces#connect-with-ssh")}>
           {Language.workspaceTooltipLink2}
         </HelpTooltipLink>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/workspaces#editors-and-ides">
+        <HelpTooltipLink href={docs("/workspaces#editors-and-ides")}>
           {Language.workspaceTooltipLink3}
         </HelpTooltipLink>
       </HelpTooltipLinksGroup>

site/src/components/WorkspaceActions/BuildParametersPopover.tsx

@@ -20,6 +20,7 @@ import {
 } from "components/Tooltips/HelpTooltip/HelpTooltip"
 import { useFormik } from "formik"
 import { useRef, useState } from "react"
+import { docs } from "utils/docs"
 import { getFormHelpers } from "utils/formUtils"
 import { getInitialParameterValues } from "utils/richParameters"
 
@@ -118,7 +119,9 @@ export const BuildParametersPopover = ({
                   This template has no ephemeral build options.
                 </HelpTooltipText>
                 <HelpTooltipLinksGroup>
-                  <HelpTooltipLink href="https://coder.com/docs/v2/latest/templates/parameters#ephemeral-parameters">
+                  <HelpTooltipLink
+                    href={docs("/templates/parameters#ephemeral-parameters")}
+                  >
                     Read the docs
                   </HelpTooltipLink>
                 </HelpTooltipLinksGroup>

site/src/pages/AuditPage/AuditFilter.tsx

@@ -11,6 +11,7 @@ import {
 import { UseFilterMenuOptions, useFilterMenu } from "components/Filter/menu"
 import { BaseOption } from "components/Filter/options"
 import capitalize from "lodash/capitalize"
+import { docs } from "utils/docs"
 
 const PRESET_FILTERS = [
   {
@@ -44,7 +45,7 @@ export const AuditFilter = ({
 }) => {
   return (
     <Filter
-      learnMoreLink="https://coder.com/docs/v2/latest/admin/audit-logs#filtering-logs"
+      learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
       presets={PRESET_FILTERS}
       isLoading={menus.user.isInitializing}
       filter={filter}

site/src/pages/AuditPage/AuditPaywall.tsx

@@ -5,6 +5,7 @@ import { Paywall } from "components/Paywall/Paywall"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
+import { docs } from "utils/docs"
 
 export const AuditPaywall: FC = () => {
   const { t } = useTranslation("auditLog")
@@ -15,17 +16,13 @@ export const AuditPaywall: FC = () => {
       description={t("paywall.description")}
       cta={
         <Stack direction="row" alignItems="center">
-          <Link
-            href="https://coder.com/docs/coder-oss/latest/admin/upgrade"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <Link href={docs("/admin/upgrade")} target="_blank" rel="noreferrer">
             <Button size="small" startIcon={<ArrowRightAltOutlined />}>
               {t("paywall.actions.upgrade")}
             </Button>
           </Link>
           <Link
-            href="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
+            href={docs("/admin/audit-logs")}
             target="_blank"
             rel="noreferrer"
           >

site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

@@ -39,6 +39,7 @@ import {
 import camelCase from "lodash/camelCase"
 import capitalize from "lodash/capitalize"
 import { VariableInput } from "./VariableInput"
+import { docs } from "utils/docs"
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128
 const MAX_TTL_DAYS = 30
@@ -322,7 +323,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
                 ) : (
                   <>
                     {commonT("licenseFieldTextHelper")}{" "}
-                    <Link href="https://coder.com/docs/v2/latest/enterprise">
+                    <Link href={docs("/enterprise")}>
                       {commonT("learnMore")}
                     </Link>
                     .
@@ -459,7 +460,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
                   </Stack>
                   <span className={styles.optionHelperText}>
                     This setting requires an enterprise license for the&nbsp;
-                    <Link href="https://coder.com/docs/v2/latest/admin/rbac">
+                    <Link href={docs("/admin/rbac")}>
                       &apos;Template RBAC&apos;
                     </Link>{" "}
                     feature to customize permissions.

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

@@ -6,6 +6,7 @@ import { Header } from "components/DeploySettingsLayout/Header"
 import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
 import { Stack } from "components/Stack/Stack"
 import { useDeploymentOptions } from "utils/deployOptions"
+import { docs } from "utils/docs"
 
 export type GeneralSettingsPageViewProps = {
   deploymentOptions: DeploymentOption[]
@@ -22,7 +23,7 @@ export const GeneralSettingsPageView = ({
       <Header
         title="General"
         description="Information about your Coder deployment."
-        docsHref="https://coder.com/docs/coder-oss/latest/admin/configure"
+        docsHref={docs("/admin/configure")}
       />
       <Stack spacing={4}>
         {Boolean(getDeploymentDAUsError) && (

site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx

@@ -9,6 +9,7 @@ import { DeploymentValues, GitAuthConfig } from "api/typesGenerated"
 import { Alert } from "components/Alert/Alert"
 import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
 import { Header } from "components/DeploySettingsLayout/Header"
+import { docs } from "utils/docs"
 
 export type GitAuthSettingsPageViewProps = {
   config: DeploymentValues
@@ -24,7 +25,7 @@ export const GitAuthSettingsPageView = ({
       <Header
         title="Git Authentication"
         description="Coder integrates with GitHub, GitLab, BitBucket, and Azure Repos to authenticate developers with your Git provider."
-        docsHref="https://coder.com/docs/coder-oss/latest/admin/git-providers"
+        docsHref={docs("/admin/git-providers")}
       />
 
       <video

site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx

@@ -11,6 +11,7 @@ import {
   deploymentGroupHasParent,
   useDeploymentOptions,
 } from "utils/deployOptions"
+import { docs } from "utils/docs"
 
 export type NetworkSettingsPageViewProps = {
   options: DeploymentOption[]
@@ -24,7 +25,7 @@ export const NetworkSettingsPageView = ({
       <Header
         title="Network"
         description="Configure your deployment connectivity."
-        docsHref="https://coder.com/docs/coder-oss/latest/networking"
+        docsHref={docs("/networking")}
       />
       <OptionsTable
         options={options.filter((o) =>
@@ -38,7 +39,7 @@ export const NetworkSettingsPageView = ({
         title="Port Forwarding"
         secondary
         description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."
-        docsHref="https://coder.com/docs/coder-oss/latest/networking/port-forwarding"
+        docsHref={docs("/networking/port-forwarding")}
       />
 
       <Badges>

site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx

@@ -12,6 +12,7 @@ import {
   deploymentGroupHasParent,
   useDeploymentOptions,
 } from "utils/deployOptions"
+import { docs } from "utils/docs"
 
 export type SecuritySettingsPageViewProps = {
   options: DeploymentOption[]
@@ -46,7 +47,7 @@ export const SecuritySettingsPageView = ({
           title="Audit Logging"
           secondary
           description="Allow auditors to monitor user operations in your deployment."
-          docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
+          docsHref={docs("/admin/audit-logs")}
         />
 
         <Badges>
@@ -60,7 +61,7 @@ export const SecuritySettingsPageView = ({
           title="Browser Only Connections"
           secondary
           description="Block all workspace access via SSH, port forward, and other non-browser connections."
-          docsHref="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
+          docsHref={docs("/networking#browser-only-connections-enterprise")}
         />
 
         <Badges>

site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx

@@ -11,6 +11,7 @@ import {
   deploymentGroupHasParent,
   useDeploymentOptions,
 } from "utils/deployOptions"
+import { docs } from "utils/docs"
 
 export type UserAuthSettingsPageViewProps = {
   options: DeploymentOption[]
@@ -28,7 +29,7 @@ export const UserAuthSettingsPageView = ({
           title="Login with OpenID Connect"
           secondary
           description="Set up authentication to login with OpenID Connect."
-          docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
+          docsHref={docs("/admin/auth#openid-connect-with-google")}
         />
 
         <Badges>
@@ -51,7 +52,7 @@ export const UserAuthSettingsPageView = ({
           title="Login with GitHub"
           secondary
           description="Set up authentication to login with GitHub."
-          docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#github"
+          docsHref={docs("/admin/auth#github")}
         />
 
         <Badges>

site/src/pages/GroupsPage/GroupsPageView.tsx

@@ -22,6 +22,7 @@ import { Link as RouterLink, useNavigate } from "react-router-dom"
 import { Paywall } from "components/Paywall/Paywall"
 import { Group } from "api/typesGenerated"
 import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
+import { docs } from "utils/docs"
 
 export type GroupsPageViewProps = {
   groups: Group[] | undefined
@@ -49,7 +50,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
             cta={
               <Stack direction="row" alignItems="center">
                 <Button
-                  href="https://coder.com/docs/coder-oss/latest/enterprise"
+                  href={docs("/enterprise")}
                   target="_blank"
                   rel="noreferrer"
                   startIcon={<ArrowRightAltOutlined />}
@@ -59,7 +60,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
                 </Button>
 
                 <Link
-                  href="https://coder.com/docs/coder-oss/latest/admin/groups"
+                  href={docs("/admin/groups")}
                   target="_blank"
                   rel="noreferrer"
                 >

site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx

@@ -13,6 +13,7 @@ import { pageTitle } from "utils/page"
 import { templateACLMachine } from "xServices/template/templateACLXService"
 import { useTemplateSettingsContext } from "../TemplateSettingsLayout"
 import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView"
+import { docs } from "utils/docs"
 
 export const TemplatePermissionsPage: FC<
   React.PropsWithChildren<unknown>
@@ -38,7 +39,7 @@ export const TemplatePermissionsPage: FC<
             cta={
               <Stack direction="row" alignItems="center">
                 <Link
-                  href="https://coder.com/docs/coder-oss/latest/admin/upgrade"
+                  href={docs("/admin/upgrade")}
                   target="_blank"
                   rel="noreferrer"
                 >
@@ -50,7 +51,7 @@ export const TemplatePermissionsPage: FC<
                   </Button>
                 </Link>
                 <Link
-                  href="https://coder.com/docs/coder-oss/latest/admin/rbac"
+                  href={docs("/admin/rbac")}
                   target="_blank"
                   rel="noreferrer"
                 >

site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm/TemplateScheduleForm.tsx

@@ -20,6 +20,7 @@ import { InactivityDialog } from "./InactivityDialog"
 import { useWorkspacesToBeDeleted } from "./useWorkspacesToBeDeleted"
 import { TemplateScheduleFormValues, getValidationSchema } from "./formHelpers"
 import { TTLHelperText } from "./TTLHelperText"
+import { docs } from "utils/docs"
 
 const MS_HOUR_CONVERSION = 3600000
 const MS_DAY_CONVERSION = 86400000
@@ -222,9 +223,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
               ) : (
                 <>
                   {commonT("licenseFieldTextHelper")}{" "}
-                  <Link href="https://coder.com/docs/v2/latest/enterprise">
-                    {commonT("learnMore")}
-                  </Link>
+                  <Link href={docs("/enterprise")}>{commonT("learnMore")}</Link>
                   .
                 </>
               ),

site/src/pages/TemplatesPage/EmptyTemplates.tsx

@@ -9,6 +9,7 @@ import { TemplateExampleCard } from "components/TemplateExampleCard/TemplateExam
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import { Link as RouterLink } from "react-router-dom"
+import { docs } from "utils/docs"
 import { Permissions } from "xServices/auth/authXService"
 
 // Those are from https://github.com/coder/coder/tree/main/examples/templates
@@ -54,7 +55,7 @@ export const EmptyTemplates: FC<{
             for workspaces (e.g., docker_container, aws_instance,
             kubernetes_pod). Select a starter template below or
             <Link
-              href="https://coder.com/docs/coder-oss/latest/templates#add-a-template"
+              href={docs("/templates#add-a-template")}
               target="_blank"
               rel="noreferrer"
             >

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -41,6 +41,7 @@ import { colors } from "theme/colors"
 import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"
 import { Avatar } from "components/Avatar/Avatar"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { docs } from "utils/docs"
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -64,7 +65,7 @@ const TemplateHelpTooltip: React.FC = () => {
       <HelpTooltipTitle>{Language.templateTooltipTitle}</HelpTooltipTitle>
       <HelpTooltipText>{Language.templateTooltipText}</HelpTooltipText>
       <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/templates#manage-templates">
+        <HelpTooltipLink href={docs("/templates#manage-templates")}>
           {Language.templateTooltipLink}
         </HelpTooltipLink>
       </HelpTooltipLinksGroup>

site/src/pages/TerminalPage/TerminalPageAlert.tsx

@@ -3,6 +3,7 @@ import Button from "@mui/material/Button"
 import Link from "@mui/material/Link"
 import { Alert } from "components/Alert/Alert"
 import { ReactNode } from "react"
+import { docs } from "utils/docs"
 
 export type TerminalPageAlertType = "error" | "starting" | "success"
 
@@ -21,7 +22,7 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
         The workspace{" "}
         <Link
           title="startup script has exited with an error"
-          href="https://coder.com/docs/v2/latest/templates#startup-script-exited-with-an-error"
+          href={docs("/templates#startup-script-exited-with-an-error")}
           target="_blank"
           rel="noreferrer"
         >
@@ -30,7 +31,7 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
         , we recommend reloading this session and{" "}
         <Link
           title=" debugging the startup script"
-          href="https://coder.com/docs/v2/latest/templates#debugging-the-startup-script"
+          href={docs("/templates#debugging-the-startup-script")}
           target="_blank"
           rel="noreferrer"
         >
@@ -39,7 +40,7 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
         because{" "}
         <Link
           title="your workspace may be incomplete."
-          href="https://coder.com/docs/v2/latest/templates#your-workspace-may-be-incomplete"
+          href={docs("/templates#your-workspace-may-be-incomplete")}
           target="_blank"
           rel="noreferrer"
         >
@@ -56,7 +57,7 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
         but{" "}
         <Link
           title="your workspace may be incomplete."
-          href="https://coder.com/docs/v2/latest/templates#your-workspace-may-be-incomplete"
+          href={docs("/templates#your-workspace-may-be-incomplete")}
           target="_blank"
           rel="noreferrer"
         >
@@ -74,7 +75,7 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
         this{" "}
         <Link
           title="session was started before the startup script finished"
-          href="https://coder.com/docs/v2/latest/templates#your-workspace-may-be-incomplete"
+          href={docs("/templates#your-workspace-may-be-incomplete")}
           target="_blank"
           rel="noreferrer"
         >

site/src/pages/UsersPage/UsersFilter.tsx

@@ -12,6 +12,7 @@ import {
 import { BaseOption } from "components/Filter/options"
 import { UseFilterMenuOptions, useFilterMenu } from "components/Filter/menu"
 import { userFilterQuery } from "utils/filters"
+import { docs } from "utils/docs"
 
 type StatusOption = BaseOption & {
   color: string
@@ -56,7 +57,7 @@ export const UsersFilter = ({
   return (
     <Filter
       presets={PRESET_FILTERS}
-      learnMoreLink="https://coder.com/docs/v2/latest/admin/users#user-filtering"
+      learnMoreLink={docs("/admin/users#user-filtering")}
       isLoading={menus.status.isInitializing}
       filter={filter}
       error={error}

site/src/pages/WorkspacesPage/filter/filter.tsx

@@ -15,6 +15,7 @@ import {
 } from "components/Filter/filter"
 import { UserFilterMenu, UserMenu } from "components/Filter/UserFilter"
 import { workspaceFilterQuery } from "utils/filters"
+import { docs } from "utils/docs"
 
 const PRESET_FILTERS = [
   { query: workspaceFilterQuery.me, name: "My workspaces" },
@@ -48,7 +49,7 @@ export const WorkspacesFilter = ({
       isLoading={menus.status.isInitializing}
       filter={filter}
       error={error}
-      learnMoreLink="https://coder.com/docs/v2/latest/workspaces#workspace-filtering"
+      learnMoreLink={docs("/workspaces#workspace-filtering")}
       options={
         <>
           {menus.user && <UserMenu {...menus.user} />}

site/src/utils/docs.ts

@@ -0,0 +1,28 @@
+const DEFAULT_DOCS_URL = "https://coder.com/docs/v2/latest"
+
+// Add cache to avoid DOM reading all the time
+let CACHED_DOCS_URL: string | undefined
+
+export const docs = (path: string) => {
+  return `${getBaseDocsURL()}${path}`
+}
+
+const getBaseDocsURL = () => {
+  if (!CACHED_DOCS_URL) {
+    const docsUrl = document
+      .querySelector<HTMLMetaElement>('meta[property="docs-url"]')
+      ?.getAttribute("content")
+    const isValidDocsURL = docsUrl && isURL(docsUrl)
+    CACHED_DOCS_URL = isValidDocsURL ? docsUrl : DEFAULT_DOCS_URL
+  }
+  return CACHED_DOCS_URL
+}
+
+const isURL = (value: string) => {
+  try {
+    new URL(value)
+    return true
+  } catch {
+    return false
+  }
+}