{% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="" anchorClass="anchor-heading" %} + {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" %} {% else %} {{ content }} {% endif %} @@ -73,7 +79,7 @@

Table of contents

{% for child in children_list %} {% if child.parent == page.title and child.title != page.title %}
  • - {{ child.title }} + {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %}
    • {% endif %} {% endfor %} diff --git a/_sass/content.scss b/_sass/content.scss index 0ed47fc7e8fe..2940286ff138 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -116,26 +116,37 @@ .anchor-heading { position: absolute; - right: -$sp-3; + right: -$sp-4; width: $sp-5; height: 100%; + padding-right: $sp-1; + padding-left: $sp-1; overflow: visible; - fill: $link-color; - visibility: hidden; @include mq(md) { right: auto; left: -$sp-5; } + + svg { + display: inline-block; + width: 100%; + height: 100%; + fill: $link-color; + visibility: hidden; + } } + .anchor-heading:hover, h1:hover > .anchor-heading, h2:hover > .anchor-heading, h3:hover > .anchor-heading, h4:hover > .anchor-heading, h5:hover > .anchor-heading, h6:hover > .anchor-heading { - visibility: visible; + svg { + visibility: visible; + } } h1, diff --git a/_sass/layout.scss b/_sass/layout.scss index 4c214ea44e75..6644dc3e8b21 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -125,12 +125,12 @@ .site-header { display: flex; + min-height: $header-height; align-items: center; @include mq(md) { z-index: 101; height: $header-height; - min-height: $header-height; max-height: $header-height; border-bottom: $border $border-color; } @@ -142,10 +142,26 @@ display: flex; height: 100%; align-items: center; - padding-top: $gutter-spacing-sm; - padding-bottom: $gutter-spacing-sm; + padding-top: $sp-3; + padding-bottom: $sp-3; color: $body-heading-color; @include fs-6; + + @include mq(md) { + padding-top: $sp-2; + padding-bottom: $sp-2; + } +} + +@if variable-exists(logo) { + .site-logo { + width: 100%; + height: 100%; + background-image: url($logo); + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + } } .menu-button { diff --git a/_sass/overrides.scss b/_sass/overrides.scss new file mode 100644 index 000000000000..21e9527d20b4 --- /dev/null +++ b/_sass/overrides.scss @@ -0,0 +1,3 @@ +// +// Custom overrides from a user. +// diff --git a/_sass/utilities/_lists.scss b/_sass/utilities/_lists.scss index 3c76dcf63885..c7b2293d0f92 100644 --- a/_sass/utilities/_lists.scss +++ b/_sass/utilities/_lists.scss @@ -2,10 +2,16 @@ // Utility classes for lists // -// stylelint-disable primer/selector-no-utility, primer/no-override +// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type .list-style-none { padding: 0 !important; margin: 0 !important; list-style: none !important; + + li { + &::before { + display: none !important; + } + } } diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss index 8b77da6a8642..c524e81286d4 100644 --- a/assets/css/dark-mode-preview.scss +++ b/assets/css/dark-mode-preview.scss @@ -3,6 +3,10 @@ # only Main files contain this front matter, not partials. --- +{% if site.logo %} +$logo: "{{ site.logo | absolute_url }}"; +{% endif %} + // // Import external dependencies // diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 6a2eefa5ca31..199ad89ca35b 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -3,6 +3,10 @@ # only Main files contain this front matter, not partials. --- +{% if site.logo %} +$logo: "{{ site.logo | absolute_url }}"; +{% endif %} + // // Import external dependencies // @@ -42,3 +46,4 @@ @import "./tables"; @import "./code"; @import "./utilities/utilities"; +@import "./overrides"; diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js new file mode 100644 index 000000000000..b9ad81ef4cd6 --- /dev/null +++ b/assets/js/dark-mode-preview.js @@ -0,0 +1,23 @@ +document.addEventListener("DOMContentLoaded", function(){ + + const toggleDarkMode = document.querySelector('.js-toggle-dark-mode') + const cssFile = document.querySelector('[rel="stylesheet"]') + const originalCssRef = cssFile.getAttribute('href') + const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css') + const buttonCopy = ['Return to the light side', 'Preview dark color scheme'] + const updateButtonText = function(toggleDarkMode) { + toggleDarkMode.textContent === buttonCopy[0] ? + toggleDarkMode.textContent = buttonCopy[1] : + toggleDarkMode.textContent = buttonCopy[0] + } + + jtd.addEvent(toggleDarkMode, 'click', function(){ + if (cssFile.getAttribute('href') === originalCssRef) { + cssFile.setAttribute('href', darkModeCssRef) + updateButtonText(toggleDarkMode) + } else { + cssFile.setAttribute('href', originalCssRef) + updateButtonText(toggleDarkMode) + } + }) +}) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index aadbf82670d9..2f6cea0eb55f 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -52,8 +52,13 @@ function initSearch() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); - + + {% if site.search_tokenizer_separator != nil %} + lunr.tokenizer.separator = {{ site.search_tokenizer_separator }} + {% else %} lunr.tokenizer.separator = /[\s\-/]+/ + {% endif %} + var index = lunr(function () { this.ref('id'); this.field('title', { boost: 200 }); diff --git a/assets/js/search-data.json b/assets/js/search-data.json index 6f728cda154c..0532f7c6b72d 100644 --- a/assets/js/search-data.json +++ b/assets/js/search-data.json @@ -1,11 +1,12 @@ --- --- { - {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": { + {% assign comma = false %} + {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": { "title": "{{ page.title | replace: '&', '&' }}", "content": "{{ page.content | markdownify | replace: 'Preview dark color scheme - + See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. diff --git a/docs/customization.md b/docs/customization.md index eccb4bc2791e..883c94c14db1 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -34,20 +34,7 @@ color_scheme: "dark" ``` - + ## Specific visual customization @@ -69,3 +56,20 @@ $link-color: $blue-000; ``` _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail. + +## Override styles + +For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.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;} +} +``` diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index 98107cfcc380..a4fef75ef4a4 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -67,7 +67,7 @@ Sometimes you will want to create a page with many children (a section). First, | |-- docs | |-- ui-components -| | |-- ui-components.md (parent page) +| | |-- index.md (parent page) | | |-- buttons.md | | |-- code.md | | |-- labels.md @@ -75,7 +75,7 @@ Sometimes you will want to create a page with many children (a section). First, | | +-- typography.md | | | |-- utilities -| | |-- utilities.md (parent page) +| | |-- index.md (parent page) | | |-- color.md | | |-- layout.md | | |-- responsive-modifiers.md @@ -88,9 +88,8 @@ Sometimes you will want to create a page with many children (a section). First, +-- .. ``` -On the parent pages, add 2 YAML front matter parameters: +On the parent pages, add this YAML front matter parameter: - `has_children: true` (tells us that this is a parent page) -- `permalink:` set this to the site directory that contains the child pages #### Example {: .no_toc } @@ -101,7 +100,6 @@ layout: default title: UI Components nav_order: 2 has_children: true -permalink: /docs/ui-components --- ``` @@ -140,7 +138,6 @@ title: UI Components nav_order: 2 has_children: true has_toc: false -permalink: /docs/ui-components --- ``` diff --git a/docs/search.md b/docs/search.md index 134e3997bccd..35567863a2e6 100644 --- a/docs/search.md +++ b/docs/search.md @@ -37,13 +37,13 @@ This command creates the `search-data.json` file that Jekyll uses to create your {% raw %}--- --- { - {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": { - "id": "{{ forloop.index0 }}", + {% assign comma = false %} + {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": { "title": "{{ page.title | replace: '&', '&' }}", - "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}", + "content": "{{ page.content | markdownify | replace: ' +{% for contributor in site.github.contributors %} +
  • + {{ contributor.login }} +
    • +{% endfor %} + + ### Code of Conduct Just the Docs is committed to fostering a welcoming community. diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec index ad1c777e43de..4be9738d29fe 100644 --- a/just-the-docs.gemspec +++ b/just-the-docs.gemspec @@ -2,11 +2,11 @@ Gem::Specification.new do |spec| spec.name = "just-the-docs" - spec.version = "0.2.6" + spec.version = "0.2.7" spec.authors = ["Patrick Marsceill"] spec.email = ["patrick.marsceill@gmail.com"] - spec.summary = %q{A modern, high customizable, responsive Jekyll theme for documention with built-in search.} + spec.summary = %q{A modern, highly customizable, and responsive Jekyll theme for documention with built-in search.} spec.homepage = "https://github.com/pmarsceill/just-the-docs" spec.license = "MIT" diff --git a/lib/tasks/search.rake b/lib/tasks/search.rake index 44ee417b68f6..82dcfb6ce9d6 100644 --- a/lib/tasks/search.rake +++ b/lib/tasks/search.rake @@ -4,7 +4,7 @@ namespace :search do puts 'Creating search data json file...' mkdir_p 'assets/js' touch 'assets/js/search-data.json' - content = %Q[{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\\', ' ' | normalize_whitespace }}] + content = %Q[{{ page.content | markdownify | replace: '