Skip to content

feat: add mobile version of the "table of contents" #366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tannerlinsley merged 3 commits into from
Mar 3, 2025
Merged

feat: add mobile version of the "table of contents" #366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a668aea
refactor: move `space-y-` margin utils to the single caller's source
SeanCassiere Mar 3, 2025
af40de0
feat: add mobile table of contents
SeanCassiere Mar 3, 2025
a494940
chore: more accessible and lessen the indentation
SeanCassiere Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 44 additions & 39 deletions app/components/Doc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { DocTitle } from '~/components/DocTitle'
import { Markdown } from '~/components/Markdown'
import { Toc } from './Toc'
import { twMerge } from 'tailwind-merge'
import { TocMobile } from './TocMobile'

type DocProps = {
title: string
Expand Down Expand Up @@ -89,55 +90,59 @@ export function Doc({
}, [])

return (
<div
className={twMerge(
'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
isTocVisible && 'max-w-full'
)}
>
<React.Fragment>
{shouldRenderToc ? <TocMobile headings={headings} /> : null}
<div
className={twMerge(
'flex overflow-auto flex-col w-full p-4 lg:p-6',
isTocVisible && '!pr-0'
'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
isTocVisible && 'max-w-full',
shouldRenderToc && 'lg:pt-0'
)}
>
{title ? <DocTitle>{title}</DocTitle> : null}
<div className="h-4" />
<div className="h-px bg-gray-500 opacity-20" />
<div className="h-4" />
<div
ref={markdownContainerRef}
className={twMerge(
'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
isTocVisible && 'pr-4 lg:pr-6',
'styled-markdown-content'
'flex overflow-auto flex-col w-full p-4 lg:p-6',
isTocVisible && '!pr-0'
)}
>
<Markdown htmlMarkup={markup} />
</div>
<div className="h-12" />
<div className="w-full h-px bg-gray-500 opacity-30" />
<div className="py-4 opacity-70">
<a
href={`https://github.com/${repo}/tree/${branch}/${filePath}`}
className="flex items-center gap-2"
{title ? <DocTitle>{title}</DocTitle> : null}
<div className="h-4" />
<div className="h-px bg-gray-500 opacity-20" />
<div className="h-4" />
<div
ref={markdownContainerRef}
className={twMerge(
'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
isTocVisible && 'pr-4 lg:pr-6',
'styled-markdown-content'
)}
>
<FaEdit /> Edit on GitHub
</a>
<Markdown htmlMarkup={markup} />
</div>
<div className="h-12" />
<div className="w-full h-px bg-gray-500 opacity-30" />
<div className="py-4 opacity-70">
<a
href={`https://github.com/${repo}/tree/${branch}/${filePath}`}
className="flex items-center gap-2"
>
<FaEdit /> Edit on GitHub
</a>
</div>
<div className="h-24" />
</div>
<div className="h-24" />
</div>

{isTocVisible && (
<div className="border-l border-gray-500/20 max-w-52 w-full hidden 2xl:block transition-all">
<Toc
headings={headings}
activeHeadings={activeHeadings}
colorFrom={colorFrom}
colorTo={colorTo}
/>
</div>
)}
</div>
{isTocVisible && (
<div className="border-l border-gray-500/20 max-w-52 w-full hidden 2xl:block transition-all">
<Toc
headings={headings}
activeHeadings={activeHeadings}
colorFrom={colorFrom}
colorTo={colorTo}
/>
</div>
)}
</div>
</React.Fragment>
)
}
2 changes: 1 addition & 1 deletion app/components/DocContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export function DocContainer({
<div
{...props}
className={twMerge(
'w-full max-w-full space-y-2 md:space-y-6 lg:space-y-8 p-2 md:p-6 lg:p-8',
Copy link
Member Author

@SeanCassiere SeanCassiere Mar 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This spacing was only being used to add margin to the "Back" button on the blog page. So it was moved over to the button itself as the space- utils would otherwise have been applied to the<TocMobile> component even if it was visually hidden on the screen.

I opted not to use a React (useMediaQuery) hook in-favor of relying on CSS.

'w-full max-w-full p-2 md:p-6 lg:p-8',
props.className
)}
>
Expand Down
54 changes: 54 additions & 0 deletions app/components/TocMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react'
import { Link } from '@tanstack/react-router'
import type { HeadingData } from 'marked-gfm-heading-id'
import { FaCaretRight, FaCaretDown } from 'react-icons/fa6'

interface TocMobileProps {
headings: Array<HeadingData>
}

export function TocMobile({ headings }: TocMobileProps) {
const [isOpen, setIsOpen] = React.useState(false)

const handleToggle = (event: React.SyntheticEvent<HTMLDetailsElement>) => {
setIsOpen(event.currentTarget.open)
}

if (headings.length === 0) {
return null
}

return (
<div className="lg:hidden flex -mx-2 -mt-2 md:-mx-6 md:-mt-6 pb-3 md:pb-5">
<details className="w-full" onToggle={handleToggle}>
<summary
className="px-4 py-3 text-sm font-medium w-full flex content-start items-center gap-2 bg-white/50 dark:bg-black/60 backdrop-blur-lg border-b border-gray-500 border-opacity-20"
aria-expanded={isOpen}
>
<span>{isOpen ? <FaCaretDown /> : <FaCaretRight />}</span>
<span>On this page</span>
</summary>
<div className="px-2 py-2">
<ul className="list-none grid gap-2">
{headings.map((heading) => (
<li
key={`mobile-toc-${heading.id}`}
style={{
paddingLeft: `${(heading.level - 1) * 0.7}rem`,
}}
>
<Link
to="."
className="text-sm"
hash={heading.id}
dangerouslySetInnerHTML={{ __html: heading.text }}
aria-label={heading.text.replace(/<\/?[^>]+(>|$)/g, '')}
/>
</li>
))}
</ul>
</div>
</details>
</div>
)
}
2 changes: 1 addition & 1 deletion app/routes/_libraries/blog.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ ${content}`

return (
<DocContainer>
<div>
<div className="mb-2 md:mb-6 lg:mb-8">
<Link
from="/blog/$"
to="/blog"
Expand Down
Loading