diff --git a/src/components/OpenInColab/OpenInColab.tsx b/src/components/OpenInColab/OpenInColab.tsx
index 5dc2a23ce..3897bd13a 100644
--- a/src/components/OpenInColab/OpenInColab.tsx
+++ b/src/components/OpenInColab/OpenInColab.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { useLocation } from "@docusaurus/router";
+import usePathname from "../usePathname";
 import styles from "./styles.module.css";
 
 export default function OpenInColab({ path }) {
-  const pathname = useLocation().pathname.slice(22);
+  const pathname = usePathname();
   return (
     <>
       <div className={styles.root}>
diff --git a/src/components/ViewSource/ViewSource.tsx b/src/components/ViewSource/ViewSource.tsx
index 7f8fb75c3..0a14acb2f 100644
--- a/src/components/ViewSource/ViewSource.tsx
+++ b/src/components/ViewSource/ViewSource.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { useLocation } from "@docusaurus/router";
 import CodeBlock from "@theme/CodeBlock";
+import usePathname from "../usePathname";
 import OpenInColab from "../OpenInColab/OpenInColab";
 
 export default function ViewSource({ path }) {
-  const pathname = useLocation().pathname.slice(22);
+  const pathname = usePathname();
   const [sources, setSources] = useState<string[]>([]);
   const [outputs, setOutputs] = useState<string[]>([]);
   useEffect(() => {
diff --git a/src/components/usePathname.tsx b/src/components/usePathname.tsx
new file mode 100644
index 000000000..6c0fa3643
--- /dev/null
+++ b/src/components/usePathname.tsx
@@ -0,0 +1,7 @@
+import { useLocation } from "@docusaurus/router";
+import config from "@generated/docusaurus.config";
+
+export default function usePathname() {
+  const pathname = useLocation().pathname.slice(config.baseUrl.length - 1);
+  return pathname;
+}