Skip to content

Commit

Permalink
Merge pull request #92 from ShafSpecs/revamp
Browse files Browse the repository at this point in the history 
Updated documentation
  • Loading branch information
@ShafSpecs
ShafSpecs authored Sep 22, 2024
2 parents 5128e5e + 4146232 commit 3c7b36a
Show file tree
Hide file tree
Showing 77 changed files with 899 additions and 3,746 deletions.
63 changes: 55 additions & 8 deletions app/components/ThemeSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useFetcher } from '@remix-run/react'
import { MoonIcon, SunIcon } from 'lucide-react'

import { useTheme } from '~/hooks/useTheme'

Expand All @@ -20,13 +19,61 @@ export const ThemeSwitcher = () => {

document.startViewTransition(themeSwitcher)
}

return (
<button
className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
onClick={toggleTheme}
>
{theme === 'light' && <SunIcon className="h-4 w-4 fill-sky-400 text-sky-400" />}
{theme === 'dark' && <MoonIcon className="h-4 w-4 fill-sky-400 text-sky-400" />}
</button>
<div className="flex items-center">
<button
className="flex justify-center items-center p-2 group"
aria-label="Toggle dark mode"
onClick={toggleTheme}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="none"
stroke="currentColor"
className="block text-gray-400 size-4 dark:hidden group-hover:text-gray-600"
viewBox="0 0 16 16"
>
<g
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
clipPath="url(#clip0_2880_7340)"
>
<path d="M8 1.111v.89M12.871 3.129l-.628.628M14.889 8H14M12.871 12.871l-.628-.628M8 14.889V14M3.129 12.871l.628-.628M1.111 8h.89M3.129 3.129l.628.628M8 11.778a3.778 3.778 0 100-7.555 3.778 3.778 0 000 7.555z"></path>
</g>
<defs>
<clipPath id="clip0_2880_7340">
<path fill="#fff" d="M0 0H16V16H0z"></path>
</clipPath>
</defs>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="none"
stroke="currentColor"
className="hidden text-gray-500 size-4 dark:block dark:group-hover:text-gray-300"
viewBox="0 0 16 16"
>
<g clipPath="url(#clip0_2880_7355)">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M11.556 10.444A5.555 5.555 0 016 4.89c0-1.202.385-2.31 1.033-3.22a6.443 6.443 0 001.19 12.775c2.997 0 5.509-2.05 6.23-4.82a5.517 5.517 0 01-2.897.82z"
></path>
</g>
<defs>
<clipPath id="clip0_2880_7355">
<path fill="#fff" d="M0 0H16V16H0z"></path>
</clipPath>
</defs>
</svg>
</button>
</div>
)
}
54 changes: 40 additions & 14 deletions app/components/layout/Documentation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,16 @@ export function Documentation({
return (
<div
className={clsx(
'mx-auto max-w-3xl pt-10 xl:max-w-none',
frontmatter.toc ? 'xl:ml-0 xl:mr-[15.5rem] xl:pr-16' : ''
// 'mx-auto max-w-3xl pt-10 xl:max-w-none',
// frontmatter.toc ? 'xl:ml-0 xl:mr-[15.5rem] xl:pr-16' : ''
'mx-auto max-w-3xl pt-10 xl:ml-0 xl:mr-[15.5rem] xl:pr-16',
)}
>
<div className="mb-8 flex-auto scroll-smooth">
<div className="flex-auto mb-8 scroll-smooth">
<article>
<header id="header" className="relative z-20">
<div>
{/* <div className="h-5 text-sm font-semibold eyebrow text-primary dark:text-primary-light">{frontmatter.se}</div> */}
<h5 className="mb-2 text-sm font-semibold leading-6 text-sky-500 dark:text-sky-400">
{frontmatter.section}
</h5>
Expand All @@ -101,10 +103,10 @@ export function Documentation({
<Component />
</main>
</article>
<dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
<dl className="flex pt-6 mt-12 border-t border-slate-200 dark:border-slate-800">
{prev && (
<div>
<dt className="font-display text-sm font-medium text-slate-900 dark:text-white">Previous</dt>
<dt className="text-sm font-medium font-display text-slate-900 dark:text-white">Previous</dt>
<dd className="mt-1">
<Link
className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
Expand All @@ -119,7 +121,7 @@ export function Documentation({
)}
{next && (
<div className="ml-auto text-right">
<dt className="font-display text-sm font-medium text-slate-900 dark:text-white">Next</dt>
<dt className="text-sm font-medium font-display text-slate-900 dark:text-white">Next</dt>
<dd className="mt-1">
<Link
className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
Expand All @@ -134,20 +136,44 @@ export function Documentation({
)}
</dl>
{/* Hack to get some space at the bottom of the page */}
<div className="h-12 w-full bg-transparent" />
<div className="w-full h-12 bg-transparent" />
</div>
{/* eslint-disable-next-line multiline-ternary */}
{frontmatter.toc ? (
<div className="fixed bottom-0 right-[max(0px,calc(50%-45rem))] top-[72px] z-20 hidden w-[19.5rem] overflow-y-auto py-10 xl:block">
<nav aria-labelledby="on-this-page-title" className="px-8">
{/* eslint-disable-next-line multiline-ternary */}
{tableOfContents.length > 0 ? (
<h2
<div
id="on-this-page-title"
className="mb-4 text-sm font-semibold leading-6 text-slate-900 dark:text-slate-100"
className="flex items-center mb-2.5 space-x-2 text-sm font-medium text-slate-900 dark:text-slate-100"
>
On this page
</h2>
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeWidth={2}
xmlns="http://www.w3.org/2000/svg"
className="size-3"
>
<path
d="M2.44434 12.6665H13.5554"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.44434 3.3335H13.5554"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M2.44434 8H7.33323" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<span>
On this page
</span>
</div>
) : (
<p></p>
)}
Expand All @@ -160,7 +186,7 @@ export function Documentation({
href={`#${section.slug}`}
// onClick={closeNav}
className={clsx(
'toc-anchor block py-1',
'block py-1 toc-anchor',
pageHasSubsections ? 'font-medium' : '',
isActive(section)
? 'font-medium text-sky-500 dark:text-sky-400'
Expand All @@ -179,7 +205,7 @@ export function Documentation({
href={`#${subsection.slug}`}
// onClick={closeNav}
className={clsx(
'toc-anchor group flex items-start py-1',
'flex items-start py-1 toc-anchor group',
isActive(subsection)
? 'text-sky-500 dark:text-sky-400'
: 'hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
Expand All @@ -192,7 +218,7 @@ export function Documentation({
width="3"
height="24"
viewBox="0 -9 3 24"
className="mr-2 overflow-visible text-slate-400 group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"
className="overflow-visible mr-2 text-slate-400 group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"
>
<path
d="M0 0L3 3L0 6"
Expand Down
Loading

0 comments on commit 3c7b36a

Please sign in to comment.