diff --git a/assets/css/typography.css b/assets/css/typography.css index 61bc3f9..bb4aa4c 100644 --- a/assets/css/typography.css +++ b/assets/css/typography.css @@ -60,6 +60,12 @@ @apply my-2; } } + .not-prose ul, ol { + @apply m-0 list-none; + li { + @apply m-0; + } + } kbd { @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10; } diff --git a/assets/js/filetree.js b/assets/js/filetree.js new file mode 100644 index 0000000..598c95e --- /dev/null +++ b/assets/js/filetree.js @@ -0,0 +1,13 @@ +// Script for filetree shortcode collapsing/expanding folders used in the theme +// ====================================================================== +document.addEventListener("DOMContentLoaded", function () { + const folders = document.querySelectorAll(".hextra-filetree-folder"); + folders.forEach(function (folder) { + folder.addEventListener("click", function () { + Array.from(folder.children).forEach(function (el) { + el.dataset.state = el.dataset.state === "open" ? "closed" : "open"; + }); + folder.nextElementSibling.dataset.state = folder.nextElementSibling.dataset.state === "open" ? "closed" : "open"; + }); + }); +}); diff --git a/exampleSite/content/docs/components/filetree.md b/exampleSite/content/docs/components/filetree.md new file mode 100644 index 0000000..1978c34 --- /dev/null +++ b/exampleSite/content/docs/components/filetree.md @@ -0,0 +1,34 @@ +--- +title: FileTree Component +linkTitle: FileTree +--- + +## Example + +{{< filetree/container >}} + {{< filetree/folder name="content" >}} + {{< filetree/file name="_index.md" >}} + {{< filetree/folder name="docs" state="closed" >}} + {{< filetree/file name="_index.md" >}} + {{< filetree/file name="introduction.md" >}} + {{< filetree/file name="introduction.fr.md" >}} + {{< /filetree/folder >}} + {{< /filetree/folder >}} + {{< filetree/file name="hugo.toml" >}} +{{< /filetree/container >}} + +## Usage + +```text {filename="Markdown"} +{{}} + {{}} + {{}} + {{}} + {{}} + {{}} + {{}} + {{}} + {{}} + {{}} +{{}} +``` diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json new file mode 100644 index 0000000..c307f9b --- /dev/null +++ b/exampleSite/hugo_stats.json @@ -0,0 +1,549 @@ +{ + "htmlElements": { + "tags": [ + "a", + "abbr", + "article", + "aside", + "blockquote", + "body", + "br", + "button", + "cite", + "code", + "div", + "em", + "footer", + "g", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "head", + "hr", + "html", + "iframe", + "input", + "kbd", + "li", + "link", + "main", + "mark", + "meta", + "nav", + "ol", + "p", + "path", + "pre", + "script", + "span", + "strong", + "style", + "sub", + "sup", + "svg", + "table", + "tbody", + "td", + "th", + "thead", + "time", + "title", + "tr", + "ul" + ], + "classes": [ + "-mb-0.5", + "-ml-2", + "-mr-2", + "-mt-20", + "[-webkit-tap-highlight-color:transparent]", + "[-webkit-touch-callout:none]", + "[counter-reset:step]", + "[hyphens:auto]", + "[text-underline-position:from-font]", + "[word-break:break-word]", + "absolute", + "active:bg-gray-400/20", + "active:opacity-50", + "active:shadow-gray-200", + "active:shadow-sm", + "appearance-none", + "before:absolute", + "before:bg-gray-200", + "before:content-[\"\"]", + "before:content-['#']", + "before:inset-y-1", + "before:opacity-25", + "before:w-px", + "bg-black/[.05]", + "bg-blue-100", + "bg-gray-100", + "bg-orange-50", + "bg-primary-100", + "bg-primary-700/5", + "bg-red-100", + "bg-transparent", + "bg-white", + "bg-yellow-50", + "block", + "border", + "border-b", + "border-b-2", + "border-black/5", + "border-blue-200", + "border-gray-200", + "border-l", + "border-orange-100", + "border-red-200", + "border-t", + "border-transparent", + "border-yellow-100", + "bottom-0", + "break-words", + "capitalize", + "chroma", + "code-block", + "code-copy-btn", + "content", + "contrast-more:border", + "contrast-more:border-current", + "contrast-more:border-gray-900", + "contrast-more:border-neutral-400", + "contrast-more:border-primary-500", + "contrast-more:border-t", + "contrast-more:border-transparent", + "contrast-more:dark:border-current", + "contrast-more:dark:border-gray-50", + "contrast-more:dark:border-neutral-400", + "contrast-more:dark:border-primary-500", + "contrast-more:dark:hover:border-gray-50", + "contrast-more:dark:shadow-[0_0_0_1px_#fff]", + "contrast-more:dark:shadow-none", + "contrast-more:dark:text-current", + "contrast-more:dark:text-gray-100", + "contrast-more:dark:text-gray-300", + "contrast-more:dark:text-gray-50", + "contrast-more:font-bold", + "contrast-more:hover:border-gray-900", + "contrast-more:shadow-[0_0_0_1px_#000]", + "contrast-more:shadow-none", + "contrast-more:text-current", + "contrast-more:text-gray-700", + "contrast-more:text-gray-800", + "contrast-more:text-gray-900", + "contrast-more:underline", + "cursor-default", + "cursor-pointer", + "dark:before:bg-neutral-800", + "dark:bg-blue-900/30", + "dark:bg-dark", + "dark:bg-dark/50", + "dark:bg-gray-50/10", + "dark:bg-neutral-800", + "dark:bg-neutral-900", + "dark:bg-orange-400/20", + "dark:bg-primary-300/10", + "dark:bg-primary-400/10", + "dark:bg-red-900/30", + "dark:bg-yellow-700/30", + "dark:border-blue-200/30", + "dark:border-gray-100/20", + "dark:border-neutral-800", + "dark:border-orange-400/30", + "dark:border-red-200/30", + "dark:border-white/10", + "dark:border-yellow-200/30", + "dark:contrast-more:border-neutral-400", + "dark:focus:bg-dark", + "dark:hover:bg-neutral-900", + "dark:hover:bg-primary-100/5", + "dark:hover:border-neutral-700", + "dark:hover:border-neutral-800", + "dark:hover:shadow-none", + "dark:hover:text-gray-100", + "dark:hover:text-gray-200", + "dark:hover:text-gray-300", + "dark:hover:text-gray-50", + "dark:hover:text-neutral-50", + "dark:hover:text-white", + "dark:placeholder:text-gray-400", + "dark:ring-white/20", + "dark:shadow-[0_-12px_16px_#111]", + "dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]", + "dark:shadow-none", + "dark:text-blue-200", + "dark:text-gray-100", + "dark:text-gray-200", + "dark:text-gray-300", + "dark:text-gray-400", + "dark:text-neutral-200", + "dark:text-neutral-400", + "dark:text-orange-300", + "dark:text-primary-600", + "dark:text-red-200", + "dark:text-slate-100", + "dark:text-yellow-200", + "data-[state=closed]:hidden", + "data-[state=open]:hidden", + "data-[state=selected]:block", + "data-[state=selected]:border-primary-500", + "data-[state=selected]:text-primary-600", + "decoration-from-font", + "duration-200", + "filename", + "first:mt-0", + "flex", + "flex-col", + "focus:bg-white", + "font-bold", + "font-extrabold", + "font-medium", + "font-mono", + "font-semibold", + "footnote-backref", + "footnote-ref", + "footnotes", + "gap-1", + "gap-2", + "gap-4", + "grid", + "group", + "group-[.copied]/copybtn:block", + "group-[.copied]/copybtn:hidden", + "group-data-[theme=dark]:hidden", + "group-data-[theme=light]:hidden", + "group-hover/code:opacity-100", + "group/code", + "group/copybtn", + "grow", + "h-0", + "h-16", + "h-4", + "h-5", + "h-7", + "h-full", + "hamburger-menu", + "hextra-card", + "hextra-cards", + "hextra-filetree", + "hextra-filetree-folder", + "hextra-footer", + "hextra-toc", + "hidden", + "highlight", + "hover:bg-gray-100", + "hover:bg-primary-50", + "hover:bg-slate-50", + "hover:border-gray-200", + "hover:border-gray-300", + "hover:dark:bg-primary-500/10", + "hover:dark:text-primary-600", + "hover:opacity-60", + "hover:opacity-75", + "hover:shadow-gray-100", + "hover:shadow-md", + "hover:text-black", + "hover:text-gray-800", + "hover:text-gray-900", + "hover:text-primary-600", + "inline", + "inline-block", + "inline-flex", + "inset-x-0", + "inset-y-0", + "items-center", + "items-start", + "justify-between", + "justify-center", + "justify-end", + "justify-items-start", + "justify-start", + "language-options", + "language-switcher", + "leading-5", + "leading-7", + "leading-tight", + "list-none", + "lntable", + "lntd", + "ltr:-mr-4", + "ltr:before:left-0", + "ltr:md:left-auto", + "ltr:ml-3", + "ltr:ml-auto", + "ltr:mr-auto", + "ltr:pl-12", + "ltr:pl-16", + "ltr:pl-3", + "ltr:pl-4", + "ltr:pl-8", + "ltr:pr-0", + "ltr:pr-2", + "ltr:pr-4", + "ltr:pr-9", + "ltr:right-1.5", + "ltr:right-3", + "ltr:rotate-180", + "ltr:text-right", + "m-[11px]", + "max-h-64", + "max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))]", + "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]", + "max-md:[transform:translate3d(0,-100%,0)]", + "max-md:hidden", + "max-w-6xl", + "max-w-[50%]", + "max-w-[90rem]", + "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]", + "max-xl:hidden", + "mb-10", + "mb-12", + "mb-16", + "mb-2", + "mb-4", + "mb-8", + "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]", + "md:hidden", + "md:inline", + "md:inline-block", + "md:justify-start", + "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]", + "md:px-12", + "md:self-start", + "md:shrink-0", + "md:sticky", + "md:text-5xl", + "md:text-lg", + "md:text-sm", + "md:top-16", + "md:w-64", + "mermaid", + "min-h-[100px]", + "min-h-[calc(100vh-4rem)]", + "min-h-[calc(100vh-var(--navbar-height))]", + "min-w-0", + "min-w-[24px]", + "min-w-full", + "ml-1", + "ml-4", + "mr-1", + "mr-2", + "mt-1.5", + "mt-12", + "mt-16", + "mt-2", + "mt-4", + "mt-5", + "mt-6", + "mt-8", + "mx-1", + "mx-2", + "mx-4", + "mx-auto", + "my-1.5", + "my-2", + "next-error-h1", + "no-underline", + "not-prose", + "opacity-0", + "opacity-50", + "opacity-80", + "open", + "order-last", + "overflow-auto", + "overflow-hidden", + "overflow-x-auto", + "overflow-x-hidden", + "overflow-y-auto", + "overscroll-contain", + "p-1.5", + "p-2", + "p-4", + "pb-6", + "pb-8", + "pb-[env(safe-area-inset-bottom)]", + "pb-px", + "pl-5", + "pl-6", + "pl-[max(env(safe-area-inset-left),1.5rem)]", + "placeholder:text-gray-500", + "pointer-events-none", + "pr-4", + "pr-[calc(env(safe-area-inset-right)-1.5rem)]", + "pr-[max(env(safe-area-inset-right),1.5rem)]", + "print:bg-transparent", + "print:hidden", + "pt-1", + "pt-4", + "pt-6", + "pt-8", + "px-1.5", + "px-2", + "px-3", + "px-4", + "px-6", + "py-1", + "py-1.5", + "py-12", + "py-2", + "py-2.5", + "py-4", + "relative", + "right-0", + "ring-1", + "ring-black/5", + "rounded", + "rounded-lg", + "rounded-md", + "rounded-t", + "rounded-xl", + "rtl:-ml-4", + "rtl:before:right-0", + "rtl:left-1.5", + "rtl:left-3", + "rtl:md:right-auto", + "rtl:ml-auto", + "rtl:mr-3", + "rtl:mr-auto", + "rtl:pl-2", + "rtl:pl-4", + "rtl:pl-9", + "rtl:pr-12", + "rtl:pr-16", + "rtl:pr-3", + "rtl:pr-4", + "rtl:pr-8", + "rtl:text-left", + "scroll-my-6", + "scroll-py-6", + "search-input", + "search-results", + "search-wrapper", + "select-none", + "shadow-[0_-12px_16px_#fff]", + "shadow-[0_-12px_16px_white]", + "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]", + "shadow-gray-100", + "shadow-lg", + "shadow-sm", + "shadow-xl", + "shrink-0", + "sidebar-container", + "sm:flex", + "sm:items-start", + "sr-only", + "steps", + "sticky", + "subheading-anchor", + "success-icon", + "tabs-panel", + "tabs-toggle", + "text-2xl", + "text-4xl", + "text-[10px]", + "text-[color:hsl(var(--primary-hue),100%,50%)]", + "text-base", + "text-blue-900", + "text-center", + "text-current", + "text-ellipsis", + "text-gray-100", + "text-gray-500", + "text-gray-600", + "text-gray-700", + "text-gray-800", + "text-gray-900", + "text-left", + "text-orange-800", + "text-primary-800", + "text-red-900", + "text-slate-900", + "text-sm", + "text-xl", + "text-xs", + "text-yellow-900", + "theme-toggle", + "top-0", + "top-16", + "top-8", + "top-full", + "tracking-tight", + "tracking-tighter", + "transition", + "transition-all", + "transition-colors", + "transition-opacity", + "typesetting-article", + "underline", + "underline-offset-2", + "w-3.5", + "w-4", + "w-64", + "w-full", + "w-max", + "w-screen", + "whitespace-nowrap", + "xl:block", + "z-20", + "z-[-1]" + ], + "ids": [ + "add-hextra-theme", + "blockquote-with-attribution", + "blockquote-without-attribution", + "blockquotes", + "code-block-0", + "code-block-1", + "code-block-2", + "code-block-3", + "code-block-4", + "code-block-highlight-with-line-numbers", + "code-block-with-filename", + "code-block-with-triple-backticks", + "code-blocks", + "default", + "diagrams", + "error", + "example", + "features", + "fn:1", + "fnref:1", + "h2", + "h3", + "h4", + "h5", + "h6", + "headings", + "info", + "initialize-a-new-hugo-site", + "inline", + "inline-markdown-within-tables", + "list-types", + "math", + "nested-list", + "ordered-list", + "other-elements--abbr-sub-sup-kbd-mark", + "paragraph", + "quick-start-from-template", + "separate-paragraph", + "specify-selected-index", + "start-as-new-project", + "step-1", + "step-2", + "step-3", + "tables", + "tabs-panel-0", + "tabs-panel-1", + "tabs-panel-2", + "unordered-list", + "usage", + "warning", + "what-is-hextra", + "why-hextra", + "クイックスタート" + ] + } +} \ No newline at end of file diff --git a/hugo_stats.json b/hugo_stats.json deleted file mode 100644 index fac9aa3..0000000 --- a/hugo_stats.json +++ /dev/null @@ -1,167 +0,0 @@ -{ - "htmlElements": { - "tags": [ - "a", - "article", - "body", - "button", - "div", - "footer", - "g", - "h1", - "h2", - "head", - "hr", - "html", - "input", - "kbd", - "link", - "meta", - "nav", - "p", - "path", - "script", - "span", - "style", - "svg", - "title", - "ul" - ], - "classes": [ - "-ml-2", - "-mr-2", - "absolute", - "active:bg-gray-400/20", - "appearance-none", - "bg-black/[.05]", - "bg-gray-100", - "bg-transparent", - "bg-white", - "block", - "border", - "border-gray-200", - "container", - "contrast-more:border", - "contrast-more:border-current", - "contrast-more:border-gray-900", - "contrast-more:dark:border-current", - "contrast-more:dark:border-gray-50", - "contrast-more:dark:shadow-[0_0_0_1px_#fff]", - "contrast-more:dark:text-gray-100", - "contrast-more:dark:text-gray-300", - "contrast-more:shadow-[0_0_0_1px_#000]", - "contrast-more:text-current", - "contrast-more:text-gray-700", - "contrast-more:text-gray-800", - "dark:bg-dark", - "dark:bg-dark/50", - "dark:bg-gray-50/10", - "dark:bg-neutral-900", - "dark:border-gray-100/20", - "dark:border-neutral-800", - "dark:focus:bg-dark", - "dark:hover:text-gray-200", - "dark:placeholder:text-gray-400", - "dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]", - "dark:text-gray-300", - "dark:text-gray-400", - "flex", - "flex-col", - "focus:bg-white", - "font-extrabold", - "font-medium", - "font-mono", - "gap-1", - "gap-2", - "h-16", - "h-5", - "h-full", - "hamburger-menu", - "hidden", - "hover:opacity-75", - "hover:text-gray-800", - "inset-x-0", - "items-center", - "justify-center", - "justify-end", - "leading-tight", - "lg:mx-auto", - "lg:prose-xl", - "ltr:md:left-auto", - "ltr:mr-auto", - "ltr:right-1.5", - "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]", - "max-w-[90rem]", - "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]", - "md:hidden", - "md:inline", - "md:inline-block", - "md:justify-start", - "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]", - "md:text-sm", - "md:w-64", - "min-h-[100px]", - "mt-2", - "mt-6", - "mx-2", - "mx-auto", - "my-1.5", - "next-error-h1", - "overflow-auto", - "overscroll-contain", - "p-2", - "pb-[env(safe-area-inset-bottom)]", - "pl-[max(env(safe-area-inset-left),1.5rem)]", - "placeholder:text-gray-500", - "pointer-events-none", - "pr-[max(env(safe-area-inset-right),1.5rem)]", - "print:bg-transparent", - "print:hidden", - "prose", - "px-1.5", - "px-3", - "px-4", - "px-6", - "py-12", - "py-2", - "py-2.5", - "relative", - "rounded", - "rounded-lg", - "rounded-xl", - "rtl:left-1.5", - "rtl:md:right-auto", - "rtl:ml-auto", - "search-input", - "search-results", - "search-wrapper", - "select-none", - "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]", - "shadow-xl", - "sm:flex", - "sm:items-start", - "sr-only", - "sticky", - "text-[10px]", - "text-base", - "text-center", - "text-current", - "text-gray-100", - "text-gray-500", - "text-gray-600", - "text-gray-900", - "text-sm", - "text-xs", - "top-0", - "top-full", - "transition-colors", - "transition-opacity", - "w-full", - "w-screen", - "whitespace-nowrap", - "z-20", - "z-[-1]" - ], - "ids": null - } -} \ No newline at end of file diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index f4dd0e4..022ba5d 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,10 +1,11 @@ {{- $jsTheme := resources.Get "js/theme.js" -}} {{- $jsMenu := resources.Get "js/menu.js" -}} -{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}} {{- $jsTabs := resources.Get "js/tabs.js" -}} {{- $jsLang := resources.Get "js/lang.js" -}} +{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}} +{{- $jsFileTree := resources.Get "js/filetree.js" -}} -{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang | resources.Concat "js/main.js" -}} +{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree | resources.Concat "js/main.js" -}} {{- if hugo.IsProduction -}} {{- $scripts = $scripts | minify | fingerprint -}} {{- end -}} diff --git a/layouts/shortcodes/filetree/container.html b/layouts/shortcodes/filetree/container.html new file mode 100644 index 0000000..39a49bb --- /dev/null +++ b/layouts/shortcodes/filetree/container.html @@ -0,0 +1,5 @@ +
+
+ {{- .Inner -}} +
+
diff --git a/layouts/shortcodes/filetree/file.html b/layouts/shortcodes/filetree/file.html new file mode 100644 index 0000000..cb3e315 --- /dev/null +++ b/layouts/shortcodes/filetree/file.html @@ -0,0 +1,9 @@ +{{- $name := .Get "name" -}} + + +
  • + + {{- partial "utils/icon" (dict "name" "document-text" "attributes" "width=1em") -}} + {{ $name }} + +
  • diff --git a/layouts/shortcodes/filetree/folder.html b/layouts/shortcodes/filetree/folder.html new file mode 100644 index 0000000..c46cc7e --- /dev/null +++ b/layouts/shortcodes/filetree/folder.html @@ -0,0 +1,17 @@ +{{- $name := .Get "name" -}} +{{- $state := .Get "state" | default "open" }} + +
  • + + +
  • diff --git a/tailwind.config.js b/tailwind.config.js index 0fd84b2..9184524 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,9 +12,7 @@ const makePrimaryColor = /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - "./layouts/**/*.html", - "./content/**/*.{html,md}", - './hugo_stats.json' + './**/hugo_stats.json', ], theme: { screens: {