From adaa7b757e322e5676f5932d658a2cb765d4d44a Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Thu, 13 Jan 2022 15:56:30 +1100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20site=20search=20powered=20by?= =?UTF-8?q?=20Fuse.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + assets/css/compiled/main.css | 909 +++++++++++++++++------- assets/css/main.css | 8 + assets/css/schemes/avocado.css | 62 +- assets/css/schemes/congo.css | 62 +- assets/css/schemes/fire.css | 62 +- assets/css/schemes/ocean.css | 62 +- assets/css/schemes/slate.css | 62 +- assets/icons/search.svg | 1 + assets/icons/times.svg | 1 + assets/js/search.js | 159 +++++ assets/lib/fuse/fuse.min.js | 9 + config/_default/config.toml | 3 + config/_default/params.toml | 1 + exampleSite/config/_default/config.toml | 3 + exampleSite/config/_default/params.toml | 1 + i18n/de.yaml | 5 + i18n/en.yaml | 5 + i18n/es.yaml | 5 + i18n/fr.yaml | 5 + i18n/pt-BR.yaml | 5 + i18n/zh.yaml | 5 + layouts/_default/baseof.html | 7 +- layouts/_default/index.json | 6 + layouts/partials/header.html | 13 + layouts/partials/search.html | 52 ++ package-lock.json | 18 +- package.json | 5 + tailwind.config.js | 89 +-- 29 files changed, 1169 insertions(+), 457 deletions(-) create mode 100644 assets/icons/search.svg create mode 100644 assets/icons/times.svg create mode 100644 assets/js/search.js create mode 100644 assets/lib/fuse/fuse.min.js create mode 100644 layouts/_default/index.json create mode 100644 layouts/partials/search.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 3021f6ce..e3abfcf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Multilingual support - Right-to-left (RTL) language support +- Site search powered by Fuse.js - Automatic Markdown image resizing and srcset generation - Performance and Accessibility improvements to achieve perfect Lighthouse scores - Author `headline` parameter diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index f6569857..d8747a57 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -16,7 +16,7 @@ /* 2 */ border-style: solid; /* 2 */ - border-color: currentColor; + border-color: #e5e7eb; /* 2 */ } @@ -469,7 +469,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose { - color: var(--color-neutral-700); + color: rgb(var(--color-neutral-700)); max-width: 65ch; } @@ -482,22 +482,22 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose a { - color: var(--color-primary-700); + color: rgb(var(--color-primary-700)); text-decoration: underline; font-weight: 500; - -webkit-text-decoration-color: var(--color-primary-300); - text-decoration-color: var(--color-primary-300); + -webkit-text-decoration-color: rgb(var(--color-primary-300)); + text-decoration-color: rgb(var(--color-primary-300)); } :where(.prose a:hover):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral) !important; + color: rgb(var(--color-neutral)) !important; text-decoration: none !important; - background-color: var(--color-primary-600) !important; + background-color: rgb(var(--color-primary-600)) !important; border-radius: 0.09rem; } .prose :where(strong):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-900); + color: rgb(var(--color-neutral-900)); font-weight: 600; } @@ -557,7 +557,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(hr):not(:where([class~="not-prose"] *)) { - border-color: var(--color-neutral-200); + border-color: rgb(var(--color-neutral-200)); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; @@ -566,14 +566,14 @@ Ensure the default browser behavior of the `hidden` attribute. .prose :where(blockquote):not(:where([class~="not-prose"] *)) { font-weight: 500; font-style: italic; - color: var(--color-neutral-800); + color: rgb(var(--color-neutral-800)); border-left-width: 0.25rem; - border-left-color: var(--color-primary-200); + border-left-color: rgb(var(--color-primary-200)); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; - border-right-color: var(--color-primary-200); + border-right-color: rgb(var(--color-primary-200)); } .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { @@ -585,7 +585,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(h1):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-900); + color: rgb(var(--color-neutral-900)); font-weight: 800; font-size: 2.25em; margin-top: 0; @@ -599,7 +599,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(h2):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-800); + color: rgb(var(--color-neutral-800)); font-weight: 700; font-size: 1.5em; margin-top: 2em; @@ -613,7 +613,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(h3):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-800); + color: rgb(var(--color-neutral-800)); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; @@ -627,7 +627,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(h4):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-800); + color: rgb(var(--color-neutral-800)); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; @@ -652,7 +652,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(code):not(:where([class~="not-prose"] *)) { - color: var(--color-secondary-700); + color: rgb(var(--color-secondary-700)); font-weight: 600; font-size: 0.875em; } @@ -666,12 +666,12 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(a code):not(:where([class~="not-prose"] *)) { - color: var(--color-secondary-700); + color: rgb(var(--color-secondary-700)); } .prose :where(pre):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-700); - background-color: var(--color-neutral-50); + color: rgb(var(--color-neutral-700)); + background-color: rgb(var(--color-neutral-50)); overflow-x: auto; font-weight: 400; font-size: 0.875em; @@ -691,7 +691,7 @@ Ensure the default browser behavior of the `hidden` attribute. border-radius: 0; padding: 0; font-weight: inherit; - color: var(--color-neutral-700); + color: rgb(var(--color-neutral-700)); font-size: inherit; font-family: inherit; line-height: inherit; @@ -721,7 +721,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(thead th):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-800); + color: rgb(var(--color-neutral-800)); font-weight: 600; vertical-align: bottom; padding-right: 0.5714286em; @@ -731,7 +731,7 @@ Ensure the default browser behavior of the `hidden` attribute. .prose :where(tbody tr):not(:where([class~="not-prose"] *)) { border-bottom-width: 1px; - border-bottom-color: var(--color-neutral-300); + border-bottom-color: rgb(var(--color-neutral-300)); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { @@ -891,19 +891,19 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(ol > li):not(:where([class~="not-prose"] *))::before { - color: var(--color-neutral-800); + color: rgb(var(--color-neutral-800)); } .prose :where(ul > li):not(:where([class~="not-prose"] *))::before { - background-color: var(--color-neutral-500); + background-color: rgb(var(--color-neutral-500)); } .prose :where(thead tr):not(:where([class~="not-prose"] *)) { - border-bottom-color: var(--color-neutral-500); + border-bottom-color: rgb(var(--color-neutral-500)); } .prose :where(kbd):not(:where([class~="not-prose"] *)) { - background-color: var(--color-neutral-200); + background-color: rgb(var(--color-neutral-200)); padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.9rem; @@ -911,7 +911,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(mark):not(:where([class~="not-prose"] *)) { - background-color: var(--color-secondary-200); + background-color: rgb(var(--color-secondary-200)); padding: 0.1rem 0.2rem; border-radius: 0.12rem; } @@ -931,6 +931,12 @@ body a, body button { width: 1em; } +/* Search */ + +#search-query::-webkit-search-cancel-button, #search-query::-webkit-search-decoration, #search-query::-webkit-search-results-button, #search-query::-webkit-search-results-decoration { + display: none; +} + /* Heading anchors */ .prose .heading-anchor { @@ -945,7 +951,8 @@ body a, body button { .prose .heading-anchor:hover { background-color: transparent !important; - color: var(--color-primary-500) !important; + --tw-text-opacity: 1 !important; + color: rgba(var(--color-primary-500), var(--tw-text-opacity)) !important; -webkit-text-decoration-line: underline !important; text-decoration-line: underline !important; } @@ -959,16 +966,18 @@ body a, body button { .article-pagination a:hover .article-pagination-title { -webkit-text-decoration-line: underline; text-decoration-line: underline; - -webkit-text-decoration-color: var(--color-primary-500); - text-decoration-color: var(--color-primary-500); + -webkit-text-decoration-color: rgb(var(--color-primary-500)); + text-decoration-color: rgb(var(--color-primary-500)); } .article-pagination a:hover .article-pagination-direction { - color: var(--color-primary-700); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-700), var(--tw-text-opacity)); } .dark .article-pagination a:hover .article-pagination-direction { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* RTL support */ @@ -1004,13 +1013,17 @@ body a, body button { .prose .chroma { border-radius: 0.375rem; - background-color: var(--color-neutral-50); - color: var(--color-neutral-700); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); } .dark .prose .chroma { - background-color: var(--color-neutral-700); - color: var(--color-neutral-200); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-200), var(--tw-text-opacity)); } /* Other */ @@ -1054,13 +1067,15 @@ body a, body button { margin-right: -1rem; display: block; width: auto; - background-color: var(--color-primary-100); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; } .dark .chroma .hl { - background-color: var(--color-primary-900); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); } .chroma .lntd .hl { @@ -1071,11 +1086,13 @@ body a, body button { /* LineNumbersTable */ .chroma .lnt { - color: var(--color-neutral-600); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); } .dark .chroma .lnt { - color: var(--color-neutral-300); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } .chroma .lnt { @@ -1086,11 +1103,13 @@ body a, body button { /* LineNumbers */ .chroma .ln { - color: var(--color-neutral-600); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); } .dark .chroma .ln { - color: var(--color-neutral-300); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } .chroma .ln { @@ -1101,214 +1120,256 @@ body a, body button { /* Keyword */ .chroma .k { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .k { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* KeywordConstant */ .chroma .kc { font-weight: 600; - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .kc { - color: var(--color-secondary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* KeywordDeclaration */ .chroma .kd { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .kd { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* KeywordNamespace */ .chroma .kn { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .kn { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* KeywordPseudo */ .chroma .kp { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .kp { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* KeywordReserved */ .chroma .kr { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .kr { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* KeywordType */ .chroma .kt { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .kt { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* Name */ .chroma .n { - color: var(--color-secondary-900); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-900), var(--tw-text-opacity)); } .dark .chroma .n { - color: var(--color-secondary-200); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-200), var(--tw-text-opacity)); } /* NameAttribute */ .chroma .na { - color: var(--color-secondary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } .dark .chroma .na { - color: var(--color-secondary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } /* NameBuiltin */ .chroma .nb { - color: var(--color-secondary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } .dark .chroma .nb { - color: var(--color-secondary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } /* NameBuiltinPseudo */ .chroma .bp { - color: var(--color-secondary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } .dark .chroma .bp { - color: var(--color-secondary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } /* NameClass */ .chroma .nc { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .nc { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* NameConstant */ .chroma .no { font-weight: 600; - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .no { - color: var(--color-secondary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* NameDecorator */ .chroma .nd { - color: var(--color-secondary-900); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-900), var(--tw-text-opacity)); } .dark .chroma .nd { - color: var(--color-secondary-200); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-200), var(--tw-text-opacity)); } /* NameEntity */ .chroma .ni { - color: var(--color-secondary-900); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-900), var(--tw-text-opacity)); } .dark .chroma .ni { - color: var(--color-secondary-200); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-200), var(--tw-text-opacity)); } /* NameException */ .chroma .ne { font-weight: 600; - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .ne { - color: var(--color-secondary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* NameFunction */ .chroma .nf { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } .dark .chroma .nf { - color: var(--color-secondary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* NameFunctionMagic */ .chroma .fm { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .fm { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* NameLabel */ .chroma .nl { - color: var(--color-secondary-900); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-900), var(--tw-text-opacity)); } .dark .chroma .nl { - color: var(--color-secondary-200); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-200), var(--tw-text-opacity)); } /* NameNamespace */ .chroma .nn { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .nn { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* NameOther */ .chroma .nx { - color: var(--color-secondary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } .dark .chroma .nx { - color: var(--color-secondary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } /* NameProperty */ @@ -1320,312 +1381,373 @@ body a, body button { /* NameTag */ .chroma .nt { - color: var(--color-secondary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } .dark .chroma .nt { - color: var(--color-secondary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } /* NameVariable */ .chroma .nv { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .nv { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* NameVariableClass */ .chroma .vc { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .dark .chroma .vc { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } /* NameVariableGlobal */ .chroma .vg { font-weight: 600; - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .vg { - color: var(--color-secondary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* NameVariableInstance */ .chroma .vi { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .vi { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* NameVariableMagic */ .chroma .vm { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .vm { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* Literal */ .chroma .l { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .l { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralDate */ .chroma .ld { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .ld { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralString */ .chroma .s { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .s { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringAffix */ .chroma .sa { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sa { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringBacktick */ .chroma .sb { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sb { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringChar */ .chroma .sc { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sc { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringDelimiter */ .chroma .dl { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .dl { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringDoc */ .chroma .sd { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sd { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringDouble */ .chroma .s2 { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .s2 { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringEscape */ .chroma .se { font-weight: 600; - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .se { - color: var(--color-secondary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* LiteralStringHeredoc */ .chroma .sh { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sh { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringInterpol */ .chroma .si { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .si { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringOther */ .chroma .sx { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sx { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringRegex */ .chroma .sr { font-weight: 600; - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .sr { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringSingle */ .chroma .s1 { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .s1 { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralStringSymbol */ .chroma .ss { font-weight: 600; - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .ss { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* LiteralNumber */ .chroma .m { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .m { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* LiteralNumberBin */ .chroma .mb { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .mb { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* LiteralNumberFloat */ .chroma .mf { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .mf { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* LiteralNumberHex */ .chroma .mh { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .mh { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* LiteralNumberInteger */ .chroma .mi { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .mi { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* LiteralNumberIntegerLong */ .chroma .il { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .il { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* LiteralNumberOct */ .chroma .mo { - color: var(--color-secondary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } .dark .chroma .mo { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* Operator */ .chroma .o { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } /* OperatorWord */ .chroma .ow { font-weight: 600; - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } .dark .chroma .ow { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } /* Punctuation */ @@ -1637,11 +1759,13 @@ body a, body button { .chroma .c { font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .c { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentHashbang */ @@ -1649,66 +1773,78 @@ body a, body button { .chroma .ch { font-weight: 600; font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .ch { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentMultiline */ .chroma .cm { font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .cm { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentSingle */ .chroma .c1 { font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .c1 { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentSpecial */ .chroma .cs { font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .cs { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentPreproc */ .chroma .cp { font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .cp { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentPreprocFile */ .chroma .cpf { font-style: italic; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .chroma .cpf { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* Generic */ @@ -1736,37 +1872,44 @@ body a, body button { .chroma .gh { font-weight: 600; - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } /* GenericInserted */ .chroma .gi { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .gi { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* GenericOutput */ .chroma .go { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .go { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* GenericPrompt */ .chroma .gp { - color: var(--color-primary-800); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } .dark .chroma .gp { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } /* GenericStrong */ @@ -1778,13 +1921,15 @@ body a, body button { /* GenericSubheading */ .chroma .gu { - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } /* GenericTraceback */ .chroma .gt { - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } /* GenericUnderline */ @@ -1799,6 +1944,14 @@ body a, body button { .chroma .w { } +.invisible { + visibility: hidden; +} + +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -1807,6 +1960,25 @@ body a, body button { position: relative; } +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + +.top-20 { + top: 5rem; +} + +.z-50 { + z-index: 50; +} + +.z-10 { + z-index: 10; +} + .m-auto { margin: auto; } @@ -1830,6 +2002,11 @@ body a, body button { margin-right: 0.25rem; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .my-0 { margin-top: 0px; margin-bottom: 0px; @@ -1891,14 +2068,26 @@ body a, body button { margin-bottom: 0.25rem; } -.\!mb-9 { - margin-bottom: 2.25rem !important; -} - .mb-2 { margin-bottom: 0.5rem; } +.-mb-1 { + margin-bottom: -0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.\!mb-9 { + margin-bottom: 2.25rem !important; +} + .mt-1 { margin-top: 0.25rem; } @@ -1935,6 +2124,14 @@ body a, body button { height: 6rem; } +.h-8 { + height: 2rem; +} + +.h-12 { + height: 3rem; +} + .h-full { height: 100%; } @@ -1947,6 +2144,10 @@ body a, body button { max-height: 10rem; } +.min-h-0 { + min-height: 0px; +} + .w-36 { width: 9rem; } @@ -1959,10 +2160,22 @@ body a, body button { width: 6rem; } +.w-screen { + width: 100vw; +} + +.w-8 { + width: 2rem; +} + .min-w-\[1\.8rem\] { min-width: 1.8rem; } +.min-w-0 { + min-width: 0px; +} + .min-w-\[2\.4rem\] { min-width: 2.4rem; } @@ -1979,10 +2192,22 @@ body a, body button { max-width: 10rem; } +.max-w-3xl { + max-width: 48rem; +} + .max-w-full { max-width: 100%; } +.flex-none { + flex: none; +} + +.flex-auto { + flex: 1 1 auto; +} + .grow { flex-grow: 1; } @@ -2004,6 +2229,12 @@ body a, body button { list-style-type: none; } +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + .flex-row { flex-direction: row; } @@ -2036,6 +2267,10 @@ body a, body button { align-self: center; } +.overflow-auto { + overflow: auto; +} + .overflow-hidden { overflow: hidden; } @@ -2078,43 +2313,66 @@ body a, body button { } .border-neutral-400 { - border-color: var(--color-neutral-400); + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity)); } .border-neutral-300 { - border-color: var(--color-neutral-300); + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity)); } .border-primary-400 { - border-color: var(--color-primary-400); + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-400), var(--tw-border-opacity)); } .border-neutral-200 { - border-color: var(--color-neutral-200); + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity)); } .border-neutral-700 { - border-color: var(--color-neutral-700); + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity)); } .bg-neutral { - background-color: var(--color-neutral); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral), var(--tw-bg-opacity)); } .bg-primary-200 { - background-color: var(--color-primary-200); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-200), var(--tw-bg-opacity)); +} + +.bg-neutral-500\/50 { + background-color: rgba(var(--color-neutral-500), 0.5); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-neutral-100 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity)); } .bg-neutral-300 { - background-color: var(--color-neutral-300); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-300), var(--tw-bg-opacity)); } .bg-primary-100 { - background-color: var(--color-primary-100); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } .bg-primary-600 { - background-color: var(--color-primary-600); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); } .object-scale-down { @@ -2127,6 +2385,10 @@ body a, body button { object-position: left; } +.p-4 { + padding: 1rem; +} + .p-1 { padding: 0.25rem; } @@ -2176,6 +2438,11 @@ body a, body button { padding-bottom: 1.5rem; } +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -2186,11 +2453,6 @@ body a, body button { padding-bottom: 0.75rem; } -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .pt-8 { padding-top: 2rem; } @@ -2286,6 +2548,10 @@ body a, body button { text-transform: uppercase; } +.italic { + font-style: italic; +} + .leading-7 { line-height: 1.75rem; } @@ -2299,43 +2565,58 @@ body a, body button { } .text-neutral-400 { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } .text-neutral-900 { - color: var(--color-neutral-900); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-900), var(--tw-text-opacity)); } .text-primary-600 { - color: var(--color-primary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .text-neutral-700 { - color: var(--color-neutral-700); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); } .text-neutral-500 { - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .text-primary-500 { - color: var(--color-primary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-500), var(--tw-text-opacity)); } .text-neutral-800 { - color: var(--color-neutral-800); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-800), var(--tw-text-opacity)); } .text-primary-700 { - color: var(--color-primary-700); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-700), var(--tw-text-opacity)); +} + +.text-neutral-600 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); } .text-primary-400 { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } .\!text-neutral { - color: var(--color-neutral) !important; + --tw-text-opacity: 1 !important; + color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important; } .\!no-underline { @@ -2343,44 +2624,75 @@ body a, body button { text-decoration-line: none !important; } +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.backdrop-blur-sm { + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + .first\:mt-8:first-child { margin-top: 2rem; } .hover\:border-primary-400:hover { - border-color: var(--color-primary-400); + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-400), var(--tw-border-opacity)); } .hover\:border-primary-500:hover { - border-color: var(--color-primary-500); + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-500), var(--tw-border-opacity)); } .hover\:bg-primary-600:hover { - background-color: var(--color-primary-600); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); +} + +.hover\:bg-primary-100:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } .hover\:bg-primary-500:hover { - background-color: var(--color-primary-500); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)); } .hover\:\!bg-primary-500:hover { - background-color: var(--color-primary-500) !important; + --tw-bg-opacity: 1 !important; + background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important; } .hover\:text-primary-700:hover { - color: var(--color-primary-700); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-700), var(--tw-text-opacity)); } .hover\:text-primary-500:hover { - color: var(--color-primary-500); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-500), var(--tw-text-opacity)); } .hover\:text-primary-400:hover { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); +} + +.hover\:text-neutral-600:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); } .hover\:text-neutral:hover { - color: var(--color-neutral); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral), var(--tw-text-opacity)); } .hover\:underline:hover { @@ -2389,18 +2701,18 @@ body a, body button { } .hover\:decoration-primary-500:hover { - -webkit-text-decoration-color: var(--color-primary-500); - text-decoration-color: var(--color-primary-500); + -webkit-text-decoration-color: rgb(var(--color-primary-500)); + text-decoration-color: rgb(var(--color-primary-500)); } .hover\:decoration-neutral-300:hover { - -webkit-text-decoration-color: var(--color-neutral-300); - text-decoration-color: var(--color-neutral-300); + -webkit-text-decoration-color: rgb(var(--color-neutral-300)); + text-decoration-color: rgb(var(--color-neutral-300)); } .hover\:decoration-primary-400:hover { - -webkit-text-decoration-color: var(--color-primary-400); - text-decoration-color: var(--color-primary-400); + -webkit-text-decoration-color: rgb(var(--color-primary-400)); + text-decoration-color: rgb(var(--color-primary-400)); } .hover\:decoration-2:hover { @@ -2416,6 +2728,23 @@ body a, body button { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.focus\:bg-primary-100:focus { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); +} + +.focus\:outline-dotted:focus { + outline-style: dotted; +} + +.focus\:outline-2:focus { + outline-width: 2px; +} + +.focus\:outline-transparent:focus { + outline-color: transparent; +} + [dir="ltr"] .ltr\:ml-2 { margin-left: 0.5rem; } @@ -2428,6 +2757,10 @@ body a, body button { margin-left: 0.25rem; } +[dir="ltr"] .ltr\:block { + display: block; +} + [dir="ltr"] .ltr\:inline { display: inline; } @@ -2460,6 +2793,10 @@ body a, body button { margin-right: 0.25rem; } +[dir="rtl"] .rtl\:block { + display: block; +} + [dir="rtl"] .rtl\:inline { display: inline; } @@ -2481,98 +2818,98 @@ body a, body button { } .dark .dark\:prose-light { - color: var(--color-neutral-300); + color: rgb(var(--color-neutral-300)); } .dark .dark\:prose-light a { - color: var(--color-primary-400); - -webkit-text-decoration-color: var(--color-neutral-500); - text-decoration-color: var(--color-neutral-500); + color: rgb(var(--color-primary-400)); + -webkit-text-decoration-color: rgb(var(--color-neutral-500)); + text-decoration-color: rgb(var(--color-neutral-500)); } :where(.dark .dark\:prose-light a:hover):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral) !important; + color: rgb(var(--color-neutral)) !important; text-decoration: none !important; } .dark .dark\:prose-light :where(strong):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral); + color: rgb(var(--color-neutral)); } .dark .dark\:prose-light :where(ol > li):not(:where([class~="not-prose"] *))::before { - color: var(--color-neutral-400); + color: rgb(var(--color-neutral-400)); } .dark .dark\:prose-light :where(ul > li):not(:where([class~="not-prose"] *))::before { - background-color: var(--color-neutral-600); + background-color: rgb(var(--color-neutral-600)); } .dark .dark\:prose-light :where(hr):not(:where([class~="not-prose"] *)) { - border-color: var(--color-neutral-500); + border-color: rgb(var(--color-neutral-500)); } .dark .dark\:prose-light :where(blockquote):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-200); - border-left-color: var(--color-primary-900); - border-right-color: var(--color-primary-900); + color: rgb(var(--color-neutral-200)); + border-left-color: rgb(var(--color-primary-900)); + border-right-color: rgb(var(--color-primary-900)); } .dark .dark\:prose-light :where(h1):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral); + color: rgb(var(--color-neutral)); } .dark .dark\:prose-light :where(h2):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-50); + color: rgb(var(--color-neutral-50)); } .dark .dark\:prose-light :where(h3):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-50); + color: rgb(var(--color-neutral-50)); } .dark .dark\:prose-light :where(h4):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-50); + color: rgb(var(--color-neutral-50)); } .dark .dark\:prose-light :where(figure figcaption):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-400); + color: rgb(var(--color-neutral-400)); } .dark .dark\:prose-light :where(code):not(:where([class~="not-prose"] *)) { - color: var(--color-secondary-400); + color: rgb(var(--color-secondary-400)); } .dark .dark\:prose-light :where(a code):not(:where([class~="not-prose"] *)) { - color: var(--color-secondary-400); + color: rgb(var(--color-secondary-400)); } .dark .dark\:prose-light :where(pre):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-200); - background-color: var(--color-neutral-700); + color: rgb(var(--color-neutral-200)); + background-color: rgb(var(--color-neutral-700)); } .dark .dark\:prose-light :where(pre code):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral-200); + color: rgb(var(--color-neutral-200)); } .dark .dark\:prose-light :where(thead th):not(:where([class~="not-prose"] *)) { - color: var(--color-neutral); + color: rgb(var(--color-neutral)); } .dark .dark\:prose-light :where(thead tr):not(:where([class~="not-prose"] *)) { - border-bottom-color: var(--color-neutral-500); + border-bottom-color: rgb(var(--color-neutral-500)); } .dark .dark\:prose-light :where(tbody tr):not(:where([class~="not-prose"] *)) { - border-bottom-color: var(--color-neutral-700); + border-bottom-color: rgb(var(--color-neutral-700)); } .dark .dark\:prose-light :where(kbd):not(:where([class~="not-prose"] *)) { - background-color: var(--color-neutral-700); - color: var(--color-neutral-300); + background-color: rgb(var(--color-neutral-700)); + color: rgb(var(--color-neutral-300)); } .dark .dark\:prose-light :where(mark):not(:where([class~="not-prose"] *)) { - background-color: var(--color-secondary-400); + background-color: rgb(var(--color-secondary-400)); } .dark .dark\:inline { @@ -2584,75 +2921,117 @@ body a, body button { } .dark .dark\:border-neutral-600 { - border-color: var(--color-neutral-600); + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity)); } .dark .dark\:border-primary-600 { - border-color: var(--color-primary-600); + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-600), var(--tw-border-opacity)); +} + +.dark .dark\:border-neutral-700 { + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity)); } .dark .dark\:bg-neutral-800 { - background-color: var(--color-neutral-800); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-800), var(--tw-bg-opacity)); } .dark .dark\:bg-neutral-600 { - background-color: var(--color-neutral-600); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity)); } .dark .dark\:bg-primary-400 { - background-color: var(--color-primary-400); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity)); +} + +.dark .dark\:bg-neutral-900\/50 { + background-color: rgba(var(--color-neutral-900), 0.5); } .dark .dark\:bg-neutral-700 { - background-color: var(--color-neutral-700); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity)); } .dark .dark\:bg-primary-900 { - background-color: var(--color-primary-900); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); } .dark .dark\:bg-primary-800 { - background-color: var(--color-primary-800); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-800), var(--tw-bg-opacity)); } .dark .dark\:text-neutral-500 { - color: var(--color-neutral-500); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } .dark .dark\:text-neutral { - color: var(--color-neutral); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral), var(--tw-text-opacity)); } .dark .dark\:text-primary-400 { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } .dark .dark\:text-neutral-300 { - color: var(--color-neutral-300); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } .dark .dark\:text-neutral-400 { - color: var(--color-neutral-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } .dark .dark\:text-neutral-800 { - color: var(--color-neutral-800); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-800), var(--tw-text-opacity)); +} + +.dark .dark\:hover\:bg-primary-900:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); } .dark .dark\:hover\:bg-primary-400:hover { - background-color: var(--color-primary-400); + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity)); } .dark .dark\:hover\:\!bg-primary-700:hover { - background-color: var(--color-primary-700) !important; + --tw-bg-opacity: 1 !important; + background-color: rgba(var(--color-primary-700), var(--tw-bg-opacity)) !important; } .dark .dark\:hover\:text-primary-400:hover { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); +} + +.dark .dark\:hover\:text-neutral-300:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } .dark .dark\:hover\:text-neutral-800:hover { - color: var(--color-neutral-800); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-800), var(--tw-text-opacity)); +} + +.dark .dark\:focus\:bg-primary-900:focus { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); } @media (min-width: 640px) { @@ -2676,6 +3055,10 @@ body a, body button { align-items: center; } + .sm\:p-6 { + padding: 1.5rem; + } + .sm\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; @@ -2717,6 +3100,10 @@ body a, body button { width: 33.333333%; } + .md\:p-\[10vh\] { + padding: 10vh; + } + .md\:px-24 { padding-left: 6rem; padding-right: 6rem; @@ -2728,6 +3115,10 @@ body a, body button { width: 25%; } + .lg\:p-\[12vh\] { + padding: 12vh; + } + .lg\:px-32 { padding-left: 8rem; padding-right: 8rem; diff --git a/assets/css/main.css b/assets/css/main.css index 0973d119..075e95cd 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -14,6 +14,14 @@ body button { width: 1em; } +/* Search */ +#search-query::-webkit-search-cancel-button, +#search-query::-webkit-search-decoration, +#search-query::-webkit-search-results-button, +#search-query::-webkit-search-results-decoration { + @apply hidden; +} + /* Heading anchors */ .prose .heading-anchor { @apply absolute top-0 no-underline opacity-0; diff --git a/assets/css/schemes/avocado.css b/assets/css/schemes/avocado.css index c41c6699..911e895d 100644 --- a/assets/css/schemes/avocado.css +++ b/assets/css/schemes/avocado.css @@ -1,37 +1,37 @@ /* Avocado scheme */ :root { - --color-neutral: #fff; + --color-neutral: 255, 255, 255; /* Stone */ - --color-neutral-50: #fafaf9; - --color-neutral-100: #f5f5f4; - --color-neutral-200: #e7e5e4; - --color-neutral-300: #d6d3d1; - --color-neutral-400: #a8a29e; - --color-neutral-500: #78716c; - --color-neutral-600: #57534e; - --color-neutral-700: #44403c; - --color-neutral-800: #292524; - --color-neutral-900: #1c1917; + --color-neutral-50: 250, 250, 249; + --color-neutral-100: 245, 245, 244; + --color-neutral-200: 231, 229, 228; + --color-neutral-300: 214, 211, 209; + --color-neutral-400: 168, 162, 158; + --color-neutral-500: 120, 113, 108; + --color-neutral-600: 87, 83, 78; + --color-neutral-700: 68, 64, 60; + --color-neutral-800: 41, 37, 36; + --color-neutral-900: 28, 25, 23; /* Lime */ - --color-primary-50: #f7fee7; - --color-primary-100: #ecfccb; - --color-primary-200: #d9f99d; - --color-primary-300: #bef264; - --color-primary-400: #a3e635; - --color-primary-500: #84cc16; - --color-primary-600: #65a30d; - --color-primary-700: #4d7c0f; - --color-primary-800: #3f6212; - --color-primary-900: #365314; + --color-primary-50: 247, 254, 231; + --color-primary-100: 236, 252, 203; + --color-primary-200: 217, 249, 157; + --color-primary-300: 190, 242, 100; + --color-primary-400: 163, 230, 53; + --color-primary-500: 132, 204, 22; + --color-primary-600: 101, 163, 13; + --color-primary-700: 77, 124, 15; + --color-primary-800: 63, 98, 18; + --color-primary-900: 54, 83, 20; /* Emerald */ - --color-secondary-50: #ecfdf5; - --color-secondary-100: #d1fae5; - --color-secondary-200: #a7f3d0; - --color-secondary-300: #6ee7b7; - --color-secondary-400: #34d399; - --color-secondary-500: #10b981; - --color-secondary-600: #059669; - --color-secondary-700: #047857; - --color-secondary-800: #065f46; - --color-secondary-900: #064e3b; + --color-secondary-50: 236, 253, 245; + --color-secondary-100: 209, 250, 229; + --color-secondary-200: 167, 243, 208; + --color-secondary-300: 110, 231, 183; + --color-secondary-400: 52, 211, 153; + --color-secondary-500: 16, 185, 129; + --color-secondary-600: 5, 150, 105; + --color-secondary-700: 4, 120, 87; + --color-secondary-800: 6, 95, 70; + --color-secondary-900: 6, 78, 59; } diff --git a/assets/css/schemes/congo.css b/assets/css/schemes/congo.css index 3a67ebc3..375ef7b3 100644 --- a/assets/css/schemes/congo.css +++ b/assets/css/schemes/congo.css @@ -1,37 +1,37 @@ /* Congo scheme */ :root { - --color-neutral: #fff; + --color-neutral: 255, 255, 255; /* Gray */ - --color-neutral-50: #fafafa; - --color-neutral-100: #f4f4f5; - --color-neutral-200: #e4e4e7; - --color-neutral-300: #d4d4d8; - --color-neutral-400: #a1a1aa; - --color-neutral-500: #71717a; - --color-neutral-600: #52525b; - --color-neutral-700: #3f3f46; - --color-neutral-800: #27272a; - --color-neutral-900: #18181b; + --color-neutral-50: 250, 250, 250; + --color-neutral-100: 244, 244, 245; + --color-neutral-200: 228, 228, 231; + --color-neutral-300: 212, 212, 216; + --color-neutral-400: 161, 161, 170; + --color-neutral-500: 113, 113, 122; + --color-neutral-600: 82, 82, 91; + --color-neutral-700: 63, 63, 70; + --color-neutral-800: 39, 39, 42; + --color-neutral-900: 24, 24, 27; /* Violet */ - --color-primary-50: #f5f3ff; - --color-primary-100: #ede9fe; - --color-primary-200: #ddd6fe; - --color-primary-300: #c4b5fd; - --color-primary-400: #a78bfa; - --color-primary-500: #8b5cf6; - --color-primary-600: #7c3aed; - --color-primary-700: #6d28d9; - --color-primary-800: #5b21b6; - --color-primary-900: #4c1d95; + --color-primary-50: 245, 243, 255; + --color-primary-100: 237, 233, 254; + --color-primary-200: 221, 214, 254; + --color-primary-300: 196, 181, 253; + --color-primary-400: 167, 139, 250; + --color-primary-500: 139, 92, 246; + --color-primary-600: 124, 58, 237; + --color-primary-700: 109, 40, 217; + --color-primary-800: 91, 33, 182; + --color-primary-900: 76, 29, 149; /* Fuchsia */ - --color-secondary-50: #fdf4ff; - --color-secondary-100: #fae8ff; - --color-secondary-200: #f5d0fe; - --color-secondary-300: #f0abfc; - --color-secondary-400: #e879f9; - --color-secondary-500: #d946ef; - --color-secondary-600: #c026d3; - --color-secondary-700: #a21caf; - --color-secondary-800: #86198f; - --color-secondary-900: #701a75; + --color-secondary-50: 253, 244, 255; + --color-secondary-100: 250, 232, 255; + --color-secondary-200: 245, 208, 254; + --color-secondary-300: 240, 171, 252; + --color-secondary-400: 232, 121, 249; + --color-secondary-500: 217, 70, 239; + --color-secondary-600: 192, 38, 211; + --color-secondary-700: 162, 28, 175; + --color-secondary-800: 134, 25, 143; + --color-secondary-900: 112, 26, 117; } diff --git a/assets/css/schemes/fire.css b/assets/css/schemes/fire.css index 60ae09c2..ed69d5cb 100644 --- a/assets/css/schemes/fire.css +++ b/assets/css/schemes/fire.css @@ -1,37 +1,37 @@ /* Fire scheme */ :root { - --color-neutral: #fff; + --color-neutral: 255, 255, 255; /* Stone */ - --color-neutral-50: #fafaf9; - --color-neutral-100: #f5f5f4; - --color-neutral-200: #e7e5e4; - --color-neutral-300: #d6d3d1; - --color-neutral-400: #a8a29e; - --color-neutral-500: #78716c; - --color-neutral-600: #57534e; - --color-neutral-700: #44403c; - --color-neutral-800: #292524; - --color-neutral-900: #1c1917; + --color-neutral-50: 250, 250, 249; + --color-neutral-100: 245, 245, 244; + --color-neutral-200: 231, 229, 228; + --color-neutral-300: 214, 211, 209; + --color-neutral-400: 168, 162, 158; + --color-neutral-500: 120, 113, 108; + --color-neutral-600: 87, 83, 78; + --color-neutral-700: 68, 64, 60; + --color-neutral-800: 41, 37, 36; + --color-neutral-900: 28, 25, 23; /* Orange */ - --color-primary-50: #fff7ed; - --color-primary-100: #ffedd5; - --color-primary-200: #fed7aa; - --color-primary-300: #fdba74; - --color-primary-400: #fb923c; - --color-primary-500: #f97316; - --color-primary-600: #ea580c; - --color-primary-700: #c2410c; - --color-primary-800: #9a3412; - --color-primary-900: #7c2d12; + --color-primary-50: 255, 247, 237; + --color-primary-100: 255, 237, 213; + --color-primary-200: 254, 215, 170; + --color-primary-300: 253, 186, 116; + --color-primary-400: 251, 146, 60; + --color-primary-500: 249, 115, 22; + --color-primary-600: 234, 88, 12; + --color-primary-700: 194, 65, 12; + --color-primary-800: 154, 52, 18; + --color-primary-900: 124, 45, 18; /* Rose */ - --color-secondary-50: #fff1f2; - --color-secondary-100: #ffe4e6; - --color-secondary-200: #fecdd3; - --color-secondary-300: #fda4af; - --color-secondary-400: #fb7185; - --color-secondary-500: #f43f5e; - --color-secondary-600: #e11d48; - --color-secondary-700: #be123c; - --color-secondary-800: #9f1239; - --color-secondary-900: #881337; + --color-secondary-50: 255, 241, 242; + --color-secondary-100: 255, 228, 230; + --color-secondary-200: 254, 205, 211; + --color-secondary-300: 253, 164, 175; + --color-secondary-400: 251, 113, 133; + --color-secondary-500: 244, 63, 94; + --color-secondary-600: 225, 29, 72; + --color-secondary-700: 190, 18, 60; + --color-secondary-800: 159, 18, 57; + --color-secondary-900: 136, 19, 55; } diff --git a/assets/css/schemes/ocean.css b/assets/css/schemes/ocean.css index 4dd80e1d..cc6d2d6d 100644 --- a/assets/css/schemes/ocean.css +++ b/assets/css/schemes/ocean.css @@ -1,37 +1,37 @@ /* Ocean scheme */ :root { - --color-neutral: #fff; + --color-neutral: 255, 255, 255; /* Gray */ - --color-neutral-50: #f8fafc; - --color-neutral-100: #f1f5f9; - --color-neutral-200: #e2e8f0; - --color-neutral-300: #cbd5e1; - --color-neutral-400: #94a3b8; - --color-neutral-500: #64748b; - --color-neutral-600: #475569; - --color-neutral-700: #334155; - --color-neutral-800: #1e293b; - --color-neutral-900: #0f172a; + --color-neutral-50: 248, 250, 252; + --color-neutral-100: 241, 245, 249; + --color-neutral-200: 226, 232, 240; + --color-neutral-300: 203, 213, 225; + --color-neutral-400: 148, 163, 184; + --color-neutral-500: 100, 116, 139; + --color-neutral-600: 71, 85, 105; + --color-neutral-700: 51, 65, 85; + --color-neutral-800: 30, 41, 59; + --color-neutral-900: 15, 23, 42; /* Blue */ - --color-primary-50: #eff6ff; - --color-primary-100: #dbeafe; - --color-primary-200: #bfdbfe; - --color-primary-300: #93c5fd; - --color-primary-400: #60a5fa; - --color-primary-500: #3b82f6; - --color-primary-600: #2563eb; - --color-primary-700: #1d4ed8; - --color-primary-800: #1e40af; - --color-primary-900: #1e3a8a; + --color-primary-50: 239, 246, 255; + --color-primary-100: 219, 234, 254; + --color-primary-200: 191, 219, 254; + --color-primary-300: 147, 197, 253; + --color-primary-400: 96, 165, 250; + --color-primary-500: 59, 130, 246; + --color-primary-600: 37, 99, 235; + --color-primary-700: 29, 78, 216; + --color-primary-800: 30, 64, 175; + --color-primary-900: 30, 58, 138; /* Cyan */ - --color-secondary-50: #ecfeff; - --color-secondary-100: #cffafe; - --color-secondary-200: #a5f3fc; - --color-secondary-300: #67e8f9; - --color-secondary-400: #22d3ee; - --color-secondary-500: #06b6d4; - --color-secondary-600: #0891b2; - --color-secondary-700: #0e7490; - --color-secondary-800: #155e75; - --color-secondary-900: #164e63; + --color-secondary-50: 236, 254, 255; + --color-secondary-100: 207, 250, 254; + --color-secondary-200: 165, 243, 252; + --color-secondary-300: 103, 232, 249; + --color-secondary-400: 34, 211, 238; + --color-secondary-500: 6, 182, 212; + --color-secondary-600: 8, 145, 178; + --color-secondary-700: 14, 116, 144; + --color-secondary-800: 21, 94, 117; + --color-secondary-900: 22, 78, 99; } diff --git a/assets/css/schemes/slate.css b/assets/css/schemes/slate.css index a89898a2..3422d284 100644 --- a/assets/css/schemes/slate.css +++ b/assets/css/schemes/slate.css @@ -1,37 +1,37 @@ /* Slate scheme */ :root { - --color-neutral: #fff; + --color-neutral: 255, 255, 255; /* Gray */ - --color-neutral-50: #f9fafb; - --color-neutral-100: #f3f4f6; - --color-neutral-200: #e5e7eb; - --color-neutral-300: #d1d5db; - --color-neutral-400: #9ca3af; - --color-neutral-500: #6b7280; - --color-neutral-600: #4b5563; - --color-neutral-700: #374151; - --color-neutral-800: #1f2937; - --color-neutral-900: #111827; + --color-neutral-50: 249, 250, 251; + --color-neutral-100: 243, 244, 246; + --color-neutral-200: 229, 231, 235; + --color-neutral-300: 209, 213, 219; + --color-neutral-400: 156, 163, 175; + --color-neutral-500: 107, 114, 128; + --color-neutral-600: 75, 85, 99; + --color-neutral-700: 55, 65, 81; + --color-neutral-800: 31, 41, 55; + --color-neutral-900: 17, 24, 39; /* Gray */ - --color-primary-50: #f9fafb; - --color-primary-100: #f3f4f6; - --color-primary-200: #e5e7eb; - --color-primary-300: #d1d5db; - --color-primary-400: #9ca3af; - --color-primary-500: #6b7280; - --color-primary-600: #4b5563; - --color-primary-700: #374151; - --color-primary-800: #1f2937; - --color-primary-900: #111827; + --color-primary-50: 249, 250, 251; + --color-primary-100: 243, 244, 246; + --color-primary-200: 229, 231, 235; + --color-primary-300: 209, 213, 219; + --color-primary-400: 156, 163, 175; + --color-primary-500: 107, 114, 128; + --color-primary-600: 75, 85, 99; + --color-primary-700: 55, 65, 81; + --color-primary-800: 31, 41, 55; + --color-primary-900: 17, 24, 39; /* Gray */ - --color-secondary-50: #f9fafb; - --color-secondary-100: #f3f4f6; - --color-secondary-200: #e5e7eb; - --color-secondary-300: #d1d5db; - --color-secondary-400: #9ca3af; - --color-secondary-500: #6b7280; - --color-secondary-600: #4b5563; - --color-secondary-700: #374151; - --color-secondary-800: #1f2937; - --color-secondary-900: #111827; + --color-secondary-50: 249, 250, 251; + --color-secondary-100: 243, 244, 246; + --color-secondary-200: 229, 231, 235; + --color-secondary-300: 209, 213, 219; + --color-secondary-400: 156, 163, 175; + --color-secondary-500: 107, 114, 128; + --color-secondary-600: 75, 85, 99; + --color-secondary-700: 55, 65, 81; + --color-secondary-800: 31, 41, 55; + --color-secondary-900: 17, 24, 39; } diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 00000000..f41bbdd4 --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/times.svg b/assets/icons/times.svg new file mode 100644 index 00000000..81446224 --- /dev/null +++ b/assets/icons/times.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/js/search.js b/assets/js/search.js new file mode 100644 index 00000000..cbc42bdc --- /dev/null +++ b/assets/js/search.js @@ -0,0 +1,159 @@ +var fuse; +var showButton = document.getElementById("search-button"); +var hideButton = document.getElementById("close-search-button"); +var wrapper = document.getElementById("search-wrapper"); +var modal = document.getElementById("search-modal"); +var input = document.getElementById("search-query"); +var output = document.getElementById("search-results"); +var first = output.firstChild; +var last = output.lastChild; +var searchVisible = false; +var indexed = false; +var hasResults = false; + +// Listen for events +showButton.addEventListener("click", displaySearch); +hideButton.addEventListener("click", hideSearch); +wrapper.addEventListener("click", hideSearch); +modal.addEventListener("click", function (event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + return false; +}); +document.addEventListener("keydown", function (event) { + // Forward slash to open search wrapper + if (event.key == "/") { + if (!searchVisible) { + event.preventDefault(); + displaySearch(); + } + } + + // Esc to close search wrapper + if (event.key == "Escape") { + hideSearch(); + } + + // Down arrow to move down results list + if (event.key == "ArrowDown") { + if (searchVisible && hasResults) { + event.preventDefault(); + if (document.activeElement == input) { + first.focus(); + } else if (document.activeElement == last) { + last.focus(); + } else { + document.activeElement.parentElement.nextSibling.firstElementChild.focus(); + } + } + } + + // Up arrow to move up results list + if (event.key == "ArrowUp") { + if (searchVisible && hasResults) { + event.preventDefault(); + if (document.activeElement == input) { + input.focus(); + } else if (document.activeElement == first) { + input.focus(); + } else { + document.activeElement.parentElement.previousSibling.firstElementChild.focus(); + } + } + } +}); + +// Update search on each keypress +input.onkeyup = function (event) { + executeQuery(this.value); +}; + +function displaySearch() { + if (!indexed) { + buildIndex(); + } + if (!searchVisible) { + document.body.style.overflow = "hidden"; + wrapper.style.visibility = "visible"; + input.focus(); + searchVisible = true; + } +} + +function hideSearch() { + if (searchVisible) { + document.body.style.overflow = "visible"; + wrapper.style.visibility = "hidden"; + document.activeElement.blur(); + searchVisible = false; + } +} + +function fetchJSON(path, callback) { + var httpRequest = new XMLHttpRequest(); + httpRequest.onreadystatechange = function () { + if (httpRequest.readyState === 4) { + if (httpRequest.status === 200) { + var data = JSON.parse(httpRequest.responseText); + if (callback) callback(data); + } + } + }; + httpRequest.open("GET", path); + httpRequest.send(); +} + +function buildIndex() { + var baseURL = document + .querySelector('script[data-id="fusejs"][data-url]') + .getAttribute("data-url"); + fetchJSON(baseURL + "index.json", function (data) { + var options = { + shouldSort: true, + ignoreLocation: true, + threshold: 0.0, + includeMatches: true, + keys: [ + { name: "title", weight: 0.8 }, + { name: "section", weight: 0.2 }, + { name: "summary", weight: 0.6 }, + { name: "content", weight: 0.4 }, + ], + }; + fuse = new Fuse(data, options); + indexed = true; + }); +} + +function executeQuery(term) { + let results = fuse.search(term); + let resultsHTML = ""; + + if (results.length > 0) { + results.forEach(function (value, key) { + resultsHTML = + resultsHTML + + `
  • + +
    +
    ${value.item.title}
    +
    ${value.item.section}·${value.item.date}
    +
    ${value.item.summary}
    +
    +
    →
    +
    ←
    +     +
    • `; + }); + hasResults = true; + } else { + resultsHTML = ""; + hasResults = false; + } + + output.innerHTML = resultsHTML; + if (results.length > 0) { + first = output.firstChild.firstElementChild; + last = output.lastChild.firstElementChild; + } +} diff --git a/assets/lib/fuse/fuse.min.js b/assets/lib/fuse/fuse.min.js new file mode 100644 index 00000000..ca37378c --- /dev/null +++ b/assets/lib/fuse/fuse.min.js @@ -0,0 +1,9 @@ +/** + * Fuse.js v6.5.3 - Lightweight fuzzy-search (http://fusejs.io) + * + * Copyright (c) 2021 Kiro Risk (http://kiro.me) + * All Rights Reserved. Apache Software License 2.0 + * + * http://www.apache.org/licenses/LICENSE-2.0 + */ +var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3,n=new Map,r=Math.pow(10,t);return{get:function(t){var i=t.match(C).length;if(n.has(i))return n.get(i);var o=1/Math.pow(i,.5*e),c=parseFloat(Math.round(o*r)/r);return n.set(i,c),c},clear:function(){n.clear()}}}var $=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.getFn,i=void 0===n?I.getFn:n,o=t.fieldNormWeight,c=void 0===o?I.fieldNormWeight:o;r(this,e),this.norm=E(c,3),this.getFn=i,this.isCreated=!1,this.setIndexRecords()}return o(e,[{key:"setSources",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.docs=e}},{key:"setIndexRecords",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.records=e}},{key:"setKeys",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.keys=t,this._keysMap={},t.forEach((function(t,n){e._keysMap[t.id]=n}))}},{key:"create",value:function(){var e=this;!this.isCreated&&this.docs.length&&(this.isCreated=!0,g(this.docs[0])?this.docs.forEach((function(t,n){e._addString(t,n)})):this.docs.forEach((function(t,n){e._addObject(t,n)})),this.norm.clear())}},{key:"add",value:function(e){var t=this.size();g(e)?this._addString(e,t):this._addObject(e,t)}},{key:"removeAt",value:function(e){this.records.splice(e,1);for(var t=e,n=this.size();t2&&void 0!==arguments[2]?arguments[2]:{},r=n.getFn,i=void 0===r?I.getFn:r,o=n.fieldNormWeight,c=void 0===o?I.fieldNormWeight:o,a=new $({getFn:i,fieldNormWeight:c});return a.setKeys(e.map(_)),a.setSources(t),a.create(),a}function F(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.errors,r=void 0===n?0:n,i=t.currentLocation,o=void 0===i?0:i,c=t.expectedLocation,a=void 0===c?0:c,s=t.distance,u=void 0===s?I.distance:s,h=t.ignoreLocation,f=void 0===h?I.ignoreLocation:h,l=r/e.length;if(f)return l;var d=Math.abs(a-o);return u?l+d/u:d?1:l}function N(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:I.minMatchCharLength,n=[],r=-1,i=-1,o=0,c=e.length;o=t&&n.push([r,i]),r=-1)}return e[o-1]&&o-r>=t&&n.push([r,o-1]),n}var P=32;function W(e){for(var t={},n=0,r=e.length;n1&&void 0!==arguments[1]?arguments[1]:{},o=i.location,c=void 0===o?I.location:o,a=i.threshold,s=void 0===a?I.threshold:a,u=i.distance,h=void 0===u?I.distance:u,f=i.includeMatches,l=void 0===f?I.includeMatches:f,d=i.findAllMatches,v=void 0===d?I.findAllMatches:d,g=i.minMatchCharLength,y=void 0===g?I.minMatchCharLength:g,p=i.isCaseSensitive,m=void 0===p?I.isCaseSensitive:p,k=i.ignoreLocation,M=void 0===k?I.ignoreLocation:k;if(r(this,e),this.options={location:c,threshold:s,distance:h,includeMatches:l,findAllMatches:v,minMatchCharLength:y,isCaseSensitive:m,ignoreLocation:M},this.pattern=m?t:t.toLowerCase(),this.chunks=[],this.pattern.length){var b=function(e,t){n.chunks.push({pattern:e,alphabet:W(e),startIndex:t})},x=this.pattern.length;if(x>P){for(var w=0,L=x%P,S=x-L;w3&&void 0!==arguments[3]?arguments[3]:{},i=r.location,o=void 0===i?I.location:i,c=r.distance,a=void 0===c?I.distance:c,s=r.threshold,u=void 0===s?I.threshold:s,h=r.findAllMatches,f=void 0===h?I.findAllMatches:h,l=r.minMatchCharLength,d=void 0===l?I.minMatchCharLength:l,v=r.includeMatches,g=void 0===v?I.includeMatches:v,y=r.ignoreLocation,p=void 0===y?I.ignoreLocation:y;if(t.length>P)throw new Error(w(P));for(var m,k=t.length,M=e.length,b=Math.max(0,Math.min(o,M)),x=u,L=b,S=d>1||g,_=S?Array(M):[];(m=e.indexOf(t,L))>-1;){var O=F(t,{currentLocation:m,expectedLocation:b,distance:a,ignoreLocation:p});if(x=Math.min(O,x),L=m+k,S)for(var j=0;j=z;q-=1){var B=q-1,J=n[e.charAt(B)];if(S&&(_[B]=+!!J),K[q]=(K[q+1]<<1|1)&J,R&&(K[q]|=(A[q+1]|A[q])<<1|1|A[q+1]),K[q]&$&&(C=F(t,{errors:R,currentLocation:B,expectedLocation:b,distance:a,ignoreLocation:p}))<=x){if(x=C,(L=B)<=b)break;z=Math.max(1,2*b-L)}}if(F(t,{errors:R+1,currentLocation:b,expectedLocation:b,distance:a,ignoreLocation:p})>x)break;A=K}var U={isMatch:L>=0,score:Math.max(.001,C)};if(S){var V=N(_,d);V.length?g&&(U.indices=V):U.isMatch=!1}return U}(e,n,i,{location:c+o,distance:a,threshold:s,findAllMatches:u,minMatchCharLength:h,includeMatches:r,ignoreLocation:f}),p=y.isMatch,m=y.score,k=y.indices;p&&(g=!0),v+=m,p&&k&&(d=[].concat(l(d),l(k)))}));var y={isMatch:g,score:g?v/this.chunks.length:1};return g&&r&&(y.indices=d),y}}]),e}(),z=function(){function e(t){r(this,e),this.pattern=t}return o(e,[{key:"search",value:function(){}}],[{key:"isMultiMatch",value:function(e){return D(e,this.multiRegex)}},{key:"isSingleMatch",value:function(e){return D(e,this.singleRegex)}}]),e}();function D(e,t){var n=e.match(t);return n?n[1]:null}var K=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){var t=e===this.pattern;return{isMatch:t,score:t?0:1,indices:[0,this.pattern.length-1]}}}],[{key:"type",get:function(){return"exact"}},{key:"multiRegex",get:function(){return/^="(.*)"$/}},{key:"singleRegex",get:function(){return/^=(.*)$/}}]),n}(z),q=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){var t=-1===e.indexOf(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,e.length-1]}}}],[{key:"type",get:function(){return"inverse-exact"}},{key:"multiRegex",get:function(){return/^!"(.*)"$/}},{key:"singleRegex",get:function(){return/^!(.*)$/}}]),n}(z),B=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){var t=e.startsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,this.pattern.length-1]}}}],[{key:"type",get:function(){return"prefix-exact"}},{key:"multiRegex",get:function(){return/^\^"(.*)"$/}},{key:"singleRegex",get:function(){return/^\^(.*)$/}}]),n}(z),J=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){var t=!e.startsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,e.length-1]}}}],[{key:"type",get:function(){return"inverse-prefix-exact"}},{key:"multiRegex",get:function(){return/^!\^"(.*)"$/}},{key:"singleRegex",get:function(){return/^!\^(.*)$/}}]),n}(z),U=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){var t=e.endsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[e.length-this.pattern.length,e.length-1]}}}],[{key:"type",get:function(){return"suffix-exact"}},{key:"multiRegex",get:function(){return/^"(.*)"\$$/}},{key:"singleRegex",get:function(){return/^(.*)\$$/}}]),n}(z),V=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){var t=!e.endsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,e.length-1]}}}],[{key:"type",get:function(){return"inverse-suffix-exact"}},{key:"multiRegex",get:function(){return/^!"(.*)"\$$/}},{key:"singleRegex",get:function(){return/^!(.*)\$$/}}]),n}(z),G=function(e){a(n,e);var t=f(n);function n(e){var i,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c=o.location,a=void 0===c?I.location:c,s=o.threshold,u=void 0===s?I.threshold:s,h=o.distance,f=void 0===h?I.distance:h,l=o.includeMatches,d=void 0===l?I.includeMatches:l,v=o.findAllMatches,g=void 0===v?I.findAllMatches:v,y=o.minMatchCharLength,p=void 0===y?I.minMatchCharLength:y,m=o.isCaseSensitive,k=void 0===m?I.isCaseSensitive:m,M=o.ignoreLocation,b=void 0===M?I.ignoreLocation:M;return r(this,n),(i=t.call(this,e))._bitapSearch=new T(e,{location:a,threshold:u,distance:f,includeMatches:d,findAllMatches:g,minMatchCharLength:p,isCaseSensitive:k,ignoreLocation:b}),i}return o(n,[{key:"search",value:function(e){return this._bitapSearch.searchIn(e)}}],[{key:"type",get:function(){return"fuzzy"}},{key:"multiRegex",get:function(){return/^"(.*)"$/}},{key:"singleRegex",get:function(){return/^(.*)$/}}]),n}(z),H=function(e){a(n,e);var t=f(n);function n(e){return r(this,n),t.call(this,e)}return o(n,[{key:"search",value:function(e){for(var t,n=0,r=[],i=this.pattern.length;(t=e.indexOf(this.pattern,n))>-1;)n=t+i,r.push([t,n-1]);var o=!!r.length;return{isMatch:o,score:o?0:1,indices:r}}}],[{key:"type",get:function(){return"include"}},{key:"multiRegex",get:function(){return/^'"(.*)"$/}},{key:"singleRegex",get:function(){return/^'(.*)$/}}]),n}(z),Q=[K,H,B,J,V,U,q,G],X=Q.length,Y=/ +(?=([^\"]*\"[^\"]*\")*[^\"]*$)/;function Z(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e.split("|").map((function(e){for(var n=e.trim().split(Y).filter((function(e){return e&&!!e.trim()})),r=[],i=0,o=n.length;i1&&void 0!==arguments[1]?arguments[1]:{},i=n.isCaseSensitive,o=void 0===i?I.isCaseSensitive:i,c=n.includeMatches,a=void 0===c?I.includeMatches:c,s=n.minMatchCharLength,u=void 0===s?I.minMatchCharLength:s,h=n.ignoreLocation,f=void 0===h?I.ignoreLocation:h,l=n.findAllMatches,d=void 0===l?I.findAllMatches:l,v=n.location,g=void 0===v?I.location:v,y=n.threshold,p=void 0===y?I.threshold:y,m=n.distance,k=void 0===m?I.distance:m;r(this,e),this.query=null,this.options={isCaseSensitive:o,includeMatches:a,minMatchCharLength:u,findAllMatches:d,ignoreLocation:f,location:g,threshold:p,distance:k},this.pattern=o?t:t.toLowerCase(),this.query=Z(this.pattern,this.options)}return o(e,[{key:"searchIn",value:function(e){var t=this.query;if(!t)return{isMatch:!1,score:1};var n=this.options,r=n.includeMatches;e=n.isCaseSensitive?e:e.toLowerCase();for(var i=0,o=[],c=0,a=0,s=t.length;a-1&&(n.refIndex=e.idx),t.matches.push(n)}}))}function ve(e,t){t.score=e.score}function ge(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.includeMatches,i=void 0===r?I.includeMatches:r,o=n.includeScore,c=void 0===o?I.includeScore:o,a=[];return i&&a.push(de),c&&a.push(ve),e.map((function(e){var n=e.idx,r={item:t[n],refIndex:n};return a.length&&a.forEach((function(t){t(e,r)})),r}))}var ye=function(){function e(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;r(this,e),this.options=t(t({},I),i),this.options.useExtendedSearch,this._keyStore=new S(this.options.keys),this.setCollection(n,o)}return o(e,[{key:"setCollection",value:function(e,t){if(this._docs=e,t&&!(t instanceof $))throw new Error("Incorrect 'index' type");this._myIndex=t||R(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}},{key:"add",value:function(e){k(e)&&(this._docs.push(e),this._myIndex.add(e))}},{key:"remove",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){return!1},t=[],n=0,r=this._docs.length;n1&&void 0!==arguments[1]?arguments[1]:{},n=t.limit,r=void 0===n?-1:n,i=this.options,o=i.includeMatches,c=i.includeScore,a=i.shouldSort,s=i.sortFn,u=i.ignoreFieldNorm,h=g(e)?g(this._docs[0])?this._searchStringList(e):this._searchObjectList(e):this._searchLogical(e);return le(h,{ignoreFieldNorm:u}),a&&h.sort(s),y(r)&&r>-1&&(h=h.slice(0,r)),ge(h,this._docs,{includeMatches:o,includeScore:c})}},{key:"_searchStringList",value:function(e){var t=re(e,this.options),n=this._myIndex.records,r=[];return n.forEach((function(e){var n=e.v,i=e.i,o=e.n;if(k(n)){var c=t.searchIn(n),a=c.isMatch,s=c.score,u=c.indices;a&&r.push({item:n,idx:i,matches:[{score:s,value:n,norm:o,indices:u}]})}})),r}},{key:"_searchLogical",value:function(e){var t=this,n=function(e,t){var n=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).auto,r=void 0===n||n,i=function e(n){var i=Object.keys(n),o=ue(n);if(!o&&i.length>1&&!se(n))return e(fe(n));if(he(n)){var c=o?n[ce]:i[0],a=o?n[ae]:n[c];if(!g(a))throw new Error(x(c));var s={keyId:j(c),pattern:a};return r&&(s.searcher=re(a,t)),s}var u={children:[],operator:i[0]};return i.forEach((function(t){var r=n[t];v(r)&&r.forEach((function(t){u.children.push(e(t))}))})),u};return se(e)||(e=fe(e)),i(e)}(e,this.options),r=function e(n,r,i){if(!n.children){var o=n.keyId,c=n.searcher,a=t._findMatches({key:t._keyStore.get(o),value:t._myIndex.getValueForItemAtKeyId(r,o),searcher:c});return a&&a.length?[{idx:i,item:r,matches:a}]:[]}for(var s=[],u=0,h=n.children.length;u1&&void 0!==arguments[1]?arguments[1]:{},n=t.getFn,r=void 0===n?I.getFn:n,i=t.fieldNormWeight,o=void 0===i?I.fieldNormWeight:i,c=e.keys,a=e.records,s=new $({getFn:r,fieldNormWeight:o});return s.setKeys(c),s.setIndexRecords(a),s},ye.config=I,function(){ne.push.apply(ne,arguments)}(te),ye},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Fuse=t(); \ No newline at end of file diff --git a/config/_default/config.toml b/config/_default/config.toml index 59290833..85eb4613 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -9,3 +9,6 @@ enableEmoji = true enableRobotsTXT = true summaryLength = 0 + +[outputs] + home = ["HTML", "RSS", "JSON"] diff --git a/config/_default/params.toml b/config/_default/params.toml index b645e1e4..d075a017 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -6,6 +6,7 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +enableSearch = false # darkMode = "auto" # darkToggle = false # logo = "img/logo.jpg" diff --git a/exampleSite/config/_default/config.toml b/exampleSite/config/_default/config.toml index 7d7ac3b4..ad59abfa 100644 --- a/exampleSite/config/_default/config.toml +++ b/exampleSite/config/_default/config.toml @@ -9,3 +9,6 @@ enableEmoji = true enableRobotsTXT = true summaryLength = 0 + +[outputs] + home = ["HTML", "RSS", "JSON"] diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 43e0536d..1f462b70 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -6,6 +6,7 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +enableSearch = true # darkMode = "auto" # darkToggle = false # logo = "img/logo.jpg" diff --git a/i18n/de.yaml b/i18n/de.yaml index ca0e982b..20aa1897 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -30,6 +30,11 @@ list: externalurl_title: "Link zu einer externen Seite" no_articles: "Es gibt hier noch keine Beiträge." +# search: +# open_button_title: "Search (/)" +# close_button_title: "Close (Esc)" +# input_placeholder: "Search" + sharing: email: "Per E-Mail teilen" facebook: "Auf Facebook teilen" diff --git a/i18n/en.yaml b/i18n/en.yaml index fbc99fb9..1ea40ef4 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -30,6 +30,11 @@ list: externalurl_title: "Link to external site" no_articles: "There's no articles to list here yet." +search: + open_button_title: "Search (/)" + close_button_title: "Close (Esc)" + input_placeholder: "Search" + sharing: email: "Send via email" facebook: "Share on Facebook" diff --git a/i18n/es.yaml b/i18n/es.yaml index fac89e92..6579ee88 100644 --- a/i18n/es.yaml +++ b/i18n/es.yaml @@ -30,6 +30,11 @@ list: externalurl_title: "Link a página externa" no_articles: "Aún no hay artículos para listar aquí." +# search: +# open_button_title: "Search (/)" +# close_button_title: "Close (Esc)" +# input_placeholder: "Search" + sharing: email: "Enviar vía email" facebook: "Compartir en Facebook" diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 4ca8c2e0..f2725de8 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -30,6 +30,11 @@ list: externalurl_title: "Lien d'article externe." no_articles: "Il n'y a pas encore d'articles ici." +# search: +# open_button_title: "Search (/)" +# close_button_title: "Close (Esc)" +# input_placeholder: "Search" + sharing: email: "Envoyer par email" facebook: "Poster sur Facebook" diff --git a/i18n/pt-BR.yaml b/i18n/pt-BR.yaml index 36d47ff9..ce619e8b 100644 --- a/i18n/pt-BR.yaml +++ b/i18n/pt-BR.yaml @@ -30,6 +30,11 @@ list: externalurl_title: "Link para site externo" no_articles: "Não tem artigos para lista aqui ainda." +# search: +# open_button_title: "Search (/)" +# close_button_title: "Close (Esc)" +# input_placeholder: "Search" + sharing: email: "Enviar por email" facebook: "Compartilhar pelo Facebook" diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 31320a1b..c5dfb519 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -29,6 +29,11 @@ list: externalurl_title: "链接到外部网站" no_articles: "这里还没有任何文章可以列出。" +# search: +# open_button_title: "Search (/)" +# close_button_title: "Close (Esc)" +# input_placeholder: "Search" + sharing: email: "通过电子邮件发送" facebook: "分享到 Facebook" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4ea34776..d027a553 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -17,14 +17,17 @@
    ↓{{ i18n "header.skip_to_main" }}
    {{- partial "header.html" . -}} -
    {{- block "main" . }}{{- end }}
    +
    {{- block "main" . }}{{- end }}
    + {{ if .Site.Params.enableSearch | default false }} + {{- partial "search.html" . -}} + {{ end }} {{- partial "footer.html" . -}} diff --git a/layouts/_default/index.json b/layouts/_default/index.json new file mode 100644 index 00000000..8d4ac99a --- /dev/null +++ b/layouts/_default/index.json @@ -0,0 +1,6 @@ +{{- $.Scratch.Add "index" slice -}} +{{- range .Site.RegularPages -}} + {{ $section := .Site.GetPage "section" .Section }} + {{- $.Scratch.Add "index" (dict "date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long")) "title" .Title "section" $section.Title "summary" .Summary "content" (.Plain | safeJS) "permalink" .Permalink) -}} +{{- end -}} +{{- $.Scratch.Get "index" | jsonify -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 0aa6f232..886f6dc9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -42,6 +42,19 @@ > {{ end }} + {{ if .Site.Params.enableSearch | default false }} +
  • + +
    • + {{ end }} {{ end }} diff --git a/layouts/partials/search.html b/layouts/partials/search.html new file mode 100644 index 00000000..14e278b9 --- /dev/null +++ b/layouts/partials/search.html @@ -0,0 +1,52 @@ +{{ $fuseLib := resources.Get "lib/fuse/fuse.min.js" }} +{{ $fuseConfig := resources.Get "js/search.js" }} +{{ $fuseConfig := $fuseConfig | resources.Minify }} +{{ $fuseJS := slice $fuseLib $fuseConfig | resources.Concat "js/fuse.bundle.js" | resources.Fingerprint "sha512" -}} + + + diff --git a/package-lock.json b/package-lock.json index d05ef76d..879f4e1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,12 +12,13 @@ "devDependencies": { "@tailwindcss/typography": "^0.5.0", "chart.js": "^3.7.0", + "fuse.js": "^6.5.3", "katex": "^0.15.1", "mermaid": "^8.13.8", "prettier": "^2.3.2", "prettier-plugin-go-template": "^0.0.11", "rimraf": "^3.0.2", - "tailwindcss": "^3.0.12", + "tailwindcss": "^3.0.13", "vendor-copy": "^3.0.1" } }, @@ -1411,6 +1412,15 @@ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "dev": true }, + "node_modules/fuse.js": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.5.3.tgz", + "integrity": "sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -3400,6 +3410,12 @@ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "dev": true }, + "fuse.js": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.5.3.tgz", + "integrity": "sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==", + "dev": true + }, "glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", diff --git a/package.json b/package.json index 48cfeae5..9fab32a0 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "devDependencies": { "@tailwindcss/typography": "^0.5.0", "chart.js": "^3.7.0", + "fuse.js": "^6.5.3", "katex": "^0.15.1", "mermaid": "^8.13.8", "prettier": "^2.3.2", @@ -64,6 +65,10 @@ { "from": "node_modules/katex/dist/fonts/", "to": "assets/lib/katex/fonts/" + }, + { + "from": "node_modules/fuse.js/dist/fuse.min.js", + "to": "assets/lib/fuse/fuse.min.js" } ] } diff --git a/tailwind.config.js b/tailwind.config.js index f3e3a9ee..0742a6f3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,14 @@ const colors = require("tailwindcss/colors"); +function varWithOpacity(variable) { + return ({ opacityValue }) => { + if (opacityValue === undefined) { + return `rgb(var(${variable}))`; + } + return `rgba(var(${variable}), ${opacityValue})`; + }; +} + module.exports = { content: [ "./layouts/**/*.html", @@ -9,47 +18,47 @@ module.exports = { ], darkMode: "class", theme: { - colors: { - transparent: "transparent", - neutral: { - DEFAULT: "var(--color-neutral)", - 50: "var(--color-neutral-50)", - 100: "var(--color-neutral-100)", - 200: "var(--color-neutral-200)", - 300: "var(--color-neutral-300)", - 400: "var(--color-neutral-400)", - 500: "var(--color-neutral-500)", - 600: "var(--color-neutral-600)", - 700: "var(--color-neutral-700)", - 800: "var(--color-neutral-800)", - 900: "var(--color-neutral-900)", - }, - primary: { - 50: "var(--color-primary-50)", - 100: "var(--color-primary-100)", - 200: "var(--color-primary-200)", - 300: "var(--color-primary-300)", - 400: "var(--color-primary-400)", - 500: "var(--color-primary-500)", - 600: "var(--color-primary-600)", - 700: "var(--color-primary-700)", - 800: "var(--color-primary-800)", - 900: "var(--color-primary-900)", - }, - secondary: { - 50: "var(--color-secondary-50)", - 100: "var(--color-secondary-100)", - 200: "var(--color-secondary-200)", - 300: "var(--color-secondary-300)", - 400: "var(--color-secondary-400)", - 500: "var(--color-secondary-500)", - 600: "var(--color-secondary-600)", - 700: "var(--color-secondary-700)", - 800: "var(--color-secondary-800)", - 900: "var(--color-secondary-900)", - }, - }, extend: { + colors: { + transparent: "transparent", + neutral: { + DEFAULT: varWithOpacity("--color-neutral"), + 50: varWithOpacity("--color-neutral-50"), + 100: varWithOpacity("--color-neutral-100"), + 200: varWithOpacity("--color-neutral-200"), + 300: varWithOpacity("--color-neutral-300"), + 400: varWithOpacity("--color-neutral-400"), + 500: varWithOpacity("--color-neutral-500"), + 600: varWithOpacity("--color-neutral-600"), + 700: varWithOpacity("--color-neutral-700"), + 800: varWithOpacity("--color-neutral-800"), + 900: varWithOpacity("--color-neutral-900"), + }, + primary: { + 50: varWithOpacity("--color-primary-50"), + 100: varWithOpacity("--color-primary-100"), + 200: varWithOpacity("--color-primary-200"), + 300: varWithOpacity("--color-primary-300"), + 400: varWithOpacity("--color-primary-400"), + 500: varWithOpacity("--color-primary-500"), + 600: varWithOpacity("--color-primary-600"), + 700: varWithOpacity("--color-primary-700"), + 800: varWithOpacity("--color-primary-800"), + 900: varWithOpacity("--color-primary-900"), + }, + secondary: { + 50: varWithOpacity("--color-secondary-50"), + 100: varWithOpacity("--color-secondary-100"), + 200: varWithOpacity("--color-secondary-200"), + 300: varWithOpacity("--color-secondary-300"), + 400: varWithOpacity("--color-secondary-400"), + 500: varWithOpacity("--color-secondary-500"), + 600: varWithOpacity("--color-secondary-600"), + 700: varWithOpacity("--color-secondary-700"), + 800: varWithOpacity("--color-secondary-800"), + 900: varWithOpacity("--color-secondary-900"), + }, + }, typography: (theme) => ({ DEFAULT: { css: [