From b3762c20e6ba1d0961f598062d422f0a097ceecd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9amus=20O=27Sullivan?= <seamus.osullivan@psych.ox.ac.uk> Date: Fri, 10 Jan 2025 21:07:19 +0000 Subject: [PATCH] Remove JTD documentation. Remove old markdown files, left over from just-the-docs's documentation. --- CHANGELOG.md | 1239 ------------------------ MIGRATION.md | 403 -------- docs/configuration.md | 321 ------ docs/customization.md | 398 -------- docs/minimal-test.md | 9 - docs/navigation-structure.md | 317 ------ docs/ui-components/buttons.md | 98 -- docs/ui-components/callouts 2.md | 162 ---- docs/ui-components/callouts.md | 162 ---- docs/ui-components/code 2.md | 175 ---- docs/ui-components/code.md | 175 ---- docs/ui-components/line-nos.md | 127 --- docs/ui-components/typography.md | 115 --- docs/utilities/color.md | 83 -- docs/utilities/layout.md | 128 --- docs/utilities/responsive-modifiers.md | 19 - docs/utilities/typography.md | 157 --- docs/utilities/utilities.md | 14 - 18 files changed, 4102 deletions(-) delete mode 100644 CHANGELOG.md delete mode 100644 MIGRATION.md delete mode 100644 docs/configuration.md delete mode 100644 docs/customization.md delete mode 100644 docs/minimal-test.md delete mode 100644 docs/navigation-structure.md delete mode 100644 docs/ui-components/buttons.md delete mode 100644 docs/ui-components/callouts 2.md delete mode 100644 docs/ui-components/callouts.md delete mode 100644 docs/ui-components/code 2.md delete mode 100644 docs/ui-components/code.md delete mode 100644 docs/ui-components/line-nos.md delete mode 100644 docs/ui-components/typography.md delete mode 100644 docs/utilities/color.md delete mode 100644 docs/utilities/layout.md delete mode 100644 docs/utilities/responsive-modifiers.md delete mode 100644 docs/utilities/typography.md delete mode 100644 docs/utilities/utilities.md diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 687314b1..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,1239 +0,0 @@ ---- -title: CHANGELOG -layout: default -nav_exclude: true ---- - -# CHANGELOG - -All notable user-facing changes to this project are documented in this file. - -{: .highlight } -The project underwent a major maintenance shift in March 2022. - -## HEAD - -{: .note } -This website is built from the `HEAD` of the `main` branch of the theme repository. - -{: .warning } -This website includes docs for some new features that are not available in `v0.4.0`! - -Changes to `main` that are *not* in the latest release: - -- n/a - -## Release v0.4.0 - -We're so excited to release Just the Docs `v0.4.0`. This release has been almost a year in the making - after our new maintenance team has taken over the project, we've added two years of backlogged features and bugfixes to modernize the theme. This CHANGELOG will summarize some of the key changes, discuss migrations strategies, and outline broad future plans for this theme. - -### Brief Overview - Highlighted Changes - -`v0.4.0` contains many new features and bugfixes. We enumerate all of them in further sections in this changelog; however, we'd like to call out some of the most-requested changes: - -- better support for dark theme: dark highlighting, search input color -- [callouts](https://just-the-docs.github.io/just-the-docs/docs/ui-components/callouts/), a new design component to highlight content -- [configuring mermaid.js](https://just-the-docs.github.io/just-the-docs/docs/ui-components/code/#mermaid-diagram-code-blocks), a markdown-native diagram visualization library -- [copy code button](https://just-the-docs.github.io/just-the-docs/docs/ui-components/code/#copy-button) for code snippets -- [external navigation links](https://just-the-docs.github.io/just-the-docs/docs/navigation-structure/#external-navigation-links) -- major improvements to nav generation efficiency and robustness -- minor improvements to built-in accessibility (SVG icons, nav titles, skip to main content) -- [modularized site components](https://just-the-docs.github.io/just-the-docs/docs/customization/#custom-layouts-and-includes) (advanced feature) -- [new custom includes](https://just-the-docs.github.io/just-the-docs/docs/customization/#override-includes): table of contents heading, navigation panel footer, search placeholder, lunr search indices -- bugfixes involving WEBrick and Ruby 3, Liquid processing in CSS comments, nested task lists, relative URLs, scroll navigation, corrupted search data from rake, breadcrumbs, and more! -- more documentation for [custom includes](https://just-the-docs.github.io/just-the-docs/docs/customization/#override-includes), this changelog, and the [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/) - -*After usage instructions and the roadmap, we enumerate all changes from `v0.3.3`.* - -### Using Release `v0.4.0` - -Unlike pre-releases, `v0.4.0` is a new semver minor release for the theme. That means that users who have not pinned the theme version will be **automatically upgraded to `v0.4.0` the next time they build their site**. - -To use this release explicitly as a remote theme: - -```yml -remote_theme: just-the-docs/just-the-docs@v0.4.0 -``` - -To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`: - -```ruby -gem "just-the-docs", "0.4.0" -``` - -If you would prefer to not upgrade, you can enforce that explicitly: - -1. pin your gem version in your `Gemfile`, like so -```ruby -gem "just-the-docs", "0.3.3" -``` -2. freeze the `remote_theme`, like so -```yml -remote_theme: just-the-docs/just-the-docs@v0.3.3 -``` - -### Migration Guide and Strategies - -We've developed a new [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/) for users to migrate from version `v0.3.3` to `v0.4.0`. It outlines major changes in project maintenance (e.g. new repository link, team) as well as breaking changes that may break your site (and potential solutions). We suggest that all users refer to the guide before manually upgrading their site. - -**For the vast majority of users, we do not anticipate that this will be a breaking change.** The major touch points are surrounding new includes, navigation (ordering, pages, and collections), the favicon, and a shift to relative URLs. However, users who heavily customize the theme (primarily by overriding includes) will likely have to make minor changes. - -Given the length of features added in this release, users may want to incrementally upgrade through the pre-releases. To follow this approach, read this changelog from `v0.4.0.rc1` to `v0.4.0.rc5`; this breaks down the release into small chunks, each of which should be easier to upgrade. `v0.4.0.rc5` is identical to this release. - -For support with migrating to `v0.4.0`, [open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) and let us know! - -### Roadmap (What's Next?) - -Moving forward, we plan to release more frequently with smaller, bite-sized changes. This should make it easier for users to upgrade in the future! - -Broadly, many features are still on the radar. We anticipate the rest of `v0.4.x` to be bugfixes surrounding this new release. - -For version `v0.5`, our roadmap includes: - -- a theme toggle (light/dark mode), with automatic theme switching based on browser preferences -- better GDPR compliance for analytics -- multi-level/recursive navigation (unlimited hierarchy of child pages) - -In future versions, we also plan on: - -- adding better dark theme defaults -- adding better internationalization support -- exploring offline PDF generation -- improving accessibility within the theme -- improving search functionality -- refactoring and improving the robustness of our codebase - -Have ideas for what's next, or want to get involved? [Open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) and let us know! We're looking for more contributors and maintainers to help us develop the theme. - -### New Features - -- Added: Combination by [@pdmosses] in [#578] - - Added: dark highlighting in [#463] - - Added: pages and collections in [#448] - - Added: callouts in [#466] - - Fixed: breadcrumb behaviour … by [@AdityaTiwari2102] in [#477] - - Fixed: prevent rake command corrupting search data in [#495] (also listed below) - - Fixed: nested lists in [#496] - - Fixed: set color for search input in [#498] (also listed below) - - Fixed: sites with no child pages (no PR) - - Fixed: TOC/breadcrumbs for multiple collections in [#494] - - Added: collection configuration option `nav_fold` (no PR) - - Fixed: indentation and color for folded collection navigation (no PR) - - Fixed: scroll navigation to show the link to the current page in [#639] - - Fixed: Replace all uses of `absolute_url` by `relative_url`, by [@svrooij] in [#544] -- Added: custom favicon `_includes` by [@burner1024] in [#364] -- Added: set color for search input by [@pdmosses] in [#498] -- Added: search placeholder configuration by [@mattxwang] in [#613] -- Added: 'child_nav_order' front matter to be able to sort navigation pages in reverse by [@jmertic] in [#726] -- Added: `nav_footer_custom` include by [@nathanjessen] in [#474] -- Added: style fixes for jekyll-asciidoc by [@alyssais] in [#829] -- Added: mermaid.js support by [@nascosto] in [#857] -- Added: support for external navigation links by [@SPGoding] in [#876] -- Added: refactor `mermaid` config to use `mermaid_config.js` include, only require `mermaid.version` in `_config.yml` by [@mattxwang] in [#909] -- Added: accessible titles to nested page nav toggle by [@JPrevost] in [#950] -- Added: better title styling for AsciiDoc examples by [@alyssais] in [#944] -- Added: docs for custom search placeholder by [@mattxwang] in [#939] -- Added: provide ability to skip to main content by [@JPrevost] in [#949] -- Added: styling for `<blockquote>` by [@mattxwang] in [#965] -- Added: custom include for TOC heading by [@pdmosses] in [#980] -- Added: experimental nav optimization for simple cases by [@pdmosses] in [#992] -- Added: support multiple Google Analytics tracking IDs, document UA -> GA4 switch by [@MichelleBlanchette] in [#1029] -- Added: copy code button to code snippets by [@simonebortolin] in [#945] -- Added: restore simple configuration of `favicon.ico` via `site.static_files` by [@pdmosses] in [#1095] -- Added: modularize site components by [@mattxwang] in [#1058] -- Added: includes for custom `lunr` Liquid and JS code by [@diablodale] in [#1068] -- Added: new `_sass/custom/setup.scss` for variable definition by [@mattxwang] in [#1135] -- Added: configuration key to load a local version of mermaid by [@fabrik42] in [#1153] - -### Bugfixes - -- Fixed: prepend `site.collections_dir` if exists by [@alexsegura] in [#519] -- Fixed: nested task lists (#517) by [@pdmosses] in [#855] -- Fixed: suppress Liquid processing in CSS comments by [@pdmosses] in [#686] -- Fixed: prevent rake command from corrupting search data by [@pdmosses] in [#495] -- Fixed: anchor heading links should be visible on focus by [@jacobhq] in [#846] -- Fixed: add `overflow-x: auto` to `figure.highlight` by [@iridazzle] in [#727] -- Fixed: add `overflow-wrap: word-break` to `body` by [@iridazzle] in [#889] -- Fixed: vertical alignment for consecutive labels by [@Eisverygoodletter] in [#893] -- Fixed: allow links to wrap by [@pdmosses] in [#905] -- Fixed: nav scroll feature and absolute/relative URLs by [@pdmosses] in [#898] -- Fixed: exclude `vendor/` in Jekyll config by [@manuelhenke] in [#941] -- Fixed: improve build time of navigation panel by [@pdmosses] in [#956] -- Fixed: spacing issue when search is disabled by [@henryiii] in [#960] -- Fixed: active grandchild link class by [@pdmosses] in [#962] -- Fixed: HTML validation issues (W3C validator) by [@mattxwang] in [#964] -- Fixed: link styling now uses `text-decoration` values by [@mattxwang] in [#967] -- Fixed: cleaning up Jekyll excludes by [@pdmosses] in [#985] -- Fixed: docs, narrow styling for code highlighting with line numbers by [@pdmosses] in [#974] -- Fixed: default syntax highlighting in custom color schemes [@pdmosses] in [#986] -- Fixed: incorrect disambiguation in generated TOCs by [@pdmosses] in [#999] -- Fixed: duplicated external links in collections by [@pdmosses] in [#1001] -- Fixed: import order of `custom.scss`; puts at end by [@deseo] in [#1010] -- Fixed: top-level active link styling by [@pdmosses] in [#1015] -- Fixed: external links for sites with no pages by [@pdmosses] in [#1021] -- Fixed: duplicate `title` if `jekyll-seo-tag` not in users's plugins by [@Tom-Brouwer] in [#1040] -- Fixed: removes (duplicate) `favicon.html`, shifts content to `head_custom.html` by [@mattxwang] in [#1027] -- Fixed: add `reversed`, deprecate `desc` for nav `child_nav_order` by [@jmertic] in [#1061] -- Fixed: `child.child_nav_order` to `node.child_nav_order` by [@mattxwang] in [#1065] -- Fixed: remove all uses of `/` as SASS division by [@mattxwang] in [#1074] - - note: this was originally merged as [#1074] with a bug; it was reverted in [#1076], and then reimplemented in [#1077] -- Fixed: skip nav collection generation when site has no pages by [@pdmosses] in [#1092] -- Fixed: standardize SCSS with `declaration-block-no-redundant-longhand-properties` by [@simonebortolin] in [#1102] -- Fixed: incorrect `padding` property value pair in `labels.scss` by [@SConaway] in [#1104] -- Fixed: various bugs with copy code button by [@simonebortolin] in [#1096] -- Fixed: replace inline styling for `<svg>` icons by [@captn3m0] in [#1110] -- Fixed: incorrect `padding` property value pair in `search.scss` by [@kevinlin1] in [#1123] -- Fixed: minor spacing and comment nits by [@EricFromCanada] in [#1128] -- Fixed: exclude images from being bundled with gem by [@m-r-mccormick] in [#1142] -- Fixed: dark theme code block background, line number colors by [@m-r-mccormick] in [#1124] -- Fixed: copy code button interaction with kramdown line numbers by [@mattxwang] in [#1143] - -### Maintenance - -- Added: VScode devcontainer by [@max06] in [#783] -- Added: `webrick` to `Gemfile` by [@mattxwang] in [#799] -- Added: 'This site is powered by Netlify.' to the footer by [@mattxwang] in [#797] -- Updated: new repo path by [@pmarsceill] in [#775] -- Updated: rename `master` -> `main` by [@pmarsceill] in [#776] -- Updated: README by [@pmarsceill] in [#777] -- Updated: Code of Conduct to Contributor Covenant v2.1 by [@mattxwang] in [#790] -- Updated: CI files, Ruby & Node Versions by [@mattxwang] in [#820] -- Updated: Stylelint to v14, extend SCSS plugins, remove primer-* configs, resolve issues by [@mattxwang] in [#821] -- Deleted: unused script directory by [@mattxwang] in [#937] -- Vendor: update `jekyll-anchor-headings`, `lunr.js` by [@mattxwang] in [#1071] - -### Documentation - -- Added: docs on how to break an `ol` by [@pdmosses] in [#856] -- Added: docs for custom includes by [@nathanjessen] in [#806] -- Added: document caveat about variable dependencies by [@waldyrious] in [#555] -- Added: docs on how to use `custom_head` to add a custom favicon by [@UnclassedPenguin] in [#814] -- Added: docs load mermaid.js by default by [@mattxwang] in [#935] -- Added: warning about mandatory `_`-prefix for collections by [@max06] in [#1091] -- Added: migration guide by [@pdmosses] in [#1059] -- Added: label new features introduced in `v0.4` by [@mattxwang] in [#1138] -- Fixed: `ol` on `index.md` by [@pmarsceill] in [#778] -- Fixed: image link in Markdown kitchen sink by [@JeffGuKang] in [#221] -- Fixed: images in Markdown kitchen sink by [@dougaitken] in [#782] -- Fixed: clearer label of link to Jekyll quickstart by [@waldyrious] in [#549] -- Fixed: remove extra spaces in component docs by [@MichelleBlanchette] in [#554] -- Fixed: double "your" typo in `index.md` by [@sehilyi] in [#499] -- Fixed: "you" -> "your" typo in `index.md` by [@nathanjessen] in [#473] -- Fixed: spacing in toc example by [@henryiii] in [#835] -- Fixed: typo in `README` on `_config.yml` by [@ivanskodje] in [#891] -- Fixed: missing code fence in navigation structure docs by [@mattxwang] in [#906] -- Fixed: table of contents on search docs by [@robinpokorny] in [#940] -- Fixed: broken docs link (custom footer) by [@olgarithms] in [#951] -- Fixed: clarify version docs by [@pdmosses] in [#955] -- Fixed: typo in changelog links [@koppor] in [#1000] -- Fixed: two bugs in "Customization" (custom favicon, new annotation) by [@mattxwang] in [#1090] -- Fixed: "View Typography Utilities" link by [@agabrys] in [#1130] -- Fixed: broken relative page links by [@mattxwang] in [#1106] -- Fixed: clarify steps to add custom `lunr` index code by [@diablodale] in [#1139] -- Updated: homepage (focus: new features, conciseness, deduplication) by [@pdmosses] in [#1018] -- Updated: README (focus: new features, conciseness, deduplication) by [@pdmosses] in [#1019] -- Updated: `README` demo video by [@codewithfan] in [#1097] - -### New Contributors - -- [@AdityaTiwari2102] made their first contribution in [#477] -- [@svrooij] made their first contribution in [#544] -- [@alexsegura] made their first contribution in [#519] -- [@burner1024] made their first contribution in [#364] -- [@JeffGuKang] made their first contribution in [#221] -- [@dougaitken] made their first contribution in [#782] -- [@max06] made their first contribution in [#783] -- [@sehilyi] made their first contribution in [#499] -- [@nathanjessen] made their first contribution in [#473] -- [@waldyrious] made their first contribution in [#549] -- [@MichelleBlanchette] made their first contribution in [#554] -- [@henryiii] made their first contribution in [#835] -- [@jmertic] made their first contribution in [#726] -- [@jacobhq] made their first contribution in [#846] -- [@UnclassedPenguin] made their first contribution in [#814] -- [@alyssais] made their first contribution in [#829] -- [@nascosto] made their first contribution in [#857] -- [@SPGoding] made their first contribution in [#876] -- [@iridazzle] made their first contribution in [#727] -- [@ivanskodje] made their first contribution in [#891] -- [@Eisverygoodletter] made their first contribution in [#893] -- [@robinpokorny] made their first contribution in [#940] -- [@olgarithms] made their first contribution in [#951] -- [@manuelhenke] made their first contribution in [#941] -- [@JPrevost] made their first contribution in [#950] -- [@koppor] made their first contribution in [#1000] -- [@deseo] made their first contribution in [#1010] -- [@Tom-Brouwer] made their first contribution in [#1040] -- [@simonebortolin] made their first contribution in [#945] -- [@SConaway] made their first contribution in [#1104] -- [@captn3m0] made their first contribution in [#1110] -- [@kevinlin1] made their first contribution in [#1123] -- [@codewithfan] made their first contribution in [#1097] -- [@agabrys] made their first contribution in [#1130] -- [@diablodale] made their first contribution in [#1068] -- [@m-r-mccormick] made their first contribution in [#1142] -- [@fabrik42] made their first contribution in [#1153] - -## Pre-release v0.4.0.rc5 - -Hi everyone, we're so excited to finally release `v0.4.0`! For posterity's sake, we're going to release `v0.4.0.rc5` and then immediately re-release it as `v0.4.0`; this should make it more clear what changes were introduced in the lead up to the minor release. - -This RC does not introduce any major user-facing features. It adds more customizability for custom SCSS variables (fixing a bug with callout introduction order), `lunr` indexing, and loading `mermaid` locally. In addition, it fixes bugs introduced in `.rc4`: incorrect CSS, inconsistencies with code block backgrounds in dark theme, and the copy code button. It also adds a migration guide for users coming from `v0.3.3`. - -### Trying out pre-release `v0.4.0.rc5` - -Simlar to the prior release, `v0.4.0.rc5` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` following immediately after. While we don't anticipate many users using this RC, it is still possible to opt-in. - -To use this RC explicitly as a remote theme: - -```yml -remote_theme: just-the-docs/just-the-docs@v0.4.0.rc5 -``` - -To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`: - -```ruby -gem "just-the-docs", "0.4.0.rc5" -``` - -By default, **users will not be upgraded to `0.4.0.rc5`**. To enforce that explicitly, either: - -1. pin your gem version in your `Gemfile`, like so -```ruby -gem "just-the-docs", "0.3.3" -``` -2. freeze the `remote_theme`, like so -```yml -remote_theme: just-the-docs/just-the-docs@v0.3.3 -``` - -### New Features - -- Added: includes for custom `lunr` Liquid and JS code by [@diablodale] in [#1068] -- Added: new `_sass/custom/setup.scss` for variable definition by [@mattxwang] in [#1135] -- Added: configuration key to load a local version of mermaid by [@fabrik42] in [#1153] - -### Bugfixes and Maintenance - -- Fixed: incorrect `padding` property value pair in `search.scss` by [@kevinlin1] in [#1123] -- Fixed: minor spacing and comment nits by [@EricFromCanada] in [#1128] -- Fixed: exclude images from being bundled with gem by [@m-r-mccormick] in [#1142] -- Fixed: dark theme code block background, line number colors by [@m-r-mccormick] in [#1124] -- Fixed: copy code button interaction with kramdown line numbers by [@mattxwang] in [#1143] - -### Docs - -- Docs: add a migration guide by [@pdmosses] in [#1059] -- Docs: update `README` demo video by [@codewithfan] in [#1097] -- Docs: update "View Typography Utilities" link by [@agabrys] in [#1130] -- Docs: fix broken relative page links by [@mattxwang] in [#1106] -- Docs: clarify steps to add custom `lunr` index code by [@diablodale] in [#1139] -- Docs: label new features introduced in `v0.4` by [@mattxwang] in [#1138] - -### New Contributors - -- [@kevinlin1] made their first contribution in [#1123] -- [@codewithfan] made their first contribution in [#1097] -- [@agabrys] made their first contribution in [#1130] -- [@diablodale] made their first contribution in [#1068] -- [@m-r-mccormick] made their first contribution in [#1142] -- [@fabrik42] made their first contribution in [#1153] - -[#1059]: https://github.com/just-the-docs/just-the-docs/pull/1059 -[#1068]: https://github.com/just-the-docs/just-the-docs/pull/1068 -[#1097]: https://github.com/just-the-docs/just-the-docs/pull/1097 -[#1106]: https://github.com/just-the-docs/just-the-docs/pull/1106 -[#1123]: https://github.com/just-the-docs/just-the-docs/pull/1123 -[#1124]: https://github.com/just-the-docs/just-the-docs/pull/1124 -[#1128]: https://github.com/just-the-docs/just-the-docs/pull/1128 -[#1130]: https://github.com/just-the-docs/just-the-docs/pull/1130 -[#1135]: https://github.com/just-the-docs/just-the-docs/pull/1135 -[#1138]: https://github.com/just-the-docs/just-the-docs/pull/1138 -[#1139]: https://github.com/just-the-docs/just-the-docs/pull/1139 -[#1142]: https://github.com/just-the-docs/just-the-docs/pull/1142 -[#1143]: https://github.com/just-the-docs/just-the-docs/pull/1143 -[#1153]: https://github.com/just-the-docs/just-the-docs/pull/1153 - -[@agabrys]: https://github.com/agabrys -[@codewithfan]: https://github.com/codewithfan -[@diablodale]: https://github.com/diablodale -[@fabrik42]: https://github.com/fabrik42 -[@kevinlin1]: https://github.com/kevinlin1 -[@EricFromCanada]: https://github.com/EricFromCanada -[@m-r-mccormick]: https://github.com/m-r-mccormick - -## Pre-release v0.4.0.rc4 - -Happy new year! We're celebrating with another pre-release, with features that should help theme users better adapt to changes moving forward. **We aim to re-release this as `v0.4.0`, with only few changes**. - -Notable new additions include: - -- modular site components, which split up the site into smaller reusable components; advanced theme users can then remix layouts quickly without duplication -- a "copy code" button to code blocks -- fixing bugs in generated TOCs and navigation from previous prereleases -- various cleanups of CSS and HTML markup - -The roadmap to `v0.4.0` is small. We are only looking to: - -- finish a migration guide, so users can easily upgrade from `v0.3.3` to `v0.4.0` -- fix one last bug relating to callouts and custom colors -- fix any new bugs introduced by this pre-release - -Have any questions, thoughts, or concerns? We'd love to hear from you! Please [open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) and let us know! - -### Trying out pre-release `v0.4.0.rc4` - -Simlar to the prior release, `v0.4.0.rc4` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc4`. - -To use this RC explicitly as a remote theme: - -```yml -remote_theme: just-the-docs/just-the-docs@v0.4.0.rc4 -``` - -To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`: - -```ruby -gem "just-the-docs", "0.4.0.rc4" -``` - -By default, **users will not be upgraded to `0.4.0.rc4`**. To enforce that explicitly, either: - -1. pin your gem version in your `Gemfile`, like so -```ruby -gem "just-the-docs", "0.3.3" -``` -2. freeze the `remote_theme`, like so -```yml -remote_theme: just-the-docs/just-the-docs@v0.3.3 -``` - -### New Features - -- Added: support multiple Google Analytics tracking IDs, document UA -> GA4 switch by [@MichelleBlanchette] in [#1029] -- Added: copy code button to code snippets by [@simonebortolin] in [#945] -- Added: restore simple configuration of `favicon.ico` via `site.static_files` by [@pdmosses] in [#1095] -- Added: modularize site components by [@mattxwang] in [#1058] - -### Bugfixes and Maintenance - -- Fixed: incorrect disambiguation in generated TOCs by [@pdmosses] in [#999] -- Fixed: duplicated external links in collections by [@pdmosses] in [#1001] -- Fixed: import order of `custom.scss`; puts at end by [@deseo] in [#1010] -- Fixed: top-level active link styling by [@pdmosses] in [#1015] -- Fixed: external links for sites with no pages by [@pdmosses] in [#1021] -- Fixed: duplicate `title` if `jekyll-seo-tag` not in users's plugins by [@Tom-Brouwer] in [#1040] -- Fixed: removes (duplicate) `favicon.html`, shifts content to `head_custom.html` by [@mattxwang] in [#1027] -- Fixed: add `reversed`, deprecate `desc` for nav `child_nav_order` by [@jmertic] in [#1061] -- Fixed: `child.child_nav_order` to `node.child_nav_order` by [@mattxwang] in [#1065] -- Fixed: remove all uses of `/` as SASS division by [@mattxwang] in [#1074] - - note: this was originally merged as [#1074] with a bug; it was reverted in [#1076], and then reimplemented in [#1077] -- Fixed: skip nav collection generation when site has no pages by [@pdmosses] in [#1092] -- Fixed: standardize SCSS with `declaration-block-no-redundant-longhand-properties` by [@simonebortolin] in [#1102] -- Fixed: incorrect `padding` property value pair in `labels.scss` by [@SConaway] in [#1104] -- Fixed: various bugs with copy code button by [@simonebortolin] in [#1096] -- Fixed: replace inline styling for `<svg>` icons by [@captn3m0] in [#1110] -- Vendor: update `jekyll-anchor-headings`, `lunr.js` by [@mattxwang] in [#1071] - -### Docs - -- Docs: fix typo in changelog links [@koppor] in [#1000] -- Docs: update homepage (focus: new features, conciseness, deduplication) by [@pdmosses] in [#1018] -- Docs: update README (focus: new features, conciseness, deduplication) by [@pdmosses] in [#1019] -- Docs: fix two bugs in "Customization" (custom favicon, new annotation) by [@mattxwang] in [#1090] -- Docs: Add warning about mandatory `_`-prefix for collections by [@max06] in [#1091] -- Docs: remove Google Analytics on main site by [@mattxwang] in [#1113] - -### New Contributors - -- [@koppor] made their first contribution in [#1000] -- [@deseo] made their first contribution in [#1010] -- [@Tom-Brouwer] made their first contribution in [#1040] -- [@simonebortolin] made their first contribution in [#945] -- [@SConaway] made their first contribution in [#1104] -- [@captn3m0] made their first contribution in [#1110] - -**Full Changelog**: https://github.com/just-the-docs/just-the-docs/compare/v0.4.0.rc3...v0.4.0.rc4 - -[#945]: https://github.com/just-the-docs/just-the-docs/pull/945 -[#999]: https://github.com/just-the-docs/just-the-docs/pull/999 -[#1000]: https://github.com/just-the-docs/just-the-docs/pull/1000 -[#1001]: https://github.com/just-the-docs/just-the-docs/pull/1001 -[#1010]: https://github.com/just-the-docs/just-the-docs/pull/1010 -[#1015]: https://github.com/just-the-docs/just-the-docs/pull/1015 -[#1018]: https://github.com/just-the-docs/just-the-docs/pull/1018 -[#1019]: https://github.com/just-the-docs/just-the-docs/pull/1019 -[#1021]: https://github.com/just-the-docs/just-the-docs/pull/1021 -[#1027]: https://github.com/just-the-docs/just-the-docs/pull/1027 -[#1029]: https://github.com/just-the-docs/just-the-docs/pull/1029 -[#1040]: https://github.com/just-the-docs/just-the-docs/pull/1040 -[#1058]: https://github.com/just-the-docs/just-the-docs/pull/1058 -[#1061]: https://github.com/just-the-docs/just-the-docs/pull/1061 -[#1065]: https://github.com/just-the-docs/just-the-docs/pull/1065 -[#1071]: https://github.com/just-the-docs/just-the-docs/pull/1071 -[#1074]: https://github.com/just-the-docs/just-the-docs/pull/1074 -[#1076]: https://github.com/just-the-docs/just-the-docs/pull/1076 -[#1077]: https://github.com/just-the-docs/just-the-docs/pull/1077 -[#1090]: https://github.com/just-the-docs/just-the-docs/pull/1090 -[#1091]: https://github.com/just-the-docs/just-the-docs/pull/1091 -[#1092]: https://github.com/just-the-docs/just-the-docs/pull/1092 -[#1095]: https://github.com/just-the-docs/just-the-docs/pull/1095 -[#1096]: https://github.com/just-the-docs/just-the-docs/pull/1096 -[#1102]: https://github.com/just-the-docs/just-the-docs/pull/1102 -[#1104]: https://github.com/just-the-docs/just-the-docs/pull/1104 -[#1110]: https://github.com/just-the-docs/just-the-docs/pull/1110 -[#1113]: https://github.com/just-the-docs/just-the-docs/pull/1113 - -[@captn3m0]: https://github.com/captn3m0 -[@deseo]: https://github.com/deseo -[@koppor]: https://github.com/koppor -[@MichelleBlanchette]: https://github.com/MichelleBlanchette -[@simonebortolin]: https://github.com/simonebortolin -[@SConaway]: https://github.com/SConaway -[@Tom-Brouwer]: https://github.com/Tom-Brouwer - -## Pre-release v0.4.0.rc3 - -Hi there! This is (actually) hopefully the last prerelease before `v0.4.0`; in particular, if we find that this prerelease is stable, we'll re-release it as `v0.4.0`. - -In general, this is a more mature pre-release; there are few new features. However, we'll highlight [@pdmosses]'s work in [#992] to better optimize nav generation for large sites (ex 100+ pages). We don't expect this to affect most users; however, **it is technically a breaking change**, and we suggest testing your site before upgrading to this prerelease. - -We want your feedback! Please [open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) and let us know! - -As soon as we get stable test results from major downstream users, we'll push out a `v0.4.0` ASAP - closing out almost 2 years of backlogged work! - -### Trying out pre-release `v0.4.0.rc3` - -Simlar to the prior release, `v0.4.0.rc3` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc3`. - -To use this RC explicitly as a remote theme: - -```yml -remote_theme: just-the-docs/just-the-docs@v0.4.0.rc3 -``` - -To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`: - -```ruby -gem "just-the-docs", "0.4.0.rc3" -``` - -By default, **users will not be upgraded to `0.4.0.rc3`**. To enforce that explicitly, either: - -1. pin your gem version in your `Gemfile`, like so -```ruby -gem "just-the-docs", "0.3.3" -``` -2. freeze the `remote_theme`, like so -```yml -remote_theme: just-the-docs/just-the-docs@v0.3.3 -``` - -### Features - -Broadly, this prerelease is feature-light! - -- Added: styling for `<blockquote>` by [@mattxwang] in [#965] -- Added: custom include for TOC heading by [@pdmosses] in [#980] - -### Bugfixes and Experimental Features - -*Note*: experimental nav optimization may be unstable. Please give us feedback! - -- Added: experimental nav optimization for simple cases by [@pdmosses] in [#992] -- Fixed: spacing issue when search is disabled by [@henryiii] in [#960] -- Fixed: active grandchild link class by [@pdmosses] in [#962] -- Fixed: HTML validation issues (W3C validator) by [@mattxwang] in [#964] -- Fixed: link styling now uses `text-decoration` values by [@mattxwang] in [#967] -- Fixed: cleaning up Jekyll excludes by [@pdmosses] in [#985] -- Fixed: docs, narrow styling for code highlighting with line numbers by [@pdmosses] in [#974] -- Fixed: default syntax highlighting in custom color schemes [@pdmosses] in [#986] - -[#965]: https://github.com/just-the-docs/just-the-docs/pull/965 -[#960]: https://github.com/just-the-docs/just-the-docs/pull/960 -[#962]: https://github.com/just-the-docs/just-the-docs/pull/962 -[#964]: https://github.com/just-the-docs/just-the-docs/pull/964 -[#967]: https://github.com/just-the-docs/just-the-docs/pull/967 -[#974]: https://github.com/just-the-docs/just-the-docs/pull/974 -[#980]: https://github.com/just-the-docs/just-the-docs/pull/980 -[#985]: https://github.com/just-the-docs/just-the-docs/pull/985 -[#986]: https://github.com/just-the-docs/just-the-docs/pull/986 -[#992]: https://github.com/just-the-docs/just-the-docs/pull/992 - -[@henryiii]: https://github.com/henryiii - -**Full Changelog**: https://github.com/just-the-docs/just-the-docs/compare/v0.4.0.rc2...v0.4.0.rc3 - -## Pre-release v0.4.0.rc2 - -{: .warning } -This website includes docs for some new features that are not available in `v0.4.0.rc1` and `v0.3.3`! - -Hey there! This is likely the last pre-release before releasing `v0.4.0`, which we plan on doing soon (i.e. before the end of the month) - very exciting! Some new additions to highlight: - -- significant improvement on build time of navigation panel by [@pdmosses] - - this is big: for a community member with over 300 pages, we shortened the build time from 3 minutes to 30 seconds! -- improved accessibility features led by [@JPrevost] -- more docs! - -The intention of this release candidate is to gather even more feedback on a potential `v0.4.0`. As it stands, we have not encountered any breaking changes with early adopters of `v0.4.0.rc1`. If you encounter any - for either of our pre-releases - please let us know! - -### Trying out pre-release `v0.4.0.rc2` - -Simlar to the prior release, `v0.4.0.rc2` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc2`. - -To use this RC explicitly as a remote theme: - -```yml -remote_theme: just-the-docs/just-the-docs@v0.4.0.rc2 -``` - -To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`: - -```ruby -gem "just-the-docs", "0.4.0.rc2" -``` - -By default, **users will not be upgraded to `0.4.0.rc2`**. To enforce that explicitly, either: - -1. pin your gem version in your `Gemfile`, like so -```ruby -gem "just-the-docs", "0.3.3" -``` -2. freeze the `remote_theme`, like so -```yml -remote_theme: just-the-docs/just-the-docs@v0.3.3 -``` - -### Features - -- Added: accessible titles to nested page nav toggle by [@JPrevost] in [#950] -- Added: better title styling for AsciiDoc examples by [@alyssais] in [#944] -- Added: docs for custom search placeholder by [@mattxwang] in [#939] -- Added: provide ability to skip to main content by [@JPrevost] in [#949] -- Fixed: exclude `vendor/` in Jekyll config by [@manuelhenke] in [#941] -- Fixed: improve build time of navigation panel by [@pdmosses] in [#956] - -[#950]: https://github.com/just-the-docs/just-the-docs/pull/950 -[#944]: https://github.com/just-the-docs/just-the-docs/pull/944 -[#939]: https://github.com/just-the-docs/just-the-docs/pull/939 -[#949]: https://github.com/just-the-docs/just-the-docs/pull/949 -[#941]: https://github.com/just-the-docs/just-the-docs/pull/941 -[#956]: https://github.com/just-the-docs/just-the-docs/pull/956 - -[@alyssais]: https://github.com/alyssais - -### Documentation and Maintenance - -- Added: docs load mermaid.js by default by [@mattxwang] in [#935] -- Fixed: table of contents on search docs by [@robinpokorny] in [#940] -- Fixed: broken docs link (custom footer) by [@olgarithms] in [#951] -- Fixed: clarify version docs by [@pdmosses] in [#955] -- Deleted: unused script directory by [@mattxwang] in [#937] - -[#935]: https://github.com/just-the-docs/just-the-docs/pull/935 -[#940]: https://github.com/just-the-docs/just-the-docs/pull/940 -[#951]: https://github.com/just-the-docs/just-the-docs/pull/951 -[#955]: https://github.com/just-the-docs/just-the-docs/pull/955 -[#937]: https://github.com/just-the-docs/just-the-docs/pull/937 - -### New Contributors - -* [@robinpokorny] made their first contribution in [#940] -* [@olgarithms] made their first contribution in [#951] -* [@manuelhenke] made their first contribution in [#941] -* [@JPrevost] made their first contribution in [#950] - -[@robinpokorny]: https://github.com/robinpokorny -[@olgarithms]: https://github.com/olgarithms -[@manuelhenke]: https://github.com/manuelhenke -[@JPrevost]: https://github.com/JPrevost - -## Pre-release v0.4.0.rc1 - -### We're back! - -Hi all! The Just the Docs team is excited to have our first pre-release in over two years! It is jam-packed with features and bugfixes that have been requested by the community since 2020. They include: - -- The new callouts component -- Allowing pages and collections to coexist on the navigation pane -- New styling: dark syntax highlighting, support for jekyll-asciidoc, word-wrapping instead of overflow for various elements -- More customization: external nav links, custom nav footers, favicon includes, search color and placeholder configuration, mermaid.js support, and nav sorting -- Over 20 bugfixes! Big ones include fixing the `rake` command, using `relative_url`, and search input color -- More documentation, especially on using custom includes -- Updating core dependencies to stable Ruby versions -- A WIP [template repository](https://github.com/just-the-docs/just-the-docs-template) that allows you to setup your own repository using Just the Docs and GitHub Pages with one click - give it a shot! More documentation, etc. is on the way! - -We want your feedback! Are these changes helpful? Are our docs easy to understand? Should new features like `mermaid` be opt-in or opt-out? Please [open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) and let us know! - -### Trying out pre-release `v0.4.0.rc1` - -Due to the massive scope of these changes, we're making `v0.4.0.rc1` avaialble as a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc1`. - -To use this RC explicitly as a remote theme: - -```yml -remote_theme: just-the-docs/just-the-docs@v0.4.0.rc1 -``` - -To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`: - -```ruby -gem "just-the-docs", "0.4.0.rc1" -``` - -### Staying on `v0.3.3` - -If you're not ready to make the switch, that's alright! If your version of just-the-docs is pinned to `v0.3.3` (i.e. by a `Gemfile.lock` or in `remote_theme`, then there's nothing you need to do. - -If you have not pinned your theme version, you should either: - -1. pin your gem version in your `Gemfile`, like so -```ruby -gem "just-the-docs", "0.3.3" -``` -2. freeze the `remote_theme`, like so -```yml -remote_theme: just-the-docs/just-the-docs@v0.3.3 -``` - -{: .warning } -Use of branches for closed PRs (e.g., [#466], [#578]) is now deprecated, as those branches have been (directly or indirectly) merged, and they may be deleted after the pre-release of `v0.4.0.rc1`. - -### Maintenance - -Internally, our maintainer team has expanded: [Patrick Marsceill][@pmarsceill], the original maintainer, has stepped down from an active role after almost 4 years! We're very thankful for the work that he's done to create and maintain one of the most popular Jekyll themes. Please join us in giving him thanks! - -The new core team currently consists of [@mattxwang], [@pdmosses], [@skullface], [@dougaitken], and [@max06]. Over the past six months, we've been triaging and merging in PRs, as well as contributing our own fixes. We'll continue to address open issues, merge in PRs from the community, and plan out the future of Just the Docs. If you'd like to contribute, now is a great time! - -[@mattxwang]: https://github.com/mattxwang -[@pdmosses]: https://github.com/pdmosses -[@skullface]: https://github.com/skullface -[@dougaitken]: https://github.com/dougaitken -[@max06]: https://github.com/max06 - -### Roadmap - -In the short-term, we're committed to tidying up everything for a `v0.4.0` release. This involves fixing bugs reported from the community in this pre-release, as well as continually merging in minor PRs. - -We're also scoping out medium and long-term projects, and want to keep you in the loop. These include: - -- upgrading to Jekyll 4, and stopping support for Jekyll 3 -- versioned docs - issue [#728] -- improved accessibility - issues [#566], [#870] -- internationalization (i18n) - issue [#59] -- recursive/multi-level navigation - PR [#462] -- toggleable dark mode - issue [#234] - -as well as DX improvements like better regression tests, CI, and tooling. If you're interested in any of these, please join us [on GitHub](https://github.com/just-the-docs/just-the-docs) - any contribution (raising an issue, writing docs, or submitting a PR) is welcome! - -[#728]: https://github.com/just-the-docs/just-the-docs/issues/728 -[#566]: https://github.com/just-the-docs/just-the-docs/issues/566 -[#870]: https://github.com/just-the-docs/just-the-docs/issues/870 -[#59]: https://github.com/just-the-docs/just-the-docs/issues/59 -[#462]: https://github.com/just-the-docs/just-the-docs/pull/462 -[#234]: https://github.com/just-the-docs/just-the-docs/issues/234 - -### Features - -* Added: Combination by [@pdmosses] in [#578] - - Added: dark highlighting in [#463] - - Added: pages and collections in [#448] - - Added: callouts in [#466] - - Fixed: breadcrumb behaviour … by [@AdityaTiwari2102] in [#477] - - Fixed: prevent rake command corrupting search data in [#495] (also listed below) - - Fixed: nested lists in [#496] - - Fixed: set color for search input in [#498] (also listed below) - - Fixed: sites with no child pages (no PR) - - Fixed: TOC/breadcrumbs for multiple collections in [#494] - - Added: collection configuration option `nav_fold` (no PR) - - Fixed: indentation and color for folded collection navigation (no PR) - - Fixed: scroll navigation to show the link to the current page in [#639] - - Fixed: Replace all uses of `absolute_url` by `relative_url`, by [@svrooij] in [#544] -* Added: custom favicon `_includes` by [@burner1024] in [#364] -* Added: set color for search input by [@pdmosses] in [#498] -* Added: search placeholder configuration by [@mattxwang] in [#613] -* Added: 'child_nav_order' front matter to be able to sort navigation pages in reverse by [@jmertic] in [#726] -* Added: `nav_footer_custom` include by [@nathanjessen] in [#474] -* Added: style fixes for jekyll-asciidoc by [@alyssais] in [#829] -* Added: mermaid.js support by [@nascosto] in [#857] -* Added: support for external navigation links by [@SPGoding] in [#876] -* Added: refactor `mermaid` config to use `mermaid_config.js` include, only require `mermaid.version` in `_config.yml` by [@mattxwang] in [#909] -* Fixed: prepend `site.collections_dir` if exists by [@alexsegura] in [#519] -* Fixed: nested task lists (#517) by [@pdmosses] in [#855] -* Fixed: suppress Liquid processing in CSS comments by [@pdmosses] in [#686] -* Fixed: prevent rake command from corrupting search data by [@pdmosses] in [#495] -* Fixed: anchor heading links should be visible on focus by [@jacobhq] in [#846] -* Fixed: add `overflow-x: auto` to `figure.highlight` by [@iridazzle] in [#727] -* Fixed: add `overflow-wrap: word-break` to `body` by [@iridazzle] in [#889] -* Fixed: vertical alignment for consecutive labels by [@Eisverygoodletter] in [#893] -* Fixed: allow links to wrap by [@pdmosses] in [#905] -* Fixed: nav scroll feature and absolute/relative URLs by [@pdmosses] in [#898] - -[#578]: https://github.com/just-the-docs/just-the-docs/pull/578 -[#463]: https://github.com/just-the-docs/just-the-docs/pull/463 -[#448]: https://github.com/just-the-docs/just-the-docs/pull/448 -[#466]: https://github.com/just-the-docs/just-the-docs/pull/466 -[#477]: https://github.com/just-the-docs/just-the-docs/pull/477 -[#495]: https://github.com/just-the-docs/just-the-docs/pull/495 -[#496]: https://github.com/just-the-docs/just-the-docs/pull/496 -[#498]: https://github.com/just-the-docs/just-the-docs/pull/498 -[#494]: https://github.com/just-the-docs/just-the-docs/pull/494 -[#639]: https://github.com/just-the-docs/just-the-docs/pull/639 -[#544]: https://github.com/just-the-docs/just-the-docs/pull/544 -[#364]: https://github.com/just-the-docs/just-the-docs/pull/364 -[#498]: https://github.com/just-the-docs/just-the-docs/pull/498 -[#613]: https://github.com/just-the-docs/just-the-docs/pull/613 -[#726]: https://github.com/just-the-docs/just-the-docs/pull/726 -[#474]: https://github.com/just-the-docs/just-the-docs/pull/474 -[#829]: https://github.com/just-the-docs/just-the-docs/pull/829 -[#857]: https://github.com/just-the-docs/just-the-docs/pull/857 -[#876]: https://github.com/just-the-docs/just-the-docs/pull/876 -[#909]: https://github.com/just-the-docs/just-the-docs/pull/909 -[#519]: https://github.com/just-the-docs/just-the-docs/pull/519 -[#855]: https://github.com/just-the-docs/just-the-docs/pull/855 -[#686]: https://github.com/just-the-docs/just-the-docs/pull/686 -[#495]: https://github.com/just-the-docs/just-the-docs/pull/495 -[#846]: https://github.com/just-the-docs/just-the-docs/pull/846 -[#727]: https://github.com/just-the-docs/just-the-docs/pull/727 -[#889]: https://github.com/just-the-docs/just-the-docs/pull/889 -[#893]: https://github.com/just-the-docs/just-the-docs/pull/893 -[#905]: https://github.com/just-the-docs/just-the-docs/pull/905 -[#898]: https://github.com/just-the-docs/just-the-docs/pull/898 - -### Documentation - -* Added: docs on how to break an `ol` by [@pdmosses] in [#856] -* Added: docs for custom includes by [@nathanjessen] in [#806] -* Added: document caveat about variable dependencies by [@waldyrious] in [#555] -* Added: docs on how to use `custom_head` to add a custom favicon by [@UnclassedPenguin] in [#814] -* Fixed: `ol` on `index.md` by [@pmarsceill] in [#778] -* Fixed: image link in Markdown kitchen sink by [@JeffGuKang] in [#221] -* Fixed: images in Markdown kitchen sink by [@dougaitken] in [#782] -* Fixed: clearer label of link to Jekyll quickstart by [@waldyrious] in [#549] -* Fixed: remove extra spaces in component docs by [@MichelleBlanchette] in [#554] -* Fixed: double "your" typo in `index.md` by [@sehilyi] in [#499] -* Fixed: "you" -> "your" typo in `index.md` by [@nathanjessen] in [#473] -* Fixed: spacing in toc example by [@henryiii] in [#835] -* Fixed: typo in `README` on `_config.yml` by [@ivanskodje] in [#891] -* Fixed: missing code fence in navigation structure docs by [@mattxwang] in [#906] - -[#856]: https://github.com/just-the-docs/just-the-docs/pull/856 -[#806]: https://github.com/just-the-docs/just-the-docs/pull/806 -[#555]: https://github.com/just-the-docs/just-the-docs/pull/555 -[#814]: https://github.com/just-the-docs/just-the-docs/pull/814 -[#778]: https://github.com/just-the-docs/just-the-docs/pull/778 -[#221]: https://github.com/just-the-docs/just-the-docs/pull/221 -[#782]: https://github.com/just-the-docs/just-the-docs/pull/782 -[#549]: https://github.com/just-the-docs/just-the-docs/pull/549 -[#554]: https://github.com/just-the-docs/just-the-docs/pull/554 -[#499]: https://github.com/just-the-docs/just-the-docs/pull/499 -[#473]: https://github.com/just-the-docs/just-the-docs/pull/473 -[#835]: https://github.com/just-the-docs/just-the-docs/pull/835 -[#891]: https://github.com/just-the-docs/just-the-docs/pull/891 -[#906]: https://github.com/just-the-docs/just-the-docs/pull/906 - -### Maintenance - -* Added: VScode devcontainer by [@max06] in [#783] -* Added: `webrick` to `Gemfile` by [@mattxwang] in [#799] -* Added: 'This site is powered by Netlify.' to the footer by [@mattxwang] in [#797] -* Updated: new repo path by [@pmarsceill] in [#775] -* Updated: rename `master` -> `main` by [@pmarsceill] in [#776] -* Updated: README by [@pmarsceill] in [#777] -* Updated: Code of Conduct to Contributor Covenant v2.1 by [@mattxwang] in [#790] -* Updated: CI files, Ruby & Node Versions by [@mattxwang] in [#820] -* Updated: Stylelint to v14, extend SCSS plugins, remove primer-* configs, resolve issues by [@mattxwang] in [#821] - -[#783]: https://github.com/just-the-docs/just-the-docs/pull/783 -[#799]: https://github.com/just-the-docs/just-the-docs/pull/799 -[#797]: https://github.com/just-the-docs/just-the-docs/pull/797 -[#775]: https://github.com/just-the-docs/just-the-docs/pull/775 -[#776]: https://github.com/just-the-docs/just-the-docs/pull/776 -[#777]: https://github.com/just-the-docs/just-the-docs/pull/777 -[#790]: https://github.com/just-the-docs/just-the-docs/pull/790 -[#820]: https://github.com/just-the-docs/just-the-docs/pull/820 -[#821]: https://github.com/just-the-docs/just-the-docs/pull/821 - -### Dependencies - -* Upgrade to GitHub-native Dependabot by @dependabot-preview in [#627] -* [Security] Bump y18n from 3.2.1 to 3.2.2 by @dependabot-preview in [#606] -* [Security] Bump hosted-git-info from 2.7.1 to 2.8.9 by @dependabot-preview in [#641] -* [Security] Bump lodash from 4.17.19 to 4.17.21 by @dependabot-preview in [#640] -* [Security] Bump ini from 1.3.5 to 1.3.8 by @dependabot-preview in [#511] -* Bump path-parse from 1.0.6 to 1.0.7 by @dependabot in [#699] -* Bump ajv from 6.10.0 to 6.12.6 by @dependabot in [#766] -* Bump prettier from 2.1.2 to 2.5.1 by @dependabot in [#787] -* Bump prettier from 2.5.1 to 2.6.2 by @dependabot in [#809] -* Bump prettier from 2.6.2 to 2.7.1 by @dependabot in [#864] - -[#627]: https://github.com/just-the-docs/just-the-docs/pull/627 -[#606]: https://github.com/just-the-docs/just-the-docs/pull/606 -[#641]: https://github.com/just-the-docs/just-the-docs/pull/641 -[#640]: https://github.com/just-the-docs/just-the-docs/pull/640 -[#511]: https://github.com/just-the-docs/just-the-docs/pull/511 -[#699]: https://github.com/just-the-docs/just-the-docs/pull/699 -[#766]: https://github.com/just-the-docs/just-the-docs/pull/766 -[#787]: https://github.com/just-the-docs/just-the-docs/pull/787 -[#809]: https://github.com/just-the-docs/just-the-docs/pull/809 -[#864]: https://github.com/just-the-docs/just-the-docs/pull/864 - -### New Contributors - -* [@AdityaTiwari2102] made their first contribution in [#477] -* [@svrooij] made their first contribution in [#544] -* [@alexsegura] made their first contribution in [#519] -* [@burner1024] made their first contribution in [#364] -* [@JeffGuKang] made their first contribution in [#221] -* [@dougaitken] made their first contribution in [#782] -* [@max06] made their first contribution in [#783] -* [@sehilyi] made their first contribution in [#499] -* [@nathanjessen] made their first contribution in [#473] -* [@waldyrious] made their first contribution in [#549] -* [@MichelleBlanchette] made their first contribution in [#554] -* [@henryiii] made their first contribution in [#835] -* [@jmertic] made their first contribution in [#726] -* [@jacobhq] made their first contribution in [#846] -* [@UnclassedPenguin] made their first contribution in [#814] -* [@alyssais] made their first contribution in [#829] -* [@nascosto] made their first contribution in [#857] -* [@SPGoding] made their first contribution in [#876] -* [@iridazzle] made their first contribution in [#727] -* [@ivanskodje] made their first contribution in [#891] -* [@Eisverygoodletter] made their first contribution in [#893] - -[@AdityaTiwari2102]: https://github.com/AdityaTiwari2102 -[@svrooij]: https://github.com/svrooij -[@alexsegura]: https://github.com/alexsegura -[@burner1024]: https://github.com/burner1024 -[@JeffGuKang]: https://github.com/JeffGuKang -[@dougaitken]: https://github.com/dougaitken -[@max06]: https://github.com/max06 -[@sehilyi]: https://github.com/sehilyi -[@nathanjessen]: https://github.com/nathanjessen -[@waldyrious]: https://github.com/waldyrious -[@MichelleBlanchette]: https://github.com/MichelleBlanchette -[@henryiii]: https://github.com/henryiii -[@jmertic]: https://github.com/jmertic -[@jacobhq]: https://github.com/jacobhq -[@UnclassedPenguin]: https://github.com/UnclassedPenguin -[@alyssais]: https://github.com/alyssais -[@nascosto]: https://github.com/nascosto -[@SPGoding]: https://github.com/SPGoding -[@iridazzle]: https://github.com/iridazzle -[@ivanskodje]: https://github.com/ivanskodje -[@Eisverygoodletter]: https://github.com/Eisverygoodletter - -**Full Changelog**: https://github.com/just-the-docs/just-the-docs/compare/v0.3.3...v0.4.0.rc1 - -[@pmarsceill]: https://github.com/pmarsceill - -## v0.3.3 - -### 🚀 Features - -- Add custom header and footer include files @CodeSandwich (#334) - -### 🛠Bug Fixes - -- Limit the effect of `nav_exclude` to the main navigation @pdmosses (#443) -- Update normalize.scss @pdmosses (#444) -- Update code.scss @pdmosses (#445) -- Fix list alignment @pdmosses (#446) - -### 🧰 Maintenance - -- Bump stylelint-config-primer from 9.0.0 to 9.2.1 @dependabot-preview (#451) -- Bump stylelint from 13.6.1 to 13.7.2 @dependabot-preview (#440) -- Bump @primer/css from 15.1.0 to 15.2.0 @dependabot-preview (#436) -- Bump prettier from 2.1.1 to 2.1.2 @dependabot-preview (#429) - -## v0.3.2 - -### Changes - -- Safe page sorting @pdmosses (#411) -- v0.3.2 @pmarsceill (#388) - -### 🚀 Features - -- make font-sizes sass variables so they can be changed @pdebruic (#361) -- run the site locally inside docker container @fogfish (#398) -- Feature/doc collections @SgtSilvio (#379) -- Adjust dl layout @pdmosses (#401) - -### 🛠Bug Fixes - -- Add site.gh_edit_source to "Edit this page on GitHub" link @mrfleap (#418) -- Inhibit text-transform for code in h4 @pdmosses (#404) -- Fix native font stack precedence issue on Windows systems. @hvianna (#331) -- Support for the linenos option on highlighted code @pdmosses (#375) -- Update anchor_headings.html @pdmosses (#399) -- Fix https @marksie1988 (#359) - -### 🧰 Maintenance - -- Bump prettier from 2.0.5 to 2.1.1 @dependabot-preview (#427) -- Bump prettier from 2.0.5 to 2.1.1 @dependabot-preview (#419) -- [Security] Bump lodash from 4.17.15 to 4.17.19 @dependabot-preview (#389) -- Bump @primer/css from 14.4.0 to 15.1.0 @dependabot-preview (#402) -- Bump lodash from 4.17.15 to 4.17.19 @dependabot (#384) -- Bump @primer/css from 14.4.0 to 15.0.0 @dependabot-preview (#371) - - -## v0.3.1 - -### Changes - -### 🛠Bug Fixes - -- Improve accessibility by adding label to Anchor links. @mscoutermarsh (#376) - -### 🧰 Maintenance - -- Remove collapsible TOC on nav doc @pmarsceill (#368) -- Pdmosses collapsible toc @pmarsceill (#367) - - -## v0.3.0 - -### Changes - -- v0.2.9 @pmarsceill (#306) - -### 🚀 Features - -- Add print styles @pmarsceill (#362) -- Navigation improvements and search sections @SgtSilvio (#352) - -### 🛠Bug Fixes - -- Remove constraint with jekyll 4.1.0 @PierrickMartos (#348) - -### 🧰 Maintenance - -- Bump version numbers @pmarsceill (#360) -- Bump stylelint from 13.3.3 to 13.6.1 @dependabot-preview (#343) -- Bump stylelint-config-prettier from 8.0.1 to 8.0.2 @dependabot-preview (#349) - - -## v0.2.9 - -### Bug fixes -- Horizontal Alignment #103 @pmarsceill -- Code snippet in headers do not inherit font size #140 @pmarsceill -- Fix duplicated title and description tags #294 @iefserge -- Update nav.html for handling nav_exclude #282 @blawqchain -- Fix duplicate entries in nav.html and default.html #239 @KasparEtter -- Don't show pages with no title (e.g. redirects in nav) https://github.com/pmarsceill/just-the-docs/pull/295/commits/672de29f2e332a9350af7237e4fb6693c848989e @SgtSilvio -- [SEARCH RAKE] Fix search generator #319 @RoiArthurB - -### Enhancements -- Improvement/custom themes #186 @SgtSilvio -- feat: adds "edit this page" and "page last modified" to footer #217 @malsf21 -- feat: adds option to open aux links in new tab #229 @malsf21 -- Default nav order #236 @pdmosses -- Enable IP anonymization in Google Analytics (GDPR) #250 @r-brown - -closes #240 #308 #266 #140 #103 - -## v0.2.8 - -### Bugfixes -- bugfix in search.rake #218 @tiaitsch85 - -### Dependency and security updates: - -- Update jekyll requirement from ~> 3.8.5 to >= 3.8.5, < 4.1.0 #197 @dependabot-preview -- Update rake requirement from ~> 12.3.1 to >= 12.3.1, < 13.1.0 #227 @dependabot-preview -- Bump stylelint-config-primer from 8.0.0 to 9.0.0 #247 @dependabot-preview -- Update bundler requirement from ~> 2.0.1 to ~> 2.1.4 #268 @dependabot-preview -- Bump @primer/css from 12.7.0 to 14.3.0 #296 @dependabot-preview - -### Operations - -- Update CI to test multiple versions of Jekyll -- Update CI to check the rake command that builds the search file - -fixes #291 #256 #293 #177 - -## v0.2.7 - -### Bugs fixed -- Anchor headings are now displayed on hover, not only on heading hover -- Deduplicated anchor heading svg -- If last page of `site.html_pages` was excluded from search, search json breaks -- Config variable should be `blanklines` not `blank_lines` for html compression -- `list-style-none` does not hide bullets on `ul` - -### Enhancements -- Summary for child pages appears in generated TOC -- Site logo configuration supported replacing title text with image -- Allow custom CSS overrides (new scss partial at the end of the cascade) separate from variable overrides. -- Configuration around search strings added to allow search for hyphenated words - -### Maintenance -- Update docs to suggest using index.md as section page filename -- Bump @primer/css from 12.6.0 to 12.7.0 -- Bump mixin-deep from 1.3.1 to 1.3.2 -- Bump stylelint-config-primer from 7.0.1 to 8.0.0 - -### PR included -- #98 by @stefanoborini Introduces the possibility for a summary in the table of contents -- #141 by @ghabs Fix trailing comma bug in search-data.json -- #153 by @jacobherrington Change button copy on theme preview -- #181 by @m3nu Recommend using index.md as parent page for sections -- #183 by @SgtSilvio Improve heading anchors -- #187 by @SgtSilvio Improvement/site logo -- #200 Bump mixin-deep from 1.3.1 to 1.3.2 -- #203 by @pdmosses Search config -- #205 by @pdmosses Fix blank_lines var to blanklines in config.yml -- #206 by @iamcarrico Allow for custom overrides by the user -- #208 Bump @primer/css from 12.6.0 to 12.7.0 -- #213 Bump mixin-deep from 1.3.1 to 1.3.2 -- #214 Bump stylelint-config-primer from 7.0.1 to 8.0.0 -- #215 Bump @primer/css from 12.6.0 to 12.7.0 - -## v0.2.6 - -### Bugs fixed -- Google Analytics tag has been updated #162 -- ~BaseURL has been modified #109~ Reverted -- seems the existing implementation worked -- Titles can now wrap fixes #106 - -### Enhancements -- Search now displays content preview #135 -- Custom footer content added #179 -- Now using GitHub Actions for CI #170 - -### Maintenance -- lunrjs upgraded #135 -- Nav generation is optimized #159 -- Stylelint upgrade #143 -- Stylelint config primer upgrade #149 -- Lodash upgrade #160 - -### PR included -~#109 by @daviddarnes - Fix baseurl link~ Reverted -#135 by @SgtSilvio - Upgrades lunr.js, improves search UI, adds heading anchors -#152 by @yavorg - Improves syntax highlighting for js readablity -#159 by @julienduchesne - Optimizes nav generation -#162 by @nergmada - Modifies the google analytics code to match the new tags used by GA - - -## v0.2.5 - -### Bugs fixed - -- Duplicate title tag when Jekyll SEO Plugin gem is used #125 #126 - -### Enhancements - -- Favicon support added #118 - -### Maintenance -- Bump stylelint-config-primer from 6.0.0 to 7.0.0 #123 -- Bump @primer/css from 12.2.3 to 12.3.1 #129 -- Add workflow to publish to GPR -- Fix workflow to publish to Ruby Gems - -## v0.2.4 - -### Bugs - -- #102 Remove unnecessary console.log() @JoeNyland -- #97 Import custom Sass variable overrides before default variables are defined @montchr and @ptvandi - -### Additions -- #117 Add links to docs for setting up GH pages locally @gnarea -- #95 Add SEO and 'lang' param for `_config` @gebeto - -## v0.2.3 - -### Enhancements -- Adds ability to use Google Analytics tracking by @pmarsceill - -### Bug fixes -- Fixes 404 error for "/assets/js//search-data.json" by @stephenedmondson -- Fixes #80 Single quotes in the string were unescaped and ruby attempted variable substitution of amp within it (which failed) by @novelistparty -- Fixes bug that would only show 2 or more search results (not one) by @ilivewithian -- Fixes a typo on the layout example by @woernfl -- Fixes #78 Page scroll position too far down on load by @pmarsceill -- Fixds ability to nest ul in ol without breaking style or counters - -### Dependency updates -- Bumps stylelint dependency from 9.9.0 to 9.10.1 - -## v0.2.2 - -- Bumps stylelint-config-primer to 3.0.1 #44 -- Bumps bundler req to 2.0.1 #61 -- Adds custom 404 page -- Excludes package-lock.json from jekyll build #47 -- Fixes keyboard scrolling / focus #48 -- Adds ARIA roles to navigation elements -- Adds support for optional page description metadata (if present in yaml front matter) -- Addresses some issues with search in #46 -- Option to hide TOC on parent pages if turned off in page's YAML front matter #30 -- Option to suppress an item from being indexed by search if present in page's YAML front matter #32 - -## v0.2.1 - -This update fixes security vulnerablities in the lodash sub-dependency and bumps other dev dependencies to their latest version. - -## v0.2.0 - -Adds: -- Dark mode via `color_scheme` parameter -- Ability to exclude a page from the main nav with `nav_exclude` parameter closes #21 -- Ability for create children of children pages (3 nav levels) closes #25 - -Changes: -- Permalink structure for tiered navigation has been updated -- Some colors have been updated for consistency / accessibility - -## v0.1.6 - -### Added - -- Support for task list styles #19 -- Configuration docs -- Configuration option to enable / disable search -- Normalize.scss dependency pulled into project #16 # - -### Fixed - -- Layout bug in navigation #17 - -## v0.1.5 - -Major changes: - -- Fixed bug where the rake task would fail when the assets/js directory didn't exist - -## v0.1.4 - -Major changes: -- Adds Rake as a runtime dependency -- Definition list styled -- Sidebar and support cleaned up for smaller screen support -- Updated some stale docs - -## v0.1.3 - -Major changes: -- Fix path problems, typos, and general clean-up for OSS. - -## v0.1.2 - -Fix paths when deployed to gh-pages - -## v0.1.1 - -Major updates: -- Adds search to mobile nav -- Pulls footer to bottom of the page on mobile (not hidden in nav) - -Minor updates: -- Cleans up h1 typography spacing diff --git a/MIGRATION.md b/MIGRATION.md deleted file mode 100644 index 11b560be..00000000 --- a/MIGRATION.md +++ /dev/null @@ -1,403 +0,0 @@ ---- -title: Migration and Upgrading -layout: default -nav_exclude: true ---- - -# Migrating and Upgrading - -Summary -: A site that uses `just-the-docs` (as a theme or as a remote them) automatically - switches to a new release, unless it is pinned to a previous version. - - This migration guide draws attention to: - - - changes that might break your site, - - features added in the latest release, and - - features that have become deprecated (and are likely to be removed in a future release). - -This document contains instructions on how to migrate and upgrade Just the Docs sites from every minor or major version bump, starting from `v0.3.3` to `v0.4.0`. - -<details open markdown="block"> - <summary> - Table of contents - </summary> - {: .text-delta } -- TOC -{:toc} -</details> - -{::options toc_levels="2..4" /} - -{: .warning } -> If your configuration states `remote_theme: just-the-docs/just-the-docs`, your -> website is built using the current `main` branch of the theme, which may include -> changes made after the latest release; see the [CHANGELOG]. -> -> If your configuration states `theme: just the docs` and your `Gemfile` specifies -> `gem "just-the-docs"`, your website is always built using the latest release. - -{: .note } -> If you have cloned/forked and customised the theme repo, -> and pull the changes of a new release to your clone, -> you may need to resolve merge conflicts. - -[CHANGELOG]: {{ site.baseurl }}{% link CHANGELOG.md %} - -## v0.3.3 … v0.4.x - -### REPOSITORY CHANGES - -#### Just the Docs - -The theme repo is now at <https://github.com/just-the-docs/just-the-docs>. -The name of its default branch is now `main`. - -The theme docs website is now published at <https://just-the-docs.github.io/just-the-docs>. - -GitHub provides access to previous versions of the theme repo. -You can browse [previous versions of the theme docs website] on the [Internet Archive]. - -[previous versions of the theme docs website]: https://web.archive.org/web/20220000000000*/https://just-the-docs.github.io/just-the-docs -[Internet Archive]: https://web.archive.org/ - -The [README] page on the theme repo repeats much of the information from the [home page], -formatted for browsing on GitHub. -It also explains how to install the theme as a Ruby Gem, without creating a new site. - -[README]: https://github.com/just-the-docs/just-the-docs/blob/main/README.md -[home page]: https://just-the-docs.github.io/just-the-docs - -#### Deploy previews - -When a PR builds successfully, Netlify provides a preview of how the theme docs website will look if the PR is merged. -You can find links to the preview near the bottom of the Conversation tab of the PR. - -#### Just the Docs Template - -The template at <https://github.com/just-the-docs/just-the-docs-template> -creates a repo with the minimal source files for a Just the Docs website. -After configuring the relevant parameters, you can build and serve the website -both locally and on GitHub Pages – using either Jekyll 3 or Jekyll 4! - -#### Just the Docs Tests - -The tests website at <https://just-the-docs.github.io/just-the-docs-tests> -consists mainly of regression tests for bug fixes and new features. - -The test source files at <https://github.com/just-the-docs/just-the-docs-tests> -illustrate the use of many Markdown and Jekyll features, -including some that are not included in the theme docs. - -For example, see how to add support for rendering TeX/LaTeX [math formulas] with KaTeX and MathJax. - -[math formulas]: https://just-the-docs.github.io/just-the-docs-tests/components/math/index/ - -### POTENTIALLY-BREAKING CHANGES in v0.4.0 - -If switching to a new release of the theme breaks your website, -check that you don't have any files in the `_includes`, `_layouts`, and `_sass` -directories with the same names as files provided by the theme. - -If your repo has a customised copy of `_layouts/default.html` from a previous release, -try removing it, or replace it by a fresh copy of the theme file. - -{: .warning } -The following changes made in v0.4.0 *might* break or adversely affect your website -when you next rebuild it, unless you have pinned it! - -#### New includes and SCSS - -Version 0.4.0 introduces many new `_includes` files. If you already have an existing include with the same name as a new addition, you will need to migrate or update that include. The new files are (relative to the `_includes` folder): - -- `mermaid_config.js` -- `nav_footer_custom` -- `search_placeholder_custom` -- `toc_heading_custom` -- the entire `components/` folder: - - `aux_nav`, `breadcrumbs`, `children_nav`, `footer`, `header`, `mermaid`, `search_footer`, `search_header`, `sidebar` -- the entire `icons/` folder - - `code_copy`, `document`, `expand`, `external_link`, `icons`, `link`, `menu`, `search` -- the entire `lunr/` folder - - `custom-data.json`, `custom-index.js` - -We have removed some code in `_sass/vendor` and added a new file at `_sass/custom/setup.scss`. - -#### favicons - -The file `_includes/favicon.html` is now ignored by the theme. -If you're using it, your website's favicon is no longer displayed by browsers. - -To fix: Move the content of `_includes/favicon.html` to `_includes/head_custom.html`. - -#### Custom callout colors - -The file `_sass/custom/custom.scss` is now imported last: _after_ the configuration of callouts. -If you've defined custom color variables for callouts in `_sass/custom/custom.scss` -(and used them when configuring your callouts in `_config.yml`) -you will not be able to rebuild your website. - -To fix: Move custom color variables for callouts in `_sass/custom/custom.scss` to `_sass/custom/variables.scss`. - -#### Pages and collections - -Links to ordinary pages now appear in the navigation on sites that use collections. -You might want the navigation of your site to consist entirely of collections. - -To fix: Add the front matter `nav_exclude: true` to pages that the navigation should not display. - -#### Relative URLs - -All generated URLs are now relative. -This is a bug fix, and unlikely to break any site. - -Relative links to pages within a website support deployment to different servers. - -#### Navigation order - -The order in which the navigation panel lists pages has been simplified. -All pages with `nav_order` values now come before all pages that are ordered by `title`. - -If your website has a group of *sibling* pages where some siblings have `nav_order` -string values, and others are ordered by numerical `title` values, -the former now come before the latter. - -To fix: Add numerical `nav_order` values to the pages with numerical `title` values. - -### DEPRECATIONS - -{: .warning } -The following features are deprecated, and to be removed in a future release. - -#### Jekyll 3 - -You can still use Jekyll 3 (3.8.5 or later) to build websites using v0.4.0 of the theme. -However, future releases of the theme may require the use of Jekyll 4. - -You can already use Jekyll 4 to build your website *locally*. -It should look exactly the same as when built with Jekyll 3.[^Jekyll4] - -[^Jekyll4]: - Jekyll 4 depends on more recent versions of other gems than Jekyll 3, - and the differences between those versions may affect the files of your built site. - -To use Jekyll 4 when building your website *on GitHub Pages*, you need to run GitHub Actions. -The simplest way of setting that up in a new repo is to create the repo using the Just the Docs template. -To start running Jekyll 4 to build an existing repo on GitHub Pages, -you can create a new repo with the template, then copy its `.github/workflows` directory, -and update your repo settings to use Actions. - -#### Footer content configuration - -Currently, if your configuration sets `footer_content` to some text, -the theme displays that text at the bottom of the main section of each page. - -The file `_includes/footer_custom.html` provides a more general way of customizing -not only the text but also the markup for the page footer area. - -You can replicate the current display of `TEXT` in the footer using the following markup: - -```html -<p class="text-small text-grey-dk-100 mb-0">TEXT</p> -``` - -### THEME WEBSITE CHANGES - -The website now uses *callouts*[^callouts] to draw attention to important information. - -[^callouts]: - The theme website configuration defines the callout titles and colors used there. - Websites that use the theme have to configure their own callout titles and colors. - -The theme uses [semantic versioning]. -A normal version number takes the form X.Y.Z, -where X is the major version, Y is the minor version, and Z is the patch version. -The theme uses version X.Y.Z.rcN for pre-release N of version X.Y.Z. -When referring to version numbers on GitHub, we usually prefix them by 'v'. - -[semantic versioning]: https://semver.org - -Major version zero (0.Y.Z) is for initial development, where anything *may* change at any time. -In practice, we increment the patch version Z for bug fixes and backwards compatible changes; -we increment the minor version Y for changes that could break websites using the theme -without pinning it to a specific version. - -The label `NEW` in the theme website indicates a feature that has been changed or added -since the release of the previous *minor* version. -For example, after the release of v0.4.Z, the theme website should label `NEW` all features that -we have changed or added since v0.3.0 – not just since v0.3.3. -When we release v0.5.0, we will remove all those labels, and add labels on features since v0.4.0. - -The theme docs website is not itself versioned. -It changes incrementally, independently of theme releases. - -#### Home page - -The theme home page now focuses on the simplest ways of using the theme. -It also notes the different behaviour of `theme` and `remote_theme` in connection -with interim versions of the theme, such as pre-releases. - -#### CHANGELOG - -The CHANGELOG page lists the changes made in all previous releases and pre-releases of new versions of the theme gem. - -It also lists changes made to the `main` branch of the theme since the latest release or pre-release. - -For changes since v0.3.3, the log usually references the merged PR that made the change and its author. - -### NON-BREAKING CHANGES (OUTLINE ONLY) - -#### Accessibility - -- Skip to main content: the first keyboard-navigatable item is now a link to skip over the sidebar and header to the main content of the page. PR: [#949]. -- Aria-labels: improved `aria-label`s have been added to various site elements. PRs: [#950], ... -- Other general improvements: gradual changes have improved tab focusability, contrast, and semantic elements. More work still to come. PRs: [#498], [#846] - -#### Configuration - -- Mermaid support: first-class support for [Mermaid](https://mermaid.js.org/) - a JavaScript-based diagram and charting tool supported by GitHub - has been added to the theme. **This feature is opt-in.** See the new doc subsections in [Configuration]({% link docs/configuration.md %}#mermaid-diagrams) and [Code]({% link docs/ui-components/code.md %}#mermaid-diagram-code-blocks) for more. -- Multiple Google Analytics tags are now supported. PR: [#1029] - -#### Customization - -- all user-facing text is now customizable; previously, several elements (ex search placeholder) were hardwired into the theme. Now, users can blend custom includes and layouts to internationalize their sites. -- we've clarified the role of `custom.scss` to be imported last; to allow users to define custom or override variables, we've added a new file `setup.scss`. PR: [#1135] - -#### Custom Includes - -We've added several custom `_includes` to provide users with more customization options for different site elements. We've also added a section to [Configuration]({% link docs/customization.md %}#override-includes) to outline these. - -All of these are opt-in by default; however, **these may be breaking if you have existing `_includes` with the same name**. - -Each item is listed with the relevant file and PR. - -- TOC heading: `toc_heading_custom.html`, PR: [#980] -- Navigation panel footer: `nav_footer_custom.html`, PR: [#474] -- Search placeholder: `search_placeholder_custom.html`, PR: [#613] -- Modular site components: `components/` and `icons/`, PR: [#1058] -- Custom search indices: `lunr/`, PR: [#1068] - -In a future (version 1) release, we may rename the custom include files. - -#### Modular Components - -We've broken up the default layout (`_layouts/default.html`) into multiple reusable components. This should have no impact on most users; however, it should make it easier to implement custom layouts. - -For more, see [Custom layouts and includes]({% link docs/customization.md %}#custom-layouts-and-includes). PR: [#1058]. - -#### Navigation - -- Collections: nav panel shows links to ordinary pages before collections -- Collection folding; part of "Combination". PR: [#578] -- Scrolling to show link to selected page. PR: [#639] -- External nav links are now supported. PR: [#876] -- Child nav order: sort navigation pages with `child_nav_order`. PR: [#726] -- Order when mixing different ways of specifying nav order - -#### Search - -In addition to customizing the search placeholder, we've also added the ability to provide custom content to the search index. for more, see [Custom content for search index]({% link docs/search.md %}#custom-content-for-search-index). PR: [#1068]. - -#### Styling - -- Code copying: code blocks now allow users to easily copy their contents. PR: [#945] -- Blockquote: shows vertical bar on left. PR: [#965] -- Links wrap. PR: [#905] -- Callouts: a new component similar to alerts or banners. See [UI Components - Callouts]({% link docs/ui-components/callouts.md %}). PR: [#466] - ----- - -[#856]: https://github.com/just-the-docs/just-the-docs/pull/856 -[#806]: https://github.com/just-the-docs/just-the-docs/pull/806 -[#555]: https://github.com/just-the-docs/just-the-docs/pull/555 -[#814]: https://github.com/just-the-docs/just-the-docs/pull/814 -[#778]: https://github.com/just-the-docs/just-the-docs/pull/778 -[#221]: https://github.com/just-the-docs/just-the-docs/pull/221 -[#782]: https://github.com/just-the-docs/just-the-docs/pull/782 -[#549]: https://github.com/just-the-docs/just-the-docs/pull/549 -[#554]: https://github.com/just-the-docs/just-the-docs/pull/554 -[#499]: https://github.com/just-the-docs/just-the-docs/pull/499 -[#473]: https://github.com/just-the-docs/just-the-docs/pull/473 -[#835]: https://github.com/just-the-docs/just-the-docs/pull/835 -[#891]: https://github.com/just-the-docs/just-the-docs/pull/891 -[#906]: https://github.com/just-the-docs/just-the-docs/pull/906 - -[#578]: https://github.com/just-the-docs/just-the-docs/pull/578 -[#463]: https://github.com/just-the-docs/just-the-docs/pull/463 -[#448]: https://github.com/just-the-docs/just-the-docs/pull/448 -[#466]: https://github.com/just-the-docs/just-the-docs/pull/466 -[#477]: https://github.com/just-the-docs/just-the-docs/pull/477 -[#495]: https://github.com/just-the-docs/just-the-docs/pull/495 -[#496]: https://github.com/just-the-docs/just-the-docs/pull/496 -[#498]: https://github.com/just-the-docs/just-the-docs/pull/498 -[#494]: https://github.com/just-the-docs/just-the-docs/pull/494 -[#639]: https://github.com/just-the-docs/just-the-docs/pull/639 -[#544]: https://github.com/just-the-docs/just-the-docs/pull/544 -[#364]: https://github.com/just-the-docs/just-the-docs/pull/364 -[#498]: https://github.com/just-the-docs/just-the-docs/pull/498 -[#613]: https://github.com/just-the-docs/just-the-docs/pull/613 -[#726]: https://github.com/just-the-docs/just-the-docs/pull/726 -[#474]: https://github.com/just-the-docs/just-the-docs/pull/474 -[#829]: https://github.com/just-the-docs/just-the-docs/pull/829 -[#857]: https://github.com/just-the-docs/just-the-docs/pull/857 -[#876]: https://github.com/just-the-docs/just-the-docs/pull/876 -[#909]: https://github.com/just-the-docs/just-the-docs/pull/909 -[#519]: https://github.com/just-the-docs/just-the-docs/pull/519 -[#855]: https://github.com/just-the-docs/just-the-docs/pull/855 -[#686]: https://github.com/just-the-docs/just-the-docs/pull/686 -[#495]: https://github.com/just-the-docs/just-the-docs/pull/495 -[#846]: https://github.com/just-the-docs/just-the-docs/pull/846 -[#727]: https://github.com/just-the-docs/just-the-docs/pull/727 -[#889]: https://github.com/just-the-docs/just-the-docs/pull/889 -[#893]: https://github.com/just-the-docs/just-the-docs/pull/893 -[#905]: https://github.com/just-the-docs/just-the-docs/pull/905 -[#898]: https://github.com/just-the-docs/just-the-docs/pull/898 - -[#950]: https://github.com/just-the-docs/just-the-docs/pull/950 -[#944]: https://github.com/just-the-docs/just-the-docs/pull/944 -[#939]: https://github.com/just-the-docs/just-the-docs/pull/939 -[#949]: https://github.com/just-the-docs/just-the-docs/pull/949 -[#941]: https://github.com/just-the-docs/just-the-docs/pull/941 -[#956]: https://github.com/just-the-docs/just-the-docs/pull/956 -[#935]: https://github.com/just-the-docs/just-the-docs/pull/935 -[#940]: https://github.com/just-the-docs/just-the-docs/pull/940 -[#951]: https://github.com/just-the-docs/just-the-docs/pull/951 -[#955]: https://github.com/just-the-docs/just-the-docs/pull/955 -[#937]: https://github.com/just-the-docs/just-the-docs/pull/937 - -[#965]: https://github.com/just-the-docs/just-the-docs/pull/965 -[#960]: https://github.com/just-the-docs/just-the-docs/pull/960 -[#962]: https://github.com/just-the-docs/just-the-docs/pull/962 -[#964]: https://github.com/just-the-docs/just-the-docs/pull/964 -[#967]: https://github.com/just-the-docs/just-the-docs/pull/967 -[#974]: https://github.com/just-the-docs/just-the-docs/pull/974 -[#980]: https://github.com/just-the-docs/just-the-docs/pull/980 -[#985]: https://github.com/just-the-docs/just-the-docs/pull/985 -[#986]: https://github.com/just-the-docs/just-the-docs/pull/986 -[#992]: https://github.com/just-the-docs/just-the-docs/pull/992 - -[#945]: https://github.com/just-the-docs/just-the-docs/pull/945 -[#999]: https://github.com/just-the-docs/just-the-docs/pull/999 -[#1000]: https://github.com/just-the-docs/just-the-docs/pull/1000 -[#1001]: https://github.com/just-the-docs/just-the-docs/pull/1001 -[#1010]: https://github.com/just-the-docs/just-the-docs/pull/1010 -[#1015]: https://github.com/just-the-docs/just-the-docs/pull/1015 -[#1018]: https://github.com/just-the-docs/just-the-docs/pull/1018 -[#1019]: https://github.com/just-the-docs/just-the-docs/pull/1019 -[#1021]: https://github.com/just-the-docs/just-the-docs/pull/1021 -[#1027]: https://github.com/just-the-docs/just-the-docs/pull/1027 -[#1029]: https://github.com/just-the-docs/just-the-docs/pull/1029 -[#1040]: https://github.com/just-the-docs/just-the-docs/pull/1040 -[#1061]: https://github.com/just-the-docs/just-the-docs/pull/1061 -[#1065]: https://github.com/just-the-docs/just-the-docs/pull/1065 -[#1071]: https://github.com/just-the-docs/just-the-docs/pull/1071 -[#1074]: https://github.com/just-the-docs/just-the-docs/pull/1074 -[#1076]: https://github.com/just-the-docs/just-the-docs/pull/1076 -[#1077]: https://github.com/just-the-docs/just-the-docs/pull/1077 -[#1090]: https://github.com/just-the-docs/just-the-docs/pull/1090 -[#1091]: https://github.com/just-the-docs/just-the-docs/pull/1091 -[#1092]: https://github.com/just-the-docs/just-the-docs/pull/1092 -[#1095]: https://github.com/just-the-docs/just-the-docs/pull/1095 - -[#1068]: https://github.com/just-the-docs/just-the-docs/pull/1068 -[#1135]: https://github.com/just-the-docs/just-the-docs/pull/1135 diff --git a/docs/configuration.md b/docs/configuration.md deleted file mode 100644 index ec54e6b3..00000000 --- a/docs/configuration.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -layout: default -title: Configuration -nav_order: 2 -nav_exclude: true ---- - -# Configuration -{: .no_toc } - -Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's \_config.yml file. -{: .fs-6 .fw-300 } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -View this site's [\_config.yml](https://github.com/just-the-docs/just-the-docs/tree/main/_config.yml) file as an example. - -## Site logo - -```yaml -# Set a path/url to a logo that will be displayed instead of the title -logo: "/assets/images/just-the-docs.png" -``` - -## Site favicon - -```yaml -# Set a path/url to a favicon that will be displayed by the browser -favicon_ico: "/assets/images/favicon.ico" -``` - -If the path to your favicon is `/favicon.ico`, you can leave `favicon_ico` unset. - -## Search - -```yaml -# Enable or disable the site search -# Supports true (default) or false -search_enabled: true - -search: - # Split pages into sections that can be searched individually - # Supports 1 - 6, default: 2 - heading_level: 2 - # Maximum amount of previews per search result - # Default: 3 - previews: 3 - # Maximum amount of words to display before a matched word in the preview - # Default: 5 - preview_words_before: 5 - # Maximum amount of words to display after a matched word in the preview - # Default: 10 - preview_words_after: 10 - # Set the search token separator - # Default: /[\s\-/]+/ - # Example: enable support for hyphenated search words - tokenizer_separator: /[\s/]+/ - # Display the relative url in search results - # Supports true (default) or false - rel_url: true - # Enable or disable the search button that appears in the bottom right corner of every page - # Supports true or false (default) - button: false -``` - -## Mermaid Diagrams -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -The minimum configuration requires the key for `version` ([from jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)) in `_config.yml`: - -```yaml -mermaid: - # Version of mermaid library - # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/ - version: "9.1.3" -``` - -Provide a `path` instead of a `version` key to load the mermaid library from a local file. - -See [the Code documentation]({% link docs/ui-components/code.md %}#mermaid-diagram-code-blocks) for more configuration options and information. - -## Aux links - -```yaml -# Aux links for the upper right navigation -aux_links: - "Just the Docs on GitHub": - - "//github.com/just-the-docs/just-the-docs" - -# Makes Aux links open in a new tab. Default is false -aux_links_new_tab: false -``` - -## Heading anchor links - -```yaml -# Heading anchor links appear on hover over h1-h6 tags in page content -# allowing users to deep link to a particular heading on a page. -# -# Supports true (default) or false -heading_anchors: true -``` - -## External navigation links -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -External links can be added to the navigation through the `nav_external_links` option. -See [Navigation Structure]({% link docs/navigation-structure.md %}#external-navigation-links) for more details. - -## Footer content - -```yaml -# Footer content -# appears at the bottom of every page's main content -# Note: The footer_content option is deprecated and will be removed in a future major release. Please use `_includes/footer_custom.html` for more robust -markup / liquid-based content. -footer_content: "Copyright © 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/just-the-docs/just-the-docs/tree/main/LICENSE.txt\">MIT license.</a>" - -# Footer last edited timestamp -last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter -last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html - -# Footer "Edit this page on GitHub" link text -gh_edit_link: true # show or hide edit this page link -gh_edit_link_text: "Edit this page on GitHub." -gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo -gh_edit_branch: "main" # the branch that your docs is served from -# gh_edit_source: docs # the source that your files originate from -gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately -``` - -_note: `footer_content` is deprecated, but still supported. For a better experience we have moved this into an include called `_includes/footer_custom.html` which will allow for robust markup / liquid-based content._ - -- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format -- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime) -- `gh_edit_repository` is the URL of the project's GitHub repository -- `gh_edit_branch` is the branch that the docs site is served from; defaults to `main` -- `gh_edit_source` is the source directory that your project files are stored in (should be the same as [site.source](https://jekyllrb.com/docs/configuration/options/)) -- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode - -## Color scheme - -```yaml -# Color scheme supports "light" (default) and "dark" -color_scheme: dark -``` - -<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> - -<script> -const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); - -jtd.addEvent(toggleDarkMode, 'click', function(){ - if (jtd.getTheme() === 'dark') { - jtd.setTheme('light'); - toggleDarkMode.textContent = 'Preview dark color scheme'; - } else { - jtd.setTheme('dark'); - toggleDarkMode.textContent = 'Return to the light side'; - } -}); -</script> - -See [Customization]({% link docs/customization.md %}) for more information. - -## Callouts -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -To use this feature, you need to configure a `color` and (optionally) `title` for each kind of callout you want to use, e.g.: - -```yaml -callouts: - warning: - title: Warning - color: red -``` - -This uses the color `$red-000` for the background of the callout, and `$red-300` for the title and box decoration.[^dark] You can then style a paragraph as a `warning` callout like this: - -```markdown -{: .warning } -A paragraph... -``` - -[^dark]: - If you use the `dark` color scheme, this callout uses `$red-300` for the background, and `$red-000` for the title. - -The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/setup.scss` file: - -```scss -$pink-000: #f77ef1; -$pink-100: #f967f1; -$pink-200: #e94ee1; -$pink-300: #dd2cd4; -``` - -You can override the default `opacity` of the background for a particular callout, e.g.: - -```yaml -callouts: - custom: - color: pink - opacity: 0.3 -``` - -You can change the default opacity (`0.2`) for all callouts, e.g.: - -```yaml -callouts_opacity: 0.3 -``` - -You can also adjust the overall level of callouts. -The value of `callouts_level` is either `quiet` or `loud`; -`loud` increases the saturation and lightness of the backgrounds. -The default level is `quiet` when using the `light` or custom color schemes, -and `loud` when using the `dark color scheme.` - -See [Callouts]({% link docs/ui-components/callouts.md %}) for more information. - -## Google Analytics - -{: .warning } -> [Google Analytics 4 will replace Universal Analytics](https://support.google.com/analytics/answer/11583528). On **July 1, 2023**, standard Universal Analytics properties will stop processing new hits. The earlier you migrate, the more historical data and insights you will have in Google Analytics 4. - -Universal Analytics (UA) and Google Analytics 4 (GA4) properties are supported. - -```yaml -# Google Analytics Tracking (optional) -# Supports a CSV of tracking ID strings (eg. "UA-1234567-89,G-1AB234CDE5") -ga_tracking: UA-2709176-10 -ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default) -``` - -### Multiple IDs -{: .d-inline-block .no_toc } - -New (v0.4.0) -{: .label .label-green } - -This theme supports multiple comma-separated tracking IDs. This helps seamlessly transition UA properties to GA4 properties by tracking both for a while. - -```yaml -ga_tracking: "UA-1234567-89,G-1AB234CDE5" -``` - -## Document collections - -By default, the navigation and search include normal [pages](https://jekyllrb.com/docs/pages/). -You can also use [Jekyll collections](https://jekyllrb.com/docs/collections/) which group documents semantically together. - -{: .warning } -> Collection folders always start with an underscore (`_`), e.g. `_tests`. You won't see your collections if you omit the prefix. - -For example, put all your test files in the `_tests` folder and create the `tests` collection: - -```yaml -# Define Jekyll collections -collections: - # Define a collection named "tests", its documents reside in the "_tests" directory - tests: - permalink: "/:collection/:path/" - output: true - -just_the_docs: - # Define which collections are used in just-the-docs - collections: - # Reference the "tests" collection - tests: - # Give the collection a name - name: Tests - # Exclude the collection from the navigation - # Supports true or false (default) - # nav_exclude: true - # Fold the collection in the navigation - # Supports true or false (default) - # nav_fold: true # note: this option is new in v0.4 - # Exclude the collection from the search - # Supports true or false (default) - # search_exclude: true -``` - -The navigation for all your normal pages (if any) is displayed before those in collections. - -You can reference multiple collections. -This creates categories in the navigation with the configured names. - -```yaml -collections: - tests: - permalink: "/:collection/:path/" - output: true - tutorials: - permalink: "/:collection/:path/" - output: true - -just_the_docs: - collections: - tests: - name: Tests - tutorials: - name: Tutorials -``` - -When *all* your pages are in a single collection, its name is not displayed. - -The navigation for each collection is a separate name space for page titles: a page in one collection cannot be a child of a page in a different collection, or of a normal page. diff --git a/docs/customization.md b/docs/customization.md deleted file mode 100644 index 76d631d8..00000000 --- a/docs/customization.md +++ /dev/null @@ -1,398 +0,0 @@ ---- -layout: default -title: Customization -nav_order: 6 -nav_exclude: true ---- - -# Customization -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Color schemes - -Just the Docs supports two color schemes: light (default), and dark. - -To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file: - -#### Example -{: .no_toc } - -```yaml -# Color scheme supports "light" (default) and "dark" -color_scheme: dark -``` - -<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> - -<script> -const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); - -jtd.addEvent(toggleDarkMode, 'click', function(){ - if (jtd.getTheme() === 'dark') { - jtd.setTheme('light'); - toggleDarkMode.textContent = 'Preview dark color scheme'; - } else { - jtd.setTheme('dark'); - toggleDarkMode.textContent = 'Return to the light side'; - } -}); -</script> - -## Custom schemes - -### Define a custom scheme - -You can add custom schemes. -If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name) -where you override theme variables to change colors, fonts, spacing, etc. - -{: .note } -Since the default color scheme is `light`, your custom scheme is implicitly based on the variable settings used by the `light` scheme. - -If you want your custom scheme to be based on the `dark` scheme, you need to start your file with the following line: - -```scss -@import "./color_schemes/dark"; -``` - -You can define custom schemes based on other custom schemes in the same way. - -Available variables are listed in the [\_variables.scss](https://github.com/just-the-docs/just-the-docs/tree/main/_sass/support/_variables.scss) file. - -For example, to change the link color from the purple default to blue, include the following inside your scheme file: - -#### Example -{: .no_toc } - -```scss -$link-color: $blue-000; -``` - -Keep in mind that changing a variable will not automatically change the value of other variables that depend on it. -For example, the default link color (`$link-color`) is set to `$purple-000`. However, redefining `$purple-000` in a custom color scheme will not automatically change `$link-color` to match it. -Instead, each variable that relies on previously-cascaded values must be manually reimplemented by copying the dependent rules from `_variables.scss` — in this case, rewriting `$link-color: $purple-000;`. - -_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail. -Please use scheme files. - -### Use a custom scheme - -To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file: - -```yaml -color_scheme: foo -``` - -### Switchable custom scheme - -If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name) -with the following content: - -{% raw %} - --- - --- - {% include css/just-the-docs.scss.liquid color_scheme="foo" %} -{% endraw %} - -This allows you to switch the scheme via the following javascript. - -```js -jtd.setTheme("foo") -``` - -## Override and define new variables -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -To define new SCSS variables, functions, or override existing theme variables, place SCSS code in `_sass/custom/setup.scss`. This should *not* be used for defining custom styles (see the next section). - -This is most commonly-used to define [custom callout colors]({% link docs/configuration.md %}#callouts). For example, - -```scss -// _sass/custom/setup.scss -$pink-000: #f77ef1; -$pink-100: #f967f1; -$pink-200: #e94ee1; -$pink-300: #dd2cd4; -``` - -In particular: this file is imported *after* the theme's variables and functions are defined, but *before* any CSS classes are emitted. - -## Override and completely custom styles - -For styles that aren't defined as SCSS variables, you may want to modify specific CSS classes. -Additionally, you may want to add completely custom CSS specific to your content. -To do this, put your styles in the file `_sass/custom/custom.scss`. -This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied. - -For example, if you'd like to add your own styles for printing a page, you could add the following styles. - -#### Example -{: .no_toc } - -```scss -// Print-only styles. -@media print { - .side-bar, - .page-header { - display: none; - } - .main-content { - max-width: auto; - margin: 1em; - } -} -``` - -## Override includes - -You can customize the theme by overriding any of the custom [Jekyll includes](https://jekyllrb.com/docs/includes/) files that it provides. - -To do this, create an `_includes` directory and make a copy of the specific file you wish to modify. The content in this file will override the theme defaults. You can learn more about this process in the Jekyll docs for [Overriding theme defaults](https://jekyllrb.com/docs/themes/#overriding-theme-defaults). - -Just the Docs provides the following custom includes files: - -### Custom TOC Heading -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -`_includes/toc_heading_custom.html` - -If the page has any child pages, and `has_toc` is not set to `false`, this content appears as a heading above the [auto-generating list of child pages]({% link docs/navigation-structure.md %}#auto-generating-table-of-contents) after the page's content. - -#### Example -{: .no_toc } - -To change the default TOC heading to "Contents", create `_includes/toc_heading_custom.html` and add: -```html -<h2 class="text-delta">Contents</h2> -``` - -The (optional) `text-delta` class makes the heading appear as **Contents**{:.text-delta} . - -### Custom Footer - -`_includes/footer_custom.html` - -This content appears at the bottom of every page's main content. More info for this include can be found in the [Configuration - Footer content]({% link docs/configuration.md %}#footer-content). - -### Custom Head - -`_includes/head_custom.html` - -Any HTML added to this file will be inserted before the closing `<head>` tag. This might include additional `<meta>`, `<link>`, or `<script>` tags. - -The `<head>` tag automatically includes a link to an existing favicon if you set `favicon_ico` to the corresponding path in your configuration, or if the path to the favicon is `/favicon.ico`. - -### Custom Header - -`_includes/header_custom.html` - -Content added to this file appears at the top of every page's main content between the site search and auxiliary links if they are enabled. If `search_enabled` were set to false and `aux_links` were removed, the content of `header_custom.html` would occupy the space at the top of every page. - -### Custom Nav Footer -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -`_includes/nav_footer_custom.html` - -Any content added to this file will appear at the bottom left of the page below the site's navigation. By default an attribution to Just the Docs is displayed which reads, `This site uses Just the Docs, a documentation theme for Jekyll.`. - -### Custom Search Placeholder -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -`_includes/search_placeholder_custom.html` - -Content added to this file will replace the default placeholder text in the search bar (and its `aria-label`), after stripping HTML and leading/trailing whitespace. By default, the content of the include is: - -{% raw %} - -```liquid -Search {{site.title}} -``` - -{% endraw %} - -Override this file to render a custom placeholder. One common use-case is internationalization; for example, - -{% raw %} - -```liquid -Chercher notre site -``` - -{% endraw %} - -would make the placeholder text "Chercher notre site". [Liquid code](https://jekyllrb.com/docs/liquid/) (including [Jekyll variables](https://jekyllrb.com/docs/variables/)) is also supported. - -## Custom layouts and includes -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -Advanced -{: .label .label-yellow } - -Just the Docs uses Jekyll's powerful [layouts](https://jekyllrb.com/docs/layouts/) and [includes](https://jekyllrb.com/docs/includes/) features to generate and compose various elements of the site. Jekyll users and developers can extend or replace existing layouts and includes to customize the entire site layout. - -### Default layout and includable components - -The `default` layout is inherited by most of the "out-of-the-box" pages provided by Just the Docs. It composes various re-usable components of the site, including the sidebar, navbar, footer, breadcrumbs, and various imports. Most users who create new pages or layouts will inherit from `default`. - -Here is a simplified code example of what it looks like: - -{% raw %} - -```liquid -<!-- a simplified version of _layouts/default.html --> -<html> -{% include head.html %} -<body> - {% include icons/icons.html %} - {% include components/sidebar.html %} - {% include components/header.html %} - {% include components/breadcrumbs.html %} - - {% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content ... %} - {% else %} - {{ content }} - {% endif %} - - {% if page.has_children == true and page.has_toc != false %} - {% include components/children_nav.html %} - {% endif %} - - {% include components/footer.html %} - - {% if site.search_enabled != false %} - {% include components/search_footer.html %} - {% endif %} - - {% if site.mermaid %} - {% include components/mermaid.html %} - {% endif %} -</body> -</html> -``` - -{% endraw %} - -#### Component summary -{: .no_toc } - -{: .warning } -Defining a new `_includes` with the same name as any of these components will significantly change the existing layout. Please proceed with caution when adjusting them. - -To briefly summarize each component: - -- `_includes/head.html` is the entire `<head>` tag for the site; this imports stylesheets, various JavaScript files (ex: analytics, mermaid, search, and Just the Docs code), and SEO / meta information. -- `_includes/icons/icons.html` imports all SVG icons that are used throughout the site. Some, such as those relating to search or code snippet copying, are only loaded when those features are enabled. -- `_includes/components/sidebar.html` renders the sidebar, containing the site header, navigation links, external links, collections, and nav footer. -- `_includes/components/header.html` renders the navigation header, containing the search bar, custom header, and aux links -- `_includes/components/breadcrumbs.html` renders the breadcrumbs feature -- `vendor/anchor_headings.html` is a local copy of Vladimir Jimenez's [jekyll-anchor-headings](https://github.com/allejo/jekyll-anchor-headings) snippet -- `_includes/components/children_nav.html` renders a list of nav links to child pages on parent pages -- `_includes/components/footer.html` renders the bottom-of-page footer -- `_includes/components/search_footer.html` renders DOM elements that are necessary for the search bar to work -- `_includes/components/mermaid.html` initializes mermaid if the feature is enabled - -Each of these components can be overridden individually using the same process described in the [Override includes](#override-includes) section. In particular, the granularity of components should allow users to replace certain components (such as the sidebar) without having to adjust the rest of the code. - -Future versions may subdivide components further; we guarantee that we will only place them in folders (ex `components/`, `icons/`, or a new `js/`) to avoid top-level namespace collisions. - -### Alternative layouts and example (`minimal`) - -Users can develop custom layouts that compose, omit, or add components differently. We provide one first-class example titled `minimal`, inspired by Kevin Lin's work in [just-the-class](https://github.com/kevinlin1/just-the-class). This `minimal` layout does not render the sidebar, header, or search. To see an example, visit the [minimal layout test]({{site.baseurl}}/docs/minimal-test/) page. - -Here is a simplified code example of what it looks like: - -{% raw %} - -```liquid -<!-- a simplified version of _layouts/minimal.html --> -<html> -{% include head.html %} -<body> - {% include icons/icons.html %} - {% comment %} Bandaid fix for breadcrumbs here! {% endcomment %} - {% include components/breadcrumbs.html %} - - {% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content ... %} - {% else %} - {{ content }} - {% endif %} - - {% if page.has_children == true and page.has_toc != false %} - {% include components/children_nav.html %} - {% endif %} - - {% include components/footer.html %} - - {% if site.mermaid %} - {% include components/mermaid.html %} - {% endif %} -</body> -</html> -``` - -{% endraw %} - -This layout is packaged in Just the Docs. Users can indicate this alternative layout in page front matter: - -{% raw %} - -``` ---- -layout: minimal -title: Minimal layout test ---- -``` - -{% endraw %} - -Similarly, users and developers can create other alternative layouts using Just the Docs' reusable includable components. - -### Default layout and inheritance chain - -Under the hood, - -- `default` and `minimal` inherit from the `table_wrappers` layout, which wraps all HTML `<table>` tags with a `div .table-wrapper` -- `table_wrappers` inherits from `vendor/compress`, which is a local copy of Anatol Broder's [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) Jekyll plugin - -Note that as of now, `minimal` and `default` have no inheritance relationship. - -### Overridden default Jekyll layouts - -By default, Jekyll (and its default theme `minima`) provide the `about`, `home`, `page`, and `post` layouts. In Just the Docs, we override all of these layouts with the `default` layout. Each of those layouts is simply: - -{% raw %} - -``` ---- -layout: default ---- - -{{ content }} -``` - -{% endraw %} diff --git a/docs/minimal-test.md b/docs/minimal-test.md deleted file mode 100644 index aa754d31..00000000 --- a/docs/minimal-test.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: minimal -title: Minimal layout test -nav_exclude: true ---- - -[Return to main website]({{site.baseurl}}/). - -This page demonstrates the packaged `minimal` layout, which does not render the sidebar or header. It can be used for standalone pages. It is also an example of using the new modular site components to define custom layouts; see ["Custom layouts and includes" in the customization docs]({{site.baseurl}}/docs/customization/#custom-layouts-and-includes) for more information. diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md deleted file mode 100644 index 1a98113a..00000000 --- a/docs/navigation-structure.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -layout: default -title: Navigation Structure -nav_order: 5 -nav_exclude: true ---- - -# Navigation Structure -{: .no_toc } - -<details open markdown="block"> - <summary> - Table of contents - </summary> - {: .text-delta } -- TOC -{:toc} -</details> - ---- - -## Main navigation - -The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren). - -By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)). - ---- - -## Ordering pages - -To specify a page order, you can use the `nav_order` parameter in your pages' YAML front matter. - -#### Example -{: .no_toc } - -```yaml ---- -layout: default -title: Customization -nav_order: 4 ---- - -``` - -The parameter values determine the order of the top-level pages, and of child pages with the same parent. You can reuse the same parameter values (e.g., integers starting from 1) for the child pages of different parents. - -The parameter values can be numbers (integers, floats) and/or strings. Pages with numerical `nav_order` parameters always come before those with string `nav_order` parameters. When you omit `nav_order` parameters, they default to the titles of the pages. If you want to make the page order independent of the page titles, you can set explicit `nav_order` parameters on all pages. All pages with explicit `nav_order` parameters -come before all pages ordered by their `title` values. - -By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case. Enclosing strings in (single or double) quotation marks is optional. Numeric values are not enclosed in quotation marks, e.g., `42`, `-1.0`; numbers in quotation marks are lexicographically ordered, so `"10"` comes before `"2"`, for example. - ---- - -## Excluding pages - -For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page, use the `nav_exclude: true` parameter in the YAML front matter for that page. - -#### Example -{: .no_toc } - -```yaml ---- -layout: default -title: 404 -nav_exclude: true ---- - -``` - -The `nav_exclude` parameter does not affect the [auto-generating list of child pages](#auto-generating-table-of-contents), which you can use to access pages excluded from the main navigation. - -Pages with no `title` are automatically excluded from the main navigation. - ---- - -## Pages with children - -Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives us an organization like: - -``` -+-- .. -|-- (Jekyll files) -| -|-- docs -| |-- ui-components -| | |-- index.md (parent page) -| | |-- buttons.md -| | |-- code.md -| | |-- labels.md -| | |-- tables.md -| | +-- typography.md -| | -| |-- utilities -| | |-- index.md (parent page) -| | |-- color.md -| | |-- layout.md -| | |-- responsive-modifiers.md -| | +-- typography.md -| | -| |-- (other md files, pages with no children) -| +-- .. -| -|-- (Jekyll files) -+-- .. -``` - -On the parent pages, add this YAML front matter parameter: - -- `has_children: true` (tells us that this is a parent page) - -#### Example -{: .no_toc } - -```yaml ---- -layout: default -title: UI Components -nav_order: 2 -has_children: true ---- - -``` - -Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, which has children and is ordered second in the main nav. - -### Child pages - -{: .text-gamma } - -On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section). - -#### Example -{: .no_toc } - -```yaml ---- -layout: default -title: Buttons -parent: UI Components -nav_order: 2 ---- - -``` - -The Buttons page appears as a child of UI Components and appears second in the UI Components section. - -### Ordering child pages -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -You can optionally add the following to the YAML front matter to reverse the default sort order of child pages: - -- `child_nav_order: reversed` - -#### Example -{: .no_toc } -```yaml ---- -layout: default -title: Reversed Child Pages -child_nav_order: reversed ---- -``` - -### Auto-generating Table of Contents - -By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` in the parent page's YAML front matter. - -#### Example -{: .no_toc } - -```yaml ---- -layout: default -title: UI Components -nav_order: 2 -has_children: true -has_toc: false ---- - -``` - -### Children with children - -{: .text-gamma } - -Child pages can also have children (grandchildren). This is achieved by using a similar pattern on the child and grandchild pages. - -1. Add the `has_children` attribute to the child -1. Add the `parent` and `grand_parent` attribute to the grandchild - -#### Example -{: .no_toc } - -```yaml ---- -layout: default -title: Buttons -parent: UI Components -nav_order: 2 -has_children: true ---- - -``` - -```yaml ---- -layout: default -title: Buttons Child Page -parent: Buttons -grand_parent: UI Components -nav_order: 1 ---- - -``` - -This would create the following navigation structure: - -``` -+-- .. -| -|-- UI Components -| |-- .. -| | -| |-- Buttons -| | |-- Button Child Page -| | -| |-- .. -| -+-- .. -``` - -{: .note } -Currently, the navigation structure is limited to 3 levels: grandchild pages cannot themselves have child pages. - ---- - -## Auxiliary Links - -To add auxiliary links to your site (in the upper right on all pages), add it to the `aux_links` [configuration option]({% link docs/configuration.md %}#aux-links) in your site's `_config.yml` file. - -#### Example -{: .no_toc } - -```yaml -# Aux links for the upper right navigation -aux_links: - "Just the Docs on GitHub": - - "//github.com/just-the-docs/just-the-docs" -``` - ---- - -## External Navigation Links -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -To add external links to the navigation, add them to the `nav_external_links` [configuration]({% link docs/configuration.md %}) option in your site's `_config.yml` file. -External links will appear in the navigation after the links to ordinary pages, but before any collections. - -#### Example -{: .no_toc } - -```yaml -# External navigation links -nav_external_links: - - title: Just the Docs on GitHub - url: https://github.com/just-the-docs/just-the-docs - hide_icon: false # set to true to hide the external link icon - defaults to false -``` - -The external links are decorated by an icon, which distinguishes them from internal links. -You can suppress the icon by setting `hide_icon: true`. - ---- - -## In-page navigation with Table of Contents - -To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in Markdown. This will automatically generate an ordered list of anchor links to various sections of the page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, so to skip a particular heading use the `{: .no_toc }` CSS class. - -#### Example -{: .no_toc } - -```markdown -# Navigation Structure -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} -``` - -This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. To get an unordered list, replace `1. TOC` above by `- TOC`. - -### Collapsible Table of Contents - -The Table of Contents can be made collapsible using the `<details>` and `<summary>` elements , as in the following example. The attribute `open` (expands the Table of Contents by default) and the styling with `{: .text-delta }` are optional. - -```markdown -<details open markdown="block"> - <summary> - Table of contents - </summary> - {: .text-delta } -1. TOC -{:toc} -</details> -``` - -The result is shown at [the top of this page](#navigation-structure) (`{:toc}` can be used only once on each page). diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md deleted file mode 100644 index 249616c5..00000000 --- a/docs/ui-components/buttons.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -layout: default -title: Buttons -parent: UI Components -nav_order: 2 -nav_exclude: true ---- - -# Buttons -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Basic button styles - -### Links that look like buttons - -<div class="code-example" markdown="1"> -[Link button](http://example.com/){: .btn } - -[Link button](http://example.com/){: .btn .btn-purple } -[Link button](http://example.com/){: .btn .btn-blue } -[Link button](http://example.com/){: .btn .btn-green } - -[Link button](http://example.com/){: .btn .btn-outline } -</div> -```markdown -[Link button](http://example.com/){: .btn } - -[Link button](http://example.com/){: .btn .btn-purple } -[Link button](http://example.com/){: .btn .btn-blue } -[Link button](http://example.com/){: .btn .btn-green } - -[Link button](http://example.com/){: .btn .btn-outline } -``` - -### Button element - -GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this: - -<div class="code-example"> -<button type="button" name="button" class="btn">Button element</button> -</div> -```html -<button type="button" name="button" class="btn">Button element</button> -``` - ---- - -## Using utilities with buttons - -### Button size - -Wrap the button in a container that uses the [font-size utility classes]({% link docs/utilities/typography.md %}) to scale buttons: - -<div class="code-example" markdown="1"> -<span class="fs-6"> -[Big ass button](http://example.com/){: .btn } -</span> - -<span class="fs-3"> -[Tiny ass button](http://example.com/){: .btn } -</span> -</div> -```markdown -<span class="fs-8"> -[Link button](http://example.com/){: .btn } -</span> - -<span class="fs-3"> -[Tiny ass button](http://example.com/){: .btn } -</span> -``` - -### Spacing between buttons - -Use the [margin utility classes]({% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block. - -<div class="code-example" markdown="1"> -[Button with space](http://example.com/){: .btn .btn-purple .mr-2 } -[Button](http://example.com/){: .btn .btn-blue } - -[Button with more space](http://example.com/){: .btn .btn-green .mr-4 } -[Button](http://example.com/){: .btn .btn-blue } -</div> -```markdown -[Button with space](http://example.com/){: .btn .btn-purple .mr-2 } -[Button](http://example.com/){: .btn .btn-blue } - -[Button with more space](http://example.com/){: .btn .btn-green .mr-4 } -[Button](http://example.com/){: .btn .btn-blue } -``` diff --git a/docs/ui-components/callouts 2.md b/docs/ui-components/callouts 2.md deleted file mode 100644 index 9ae914de..00000000 --- a/docs/ui-components/callouts 2.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -layout: default -title: Callouts -parent: UI Components -nav_order: 7 -nav_exclude: true ---- - -# Callouts -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: [*block IALs*](https://kramdown.gettalong.org/quickref.html#block-attributes). - -Common kinds of callouts include `highlight`, `important`, `new`, `note`, and `warning`. - -{: .warning } -These callout names are *not* pre-defined by the theme: you need to define your own names. - -When you have [configured]({% link docs/configuration.md %}#callouts) the `color` and (optional) `title` for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.[^postfix] - -[^postfix]: - You can put the callout markup either before or after its content. - -#### An untitled callout -{: .no_toc } - -```markdown -{: .highlight } -A paragraph -``` - -{: .highlight } -A paragraph - - -#### A single paragraph callout -{: .no_toc } - -```markdown -{: .note } -A paragraph -``` - -{: .note } -A paragraph - -```markdown -{: .note-title } -> My note title -> -> A paragraph with a custom title callout -``` - -{: .note-title } -> My note title -> -> A paragraph with a custom title callout - -#### A multi-paragraph callout -{: .no_toc } - -```markdown -{: .important } -> A paragraph -> -> Another paragraph -> -> The last paragraph -``` - -{: .important } -> A paragraph -> -> Another paragraph -> -> The last paragraph - -```markdown -{: .important-title } -> My important title -> -> A paragraph -> -> Another paragraph -> -> The last paragraph -``` - -{: .important-title } -> My important title -> -> A paragraph -> -> Another paragraph -> -> The last paragraph - -#### An indented callout -{: .no_toc } - -```markdown -> {: .highlight } - A paragraph -``` - -> {: .highlight } - A paragraph - -#### Indented multi-paragraph callouts -{: .no_toc } - -```markdown -> {: .new } -> > A paragraph -> > -> > Another paragraph -> > -> > The last paragraph -``` - -> {: .new } -> > A paragraph -> > -> > Another paragraph -> > -> > The last paragraph - - -#### Nested callouts -{: .no_toc } - -```markdown -{: .important } -> {: .warning } -> A paragraph -``` - -{: .important } -> {: .warning } -> A paragraph - -#### Opaque background -{: .no_toc } - -```markdown -{: .important } -> {: .opaque } -> <div markdown="block"> -> {: .warning } -> A paragraph -> </div> -``` - -{: .important } -> {: .opaque } -> <div markdown="block"> -> {: .warning } -> A paragraph -> </div> diff --git a/docs/ui-components/callouts.md b/docs/ui-components/callouts.md deleted file mode 100644 index 9ae914de..00000000 --- a/docs/ui-components/callouts.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -layout: default -title: Callouts -parent: UI Components -nav_order: 7 -nav_exclude: true ---- - -# Callouts -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: [*block IALs*](https://kramdown.gettalong.org/quickref.html#block-attributes). - -Common kinds of callouts include `highlight`, `important`, `new`, `note`, and `warning`. - -{: .warning } -These callout names are *not* pre-defined by the theme: you need to define your own names. - -When you have [configured]({% link docs/configuration.md %}#callouts) the `color` and (optional) `title` for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.[^postfix] - -[^postfix]: - You can put the callout markup either before or after its content. - -#### An untitled callout -{: .no_toc } - -```markdown -{: .highlight } -A paragraph -``` - -{: .highlight } -A paragraph - - -#### A single paragraph callout -{: .no_toc } - -```markdown -{: .note } -A paragraph -``` - -{: .note } -A paragraph - -```markdown -{: .note-title } -> My note title -> -> A paragraph with a custom title callout -``` - -{: .note-title } -> My note title -> -> A paragraph with a custom title callout - -#### A multi-paragraph callout -{: .no_toc } - -```markdown -{: .important } -> A paragraph -> -> Another paragraph -> -> The last paragraph -``` - -{: .important } -> A paragraph -> -> Another paragraph -> -> The last paragraph - -```markdown -{: .important-title } -> My important title -> -> A paragraph -> -> Another paragraph -> -> The last paragraph -``` - -{: .important-title } -> My important title -> -> A paragraph -> -> Another paragraph -> -> The last paragraph - -#### An indented callout -{: .no_toc } - -```markdown -> {: .highlight } - A paragraph -``` - -> {: .highlight } - A paragraph - -#### Indented multi-paragraph callouts -{: .no_toc } - -```markdown -> {: .new } -> > A paragraph -> > -> > Another paragraph -> > -> > The last paragraph -``` - -> {: .new } -> > A paragraph -> > -> > Another paragraph -> > -> > The last paragraph - - -#### Nested callouts -{: .no_toc } - -```markdown -{: .important } -> {: .warning } -> A paragraph -``` - -{: .important } -> {: .warning } -> A paragraph - -#### Opaque background -{: .no_toc } - -```markdown -{: .important } -> {: .opaque } -> <div markdown="block"> -> {: .warning } -> A paragraph -> </div> -``` - -{: .important } -> {: .opaque } -> <div markdown="block"> -> {: .warning } -> A paragraph -> </div> diff --git a/docs/ui-components/code 2.md b/docs/ui-components/code 2.md deleted file mode 100644 index 21debea3..00000000 --- a/docs/ui-components/code 2.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -layout: default -title: Code -parent: UI Components -has_children: true -nav_order: 6 -nav_exclude: true ---- - -# Code -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Inline code - -Code can be rendered inline by wrapping it in single back ticks. - -<div class="code-example" markdown="1"> -Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -## Heading with `<inline code snippet>` in it. -{: .no_toc } -</div> -```markdown -Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -## Heading with `<inline code snippet>` in it. -``` - ---- - -## Syntax highlighted code blocks - -Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name: - -<div class="code-example" markdown="1"> -```js -// Javascript code with syntax highlighting. -var fun = function lang(l) { - dateformat.i18n = require('./lang/' + l) - return true; -} -``` -</div> -{% highlight markdown %} -```js -// Javascript code with syntax highlighting. -var fun = function lang(l) { - dateformat.i18n = require('./lang/' + l) - return true; -} -``` -{% endhighlight %} - ---- - -## Code blocks with rendered examples - -To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta... - -<div class="code-example" markdown="1"> - -<div class="code-example" markdown="1"> - -[Link button](http://example.com/){: .btn } - -</div> -```markdown -[Link button](http://example.com/){: .btn } -``` - -</div> -{% highlight markdown %} -<div class="code-example" markdown="1"> - -[Link button](http://example.com/){: .btn } - -</div> -```markdown -[Link button](http://example.com/){: .btn } -``` -{% endhighlight %} - ---- - -## Mermaid diagram code blocks -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. **It is disabled by default**. However, you can turn on support for mermaid by adding a `mermaid` key to your `_config.yml`. - -The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)): - -```yaml -mermaid: - # Version of mermaid library - # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/ - version: "9.1.3" -``` - -Additional configuration options are loaded through `_includes/mermaid_config.js`. By default, the contents of the file are the empty object: - -```js -// _includes/mermaid_config.js -{} -``` - -This loads the default settings. - -The contents of this object should follow [mermaid's configuration API](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration). For example, to override the theme, change `_includes/mermaid_config.js` to: - -```js -// _includes/mermaid_config.js -{ - theme: "forest" -} -``` - -Once mermaid is installed, it can be used in markdown files. The markdown for a simple flowchart example might look like the following: - -{% highlight markdown %} -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` -{% endhighlight %} - -which renders: - -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -*Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.* - -### Using a local mermaid library - -In order to use a local version of the mermaid library instead of one provided by jsDelivr, you can specify a `path` key in the mermaid configuration instead of a `version` key. - -```yaml -mermaid: - # To load mermaid from a local file use the `path` key to specify the location of the library instead; e.g. - path: "/assets/js/mermaid.min.js" -``` - -## Copy button -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -The copy button for code blocks can be enabled or disabled via the `enable_copy_code_button` key in `_config.yml`. By default, the value of this key is `false`; users need to opt-in. - -```yaml -# For copy button on code -enable_copy_code_button: true -``` - -Note that this feature requires JavaScript; if JavaScript is disabled in the browser, this feature will not work. diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md deleted file mode 100644 index 21debea3..00000000 --- a/docs/ui-components/code.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -layout: default -title: Code -parent: UI Components -has_children: true -nav_order: 6 -nav_exclude: true ---- - -# Code -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Inline code - -Code can be rendered inline by wrapping it in single back ticks. - -<div class="code-example" markdown="1"> -Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -## Heading with `<inline code snippet>` in it. -{: .no_toc } -</div> -```markdown -Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -## Heading with `<inline code snippet>` in it. -``` - ---- - -## Syntax highlighted code blocks - -Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name: - -<div class="code-example" markdown="1"> -```js -// Javascript code with syntax highlighting. -var fun = function lang(l) { - dateformat.i18n = require('./lang/' + l) - return true; -} -``` -</div> -{% highlight markdown %} -```js -// Javascript code with syntax highlighting. -var fun = function lang(l) { - dateformat.i18n = require('./lang/' + l) - return true; -} -``` -{% endhighlight %} - ---- - -## Code blocks with rendered examples - -To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta... - -<div class="code-example" markdown="1"> - -<div class="code-example" markdown="1"> - -[Link button](http://example.com/){: .btn } - -</div> -```markdown -[Link button](http://example.com/){: .btn } -``` - -</div> -{% highlight markdown %} -<div class="code-example" markdown="1"> - -[Link button](http://example.com/){: .btn } - -</div> -```markdown -[Link button](http://example.com/){: .btn } -``` -{% endhighlight %} - ---- - -## Mermaid diagram code blocks -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. **It is disabled by default**. However, you can turn on support for mermaid by adding a `mermaid` key to your `_config.yml`. - -The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)): - -```yaml -mermaid: - # Version of mermaid library - # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/ - version: "9.1.3" -``` - -Additional configuration options are loaded through `_includes/mermaid_config.js`. By default, the contents of the file are the empty object: - -```js -// _includes/mermaid_config.js -{} -``` - -This loads the default settings. - -The contents of this object should follow [mermaid's configuration API](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration). For example, to override the theme, change `_includes/mermaid_config.js` to: - -```js -// _includes/mermaid_config.js -{ - theme: "forest" -} -``` - -Once mermaid is installed, it can be used in markdown files. The markdown for a simple flowchart example might look like the following: - -{% highlight markdown %} -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` -{% endhighlight %} - -which renders: - -```mermaid -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -*Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.* - -### Using a local mermaid library - -In order to use a local version of the mermaid library instead of one provided by jsDelivr, you can specify a `path` key in the mermaid configuration instead of a `version` key. - -```yaml -mermaid: - # To load mermaid from a local file use the `path` key to specify the location of the library instead; e.g. - path: "/assets/js/mermaid.min.js" -``` - -## Copy button -{: .d-inline-block } - -New (v0.4.0) -{: .label .label-green } - -The copy button for code blocks can be enabled or disabled via the `enable_copy_code_button` key in `_config.yml`. By default, the value of this key is `false`; users need to opt-in. - -```yaml -# For copy button on code -enable_copy_code_button: true -``` - -Note that this feature requires JavaScript; if JavaScript is disabled in the browser, this feature will not work. diff --git a/docs/ui-components/line-nos.md b/docs/ui-components/line-nos.md deleted file mode 100644 index 9fb24128..00000000 --- a/docs/ui-components/line-nos.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: default -title: Code with line numbers -parent: Code -grand_parent: UI Components -permalink: /docs/ui-components/code/line-numbers/ -nav_exclude: true ---- - -# Code snippets with line numbers - -The default settings for HTML compression are incompatible with the HTML -produced by Jekyll (4.1.1 or earlier) for line numbers from highlighted code --- both when using Kramdown code fences and when using Liquid highlight tags. - -To avoid non-conforming HTML and unsatisfactory layout, HTML compression -can be turned off by using the following configuration option: - -{% highlight yaml %} -compress_html: - ignore: - envs: all -{% endhighlight %} - -When using Kramdown code fences, line numbers are turned on globally by the -following configuration option: - -{% highlight yaml %} -kramdown: - syntax_highlighter_opts: - block: - line_numbers: true -{% endhighlight %} - -Line numbers can then be suppressed locally using Liquid tags (_without_ the -`linenos` option) instead of fences: - -{% highlight yaml %} -{% raw %}{% highlight some_language %} -Some code -{% endhighlight %}{% endraw %} -{% endhighlight %} - -## Workarounds - -To use HTML compression together with line numbers, all highlighted code -needs to be wrapped using one of the following workarounds. -(The variable name `some_var` can be changed to avoid clashes; it can also -be replaced by `code` -- but note that `code=code` cannot be removed). - -### Code fences (three backticks) - -{% highlight default %} -{% raw %}{% capture some_var %} -```some_language -Some code -``` -{% endcapture %} -{% assign some_var = some_var | markdownify %} -{% include fix_linenos.html code=some_var %}{% endraw %} -{% endhighlight %} - -### Liquid highlighting - -{% highlight default %} -{% raw %}{% capture some_var %} -{% highlight some_language linenos %} -Some code -{% endhighlight %} -{% endcapture %} -{% include fix_linenos.html code=some_var %}{% endraw %} -{% endhighlight %} - -_Credit:_ The original version of the above workaround was suggested by -Dmitry Hrabrov at -<https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901>. - -## Examples - -✅ Using code fences + workaround (will only show line numbers if enabled globally in `_config.yml`): - -{% capture code_fence %} -```js -// Javascript code with syntax highlighting in fences -var fun = function lang(l) { - dateformat.i18n = require('./lang/' + l) - return true; -} -``` -{% endcapture %} -{% assign code_fence = code_fence | markdownify %} -{% include fix_linenos.html code=code_fence %} - -✅ Using liquid highlighting + workaround: - -{% capture code %} -{% highlight ruby linenos %} -# Ruby code with syntax highlighting and fixed line numbers using Liquid -GitHubPages::Dependencies.gems.each do |gem, version| - s.add_dependency(gem, "= #{version}") -end -{% endhighlight %} -{% endcapture %} -{% include fix_linenos.html code=code %} -{% assign code = nil %} - -Narrow code stays close to the line numbers: - -{% capture code %} -{% highlight ruby linenos %} -def foo - puts 'foo' -end -{% endhighlight %} -{% endcapture %} -{% include fix_linenos.html code=code %} -{% assign code = nil %} - -⌠With the compression options used for the theme docs, the following example illustrates -the **incorrect** formatting arising from the incompatibility of HTML compression -and the non-conforming HTML produced by Jekyll for line numbers: - -{% highlight ruby linenos %} -def foo - puts 'foo' -end -{% endhighlight %} diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md deleted file mode 100644 index c5388b59..00000000 --- a/docs/ui-components/typography.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: default -title: Typography -parent: UI Components -nav_order: 1 -nav_exclude: true ---- - -# Typography -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Font stack - -By default, Just the Docs uses a native system font stack for sans-serif fonts: - -```scss -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif -``` - -ABCDEFGHIJKLMNOPQRSTUVWXYZ -abcdefghijklmnopqrstuvwxyz -{: .fs-5 .ls-10 .code-example } - -For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts: - -```scss -"SFMono-Regular", Menlo, Consolas, Monospace -``` - -ABCDEFGHIJKLMNOPQRSTUVWXYZ -abcdefghijklmnopqrstuvwxyz -{: .fs-5 .ls-10 .text-mono .code-example } - ---- - -## Responsive type scale - -Just the Docs uses a responsive type scale that shifts depending on the viewport size. - -| Selector | Small screen size `font-size` | Large screen size `font-size` | -|:----------------------|:---------------------------------|:------------------------------| -| `h1`, `.text-alpha` | 32px | 36px | -| `h2`, `.text-beta` | 18px | 24px | -| `h3`, `.text-gamma` | 16px | 18px | -| `h4`, `.text-delta` | 14px | 16px | -| `h5`, `.text-epsilon` | 16px | 18px | -| `h6`, `.text-zeta` | 18px | 24px | -| `body` | 14px | 16px | - ---- - -## Headings - -Headings are rendered like this: - -<div class="code-example"> -<h1>Heading 1</h1> -<h2>Heading 2</h2> -<h3>Heading 3</h3> -<h4>Heading 4</h4> -<h5>Heading 5</h5> -<h6>Heading 6</h6> -</div> -```markdown -# Heading 1 -## Heading 2 -### Heading 3 -#### Heading 4 -##### Heading 5 -###### Heading 6 -``` - ---- - -## Body text - -Default body text is rendered like this: - -<div class="code-example" markdown="1"> -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -</div> -```markdown -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -``` - ---- - -## Inline elements - -<div class="code-example" markdown="1"> -Text can be **bold**, _italic_, or ~~strikethrough~~. - -[Link to another page](another-page). -</div> -```markdown -Text can be **bold**, _italic_, or ~~strikethrough~~. - -[Link to another page](another-page). -``` - ---- - -## Typographic Utilities - -There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization. - -[View typography utilities]({% link docs/utilities/typography.md %}){: .btn .btn-outline } diff --git a/docs/utilities/color.md b/docs/utilities/color.md deleted file mode 100644 index 6b93e78c..00000000 --- a/docs/utilities/color.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -layout: default -title: Color -parent: Utilities -nav_exclude: true ---- - -# Color Utilities -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes. - -## Light Greys - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-000"></span> `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-100"></span> `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-200"></span> `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-300"></span> `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` | - -## Dark Greys - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` | - -## Purples - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-000"></span> `purple-000` | `.text-purple-000` | `.bg-purple-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-100"></span> `purple-100` | `.text-purple-100` | `.bg-purple-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-200"></span> `purple-200` | `.text-purple-200` | `.bg-purple-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-300"></span> `purple-300` | `.text-purple-300` | `.bg-purple-300` | - -## Blues - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-000"></span> `blue-000` | `.text-blue-000` | `.bg-blue-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-100"></span> `blue-100` | `.text-blue-100` | `.bg-blue-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-200"></span> `blue-200` | `.text-blue-200` | `.bg-blue-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-300"></span> `blue-300` | `.text-blue-300` | `.bg-blue-300` | - -## Greens - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"></span> `green-000` | `.text-green-000` | `.bg-green-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-100"></span> `green-100` | `.text-green-100` | `.bg-green-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-200"></span> `green-200` | `.text-green-200` | `.bg-green-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-300"></span> `green-300` | `.text-green-300` | `.bg-green-300` | - -## Yellows - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"></span> `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-100"></span> `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-200"></span> `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-300"></span> `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` | - -## Reds - -| Color value | Font color utility | Background color utility | -|:---------------|:---------------------|:-------------------------| -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-000"></span> `red-000` | `.text-red-000` | `.bg-red-000` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-100"></span> `red-100` | `.text-red-100` | `.bg-red-100` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-200"></span> `red-200` | `.text-red-200` | `.bg-red-200` | -| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-300"></span> `red-300` | `.text-red-300` | `.bg-red-300` | diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md deleted file mode 100644 index a7a2c8af..00000000 --- a/docs/utilities/layout.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -layout: default -title: Layout -parent: Utilities -nav_exclude: true ---- - -# Layout Utilities -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Spacing - -These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively. - -| Classname prefix | What it does | -|:-----------------|:------------------------------| -| `.m-` | `margin` | -| `.mx-` | `margin-left`, `margin-right` | -| `.my-` | `margin top`, `margin bottom` | -| `.mt-` | `margin-top` | -| `.mr-` | `margin-right` | -| `.mb-` | `margin-bottom` | -| `.ml-` | `margin-left` | - -| Classname prefix | What it does | -|:-----------------|:--------------------------------| -| `.p-` | `padding` | -| `.px-` | `padding-left`, `padding-right` | -| `.py-` | `padding top`, `padding bottom` | -| `.pt-` | `padding-top` | -| `.pr-` | `padding-right` | -| `.pb-` | `padding-bottom` | -| `.pl-` | `padding-left` | - -Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units: - -| Spacer/suffix | Size in rems | Rem converted to px | -|:---------------|:--------------|:--------------------| -| `1` | 0.25rem | 4px | -| `2` | 0.5rem | 8px | -| `3` | 0.75rem | 12px | -| `4` | 1rem | 16px | -| `5` | 1.5rem | 24px | -| `6` | 2rem | 32px | -| `7` | 2.5rem | 40px | -| `8` | 3rem | 48px | -| `auto` | auto | auto | - -Use `mx-auto` to horizontally center elements. - -#### Examples -{: .no_toc } - -In Markdown, use the `{: }` wrapper to apply custom classes: - -```markdown -This paragraph will have a margin bottom of 1rem/16px at large screens. -{: .mb-lg-4 } - -This paragraph will have 2rem/32px of padding on the right and left at all screen sizes. -{: .px-6 } -``` - -## Horizontal Alignment - -| Classname | What it does | -|:------------------------|:---------------------------------| -| `.float-left` | `float: left` | -| `.float-right` | `float: right` | -| `.flex-justify-start` | `justify-content: flex-start` | -| `.flex-justify-end` | `justify-content: flex-end` | -| `.flex-justify-between` | `justify-content: space-between` | -| `.flex-justify-around` | `justify-content: space-around` | - -_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._ - -## Vertical Alignment - -| Classname | What it does | -|:-----------------------|:--------------------------------| -| `.v-align-baseline` | `vertical-align: baseline` | -| `.v-align-bottom` | `vertical-align: bottom` | -| `.v-align-middle` | `vertical-align: middle` | -| `.v-align-text-bottom` | `vertical-align: text-bottom` | -| `.v-align-text-top` | `vertical-align: text-top` | -| `.v-align-top` | `vertical-align: top` | - -## Display - -Display classes aid in adapting the layout of the elements on a page: - -| Class | | -|:------------------|:------------------------| -| `.d-block` | `display: block` | -| `.d-flex` | `display: flex` | -| `.d-inline` | `display: inline` | -| `.d-inline-block` | `display: inline-block` | -| `.d-none` | `display: none` | - -Use these classes in conjunction with the responsive modifiers. - -#### Examples -{: .no_toc } - -In Markdown, use the `{: }` wrapper to apply custom classes: - -```markdown -This button will be hidden until medium screen sizes: - -[ A button ](#url) -{: .d-none .d-md-inline-block } - -These headings will be `inline-block`: - -### heading 3 -{: .d-inline-block } - -### heading 3 -{: .d-inline-block } -``` diff --git a/docs/utilities/responsive-modifiers.md b/docs/utilities/responsive-modifiers.md deleted file mode 100644 index 5e60b630..00000000 --- a/docs/utilities/responsive-modifiers.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default -title: Responsive Modifiers -parent: Utilities -nav_exclude: true ---- - -# Responsive modifiers - -Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes. - -| Modifier | Screen size | -|:----------|:-------------------------------------| -| (none) | All screens until the next modifier | -| `xs` | 320px (20rem) and up | -| `sm` | 500px (31.25rem) and up | -| `md` | 740px (46.25rem) and up | -| `lg` | 1120px (70rem) and up | -| `xl` | 1400px (87.5rem) and up | diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md deleted file mode 100644 index 7a7ef098..00000000 --- a/docs/utilities/typography.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -layout: default -title: Typography -parent: Utilities -nav_exclude: true ---- - -# Typography Utilities -{: .no_toc } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Font size - -Use the `.fs-1` - `.fs-10` to set an explicit font-size. - -| Class | Small screen size `font-size` | Large screen size `font-size` | -|:--------|:-------------------------------|:------------------------------| -| `.fs-1` | 9px | 10px | -| `.fs-2` | 11px | 12px | -| `.fs-3` | 12px | 14px | -| `.fs-4` | 14px | 16px | -| `.fs-5` | 16px | 18px | -| `.fs-6` | 18px | 24px | -| `.fs-7` | 24px | 32px | -| `.fs-8` | 32px | 38px | -| `.fs-9` | 38px | 42px | -| `.fs-10`| 42px | 48px | - -<div class="code-example" markdown="1"> -Font size 1 -{: .fs-1 } -Font size 2 -{: .fs-2 } -Font size 3 -{: .fs-3 } -Font size 4 -{: .fs-4 } -Font size 5 -{: .fs-5 } -Font size 6 -{: .fs-6 } -Font size 7 -{: .fs-7 } -Font size 8 -{: .fs-8 } -Font size 9 -{: .fs-9 } -Font size 10 -{: .fs-10 } -</div> -```markdown -In Markdown, use the `{: }` wrapper to apply custom classes: - -Font size 1 -{: .fs-1 } -Font size 2 -{: .fs-2 } -Font size 3 -{: .fs-3 } -Font size 4 -{: .fs-4 } -Font size 5 -{: .fs-5 } -Font size 6 -{: .fs-6 } -Font size 7 -{: .fs-7 } -Font size 8 -{: .fs-8 } -Font size 9 -{: .fs-9 } -Font size 10 -{: .fs-10 } -``` - -## Font weight - -Use the `.fw-300` - `.fw-700` to set an explicit font-size. - -<div class="code-example" markdown="1"> -Font weight 300 -{: .fw-300 } -Font weight 400 -{: .fw-400 } -Font weight 500 -{: .fw-500 } -Font weight 700 -{: .fw-700 } -</div> -```markdown -In Markdown, use the `{: }` wrapper to apply custom classes: - -Font weight 300 -{: .fw-300 } -Font weight 400 -{: .fw-400 } -Font weight 500 -{: .fw-500 } -Font weight 700 -{: .fw-700 } -``` - -## Line height - -Use the `lh-` classes to explicitly apply line height to text. - -| Class | `line-height` value | Notes | -|:--------------|:---------------------|:------------------------------| -| `.lh-0` | 0 | | -| `.lh-tight` | 1.1 | Default for headings | -| `.lh-default` | 1.4 | Default for body (paragraphs) | - -<div class="code-example" markdown="1"> -No Line height -No Line height -{: .lh-0 } - -Tight line height -Tight line height -{: .lh-tight } - -Default line height -Default line height -{: .fh-default } -</div> -```markdown -In Markdown, use the `{: }` wrapper to apply custom classes: - -No Line height -No Line height -{: .lh-0 } - -Tight line height -Tight line height -{: .lh-tight } - -Default line height -Default line height -{: .fh-default } -``` - -## Text justification - -By default text is justified left. Use these `text-` classes to override settings: - -| Class | What it does | -|:---------------|:---------------------| -| `.text-left` | `text-align: left` | -| `.text-right` | `text-align: right` | -| `.text-center` | `text-align: center` | diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md deleted file mode 100644 index 5180a87d..00000000 --- a/docs/utilities/utilities.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: default -title: Utilities -nav_order: 4 -has_children: true -permalink: docs/utilities -nav_exclude: true ---- - -# Utilities -{: .no_toc } - -CSS utility classes come in handy when you to want to override default styles to create additional whitespace (margins/padding), correct unexpected shifts in font size or weight, add color, or hide (or show) something at a specific screen size. -{: .fs-6 .fw-300 } -- GitLab