diff --git a/.prettierrc b/.prettierrc index 3031bfbc..d884083f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { + "goTemplateBracketSpacing": true, "htmlWhitespaceSensitivity": "css", "printWidth": 100, "singleQuote": false, diff --git a/CHANGELOG.md b/CHANGELOG.md index bda1cd3c..aeb0d45c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,36 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +## [2.0.0] - 2022-02-03 + +### Added + +- 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 +- Tables of Contents on article pages +- Code copy buttons in article content +- Taxonomy and term listings now support Markdown content +- Taxonomies on article and list pages +- Article pagination direction can be inverted +- Author `headline` parameter +- Skip to content and Scroll to top links +- Archetype for generating links to external articles + +### Changed + +- ⚠️ Required Hugo version is now 0.87.0 or later +- ⚠️ Complete rewrite of dark mode to allow more flexibile configuration +- ⚠️ All theme images are now Hugo assets +- ⚠️ Overhauled `figure` shortcode which now resizes images +- Upgrade to Tailwind v3.0.18 +- Inline Javascript moved to external files +- Improved JSON-LD structured data +- Breadcrumbs now fallback to section name when `title` is not provided +- Minor style and layout improvements + ## [1.6.4] - 2022-01-24 ### Added @@ -251,7 +281,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Advanced customisation using simple Tailwind colour definitions and styles - Fully documented -[unreleased]: https://github.com/jpanther/congo/compare/v1.6.4...HEAD +[unreleased]: https://github.com/jpanther/congo/compare/v2.0.0...HEAD +[2.0.0]: https://github.com/jpanther/congo/compare/v1.6.4...v2.0.0 [1.6.4]: https://github.com/jpanther/congo/compare/v1.6.3...v1.6.4 [1.6.3]: https://github.com/jpanther/congo/compare/v1.6.2...v1.6.3 [1.6.2]: https://github.com/jpanther/congo/compare/v1.6.1...v1.6.2 diff --git a/README.md b/README.md index 118f4e3f..5f817a49 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Congo -Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io). It's built using Tailwind CSS with a clean and minimalist design that prioritises to your content. +Congo is designed to be a powerful, lightweight theme for [Hugo](https://gohugo.io). It's built using Tailwind CSS with a clean and minimalist design that prioritises to your content. 🌏 [Demo site](https://jpanther.github.io/congo/) 📑 [Theme documentation](https://jpanther.github.io/congo/docs/) @@ -11,28 +11,28 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io ## Features -- Built with Tailwind CSS JIT for minified stylesheets without any excess code -- Fully responsive layout +- Fully responsive layout built with Tailwind CSS 3.0 - Multiple colour schemes (or fully customise your own) - Dark mode (forced on/off or auto-switching with user toggle) - Highly customisable configuration - Multiple homepage layouts - Flexible with any content types, taxonomies and menus +- Multilingual content support inlcuding support for RTL languages - Ability to link to posts on third-party websites +- Client-side site search powered by Fuse.js - Diagrams and visualisations using Mermaid - Charts using Chart.js - Mathematical notation using KaTeX - SVG icons from FontAwesome 5 -- Heading anchors, Buttons, Badges and more +- Automatic image resizing using Hugo Pipes +- Heading anchors, Tables of Contents, Code copy, Buttons, Badges and more - HTML and Emoji support in articles 🎉 - SEO friendly with links for sharing to social media -- RSS feeds - Fathom Analytics and Google Analytics support -- Favicons support -- Comments support +- RSS feeds, Favicons and comments support - Advanced customisation using simple Tailwind colour definitions and styles -- Fully documented -- Regular updates with fixes and new features +- Optimised for performance and accessibility with perfect Lighthouse scores +- Fully documented with regular updates --- diff --git a/archetypes/external.md b/archetypes/external.md new file mode 100644 index 00000000..80f16dc8 --- /dev/null +++ b/archetypes/external.md @@ -0,0 +1,10 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +externalUrl: "" +summary: "" +showReadingTime: false +_build: + render: "false" + list: "local" +--- diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index c7d49b76..43bd85a5 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,84 +1,67 @@ -/*! Congo v1.6.4 | MIT License | https://github.com/jpanther/congo */ +/*! Congo v2.0.0 | MIT License | https://github.com/jpanther/congo */ -/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */ - -/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ +/*! tailwindcss v3.0.18 | MIT License | https://tailwindcss.com */ /* -Document -======== -*/ - -/** -Use a better box model (opinionated). +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -html { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; -} - -/** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -*/ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; /* 2 */ } +::before, +::after { + --tw-content: ''; +} + /* -Sections -======== +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. */ -/** -Remove the margin in all browsers. +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; -} - -/** -Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - -body { - font-family: - system-ui, - -apple-system, /* Firefox supports this but not yet `system-ui` */ - 'Segoe UI', - Roboto, - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji'; + /* 1 */ + line-height: inherit; + /* 2 */ } /* -Grouping content -================ -*/ - -/** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. */ hr { @@ -86,23 +69,43 @@ hr { /* 1 */ color: inherit; /* 2 */ + border-top-width: 1px; + /* 3 */ } /* -Text-level semantics -==================== -*/ - -/** Add the correct text decoration in Chrome, Edge, and Safari. */ -abbr[title] { +abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } -/** +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* Add the correct font weight in Edge and Safari. */ @@ -111,28 +114,22 @@ strong { font-weight: bolder; } -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } -/** +/* Add the correct font size in all browsers. */ @@ -140,8 +137,8 @@ small { font-size: 80%; } -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, @@ -161,13 +158,9 @@ sup { } /* -Tabular data -============ -*/ - -/** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. */ table { @@ -175,16 +168,14 @@ table { /* 1 */ border-color: inherit; /* 2 */ + border-collapse: collapse; + /* 3 */ } /* -Forms -===== -*/ - -/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. */ button, @@ -196,25 +187,28 @@ textarea { /* 1 */ font-size: 100%; /* 1 */ - line-height: 1.15; + line-height: inherit; + /* 1 */ + color: inherit; /* 1 */ margin: 0; /* 2 */ + padding: 0; + /* 3 */ } -/** +/* Remove the inheritance of text transform in Edge and Firefox. -1. Remove the inheritance of text transform in Firefox. */ button, select { - /* 1 */ text-transform: none; } -/** -Correct the inability to style clickable types in iOS and Safari. +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. */ button, @@ -222,43 +216,30 @@ button, [type='reset'], [type='submit'] { -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ } -/** -Remove the inner border and padding in Firefox. -*/ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** -Restore the focus styles unset by the previous rule. +/* +Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { - outline: 1px dotted ButtonText; + outline: auto; } -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** +/* Add the correct vertical alignment in Chrome and Firefox. */ @@ -266,7 +247,7 @@ progress { vertical-align: baseline; } -/** +/* Correct the cursor style of increment and decrement buttons in Safari. */ @@ -275,7 +256,7 @@ Correct the cursor style of increment and decrement buttons in Safari. height: auto; } -/** +/* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ @@ -287,7 +268,7 @@ Correct the cursor style of increment and decrement buttons in Safari. /* 2 */ } -/** +/* Remove the inner padding in Chrome and Safari on macOS. */ @@ -295,9 +276,9 @@ Remove the inner padding in Chrome and Safari on macOS. -webkit-appearance: none; } -/** +/* 1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. +2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { @@ -307,11 +288,6 @@ Remove the inner padding in Chrome and Safari on macOS. /* 2 */ } -/* -Interactive -=========== -*/ - /* Add the correct display in Chrome and Safari. */ @@ -320,15 +296,9 @@ summary { display: list-item; } -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ +/* +Removes the default spacing and border for appropriate elements. +*/ blockquote, dl, @@ -346,221 +316,80 @@ pre { margin: 0; } -button { - background-color: transparent; - background-image: none; -} - fieldset { margin: 0; padding: 0; } +legend { + padding: 0; +} + ol, -ul { +ul, +menu { list-style: none; margin: 0; padding: 0; } -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 1 */ - line-height: 1.5; - /* 2 */ -} - -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: currentColor; - /* 2 */ -} - /* - * Ensure horizontal rules are visible by default - */ - -hr { - border-top-width: 1px; -} - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -img { - border-style: solid; -} +Prevent resizing textareas horizontally by default. +*/ textarea { resize: vertical; } +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; - color: #a1a1aa; + /* 1 */ + color: #9ca3af; + /* 2 */ } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; - color: #a1a1aa; + /* 1 */ + color: #9ca3af; + /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; - color: #a1a1aa; + /* 1 */ + color: #9ca3af; + /* 2 */ } +/* +Set the default cursor for buttons. +*/ + button, [role="button"] { cursor: pointer; } -/** - * Override legacy focus reset from Normalize with modern Firefox focus styles. - * - * This is actually an improvement over the new defaults in Firefox in our testing, - * as it triggers the better focus styles even for links, which still use a dotted - * outline in Firefox by default. - */ +/* +Make sure disabled buttons don't get the pointer cursor. +*/ -:-moz-focusring { - outline: auto; +:disabled { + cursor: default; } -table { - border-collapse: collapse; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button, -input, -optgroup, -select, -textarea { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -pre, -code, -kbd, -samp { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -/** - * 1. Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - * - * 2. Add `vertical-align: middle` to align replaced elements more - * sensibly by default when overriding `display` by adding a - * utility like `inline`. - * - * This can trigger a poorly considered linting error in some - * tools but is included by design. - * - * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 - */ +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ img, svg, @@ -576,12 +405,9 @@ object { /* 2 */ } -/** - * Constrain images and videos to the parent width and preserve - * their intrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ img, video { @@ -589,25 +415,66 @@ video { height: auto; } -/** - * Ensure the default browser behavior of the `hidden` attribute. - */ +/* +Ensure the default browser behavior of the `hidden` attribute. +*/ [hidden] { display: none; } *, ::before, ::after { - border-color: currentColor; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .prose { - color: var(--color-neutral-700); + color: var(--tw-prose-body); max-width: 65ch; } -.prose [class~="lead"] { - color: #4b5563; +.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; @@ -615,185 +482,193 @@ video { } .prose a { - color: var(--color-primary-700); + color: var(--tw-prose-links); 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)); } -.prose a:hover { - background-color: var(--color-primary-600); +:where(.prose a:hover):not(:where([class~="not-prose"] *)) { + color: rgb(var(--color-neutral)) !important; + text-decoration: none !important; + background-color: rgb(var(--color-primary-600)) !important; border-radius: 0.09rem; - color: var(--color-neutral); - text-decoration: none; } -.prose strong { - color: var(--color-neutral-900); +.prose :where(strong):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-bold); font-weight: 600; } -.prose ol[type="A"] { - --list-counter-style: upper-alpha; +.prose :where(ol):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; + padding-left: 1.625em; } -.prose ol[type="a"] { - --list-counter-style: lower-alpha; +.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; } -.prose ol[type="A" s] { - --list-counter-style: upper-alpha; +.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; } -.prose ol[type="a" s] { - --list-counter-style: lower-alpha; +.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; } -.prose ol[type="I"] { - --list-counter-style: upper-roman; +.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; } -.prose ol[type="i"] { - --list-counter-style: lower-roman; +.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; } -.prose ol[type="I" s] { - --list-counter-style: upper-roman; +.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; } -.prose ol[type="i" s] { - --list-counter-style: lower-roman; +.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; } -.prose ol[type="1"] { - --list-counter-style: decimal; +.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; } -.prose ol > li { - position: relative; - padding-left: 1.75em; +.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; } -.prose ol > li::before { - content: counter(list-item, var(--list-counter-style, decimal)) "."; - position: absolute; +.prose :where(ul):not(:where([class~="not-prose"] *)) { + list-style-type: disc; + padding-left: 1.625em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker { font-weight: 400; - color: var(--color-neutral-800); - left: 0; + color: var(--tw-prose-counters); } -.prose ul > li { - position: relative; - padding-left: 1.75em; +.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker { + color: var(--tw-prose-bullets); } -.prose ul > li::before { - content: ""; - position: absolute; - background-color: var(--color-neutral-500); - border-radius: 50%; - width: 0.375em; - height: 0.375em; - top: calc(0.875em - 0.1875em); - left: 0.25em; -} - -.prose hr { - border-color: var(--color-neutral-200); +.prose :where(hr):not(:where([class~="not-prose"] *)) { + border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } -.prose blockquote { +.prose :where(blockquote):not(:where([class~="not-prose"] *)) { font-weight: 500; font-style: italic; - color: var(--color-neutral-800); + color: var(--tw-prose-quotes); border-left-width: 0.25rem; - border-left-color: var(--color-primary-200); + border-left-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; } -.prose blockquote p:first-of-type::before { +.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { content: open-quote; } -.prose blockquote p:last-of-type::after { +.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { content: close-quote; } -.prose h1 { - color: var(--color-neutral-900); +.prose :where(h1):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; - position: relative; } -.prose h2 { - color: var(--color-neutral-800); +.prose :where(h1 strong):not(:where([class~="not-prose"] *)) { + font-weight: 900; +} + +.prose :where(h2):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; - position: relative; } -.prose h3 { - color: var(--color-neutral-800); +.prose :where(h2 strong):not(:where([class~="not-prose"] *)) { + font-weight: 800; +} + +.prose :where(h3):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; - position: relative; } -.prose h4 { - color: var(--color-neutral-800); +.prose :where(h3 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; +} + +.prose :where(h4):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; - position: relative; } -.prose figure figcaption { - color: #6b7280; +.prose :where(h4 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; +} + +.prose :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; +} + +.prose :where(figcaption):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } -.prose code { - color: var(--color-secondary-700); +.prose :where(code):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } -.prose code::before { +.prose :where(code):not(:where([class~="not-prose"] *))::before { content: "`"; } -.prose code::after { +.prose :where(code):not(:where([class~="not-prose"] *))::after { content: "`"; } -.prose a code { - color: var(--color-secondary-700); +.prose :where(a code):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-code); } -.prose pre { - color: var(--color-neutral-700); - background-color: var(--color-neutral-50); +.prose :where(pre):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-pre-code); + background-color: var(--tw-prose-pre-bg); overflow-x: auto; + font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; @@ -805,27 +680,27 @@ video { padding-left: 1.1428571em; } -.prose pre code { +.prose :where(pre code):not(:where([class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; - font-weight: 400; - color: var(--color-neutral-700); + font-weight: inherit; + color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } -.prose pre code::before { +.prose :where(pre code):not(:where([class~="not-prose"] *))::before { content: none; } -.prose pre code::after { +.prose :where(pre code):not(:where([class~="not-prose"] *))::after { content: none; } -.prose table { +.prose :where(table):not(:where([class~="not-prose"] *)) { width: 100%; table-layout: auto; text-align: left; @@ -835,31 +710,31 @@ video { line-height: 1.7142857; } -.prose thead { - color: var(--color-neutral-800); - font-weight: 600; +.prose :where(thead):not(:where([class~="not-prose"] *)) { border-bottom-width: 1px; - border-bottom-color: var(--color-neutral-500); + border-bottom-color: var(--tw-prose-th-borders); } -.prose thead th { +.prose :where(thead th):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; vertical-align: bottom; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } -.prose tbody tr { +.prose :where(tbody tr):not(:where([class~="not-prose"] *)) { border-bottom-width: 1px; - border-bottom-color: var(--color-neutral-300); + border-bottom-color: var(--tw-prose-td-borders); } -.prose tbody tr:last-child { +.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { border-bottom-width: 0; } -.prose tbody td { - vertical-align: top; +.prose :where(tbody td):not(:where([class~="not-prose"] *)) { + vertical-align: baseline; padding-top: 0.5714286em; padding-right: 0.5714286em; padding-bottom: 0.5714286em; @@ -867,142 +742,168 @@ video { } .prose { + --tw-prose-body: rgb(var(--color-neutral-700)); + --tw-prose-headings: rgb(var(--color-neutral-800)); + --tw-prose-lead: rgb(var(--color-neutral-500)); + --tw-prose-links: rgb(var(--color-primary-700)); + --tw-prose-bold: rgb(var(--color-neutral-900)); + --tw-prose-counters: rgb(var(--color-neutral-800)); + --tw-prose-bullets: rgb(var(--color-neutral-500)); + --tw-prose-hr: rgb(var(--color-neutral-200)); + --tw-prose-quotes: rgb(var(--color-neutral-700)); + --tw-prose-quote-borders: rgb(var(--color-primary-200)); + --tw-prose-captions: rgb(var(--color-neutral-500)); + --tw-prose-code: rgb(var(--color-secondary-700)); + --tw-prose-pre-code: rgb(var(--color-neutral-700)); + --tw-prose-pre-bg: rgb(var(--color-neutral-50)); + --tw-prose-th-borders: rgb(var(--color-neutral-500)); + --tw-prose-td-borders: rgb(var(--color-neutral-300)); + --tw-prose-invert-body: rgb(var(--color-neutral-300)); + --tw-prose-invert-headings: rgb(var(--color-neutral-50)); + --tw-prose-invert-lead: rgb(var(--color-neutral-500)); + --tw-prose-invert-links: rgb(var(--color-primary-400)); + --tw-prose-invert-bold: rgb(var(--color-neutral)); + --tw-prose-invert-counters: rgb(var(--color-neutral-400)); + --tw-prose-invert-bullets: rgb(var(--color-neutral-600)); + --tw-prose-invert-hr: rgb(var(--color-neutral-500)); + --tw-prose-invert-quotes: rgb(var(--color-neutral-200)); + --tw-prose-invert-quote-borders: rgb(var(--color-primary-900)); + --tw-prose-invert-captions: rgb(var(--color-neutral-400)); + --tw-prose-invert-code: rgb(var(--color-secondary-400)); + --tw-prose-invert-pre-code: rgb(var(--color-neutral-200)); + --tw-prose-invert-pre-bg: rgb(var(--color-neutral-700)); + --tw-prose-invert-th-borders: rgb(var(--color-neutral-500)); + --tw-prose-invert-td-borders: rgb(var(--color-neutral-700)); font-size: 1rem; line-height: 1.75; } -.prose p { +.prose :where(p):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } -.prose img { +.prose :where(img):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose video { +.prose :where(video):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose figure { +.prose :where(figure):not(:where([class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } -.prose figure > * { - margin-top: 0; - margin-bottom: 0; -} - -.prose h2 code { +.prose :where(h2 code):not(:where([class~="not-prose"] *)) { font-size: 0.875em; } -.prose h3 code { +.prose :where(h3 code):not(:where([class~="not-prose"] *)) { font-size: 0.9em; } -.prose ol { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose ul { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose li { +.prose :where(li):not(:where([class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } -.prose > ul > li p { +.prose :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose > ul > li > *:first-child { +.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose > ul > li > *:last-child { +.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } -.prose > ol > li > *:first-child { +.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; } -.prose > ol > li > *:last-child { +.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 1.25em; } -.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol { +.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } -.prose hr + * { +.prose :where(hr + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose h2 + * { +.prose :where(h2 + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose h3 + * { +.prose :where(h3 + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose h4 + * { +.prose :where(h4 + *):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose thead th:first-child { +.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose thead th:last-child { +.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose tbody td:first-child { +.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) { padding-left: 0; } -.prose tbody td:last-child { +.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) { padding-right: 0; } -.prose > :first-child { +.prose > :where(:first-child):not(:where([class~="not-prose"] *)) { margin-top: 0; } -.prose > :last-child { +.prose > :where(:last-child):not(:where([class~="not-prose"] *)) { margin-bottom: 0; } -.prose kbd { - background-color: var(--color-neutral-200); +.prose :where(kbd):not(:where([class~="not-prose"] *)) { + background-color: rgb(var(--color-neutral-200)); padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.9rem; font-weight: 600; } -.prose mark { - background-color: var(--color-secondary-200); +.prose :where(mark):not(:where([class~="not-prose"] *)) { + color: rgb(var(--color-neutral-800)); + background-color: rgb(var(--color-secondary-200)); padding: 0.1rem 0.2rem; border-radius: 0.12rem; } body a, body button { - transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -1014,51 +915,130 @@ body a, body button { width: 1em; } -/* Heading anchors */ +/* Search */ -.prose .heading-anchor { +#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; +} + +/* RTL support */ + +[dir="rtl"] .prose blockquote { + border-left-width: 0px; + border-right-width: 4px; + padding-right: 1rem; +} + +[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li { + margin-right: 1.75rem; + padding-left: 0px; + padding-right: 0.5rem; +} + +[dir="rtl"] .prose ol > li:before, [dir="rtl"] .prose ul > li:before { + left: auto; + right: 0.25rem; +} + +[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child { + padding-right: 0px; +} + +[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child { + padding-left: 0px; +} + +/* Table of Contents */ + +.toc ul, .toc li { + list-style-type: none; + padding-left: 0px; + padding-right: 0px; + line-height: 1.375; +} + +[dir="ltr"] .toc ul ul { + padding-left: 1rem; +} + +[dir="rtl"] .toc ul ul { + padding-right: 1rem; +} + +.toc a { + font-weight: 400; + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); +} + +.dark .toc a { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); +} + +[dir="rtl"] .toc ul > li { + margin-right: 0px; +} + +/* Code Copy */ + +.highlight-wrapper { + display: block; +} + +.highlight { + position: relative; + z-index: 0; +} + +.highlight:hover > .copy-button { + visibility: visible; +} + +.copy-button { + visibility: hidden; position: absolute; top: 0px; - text-decoration: none; - opacity: 0; - width: 1.1em; - left: -1.1em; + right: 0px; + z-index: 10; + width: 5rem; + cursor: pointer; + white-space: nowrap; + border-bottom-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity)); + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); + opacity: 0.9; } -.prose .heading-anchor:hover { - background-color: transparent; - color: var(--color-primary-600); - text-decoration: underline; +.dark .copy-button { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-200), var(--tw-text-opacity)); } -.prose .heading-anchor:hover, .prose .heading-anchor:focus, .prose h2:hover > .heading-anchor, .prose h3:hover > .heading-anchor, .prose h4:hover > .heading-anchor { - opacity: 1; +.copy-button:hover, .copy-button:focus, .copy-button:active, .copy-button:active:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } -/* Prose escape hatch */ - -.no-prose > p { - margin-top: 0px; +.dark .copy-button:hover, .dark .copy-button:focus, .dark .copy-button:active, .dark .copy-button:active:hover { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); } -.no-prose > p:last-child { - margin-bottom: 0px; -} - -/* Article pagination */ - -.article-pagination a:hover .article-pagination-title { - text-decoration: underline; - -webkit-text-decoration-color: var(--color-primary-500); - text-decoration-color: var(--color-primary-500); -} - -.article-pagination a:hover .article-pagination-direction { - color: var(--color-primary-700); -} - -.dark .article-pagination a:hover .article-pagination-direction { - color: var(--color-primary-400); +.copy-textarea { + position: absolute; + z-index: -10; + opacity: 0.05; } /* -- Chroma Highlight -- */ @@ -1066,24 +1046,19 @@ body a, body button { /* Background */ .prose .chroma { + position: static; 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); -} - -/* Other */ - -.chroma .x { -} - -/* Error */ - -.chroma .err { + --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)); } /* LineTableTD */ @@ -1117,13 +1092,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 { @@ -1133,578 +1110,271 @@ body a, body button { /* LineNumbersTable */ -.chroma .lnt { - color: var(--color-neutral-600); -} - -.dark .chroma .lnt { - color: var(--color-neutral-300); -} - -.chroma .lnt { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; -} - /* LineNumbers */ -.chroma .ln { - color: var(--color-neutral-600); -} - -.dark .chroma .ln { - color: var(--color-neutral-300); -} - -.chroma .ln { +.chroma .lnt, .chroma .ln { margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; + padding-left: 0.4em; + padding-right: 0.4em; + padding-top: 0px; + padding-bottom: 0px; + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); +} + +.dark .chroma .lnt, .dark .chroma .ln { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } /* Keyword */ -.chroma .k { - color: var(--color-primary-600); +/* KeywordDeclaration */ + +/* KeywordNamespace */ + +/* KeywordPseudo */ + +/* KeywordReserved */ + +/* NameClass */ + +/* NameFunctionMagic */ + +/* NameNamespace */ + +/* NameVariableClass */ + +/* Operator */ + +.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } -.dark .chroma .k { - color: var(--color-primary-300); +.dark .chroma .k, .dark .chroma .kd, .dark .chroma .kn, .dark .chroma .kp, .dark .chroma .kr, .dark .chroma .nc, .dark .chroma .fm, .dark .chroma .nn, .dark .chroma .vc, .dark .chroma .o { + --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); -} - -/* KeywordDeclaration */ - -.chroma .kd { - color: var(--color-primary-600); -} - -.dark .chroma .kd { - color: var(--color-primary-300); -} - -/* KeywordNamespace */ - -.chroma .kn { - color: var(--color-primary-600); -} - -.dark .chroma .kn { - color: var(--color-primary-300); -} - -/* KeywordPseudo */ - -.chroma .kp { - color: var(--color-primary-600); -} - -.dark .chroma .kp { - color: var(--color-primary-300); -} - -/* KeywordReserved */ - -.chroma .kr { - color: var(--color-primary-600); -} - -.dark .chroma .kr { - color: var(--color-primary-300); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* KeywordType */ -.chroma .kt { - color: var(--color-secondary-400); +/* NameVariable */ + +/* NameVariableInstance */ + +/* NameVariableMagic */ + +/* LiteralNumber */ + +/* LiteralNumberBin */ + +/* LiteralNumberFloat */ + +/* LiteralNumberHex */ + +/* LiteralNumberInteger */ + +/* LiteralNumberIntegerLong */ + +/* LiteralNumberOct */ + +.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } -.dark .chroma .kt { - color: var(--color-secondary-600); +.dark .chroma .kt, .dark .chroma .nv, .dark .chroma .vi, .dark .chroma .vm, .dark .chroma .m, .dark .chroma .mb, .dark .chroma .mf, .dark .chroma .mh, .dark .chroma .mi, .dark .chroma .il, .dark .chroma .mo { + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } /* Name */ -.chroma .n { - color: var(--color-secondary-900); +/* NameDecorator */ + +/* NameEntity */ + +/* NameLabel */ + +.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl { + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-900), var(--tw-text-opacity)); } -.dark .chroma .n { - color: var(--color-secondary-200); +.dark .chroma .n, .dark .chroma .nd, .dark .chroma .ni, .dark .chroma .nl { + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-200), var(--tw-text-opacity)); } /* NameAttribute */ -.chroma .na { - color: var(--color-secondary-800); -} - -.dark .chroma .na { - color: var(--color-secondary-300); -} - /* NameBuiltin */ -.chroma .nb { - color: var(--color-secondary-800); -} - -.dark .chroma .nb { - color: var(--color-secondary-300); -} - /* NameBuiltinPseudo */ -.chroma .bp { - color: var(--color-secondary-800); +/* NameOther */ + +/* NameProperty */ + +/* NameTag */ + +.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt { + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } -.dark .chroma .bp { - color: var(--color-secondary-300); -} - -/* NameClass */ - -.chroma .nc { - color: var(--color-primary-600); -} - -.dark .chroma .nc { - color: var(--color-primary-300); +.dark .chroma .na, .dark .chroma .nb, .dark .chroma .bp, .dark .chroma .nx, .dark .chroma .py, .dark .chroma .nt { + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } /* NameConstant */ -.chroma .no { - font-weight: 600; - color: var(--color-secondary-400); -} - -.dark .chroma .no { - color: var(--color-secondary-500); -} - -/* NameDecorator */ - -.chroma .nd { - color: var(--color-secondary-900); -} - -.dark .chroma .nd { - color: var(--color-secondary-200); -} - -/* NameEntity */ - -.chroma .ni { - color: var(--color-secondary-900); -} - -.dark .chroma .ni { - color: var(--color-secondary-200); -} - /* NameException */ -.chroma .ne { +/* NameVariableGlobal */ + +.chroma .no, .chroma .ne, .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 .ne { - color: var(--color-secondary-500); +.dark .chroma .no, .dark .chroma .ne, .dark .chroma .vg { + --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); -} - -/* NameFunctionMagic */ - -.chroma .fm { - color: var(--color-primary-600); -} - -.dark .chroma .fm { - color: var(--color-primary-300); -} - -/* NameLabel */ - -.chroma .nl { - color: var(--color-secondary-900); -} - -.dark .chroma .nl { - color: var(--color-secondary-200); -} - -/* NameNamespace */ - -.chroma .nn { - color: var(--color-primary-600); -} - -.dark .chroma .nn { - color: var(--color-primary-300); -} - -/* NameOther */ - -.chroma .nx { - color: var(--color-secondary-800); -} - -.dark .chroma .nx { - color: var(--color-secondary-300); -} - -/* NameProperty */ - -.chroma .py { - color: #cebc3a; -} - -/* NameTag */ - -.chroma .nt { - color: var(--color-secondary-800); -} - -.dark .chroma .nt { - color: var(--color-secondary-300); -} - -/* NameVariable */ - -.chroma .nv { - color: var(--color-secondary-400); -} - -.dark .chroma .nv { - color: var(--color-secondary-600); -} - -/* NameVariableClass */ - -.chroma .vc { - color: var(--color-primary-600); -} - -.dark .chroma .vc { - color: var(--color-primary-300); -} - -/* NameVariableGlobal */ - -.chroma .vg { - font-weight: 600; - color: var(--color-secondary-400); -} - -.dark .chroma .vg { - color: var(--color-secondary-500); -} - -/* NameVariableInstance */ - -.chroma .vi { - color: var(--color-secondary-400); -} - -.dark .chroma .vi { - color: var(--color-secondary-600); -} - -/* NameVariableMagic */ - -.chroma .vm { - color: var(--color-secondary-400); -} - -.dark .chroma .vm { - color: var(--color-secondary-600); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* Literal */ -.chroma .l { - color: var(--color-primary-800); -} - -.dark .chroma .l { - color: var(--color-primary-400); -} - /* LiteralDate */ -.chroma .ld { - color: var(--color-primary-800); -} - -.dark .chroma .ld { - color: var(--color-primary-400); -} - /* LiteralString */ -.chroma .s { - color: var(--color-primary-800); -} - -.dark .chroma .s { - color: var(--color-primary-400); -} - /* LiteralStringAffix */ -.chroma .sa { - color: var(--color-primary-800); -} - -.dark .chroma .sa { - color: var(--color-primary-400); -} - /* LiteralStringBacktick */ -.chroma .sb { - color: var(--color-primary-800); -} - -.dark .chroma .sb { - color: var(--color-primary-400); -} - /* LiteralStringChar */ -.chroma .sc { - color: var(--color-primary-800); -} - -.dark .chroma .sc { - color: var(--color-primary-400); -} - /* LiteralStringDelimiter */ -.chroma .dl { - color: var(--color-primary-800); -} - -.dark .chroma .dl { - color: var(--color-primary-400); -} - /* LiteralStringDoc */ -.chroma .sd { - color: var(--color-primary-800); -} - -.dark .chroma .sd { - color: var(--color-primary-400); -} - /* LiteralStringDouble */ -.chroma .s2 { - color: var(--color-primary-800); +/* LiteralStringHeredoc */ + +/* LiteralStringInterpol */ + +/* LiteralStringOther */ + +/* LiteralStringSingle */ + +/* GenericInserted */ + +/* GenericOutput */ + +/* GenericPrompt */ + +.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } -.dark .chroma .s2 { - color: var(--color-primary-400); +.dark .chroma .l, .dark .chroma .ld, .dark .chroma .s, .dark .chroma .sa, .dark .chroma .sb, .dark .chroma .sc, .dark .chroma .dl, .dark .chroma .sd, .dark .chroma .s2, .dark .chroma .sh, .dark .chroma .si, .dark .chroma .sx, .dark .chroma .s1, .dark .chroma .gi, .dark .chroma .go, .dark .chroma .gp { + --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); -} - -/* LiteralStringHeredoc */ - -.chroma .sh { - color: var(--color-primary-800); -} - -.dark .chroma .sh { - color: var(--color-primary-400); -} - -/* LiteralStringInterpol */ - -.chroma .si { - color: var(--color-primary-800); -} - -.dark .chroma .si { - color: var(--color-primary-400); -} - -/* LiteralStringOther */ - -.chroma .sx { - color: var(--color-primary-800); -} - -.dark .chroma .sx { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } /* LiteralStringRegex */ -.chroma .sr { - font-weight: 600; - color: var(--color-primary-800); -} - -.dark .chroma .sr { - color: var(--color-primary-400); -} - -/* LiteralStringSingle */ - -.chroma .s1 { - color: var(--color-primary-800); -} - -.dark .chroma .s1 { - color: var(--color-primary-400); -} - /* LiteralStringSymbol */ -.chroma .ss { +.chroma .sr, .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); -} - -/* LiteralNumber */ - -.chroma .m { - color: var(--color-secondary-400); -} - -.dark .chroma .m { - color: var(--color-secondary-600); -} - -/* LiteralNumberBin */ - -.chroma .mb { - color: var(--color-secondary-400); -} - -.dark .chroma .mb { - color: var(--color-secondary-600); -} - -/* LiteralNumberFloat */ - -.chroma .mf { - color: var(--color-secondary-400); -} - -.dark .chroma .mf { - color: var(--color-secondary-600); -} - -/* LiteralNumberHex */ - -.chroma .mh { - color: var(--color-secondary-400); -} - -.dark .chroma .mh { - color: var(--color-secondary-600); -} - -/* LiteralNumberInteger */ - -.chroma .mi { - color: var(--color-secondary-400); -} - -.dark .chroma .mi { - color: var(--color-secondary-600); -} - -/* LiteralNumberIntegerLong */ - -.chroma .il { - color: var(--color-secondary-400); -} - -.dark .chroma .il { - color: var(--color-secondary-600); -} - -/* LiteralNumberOct */ - -.chroma .mo { - color: var(--color-secondary-400); -} - -.dark .chroma .mo { - color: var(--color-secondary-600); -} - -/* Operator */ - -.chroma .o { - color: var(--color-primary-600); +.dark .chroma .sr, .dark .chroma .ss { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), 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); -} - -/* Punctuation */ - -.chroma .p { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } /* Comment */ -.chroma .c { +/* CommentMultiline */ + +/* CommentSingle */ + +/* CommentSpecial */ + +/* CommentPreproc */ + +/* CommentPreprocFile */ + +.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .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 .c { - color: var(--color-neutral-400); +.dark .chroma .c, .dark .chroma .cm, .dark .chroma .c1, .dark .chroma .cs, .dark .chroma .cp, .dark .chroma .cpf { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* CommentHashbang */ @@ -1712,76 +1382,13 @@ 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); -} - -/* CommentMultiline */ - -.chroma .cm { - font-style: italic; - color: var(--color-neutral-500); -} - -.dark .chroma .cm { - color: var(--color-neutral-400); -} - -/* CommentSingle */ - -.chroma .c1 { - font-style: italic; - color: var(--color-neutral-500); -} - -.dark .chroma .c1 { - color: var(--color-neutral-400); -} - -/* CommentSpecial */ - -.chroma .cs { - font-style: italic; - color: var(--color-neutral-500); -} - -.dark .chroma .cs { - color: var(--color-neutral-400); -} - -/* CommentPreproc */ - -.chroma .cp { - font-style: italic; - color: var(--color-neutral-500); -} - -.dark .chroma .cp { - color: var(--color-neutral-400); -} - -/* CommentPreprocFile */ - -.chroma .cpf { - font-style: italic; - color: var(--color-neutral-500); -} - -.dark .chroma .cpf { - color: var(--color-neutral-400); -} - -/* Generic */ - -.chroma .g { -} - -/* GenericDeleted */ - -.chroma .gd { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } /* GenericEmph */ @@ -1790,46 +1397,12 @@ body a, body button { font-style: italic; } -/* GenericError */ - -.chroma .gr { -} - /* GenericHeading */ .chroma .gh { font-weight: 600; - color: var(--color-neutral-500); -} - -/* GenericInserted */ - -.chroma .gi { - color: var(--color-primary-800); -} - -.dark .chroma .gi { - color: var(--color-primary-400); -} - -/* GenericOutput */ - -.chroma .go { - color: var(--color-primary-800); -} - -.dark .chroma .go { - color: var(--color-primary-400); -} - -/* GenericPrompt */ - -.chroma .gp { - color: var(--color-primary-800); -} - -.dark .chroma .gp { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } /* GenericStrong */ @@ -1840,31 +1413,88 @@ body a, body button { /* GenericSubheading */ -.chroma .gu { - color: var(--color-neutral-500); -} - /* GenericTraceback */ -.chroma .gt { - color: var(--color-neutral-500); +.chroma .gu, .chroma .gt { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } /* GenericUnderline */ .chroma .gl { - text-decoration: underline; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; } -/* TextWhitespace */ +.pointer-events-none { + pointer-events: none; +} -.chroma .w { +.pointer-events-auto { + pointer-events: auto; +} + +.invisible { + visibility: hidden; +} + +.fixed { + position: fixed; +} + +.absolute { + position: absolute; } .relative { position: relative; } +.sticky { + position: -webkit-sticky; + position: sticky; +} + +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + +.top-\[110vh\] { + top: 110vh; +} + +.bottom-\[-5\.5rem\] { + bottom: -5.5rem; +} + +.top-\[calc\(100vh-5rem\)\] { + top: calc(100vh - 5rem); +} + +.top-20 { + top: 5rem; +} + +.top-0 { + top: 0px; +} + +.z-50 { + z-index: 50; +} + +.z-10 { + z-index: 10; +} + +.order-first { + order: -9999; +} + .m-auto { margin: auto; } @@ -1883,11 +1513,26 @@ body a, body button { margin-bottom: 0.75rem; } +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.my-0 { + margin-top: 0px; + margin-bottom: 0px; +} + .mb-3 { margin-bottom: 0.75rem; } @@ -1900,6 +1545,10 @@ body a, body button { margin-bottom: 3rem; } +.mt-0 { + margin-top: 0px; +} + .mt-12 { margin-top: 3rem; } @@ -1908,10 +1557,6 @@ body a, body button { margin-top: 2.5rem; } -.mt-0 { - margin-top: 0px; -} - .mt-6 { margin-top: 1.5rem; } @@ -1920,22 +1565,18 @@ body a, body button { margin-top: -0.5rem; } -.ml-2 { - margin-left: 0.5rem; -} - .mr-3 { margin-right: 0.75rem; } -.mt-\[0\.1rem\] { - margin-top: 0.1rem; -} - .ml-3 { margin-left: 0.75rem; } +.mt-\[0\.1rem\] { + margin-top: 0.1rem; +} + .\!mt-0 { margin-top: 0px !important; } @@ -1944,26 +1585,30 @@ body a, body button { margin-bottom: 0px !important; } -.mr-4 { - margin-right: 1rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - .mb-1 { 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; } @@ -1996,10 +1641,18 @@ body a, body button { height: 100vh; } +.h-12 { + height: 3rem; +} + .h-24 { height: 6rem; } +.h-8 { + height: 2rem; +} + .h-full { height: 100%; } @@ -2012,6 +1665,14 @@ body a, body button { max-height: 10rem; } +.min-h-0 { + min-height: 0px; +} + +.w-12 { + width: 3rem; +} + .w-36 { width: 9rem; } @@ -2024,6 +1685,22 @@ body a, body button { width: 6rem; } +.w-screen { + width: 100vw; +} + +.w-8 { + width: 2rem; +} + +.w-6 { + width: 1.5rem; +} + +.min-w-0 { + min-width: 0px; +} + .min-w-\[1\.8rem\] { min-width: 1.8rem; } @@ -2036,6 +1713,10 @@ body a, body button { max-width: 80rem; } +.max-w-full { + max-width: 100%; +} + .max-w-prose { max-width: 65ch; } @@ -2044,14 +1725,27 @@ body a, body button { max-width: 10rem; } -.max-w-full { - max-width: 100%; +.max-w-3xl { + max-width: 48rem; } -.flex-grow { +.flex-none { + flex: none; +} + +.flex-auto { + flex: 1 1 auto; +} + +.grow { flex-grow: 1; } +.-translate-y-8 { + --tw-translate-y: -2rem; + 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)); +} + .cursor-default { cursor: default; } @@ -2064,6 +1758,12 @@ body a, body button { list-style-type: none; } +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + .flex-row { flex-direction: row; } @@ -2092,10 +1792,22 @@ body a, body button { place-self: center; } +.self-center { + align-self: center; +} + +.overflow-auto { + overflow: auto; +} + .overflow-hidden { overflow: hidden; } +.scroll-smooth { + scroll-behavior: smooth; +} + .rounded-full { border-radius: 9999px; } @@ -2108,10 +1820,19 @@ body a, body button { border-radius: 0.25rem; } +.rounded-lg { + border-radius: 0.5rem; +} + .\!rounded-md { border-radius: 0.375rem !important; } +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + .border { border-width: 1px; } @@ -2125,43 +1846,65 @@ body a, body button { } .border-neutral-400 { - border-color: var(--color-neutral-400); -} - -.border-neutral-300 { - border-color: var(--color-neutral-300); -} - -.border-primary-400 { - border-color: var(--color-primary-400); + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-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); +.border-neutral-300 { + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity)); +} + +.border-primary-400 { + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-400), 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\/50 { + background-color: rgba(var(--color-neutral), 0.5); +} + +.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 { @@ -2174,6 +1917,10 @@ body a, body button { object-position: left; } +.p-4 { + padding: 1rem; +} + .p-1 { padding: 0.25rem; } @@ -2183,6 +1930,21 @@ body a, body button { padding-right: 1.5rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.px-0 { + padding-left: 0px; + padding-right: 0px; +} + .py-8 { padding-top: 2rem; padding-bottom: 2rem; @@ -2198,11 +1960,6 @@ body a, body button { padding-right: 0.25rem; } -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - .py-\[1px\] { padding-top: 1px; padding-bottom: 1px; @@ -2218,6 +1975,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; @@ -2228,11 +1990,6 @@ body a, body button { padding-bottom: 0.75rem; } -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .pt-8 { padding-top: 2rem; } @@ -2253,10 +2010,6 @@ body a, body button { padding-top: 1rem; } -.pr-3 { - padding-right: 0.75rem; -} - .text-center { text-align: center; } @@ -2279,6 +2032,16 @@ body a, body button { line-height: 1.75rem; } +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -2289,21 +2052,11 @@ body a, body button { line-height: 1.5rem; } -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - .text-xs { font-size: 0.75rem; line-height: 1rem; } -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - .text-\[0\.6rem\] { font-size: 0.6rem; } @@ -2332,6 +2085,10 @@ body a, body button { text-transform: uppercase; } +.italic { + font-style: italic; +} + .leading-7 { line-height: 1.75rem; } @@ -2345,201 +2102,362 @@ 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 { + --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-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 { - text-decoration: none !important; + -webkit-text-decoration-line: none !important; + text-decoration-line: none !important; +} + +.opacity-0 { + opacity: 0; +} + +.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 { + --tw-backdrop-blur: blur(8px); + -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); +} + +.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); +} + +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } .first\:mt-8:first-child { margin-top: 2rem; } -.hover\:border-primary-400:hover { - border-color: var(--color-primary-400); -} - -.hover\:border-primary-500:hover { - border-color: var(--color-primary-500); +.hover\:border-primary-300:hover { + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-300), 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-600:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } .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); -} - -.hover\:text-primary-400:hover { - color: var(--color-primary-400); + --tw-text-opacity: 1; + color: rgba(var(--color-primary-500), 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 { - text-decoration: underline; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; } -.hover\:underline-neutral-300:hover { - -webkit-text-decoration-color: var(--color-neutral-300); - text-decoration-color: var(--color-neutral-300); +.hover\:decoration-primary-500:hover { + -webkit-text-decoration-color: rgb(var(--color-primary-500)); + text-decoration-color: rgb(var(--color-primary-500)); } -.hover\:underline-primary-400:hover { - -webkit-text-decoration-color: var(--color-primary-400); - text-decoration-color: var(--color-primary-400); +.hover\:decoration-neutral-300:hover { + -webkit-text-decoration-color: rgb(var(--color-neutral-300)); + text-decoration-color: rgb(var(--color-neutral-300)); } -.hover\:underline-primary-500:hover { - -webkit-text-decoration-color: var(--color-primary-500); - text-decoration-color: var(--color-primary-500); +.hover\:decoration-primary-400:hover { + -webkit-text-decoration-color: rgb(var(--color-primary-400)); + text-decoration-color: rgb(var(--color-primary-400)); } -.hover\:underline-offset-small:hover { - text-underline-offset: 2px; -} - -.hover\:underline-thickness-bold:hover { +.hover\:decoration-2:hover { text-decoration-thickness: 2px; } -.dark .dark\:prose-light { - color: var(--color-neutral-300); +.hover\:underline-offset-2:hover { + text-underline-offset: 2px; } -.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); +.focus\:translate-y-0:focus { + --tw-translate-y: 0px; + 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)); } -.dark .dark\:prose-light a:hover { - color: var(--color-neutral); - text-decoration: none; +.focus\:bg-primary-100:focus { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } -.dark .dark\:prose-light strong { - color: var(--color-neutral); +.focus\:outline-dotted:focus { + outline-style: dotted; } -.dark .dark\:prose-light ol > li::before { - color: var(--color-neutral-400); +.focus\:outline-2:focus { + outline-width: 2px; } -.dark .dark\:prose-light ul > li::before { - background-color: var(--color-neutral-600); +.focus\:outline-transparent:focus { + outline-color: transparent; } -.dark .dark\:prose-light hr { - border-color: var(--color-neutral-500); +.group:hover .group-hover\:text-primary-600 { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } -.dark .dark\:prose-light blockquote { - color: var(--color-neutral-200); - border-left-color: var(--color-primary-900); +.group:hover .group-hover\:text-primary-300 { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } -.dark .dark\:prose-light h1 { - color: var(--color-neutral); +.group:hover .group-hover\:underline { + -webkit-text-decoration-line: underline; + text-decoration-line: underline; } -.dark .dark\:prose-light h2 { - color: var(--color-neutral-50); +.group:hover .group-hover\:decoration-primary-500 { + -webkit-text-decoration-color: rgb(var(--color-primary-500)); + text-decoration-color: rgb(var(--color-primary-500)); } -.dark .dark\:prose-light h3 { - color: var(--color-neutral-50); +.group:hover .group-hover\:opacity-100 { + opacity: 1; } -.dark .dark\:prose-light h4 { - color: var(--color-neutral-50); +[dir="ltr"] .ltr\:right-0 { + right: 0px; } -.dark .dark\:prose-light figure figcaption { - color: var(--color-neutral-400); +[dir="ltr"] .ltr\:-left-6 { + left: -1.5rem; } -.dark .dark\:prose-light code { - color: var(--color-secondary-400); +[dir="ltr"] .ltr\:ml-2 { + margin-left: 0.5rem; } -.dark .dark\:prose-light a code { - color: var(--color-secondary-400); +[dir="ltr"] .ltr\:mr-4 { + margin-right: 1rem; } -.dark .dark\:prose-light pre { - color: var(--color-neutral-200); - background-color: var(--color-neutral-700); +[dir="ltr"] .ltr\:ml-1 { + margin-left: 0.25rem; } -.dark .dark\:prose-light pre code { - color: var(--color-neutral-200); +[dir="ltr"] .ltr\:mr-14 { + margin-right: 3.5rem; } -.dark .dark\:prose-light thead { - color: var(--color-neutral); - border-bottom-color: var(--color-neutral-500); +[dir="ltr"] .ltr\:-ml-5 { + margin-left: -1.25rem; } -.dark .dark\:prose-light tbody tr { - border-bottom-color: var(--color-neutral-700); +[dir="ltr"] .ltr\:block { + display: block; } -.dark .dark\:prose-light kbd { - background-color: var(--color-neutral-700); - color: var(--color-neutral-300); +[dir="ltr"] .ltr\:inline { + display: inline; } -.dark .dark\:prose-light mark { - background-color: var(--color-secondary-400); +[dir="ltr"] .ltr\:hidden { + display: none; +} + +[dir="ltr"] .ltr\:border-l { + border-left-width: 1px; +} + +[dir="ltr"] .ltr\:pr-2 { + padding-right: 0.5rem; +} + +[dir="ltr"] .ltr\:pl-5 { + padding-left: 1.25rem; +} + +[dir="ltr"] .ltr\:pr-3 { + padding-right: 0.75rem; +} + +[dir="ltr"] .ltr\:text-right { + text-align: right; +} + +[dir="rtl"] .rtl\:left-0 { + left: 0px; +} + +[dir="rtl"] .rtl\:-right-6 { + right: -1.5rem; +} + +[dir="rtl"] .rtl\:mr-2 { + margin-right: 0.5rem; +} + +[dir="rtl"] .rtl\:ml-4 { + margin-left: 1rem; +} + +[dir="rtl"] .rtl\:mr-1 { + margin-right: 0.25rem; +} + +[dir="rtl"] .rtl\:ml-14 { + margin-left: 3.5rem; +} + +[dir="rtl"] .rtl\:-mr-5 { + margin-right: -1.25rem; +} + +[dir="rtl"] .rtl\:block { + display: block; +} + +[dir="rtl"] .rtl\:inline { + display: inline; +} + +[dir="rtl"] .rtl\:hidden { + display: none; +} + +[dir="rtl"] .rtl\:border-r { + border-right-width: 1px; +} + +[dir="rtl"] .rtl\:pl-2 { + padding-left: 0.5rem; +} + +[dir="rtl"] .rtl\:pr-5 { + padding-right: 1.25rem; +} + +[dir="rtl"] .rtl\:pl-3 { + padding-left: 0.75rem; +} + +[dir="rtl"] .rtl\:text-left { + text-align: left; +} + +.dark .dark\:prose-invert { + --tw-prose-body: var(--tw-prose-invert-body); + --tw-prose-headings: var(--tw-prose-invert-headings); + --tw-prose-lead: var(--tw-prose-invert-lead); + --tw-prose-links: var(--tw-prose-invert-links); + --tw-prose-bold: var(--tw-prose-invert-bold); + --tw-prose-counters: var(--tw-prose-invert-counters); + --tw-prose-bullets: var(--tw-prose-invert-bullets); + --tw-prose-hr: var(--tw-prose-invert-hr); + --tw-prose-quotes: var(--tw-prose-invert-quotes); + --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); + --tw-prose-captions: var(--tw-prose-invert-captions); + --tw-prose-code: var(--tw-prose-invert-code); + --tw-prose-pre-code: var(--tw-prose-invert-pre-code); + --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); + --tw-prose-th-borders: var(--tw-prose-invert-th-borders); + --tw-prose-td-borders: var(--tw-prose-invert-td-borders); +} + +.dark .dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) { + -webkit-text-decoration-color: rgb(var(--color-neutral-600)); + text-decoration-color: rgb(var(--color-neutral-600)); +} + +.dark .dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) { + color: rgb(var(--color-neutral-200)); + background-color: rgb(var(--color-neutral-700)); +} + +.dark .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) { + background-color: rgb(var(--color-secondary-400)); } .dark .dark\:inline { @@ -2551,80 +2469,136 @@ 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 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity)); +} + +.dark .dark\:bg-neutral-800\/50 { + background-color: rgba(var(--color-neutral-800), 0.5); } .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); -} - -.dark .dark\:text-neutral-300 { - color: var(--color-neutral-300); -} - -.dark .dark\:text-neutral-400 { - color: var(--color-neutral-400); + --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-600 { - color: var(--color-neutral-600); +.dark .dark\:text-neutral-300 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); +} + +.dark .dark\:text-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\:underline-neutral-600 { - -webkit-text-decoration-color: var(--color-neutral-600); - text-decoration-color: var(--color-neutral-600); +.dark .dark\:text-neutral-100 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); +} + +.dark .dark\:hover\:border-primary-600:hover { + --tw-border-opacity: 1; + border-color: rgba(var(--color-primary-600), var(--tw-border-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-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)); +} + +.dark .group:hover .dark\:group-hover\:text-primary-400 { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); +} + +.dark .group:hover .dark\:group-hover\:text-neutral-700 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); } @media (min-width: 640px) { @@ -2648,6 +2622,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; @@ -2666,6 +2644,22 @@ body a, body button { .sm\:last\:mr-0:last-child { margin-right: 0px; } + + [dir="ltr"] .ltr\:sm\:mr-7 { + margin-right: 1.75rem; + } + + [dir="ltr"] .ltr\:sm\:last\:mr-0:last-child { + margin-right: 0px; + } + + [dir="rtl"] .rtl\:sm\:ml-7 { + margin-left: 1.75rem; + } + + [dir="rtl"] .rtl\:sm\:last\:ml-0:last-child { + margin-left: 0px; + } } @media (min-width: 768px) { @@ -2673,6 +2667,10 @@ body a, body button { width: 33.333333%; } + .md\:p-\[10vh\] { + padding: 10vh; + } + .md\:px-24 { padding-left: 6rem; padding-right: 6rem; @@ -2680,14 +2678,55 @@ body a, body button { } @media (min-width: 1024px) { + .lg\:sticky { + position: -webkit-sticky; + position: sticky; + } + + .lg\:top-10 { + top: 2.5rem; + } + + .lg\:order-last { + order: 9999; + } + + .lg\:mt-3 { + margin-top: 0.75rem; + } + + .lg\:hidden { + display: none; + } + .lg\:w-1\/4 { width: 25%; } + .lg\:max-w-xs { + max-width: 20rem; + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:p-\[12vh\] { + padding: 12vh; + } + .lg\:px-32 { padding-left: 8rem; padding-right: 8rem; } + + [dir="ltr"] .ltr\:lg\:pl-8 { + padding-left: 2rem; + } + + [dir="rtl"] .rtl\:lg\:pr-8 { + padding-right: 2rem; + } } @media (min-width: 1280px) { diff --git a/assets/css/main.css b/assets/css/main.css index d8b0ea92..ea936c1d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,60 +1,89 @@ -/*! Congo v1.6.4 | MIT License | https://github.com/jpanther/congo */ +/*! Congo v2.0.0 | MIT License | https://github.com/jpanther/congo */ @tailwind base; @tailwind components; body a, body button { - @apply transition; + @apply transition-colors; } /* Scale SVG icons to text size */ .icon svg { - height: 1em; - width: 1em; + @apply h-[1em] w-[1em]; } -/* Heading anchors */ -.prose .heading-anchor { - @apply absolute top-0 no-underline opacity-0; - width: 1.1em; - left: -1.1em; -} -.prose .heading-anchor:hover { - @apply underline bg-transparent text-primary-600; -} -.prose .heading-anchor:hover, -.prose .heading-anchor:focus, -.prose h2:hover > .heading-anchor, -.prose h3:hover > .heading-anchor, -.prose h4:hover > .heading-anchor { - @apply opacity-100; +/* 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; } -/* Prose escape hatch */ -.no-prose > p { - @apply mt-0 last:mb-0; +/* RTL support */ +.prose blockquote { + @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4; +} +.prose ul > li, +.prose ol > li { + @apply rtl:pl-0 rtl:pr-2 rtl:mr-7; +} +.prose ol > li:before, +.prose ul > li:before { + @apply rtl:left-auto rtl:right-1; +} +.prose thead td:first-child, +.prose thead th:first-child { + @apply rtl:pr-0; +} +.prose thead td:last-child, +.prose thead th:last-child { + @apply rtl:pl-0; } -/* Article pagination */ -.article-pagination a:hover .article-pagination-title { - @apply underline underline-primary-500; +/* Table of Contents */ +.toc ul, +.toc li { + @apply px-0 leading-snug list-none; +} +.toc ul ul { + @apply ltr:pl-4 rtl:pr-4; +} +.toc a { + @apply font-normal text-neutral-700 dark:text-neutral-400; +} +.toc ul > li { + @apply rtl:mr-0; } -.article-pagination a:hover .article-pagination-direction { - @apply text-primary-700 dark:text-primary-400; +/* Code Copy */ +.highlight-wrapper { + @apply block; +} +.highlight { + @apply relative z-0; +} +.highlight:hover > .copy-button { + @apply visible; +} +.copy-button { + @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer opacity-90 bg-neutral-200 whitespace-nowrap rounded-bl-md rounded-tr-md text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200; +} +.copy-button:hover, +.copy-button:focus, +.copy-button:active, +.copy-button:active:hover { + @apply bg-primary-100 dark:bg-primary-600; +} +.copy-textarea { + @apply absolute opacity-5 -z-10; } /* -- Chroma Highlight -- */ /* Background */ .prose .chroma { - @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200; -} -/* Other */ -.chroma .x { -} -/* Error */ -.chroma .err { + @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200; } /* LineTableTD */ .chroma .lntd, @@ -74,298 +103,178 @@ body button { @apply p-0 m-0; } /* LineNumbersTable */ -.chroma .lnt { - @apply text-neutral-600 dark:text-neutral-300; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; -} /* LineNumbers */ +.chroma .lnt, .chroma .ln { - @apply text-neutral-600 dark:text-neutral-300; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; + @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0; } /* Keyword */ -.chroma .k { +/* KeywordDeclaration */ +/* KeywordNamespace */ +/* KeywordPseudo */ +/* KeywordReserved */ +/* NameClass */ +/* NameFunctionMagic */ +/* NameNamespace */ +/* NameVariableClass */ +/* Operator */ +.chroma .k, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr, +.chroma .nc, +.chroma .fm, +.chroma .nn, +.chroma .vc, +.chroma .o { @apply text-primary-600 dark:text-primary-300; } /* KeywordConstant */ .chroma .kc { @apply font-semibold text-secondary-400 dark:text-secondary-500; } -/* KeywordDeclaration */ -.chroma .kd { - @apply text-primary-600 dark:text-primary-300; -} -/* KeywordNamespace */ -.chroma .kn { - @apply text-primary-600 dark:text-primary-300; -} -/* KeywordPseudo */ -.chroma .kp { - @apply text-primary-600 dark:text-primary-300; -} -/* KeywordReserved */ -.chroma .kr { - @apply text-primary-600 dark:text-primary-300; -} /* KeywordType */ -.chroma .kt { +/* NameVariable */ +/* NameVariableInstance */ +/* NameVariableMagic */ +/* LiteralNumber */ +/* LiteralNumberBin */ +/* LiteralNumberFloat */ +/* LiteralNumberHex */ +/* LiteralNumberInteger */ +/* LiteralNumberIntegerLong */ +/* LiteralNumberOct */ +.chroma .kt, +.chroma .nv, +.chroma .vi, +.chroma .vm, +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, +.chroma .mo { @apply text-secondary-400 dark:text-secondary-600; } /* Name */ -.chroma .n { +/* NameDecorator */ +/* NameEntity */ +/* NameLabel */ +.chroma .n, +.chroma .nd, +.chroma .ni, +.chroma .nl { @apply text-secondary-900 dark:text-secondary-200; } /* NameAttribute */ -.chroma .na { - @apply text-secondary-800 dark:text-secondary-300; -} /* NameBuiltin */ -.chroma .nb { - @apply text-secondary-800 dark:text-secondary-300; -} /* NameBuiltinPseudo */ -.chroma .bp { +/* NameOther */ +/* NameProperty */ +/* NameTag */ +.chroma .na, +.chroma .nb, +.chroma .bp, +.chroma .nx, +.chroma .py, +.chroma .nt { @apply text-secondary-800 dark:text-secondary-300; } -/* NameClass */ -.chroma .nc { - @apply text-primary-600 dark:text-primary-300; -} /* NameConstant */ -.chroma .no { - @apply font-semibold text-secondary-400 dark:text-secondary-500; -} -/* NameDecorator */ -.chroma .nd { - @apply text-secondary-900 dark:text-secondary-200; -} -/* NameEntity */ -.chroma .ni { - @apply text-secondary-900 dark:text-secondary-200; -} /* NameException */ -.chroma .ne { +/* NameVariableGlobal */ +.chroma .no, +.chroma .ne, +.chroma .vg { @apply font-semibold text-secondary-400 dark:text-secondary-500; } /* NameFunction */ .chroma .nf { @apply text-secondary-600 dark:text-secondary-500; } -/* NameFunctionMagic */ -.chroma .fm { - @apply text-primary-600 dark:text-primary-300; -} -/* NameLabel */ -.chroma .nl { - @apply text-secondary-900 dark:text-secondary-200; -} -/* NameNamespace */ -.chroma .nn { - @apply text-primary-600 dark:text-primary-300; -} -/* NameOther */ -.chroma .nx { - @apply text-secondary-800 dark:text-secondary-300; -} -/* NameProperty */ -.chroma .py { - color: #cebc3a; -} -/* NameTag */ -.chroma .nt { - @apply text-secondary-800 dark:text-secondary-300; -} -/* NameVariable */ -.chroma .nv { - @apply text-secondary-400 dark:text-secondary-600; -} -/* NameVariableClass */ -.chroma .vc { - @apply text-primary-600 dark:text-primary-300; -} -/* NameVariableGlobal */ -.chroma .vg { - @apply font-semibold text-secondary-400 dark:text-secondary-500; -} -/* NameVariableInstance */ -.chroma .vi { - @apply text-secondary-400 dark:text-secondary-600; -} -/* NameVariableMagic */ -.chroma .vm { - @apply text-secondary-400 dark:text-secondary-600; -} /* Literal */ -.chroma .l { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralDate */ -.chroma .ld { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralString */ -.chroma .s { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringAffix */ -.chroma .sa { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringBacktick */ -.chroma .sb { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringChar */ -.chroma .sc { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringDelimiter */ -.chroma .dl { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringDoc */ -.chroma .sd { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringDouble */ -.chroma .s2 { +/* LiteralStringHeredoc */ +/* LiteralStringInterpol */ +/* LiteralStringOther */ +/* LiteralStringSingle */ +/* GenericInserted */ +/* GenericOutput */ +/* GenericPrompt */ +.chroma .l, +.chroma .ld, +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .dl, +.chroma .sd, +.chroma .s2, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .s1, +.chroma .gi, +.chroma .go, +.chroma .gp { @apply text-primary-800 dark:text-primary-400; } /* LiteralStringEscape */ .chroma .se { @apply font-semibold text-secondary-400 dark:text-secondary-500; } -/* LiteralStringHeredoc */ -.chroma .sh { - @apply text-primary-800 dark:text-primary-400; -} -/* LiteralStringInterpol */ -.chroma .si { - @apply text-primary-800 dark:text-primary-400; -} -/* LiteralStringOther */ -.chroma .sx { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringRegex */ -.chroma .sr { - @apply font-semibold text-primary-800 dark:text-primary-400; -} -/* LiteralStringSingle */ -.chroma .s1 { - @apply text-primary-800 dark:text-primary-400; -} /* LiteralStringSymbol */ +.chroma .sr, .chroma .ss { @apply font-semibold text-primary-800 dark:text-primary-400; } -/* LiteralNumber */ -.chroma .m { - @apply text-secondary-400 dark:text-secondary-600; -} -/* LiteralNumberBin */ -.chroma .mb { - @apply text-secondary-400 dark:text-secondary-600; -} -/* LiteralNumberFloat */ -.chroma .mf { - @apply text-secondary-400 dark:text-secondary-600; -} -/* LiteralNumberHex */ -.chroma .mh { - @apply text-secondary-400 dark:text-secondary-600; -} -/* LiteralNumberInteger */ -.chroma .mi { - @apply text-secondary-400 dark:text-secondary-600; -} -/* LiteralNumberIntegerLong */ -.chroma .il { - @apply text-secondary-400 dark:text-secondary-600; -} -/* LiteralNumberOct */ -.chroma .mo { - @apply text-secondary-400 dark:text-secondary-600; -} -/* Operator */ -.chroma .o { - @apply text-primary-600; -} /* OperatorWord */ .chroma .ow { @apply font-semibold text-primary-400 dark:text-primary-600; } -/* Punctuation */ -.chroma .p { -} /* Comment */ -.chroma .c { +/* CommentMultiline */ +/* CommentSingle */ +/* CommentSpecial */ +/* CommentPreproc */ +/* CommentPreprocFile */ +.chroma .c, +.chroma .cm, +.chroma .c1, +.chroma .cs, +.chroma .cp, +.chroma .cpf { @apply italic text-neutral-500 dark:text-neutral-400; } /* CommentHashbang */ .chroma .ch { @apply italic font-semibold text-neutral-500 dark:text-neutral-400; } -/* CommentMultiline */ -.chroma .cm { - @apply italic text-neutral-500 dark:text-neutral-400; -} -/* CommentSingle */ -.chroma .c1 { - @apply italic text-neutral-500 dark:text-neutral-400; -} -/* CommentSpecial */ -.chroma .cs { - @apply italic text-neutral-500 dark:text-neutral-400; -} -/* CommentPreproc */ -.chroma .cp { - @apply italic text-neutral-500 dark:text-neutral-400; -} -/* CommentPreprocFile */ -.chroma .cpf { - @apply italic text-neutral-500 dark:text-neutral-400; -} -/* Generic */ -.chroma .g { -} -/* GenericDeleted */ -.chroma .gd { -} /* GenericEmph */ .chroma .ge { @apply italic; } -/* GenericError */ -.chroma .gr { -} /* GenericHeading */ .chroma .gh { @apply font-semibold text-neutral-500; } -/* GenericInserted */ -.chroma .gi { - @apply text-primary-800 dark:text-primary-400; -} -/* GenericOutput */ -.chroma .go { - @apply text-primary-800 dark:text-primary-400; -} -/* GenericPrompt */ -.chroma .gp { - @apply text-primary-800 dark:text-primary-400; -} /* GenericStrong */ .chroma .gs { @apply font-semibold; } /* GenericSubheading */ -.chroma .gu { - @apply text-neutral-500; -} /* GenericTraceback */ +.chroma .gu, .chroma .gt { @apply text-neutral-500; } @@ -373,8 +282,5 @@ body button { .chroma .gl { @apply underline; } -/* TextWhitespace */ -.chroma .w { -} @tailwind utilities; diff --git a/assets/css/schemes/avocado.css b/assets/css/schemes/avocado.css index 6ee07b79..911e895d 100644 --- a/assets/css/schemes/avocado.css +++ b/assets/css/schemes/avocado.css @@ -1,37 +1,37 @@ /* Avocado scheme */ :root { - --color-neutral: #fff; - /* Warm Gray */ - --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: 255, 255, 255; + /* Stone */ + --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 e91cddd2..ed69d5cb 100644 --- a/assets/css/schemes/fire.css +++ b/assets/css/schemes/fire.css @@ -1,37 +1,37 @@ /* Fire scheme */ :root { - --color-neutral: #fff; - /* Warm Gray */ - --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: 255, 255, 255; + /* Stone */ + --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 c93e2a9c..cc6d2d6d 100644 --- a/assets/css/schemes/ocean.css +++ b/assets/css/schemes/ocean.css @@ -1,37 +1,37 @@ /* Ocean scheme */ :root { - --color-neutral: #fff; - /* Cool 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: 255, 255, 255; + /* Gray */ + --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 000ba078..54831e86 100644 --- a/assets/css/schemes/slate.css +++ b/assets/css/schemes/slate.css @@ -1,37 +1,37 @@ /* Slate scheme */ :root { - --color-neutral: #fff; - /* Cool 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; - /* Cool 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; - /* Cool 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-neutral: 255, 255, 255; + /* Gray */ + --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; + /* Slate */ + --color-primary-50: 248, 250, 252; + --color-primary-100: 241, 245, 249; + --color-primary-200: 226, 232, 240; + --color-primary-300: 203, 213, 225; + --color-primary-400: 148, 163, 184; + --color-primary-500: 100, 116, 139; + --color-primary-600: 71, 85, 105; + --color-primary-700: 51, 65, 85; + --color-primary-800: 30, 41, 59; + --color-primary-900: 15, 23, 42; + /* Gray */ + --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/appearance.js b/assets/js/appearance.js new file mode 100644 index 00000000..fc4d6095 --- /dev/null +++ b/assets/js/appearance.js @@ -0,0 +1,36 @@ +const browserIsDark = + window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; +const userPreference = localStorage.getItem("appearance"); +const switcher = document.getElementById("appearance-switcher"); + +if ( + (browserIsDark && userPreference === null) || + (browserIsDark && userPreference === "dark") || + userPreference === "dark" +) { + document.documentElement.classList.add("dark"); +} + +if (document.documentElement.getAttribute("data-auto-appearance") === "true") { + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => { + if (event.matches) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + }); +} + +window.addEventListener("DOMContentLoaded", (event) => { + switcher.addEventListener("click", () => { + document.documentElement.classList.toggle("dark"); + localStorage.setItem( + "appearance", + document.documentElement.classList.contains("dark") ? "dark" : "light" + ); + }); + switcher.addEventListener("contextmenu", (event) => { + event.preventDefault(); + localStorage.removeItem("appearance"); + }); +}); diff --git a/assets/js/chart.js b/assets/js/chart.js new file mode 100644 index 00000000..ccf950d4 --- /dev/null +++ b/assets/js/chart.js @@ -0,0 +1,13 @@ +function css(name) { + return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")"; +} + +Chart.defaults.font.size = 14; +Chart.defaults.backgroundColor = css("--color-primary-300"); +Chart.defaults.elements.point.borderColor = css("--color-primary-400"); +Chart.defaults.elements.bar.borderColor = css("--color-primary-500"); +Chart.defaults.elements.bar.borderWidth = 1; +Chart.defaults.elements.line.borderColor = css("--color-primary-400"); +Chart.defaults.elements.arc.backgroundColor = css("--color-primary-200"); +Chart.defaults.elements.arc.borderColor = css("--color-primary-500"); +Chart.defaults.elements.arc.borderWidth = 1; diff --git a/assets/js/code.js b/assets/js/code.js new file mode 100644 index 00000000..a41fb8b1 --- /dev/null +++ b/assets/js/code.js @@ -0,0 +1,66 @@ +var scriptBundle = document.getElementById("script-bundle"); +var copyText = scriptBundle ? scriptBundle.getAttribute("data-copy") : "Copy"; +var copiedText = scriptBundle ? scriptBundle.getAttribute("data-copied") : "Copied"; + +function createCopyButton(highlightDiv) { + const button = document.createElement("button"); + button.className = "copy-button"; + button.type = "button"; + button.ariaLabel = copyText; + button.innerText = copyText; + button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv)); + addCopyButtonToDom(button, highlightDiv); +} + +async function copyCodeToClipboard(button, highlightDiv) { + const codeToCopy = highlightDiv.querySelector(":last-child > .chroma > code").innerText; + try { + result = await navigator.permissions.query({ name: "clipboard-write" }); + if (result.state == "granted" || result.state == "prompt") { + await navigator.clipboard.writeText(codeToCopy); + } else { + copyCodeBlockExecCommand(codeToCopy, highlightDiv); + } + } catch (_) { + copyCodeBlockExecCommand(codeToCopy, highlightDiv); + } finally { + codeWasCopied(button); + } +} + +function copyCodeBlockExecCommand(codeToCopy, highlightDiv) { + const textArea = document.createElement("textArea"); + textArea.contentEditable = "true"; + textArea.readOnly = "false"; + textArea.className = "copy-textarea"; + textArea.value = codeToCopy; + highlightDiv.insertBefore(textArea, highlightDiv.firstChild); + const range = document.createRange(); + range.selectNodeContents(textArea); + const sel = window.getSelection(); + sel.removeAllRanges(); + sel.addRange(range); + textArea.setSelectionRange(0, 999999); + document.execCommand("copy"); + highlightDiv.removeChild(textArea); +} + +function codeWasCopied(button) { + button.blur(); + button.innerText = copiedText; + setTimeout(function () { + button.innerText = copyText; + }, 2000); +} + +function addCopyButtonToDom(button, highlightDiv) { + highlightDiv.insertBefore(button, highlightDiv.firstChild); + const wrapper = document.createElement("div"); + wrapper.className = "highlight-wrapper"; + highlightDiv.parentNode.insertBefore(wrapper, highlightDiv); + wrapper.appendChild(highlightDiv); +} + +window.addEventListener("DOMContentLoaded", (event) => { + document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv)); +}); diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js new file mode 100644 index 00000000..94795fe4 --- /dev/null +++ b/assets/js/mermaid.js @@ -0,0 +1,20 @@ +function css(name) { + return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")"; +} + +mermaid.initialize({ + theme: "base", + themeVariables: { + background: css("--color-neutral"), + primaryColor: css("--color-primary-200"), + secondaryColor: css("--color-secondary-200"), + tertiaryColor: css("--color-neutral-100"), + primaryBorderColor: css("--color-primary-400"), + secondaryBorderColor: css("--color-secondary-400"), + tertiaryBorderColor: css("--color-neutral-400"), + lineColor: css("--color-neutral-600"), + fontFamily: + "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", + fontSize: "16px", + }, +}); diff --git a/assets/js/search.js b/assets/js/search.js new file mode 100644 index 00000000..89a0b442 --- /dev/null +++ b/assets/js/search.js @@ -0,0 +1,157 @@ +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 = wrapper.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 18bc5bb0..812d611b 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -3,57 +3,11 @@ # https://jpanther.github.io/congo/docs/getting-started/ # baseURL = "https://your_domain.com/" -languageCode = "en" defaultContentLanguage = "en" -title = "Congo" -# copyright = "Copy, _right?_ :thinking_face:" - enableRobotsTXT = true - +paginate = 10 summaryLength = 0 -[author] - # name = "Your name here" - # image = "img/author.jpg" - # bio = "A little bit about you" - # links = [ - # { email = "mailto:hello@your_domain.com" }, - # { link = "https://link-to-some-website.com/" }, - # { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" }, - # { apple = "https://www.apple.com" }, - # { blogger = "https://username.blogspot.com/" }, - # { codepen = "https://codepen.io/username" }, - # { dev = "https://dev.to/username" }, - # { discord = "https://discord.gg/invitecode" }, - # { dribbble = "https://dribbble.com/username" }, - # { facebook = "https://facebook.com/username" }, - # { flickr = "https://www.flickr.com/photos/username/" }, - # { foursquare = "https://foursquare.com/username" }, - # { github = "https://github.com/username" }, - # { gitlab = "https://gitlab.com/username" }, - # { google = "https://www.google.com/" }, - # { instagram = "https://instagram.com/username" }, - # { keybase = "https://keybase.io/username" }, - # { kickstarter = "https://www.kickstarter.com/profile/username" }, - # { lastfm = "https://lastfm.com/user/username" }, - # { linkedin = "https://linkedin.com/in/username" }, - # { mastodon = "https://mastodon.instance/@username" }, - # { medium = "https://medium.com/username" }, - # { microsoft = "https://www.microsoft.com/" }, - # { patreon = "https://www.patreon.com/username" }, - # { pinterest = "https://pinterest.com/username" }, - # { reddit = "https://reddit.com/user/username" }, - # { slack = "https://workspace.url/team/userid" }, - # { snapchat = "https://snapchat.com/add/username" }, - # { soundcloud = "https://soundcloud.com/username" }, - # { stackoverflow = "https://stackoverflow.com/users/6digit/username" }, - # { steam = "https://steamcommunity.com/profiles/userid" }, - # { telegram = "https://t.me/username" }, - # { tiktok = "https://tiktok.com/@username" }, - # { tumblr = "https://username.tumblr.com" }, - # { twitch = "https://twitch.tv/username" }, - # { twitter = "https://twitter.com/username" }, - # { whatsapp = "https://wa.me/phone-number" }, - # { youtube = "https://youtube.com/username" }, - # ] +[outputs] + home = ["HTML", "RSS", "JSON"] diff --git a/config/_default/languages.en.toml b/config/_default/languages.en.toml new file mode 100644 index 00000000..fc66548a --- /dev/null +++ b/config/_default/languages.en.toml @@ -0,0 +1,58 @@ +languageCode = "en" +languageName = "English" +displayName = "EN" +isoCode = "en" +weight = 1 +rtl = false + +title = "Congo" +# logo = "img/logo.jpg" +# description = "My awesome website" +# copyright = "Copy, _right?_ :thinking_face:" + +dateFormat = "2 January 2006" + +[author] + # name = "Your name here" + # image = "img/author.jpg" + # headline = "I'm only human" + # bio = "A little bit about you" + # links = [ + # { email = "mailto:hello@your_domain.com" }, + # { link = "https://link-to-some-website.com/" }, + # { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" }, + # { apple = "https://www.apple.com" }, + # { blogger = "https://username.blogspot.com/" }, + # { codepen = "https://codepen.io/username" }, + # { dev = "https://dev.to/username" }, + # { discord = "https://discord.gg/invitecode" }, + # { dribbble = "https://dribbble.com/username" }, + # { facebook = "https://facebook.com/username" }, + # { flickr = "https://www.flickr.com/photos/username/" }, + # { foursquare = "https://foursquare.com/username" }, + # { github = "https://github.com/username" }, + # { gitlab = "https://gitlab.com/username" }, + # { google = "https://www.google.com/" }, + # { instagram = "https://instagram.com/username" }, + # { keybase = "https://keybase.io/username" }, + # { kickstarter = "https://www.kickstarter.com/profile/username" }, + # { lastfm = "https://lastfm.com/user/username" }, + # { linkedin = "https://linkedin.com/in/username" }, + # { mastodon = "https://mastodon.instance/@username" }, + # { medium = "https://medium.com/username" }, + # { microsoft = "https://www.microsoft.com/" }, + # { patreon = "https://www.patreon.com/username" }, + # { pinterest = "https://pinterest.com/username" }, + # { reddit = "https://reddit.com/user/username" }, + # { slack = "https://workspace.url/team/userid" }, + # { snapchat = "https://snapchat.com/add/username" }, + # { soundcloud = "https://soundcloud.com/username" }, + # { steam = "https://steamcommunity.com/profiles/userid" }, + # { telegram = "https://t.me/username" }, + # { tiktok = "https://tiktok.com/@username" }, + # { tumblr = "https://username.tumblr.com" }, + # { twitch = "https://twitch.tv/username" }, + # { twitter = "https://twitter.com/username" }, + # { whatsapp = "https://wa.me/phone-number" }, + # { youtube = "https://youtube.com/username" }, + # ] diff --git a/config/_default/markup.toml b/config/_default/markup.toml index 2ca49b3b..c5449fc3 100644 --- a/config/_default/markup.toml +++ b/config/_default/markup.toml @@ -7,3 +7,7 @@ [highlight] noClasses = false + +[tableOfContents] + startLevel = 2 + endLevel = 4 diff --git a/config/_default/menus.toml b/config/_default/menus.en.toml similarity index 100% rename from config/_default/menus.toml rename to config/_default/menus.en.toml diff --git a/config/_default/module.toml b/config/_default/module.toml index 6a8e43fa..74f77272 100644 --- a/config/_default/module.toml +++ b/config/_default/module.toml @@ -1,3 +1,3 @@ [hugoVersion] extended = false - min = "0.86.1" + min = "0.87.0" diff --git a/config/_default/params.toml b/config/_default/params.toml index 6d015244..d1a1f312 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -6,12 +6,16 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" -# darkMode = "auto" -# darkToggle = false -# logo = "img/logo.jpg" -# description = "My awesome website" +defaultAppearance = "light" # valid options: light or dark +autoSwitchAppearance = true +showAppearanceSwitcher = false + +enableSearch = false +enableCodeCopy = false + # mainSections = ["section1", "section2"] # robots = "" +showScrollToTop = true [homepage] layout = "page" # valid options: page, profile, custom @@ -19,7 +23,7 @@ colorScheme = "congo" [article] showDate = true - dateFormat = "2 January 2006" + showDateUpdated = false showAuthor = true showBreadcrumbs = false showDraftLabel = true @@ -28,21 +32,25 @@ colorScheme = "congo" editAppendPath = true showHeadingAnchors = true showPagination = true + invertPagination = false showReadingTime = true + showTableOfContents = false + showTaxonomies = false showWordCount = false # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"] [list] showBreadcrumbs = false showSummary = false + showTableOfContents = false groupByYear = true -[taxonomy] - showTermCount = true - [sitemap] excludedKinds = ["taxonomy", "term"] +[taxonomy] + showTermCount = true + [fathomAnalytics] # site = "ABC12345" # domain = "llama.yoursite.com" diff --git a/exampleSite/assets/img/author.jpg b/exampleSite/assets/img/author.jpg new file mode 100644 index 00000000..bd53fd27 Binary files /dev/null and b/exampleSite/assets/img/author.jpg differ diff --git a/exampleSite/assets/logo.jpg b/exampleSite/assets/img/logo.jpg similarity index 100% rename from exampleSite/assets/logo.jpg rename to exampleSite/assets/img/logo.jpg diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js new file mode 100644 index 00000000..37210349 --- /dev/null +++ b/exampleSite/assets/js/home.js @@ -0,0 +1,27 @@ +function switchHomeLayout() { + const pageDiv = document.getElementById("page"); + const profileDiv = document.getElementById("profile"); + const layoutCode = document.querySelectorAll("code[id=layout]"); + if (pageDiv.style.display === "none") { + pageDiv.style.display = "block"; + profileDiv.style.display = "none"; + layoutCode.forEach(function (el) { + el.innerText = "page"; + }); + } else { + pageDiv.style.display = "none"; + profileDiv.style.display = "block"; + layoutCode.forEach(function (el) { + el.innerText = "profile"; + }); + } +} + +window.addEventListener("DOMContentLoaded", (event) => { + document.querySelectorAll("#switch-layout-button").forEach((button) => + button.addEventListener("click", function (e) { + e.preventDefault(); + switchHomeLayout(); + }) + ); +}); diff --git a/exampleSite/config.toml b/exampleSite/config.toml deleted file mode 100755 index dc301580..00000000 --- a/exampleSite/config.toml +++ /dev/null @@ -1,70 +0,0 @@ -# Site configuration for the Congo demo site -# -------------------------------------------------------------------------- -# IMPORTANT: You should not use this file as a template for configuration -# as it does not contain all the required theme settings! -# -# Refer to the theme docs for configuration instructions if you're unsure. -# https://jpanther.github.io/congo/docs/ -# -------------------------------------------------------------------------- - -theme = "congo" -languageCode = "en-AU" -defaultContentLanguage = "en" -title = "Congo" -summaryLength = 0 - -[author] - name = "Congo" - image = "img/author.jpg" - bio = "This is an example author bio, and although there's a stock photo of a dog here, this article was actually created by a human. :dog:" - links = [ - { twitter = "https://twitter.com/" }, - { facebook = "https://facebook.com/" }, - { linkedin = "https://linkedin.com/" }, - { youtube = "https://youtube.com/" }, - ] - -[taxonomies] - tag = "tags" - -[params] - # logo = "logo.jpg" - -[params.homepage] - layout = "custom" - showRecent = true - mainSections = ["samples"] - -[params.list] - groupByYear = false - showBreadcrumbs = true - -[params.article] - showBreadcrumbs = true - showEdit = true - editURL = "https://github.com/jpanther/congo/tree/dev/exampleSite/content/" - editAppendPath = true - -[[menu.main]] - name = "Docs" - pageRef = "docs" - weight = 10 -[[menu.main]] - name = "Samples" - pageRef = "samples" - weight = 20 -[[menu.main]] - name = "Users" - pageRef = "users" - weight = 30 -[[menu.main]] - name = "GitHub" - url = "https://github.com/jpanther/congo" - weight = 40 - -[markup.goldmark] -[markup.goldmark.renderer] - unsafe = true - -[markup.highlight] - noClasses = false diff --git a/exampleSite/config/_default/config.toml b/exampleSite/config/_default/config.toml new file mode 100644 index 00000000..6c8e9a84 --- /dev/null +++ b/exampleSite/config/_default/config.toml @@ -0,0 +1,13 @@ +# -- Site Configuration -- +# Refer to the theme docs for more details about each of these parameters. +# https://jpanther.github.io/congo/docs/getting-started/ + +theme = "congo" +defaultContentLanguage = "en" + +enableRobotsTXT = true +paginate = 15 +summaryLength = 0 + +[outputs] + home = ["HTML", "RSS", "JSON"] diff --git a/exampleSite/config/_default/languages.en.toml b/exampleSite/config/_default/languages.en.toml new file mode 100644 index 00000000..ac2ea022 --- /dev/null +++ b/exampleSite/config/_default/languages.en.toml @@ -0,0 +1,25 @@ +languageCode = "en-au" +languageName = "English (Australia)" +displayName = ":flag-au:" +isoCode = "en-AU" +weight = 1 +rtl = false + +title = "Congo" +# logo = "img/logo.jpg" +description = "A powerful, lightweight theme for Hugo built with Tailwind CSS." +copyright = "© 2022 Congo contributors" + +dateFormat = "2 January 2006" + +[author] + name = "Congo" + image = "img/author.jpg" + headline = "Not your ordinary theme!" + bio = "This is an example author bio, and although there's a stock photo of a dog here, this article was actually created by a human. :dog:" + links = [ + { twitter = "https://twitter.com/" }, + { facebook = "https://facebook.com/" }, + { linkedin = "https://linkedin.com/" }, + { youtube = "https://youtube.com/" }, + ] diff --git a/exampleSite/config/_default/markup.toml b/exampleSite/config/_default/markup.toml new file mode 100644 index 00000000..c5449fc3 --- /dev/null +++ b/exampleSite/config/_default/markup.toml @@ -0,0 +1,13 @@ +# -- Markup -- +# These settings are required for the theme to function. + +[goldmark] +[goldmark.renderer] + unsafe = true + +[highlight] + noClasses = false + +[tableOfContents] + startLevel = 2 + endLevel = 4 diff --git a/exampleSite/config/_default/menus.en.toml b/exampleSite/config/_default/menus.en.toml new file mode 100644 index 00000000..e51dda49 --- /dev/null +++ b/exampleSite/config/_default/menus.en.toml @@ -0,0 +1,41 @@ +# -- Main Menu -- +# The main menu is displayed in the header at the top of the page. +# Acceptable parameters are name, pageRef, page, url, title, weight. +# +# The simplest menu configuration is to provide: +# name = The name to be displayed for this menu link +# pageRef = The identifier of the page or section to link to +# +# By default the menu is ordered alphabetically. This can be +# overridden by providing a weight value. The menu will then be +# ordered by weight from lowest to highest. + +[[main]] + name = "Docs" + pageRef = "docs" + weight = 10 + +[[main]] + name = "Samples" + pageRef = "samples" + weight = 20 + +[[main]] + name = "Users" + pageRef = "users" + weight = 30 + +[[main]] + name = "GitHub" + url = "https://github.com/jpanther/congo" + weight = 40 + + +# -- Footer Menu -- +# The footer menu is displayed at the bottom of the page, just before +# the copyright notice. Configure as per the main menu above. + +# [[footer]] +# name = "Tags" +# pageRef = "tags" +# weight = 10 diff --git a/exampleSite/config/_default/module.toml b/exampleSite/config/_default/module.toml new file mode 100644 index 00000000..6a8e43fa --- /dev/null +++ b/exampleSite/config/_default/module.toml @@ -0,0 +1,3 @@ +[hugoVersion] + extended = false + min = "0.86.1" diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml new file mode 100644 index 00000000..bc880d35 --- /dev/null +++ b/exampleSite/config/_default/params.toml @@ -0,0 +1,62 @@ +# -- Theme Options -- +# These options control how the theme functions and allow you to +# customise the display of your website. +# +# Refer to the theme docs for more details about each of these parameters. +# https://jpanther.github.io/congo/docs/configuration/#theme-parameters + +colorScheme = "congo" +defaultAppearance = "light" # valid options: light or dark +autoSwitchAppearance = true +showAppearanceSwitcher = true + +enableSearch = true +enableCodeCopy = true + +mainSections = ["samples"] +# robots = "" +showScrollToTop = true + +[homepage] + layout = "custom" # valid options: page, profile, custom + showRecent = true + +[article] + showDate = true + showDateUpdated = false + showAuthor = true + showBreadcrumbs = true + showDraftLabel = true + showEdit = true + editURL = "https://github.com/jpanther/congo/tree/dev/exampleSite/content/" + editAppendPath = true + showHeadingAnchors = true + showPagination = true + invertPagination = false + showReadingTime = true + showTableOfContents = true + showTaxonomies = false + showWordCount = false + # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"] + +[list] + showBreadcrumbs = true + showSummary = false + showTableOfContents = true + groupByYear = false + +[sitemap] + excludedKinds = ["taxonomy", "term"] + +[taxonomy] + showTermCount = true + +[fathomAnalytics] + # site = "ABC12345" + # domain = "llama.yoursite.com" + +[verification] + # google = "" + # bing = "" + # pinterest = "" + # yandex = "" diff --git a/exampleSite/config/_default/taxonomies.toml b/exampleSite/config/_default/taxonomies.toml new file mode 100644 index 00000000..193dc4bb --- /dev/null +++ b/exampleSite/config/_default/taxonomies.toml @@ -0,0 +1 @@ +tag = "tags" diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 28a869cd..24b50cd2 100755 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -4,26 +4,26 @@ description: "This is a demo of the Congo theme for Hugo." --- {{< lead >}} -A simple, lightweight theme for Hugo built with Tailwind CSS. +A powerful, lightweight theme for Hugo built with Tailwind CSS. {{< /lead >}} +This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts. +
    - + {{< icon "exclamation-triangle" >}} - - This is a demo of the page layout. + + This is a demo of the page layout.
    -This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts. - Explore the [sample pages]({{< ref "samples" >}}) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/congo) or read the [Installation guide]({{< ref "docs/installation" >}}) to get started. -{{< figure src="mountains.jpg" width="1200" height="800" caption="Photo by [Anna Scarfiello](https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)." >}} +![A stylised photograph of a purple squid on a pink backdrop.](squid.jpg "Photo by [Jippe Joosten](https://unsplash.com/@jippe_joosten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/vibrant-purple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).") diff --git a/exampleSite/content/docs/_index.md b/exampleSite/content/docs/_index.md index 7c1a3218..a6a2c4b1 100755 --- a/exampleSite/content/docs/_index.md +++ b/exampleSite/content/docs/_index.md @@ -5,13 +5,14 @@ description: "Learn how to use Congo and its features." cascade: showDate: false showAuthor: false + invertPagination: true --- {{< lead >}} Simple, yet powerful. Learn how to use Congo and its features. {{< /lead >}} -{{< figure src="screenshot.png" >}} +![Screenshots of Congo on an iPhone, iPad and MacBook](screenshot.png) This section contains everything you need to know about Congo. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Congo can do. diff --git a/exampleSite/content/docs/advanced-customisation.md b/exampleSite/content/docs/advanced-customisation.md index 76891e5f..b8d52423 100644 --- a/exampleSite/content/docs/advanced-customisation.md +++ b/exampleSite/content/docs/advanced-customisation.md @@ -1,6 +1,6 @@ --- title: "Advanced Customisation" -date: 2020-08-09 +date: 2020-08-08 draft: false description: "Learn how to build Congo manually." slug: "advanced-customisation" @@ -37,6 +37,16 @@ In addition to the default schemes, you can also create your own and re-style th Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour. +Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values. + +```css +:root { + --color-primary-500: 139, 92, 246; +} +``` + +This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`. + Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). ## Overriding the stylesheet @@ -60,36 +70,112 @@ html { Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`. -## Building from source +## Building the theme CSS from source -If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. +If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet. {{< alert >}} **Note:** Building the theme manually is intended for advanced users. {{< /alert >}} -Change into the `themes/congo/` folder and install the project dependencies. +Let's step through how building the Tailwind CSS works. -```bash +### Tailwind configuration + +In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the `tailwind.config.js` file which is included in the root of the theme directory: + +```js +// themes/congo/tailwind.config.js + +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.{html,md}", + "./themes/congo/layouts/**/*.html", + "./themes/congo/content/**/*.{html,md}", + ], + + // and more... +}; +``` + +This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, **you have to include Congo in your project as a subdirectory at `themes/congo/`**. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The [Installation docs]({{< ref "installation" >}}) explain how to install the theme using either of these methods. + +### Project structure + +In order to take advantage of the default configuration, your project should look something like this... + +```shell +. +├── assets +│ └── css +│ └── compiled +│ └── main.css # this is the file we will generate +├── config # site config +│ └── _default +├── content # site content +│ ├── _index.md +│ ├── projects +│ │ └── _index.md +│ └── blog +│ └── _index.md +├── layouts # custom layouts for your site +│ ├── partials +│ │ └── extend-article-link.html +│ ├── projects +│ │ └── list.html +│ └── shortcodes +│ └── disclaimer.html +└── themes + └── congo # git submodule or manual theme install +``` + +This example structure adds a new `projects` content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that's required is to recompile the `main.css` file. + +### Install dependencies + +In order for this to work you'll need to change into the `themes/congo/` directory and install the project dependencies. You'll need [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) on your local machine for this step. + +```shell +cd themes/congo npm install ``` -Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`. +### Run the Tailwind compiler -To allow for easy theme colour changes, Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly. +With the dependencies installed all that's left is to use [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command: -For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). - -After editing the configuration, you need to rebuild the theme's stylesheets. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes. - -```bash -npm run dev +```shell +cd ../.. +./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit ``` -This will automatically output a CSS file to `/themes/congo/assets/css/compiled/main.css`. +It's a bit of an ugly command due to the paths involved but essentially you're calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme's `main.css` file and then where you want the compiled CSS file to be placed (it's going into the `assets/css/compiled/` folder of your Hugo project). -{{< alert >}} -**Note:** You should not make manual edits to the compiled CSS file. -{{< /alert >}} +The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme. -Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Asset files will be minified by Hugo at site build time. +Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add `-w` to the end of the command to run the JIT compiler in watch mode. + +### Make a build script + +To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a `package.json` to the root of your project which contains the necessary scripts... + +```js +// package.json + +{ + "name": "my-website", + "version": "1.0.0", + "description": "", + "scripts": { + "server": "hugo server -b http://localhost -p 8000", + "dev": "NODE_ENV=development ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w", + "build": "NODE_ENV=production ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit" + }, + // and more... +} +``` + +Now when you want to work on designing your site, you can invoke `npm run dev` and the compiler will run in watch mode. When you're ready to deploy, run `npm run build` and you'll get a clean Tailwind CSS build. + +🙋‍♀️ If you need help, feel free to ask a question on [GitHub Discussions](https://github.com/jpanther/congo/discussions). diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index dea6ef3f..2b932d5d 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -25,25 +25,68 @@ Standard Hugo configuration variables are respected throughout the theme, howeve The site configuration is managed through the `config/_default/config.toml` file. The table below outlines all the settings that the Congo takes advantage of. -Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `author.name` refers to `[author] name`). +Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `outputs.home` refers to `[outputs] home`). -|Name|Type|Default|Description| -| --- | --- | --- | --- | -|`theme`|string|`"congo"`|When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `congo` for the theme to function.| -|`baseURL`|string|_Not set_|The URL to the root of the website.| -|`languageCode`|string|`"en"`|The language of the website for site metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`)."| -|`defaultContentLanguage`|string|`"en"`|This value determines the language of theme components."| -|`title`|string|`"Congo"`|The title of the website. This will be displayed in the site header and footer.| -|`copyright`|string|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`. -|`enableRobotsTXT`|boolean|`true`|When enabled a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. Set to `false` if you wish to provide your own file.| -|`summaryLength`|integer|`0`|The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.| -|`author.name`|string|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.| -|`author.image`|string|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `static/` folder.| -|`author.bio`|string|_Not set_|A Markdown string containing the author's bio. It will be displayed in article footers.| -|`author.links`|array of objects|_Not set_|The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`.| -|`permalinks`||_Not set_|Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.| -|`taxonomies`||_Not set_|Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.| +|Name|Default|Description| +|---|---|---| +|`theme`|`"congo"`|When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `congo` for the theme to function.| +|`baseURL`|_Not set_|The URL to the root of the website.| +|`defaultContentLanguage`|`"en"`|This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes.| +|`enableRobotsTXT`|`true`|When enabled a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. Set to `false` if you wish to provide your own file.| +|`paginate`|`10`|The number of articles listed on each page of the article listing.| +|`summaryLength`|`0`|The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden.| +|`outputs.home`|`["HTML", "RSS", "JSON"]`|The output formats that are generated for the site. Congo requires HTML, RSS and JSON for all theme components to work correctly.| +|`permalinks`|_Not set_|Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration.| +|`taxonomies`|_Not set_|Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.| + + +## Language and i18n + +Congo is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language. + +The theme currently supports the following languages by default: + +| Language | Code | +| ---------------------------- | ------- | +| :gb: English | `en` | +| :cn: Chinese | `zh` | +| :fr: French | `fr` | +| :de: German | `de` | +| :brazil: Portuguese (Brazil) | `pt-br` | +| :es: Spanish (Spain) | `es` | +| :tr: Turkish | `tr` | + +The default translations can be overridden by creating a custom file in `i18n/[code].yaml` that contains the translation strings. You can also use this method to add new languages. If you'd like to share a new translation with the community, please [open a pull request](https://github.com/jpanther/congo/pulls). + +### Configuration + +In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Congo includes an English language configuration at `config/_default/languages.en.toml`. + +The default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format `languages.[language-code].toml`. + +{{< alert >}} +**Note:** Ensure the `defaultContentLanguage` parameter in the [site configuration](#site-configuration) matches the language code in your language config filename. +{{< /alert >}} + + +|Name|Default|Description| +|---|---|---| +|`languageCode`|`"en"`|The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive.| +|`languageName`|`"English"`|The name of the language.| +|`displayName`|`"EN"`|The name used when the language appears on the website.| +|`isoCode`|`"en"`|The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).| +|`weight`|`1`|The weight determines the order of languages when building multilingual sites.| +|`rtl`|`false`|Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.| +|`dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.| +|`title`|`"Congo"`|The title of the website. This will be displayed in the site header and footer.| +|`description`|_Not set_|The website description. This will be used in the site metadata.| +|`copyright`|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.| +|`author.name`|_Not set_|The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used.| +|`author.image`|_Not set_|Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site's `assets/` folder.| +|`author.headline`|_Not set_|A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name.| +|`author.bio`|_Not set_|A Markdown string containing the author's bio. It will be displayed in article footers.| +|`author.links`|_Not set_|The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`.| ## Theme parameters @@ -53,40 +96,46 @@ Congo provides a large number of configuration parameters that control how the t Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details. -|Name|Type|Default|Description| -| --- | --- | --- | --- | -|`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| -|`darkMode`|boolean or string|`"auto"`|The preferred theme appearance for dark mode. Set to `true` to force dark appearance or `false` to force light appearance. Using `"auto"` will defer to the user's operating system preference.| -|`darkToggle`|boolean|`false`|When `darkMode` is set to `"auto"`, this parameter determines whether or not to show the appearance toggle in the site footer. The browser's local storage is used to persist the user's preference.| -|`logo`|string|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| -|`description`|string|_Not set_|The description of the website for metadata purposes.| -|`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| -|`robots`|string|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| -|`homepage.layout`|string|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.| -|`homepage.showRecent`|boolean|`false`|Whether or not to display the recent articles list on the homepage.| -|`article.showDate`|boolean|`true`|Whether or not article dates are displayed.| -|`article.showDateUpdated`|boolean|`false`|Whether or not the dates articles were updated are displayed.| -|`article.dateFormat`|string|`"2 January 2006"`|How article dates are formatted. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.| -|`article.showAuthor`|boolean|`true`|Whether or not the author box is displayed in the article footer.| -|`article.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the article header.| -|`article.showDraftLabel`|boolean|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.| -|`article.showEdit`|boolean|`false`|Whether or not the link to edit the article content should be displayed.| -|`article.editURL`|string|_Not set_|When `article.showEdit` is active, the URL for the edit link.| -|`article.editAppendPath`|boolean|`true`|When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.| -|`article.showHeadingAnchors`|boolean|`true`|Whether or not heading anchor links are displayed alongside headings within articles.| -|`article.showPagination`|boolean|`true`|Whether or not the next/previous article links are displayed in the article footer.| -|`article.showReadingTime`|boolean|`true`|Whether or not article reading times are displayed.| -|`article.showWordCount`|boolean|`false`|Whether or not article word counts are displayed.| -|`article.sharingLinks`|array of strings|_Not set_|Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.| -|`list.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the header on list pages.| -|`list.showSummary`|boolean|`false`|Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).| -|`list.groupByYear`|boolean|`true`|Whether or not articles are grouped by year on list pages.| -|`sitemap.excludedKinds`|array of strings|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.| -|`taxonomy.showTermCount`|boolean|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.| -|`fathomAnalytics.site`|string|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.| -|`fathomAnalytics.domain`|string|_Not set_|If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.| -|`verification.google`|string|_Not set_|The site verification string provided by Google to be included in the site metadata.| -|`verification.bing`|string|_Not set_|The site verification string provided by Bing to be included in the site metadata.| -|`verification.pinterest`|string|_Not set_|The site verification string provided by Pinterest to be included in the site metadata.| -|`verification.yandex`|string|_Not set_|The site verification string provided by Yandex to be included in the site metadata.| +|Name|Default|Description| +|---|---|---| +|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| +|`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.| +|`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.| +|`showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.| +|`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.| +|`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `` blocks.| +|`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| +|`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| +|`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| +|`showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.| +|`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.| +|`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.| +|`article.showDate`|`true`|Whether or not article dates are displayed.| +|`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.| +|`article.showAuthor`|`true`|Whether or not the author box is displayed in the article footer.| +|`article.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the article header.| +|`article.showDraftLabel`|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.| +|`article.showEdit`|`false`|Whether or not the link to edit the article content should be displayed.| +|`article.editURL`|_Not set_|When `article.showEdit` is active, the URL for the edit link.| +|`article.editAppendPath`|`true`|When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`.| +|`article.showHeadingAnchors`|`true`|Whether or not heading anchor links are displayed alongside headings within articles.| +|`article.showPagination`|`true`|Whether or not the next/previous article links are displayed in the article footer.| +|`article.invertPagination`|`false`|Whether or not to flip the direction of the next/previous article links.| +|`article.showReadingTime`|`true`|Whether or not article reading times are displayed.| +|`article.showTableOfContents`|`false`|Whether or not the table of contents is displayed on articles.| +|`article.showTaxonomies`|`false`|Whether or not the taxonomies related to this article are displayed.| +|`article.showWordCount`|`false`|Whether or not article word counts are displayed.| +|`article.sharingLinks`|_Not set_|Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.| +|`list.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the header on list pages.| +|`list.showTableOfContents`|`false`|Whether or not the table of contents is displayed on list pages.| +|`list.showSummary`|`false`|Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).| +|`list.groupByYear`|`true`|Whether or not articles are grouped by year on list pages.| +|`sitemap.excludedKinds`|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.| +|`taxonomy.showTermCount`|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.| +|`fathomAnalytics.site`|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.| +|`fathomAnalytics.domain`|_Not set_|If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.| +|`verification.google`|_Not set_|The site verification string provided by Google to be included in the site metadata.| +|`verification.bing`|_Not set_|The site verification string provided by Bing to be included in the site metadata.| +|`verification.pinterest`|_Not set_|The site verification string provided by Pinterest to be included in the site metadata.| +|`verification.yandex`|_Not set_|The site verification string provided by Yandex to be included in the site metadata.| diff --git a/exampleSite/content/docs/content-examples.md b/exampleSite/content/docs/content-examples.md new file mode 100644 index 00000000..a81836ea --- /dev/null +++ b/exampleSite/content/docs/content-examples.md @@ -0,0 +1,294 @@ +--- +title: "Content Examples" +date: 2020-08-09 +draft: false +description: "All the partials available in Congo." +slug: "content-examples" +tags: ["content", "example"] +--- + +If you've been reading the documentation in order, you should now know about all the features and configurations available in Congo. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project. + +{{< alert >}} +**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources. +{{< /alert >}} + +The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project. + +## Branch pages + +Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**. + +Congo will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title. + +### Homepage + +| | | +| ------------ | -------------------- | +| **Layout:** | `layouts/index.html` | +| **Content:** | `content/_index.md` | + +The homepage in Congo is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section. + +If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage. + +**Example:** + +```yaml +--- +title: "Welcome to Congo!" +description: "This is a demo of adding content to the homepage." +--- +Welcome to my website! I'm really happy you stopped by. +``` + +_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._ + +### List pages + +| | | +| ------------ | ---------------------------- | +| **Layout:** | `layouts/_default/list.html` | +| **Content:** | `content/../_index.md` | + +List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects. + +Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects. + +A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory. + +```shell +. +└── content + └── projects + ├── _index.md # /projects + ├── first-project.md # /projects/first-project + └── another-project + ├── index.md # /projects/another-project + └── project.jpg +``` + +Hugo will generate URLs for the pages in your projects folder accordingly. + +Just like the homepage, content in the `_index.md` file will be output into the generated list index. Congo will then list any pages in this section below the content. + +**Example:** + +```yaml +--- +title: "Projects" +description: "Learn about some of my projects." +cascade: + showReadingTime: false +--- +This section contains all my current projects. +``` + +_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._ + +The [samples section]({{< ref "samples" >}}) of this site is an example of a list page. + +### Taxonomy pages + +| | | +| ---------------- | -------------------------------- | +| **List layout:** | `layouts/_default/taxonomy.html` | +| **Term layout:** | `layouts/_default/term.html` | +| **Content:** | `content/../_index.md` | + +Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term. + +The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`. + +Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name. + +```toml +# config/_default/taxonomies.toml + +animal = "animals" +``` + +Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy. + +Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter: + +```yaml +--- +title: "Into the Lion's Den" +description: "This week we're learning about lions." +animals: ["lion", "cat"] +--- +``` + +This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`. + +Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`. + +The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages. + +The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way. + +In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name. + +```shell +. +└── content + └── animals + ├── _index.md # /animals + └── lion + └── _index.md # /animals/lion +``` + +Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion". + +To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site. + +## Leaf pages + +| | | +| ------------------------- | ------------------------------- | +| **Layout:** | `layouts/_default/single.html` | +| **Content (standalone):** | `content/../page-name.md` | +| **Content (bundled):** | `content/../page-name/index.md` | + +Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website. + +The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name. + +```shell +. +└── content + └── blog + ├── first-post.md # /blog/first-post + ├── second-post.md # /blog/second-post + └── third-post + ├── index.md # /blog/third-post + └── image.jpg +``` + +When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages. + +**Example:** + +```yaml +--- +title: "My First Blog Post" +date: 2022-01-25 +description: "Welcome to my blog!" +summary: "Learn more about me and why I am starting this blog." +tags: ["welcome", "new", "about", "first"] +--- +_This_ is the content of my blog post. +``` + +Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed. + +### External links + +Congo has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site. + +In order to create an external link article, some special front matter needs to be set: + +```yaml +--- +title: "My Medium post" +date: 2022-01-25 +externalUrl: "https://medium.com/" +summary: "I wrote a post on Medium." +showReadingTime: false +_build: + render: "false" + list: "local" +--- +``` + +Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Congo that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article. + +Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL! + +The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content. + +```shell +hugo new -k external posts/my-post.md +``` + +## Custom layouts + +One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages. + +Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/). + +### Overriding default layouts + +Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website. + +For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised. + +### Custom section layouts + +It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style. + +Let's step through an example that creates a custom "Projects" page that lists projects using a special layout. + +In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file. + +```shell +. +└── content +│ └── projects +│ ├── _index.md +│ ├── first-project.md +│ └── second-project.md +└── layouts + └── projects + └── list.html +``` + +This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files. + +```yaml +--- +title: "Congo" +date: 2021-08-11 +icon: "github" +description: "A theme for Hugo built with Tailwind CSS." +topics: ["Hugo", "Web", "Tailwind"] +externalUrl: "https://github.com/jpanther/congo/" +--- +``` + +_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_ + +With the projects defined, now we can create a list template that outputs the details of each project. + +```go +{{ define "main" }} +
    + {{ range .Pages }} + + {{ end }} +
    +{{ end }} +``` + +Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed. + +Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section. + +When making custom templates like this one, it's always easiest to take a look at how the default Congo template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too. diff --git a/exampleSite/content/docs/front-matter.md b/exampleSite/content/docs/front-matter.md index af35dcab..45571833 100644 --- a/exampleSite/content/docs/front-matter.md +++ b/exampleSite/content/docs/front-matter.md @@ -12,25 +12,29 @@ In addition to the [default Hugo front matter parameters](https://gohugo.io/cont Front matter parameter default values are inherited from the theme's [base configuration]({{< ref "configuration" >}}), so you only need to specify these parameters in your front matter when you want to override the default. -|Name|Type|Default|Description| -| --- | --- | --- | --- | -|`description`|string|_Not set_|The text description for the article. It is used in the HTML metadata.| -|`externalUrl`|string|_Not set_|If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.| -|`editURL`|string|`article.editURL`|When `showEdit` is active, the URL for the edit link.| -|`editAppendPath`|boolean|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.| -|`groupByYear`|boolean|`list.groupByYear`|Whether or not articles are grouped by year on list pages.| -|`menu`|string or array|_Not set_|When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.| -|`robots`|string|_Not set_|String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| -|`sharingLinks`|array of strings|`article.sharingLinks`|Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.| -|`showAuthor`|boolean|`article.showAuthor`|Whether or not the author box is displayed in the article footer.| -|`showDate`|boolean|`article.showDate`|Whether or not the article date is displayed. The date is set using the `date` parameter.| -|`showDateUpdated`|boolean|`article.showDateUpdated`|Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.| -|`showEdit`|boolean|`article.showEdit`|Whether or not the link to edit the article content should be displayed.| -|`showHeadingAnchors`|boolean|`article.showHeadingAnchors`|Whether or not heading anchor links are displayed alongside headings within this article.| -|`showPagination`|boolean|`article.showPagination`|Whether or not the next/previous article links are displayed in the article footer.| -|`showReadingTime`|boolean|`article.showReadingTime`|Whether or not the article reading time is displayed.| -|`showWordCount`|boolean|`article.showWordCount`|Whether or not the article word count is displayed.| -|`showSummary`|boolean|`list.showSummary`|Whether or not the article summary should be displayed on list pages.| -|`summary`|string|Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))|When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.| -|`xml`|boolean|`true` unless excluded by `sitemap.excludedKinds`|Whether or not this article is included in the generated `/sitemap.xml` file.| +|Name|Default|Description| +|---|---|---| +|`title`|_Not set_|The name of the article.| +|`description`|_Not set_|The text description for the article. It is used in the HTML metadata.| +|`externalUrl`|_Not set_|If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.| +|`editURL`|`article.editURL`|When `showEdit` is active, the URL for the edit link.| +|`editAppendPath`|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.| +|`groupByYear`|`list.groupByYear`|Whether or not articles are grouped by year on list pages.| +|`menu`|_Not set_|When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.| +|`robots`|_Not set_|String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| +|`sharingLinks`|`article.sharingLinks`|Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.| +|`showAuthor`|`article.showAuthor`|Whether or not the author box is displayed in the article footer.| +|`showDate`|`article.showDate`|Whether or not the article date is displayed. The date is set using the `date` parameter.| +|`showDateUpdated`|`article.showDateUpdated`|Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.| +|`showEdit`|`article.showEdit`|Whether or not the link to edit the article content should be displayed.| +|`showHeadingAnchors`|`article.showHeadingAnchors`|Whether or not heading anchor links are displayed alongside headings within this article.| +|`showPagination`|`article.showPagination`|Whether or not the next/previous article links are displayed in the article footer.| +|`invertPagination`|`article.invertPagination`|Whether or not to flip the direction of the next/previous article links.| +|`showReadingTime`|`article.showReadingTime`|Whether or not the article reading time is displayed.| +|`showTaxonomies`|`article.showTaxonomies`|Whether or not the taxonomies that relate to this article are displayed.| +|`showTableOfContents`|`article.showTableOfContents`|Whether or not the table of contents is displayed on this article.| +|`showWordCount`|`article.showWordCount`|Whether or not the article word count is displayed.| +|`showSummary`|`list.showSummary`|Whether or not the article summary should be displayed on list pages.| +|`summary`|Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))|When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.| +|`xml`|`true` unless excluded by `sitemap.excludedKinds`|Whether or not this article is included in the generated `/sitemap.xml` file.| diff --git a/exampleSite/content/docs/getting-started.md b/exampleSite/content/docs/getting-started.md index f68483d6..a7def8bc 100644 --- a/exampleSite/content/docs/getting-started.md +++ b/exampleSite/content/docs/getting-started.md @@ -13,27 +13,43 @@ This section assumes you have already [installed the Congo theme]({{< ref "docs/ The config files that ship with Congo contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature. -There are a few things you should set in `config.toml` for a new installation: +## Basic configuration + +Before creating any content, there are a few things you should set for a new installation. Starting in the `config.toml` file, set the `baseURL` and `languageCode` parameters. The `languageCode` should be set to the main language that you will be using to author your content. ```toml # config/_default/config.toml baseURL = "https://your_domain.com" -languageCode = "en-AU" +languageCode = "en" +``` + +The next step is to configure the language settings. Although Congo supports multilingual setups, for now, just configure the main language. + +Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`. + +{{< alert >}} +Note that the language code in the language config filename should match the `languageCode` setting in `config.toml`. +{{< /alert >}} + +```toml +# config/_default/languages.en.toml + title = "My awesome website" [author] name = "My name" image = "img/author.jpg" +headline = "A generally awesome human" bio = "A little bit about me" links = [ { twitter = "https://twitter.com/username" } ] ``` -The `[author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `static/` folder. Links will be displayed in the order they are listed. +The `[author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `assets/` folder. Links will be displayed in the order they are listed. -Further detail about these configuration options is covered in the [Configuration]({{< ref "configuration" >}}) section. +If you need extra detail, further information about each of these configuration options, is covered in the [Configuration]({{< ref "configuration" >}}) section. ## Colour schemes @@ -65,7 +81,7 @@ Congo defines a three-colour palette that is used throughout the theme. Each mai #### Slate -{{< swatches "#6B7280" "#6B7280" "#6B7280" >}} +{{< swatches "#6B7280" "#64748b" "#6B7280" >}} Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details. @@ -73,9 +89,33 @@ Although these are the default schemes, you can also create your own. Refer to t By default, Congo doesn't force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer _pages_ for a static site, _posts_ for a blog, or _projects_ for a portfolio. -The same logic applies to taxonomies. Some people prefer to use _tags_ and _categories_, others prefer to use _topics_. +Here's a quick overview of a basic Congo project. All content is placed within the `content` folder: -Hugo defaults to using posts, tags and categories out of the box and this will work fine if that's what you want. If you wish to customise this, however, you can do so by creating the following files: +```shell +. +├── assets +│ └── img +│ └── author.jpg +├── config +│ └── _default +├── content +│ ├── _index.md +│ ├── about.md +│ └── posts +│ ├── _index.md +│ ├── first-post.md +│ └── another-post +│ ├── aardvark.jpg +│ └── index.md +└── themes + └── congo +``` + +It's important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the [official Hugo docs](https://gohugo.io/content-management/organization/) for more information. + +Congo is also flexible when it comes to taxonomies. Some people prefer to use _tags_ and _categories_ to group their content, others prefer to use _topics_. + +Hugo defaults to using posts, tags and categories out of the box and this will work fine if that's what you want. If you wish to customise this, however, you can do so by creating a `taxonomies.toml` configuation file: ```toml # config/_default/taxonomies.toml @@ -85,7 +125,7 @@ topic = "topics" This will replace the default _tags_ and _categories_ with _topics_. Refer to the [Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/) for more information on naming taxonomies. -When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections. +When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below. ## Menus diff --git a/exampleSite/content/docs/homepage-layout/index.md b/exampleSite/content/docs/homepage-layout/index.md index e6a73c6f..a1d09294 100644 --- a/exampleSite/content/docs/homepage-layout/index.md +++ b/exampleSite/content/docs/homepage-layout/index.md @@ -15,7 +15,7 @@ The layout of the homepage is controlled by the `homepage.layout` setting in the The default layout is the page layout. It's simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility. -![Profile layout](home-page.jpg) +![Screenshot of homepage layout](home-page.jpg) To enable the page layout, set `homepage.layout = "page"` in the `params.toml` configuration file. @@ -23,9 +23,9 @@ To enable the page layout, set `homepage.layout = "page"` in the `params.toml` c The profile layout is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles. -![Profile layout](home-profile.jpg) +![Screenshot of profile layout](home-profile.jpg) -The author information is provided in the `config.toml` configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Site Configuration]({{< ref "configuration#site-configuration" >}}) sections for parameter details. +The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details. Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes. diff --git a/exampleSite/content/docs/hosting-deployment/index.md b/exampleSite/content/docs/hosting-deployment/index.md index d69e6d8f..13cc0a3e 100644 --- a/exampleSite/content/docs/hosting-deployment/index.md +++ b/exampleSite/content/docs/hosting-deployment/index.md @@ -1,6 +1,6 @@ --- title: "Hosting & Deployment" -date: 2020-08-08 +date: 2020-08-07 draft: false description: "Learn how to deploy a Congo site." slug: "hosting-deployment" diff --git a/exampleSite/content/docs/installation.md b/exampleSite/content/docs/installation.md index df7e99e1..c35126b2 100644 --- a/exampleSite/content/docs/installation.md +++ b/exampleSite/content/docs/installation.md @@ -20,7 +20,7 @@ These instructions will get you up and running using Hugo and Congo from a compl If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`. {{< alert >}} -Make sure you are using **Hugo version 0.86.1** or later as the theme takes advantage of some of the latest Hugo features. +Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features. {{< /alert >}} You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing). diff --git a/exampleSite/content/docs/shortcodes/abstract.jpg b/exampleSite/content/docs/shortcodes/abstract.jpg new file mode 100644 index 00000000..134ced3f Binary files /dev/null and b/exampleSite/content/docs/shortcodes/abstract.jpg differ diff --git a/exampleSite/content/docs/shortcodes.md b/exampleSite/content/docs/shortcodes/index.md similarity index 73% rename from exampleSite/content/docs/shortcodes.md rename to exampleSite/content/docs/shortcodes/index.md index 4b6a0f37..2df0149c 100644 --- a/exampleSite/content/docs/shortcodes.md +++ b/exampleSite/content/docs/shortcodes/index.md @@ -95,6 +95,47 @@ data: { You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page. +## Figure + +Congo includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits. + +Images included using `figure` will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. + +The `figure` shortcode accepts six parameters: + + +|Parameter|Description| +|---|---| +|`src`|**Required.** The filename of the image. This image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.| +|`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.| +|`caption`|Markdown for the image caption, which will be displayed below the image.| +|`class`|Additional CSS classes to apply to the image.| +|`href`|URL that the image should be linked to.| +|`default`|Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal [Hugo shortcode syntax](https://gohugo.io/content-management/shortcodes/#figure).| + + +Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest: + +```md +![Alt text](image.jpg "Image caption") +``` + +**Example:** + +```md +{{}} + + + +![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)") +``` + +{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} + ## Icon `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size. diff --git a/exampleSite/content/docs/version-2/_index.md b/exampleSite/content/docs/version-2/_index.md new file mode 100644 index 00000000..e901edd3 --- /dev/null +++ b/exampleSite/content/docs/version-2/_index.md @@ -0,0 +1,96 @@ +--- +title: "What's New in 2.0 ✨" +date: 2022-01-19 +draft: false +description: "Discover what's new in Congo version 2.0." +tags: ["new", "docs"] +--- + +{{< lead >}} +Congo 2.0 is packed with tons of new features and optimisations. +{{< /lead >}} + +The original aim of Congo was to develop a theme that was simple and lightweight. Version 2 takes this one step further and makes the theme even more powerful while still maintaining its lightweight footprint. + +Continue reading below to discover what's new. When you're ready to upgrade, check out the [guide to upgrading]({{< ref "upgrade" >}}). + +## Tailwind CSS 3.0 + +Tailwind CSS is at the heart of Congo and this new release contains the very latest [Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3). It brings with it performance optimisations and support for some great new CSS features. + +{{< youtube "TmWIrBPE6Bc" >}} + +Implementing this new version has also removed some Tailwind plugin dependencies from the theme, allowing the overall footprint to remain lightweight. + +## Multilingual support + +A highly requested feature, Congo is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available. + +
    :flag-au: :de: :fr: :es: :cn: :brazil: :tr:
    + +Thanks to submissions from the community, Congo has already been translated into [seven languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, [pull requests](https://github.com/jpanther/congo/pulls) for new languages are always welcome! + +## RTL language support + +One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages. + +RTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly. + +## Automatic image resizing + +A big change in Congo 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML `srcset` attributes enabling optimised file sizes to be served to your site visitors. + +![](image-resizing.png) + +```html + +My image +``` + +Best of all there's nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the `figure` shortcode has been completely rewritten to provide the same resizing benefits. + +## Performance improvements + +This update packs performance improvements throughout. A key objective for this release was to improve Lighthouse scores and Congo now scores a perfect 100 on all four metrics. + +{{< screenshot src="lighthouse.jpg" >}} + +There's too many individual changes to highlight them here but the results speak for themselves. If you want to dig deeper, you can [view the Lighthouse report](lighthouse.html). Real world performance will vary based upon server configuration. + +## Site search + +Powered by [Fuse.js](https://fusejs.io), site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there's nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you're all set. Oh, and it also supports full keyboard navigation! + +## Tables of contents + +A highly requested feature, Congo now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions. + +Available on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project. + +## Accessibility improvements + +From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet. + +Version 2 also introduces "skip to content" and "scroll to top" links that enable quick navigation. There's also keyboard shortcuts for enabling items like search without reaching for the mouse. + +The new image resizing features also provide full control over `alt` and `title` elements enabling an accessible experience for all visitors. + +## A whole lot more + +There's countless other minor changes to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD strucured data which further optimises SEO performance. Plus the entire theme has had extra polish to ensure a consistent design language. + +:rocket: Check out the [full changelog](https://github.com/jpanther/congo/blob/dev/CHANGELOG.md) to learn more. + +## Next steps + +If you're ready to upgrade, read the [upgrading from version 1 guide]({{< ref "upgrade" >}}) to get started. If you're new to Congo, check out the [Installation guide]({{< ref "docs/installation" >}}) to begin a new project. + +--- diff --git a/exampleSite/content/docs/version-2/image-resizing.png b/exampleSite/content/docs/version-2/image-resizing.png new file mode 100644 index 00000000..396f2fae Binary files /dev/null and b/exampleSite/content/docs/version-2/image-resizing.png differ diff --git a/exampleSite/content/docs/version-2/lighthouse.html b/exampleSite/content/docs/version-2/lighthouse.html new file mode 100644 index 00000000..1a72b63c --- /dev/null +++ b/exampleSite/content/docs/version-2/lighthouse.html @@ -0,0 +1,11700 @@ + + + + + Lighthouse Report + + + + + + +
    + + +
    + + + + http://localhost:8008/congo/samples/emoji/ + +
    + + +
    +
    +
    + + +
    + + + + +
    +
    100
    + +
    Performance
    +     + + + +
    + + + + +
    +
    100
    + +
    Accessibility
    +     + + + +
    + + + + +
    +
    100
    + +
    Best Practices
    +     + + + +
    + + + + +
    +
    100
    + +
    SEO
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Progressive Web App
    +     +
    + + +
    + + +
    +
    +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    100
    + +
    Performance
    +     + + + +
    + + + + +
    +
    100
    + +
    Accessibility
    +     + + + +
    + + + + +
    +
    100
    + +
    Best Practices
    +     + + + +
    + + + + +
    +
    100
    + +
    SEO
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Progressive Web App
    +     +
    +
    + 0–49 + 50–89 + 90–100 +
    +
    +
    + +
    +
    +
    +
    + + +
    + + + + +
    +
    100
    + +
    Performance
    +     +
    +
    +
    +
    Metrics
    + + +
    +
    + First Contentful Paint +
    1.4 s
    +
    First Contentful Paint marks the time at which the first text or image is painted. Learn more.
    +
    +
    +
    + Speed Index +
    1.4 s
    +
    Speed Index shows how quickly the contents of a page are visibly populated. Learn more.
    +
    +
    +
    + Largest Contentful Paint +
    1.5 s
    +
    Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more
    +
    +
    +
    + Time to Interactive +
    1.4 s
    +
    Time to interactive is the amount of time it takes for the page to become fully interactive. Learn more.
    +
    +
    +
    + Total Blocking Time +
    10 ms
    +
    Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more.
    +
    +
    +
    + Cumulative Layout Shift +
    0
    +
    Cumulative Layout Shift measures the movement of visible elements within the viewport. Learn more.
    +
    +
    Values are estimated and may vary. The performance score is calculated directly from these metrics.See calculator.
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Screenshot
    Show audits relevant to:
    OpportunitiesThese suggestions can help your page load faster. They don't directly affect the Performance score.
    +
    Opportunity
    +
    Estimated Savings
    +
    +
    + +
    +
    +
    + +
    Reduce unused CSS
    +
    +
    +
    +
    +
    +
    0.29 s
    +
    + + + + +
    +
    +
    +
    +     +
    Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn more.FCPLCP
    +
    + + +
    + +
    +
    URL
    Transfer Size
    Potential Savings
    …css/main.bundle.min.6783e34….css
    (localhost)
    39.7 KiB
    27.9 KiB
    +
    +
    + +
    +
    +
    + +
    Reduce unused JavaScript
    +
    +
    +
    +
    +
    +
    0.15 s
    +
    + + + + +
    +
    +
    +
    +     +
    Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn more.LCP
    +
    + + +
    + +
    +
    URL
    Transfer Size
    Potential Savings
    …js/main.bundle.min.81d5d44….js
    (localhost)
    27.2 KiB
    21.4 KiB
    +
    DiagnosticsMore information about the performance of your application. These numbers don't directly affect the Performance score.
    +
    + +
    + + + Avoid chaining critical requests + 1 chain found + +
    + + + + +
    +
    +     +
    The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. Learn more.FCPLCP
    +
    +
    + +
    +
    + Maximum critical path latency: 20 ms +
    +
    +
    +
    Initial Navigation
    + + + +
    + + + + + +
    …samples/emoji
    (localhost)
     +
    + +
    + + + + + +
    …css/main.bundle.min.6783e34….css
    (localhost)
    - 0 ms, 39.71 KiB     +
    +
    +
    +
    +
    + +
    + + + Keep request counts low and transfer sizes small + 4 requests • 92 KiB + +
    + + + + +
    +
    +     +
    To set budgets for the quantity and size of page resources, add a budget.json file. Learn more.
    +
    +
    Resource Type
    Requests
    Transfer Size
    Total
    4
    91.7 KiB
    Stylesheet
    1
    39.7 KiB
    Script
    1
    27.2 KiB
    Document
    1
    17.0 KiB
    Image
    1
    7.7 KiB
    Media
    0
    0.0 KiB
    Font
    0
    0.0 KiB
    Other
    0
    0.0 KiB
    Third-party
    0
    0.0 KiB
    +
    +
    + +
    + + + Largest Contentful Paint element + 1 element found + +
    + + + + +
    +
    +     +
    This is the largest contentful element painted within the viewport. Learn MoreLCP
    +
    +
    Element
    Note: The rendering of these glyphs depends on the browser and the platform. To…
    <span class="dark:text-neutral-300">
    +
    +
    + +
    + + + Avoid long main-thread tasks + 2 long tasks found + +
    + + + + +
    +
    +     +
    Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. Learn moreTBT
    +
    + + +
    + +
    +
    URL
    Start Time
    Duration
    …samples/emoji
    (localhost)
    785 ms
    584 ms
    …samples/emoji
    (localhost)
    1,369 ms
    61 ms
    +
    +
    + +
    + + + Avoid non-composited animations + 18 animated elements found + +
    + + + + +
    +
    +     +
    Animations which are not composited can be janky and increase CLS. Learn moreCLS
    +
    +
    Element
    Name
    ↓Skip to main content
    <a class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutr…" href="#main-content">
    Unsupported CSS Property: background-color
    background-color
    Unsupported CSS Property: color
    color
    Congo
    <a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:unde…" rel="me" href="/congo/">
    Unsupported CSS Property: color
    color
    Docs
    <a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:unde…" href="/congo/docs/">
    Unsupported CSS Property: color
    color
    Samples
    <a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:unde…" href="/congo/samples/">
    Unsupported CSS Property: color
    color
    Users
    <a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:unde…" href="/congo/users/">
    Unsupported CSS Property: color
    color
    GitHub
    <a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:unde…" href="https://github.com/jpanther/congo">
    Unsupported CSS Property: color
    color
    button
    <button id="search-button" class="text-base hover:text-primary-600 dark:hover:text-primary-400">
    Unsupported CSS Property: color
    color
    Content Samples
    <a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href="/congo/samples/">
    Unsupported CSS Property: color
    color
    site configuration
    <a href="http://localhost:8008/congo/docs/configuration/#site-configuration">
    Unsupported CSS Property: color
    color
    Unsupported CSS Property: text-decoration-color
    text-decoration-color
    Emoji cheat sheet
    <a href="http://www.emoji-cheat-sheet.com/">
    Unsupported CSS Property: color
    color
    Unsupported CSS Property: text-decoration-color
    text-decoration-color
    Twitter
    <a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href="https://twitter.com/" target="_blank" aria-label="Twitter" rel="me noopener noreferrer">
    Unsupported CSS Property: color
    color
    Facebook
    <a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href="https://facebook.com/" target="_blank" aria-label="Facebook" rel="me noopener noreferrer">
    Unsupported CSS Property: color
    color
    Linkedin
    <a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href="https://linkedin.com/" target="_blank" aria-label="Linkedin" rel="me noopener noreferrer">
    Unsupported CSS Property: color
    color
    Youtube
    <a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href="https://youtube.com/" target="_blank" aria-label="Youtube" rel="me noopener noreferrer">
    Unsupported CSS Property: color
    color
    ← +Diagrams and Flowcharts +6 March 2019
    <a class="flex" href="/congo/samples/diagrams-flowcharts/">
    Unsupported CSS Property: color
    color
    button
    <button id="close-search-button" class="flex items-center justify-center w-8 h-8 text-neutral-700 dark:text-neutra…">
    Unsupported CSS Property: color
    color
    Hugo
    <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">
    Unsupported CSS Property: color
    color
    Congo
    <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">
    Unsupported CSS Property: color
    color
    +
    + +
    +
    + Passed audits + (28) + + +
    +
    + + + + + +
    +     +
    +
    + +
    + + + Eliminate render-blocking resources + Potential savings of 0 ms + +
    + + + + +
    +
    +     +
    Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.FCPLCP
    +
    + + +
    + +
    +
    URL
    Transfer Size
    Potential Savings
    …css/main.bundle.min.6783e34….css
    (localhost)
    39.7 KiB
    480 ms
    +
    +
    + +
    + + + Properly size images + + +
    + + + + +
    +
    +     +
    Serve images that are appropriately-sized to save cellular data and improve load time. Learn more.
    +
    +
    +
    +
    + +
    + + + Defer offscreen images + + +
    + + + + +
    +
    +     +
    Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more.
    +
    +
    +
    +
    + +
    + + + Minify CSS + + +
    + + + + +
    +
    +     +
    Minifying CSS files can reduce network payload sizes. Learn more.FCPLCP
    +
    +
    +
    +
    + +
    + + + Minify JavaScript + + +
    + + + + +
    +
    +     +
    Minifying JavaScript files can reduce payload sizes and script parse time. Learn more.FCPLCP
    +
    +
    +
    +
    + +
    + + + Efficiently encode images + + +
    + + + + +
    +
    +     +
    Optimized images load faster and consume less cellular data. Learn more.
    +
    +
    +
    +
    + +
    + + + Serve images in next-gen formats + + +
    + + + + +
    +
    +     +
    Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.
    +
    +
    +
    +
    + +
    + + + Preconnect to required origins + + +
    + + + + +
    +
    +     +
    Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins. Learn more.FCPLCP
    +
    +
    +
    +
    + +
    + + + Initial server response time was short + Root document took 0 ms + +
    + + + + +
    +
    +     +
    Keep the server response time for the main document short because all other requests depend on it. Learn more.FCPLCP
    +
    + + +
    + +
    +
    URL
    Time Spent
    …samples/emoji
    (localhost)
    0 ms
    +
    +
    + +
    + + + Avoid multiple page redirects + + +
    + + + + +
    +
    +     +
    Redirects introduce additional delays before the page can be loaded. Learn more.FCPLCP
    +
    +
    +
    +
    + +
    + + + Preload key requests + + +
    + + + + +
    +
    +     +
    Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load. Learn more.FCPLCP
    +
    +
    +
    +
    + +
    + + + Use HTTP/2 + + +
    + + + + +
    +
    +     +
    HTTP/2 offers many benefits over HTTP/1.1, including binary headers and multiplexing. Learn more.
    +
    +
    +
    +
    + +
    + + + Use video formats for animated content + + +
    + + + + +
    +
    +     +
    Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. Learn moreLCP
    +
    +
    +
    +
    + +
    + + + Remove duplicate modules in JavaScript bundles + + +
    + + + + +
    +
    +     +
    Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity. TBT
    +
    +
    +
    +
    + +
    + + + Avoid serving legacy JavaScript to modern browsers + Potential savings of 0 KiB + +
    + + + + +
    +
    +     +
    Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn MoreTBT
    +
    + + +
    + +
    +
    URL
    Potential Savings
    …js/main.bundle.min.81d5d44….js
    (localhost)
    0.2 KiB
    …js/main.bundle.min.81d5d44….js:1:2227
    (localhost)
    @babel/plugin-transform-classes
    +
    +
    + +
    + + + Preload Largest Contentful Paint image + + +
    + + + + +
    +
    +     +
    Preload the image used by the LCP element in order to improve your LCP time. Learn more.LCP
    +
    +
    +
    +
    + +
    + + + Avoids enormous network payloads + Total size was 92 KiB + +
    + + + + +
    +
    +     +
    Large network payloads cost users real money and are highly correlated with long load times. Learn more.LCP
    +
    + + +
    + +
    +
    URL
    Transfer Size
    …css/main.bundle.min.6783e34….css
    (localhost)
    39.7 KiB
    …js/main.bundle.min.81d5d44….js
    (localhost)
    27.2 KiB
    …samples/emoji
    (localhost)
    17.0 KiB
    /congo/author_hu052d24d…_54195_192x192_fill_q75_box_smart1.jpg
    (localhost)
    7.7 KiB
    +
    +
    + +
    + + + Avoids an excessive DOM size + 120 elements + +
    + + + + +
    +
    +     +
    A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn more.TBT
    +
    +
    Statistic
    Element
    Value
    Total DOM Elements
    120
    Maximum DOM Depth
    path
    <path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-2…">
    12
    Maximum Child Elements
    body
    <body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutr…">
    5
    +
    +
    + +
    + + + User Timing marks and measures + + +
    + + + + +
    +
    +     +
    Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. Learn more.
    +
    +
    +
    +
    + +
    + + + JavaScript execution time + 0.0 s + +
    + + + + +
    +
    +     +
    Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn more.TBT
    +
    + + +
    + +
    +
    URL
    Total CPU Time
    Script Evaluation
    Script Parse
    …samples/emoji
    (localhost)
    1,411 ms
    4 ms
    1 ms
    +
    +
    + +
    + + + Minimizes main-thread work + 1.5 s + +
    + + + + +
    +
    +     +
    Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn moreTBT
    +
    +
    Category
    Time Spent
    Style & Layout
    1,117 ms
    Rendering
    252 ms
    Other
    53 ms
    Script Evaluation
    20 ms
    Parse HTML & CSS
    8 ms
    Script Parsing & Compilation
    3 ms
    +
    +
    + +
    + + + All text remains visible during webfont loads + + +
    + + + + +
    +
    +     +
    Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.FCPLCP
    +
    +
    +
    +
    + +
    + + + Minimize third-party usage + + +
    + + + + +
    +
    +     +
    Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. Learn more.TBT
    +
    +
    +
    +
    + +
    + + + Lazy load third-party resources with facades + + +
    + + + + +
    +
    +     +
    Some third-party embeds can be lazy loaded. Consider replacing them with a facade until they are required. Learn more.TBT
    +
    +
    +
    +
    + +
    + + + Avoid large layout shifts + + +
    + + + + +
    +
    +     +
    These DOM elements contribute most to the CLS of the page.CLS
    +
    +
    +
    +
    + +
    + + + Uses passive listeners to improve scrolling performance + + +
    + + + + +
    +
    +     +
    Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance. Learn more.
    +
    +
    +
    +
    + +
    + + + Avoids document.write() + + +
    + + + + +
    +
    +     +
    For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.
    +
    +
    +
    +
    + +
    + + + Image elements have explicit width and height + + +
    + + + + +
    +
    +     +
    Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn moreCLS
    +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    100
    + +
    Accessibility
    +     +
    +
    These checks highlight opportunities to improve the accessibility of your web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.
    +
    +
    + +
    +
    + Additional items to manually check + (10) + + + These items address areas which an automated testing tool cannot cover. Learn more in our guide on conducting an accessibility review.
    +
    + + + + + +
    +     +
    +
    + +
    + + + The page has a logical tab order + + +
    + + + + +
    +
    +     +
    Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. Learn more.
    +
    +
    +
    +
    + +
    + + + Interactive controls are keyboard focusable + + +
    + + + + +
    +
    +     +
    Custom interactive controls are keyboard focusable and display a focus indicator. Learn more.
    +
    +
    +
    +
    + +
    + + + Interactive elements indicate their purpose and state + + +
    + + + + +
    +
    +     +
    Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. Learn more.
    +
    +
    +
    +
    + +
    + + + The user's focus is directed to new content added to the page + + +
    + + + + +
    +
    +     +
    If new content, such as a dialog, is added to the page, the user's focus is directed to it. Learn more.
    +
    +
    +
    +
    + +
    + + + User focus is not accidentally trapped in a region + + +
    + + + + +
    +
    +     +
    A user can tab into and out of any control or region without accidentally trapping their focus. Learn more.
    +
    +
    +
    +
    + +
    + + + Custom controls have associated labels + + +
    + + + + +
    +
    +     +
    Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. Learn more.
    +
    +
    +
    +
    + +
    + + + Custom controls have ARIA roles + + +
    + + + + +
    +
    +     +
    Custom interactive controls have appropriate ARIA roles. Learn more.
    +
    +
    +
    +
    + +
    + + + Visual order on the page follows DOM order + + +
    + + + + +
    +
    +     +
    DOM order matches the visual order, improving navigation for assistive technology. Learn more.
    +
    +
    +
    +
    + +
    + + + Offscreen content is hidden from assistive technology + + +
    + + + + +
    +
    +     +
    Offscreen content is hidden with display: none or aria-hidden=true. Learn more.
    +
    +
    +
    +
    + +
    + + + HTML5 landmark elements are used to improve navigation + + +
    + + + + +
    +
    +     +
    Landmark elements (<main>, <nav>, etc.) are used to improve the keyboard navigation of the page for assistive technology. Learn more.
    +
    +
    +
    + +
    +
    + Passed audits + (18) + + +
    +
    + + + + + +
    +     +
    +
    + +
    + + + [aria-*] attributes match their roles + + +
    + + + + +
    +
    +     +
    Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. Learn more.
    +
    +
    +
    +
    + +
    + + + [aria-hidden="true"] is not present on the document <body> + + +
    + + + + +
    +
    +     +
    Assistive technologies, like screen readers, work inconsistently when `aria-hidden="true"` is set on the document `<body>`. Learn more.
    +
    +
    +
    +
    + +
    + + + [aria-hidden="true"] elements do not contain focusable descendents + + +
    + + + + +
    +
    +     +
    Focusable descendents within an `[aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + [aria-*] attributes have valid values + + +
    + + + + +
    +
    +     +
    Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. Learn more.
    +
    +
    +
    +
    + +
    + + + [aria-*] attributes are valid and not misspelled + + +
    + + + + +
    +
    +     +
    Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. Learn more.
    +
    +
    +
    +
    + +
    + + + Buttons have an accessible name + + +
    + + + + +
    +
    +     +
    When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + The page contains a heading, skip link, or landmark region + + +
    + + + + +
    +
    +     +
    Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently. Learn more.
    +
    +
    +
    +
    + +
    + + + Background and foreground colors have a sufficient contrast ratio + + +
    + + + + +
    +
    +     +
    Low-contrast text is difficult or impossible for many users to read. Learn more.
    +
    +
    +
    +
    + +
    + + + Document has a <title> element + + +
    + + + + +
    +
    +     +
    The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Learn more.
    +
    +
    +
    +
    + +
    + + + [id] attributes on active, focusable elements are unique + + +
    + + + + +
    +
    +     +
    All focusable elements must have a unique `id` to ensure that they're visible to assistive technologies. Learn more.
    +
    +
    +
    +
    + +
    + + + Heading elements appear in a sequentially-descending order + + +
    + + + + +
    +
    +     +
    Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more.
    +
    +
    +
    +
    + +
    + + + <html> element has a [lang] attribute + + +
    + + + + +
    +
    +     +
    If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. Learn more.
    +
    +
    +
    +
    + +
    + + + <html> element has a valid value for its [lang] attribute + + +
    + + + + +
    +
    +     +
    Specifying a valid BCP 47 language helps screen readers announce text properly. Learn more.
    +
    +
    +
    +
    + +
    + + + Image elements have [alt] attributes + + +
    + + + + +
    +
    +     +
    Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more.
    +
    +
    +
    +
    + +
    + + + Links have a discernible name + + +
    + + + + +
    +
    +     +
    Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.
    +
    +
    +
    +
    + +
    + + + Lists contain only <li> elements and script supporting elements (<script> and <template>). + + +
    + + + + +
    +
    +     +
    Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more.
    +
    +
    +
    +
    + +
    + + + List items (<li>) are contained within <ul> or <ol> parent elements + + +
    + + + + +
    +
    +     +
    Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly. Learn more.
    +
    +
    +
    +
    + +
    + + + [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5. + + +
    + + + + +
    +
    +     +
    Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more.
    +
    +
    +
    + +
    +
    + Not applicable + (26) + + +
    +
    + + + + + +
    +     +
    +
    + +
    + + + [accesskey] values are unique + + +
    + + + + +
    +
    +     +
    Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique. Learn more.
    +
    +
    +
    +
    + +
    + + + button, link, and menuitem elements have accessible names + + +
    + + + + +
    +
    +     +
    When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA input fields have accessible names + + +
    + + + + +
    +
    +     +
    When an input field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA meter elements have accessible names + + +
    + + + + +
    +
    +     +
    When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA progressbar elements have accessible names + + +
    + + + + +
    +
    +     +
    When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + [role]s have all required [aria-*] attributes + + +
    + + + + +
    +
    +     +
    Some ARIA roles have required attributes that describe the state of the element to screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + Elements with an ARIA [role] that require children to contain a specific [role] have all required children. + + +
    + + + + +
    +
    +     +
    Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. Learn more.
    +
    +
    +
    +
    + +
    + + + [role]s are contained by their required parent element + + +
    + + + + +
    +
    +     +
    Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. Learn more.
    +
    +
    +
    +
    + +
    + + + [role] values are valid + + +
    + + + + +
    +
    +     +
    ARIA roles must have valid values in order to perform their intended accessibility functions. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA toggle fields have accessible names + + +
    + + + + +
    +
    +     +
    When a toggle field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA tooltip elements have accessible names + + +
    + + + + +
    +
    +     +
    When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA treeitem elements have accessible names + + +
    + + + + +
    +
    +     +
    When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + <dl>'s contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements. + + +
    + + + + +
    +
    +     +
    When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. Learn more.
    +
    +
    +
    +
    + +
    + + + Definition list items are wrapped in <dl> elements + + +
    + + + + +
    +
    +     +
    Definition list items (`<dt>` and `<dd>`) must be wrapped in a parent `<dl>` element to ensure that screen readers can properly announce them. Learn more.
    +
    +
    +
    +
    + +
    + + + ARIA IDs are unique + + +
    + + + + +
    +
    +     +
    The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies. Learn more.
    +
    +
    +
    +
    + +
    + + + No form fields have multiple labels + + +
    + + + + +
    +
    +     +
    Form fields with multiple labels can be confusingly announced by assistive technologies like screen readers which use either the first, the last, or all of the labels. Learn more.
    +
    +
    +
    +
    + +
    + + + <frame> or <iframe> elements have a title + + +
    + + + + +
    +
    +     +
    Screen reader users rely on frame titles to describe the contents of frames. Learn more.
    +
    +
    +
    +
    + +
    + + + <input type="image"> elements have [alt] text + + +
    + + + + +
    +
    +     +
    When an image is being used as an `<input>` button, providing alternative text can help screen reader users understand the purpose of the button. Learn more.
    +
    +
    +
    +
    + +
    + + + Form elements have associated labels + + +
    + + + + +
    +
    +     +
    Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Learn more.
    +
    +
    +
    +
    + +
    + + + The document does not use <meta http-equiv="refresh"> + + +
    + + + + +
    +
    +     +
    Users do not expect a page to refresh automatically, and doing so will move focus back to the top of the page. This may create a frustrating or confusing experience. Learn more.
    +
    +
    +
    +
    + +
    + + + <object> elements have [alt] text + + +
    + + + + +
    +
    +     +
    Screen readers cannot translate non-text content. Adding alt text to `<object>` elements helps screen readers convey meaning to users. Learn more.
    +
    +
    +
    +
    + +
    + + + No element has a [tabindex] value greater than 0 + + +
    + + + + +
    +
    +     +
    A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more.
    +
    +
    +
    +
    + +
    + + + Cells in a <table> element that use the [headers] attribute refer to table cells within the same table. + + +
    + + + + +
    +
    +     +
    Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users. Learn more.
    +
    +
    +
    +
    + +
    + + + <th> elements and elements with [role="columnheader"/"rowheader"] have data cells they describe. + + +
    + + + + +
    +
    +     +
    Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users. Learn more.
    +
    +
    +
    +
    + +
    + + + [lang] attributes have a valid value + + +
    + + + + +
    +
    +     +
    Specifying a valid BCP 47 language on elements helps ensure that text is pronounced correctly by a screen reader. Learn more.
    +
    +
    +
    +
    + +
    + + + <video> elements contain a <track> element with [kind="captions"] + + +
    + + + + +
    +
    +     +
    When a video provides a caption it is easier for deaf and hearing impaired users to access its information. Learn more.
    +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    100
    + +
    Best Practices
    +     +
    +
    +
    +
    Trust and Safety
    +
    + +
    + + + Ensure CSP is effective against XSS attacks + + +
    + + + + +
    +
    +     +
    A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. Learn more
    +
    +
    Description
    Directive
    Severity
    No CSP found in enforcement mode
    High
    +
    + +
    +
    + Passed audits + (17) + + +
    +
    + + + + + +
    +     +
    +
    + +
    + + + Uses HTTPS + + +
    + + + + +
    +
    +     +
    All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding mixed content, where some resources are loaded over HTTP despite the initial request being served over HTTPS. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. Learn more.
    +
    +
    +
    +
    + +
    + + + Links to cross-origin destinations are safe + + +
    + + + + +
    +
    +     +
    Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve performance and prevent security vulnerabilities. Learn more.
    +
    +
    +
    +
    + +
    + + + Avoids requesting the geolocation permission on page load + + +
    + + + + +
    +
    +     +
    Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. Learn more.
    +
    +
    +
    +
    + +
    + + + Avoids requesting the notification permission on page load + + +
    + + + + +
    +
    +     +
    Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. Learn more.
    +
    +
    +
    +
    + +
    + + + Avoids front-end JavaScript libraries with known security vulnerabilities + + +
    + + + + +
    +
    +     +
    Some third-party scripts may contain known security vulnerabilities that are easily identified and exploited by attackers. Learn more.
    +
    +
    +
    +
    + +
    + + + Allows users to paste into password fields + + +
    + + + + +
    +
    +     +
    Preventing password pasting undermines good security policy. Learn more.
    +
    +
    +
    +
    + +
    + + + Displays images with correct aspect ratio + + +
    + + + + +
    +
    +     +
    Image display dimensions should match natural aspect ratio. Learn more.
    +
    +
    +
    +
    + +
    + + + Serves images with appropriate resolution + + +
    + + + + +
    +
    +     +
    Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. Learn more.
    +
    +
    +
    +
    + +
    + + + Page has the HTML doctype + + +
    + + + + +
    +
    +     +
    Specifying a doctype prevents the browser from switching to quirks-mode. Learn more.
    +
    +
    +
    +
    + +
    + + + Properly defines charset + + +
    + + + + +
    +
    +     +
    A character encoding declaration is required. It can be done with a `<meta>` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more.
    +
    +
    +
    +
    + +
    + + + Avoids unload event listeners + + +
    + + + + +
    +
    +     +
    The `unload` event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Consider using the `pagehide` or `visibilitychange` events instead. Learn more
    +
    +
    +
    +
    + +
    + + + Avoids Application Cache + + +
    + + + + +
    +
    +     +
    Application Cache is deprecated. Learn more.
    +
    +
    +
    +
    + +
    + + + Detected JavaScript libraries + + +
    + + + + +
    +
    +     +
    All front-end JavaScript libraries detected on the page. Learn more.
    +
    +
    Name
    Version
    FuseJS
    +
    +
    + +
    + + + Avoids deprecated APIs + + +
    + + + + +
    +
    +     +
    Deprecated APIs will eventually be removed from the browser. Learn more.
    +
    +
    +
    +
    + +
    + + + No browser errors logged to the console + + +
    + + + + +
    +
    +     +
    Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more
    +
    +
    +
    +
    + +
    + + + Page has valid source maps + + +
    + + + + +
    +
    +     +
    Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more.
    +
    +
    +
    +
    + +
    + + + No issues in the Issues panel in Chrome Devtools + + +
    + + + + +
    +
    +     +
    Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.
    +
    +
    +
    + +
    +
    + Not applicable + (1) + + +
    +
    + + + + + +
    +     +
    +
    + +
    + + + Fonts with font-display: optional are preloaded + + +
    + + + + +
    +
    +     +
    Preload `optional` fonts so first-time visitors may use them. Learn more
    +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    100
    + +
    SEO
    +     +
    +
    These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. Learn more.
    +
    +
    + +
    +
    + Additional items to manually check + (1) + + + Run these additional validators on your site to check additional SEO best practices.
    +
    + + + + + +
    +     +
    +
    + +
    + + + Structured data is valid + + +
    + + + + +
    +
    +     +
    Run the Structured Data Testing Tool and the Structured Data Linter to validate structured data. Learn more.
    +
    +
    +
    + +
    +
    + Passed audits + (13) + + +
    +
    + + + + + +
    +     +
    +
    + +
    + + + Has a <meta name="viewport"> tag with width or initial-scale + + +
    + + + + +
    +
    +     +
    Add a `<meta name="viewport">` tag to optimize your app for mobile screens. Learn more.
    +
    +
    +
    +
    + +
    + + + Document has a <title> element + + +
    + + + + +
    +
    +     +
    The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Learn more.
    +
    +
    +
    +
    + +
    + + + Document has a meta description + + +
    + + + + +
    +
    +     +
    Meta descriptions may be included in search results to concisely summarize page content. Learn more.
    +
    +
    +
    +
    + +
    + + + Page has successful HTTP status code + + +
    + + + + +
    +
    +     +
    Pages with unsuccessful HTTP status codes may not be indexed properly. Learn more.
    +
    +
    +
    +
    + +
    + + + Links have descriptive text + + +
    + + + + +
    +
    +     +
    Descriptive link text helps search engines understand your content. Learn more.
    +
    +
    +
    +
    + +
    + + + Links are crawlable + + +
    + + + + +
    +
    +     +
    Search engines may use `href` attributes on links to crawl websites. Ensure that the `href` attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered. Learn More
    +
    +
    +
    +
    + +
    + + + Page isn’t blocked from indexing + + +
    + + + + +
    +
    +     +
    Search engines are unable to include your pages in search results if they don't have permission to crawl them. Learn more.
    +
    +
    +
    +
    + +
    + + + Image elements have [alt] attributes + + +
    + + + + +
    +
    +     +
    Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more.
    +
    +
    +
    +
    + +
    + + + Document has a valid hreflang + + +
    + + + + +
    +
    +     +
    hreflang links tell search engines what version of a page they should list in search results for a given language or region. Learn more.
    +
    +
    +
    +
    + +
    + + + Document has a valid rel=canonical + + +
    + + + + +
    +
    +     +
    Canonical links suggest which URL to show in search results. Learn more.
    +
    +
    +
    +
    + +
    + + + Document uses legible font sizes + 99.75% legible text + +
    + + + + +
    +
    +     +
    Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. Learn more.
    +
    + + +
    + +
    +
    Source
    Selector
    % of Page Text
    Font Size
    …css/main.bundle.min.6783e34….css:1:28538
    (localhost)
    .text-\[0\.6rem\]
    0.25%
    9.6px
    Legible text
    99.75%
    ≥ 12px
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Document avoids plugins
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    Search engines can't index plugin content, and many devices restrict plugins or don't support them. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Tap targets are sized appropriately
+            100% appropriately sized tap targets
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. Learn more.
    
+      
    
+    
    
+  
    
+    
+      
    
+        
    
+          Not applicable
+          (1)
+          
+          
+        
    
+        
    
+      
+    
+      
+      
+    
+  
    
+        
+  
    
+    
    
+      
+        
    
+          
+          
+            robots.txt is valid
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Learn more.
    
+      
    
+    
    
+  
    
+  
    
+    
    
+  
+
+  
+    
+      
+        
+          
+          
+        
+        
+          
+          
+        
+
+        
+          
+          
+        
+      
+
+      
+        
+        
+        
+
+        
+        
+
+        
+        
+          
+          
+        
+
+        
+        
+          
+          
+        
+      
+    
+
+    
    Progressive Web App
    
+      
+
    
+    
    These checks validate the aspects of a Progressive Web App. Learn more.
    
+  
    
+
    Installable
    
+    
    
+      
+        
    
+          
+          
+            Web app manifest and service worker meet the installability requirements
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more.
    
+      
    
+    
    
+  
    PWA Optimized
    
+    
    
+      
+        
    
+          
+          
+            Does not register a service worker that controls page and start_url
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Redirects HTTP traffic to HTTPS
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS in order to enable secure web features for all your users. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Configured for a custom splash screen
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    A themed splash screen ensures a high-quality experience when users launch your app from their homescreens. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Does not set a theme color for the address bar.
    Failures: No `<meta name="theme-color">` tag found.
    
+            
+              
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    The browser address bar can be themed to match your site. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Content is sized correctly for the viewport
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Has a <meta name="viewport"> tag with width or initial-scale
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    Add a `<meta name="viewport">` tag to optimize your app for mobile screens. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Provides a valid apple-touch-icon
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    For ideal appearance on iOS when users add a progressive web app to the home screen, define an `apple-touch-icon`. It must point to a non-transparent 192px (or 180px) square PNG. Learn More.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Manifest has a maskable icon
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more.
    
+      
    
+    
    
+  
    
+    
+      
    
+        
    
+          Additional items to manually check
+          (3)
+          
+          
+        These checks are required by the baseline PWA Checklist but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.
    
+        
    
+      
+    
+      
+      
+    
+  
    
+        
+  
    
+    
    
+      
+        
    
+          
+          
+            Site works cross-browser
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    To reach the most number of users, sites should work across every major browser. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Page transitions don't feel like they block on the network
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    Transitions should feel snappy as you tap around, even on a slow network. This experience is key to a user's perception of performance. Learn more.
    
+      
    
+    
    
+  
    
+    
    
+      
+        
    
+          
+          
+            Each page has a URL
+            
+          
+          
    
+    
+      
+      
+    
+  
    
+        
    
+          
+      
    Ensure individual pages are deep linkable via URL and that URLs are unique for the purpose of shareability on social media. Learn more.
    
+      
    
+    
    
+  
    
+  
+  
    
+    
+    
    
+      
    Runtime Settings
    
+      
      
+        
+      
+          
    • 
+            URL
+            http://localhost:8008/congo/samples/emoji/
+          
      • 
+        
+          
    • 
+            Fetch Time
+            Jan 19, 2022, 7:17 PM GMT+11
+          
      • 
+        
+          
    • 
+            Device
+            Emulated Moto G4
+          
      • 
+        
+          
    • 
+            Network throttling
+            150 ms TCP RTT, 1,638.4 Kbps throughput (Simulated)
+          
      • 
+        
+          
    • 
+            CPU throttling
+            4x slowdown (Simulated)
+          
      • 
+        
+          
    • 
+            Channel
+            cli
+          
      • 
+        
+          
    • 
+            User agent (host)
+            Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/96.0.4664.110 Safari/537.36
+          
      • 
+        
+          
    • 
+            User agent (network)
+            Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4420.0 Mobile Safari/537.36 Chrome-Lighthouse
+          
      • 
+        
+          
    • 
+            CPU/Memory Power
+            1949
+          
      • 
+        
+          
    • 
+            Axe version
+            4.2.1
+          
      • 
+        
    
+    
    
+
+    
    
+      
+      Generated by Lighthouse 8.0.0 |
+      File an issue
+    
    
+  
    
+
    
+
+  
    
+
+  
+  
+  
+  
+
+
+
\ No newline at end of file
diff --git a/exampleSite/content/docs/version-2/lighthouse.jpg b/exampleSite/content/docs/version-2/lighthouse.jpg
new file mode 100644
index 00000000..22a895ca
Binary files /dev/null and b/exampleSite/content/docs/version-2/lighthouse.jpg differ
diff --git a/exampleSite/content/docs/version-2/upgrade/index.md b/exampleSite/content/docs/version-2/upgrade/index.md
new file mode 100644
index 00000000..e9222b0e
--- /dev/null
+++ b/exampleSite/content/docs/version-2/upgrade/index.md
@@ -0,0 +1,190 @@
+---
+title: "Upgrading from Congo 1.x"
+date: 2022-01-20
+draft: false
+description: "Discover what's new in Congo version 2.0."
+tags: ["new", "docs"]
+---
+
+Although Congo 2.0 contains a large number of changes, the theme has been designed to minimise the effort required to upgrade to the latest release.
+
+That said, there are some changes that require adjustments to existing sites that are built with Congo version 1.x. This guide will step you through the process and highlight things you need to consider.
+
+## Step 1: Upgrade Hugo
+
+{{< alert >}}
+Congo 2.0 requires a minimum of **Hugo v0.87.0 or later**
+{{< /alert >}}
+
+Congo is built to take advantage of some of the latest Hugo features. You should regularly keep your Hugo installation up to date to avoid any issues.
+
+You can check your current version using the command `hugo version`. Visit the [Hugo docs](https://gohugo.io/getting-started/installing/) for information on obtaining a newer release for your platform.
+
+## Step 2: Upgrade Congo
+
+The process for upgrading Congo will depend on how you include the theme in your project. Instructions for each method can be found below.
+
+- [Upgrade using Hugo](#upgrade-using-hugo)
+- [Upgrade using git](#upgrade-using-git)
+- [Upgrade manually](#upgrade-manually)
+
+### Upgrade using Hugo
+
+Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:
+
+```shell
+hugo mod get -u
+```
+
+Hugo will automatically upgrade any modules that are required for your project. It does this by inspecting your `module.toml` and `go.mod` files. If you have any issues with the upgrade, check to ensure these files are still configured correctly.
+
+Once the theme has been upgraded, continue to the [next section](#step-3-theme-configuration).
+
+### Upgrade using git
+
+Git submodules can be upgraded using the `git` command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:
+
+```shell
+git submodule upgrade --remote --merge
+```
+
+Once the submodule has been upgraded, continue to the [next section](#step-3-theme-configuration).
+
+### Upgrade manually
+
+Updating Congo manually requires you to download the latest copy of the theme and replace the old version in your project.
+
+{{< alert >}}
+Note that any local customisations you have made to the theme files will be lost during this process.
+{{< /alert >}}
+
+1. Download the latest release of the theme source code.
+
+   {{< button href="https://github.com/jpanther/congo/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
+
+2. Extract the archive, rename the folder to `congo` and move it to the `themes/` directory inside your Hugo project's root folder. You will need to overwrite the existing directory to replace all the theme files.
+
+3. Continue to the [next section](#step-3-theme-configuration).
+
+## Step 3: Theme configuration
+
+Congo 2.0 introduces a number of new theme configuration parameters. Although the theme will adapt to existing version 1 configurations, in order to take advantage of some of the newer theme features, you will need to adjust your existing configuration.
+
+The simplest way to do this is to take a copy of the theme's default configuration and compare it to your existing files. The process is outlined in greater detail below.
+
+### Languages.toml
+
+In order to provide multilingual support, language-specific theme parameters have been moved to a new config file `languages.[lang-code].toml`. The theme comes with a template `languages.en.toml` file which can be used as a guide.
+
+{{< alert >}}
+This step is optional if you do not need multilingual support, although completing it now will make future theme upgrades easier.
+{{< /alert >}}
+
+The languages config file follows this structure:
+
+```toml
+# config/_default/languagues.en.toml
+
+languageCode = "en"
+languageName = "English"
+displayName = "EN"
+htmlCode = "en"
+weight = 1
+rtl = false
+
+# Language-specific parameters go here
+```
+
+Using your preferred language, simply create this new file in `config/_default/` and then move the language-specific parameters from any existing config files over to this new file. The table below outlines the parameters that need to be moved.
+
+| Parameter     | Old location  |
+| ------------- | ------------- |
+| `title`       | `config.toml` |
+| `description` | `params.toml` |
+| `copyright`   | `config.toml` |
+| `dateFormat`  | `params.toml` |
+| `[author]`    | `config.toml` |
+
+Once the values have been moved to the new location, these parameters should be deleted from their original locations.
+
+### Config.toml
+
+The `config.toml` file now only contains base Hugo configuration values. Other than removing the language-specific strings above, there are only two changes to consider.
+
+If you're using a language other than English, provide a `defaultContentLanguage` value that matches the language code in the config file you created for your language. Secondly, to take advange of the new site search in Congo 2.0, an `[outputs]` block needs to be provided.
+
+```toml
+# config/_default/config.toml
+
+defaultContentLanguage = "en"
+
+enableRobotsTXT = true
+paginate = 10
+summaryLength = 0
+
+[outputs]
+  home = ["HTML", "RSS", "JSON"]
+```
+
+### Markup.toml
+
+Congo 2.0 adds support for tables of contents on article pages. Although Hugo ships with default settings for generating contents listings, you can adjust this behaviour by adding a new `[tableOfContents]` block to your `markup.toml` file.
+
+The recommended settings are as follows, which includes any headings in the Markdown content at levels 2, 3 and 4:
+
+```toml
+# config/_default/markup.toml
+
+[tableOfContents]
+  startLevel = 2
+  endLevel = 4
+```
+
+### Params.toml
+
+A number of new theme parameters have been introduced in Congo 2.0. Some minor changes are requried to existing configurations. Remember, the theme will always revert to a sensible default if a parameter is not provided.
+
+The way that dark mode works in Congo has been changed to allow greater flexibility around configuration. The old `darkMode` and `darkToggle` parameters have been **removed and replaced** by three new parameters. These new options operate independently of each other, making it possible to force the appearance while still allowing the user to override.
+
+
+| New parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultAppearance` | String | `"light"` | Default theme appearance; either `light` or `dark`.
    :warning: _Setting this to `light` replicates the old `darkMode = false` setting, while `dark` replicates `darkMode = true`._ |
+| `autoSwitchAppearance` | Boolean | `true` | Whether the theme appearance automatically switches based upon the operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. 
    :warning: _Setting this to `true` replicates the old `darkMode = "auto"` setting._ |
+| `showAppearanceSwitcher` | Boolean | `false` | Whether the theme appearance switcher is dispalyed in the site footer. 
    :warning: _This parameter replaces `darkToggle`._ |
+
+
+The following table outlines some other key **new parameters** that control new features in version 2:
+
+| New parameter                 | Type    | Default |
+| ----------------------------- | ------- | ------- |
+| `enableSearch`                | Boolean | `false` |
+| `showScrollToTop`             | Boolean | `true`  |
+| `article.showTaxonomies`      | Boolean | `false` |
+| `article.showTableOfContents` | Boolean | `false` |
+| `list.showTableOfContents`    | Boolean | `false` |
+
+For the full list of supported parameters, refer to the [Configuration]({{< ref "docs/configuration" >}}) docs.
+
+## Step 4: Move assets
+
+All site assets now use Hugo Pipes to build an optimised version of your project. In order for the theme to locate your files, any previously static assets used in the theme need to be moved to the Hugo assets folder.
+
+`static/me.jpg` **→** `assets/me.jpg`  
+`static/logo.jpg` **→** `assets/logo.jpg`
+
+If you have provided an author image or site logo, simply move these assets from the `static/` folder to the `assets/` folder. If you use the same directory structure the theme will know where to find these files automatically. If you would like to provide a new path, update the `logo` and `author.image` config values accordingly.
+
+## Step 5: Check content
+
+The behavior of the `figure` shortcode is different in version 2. If you are using `figure` in your content and have advanced use cases, you may need to adjust the parameters you are providing.
+
+Consult the [shortcode docs]({{< ref "docs/shortcodes#figure" >}}) to learn more about supported parameters.
+
+## Step 6: Rebuild
+
+Now that all the configuration changes are complete, it's time to rebuild the site. Run `hugo`, or your build command, and check that everything works as expected.
+
+If you come across any errors, check the configuration is correct and refer to the [full documentation]({{< ref "docs" >}}) for further guidance. Remember, the example config files bundled with the theme contain all the default parameters and are a great starting point.
+
+🙋‍♀️ If you still need help, feel free to ask your question on [GitHub Discussions](https://github.com/jpanther/congo/discussions).
diff --git a/exampleSite/content/mountains.jpg b/exampleSite/content/mountains.jpg
deleted file mode 100644
index 493565f8..00000000
Binary files a/exampleSite/content/mountains.jpg and /dev/null differ
diff --git a/exampleSite/content/samples/external.md b/exampleSite/content/samples/external.md
new file mode 100755
index 00000000..1d5de6a3
--- /dev/null
+++ b/exampleSite/content/samples/external.md
@@ -0,0 +1,14 @@
+---
+title: "An External Article"
+date: 2019-01-24
+externalUrl: "https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/"
+summary: "The `externalUrl` front matter parameter can link to any URL."
+showReadingTime: false
+_build:
+  render: "false"
+  list: "local"
+---
+
+This page uses the `externalUrl` front matter parameter to link to an article outside of this Hugo website.
+
+It's great for things like linking to posts on Medium or to research papers you may have hosted on third party websites.
diff --git a/exampleSite/content/samples/markdown.md b/exampleSite/content/samples/markdown.md
index c870d277..601fae2a 100755
--- a/exampleSite/content/samples/markdown.md
+++ b/exampleSite/content/samples/markdown.md
@@ -45,7 +45,7 @@ The blockquote element represents content that is quoted from another source, op
 > Don't communicate by sharing memory, share memory by communicating.
    
 > — Rob Pike[^1]
 
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+[^1]: The above quote is excerpted from Rob Pike's [talk `about` nothing](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
 ## Tables
 
@@ -81,7 +81,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 ### Code block indented with four spaces
 
-    
+    
     
     
       
@@ -94,9 +94,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 ### Code block with Hugo's internal highlight shortcode
 
-{{< highlight html >}}
+{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
 
-
+
 
 
   
diff --git a/exampleSite/content/samples/placeholder-text.md b/exampleSite/content/samples/placeholder-text.md
index 3e8556ca..53346399 100755
--- a/exampleSite/content/samples/placeholder-text.md
+++ b/exampleSite/content/samples/placeholder-text.md
@@ -26,7 +26,7 @@ Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silen
 
 ## Vagus elidunt
 
-
+
 
 [The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
 
diff --git a/exampleSite/content/squid.jpg b/exampleSite/content/squid.jpg
new file mode 100644
index 00000000..67b12241
Binary files /dev/null and b/exampleSite/content/squid.jpg differ
diff --git a/exampleSite/content/tags/_index.md b/exampleSite/content/tags/_index.md
new file mode 100644
index 00000000..54090f33
--- /dev/null
+++ b/exampleSite/content/tags/_index.md
@@ -0,0 +1,9 @@
+---
+title: Tags
+---
+
+Congo has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.
+
+This area could be used to add some extra decriptive text to each taxonomy. Check out the [advanced tag]({{< ref "advanced" >}}) below to see how to take this concept even further.
+
+---
diff --git a/exampleSite/content/tags/advanced/_index.md b/exampleSite/content/tags/advanced/_index.md
new file mode 100644
index 00000000..2ade4bcb
--- /dev/null
+++ b/exampleSite/content/tags/advanced/_index.md
@@ -0,0 +1,7 @@
+---
+title: advanced
+---
+
+This is the advanced tag. Just like other listing pages in Congo, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. :rocket:
+
+You can also use these content pages to define Hugo metadata like titles and descriptions that will be used for SEO and other purposes.
diff --git a/exampleSite/layouts/partials/home/custom.html b/exampleSite/layouts/partials/home/custom.html
index b301686a..960ff02e 100644
--- a/exampleSite/layouts/partials/home/custom.html
+++ b/exampleSite/layouts/partials/home/custom.html
@@ -1,27 +1,8 @@
+{{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
 
    
   {{ partial "partials/home/page.html" . }}
 
    
 
-
-
+
diff --git a/exampleSite/static/img/author.jpg b/exampleSite/static/img/author.jpg
deleted file mode 100644
index 820e8822..00000000
Binary files a/exampleSite/static/img/author.jpg and /dev/null differ
diff --git a/i18n/de.yaml b/i18n/de.yaml
index 9faf2701..e9a2dd53 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -1,12 +1,14 @@
 article:
   anchor_label: "Anker"
+  date: "{{ .Date }}"
+  # date_updated: "Updated: {{ .Date }}"
   draft: "Entwurf"
   edit_title: "Inhalt bearbeiten"
   reading_time:
     one: "{{ .Count }} min"
     other: "{{ .Count }} min"
   reading_time_title: "Lesezeit"
-  # updated: "Updated"
+  # table_of_contents: "Table of Contents"
   # word_count:
   # one: "{{ .Count }} word"
   # other: "{{ .Count }} words"
@@ -14,6 +16,10 @@ article:
 author:
   byline_title: "Autor"
 
+# code:
+#   copy: "Copy"
+#   copied: "Copied"
+
 error:
   404_title: "Seite nicht gefunden :confused:"
   404_error: "Fehler 404"
@@ -28,6 +34,15 @@ list:
   externalurl_title: "Link zu einer externen Seite"
   no_articles: "Es gibt hier noch keine Beiträge."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
+# search:
+#   open_button_title: "Search (/)"
+#   close_button_title: "Close (Esc)"
+#   input_placeholder: "Search"
+
 sharing:
   email: "Per E-Mail teilen"
   facebook: "Auf Facebook teilen"
@@ -38,4 +53,3 @@ sharing:
 
 shortcode:
   recent_articles: "Kürzlich"
-  icon_none: "Icon nicht gefunden."
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 2decbca4..a2ec67a1 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1,12 +1,14 @@
 article:
   anchor_label: "Anchor"
+  date: "{{ .Date }}"
+  date_updated: "Updated: {{ .Date }}"
   draft: "Draft"
   edit_title: "Edit content"
   reading_time:
     one: "{{ .Count }} min"
     other: "{{ .Count }} mins"
   reading_time_title: "Reading time"
-  updated: "Updated"
+  table_of_contents: "Table of Contents"
   word_count:
     one: "{{ .Count }} word"
     other: "{{ .Count }} words"
@@ -14,6 +16,10 @@ article:
 author:
   byline_title: "Author"
 
+code:
+  copy: "Copy"
+  copied: "Copied"
+
 error:
   404_title: "Page Not Found :confused:"
   404_error: "Error 404"
@@ -28,6 +34,15 @@ list:
   externalurl_title: "Link to external site"
   no_articles: "There's no articles to list here yet."
 
+nav:
+  scroll_to_top_title: "Scroll to top"
+  skip_to_main: "Skip to main content"
+
+search:
+  open_button_title: "Search (/)"
+  close_button_title: "Close (Esc)"
+  input_placeholder: "Search"
+
 sharing:
   email: "Send via email"
   facebook: "Share on Facebook"
@@ -38,4 +53,3 @@ sharing:
 
 shortcode:
   recent_articles: "Recent"
-  icon_none: "Icon not found."
diff --git a/i18n/es.yaml b/i18n/es.yaml
index a38db533..8ff30397 100644
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@@ -1,12 +1,14 @@
 article:
   anchor_label: "Ancla"
+  date: "{{ .Date }}"
+  date_updated: "Actualizado: {{ .Date }}"
   draft: "Borrador"
   edit_title: "Editar contenido"
   reading_time:
     one: "{{ .Count }} min"
     other: "{{ .Count }} mins"
   reading_time_title: "Tiempo de lectura"
-  updated: "Actualizado"
+  # table_of_contents: "Table of Contents"
   word_count:
     one: "{{ .Count }} palabra"
     other: "{{ .Count }} palabras"
@@ -14,6 +16,10 @@ article:
 author:
   byline_title: "Autor"
 
+# code:
+#   copy: "Copy"
+#   copied: "Copied"
+
 error:
   404_title: "Página no encontrada :confused:"
   404_error: "Error 404"
@@ -28,6 +34,15 @@ list:
   externalurl_title: "Link a página externa"
   no_articles: "Aún no hay artículos para listar aquí."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
+# search:
+#   open_button_title: "Search (/)"
+#   close_button_title: "Close (Esc)"
+#   input_placeholder: "Search"
+
 sharing:
   email: "Enviar vía email"
   facebook: "Compartir en Facebook"
@@ -38,4 +53,3 @@ sharing:
 
 shortcode:
   recent_articles: "Reciente"
-  icon_none: "Icono no encontrado."
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index e0ab669e..4c1e73e8 100644
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -1,12 +1,14 @@
 article:
   anchor_label: "Ancre"
+  date: "{{ .Date }}"
+  # date_updated: "Updated: {{ .Date }}"
   draft: "Brouillon"
   edit_title: "Editer"
   reading_time:
     one: "{{ .Count }} min"
     other: "{{ .Count }} mins"
   reading_time_title: "Temps de lecture"
-  # updated: "Updated"
+  # table_of_contents: "Table of Contents"
   # word_count:
   # one: "{{ .Count }} word"
   # other: "{{ .Count }} words"
@@ -14,6 +16,10 @@ article:
 author:
   byline_title: "Auteur"
 
+# code:
+#   copy: "Copy"
+#   copied: "Copied"
+
 error:
   404_title: "Cette page n'existe pas :confused:"
   404_error: "Erreur 404"
@@ -28,6 +34,15 @@ list:
   externalurl_title: "Lien d'article externe."
   no_articles: "Il n'y a pas encore d'articles ici."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
+# search:
+#   open_button_title: "Search (/)"
+#   close_button_title: "Close (Esc)"
+#   input_placeholder: "Search"
+
 sharing:
   email: "Envoyer par email"
   facebook: "Poster sur Facebook"
@@ -38,4 +53,3 @@ sharing:
 
 shortcode:
   recent_articles: "Recent"
-  icon_none: "Icone non trouvée."
diff --git a/i18n/pt-BR.yaml b/i18n/pt-BR.yaml
index 651182f1..f9cc48b4 100644
--- a/i18n/pt-BR.yaml
+++ b/i18n/pt-BR.yaml
@@ -1,12 +1,14 @@
 article:
   anchor_label: "Anchor"
+  date: "{{ .Date }}"
+  # date_updated: "Updated: {{ .Date }}"
   draft: "Draft"
   edit_title: "Editar Conteúdo"
   reading_time:
     one: "{{ .Count }} minuto"
     other: "{{ .Count }} minutos"
   reading_time_title: "Tempo de leitura"
-  # updated: "Updated"
+  # table_of_contents: "Table of Contents"
   # word_count:
   # one: "{{ .Count }} word"
   # other: "{{ .Count }} words"
@@ -14,6 +16,10 @@ article:
 author:
   byline_title: "Autor"
 
+# code:
+#   copy: "Copy"
+#   copied: "Copied"
+
 error:
   404_title: "Página não econtrada :confused:"
   404_error: "Erro 404"
@@ -28,6 +34,15 @@ list:
   externalurl_title: "Link para site externo"
   no_articles: "Não tem artigos para lista aqui ainda."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
+# search:
+#   open_button_title: "Search (/)"
+#   close_button_title: "Close (Esc)"
+#   input_placeholder: "Search"
+
 sharing:
   email: "Enviar por email"
   facebook: "Compartilhar pelo Facebook"
@@ -38,4 +53,3 @@ sharing:
 
 shortcode:
   recent_articles: "Recente"
-  icon_none: "Ícone não encontrado."
diff --git a/i18n/tr.yaml b/i18n/tr.yaml
index e6c4f51d..cdbcf844 100644
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@@ -1,12 +1,13 @@
 article:
   anchor_label: "Anchor"
+  date: "{{ .Date }}"
+  # date_updated: "Updated: {{ .Date }}"
   draft: "Taslak"
   edit_title: "İçeriği düzenle"
   reading_time:
     one: "{{ .Count }} dk"
     other: "{{ .Count }} dk"
   reading_time_title: "Okuma süresi"
-  # updated: "Updated"
   word_count:
     one: "{{ .Count }} kelime"
     other: "{{ .Count }} kelime"
@@ -14,6 +15,10 @@ article:
 author:
   byline_title: "Yazar"
 
+# code:
+#   copy: "Copy"
+#   copied: "Copied"
+
 error:
   404_title: "Sayfa Bulunamadı :confused:"
   404_error: "Hata 404"
@@ -28,6 +33,15 @@ list:
   externalurl_title: "Harici siteye bağlantı"
   no_articles: "Henüz burada listelenecek bir makale yok."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
+# search:
+#   open_button_title: "Search (/)"
+#   close_button_title: "Close (Esc)"
+#   input_placeholder: "Search"
+
 sharing:
   email: "Email ile gönder"
   facebook: "Facebook'ta paylaş"
diff --git a/i18n/zh.yaml b/i18n/zh.yaml
index 1cd3616f..f72e3690 100644
--- a/i18n/zh.yaml
+++ b/i18n/zh.yaml
@@ -1,11 +1,13 @@
 article:
   anchor_label: "锚点"
+  date: "{{ .Date }}"
+  # date_updated: "Updated: {{ .Date }}"
   draft: "草稿"
   edit_title: "编辑内容"
   reading_time:
     other: "{{ .Count }} 分钟"
   reading_time_title: "预计阅读"
-  # updated: "Updated"
+  # table_of_contents: "Table of Contents"
   word_count:
     one: "{{ .Count }} 字"
     other: "{{ .Count }} 字"
@@ -13,6 +15,10 @@ article:
 author:
   byline_title: "作者"
 
+# code:
+#   copy: "Copy"
+#   copied: "Copied"
+
 error:
   404_title: "找不到网页 :confused:"
   404_error: "404 错误"
@@ -27,6 +33,15 @@ list:
   externalurl_title: "链接到外部网站"
   no_articles: "这里还没有任何文章可以列出。"
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
+# search:
+#   open_button_title: "Search (/)"
+#   close_button_title: "Close (Esc)"
+#   input_placeholder: "Search"
+
 sharing:
   email: "通过电子邮件发送"
   facebook: "分享到 Facebook"
@@ -37,4 +52,3 @@ sharing:
 
 shortcode:
   recent_articles: "最近的文章"
-  icon_none: "未找到图标。"
diff --git a/layouts/404.html b/layouts/404.html
index d53b38f6..e73c98ce 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -3,7 +3,7 @@
   
    
     {{ i18n "error.404_error" | emojify }}
   
    
-  
    
+  
    
     
    {{ i18n "error.404_description" | emojify }}
    
   
    
 {{ end }}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 7415d617..7ebc0452 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1 +1 @@
-{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}#{{ end }}
+{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}#{{ end }}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 00000000..6c01a4b4
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,19 @@
+{{ $altText := .Text }}
+{{ $caption := .Title }}
+{{ with $.Page.Resources.GetMatch (.Destination) }}
+  
    
+    {{ $altText }}
+    
    {{ $caption | markdownify }}
    
+  
    
+{{ else }}
+  {{ errorf `[CONGO] Markdown image error in "%s": Resource "%s" not found. Check the path is correct or remove the image from the content.` .Page.Path .Destination }}
+{{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a5b0efa9..03904401 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,14 +1,52 @@
 
 
   {{- partial "head.html" . -}}
   
+    
     {{- partial "header.html" . -}}
-    
    {{- block "main" . }}{{- end }}
    
+    
    
+      {{- block "main" . }}{{- end }}
+      {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }}
+        
    
+          
+            ↑
+          
+        
    
+      {{ 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..789b95c5
--- /dev/null
+++ b/layouts/_default/index.json
@@ -0,0 +1,6 @@
+{{- $index := slice -}}
+{{- range .Site.RegularPages -}}
+  {{ $section := .Site.GetPage "section" .Section }}
+  {{- $index = $index | append (dict "date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long")) "title" .Title "section" $section.Title "summary" .Summary "content" (.Plain | safeJS) "permalink" .RelPermalink) -}}
+{{- end -}}
+{{- $index | jsonify -}}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 76388cc3..5c14b706 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,5 +1,29 @@
 {{ define "main" }}
-  {{ partial "section-header.html" . }}
+  {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "
+    {{ if .Site.Params.list.showBreadcrumbs | default false }}
+      {{ partial "breadcrumbs.html" . }}
+    {{ end }}
+    
    {{ .Title }}
    
+  
+  
    
+    {{ if $toc }}
+      
    
+        
    
+          {{ partial "toc.html" . }}
+        
    
+      
    
+    {{ end }}
+    
    
+      {{ .Content | emojify }}
+    
    
+  
    
   {{ if gt .Pages 0 }}
     
    
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
@@ -16,7 +40,7 @@
     
    
     {{ partial "pagination.html" . }}
   {{ else }}
-    
    
+    
    
       
    
         {{ i18n "list.no_articles" | emojify }}
       
    
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b6a2cbf2..03e9a9ef 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
-  
    
-    
    
+  
    
+    
    
       {{ if .Site.Params.article.showBreadcrumbs | default false }}
         {{ partial "breadcrumbs.html" . }}
       {{ end }}
@@ -11,10 +11,19 @@
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       
    
     
-    
    
-      {{ .Content | emojify }}
+    
    
+      {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "
+          
    
+            {{ partial "toc.html" . }}
+          
    
+        
+      {{ end }}
+      
    
+        {{ .Content | emojify }}
+      
    
     
    
-