improve slashing + base href behavior

+ prefix sidebar links & mdx links with base
+ add trailing slashes

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -9,6 +9,7 @@ type Props = {
 const { currentPage } = Astro.props as Props;
 const { BASE_URL } = import.meta.env;
 let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 const langCode = getLanguageFromURL(currentPage) || 'en';
 const sidebar = SIDEBAR[langCode];
@@ -23,7 +24,7 @@ const sidebar = SIDEBAR[langCode];
             <h2>{header}</h2>
             <ul>
               {children.map((child) => {
-                const url = Astro.site?.pathname + child.link;
+                const url = `${baseNoTrailing}/${child.link}${child.link.endsWith('/') ? '' : '/'}`;
                 return (
                   <li class="">
                     <a

website/src/components/RightSidebar/TableOfContents.tsx

@@ -73,7 +73,7 @@ const TableOfContents: FC<{ headings: MarkdownHeading[]; currentPage: string }>
           .map((heading, i) => (
             <li className={`w-full`} key={i}>
               <a
-                href={`${currentPage}#${heading.slug}`}
+                href={`${currentPage}/#${heading.slug}`}
                 onClick={onLinkClick}
                 className={`py-0.5 block cursor-pointer w-full border-l-4 border-lineHighlight hover:bg-lineHighlight ${
                   ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]

website/src/repl/Header.jsx

@@ -9,6 +9,8 @@ import React, { useContext } from 'react';
 import { useSettings, setIsZen } from '../settings.mjs';
 // import { ReplContext } from './Repl';
 import './Repl.css';
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 export function Header({ context }) {
   const {
@@ -123,7 +125,7 @@ export function Header({ context }) {
           {!isEmbedded && (
             <a
               title="learn"
-              href="./workshop/getting-started"
+              href={`${baseNoTrailing}/workshop/getting-started/`}
               className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
             >
               <AcademicCapIcon className="w-6 h-6" />