thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-17 23:26:27 -05:00
Code Issues Projects Releases Wiki Activity

Merge branch 'v0.2.7-release' into mathjax

Browse Source
This commit is contained in:
Patrick Marsceill 2019-09-09 16:30:59 -04:00 committed by GitHub
commit b44ebe6cb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 147 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_config.yml
View File

@ -21,9 +21,15 @@ url: "https://pmarsceill.github.io" # the base hostname & protocol for your site
permalink: pretty permalink: pretty
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"] exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
# Set a path/url to a logo that will be displayed instead of the title
#logo: "/assets/images/just-the-docs.png"
# Enable or disable the site search # Enable or disable the site search
search_enabled: true search_enabled: true
# Set the search token separator for hyphenated-word search:
search_tokenizer_separator: /[\s/]+/
# Enable or disable heading anchors # Enable or disable heading anchors
heading_anchors: true heading_anchors: true

6
_includes/title.html
View File

@ -1 +1,5 @@
{{ site.title }} {% if site.logo %}
<div class="site-logo"></div>
{% else %}
{{ site.title }}
{% endif %}

10
_layouts/default.html
View File

@ -7,6 +7,12 @@ layout: table_wrappers
<html lang="{{ site.lang | default: "en-US" }}"> <html lang="{{ site.lang | default: "en-US" }}">
{% include head.html %} {% include head.html %}
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="link" viewBox="0 0 16 16">
<title>Link</title>
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
</symbol>
</svg>
<div class="page-wrap"> <div class="page-wrap">
<div class="side-bar"> <div class="side-bar">
@ -60,7 +66,7 @@ layout: table_wrappers
{% endunless %} {% endunless %}
<div id="main-content" class="page-content" role="main"> <div id="main-content" class="page-content" role="main">
{% if site.heading_anchors != false %} {% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="<svg class=\"d-inline-block v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>" anchorClass="anchor-heading" %} {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
{% else %} {% else %}
{{ content }} {{ content }}
{% endif %} {% endif %}
@ -73,7 +79,7 @@ layout: table_wrappers
{% for child in children_list %} {% for child in children_list %}
{% if child.parent == page.title and child.title != page.title %} {% if child.parent == page.title and child.title != page.title %}
<li> <li>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a> <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}

19
_sass/content.scss
View File

@ -116,26 +116,37 @@
.anchor-heading { .anchor-heading {
position: absolute; position: absolute;
right: -$sp-3; right: -$sp-4;
width: $sp-5; width: $sp-5;
height: 100%; height: 100%;
padding-right: $sp-1;
padding-left: $sp-1;
overflow: visible; overflow: visible;
fill: $link-color;
visibility: hidden;
@include mq(md) { @include mq(md) {
right: auto; right: auto;
left: -$sp-5; left: -$sp-5;
} }
svg {
display: inline-block;
width: 100%;
height: 100%;
fill: $link-color;
visibility: hidden;
}
} }
.anchor-heading:hover,
h1:hover > .anchor-heading, h1:hover > .anchor-heading,
h2:hover > .anchor-heading, h2:hover > .anchor-heading,
h3:hover > .anchor-heading, h3:hover > .anchor-heading,
h4:hover > .anchor-heading, h4:hover > .anchor-heading,
h5:hover > .anchor-heading, h5:hover > .anchor-heading,
h6:hover > .anchor-heading { h6:hover > .anchor-heading {
visibility: visible; svg {
visibility: visible;
}
} }
h1, h1,

22
_sass/layout.scss
View File

@ -125,12 +125,12 @@
.site-header { .site-header {
display: flex; display: flex;
min-height: $header-height;
align-items: center; align-items: center;
@include mq(md) { @include mq(md) {
z-index: 101; z-index: 101;
height: $header-height; height: $header-height;
min-height: $header-height;
max-height: $header-height; max-height: $header-height;
border-bottom: $border $border-color; border-bottom: $border $border-color;
} }
@ -142,10 +142,26 @@
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
padding-top: $gutter-spacing-sm; padding-top: $sp-3;
padding-bottom: $gutter-spacing-sm; padding-bottom: $sp-3;
color: $body-heading-color; color: $body-heading-color;
@include fs-6; @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 { .menu-button {

3
_sass/overrides.scss Normal file
View File

@ -0,0 +1,3 @@
//
// Custom overrides from a user.
//

4
assets/css/dark-mode-preview.scss
View File

@ -3,6 +3,10 @@
# only Main files contain this front matter, not partials. # only Main files contain this front matter, not partials.
--- ---
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
// //
// Import external dependencies // Import external dependencies
// //

5
assets/css/just-the-docs.scss
View File

@ -3,6 +3,10 @@
# only Main files contain this front matter, not partials. # only Main files contain this front matter, not partials.
--- ---
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
// //
// Import external dependencies // Import external dependencies
// //
@ -42,3 +46,4 @@
@import "./tables"; @import "./tables";
@import "./code"; @import "./code";
@import "./utilities/utilities"; @import "./utilities/utilities";
@import "./overrides";

23
assets/js/dark-mode-preview.js Normal file
View File

@ -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]
}
addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
updateButtonText(toggleDarkMode)
} else {
cssFile.setAttribute('href', originalCssRef)
updateButtonText(toggleDarkMode)
}
})
})

7
assets/js/just-the-docs.js
View File

