Skip to content
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

Jump to bottom

docs: improve docs styling #269

Merged
merged 1 commit into from
Feb 17, 2024
Merged

docs: improve docs styling #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 2 additions & 4 deletions packages/overlays/src/components/modal.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,8 @@ export interface ModalSignature {
Blocks: {
default: [
{
CloseButton: WithBoundArgs<typeof CloseButton, 'onClick'> &
WithBoundArgs<typeof CloseButton, 'class'>;
Header: WithBoundArgs<typeof ModalHeader, 'labelledById'> &
WithBoundArgs<typeof ModalHeader, 'class'>;
CloseButton: WithBoundArgs<typeof CloseButton, 'onClick' | 'class'>;
Header: WithBoundArgs<typeof ModalHeader, 'labelledById' | 'class'>;
Body: WithBoundArgs<typeof ModalBody, 'class'>;
Footer: WithBoundArgs<typeof ModalFooter, 'class'>;
headerId: string;
Expand Down
8 changes: 4 additions & 4 deletions packages/overlays/src/components/popover.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ class Popover extends Component<PopoverSignature> {
(el: HTMLElement, [eventType]: [eventType?: 'click' | 'hover']) => {
this.triggerEl = el as HTMLLIElement;
if (eventType === 'hover') {
el.addEventListener('mouseenter', this.toggle);
el.addEventListener('mouseleave', this.toggle);
el.addEventListener('mouseenter', this.open);
el.addEventListener('mouseleave', this.close);
} else {
el.addEventListener('click', this.toggle);
}
Expand All @@ -111,8 +111,8 @@ class Popover extends Component<PopoverSignature> {

return () => {
if (eventType === 'hover') {
el.removeEventListener('mouseenter', this.toggle);
el.removeEventListener('mouseleave', this.toggle);
el.removeEventListener('mouseenter', this.open);
el.removeEventListener('mouseleave', this.close);
} else {
el.removeEventListener('click', this.toggle);
}
Expand Down
18 changes: 9 additions & 9 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion site/.docfy-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = {
editBranch: 'main'
},
tocMaxDepth: 3,
plugins: [withProse({ className: 'prose dark:prose-light' })],
plugins: [withProse({ className: 'prose dark:prose-invert' })],
remarkPlugins: [autolinkHeadings, codeImport],
rehypePlugins: [
[
Expand Down
20 changes: 7 additions & 13 deletions site/app/components/docfy/docfy-header.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import DocfyThemeSwitcher from './docfy-theme-switcher';

interface DocfyHeaderSignature {
Args: {
darkOnly?: boolean;
indexRoute?: string;
githubUrl: string;
disableThemeSwitcher?: boolean;
Expand All @@ -19,31 +18,26 @@ interface DocfyHeaderSignature {

export default class DocfyHeader extends Component<DocfyHeaderSignature> {
<template>
<div class="sticky top-0 z-1 {{if @darkOnly 'dark'}}">
<div class="sticky top-0 z-1 dark">
<div
class="h-16 border-b border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 backdrop-filter backdrop-blur
{{if
@darkOnly
'dark:bg-opacity-90'
'bg-opacity-50 dark:bg-opacity-50'
}}"
class="h-16 border-b border-primary-200 bg-primary-200 backdrop-filter backdrop-blur bg-opacity-90"
...attributes
>
<div class="flex h-full px-4 mx-auto sm:px-6 max-w-screen-2xl">
<div class="flex items-center mr-4">
<LinkTo
@route={{if @indexRoute @indexRoute "index"}}
class="text-black dark:text-white text-lg font-bold outline-none focus-visible:ring"
class="text-white text-lg font-bold outline-none focus-visible:ring"
>
{{yield to="title"}}
</LinkTo>
</div>
<div
class="flex items-center justify-between flex-grow px-2 md:px-6 text-gray-800 dark:text-gray-200"
class="flex items-center justify-between flex-grow px-2 md:px-6 text-default-800"
>
{{#let
"transition pb-1.5 pt-1.5 border-b-2 border-transparent hover:border-primary-700 dark:hover:border-primary-500 outline-none focus-visible:ring hover:text-gray-800 dark:hover:text-gray-400"
"border-primary-700 dark:border-primary-500"
"transition pb-1.5 pt-1.5 border-b-2 border-transparent hover:border-primary-500 outline-none focus-visible:ring hover:text-default-600"
"border-primary-500"
as |linkClass linkClassActive|
}}
<div class="flex items-center gap-4">
Expand All @@ -57,7 +51,7 @@ export default class DocfyHeader extends Component<DocfyHeaderSignature> {
href={{@githubUrl}}
target="_blank"
rel="noopener noreferrer"
class="transition text-gray-800 dark:text-gray-200 outline-none focus-visible:ring hover:text-gray-800 dark:hover:text-gray-400"
class="transition text-default-800 outline-none focus-visible:ring hover:text-default-600"
>
<svg viewBox="0 0 20 20" class="w-6 h-6 fill-current">
<title>
Expand Down
19 changes: 11 additions & 8 deletions site/app/components/docfy/docfy-jump-to.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
<template>
<button
type="button"
class="transition flex items-center rounded focus-visible:ring outline-none hover:text-gray-800 dark:hover:text-gray-400"
class="transition flex items-center rounded focus-visible:ring outline-none hover:text-default-800"
{{on "click" this.toggle}}
{{this.setupShortcut}}
>
Expand All @@ -174,7 +174,7 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {

Search
<code
class="hidden sm:block ml-3 rounded border font-bold border-gray-300 dark:border-gray-600 px-2 py-1 text-xs leading-none"
class="hidden sm:block ml-3 rounded border font-bold border-default-600 px-2 py-1 text-xs leading-none"
>
/
</code>
Expand All @@ -187,11 +187,11 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
@backdrop={{"blur"}}
>
<div
class="p-4 mx-auto text-white mt-20 max-w-md w-full"
class="p-4 mx-auto text-white mt-20 max-w-md w-full dark"
{{this.registerContainerElement}}
>
<div
class="bg-gray-900 backdrop-blur bg-opacity-80 rounded overflow-hidden border border-gray-700"
class="bg-default-50 backdrop-blur bg-opacity-80 rounded overflow-hidden border border-default-200"
>
{{! template-lint-disable self-closing-void-elements }}
<VisuallyHidden>
Expand All @@ -203,8 +203,8 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
id="docfy-jump-to-input"
autocomplete="off"
placeholder="Search..."
class="p-4 bg-transparent w-full focus:outline-none placeholder-gray-500
{{if this.results.length 'border-b border-gray-700'}}
class="p-4 bg-transparent w-full focus:outline-none placeholder-default-500
{{if this.results.length 'border-b border-default-300'}}
"
{{on "input" this.search}}
{{on "keydown" this.onInputKeyDown}}
Expand All @@ -216,7 +216,10 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
<DocfyLink
@to={{result.item.url}}
class="flex items-center p-4 outline-none focus-visible:ring ring-inset
{{if (eq this.selected index) 'bg-gray-700 text-white'}}"
{{if
(eq this.selected index)
'bg-primary-500 text-primary-foreground'
}}"
data-result={{index}}
{{on "click" this.onItemClick}}
{{on "mouseenter" this.selectElement}}
Expand All @@ -240,7 +243,7 @@ export default class DocfyJumpTo extends Component<DocfyJumpToArgs> {
></path>
</svg>

<span class="text-gray-300">
<span class="text-default-800">
{{result.item.title}}
</span>
</DocfyLink>
Expand Down
12 changes: 6 additions & 6 deletions site/app/components/docfy/docfy-sidebar-nav/content.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export default class DocfySidebarNavContent extends Component<Signature> {
<li>
<DocfyLink
@to={{page.url}}
class="transition pl-2 py-1 hover:text-primary-800 text-sm block rounded hover:bg-primary-100 outline-none focus-visible:ring ring-inset"
@activeClass="text-primary-800"
class="transition pl-2 py-1 hover:text-primary-950 text-sm block rounded hover:bg-primary-50 outline-none focus-visible:ring ring-inset"
@activeClass="text-foreground"
>
{{page.title}}
</DocfyLink>
Expand All @@ -41,8 +41,8 @@ export default class DocfySidebarNavContent extends Component<Signature> {
<li class="truncate">
<DocfyLink
@to={{page.url}}
class="transition pl-6 py-1 hover:text-primary-800 text-sm block rounded hover:bg-primary-100 outline-none focus-visible:ring ring-inset"
@activeClass="text-primary-800 d bg-primary-100 0"
class="transition pl-6 py-1 hover:text-primary-950 text-sm block rounded hover:bg-primary-50 outline-none focus-visible:ring ring-inset"
@activeClass="text-foreground d bg-primary-50"
>
{{page.title}}
{{#if page.frontmatter.label}}
Expand Down Expand Up @@ -70,8 +70,8 @@ export default class DocfySidebarNavContent extends Component<Signature> {
<li class="truncate">
<DocfyLink
@to={{page.url}}
class="transition pl-10 py-1 hover:text-primary-800 text-sm block rounded hover:bg-primary-100 outline-none focus-visible:ring ring-inset"
@activeClass="text-primary-800 bg-primary-100 "
class="transition pl-10 py-1 hover:text-primary-950 text-sm block rounded hover:bg-primary-50 outline-none focus-visible:ring ring-inset"
@activeClass="text-foreground bg-primary-50"
>
{{page.title}}
</DocfyLink>
Expand Down
8 changes: 4 additions & 4 deletions site/app/components/docfy/docfy-sidebar-nav/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default class SidebarNav extends Component<Signature> {
<template>
<button
type="button"
class="fixed z-1 bottom-4 right-4 flex items-center p-4 border rounded-full lg:hidden bg-gray-900 backdrop-filter backdrop-blur bg-opacity-70 text-white border-gray-700 focus-visible:ring outline-none"
class="fixed z-1 bottom-4 right-4 flex items-center p-4 border rounded-full lg:hidden bg-default-400 backdrop-filter backdrop-blur bg-opacity-70 text-white border-default-700 focus-visible:ring outline-none"
{{on "click" this.toggle}}
>
<VisuallyHidden>Contents</VisuallyHidden>
Expand All @@ -66,13 +66,13 @@ export default class SidebarNav extends Component<Signature> {
@onClose={{this.toggle}}
@size="xs"
@allowCloseButton={{false}}
class="bg-gray-900 backdrop-filter backdrop-blur bg-opacity-80 dark border-l border-gray-700 outline-none focus-visible:ring ring-inset"
class="backdrop-filter backdrop-blur bg-opacity-80 outline-none focus-visible:ring ring-inset"
as |m|
>
<m.CloseButton
class="dark:text-white hover:bg-gray-800 outline-none focus-visible:ring"
class="dark:text-white hover:bg-default-800 outline-none focus-visible:ring"
/>
<m.Header class="border-b border-gray-700 dark:text-white">
<m.Header class="text-foreground">
Contents
</m.Header>
<m.Body class="dark:text-white">
Expand Down
3 changes: 3 additions & 0 deletions site/app/components/docfy/docfy-theme-switcher.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface Signature {
declare const FastBoot: unknown;

const DARK_MODE_CLASS = 'dark';
const LIGHT_MODE_CLASS = 'light';

export default class DocfyThemeSwitcher extends Component<Signature> {
@tracked prefersDark = false;
Expand Down Expand Up @@ -52,9 +53,11 @@ export default class DocfyThemeSwitcher extends Component<Signature> {
body.style.transitionDelay = '0s, 0s';

if (this.prefersDark) {
document.documentElement.classList.remove(LIGHT_MODE_CLASS);
document.documentElement.classList.add(DARK_MODE_CLASS);
} else {
document.documentElement.classList.remove(DARK_MODE_CLASS);
document.documentElement.classList.add(LIGHT_MODE_CLASS);
}

later(
Expand Down
16 changes: 9 additions & 7 deletions site/app/components/signature.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@ const PropertiesTable: TOC<{
items?: ComponentDoc['Args'];
};
}> = <template>
<div class="prose dark:prose-light mt-8 overflow-x-scroll" ...attributes>
<div
class="prose dark:prose-invert mt-8 overflow-x-scroll hljs-light-theme"
...attributes
>
<table class="text-sm">
<thead>
<tr>
Expand All @@ -105,7 +108,7 @@ const PropertiesTable: TOC<{
{{#unless (shouldIgnoreTag arg.tags)}}
<tr>
<td class="">
<code class="hljs-light-theme code-transparent">
<code class="code-transparent">
<span class="hljs-name">
{{arg.identifier}}
</span>
Expand Down Expand Up @@ -136,7 +139,7 @@ const PropertiesTable: TOC<{
{{/if}}
</td>
<td class="flex items-center">
<code class="hljs-light-theme code-transparent">
<code class="code-transparent">
{{! template-lint-disable }}
{{{arg.type.type}}}
{{! template-lint-enable }}
Expand All @@ -155,9 +158,9 @@ const PropertiesTable: TOC<{
<pop.Content
@closeOnOutsideClick={{false}}
@size="lg"
@class="p-4"
@class="p-4 hljs-light-theme"
>
<code class="hljs-light-theme code-transparent">
<code class="code-transparent">
{{! template-lint-disable }}
{{{arg.type.raw}}}
{{! template-lint-enable }}
Expand All @@ -168,8 +171,7 @@ const PropertiesTable: TOC<{
</td>
<td>
{{#if arg.defaultValue}}

<code class="hljs-light-theme code-transparent">
<code class="code-transparent">
{{! template-lint-disable }}
{{{arg.defaultValue}}}
{{! template-lint-enable }}
Expand Down
2 changes: 2 additions & 0 deletions site/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@

if (colorMode === 'dark') {
root.classList.add('dark');
} else {
root.classList.add('light');
}
})();
</script>
Expand Down
5 changes: 3 additions & 2 deletions site/app/styles/docfy-demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

&__edit-url {
@apply text-xs;

&:hover {
@apply text-primary-600;
}
Expand All @@ -44,8 +45,9 @@
@apply border rounded-b;

pre {
@apply m-0;
@apply p-4;
@apply flex text-default-200 bg-default-800;
@apply flex text-gray-200 bg-gray-800;
@apply text-sm leading-normal;
@apply font-mono;
@apply rounded-b;
Expand All @@ -68,7 +70,6 @@
}

.docfy-demo__snippet pre {
@apply bg-content1;
@apply border-default-200;
}

Expand Down
Loading
Loading