fernando/thp-lang.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive docs view & sidebar

Browse Source
This commit is contained in:
Araozu 2024-04-23 16:25:10 -05:00
parent b23cfd966b
commit 96e50abec4
11 changed files with 103 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/global.css
View File

@ -42,6 +42,12 @@ body {
font-family: Inter, 'Fira Sans', Inter, sans-serif;
}
@media only screen and (max-width: 600px) {
#editor {
font-size: 0.9em;
}
}
pre, code {
font-family: Iosevka, 'Fira Code', monospace;
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

9
public/favicon.svg
View File

@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 749 B

69
src/components/Navbar.astro
View File

@ -1,19 +1,70 @@
<nav class="fixed w-full top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20">
---
const { showSidebarButton = true } = Astro.props;
---
<nav
class="fixed w-full top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20"
>
<div class="container mx-auto h-full w-full flex items-center">
<a href="/" class="inline-block px-4 font-display font-black text-2xl hover:underline">
<img class="inline-block h-10" src="/img/thp_logo_exp.svg" alt="thp">
{
showSidebarButton && (
<button id="sidebar-toggle" class="w-10 h-full lg:hidden">
<i class="ph-bold ph-list text-xl inline-block" />
</button>
)
}
<a
href="/"
class="inline-block px-4 font-display font-black text-2xl hover:underline"
>
<img
class="inline-block h-10"
src="/img/thp_logo_exp.svg"
alt="thp"
/>
</a>
<a href="/learn/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
<a
href="/learn/"
class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
>
Learn
</a>
<a href="/how-to/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
<a
href="/how-to/"
class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
>
How to guides
</a>
<a href="/reference/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
<a
href="/reference/"
class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
>
Language reference
</a>
<a href="/api/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
<a
href="/api/"
class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
>
Stdlib API
</a>
</div>
</nav>
</div>
</nav>
<script>
document.addEventListener("DOMContentLoaded", () => {
const sidebar = document.getElementById("sidebar");
const sidebarToggle = document.getElementById("sidebar-toggle");
if (!sidebar || !sidebarToggle) {
console.log("Sidebar or Sidebar toggle not found. Not enabling sidebar on mobile");
return;
}
sidebarToggle.addEventListener("click", () => {
console.log(":D");
sidebar.classList.toggle("-translate-x-64");
console.log(sidebar.classList.contains("-translate-x-64"));
});
});
</script>

2
src/components/TOC.astro
View File

@ -28,7 +28,7 @@ function buildHierarchy(headings: any) {
{
toc && toc.length > 0 && (
<nav class="article-toc">
<nav class="article-toc opacity-80">
<ul>
{toc.map((heading) => (
<TOCHeading heading={heading} />

2
src/components/TOCHeading.astro
View File

@ -4,7 +4,7 @@ const { heading } = Astro.props;
---
<li>
<a class="inline-block py-1" href={"#" + heading.slug}>
<a class="inline-block py-1 hover:underline" href={"#" + heading.slug}>
{heading.text}
</a>
{

12
src/layouts/BaseLayout.astro
View File

@ -1,5 +1,5 @@
---
const {title} = Astro.props;
const { title } = Astro.props;
---
<!doctype html>
@ -10,9 +10,17 @@ const {title} = Astro.props;
<title>{title ?? "THP: Typed Hypertext Processor"}</title>
<link rel="stylesheet" href="/css/global.css" />
<link rel="stylesheet" href="/css/pages.css">
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/xcode-colors.css" />
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css"
/>
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link

18
src/layouts/PagesLayout.astro
View File

@ -73,12 +73,12 @@ for (const entry of pagesIndex) {
<BaseLayout title={frontmatter.title}>
<Navbar />
<div class="lg:grid lg:grid-cols-[14rem_auto_12rem] container mx-auto">
<div class="pt-12 lg:h-screen lg:sticky top-0">
<nav
id="sidebar"
class="py-4 pr-2 overflow-x-scroll lg:h-[calc(100vh-3rem)]"
>
<div class="lg:grid lg:grid-cols-[14rem_auto_12rem] lg:container mx-auto">
<div
id="sidebar"
class="pt-12 h-screen lg:sticky top-0 fixed z-10 bg-c-bg w-60 lg:w-auto border-r-2 lg:border-0 border-c-border-1 -translate-x-64 lg:translate-x-0"
>
<nav class="py-4 pr-2 overflow-x-scroll h-[calc(100vh-3rem)]">
{
pagesIndex.map((entry) => (
<Sidebar entry={entry} basePath="/learn/" />
@ -87,11 +87,13 @@ for (const entry of pagesIndex) {
</nav>
</div>
<main class="lg:py-[3.5rem] lg:pl-12 lg:pr-4 markdown min-w-0">
<main class="py-[3.5rem] lg:pl-12 lg:pr-4 markdown min-w-0 small-container mx-auto">
<slot />
</main>
<div class="lg:pt-12 pt-4 max-h-screen overflow-x-scroll sticky top-0">
<div
class="lg:pt-12 hidden lg:block pt-4 max-h-screen overflow-x-scroll sticky top-0"
>
<nav class="rounded-md lg:mt-10">
<h2 class="font-display font-medium pb-2 text-c-text-2">
On this page

4
src/pages/index.astro
View File

@ -4,10 +4,10 @@ import Navbar from "../components/Navbar.astro";
---
<BaseLayout>
<Navbar />
<Navbar showSidebarButton={false} />
<div
class="container mx-auto lg:py-16 py-2 lg:grid 2xl:grid-cols-[auto_32rem] lg:grid-cols-[auto_36rem] gap-4 lg:px-10 px-2"
class="container mx-auto lg:py-16 pb-2 pt-20 lg:grid 2xl:grid-cols-[auto_32rem] lg:grid-cols-[auto_36rem] gap-4 lg:px-10 px-2"
>
<div class="lg:pl-10 table">
<div class="table-cell align-middle">

13
tailwind.config.mjs
View File

@ -8,6 +8,7 @@ export default {
"c-text": "var(--c-text)",
"c-text-2": "var(--c-text-2)",
"c-purple": "var(--c-purple)",
"c-border-1": "rgba(150,150,150,0.25)",
"c-purple-light": "var(--c-purple-light)",
"c-box-shadow": "var(--c-box-shadow)",
"c-ping": "var(--c-pink)",
@ -43,6 +44,18 @@ export default {
'@screen xl': {
maxWidth: '1400px',
},
},
'.small-container': {
width: '98%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: 'inherit',
},
}
})
}