@ -52,8 +52,13 @@ function initSearch() {
if (request.status >= 200 && request.status < 400) { if (request.status >= 200 && request.status < 400) {
// Success! // Success!
var data = JSON.parse(request.responseText); var data = JSON.parse(request.responseText);
{% if site.search_tokenizer_separator != nil %}
lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
{% else %}
lunr.tokenizer.separator = /[\s\-/]+/ lunr.tokenizer.separator = /[\s\-/]+/
{% endif %}
var index = lunr(function () { var index = lunr(function () {
this.ref('id'); this.ref('id');
this.field('title', { boost: 200 }); this.field('title', { boost: 200 });

7
assets/js/search-data.json
View File

@ -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: '&amp;', '&' }}", "title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}", "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}",
"url": "{{ page.url | absolute_url }}", "url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url }}" "relUrl": "{{ page.url }}"
}{% unless forloop.last %},{% endunless %} }{% assign comma = true %}
{% endif %}{% endfor %} {% endif %}{% endfor %}
} }

41
docs/configuration.md
View File

@ -22,12 +22,23 @@ Just the Docs has some specific configuration parameters that can be defined in
View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example. View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
## Search enabled ## 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"
```
## Search
```yaml ```yaml
# Enable or disable the site search # Enable or disable the site search
# Support true (default) or false # Supports true (default) or false
search_enabled: true search_enabled: true
# Enable support for hyphenated search words:
search_tokenizer_separator: /[\s/]+/
``` ```
## Aux links ## Aux links
@ -35,18 +46,17 @@ search_enabled: true
```yaml ```yaml
# Aux links for the upper right navigation # Aux links for the upper right navigation
aux_links: aux_links:
"Just the Docs on GitHub": "Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs" - "//github.com/pmarsceill/just-the-docs"
``` ```
## Heading anchor links ## Heading anchor links
```yaml ```yaml
# Heading anchor links appear on hover over h1-h6 tags # Heading anchor links appear on hover over h1-h6 tags in page content
# in page content allowing users to deep link to a particular # allowing users to deep link to a particular heading on a page.
# heading on a page.
# #
# Supprts true (default) or false/nil # Supports true (default) or false/nil
heading_anchors: true heading_anchors: true
``` ```
@ -65,20 +75,7 @@ color_scheme: "dark"
``` ```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script> <script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
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');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef);
} else {
cssFile.setAttribute('href', originalCssRef);
}
})
</script>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

32
docs/customization.md
View File

@ -34,20 +34,7 @@ color_scheme: "dark"
``` ```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script> <script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
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');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef);
} else {
cssFile.setAttribute('href', originalCssRef);
}
})
</script>
## Specific visual customization ## 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. _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
## Override styles
To add your own CSS at the end of the cascade, edit `_sass/overrides.scss` to add in your own custom CSS. This will allow for all overrides to be kept in a single file, and allow for any upstream changes to still be allowed.
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;}
}
```

9
docs/navigation-structure.md
View File

@ -67,7 +67,7 @@ Sometimes you will want to create a page with many children (a section). First,
| |
|-- docs |-- docs
| |-- ui-components | |-- ui-components
| | |-- ui-components.md (parent page) | | |-- index.md (parent page)
| | |-- buttons.md | | |-- buttons.md
| | |-- code.md | | |-- code.md
| | |-- labels.md | | |-- labels.md
@ -75,7 +75,7 @@ Sometimes you will want to create a page with many children (a section). First,
| | +-- typography.md | | +-- typography.md
| | | |
| |-- utilities | |-- utilities
| | |-- utilities.md (parent page) | | |-- index.md (parent page)
| | |-- color.md | | |-- color.md
| | |-- layout.md | | |-- layout.md
| | |-- responsive-modifiers.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) - `has_children: true` (tells us that this is a parent page)
- `permalink:` set this to the site directory that contains the child pages
#### Example #### Example
{: .no_toc } {: .no_toc }
@ -101,7 +100,6 @@ layout: default
title: UI Components title: UI Components
nav_order: 2 nav_order: 2
has_children: true has_children: true
permalink: /docs/ui-components
--- ---
``` ```
@ -140,7 +138,6 @@ title: UI Components
nav_order: 2 nav_order: 2
has_children: true has_children: true
has_toc: false has_toc: false
permalink: /docs/ui-components
--- ---
``` ```

16
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "just-the-docs", "name": "just-the-docs",
"version": "0.2.5", "version": "0.2.6",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -177,11 +177,11 @@
"dev": true "dev": true
}, },
"@primer/css": { "@primer/css": {
"version": "12.6.0", "version": "12.7.0",
"resolved": "https://registry.npmjs.org/@primer/css/-/css-12.6.0.tgz", "resolved": "https://registry.npmjs.org/@primer/css/-/css-12.7.0.tgz",
"integrity": "sha512-GzQr/MPCbTlgvAd4bEXy4RA5cZvz7k/wkCzG7sOmjB9g9EtGnkzmLz6aS58EBRJsxfe6QU/iZ2/N/66/Bn5eZA==", "integrity": "sha512-EVqfwX1jxKWQoV9IxxCJQG7HlyKefdkYTJdnDV43Rr1cyidUTkQN9W0uMuN+RD9cmAzip/40b2E+7gsvsFDmBA==",
"requires": { "requires": {
"@primer/octicons": "9.1.1" "@primer/octicons": "^9.1.1"
} }
}, },
"@primer/octicons": { "@primer/octicons": {
@ -2776,9 +2776,9 @@
} }
}, },
"mixin-deep": { "mixin-deep": {
"version": "1.3.1", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
"integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
"dev": true, "dev": true,
"requires": { "requires": {
"for-in": "^1.0.2", "for-in": "^1.0.2",

2
package.json
View File

@ -11,7 +11,7 @@
"stylelint-selector-no-utility": "^4.0.0" "stylelint-selector-no-utility": "^4.0.0"
}, },
"dependencies": { "dependencies": {
"@primer/css": "^12.6.0" "@primer/css": "^12.7.0"
}, },
"scripts": { "scripts": {
"test": "stylelint '**/*.scss'" "test": "stylelint '**/*.scss'"