hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add base path + use relative links

Browse source
This commit is contained in:
Felix Roos 2023-01-03 23:02:41 +01:00
parent 027c669ad7
commit 11d3251c67
9 changed files with 34 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

12
website/src/components/HeadCommon.astro
View file

@ -1,5 +1,9 @@
---
import '../styles/index.css';
const { url } = Astro;
const { BASE_URL } = import.meta.env;
const base = url.origin + BASE_URL;
---
<!-- Global Metadata -->
@ -7,9 +11,11 @@ import '../styles/index.css';
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="favicon.ico" />
<link rel="sitemap" href="/sitemap.xml" />
<link rel="sitemap" href="./sitemap.xml" />
<base href={base} />
<!-- Preload Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@ -17,7 +23,7 @@ import '../styles/index.css';
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
<!-- Scrollable a11y code helper -->
<script src="/make-scrollable-code-focusable.js" is:inline></script>
<script src="./make-scrollable-code-focusable.js" is:inline></script>
<!-- This is intentionally inlined to avoid FOUC -->
<script is:inline>

2
website/src/components/Header/Header.astro
View file

@ -38,7 +38,7 @@ const sidebar = SIDEBAR[langCode];
<div class="search-item h-10">
<!-- <Search client:idle /> -->
</div>
<a href="/" class="hidden md:flex cursor-pointer items-center space-x-1"
<a href="./" class="hidden md:flex cursor-pointer items-center space-x-1"
><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
</a>
<div class="md:hidden">

6
website/src/components/LeftSidebar/LeftSidebar.astro
View file

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

3
website/src/components/PageContent/PageContent.astro
View file

@ -12,6 +12,7 @@ type Props = {
const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
const title = frontmatter.title;
const currentPage = Astro.url.pathname;
---
<article id="article" class="content">
@ -19,7 +20,7 @@ const title = frontmatter.title;
<!-- TODO: add dropdown toc on mobile -->
<!-- <nav class="block sm:hidden mb-8">
<span>On this Page:</span>
<TableOfContents client:media="(max-width: 50em)" headings={headings} />
<TableOfContents client:media="(max-width: 50em)" headings={headings} currentPage={currentPage} />
</nav> -->
<div class="prose prose-invert max-w-full pb-8">
<slot />

3
website/src/components/RightSidebar/RightSidebar.astro
View file

@ -9,9 +9,10 @@ type Props = {
};
const { headings, githubEditUrl } = Astro.props as Props;
const currentPage = Astro.url.pathname;
---
<nav aria-labelledby="grid-right">
<TableOfContents client:media="(min-width: 50em)" headings={headings} />
<TableOfContents client:media="(min-width: 50em)" headings={headings} currentPage={currentPage} />
<MoreMenu editHref={githubEditUrl} />
</nav>

7
website/src/components/RightSidebar/TableOfContents.tsx
View file

@ -8,7 +8,10 @@ type ItemOffsets = {
topOffset: number;
};
const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [] }) => {
const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[]; currentPage: string }> = ({
headings = [],
currentPage,
}) => {
const toc = useRef<any>();
const onThisPageID = 'on-this-page-heading';
const itemOffsets = useRef<ItemOffsets[]>([]);
@ -73,7 +76,7 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
.map((heading) => (
<li className={`w-full`}>
<a
href={`#${heading.slug}`}
href={`${currentPage}#${heading.slug}`}
onClick={onLinkClick}
className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]