зеркало из https://github.com/github/mlops.git
Merge branch 'master' of github.com:machine-learning-apps/website
This commit is contained in:
Hamel Husain
Коммит
cbe042ec30
12
Gemfile.lock
12
Gemfile.lock
|
|
@ -10,11 +10,11 @@ GEM
|
|||
http_parser.rb (~> 0.6.0)
|
||||
eventmachine (1.2.7)
|
||||
eventmachine (1.2.7-x64-mingw32)
|
||||
ffi (1.12.2)
|
||||
ffi (1.12.2-x64-mingw32)
|
||||
ffi (1.13.1)
|
||||
ffi (1.13.1-x64-mingw32)
|
||||
forwardable-extended (2.6.0)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (1.8.2)
|
||||
i18n (1.8.3)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.1.0)
|
||||
addressable (~> 2.4)
|
||||
|
|
@ -59,11 +59,11 @@ GEM
|
|||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.4)
|
||||
rouge (3.19.0)
|
||||
rouge (3.20.0)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.3.0)
|
||||
sassc (2.4.0)
|
||||
ffi (~> 1.9)
|
||||
sassc (2.3.0-x64-mingw32)
|
||||
sassc (2.4.0-x64-mingw32)
|
||||
ffi (~> 1.9)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@ defaults:
|
|||
values:
|
||||
layout: "document"
|
||||
|
||||
# markdown_extensions:
|
||||
# - toc:
|
||||
# baselevel: 2
|
||||
# toc_depth : "2-3"
|
||||
|
||||
google_analytics: UA-57531313-6
|
||||
|
||||
|
|
|
|||
|
|
@ -2,48 +2,24 @@
|
|||
title: Issue Label Bot
|
||||
description: A GitHub App powered by machine learning, written in Python. A discussion of the motivation for building this app is described in this blog.
|
||||
|
||||
titles:
|
||||
- Important links
|
||||
- Files
|
||||
- Prerequisites
|
||||
- Environment Variables
|
||||
- Run Locally
|
||||
- Deploy As A Service
|
||||
- Contributing
|
||||
tags: [markdown, opera, github]
|
||||
order_n: 1
|
||||
---
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
[](https://www.python.org/downloads/release/python-360/) [](https://opensource.org/licenses/MIT)
|
||||
[](https://github.com/marketplace/issue-label-bot)
|
||||
|
||||
|
||||
|
||||
|
||||
[blog]: https://medium.com/@hamelhusain/mlapp-419f90e8f007?source=friends_link&sk=760e18a2d6e60999d7eb2887352a92a8
|
||||
[blog]: (https://medium.com/@hamelhusain/mlapp-419f90e8f007?source=friends_link&sk=760e18a2d6e60999d7eb2887352a92a8)
|
||||
|
||||
##### Code for: ["How to automate tasks on GitHub with machine learning for fun and profit"][blog]
|
||||
|
||||
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->
|
||||
Table of Contents
|
||||
|
||||
- [Issue-Label Bot](#issue-label-bot)
|
||||
- [Important links](#important-links)
|
||||
- [Files](#files)
|
||||
- [Running This Code](#running-this-code)
|
||||
- [Environment Variables](#environment-variables)
|
||||
- [Run Locally](#run-locally)
|
||||
- [Deploy As A Service](#deploy-as-a-service)
|
||||
- [Contributing](#contributing)
|
||||
- [Roadmap](#roadmap)
|
||||
- [References](#references)
|
||||
- [Disclaimers](#disclaimers)
|
||||
|
||||
<!-- /TOC -->
|
||||
{:.no_toc}
|
||||
|
||||
Original Authors: [@hamelsmu](https://github.com/hamelsmu), [@inc0](https://github.com/inc0), [@jlewi](https://github.com/jlewi)
|
||||
|
||||
<h1><img src="https://github.com/machine-learning-apps/MLapp/blob/master/images/Issue-Label-Bot7.png" width="100" height="100">Issue Label Bot</h1>
|
||||
<h1><img src="https://github.com/machine-learning-apps/MLapp/raw/master/images/Issue-Label-Bot7.png" width="100" height="100">Issue Label Bot</h1>
|
||||
|
||||
**Install this app [from the GitHub marketplace](https://github.com/marketplace/issue-label-bot)**
|
||||
|
||||
|
|
@ -51,7 +27,7 @@ A GitHub App powered by machine learning, written in Python. A discussion of th
|
|||
|
||||
When an issue is opened, the bot predicts if the label should be a: `feature request`, `bug` or `question` and applies a label automatically if appropriate. Here is a screenshot of the bot in action:
|
||||
|
||||
> 
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,14 @@
|
|||
---
|
||||
title: Markdown Here
|
||||
description: Markdown Here is a Google Chrome, Firefox, Safari, Opera, and Thunderbird extension that lets you write email<sup>†</sup> in Markdown<sup>‡</sup> and render them before sending. It also supports syntax highlighting (just specify the language in a fenced code block).
|
||||
titles:
|
||||
- Markdown Here
|
||||
- Table of Contents
|
||||
- Installation Instructions
|
||||
- Manual/Development
|
||||
- Mozilla Add-ons site
|
||||
- Things to know about converting/reverting a selection
|
||||
- Next Steps
|
||||
|
||||
tags: [markdown, opera, github]
|
||||
order_n: 2
|
||||
---
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
[**Visit the website.**](http://markdown-here.com)<br>
|
||||
[**Get it for Chrome.**](https://chrome.google.com/webstore/detail/elifhakcjgalahccnjkneoccemfahfoa)<br>
|
||||
[**Get it for Firefox.**](https://addons.mozilla.org/en-US/firefox/addon/markdown-here/)<br>
|
||||
|
|
@ -32,26 +28,21 @@ To discover what can be done with Markdown in *Markdown Here*, check out the [Ma
|
|||
|
||||
|
||||
|
||||
### Table of Contents
|
||||
**[Installation Instructions](#installation-instructions)**<br>
|
||||
**[Usage Instructions](#usage-instructions)**<br>
|
||||
**[Troubleshooting](#troubleshooting)**<br>
|
||||
**[Compatibility](#compatibility)**<br>
|
||||
**[Notes and Miscellaneous](#notes-and-miscellaneous)**<br>
|
||||
**[Building the Extension Bundles](#building-the-extension-bundles)**<br>
|
||||
**[Next Steps, Credits, Feedback, License](#next-steps)**<br>
|
||||
|
||||
## Installation Instructions
|
||||
|
||||
### Chrome
|
||||
{: .no_toc}
|
||||
|
||||
#### Chrome Web Store
|
||||
{: .no_toc}
|
||||
|
||||
Go to the [Chrome Web Store page for *Markdown Here*](https://chrome.google.com/webstore/detail/elifhakcjgalahccnjkneoccemfahfoa) and install normally.
|
||||
|
||||
After installing, make sure to reload your webmail or restart Chrome!
|
||||
|
||||
#### Manual/Development
|
||||
{: .no_toc}
|
||||
|
||||
1. Clone this repo.
|
||||
2. In Chrome, open the Extensions settings. (Wrench button, Tools, Extensions.)
|
||||
|
|
@ -61,8 +52,10 @@ After installing, make sure to reload your webmail or restart Chrome!
|
|||
6. Reload your webmail page (and maybe application) before trying to convert an email.
|
||||
|
||||
### Firefox and Thunderbird
|
||||
{: .no_toc}
|
||||
|
||||
#### Mozilla Add-ons site
|
||||
{: .no_toc}
|
||||
|
||||
Go to the [Firefox Add-ons page for *Markdown Here*](https://addons.mozilla.org/en-US/firefox/addon/markdown-here/) and install normally.
|
||||
|
||||
|
|
@ -73,19 +66,23 @@ After installing, make sure to restart Firefox/Thunderbird!
|
|||
**Note:** It takes up to a month for Mozilla to approve changes to the Firefox/Thunderbird extension, so updates (features, fixes) will lag behind what is shown here. You can manually choose to install the newest version before it's reviewed from the list of versions: [https://addons.mozilla.org/en-US/firefox/addon/markdown-here/versions/](https://addons.mozilla.org/en-US/firefox/addon/markdown-here/versions/)
|
||||
|
||||
#### Manual/Development
|
||||
{: .no_toc}
|
||||
|
||||
1. Clone this repo.
|
||||
2. Follow the instructions in the MDN ["Setting up an extension development environment"](https://developer.mozilla.org/en/Setting_up_extension_development_environment) article.
|
||||
|
||||
### Safari
|
||||
{: .no_toc}
|
||||
|
||||
[Download the extension directly.](https://s3.amazonaws.com/markdown-here/markdown-here.safariextz) When it has finished downloading, double click it to install.
|
||||
|
||||
#### Preferences
|
||||
{: .no_toc}
|
||||
|
||||
To get to the Markdown Here preferences, open the Safari preferences and then go to the "Extensions" tab. Then click the "Click me to show Markdown Here options" box.
|
||||
|
||||
### Opera
|
||||
{: .no_toc}
|
||||
|
||||
Note that *Markdown Here* only works with Opera versions 16 and higher (i.e., the ones that are based on Chromium).
|
||||
|
||||
|
|
@ -117,6 +114,7 @@ Install it, and then…
|
|||
7. Send your awesome email to everyone you know. It will appear to them the same way it looks to you.
|
||||
|
||||
### Revert to Markdown
|
||||
{: .no_toc}
|
||||
|
||||
After rendering your Markdown to pretty HTML, you can still get back to your original Markdown. Just right-click anywhere in the newly rendered Markdown and click "Markdown Toggle" -- your email compose body will change back to the Markdown you had written.
|
||||
|
||||
|
|
@ -125,12 +123,14 @@ Note that any changes you make to the pretty HTML will be lost when you revert t
|
|||
In Gmail, you can also use the browser's Undo command (<kbd>CTRL</kbd>+<kbd>Z</kbd> / <kbd>CMD</kbd>+<kbd>Z</kbd>, or from the Edit menu). Be warned that you might also lose the last few characters you entered.
|
||||
|
||||
### Replies
|
||||
{: .no_toc}
|
||||
|
||||
In Gmail, Thunderbird, and Google Groups, you can use "Markdown Toggle" normally: just write your reply (top, bottom, inline, wherever) and then convert. The original email that you're replying to will be left alone. (Technically: Existing `blockquote` blocks will be left intact.)
|
||||
|
||||
In Hotmail and Yahoo (which don't put the original in a `blockquote`), and optionally in Gmail, Thunderbird, and Google Groups, you can ensure that only the part of the reply that you wrote gets converted by selecting what you want to convert and then clicking "Markdown Toggle" -- see the next section.
|
||||
|
||||
### Selection/Piecemeal Conversion
|
||||
{: .no_toc}
|
||||
|
||||
Sometimes you don't want to convert the entire email; sometimes your email isn't entirely Markdown. To convert only part of the email, select the text (with your mouse or keyboard), right-click on it, and click the "Markdown Toggle" menu item. Your selection is magically rendered into pretty HTML.
|
||||
|
||||
|
|
@ -139,6 +139,7 @@ To revert back to Markdown, just put your cursor anywhere in the block of conver
|
|||
|
||||
|
||||
#### Things to know about converting/reverting a selection
|
||||
{: .no_toc}
|
||||
|
||||
* If you select only part of a block of text, only that text will be converted. The converted block will be wrapped in a paragraph element, so the original line will be broken up. You probably don't want to ever do this.
|
||||
|
||||
|
|
@ -147,6 +148,7 @@ To revert back to Markdown, just put your cursor anywhere in the block of conver
|
|||
* If you don't have anything selected when you click "Markdown Toggle", *Markdown Here* will check if there are converted blocks anywhere in the message and revert them. If there no converted blocks are found, it will convert the entire email.
|
||||
|
||||
### Options
|
||||
{: .no_toc}
|
||||
|
||||
The *Markdown Here* Options page can be accessed via the Chrome, Firefox, Safari, or Thunderbird extensions list. The available options include:
|
||||
|
||||
|
|
@ -198,6 +200,7 @@ node build.js
|
|||
|
||||
|
||||
### Chrome and Opera extension
|
||||
{: .no_toc}
|
||||
|
||||
Create a file with a `.zip` extension containing these files and directories:
|
||||
|
||||
|
|
@ -208,6 +211,7 @@ chrome/
|
|||
```
|
||||
|
||||
### Firefox/Thunderbird extension
|
||||
{: .no_toc}
|
||||
|
||||
Create a file with a `.xpi` extension containing these files and directories:
|
||||
|
||||
|
|
@ -219,6 +223,7 @@ firefox/
|
|||
```
|
||||
|
||||
### Safari extension
|
||||
{: .no_toc}
|
||||
|
||||
The browser-specific code is located in the [`markdown-here-safari`](https://github.com/adam-p/markdown-here-safari) project.
|
||||
|
||||
|
|
@ -247,14 +252,17 @@ All bugs, feature requests, pull requests, feedback, etc., are welcome. [Create
|
|||
## License
|
||||
|
||||
### Code
|
||||
{: .no_toc}
|
||||
|
||||
MIT License: http://adampritchard.mit-license.org/ or see [the `LICENSE` file](https://github.com/adam-p/markdown-here/blob/master/LICENSE).
|
||||
|
||||
### Logo
|
||||
{: .no_toc}
|
||||
|
||||
Copyright 2015, [Austin Anderson](http://protractor.ninja/). Licensed to Markdown Here under the [MDH contributor license agreement](https://github.com/adam-p/markdown-here/blob/master/CLA-individual.md).
|
||||
|
||||
### Other images
|
||||
{: .no_toc}
|
||||
|
||||
[Creative Commons Attribution 3.0 Unported (CC BY 3.0) License](http://creativecommons.org/licenses/by/3.0/)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
layout: document
|
||||
title: Sources for markdown
|
||||
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae felis vitae leo ornare auctor. Aenean nec magna elementum, euismod lectus et, commodo magna. Nunc eget urna in nisl tempor rutrum a in augue.
|
||||
titles:
|
||||
- Sources for markdown
|
||||
- Heading One
|
||||
|
||||
tags: [markdown, source]
|
||||
order_n: 3
|
||||
---
|
||||
|
|
@ -17,6 +15,9 @@ Style inspiration for the site layout:
|
|||
|
||||
https://www.jetbrains.com/help/pycharm/quick-start-guide.html
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
# Heading One
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae felis vitae leo ornare auctor. Aenean nec magna elementum, euismod lectus et, commodo magna. Nunc eget urna in nisl tempor rutrum a in augue.
|
||||
|
||||
|
|
@ -27,11 +28,16 @@ Integer eu aliquet turpis. Sed ipsum diam, fermentum non leo et, imperdiet fauci
|
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae felis vitae leo ornare auctor. Aenean nec magna elementum, euismod lectus et, commodo magna. Nunc eget urna in nisl tempor rutrum a in augue.
|
||||
|
||||
### Heading Three
|
||||
{: .no_toc}
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae felis vitae leo ornare auctor. Aenean nec magna elementum, euismod lectus et, commodo magna. Nunc eget urna in nisl tempor rutrum a in augue.
|
||||
|
||||
#### Heading Four
|
||||
{: .no_toc}
|
||||
##### Heading Five
|
||||
{: .no_toc}
|
||||
###### Heading Six
|
||||
{: .no_toc}
|
||||
|
||||
Unordered list
|
||||
- This is a list 1
|
||||
|
|
@ -52,6 +58,7 @@ Indented list
|
|||
- Fourth item
|
||||
|
||||
### Underline
|
||||
{: .no_toc}
|
||||
|
||||
Does it work?
|
||||
|
||||
|
|
@ -60,6 +67,7 @@ Does it work?
|
|||
Yes it does.
|
||||
|
||||
### Blockquotes
|
||||
{: .no_toc}
|
||||
|
||||
> Blockquotes are very handy
|
||||
> This line is part of the same quote.
|
||||
|
|
@ -78,6 +86,7 @@ Blockquotes can be nested
|
|||
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
|
||||
|
||||
### Code with syntax highlighting
|
||||
{: .no_toc}
|
||||
|
||||
This is a test of `some inline code` and whether it formats `correctly`.
|
||||
|
||||
|
|
@ -102,6 +111,7 @@ def f(x):
|
|||
```
|
||||
|
||||
### Tables
|
||||
{: .no_toc}
|
||||
|
||||
SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
title: Configuration
|
||||
order_n: 2
|
||||
---
|
||||
|
||||
|
||||
|
||||
Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's _config.yml file.
|
||||
|
||||
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
|
||||
View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_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"
|
||||
```
|
||||
|
||||
## Search
|
||||
|
||||
```yaml
|
||||
# Enable or disable the site search
|
||||
# Supports true (default) or false
|
||||
search_enabled: true
|
||||
|
||||
# Enable support for hyphenated search words:
|
||||
search_tokenizer_separator: /[\s/]+/
|
||||
|
||||
```
|
||||
|
||||
## Aux links
|
||||
|
||||
```yaml
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
```
|
||||
|
||||
## 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/nil
|
||||
heading_anchors: true
|
||||
```
|
||||
|
||||
## Footer content
|
||||
|
||||
```yaml
|
||||
# Footer content appears at the bottom of every page's main content
|
||||
footer_content: "Copyright © 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
|
||||
```
|
||||
|
||||
## Color scheme
|
||||
|
||||
```yaml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: "dark"
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||||
|
||||
|
||||
|
||||
## Google Analytics
|
||||
|
||||
```yaml
|
||||
# Google Analytics Tracking (optional)
|
||||
# e.g, UA-1234567-89
|
||||
ga_tracking: UA-5555555-55
|
||||
```
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: Customization
|
||||
order_n: 6
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Color schemes
|
||||
{: .d-inline-block }
|
||||
|
||||
New
|
||||
{: .label .label-green }
|
||||
|
||||
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 currently only supports "dark" or nil (default)
|
||||
color_scheme: "dark"
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||||
|
||||
## Specific visual customization
|
||||
|
||||
To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value.
|
||||
|
||||
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```scss
|
||||
// ...
|
||||
//
|
||||
// $body-text-color: $grey-dk-100;
|
||||
// $body-heading-color: $grey-dk-300;
|
||||
$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;}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
---
|
||||
title: Markdown kitchen sink
|
||||
order_n: 99
|
||||
---
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
|
||||
There should be whitespace between paragraphs.
|
||||
|
||||
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
|
||||
|
||||
# [](#header-1)Header 1
|
||||
|
||||
This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
|
||||
|
||||
## [](#header-2)Header 2
|
||||
|
||||
> This is a blockquote following a header.
|
||||
>
|
||||
> When something is important enough, you do it even if the odds are not in your favor.
|
||||
|
||||
### [](#header-3)Header 3
|
||||
{:no_toc}
|
||||
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
```ruby
|
||||
# Ruby code with syntax highlighting
|
||||
GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
s.add_dependency(gem, "= #{version}")
|
||||
end
|
||||
```
|
||||
|
||||
#### [](#header-4)Header 4
|
||||
{:no_toc}
|
||||
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
|
||||
##### [](#header-5)Header 5
|
||||
{:no_toc}
|
||||
|
||||
1. This is an ordered list following a header.
|
||||
2. This is an ordered list following a header.
|
||||
3. This is an ordered list following a header.
|
||||
|
||||
###### [](#header-6)Header 6
|
||||
{:no_toc}
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
### There's a horizontal rule below this.
|
||||
{:no_toc}
|
||||
|
||||
* * *
|
||||
|
||||
### Here is an unordered list:
|
||||
{:no_toc}
|
||||
|
||||
* Item foo
|
||||
* Item bar
|
||||
* Item baz
|
||||
* Item zip
|
||||
|
||||
### And an ordered list:
|
||||
{:no_toc}
|
||||
|
||||
1. Item one
|
||||
1. Item two
|
||||
1. Item three
|
||||
1. Item four
|
||||
|
||||
### And a nested list:
|
||||
{:no_toc}
|
||||
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 3 item
|
||||
- level 3 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
|
||||
### Nesting an ol in ul in an ol
|
||||
{:no_toc}
|
||||
|
||||
- level 1 item (ul)
|
||||
1. level 2 item (ol)
|
||||
1. level 2 item (ol)
|
||||
- level 3 item (ul)
|
||||
- level 3 item (ul)
|
||||
- level 1 item (ul)
|
||||
1. level 2 item (ol)
|
||||
1. level 2 item (ol)
|
||||
- level 3 item (ul)
|
||||
- level 3 item (ul)
|
||||
1. level 4 item (ol)
|
||||
1. level 4 item (ol)
|
||||
- level 3 item (ul)
|
||||
- level 3 item (ul)
|
||||
- level 1 item (ul)
|
||||
|
||||
### And a task list
|
||||
{:no_toc}
|
||||
|
||||
- [ ] Hello, this is a TODO item
|
||||
- [ ] Hello, this is another TODO item
|
||||
- [x] Goodbye, this item is done
|
||||
|
||||
### Small image
|
||||
{:no_toc}
|
||||
|
||||
|
||||
|
||||
### Large image
|
||||
{:no_toc}
|
||||
|
||||
|
||||
|
||||
|
||||
### Definition lists can be used with HTML syntax.
|
||||
{:no_toc}
|
||||
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
|
||||
```
|
||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||
```
|
||||
|
||||
```
|
||||
The final element.
|
||||
```
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
---
|
||||
layout: document
|
||||
title: Navigation Structure
|
||||
order_n: 5
|
||||
---
|
||||
|
||||
# Navigation Structure
|
||||
{: .no_toc }
|
||||
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## 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, use the `order_n` parameter in your pages' YAML front matter.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Customization
|
||||
order_n: 4
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
order_n: 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
|
||||
order_n: 2
|
||||
---
|
||||
```
|
||||
|
||||
The Buttons page appears as a child of UI Components and appears second in the UI Components section.
|
||||
|
||||
### 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
|
||||
order_n: 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
|
||||
order_n: 2
|
||||
has_children: true
|
||||
---
|
||||
```
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons Child Page
|
||||
parent: Buttons
|
||||
grand_parent: UI Components
|
||||
order_n: 1
|
||||
---
|
||||
```
|
||||
|
||||
This would create the following navigation structure:
|
||||
|
||||
```
|
||||
+-- ..
|
||||
|
|
||||
|-- UI Components
|
||||
| |-- ..
|
||||
| |
|
||||
| |-- Buttons
|
||||
| | |-- Button Child Page
|
||||
| |
|
||||
| |-- ..
|
||||
|
|
||||
+-- ..
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Auxiliary Navigation
|
||||
|
||||
To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 }
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
|
@ -2,20 +2,20 @@
|
|||
layout: document
|
||||
title: Read Me
|
||||
description: Create a Jekyll generated Static Site according to the following design specification. Provide me the Jekyll code and I will take care of creating and hosting it on my GitHub Pages repository.
|
||||
titles:
|
||||
- Request
|
||||
- What I want to achieve
|
||||
- Design
|
||||
- Advanced features of this site which are not needed
|
||||
|
||||
order_n: 0
|
||||
tags: [jekyll]
|
||||
---
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
# Request:
|
||||
|
||||
Create a Jekyll generated Static Site according to the following design specification. Provide me the Jekyll code and I will take care of creating and hosting it on my GitHub Pages repository.
|
||||
|
||||
### What I want to achieve:
|
||||
{: .no_toc}
|
||||
|
||||
This is a site primarily for writing content such as software instructions or lecture notes. I would like to easily sort content (posts) by category or date. Content should be written in markdown and I only want to store content in the "_posts" folder (no pages such as "About Me" are needed).
|
||||
|
||||
|
|
@ -25,6 +25,7 @@ It is important to use **as little code as possible** to achieve this design. I
|
|||
The design should match [this site](https://www.jetbrains.com/help/pycharm) by Jetbrains as closely as possible. Layout should react the same way as this site does to a pc screen or smarthphone, especially the left menu. Same formatting of links.
|
||||
|
||||
### Sections that are needed:
|
||||
{: .no_toc}
|
||||
- A top bar with webpage title
|
||||
- A search box also shown in the top bar
|
||||
- A left menu showing post titles sorted by category or date. See below for further information (Left menu functionality is NB).
|
||||
|
|
@ -39,12 +40,14 @@ I need the following **markdown features** to be processed similar to the above
|
|||
- If possible: Python syntax highlighting supported by GFM and also shown [here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
|
||||
### Advanced features of this site which are not needed:
|
||||
{: .no_toc}
|
||||
- The right column showing Header titles of the current page.
|
||||
- When using a smartphone, the left menu shows the header titles of current page under the term "On this page"
|
||||
- Previous post and Next Post
|
||||
|
||||
|
||||
### Parameters
|
||||
{: .no_toc}
|
||||
Parameters should be kept in the main jekyll config file:
|
||||
- Title
|
||||
- Website address, if not using the default '___.github.io/"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
layout: document
|
||||
title: Search
|
||||
order_n: 7
|
||||
---
|
||||
|
||||
# Search
|
||||
{: .no_toc }
|
||||
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated HTML pages are indexed using the following data points:
|
||||
|
||||
- Page title
|
||||
- Page content
|
||||
- Page URL
|
||||
|
||||
## Set up search
|
||||
|
||||
### Generate search index
|
||||
|
||||
Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
|
||||
|
||||
```bash
|
||||
$ bundle exec just-the-docs rake search:init
|
||||
```
|
||||
|
||||
This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content:
|
||||
|
||||
```liquid
|
||||
{% raw %}---
|
||||
---
|
||||
{
|
||||
{% 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: '</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 }}",
|
||||
"relUrl": "{{ page.url }}"
|
||||
}{% assign comma = true %}
|
||||
{% endif %}{% endfor %}
|
||||
}{% endraw %}
|
||||
```
|
||||
|
||||
_Note: If you don't run this rake command or create this file manually, search will not work (or it will use the search index data from this docs site, not your site's content)._
|
||||
|
||||
### Enable search in configuration
|
||||
|
||||
In your site's `_config.yml`, enable search:
|
||||
|
||||
```yaml
|
||||
# Enable or disable the site search
|
||||
search_enabled: true
|
||||
```
|
||||
|
||||
The default is for hyphens to separate tokens in search terms:
|
||||
`gem-based` is equivalent to `gem based`, matching either word.
|
||||
To allow search for hyphenated words:
|
||||
|
||||
```yaml
|
||||
# Set the search token separator
|
||||
search_tokenizer_separator: /[\s/]+/
|
||||
```
|
||||
|
||||
## Hiding pages from search
|
||||
|
||||
Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Page not found
|
||||
nav_exclude: true
|
||||
search_exclude: true
|
||||
---
|
||||
```
|
||||
|
|
@ -1,19 +1,14 @@
|
|||
---
|
||||
layout: document
|
||||
title: Spectral Inference
|
||||
titles:
|
||||
- Spectral Inference Networks (SpIN)
|
||||
- Prerequisites
|
||||
- Installation
|
||||
- Installation
|
||||
- Usage
|
||||
- Create variables for simple MLP
|
||||
- Create function to construct simple MLP
|
||||
- Squared exponential kernel.
|
||||
|
||||
tags: [spectral, python, network]
|
||||
order_n: 5
|
||||
---
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
## Spectral Inference Networks (SpIN)
|
||||
|
||||
This package provides an implementation of Spectral Inference Networks,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
order_n: 2
|
||||
---
|
||||
|
||||
{: .no_toc }
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
|
||||
|
||||
[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 }
|
||||
```
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: Code
|
||||
parent: UI Components
|
||||
order_n: 6
|
||||
---
|
||||
|
||||
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.
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 %}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
title: Labels
|
||||
parent: UI Components
|
||||
order_n: 3
|
||||
---
|
||||
|
||||
|
||||
Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue }
|
||||
|
||||
Stable
|
||||
{: .label .label-green }
|
||||
|
||||
New release
|
||||
{: .label .label-purple }
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow }
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
</div>
|
||||
```markdown
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue }
|
||||
|
||||
Stable
|
||||
{: .label .label-green }
|
||||
|
||||
New release
|
||||
{: .label .label-purple }
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow }
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
```
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
title: Lists
|
||||
parent: UI Components
|
||||
order_n: 5
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
Most lists can be rendered with pure Markdown.
|
||||
|
||||
## Unordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
_or_
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
</div>
|
||||
```markdown
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
_or_
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
```
|
||||
|
||||
## Ordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
</div>
|
||||
```markdown
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
```
|
||||
|
||||
## Task list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- [ ] hello, this is a todo item
|
||||
- [ ] hello, this is another todo item
|
||||
- [x] goodbye, this item is done
|
||||
</div>
|
||||
```markdown
|
||||
- [ ] hello, this is a todo item
|
||||
- [ ] hello, this is another todo item
|
||||
- [x] goodbye, this item is done
|
||||
```
|
||||
|
||||
## Definition list
|
||||
|
||||
Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
</div>
|
||||
```html
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
```
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: Tables
|
||||
parent: UI Components
|
||||
order_n: 4
|
||||
---
|
||||
|
||||
Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
```
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
title: Typography rules
|
||||
parent: UI Components
|
||||
has_children: true
|
||||
order_n: 1
|
||||
---
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font stack
|
||||
|
||||
By default, Just the Docs uses a native system font stack for sans-serif fonts:
|
||||
|
||||
```scss
|
||||
-apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", 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.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: UI Components
|
||||
order_n: 3
|
||||
has_children: true
|
||||
permalink: /docs/ui-components
|
||||
---
|
||||
|
||||
|
||||
To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
title: Color
|
||||
parent: Utilities
|
||||
order_n: 3
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
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` |
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
title: Layout
|
||||
parent: Utilities
|
||||
order_n: 2
|
||||
---
|
||||
|
||||
|
||||
|
||||
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 |
|
||||
|
||||
#### 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 }
|
||||
```
|
||||
|
||||
## 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 }
|
||||
```
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: Responsive Modifiers
|
||||
parent: Utilities
|
||||
order_n: 1
|
||||
---
|
||||
|
||||
|
||||
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 |
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
---
|
||||
title: Typography
|
||||
parent: Utilities
|
||||
order_n: 4
|
||||
---
|
||||
|
||||
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) |
|
||||
|
||||
## code example
|
||||
|
||||
<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 }
|
||||
```
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
title: Fonts
|
||||
parent: Typography rules
|
||||
grand_parent: UI Components
|
||||
order_n: 1
|
||||
---
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font stack
|
||||
|
||||
By default, Just the Docs uses a native system font stack for sans-serif fonts:
|
||||
|
||||
```scss
|
||||
-apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", 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
|
||||
```
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: Text
|
||||
parent: Typography rules
|
||||
grand_parent: UI Components
|
||||
order_n: 2
|
||||
---
|
||||
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Utilities
|
||||
order_n: 4
|
||||
has_children: true
|
||||
permalink: docs/utilities
|
||||
---
|
||||
|
||||
|
||||
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 }
|
||||
|
|
@ -2,14 +2,16 @@
|
|||
layout: document
|
||||
title: "Welcome to Jekyll!"
|
||||
description: You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
|
||||
titles:
|
||||
- Code snippets
|
||||
- Check out the Jekyll docs
|
||||
|
||||
date: 2019-12-30 08:40:50 +0200
|
||||
categories: jekyll update
|
||||
order_n: 6
|
||||
tags: [jekyll, code]
|
||||
---
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
|
||||
|
||||
Jekyll requires blog post files to be named according to the following format:
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
layout: document
|
||||
title: "Work with run/debug configurations"
|
||||
description: To run or debug your code in PyCharm, you can use numerous run/debug configurations. Each run/debug configuration represents a named set of run/debug startup properties. When you perform run, debug, or test operations with PyCharm, you always start a process based on one of the existing configurations using its parameters.
|
||||
titles:
|
||||
- Code snippets
|
||||
- Check out the Jekyll docs
|
||||
|
||||
date: 2019-12-31 08:40:50 +0200
|
||||
categories: jekyll run debug
|
||||
|
||||
|
|
@ -12,6 +10,9 @@ tags: [jekyll, code]
|
|||
order_n: 8
|
||||
---
|
||||
|
||||
* TOC
|
||||
{:toc}
|
||||
|
||||
To run or debug your code in PyCharm, you can use numerous run/debug configurations. Each run/debug configuration represents a named set of run/debug startup properties. When you perform run, debug, or test operations with PyCharm, you always start a process based on one of the existing configurations using its parameters.
|
||||
|
||||
PyCharm comes with a number of run/debug configuration types for the various running, debugging and testing issues. You can create your own run/debug configurations of specific types.
|
||||
|
|
|
|||
|
|
@ -1,11 +1,43 @@
|
|||
<aside class="sidebar_left">
|
||||
<nav>
|
||||
<h2>Sections</h2>
|
||||
<ul>
|
||||
|
||||
<ul class="aside_nav" id="aside_nav">
|
||||
|
||||
{%- for item in site.docs -%}
|
||||
<li>
|
||||
<a href="{{item.url}}">{{item.title}}</a>
|
||||
{%- if item.parent == nil -%}
|
||||
<li{% if page.title == item.title %} class="active"{% endif %}>
|
||||
<a class="aside_nav_link{% if page.title == item.title %} active"{% endif %}" href="{{item.url}}">{{item.title}}</a>
|
||||
{%- if item.has_children -%}
|
||||
<!-- <span class="toggle_sub"> +</span> -->
|
||||
{%- assign this = item.title -%}
|
||||
{% assign children = site.docs | where: "parent", this %}
|
||||
|
||||
<ul class="sub_menu hidden">
|
||||
{%- for child in children -%}
|
||||
<li{% if page.title == child.title %} class="active"{% endif %}>
|
||||
<a class="aside_nav_link {% if page.title == child.title %} active{% endif %}" href="{{child.url}}">{{child.title}}</a>
|
||||
|
||||
{%- if child.has_children -%}
|
||||
<!-- <span class="toggle_sub"> +</span> -->
|
||||
{%- assign father_name = child.title -%}
|
||||
{%- assign grandfather_name = item.title -%}
|
||||
{% assign grandsons = site.docs | where: "parent", father_name | where: "grand_parent", grandfather_name %}
|
||||
|
||||
<ul class="sub_menu hidden">
|
||||
{%- for gs in grandsons -%}
|
||||
<li{% if page.title == gs.title %} class="active"{% endif %} style="margin-left: 10px;">
|
||||
<a class="aside_nav_link{% if page.title == gs.title %} active{% endif %}" href="{{gs.url}}">{{gs.title}}</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -269,6 +269,13 @@ li {
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.rot45 {
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
.site-footer {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -309,6 +316,11 @@ li {
|
|||
.sidebar_left {
|
||||
grid-area: bottom;
|
||||
padding: 20px;
|
||||
.toggle_sub {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: $brand-color;
|
||||
}
|
||||
nav {
|
||||
top: 180px;
|
||||
position: sticky;
|
||||
|
|
@ -323,7 +335,26 @@ li {
|
|||
color: $sidebar-hover;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-weight: 700;
|
||||
a {
|
||||
color: $sidebar-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub_menu {
|
||||
a {
|
||||
color: $text-color-t;
|
||||
font-weight: normal;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.active > .sub_menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.document {
|
||||
|
|
@ -377,6 +408,18 @@ li {
|
|||
}
|
||||
}
|
||||
|
||||
#markdown-toc {
|
||||
font-size: 14px;
|
||||
&::before {
|
||||
content: "Table of contents";
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.highlighter-rouge {
|
||||
max-width: 90vw;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
@media screen and (min-width: 768px) {
|
||||
.blog_intro {
|
||||
|
|
@ -415,6 +458,14 @@ li {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.highlighter-rouge {
|
||||
max-width: 60vw;
|
||||
}
|
||||
.aside_nav {
|
||||
overflow-y: auto;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.doc_page .docs {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
|
|
@ -434,7 +485,6 @@ li {
|
|||
.document {
|
||||
grid-area: c;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 260px;
|
||||
h1,
|
||||
h2 {
|
||||
padding-top: 30px;
|
||||
|
|
@ -490,6 +540,21 @@ li {
|
|||
}
|
||||
}
|
||||
@media screen and (min-width: 1440px) {
|
||||
.document {
|
||||
grid-template-columns: 1fr 260px;
|
||||
}
|
||||
.highlighter-rouge {
|
||||
max-width: 55vw;
|
||||
}
|
||||
#markdown-toc {
|
||||
position: fixed;
|
||||
width: 170px;
|
||||
word-wrap: anywhere;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
top: 200px;
|
||||
right: 30px;
|
||||
}
|
||||
.site-header .navbar .navigation {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,234 +0,0 @@
|
|||
body {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-rows: 80px 1fr auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.site-header {
|
||||
z-index: 1000;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: $background-color;
|
||||
border-top: none;
|
||||
.navbar {
|
||||
padding: 15px 2%;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
justify-content: space-around;
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
color: $brand-color;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.navigation {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
a {
|
||||
padding: 10px;
|
||||
color: $text-color-s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
height: 70vh;
|
||||
margin-top: 200px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2em;
|
||||
align-items: start;
|
||||
.text_box {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
color: $brand-color;
|
||||
}
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5;
|
||||
color: $text-color-s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image_box img {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar_left {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
padding: 20px 2% 20px 2%;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
a {
|
||||
padding: 5px;
|
||||
color: $sidebar-color;
|
||||
&:hover {
|
||||
color: $sidebar-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-template-columns: 15% 1fr 15%;
|
||||
grid-template-areas: ". c .";
|
||||
gap: 1rem;
|
||||
}
|
||||
.content {
|
||||
grid-area: c;
|
||||
.content_grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
.content_item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border: 1px solid $grey-color-dark;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.card_bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.card_icon {
|
||||
display: block;
|
||||
width: 50%;
|
||||
padding-bottom: 10px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
&:hover {
|
||||
background: #000;
|
||||
}
|
||||
.author_image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Team page */
|
||||
.team_intro .text_box p,
|
||||
.team_grid {
|
||||
color: $text-color-t;
|
||||
}
|
||||
.team_grid {
|
||||
display: grid;
|
||||
gap: 4rem;
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: $brand-color;
|
||||
}
|
||||
.team_item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 4rem;
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
svg {
|
||||
position: absolute;
|
||||
fill: #2188ff;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border: 3px solid $brand-color;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-ms-border-radius: 50%;
|
||||
-o-border-radius: 50%;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
direction: rtl;
|
||||
}
|
||||
.text_box {
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
}
|
||||
.author_img_box {
|
||||
top: 15px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
position: relative;
|
||||
}
|
||||
.shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.diamond {
|
||||
z-index: 10;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 155px solid $background-color;
|
||||
border-bottom-color: transparent;
|
||||
position: relative;
|
||||
top: -155px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -155px;
|
||||
top: 155px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 155px solid $brand-color;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Blog page */
|
||||
.blog_intro {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 20px;
|
||||
height: max-content;
|
||||
}
|
||||
.posts_list {
|
||||
margin-top: 30px;
|
||||
a {
|
||||
font-size: 24px;
|
||||
color: $brand-color;
|
||||
}
|
||||
.content_item {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,8 +16,8 @@ $text-color-t: #5a6170 !default;
|
|||
$background-color: #1b1f23 !default;
|
||||
$bg-color-doc: #ffffff !default;
|
||||
$brand-color: #2a7ae2 !default;
|
||||
$sidebar-color: #a6b4cf !default;
|
||||
$sidebar-hover: #d8e2f5 !default;
|
||||
$sidebar-color: #212f49 !default;
|
||||
$sidebar-hover: #1b3361 !default;
|
||||
$grey-color: #828282 !default;
|
||||
$grey-color-light: lighten($grey-color, 40%) !default;
|
||||
$grey-color-dark: darken($grey-color, 25%) !default;
|
||||
|
|
|
|||
|
|
@ -232,7 +232,6 @@ table {
|
|||
margin-bottom: $spacing-unit;
|
||||
width: 100%;
|
||||
text-align: $table-text-align;
|
||||
color: lighten($text-color, 18%);
|
||||
border-collapse: collapse;
|
||||
border: 1px solid $grey-color-light;
|
||||
tr {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ function toggle_menu() {
|
|||
nav.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
$(".tag_filter").click(function () {
|
||||
const filter = '.' + $(this).attr('data-tag');
|
||||
if (filter == '.all') {
|
||||
|
|
@ -27,3 +28,31 @@ $(".tag_filter").click(function () {
|
|||
$(".tag_filter").removeClass("active");
|
||||
$(this).addClass('active');
|
||||
});
|
||||
|
||||
/* $(".toggle_sub").click(function () {
|
||||
$(this).toggleClass('rot45');
|
||||
$(this).next('ul').toggleClass('hidden');
|
||||
}); */
|
||||
|
||||
$(document).ready(function () {
|
||||
var sidebar = $(".aside_nav_link");
|
||||
var title = $('.doc_title').text();
|
||||
console.log(sidebar);
|
||||
l=sidebar.length;
|
||||
console.log("leng=" + l);
|
||||
for (i=0; i<l; i++) {
|
||||
if (sidebar[i].text == title) {
|
||||
var parent = sidebar[i].parentElement.parentElement;
|
||||
if (parent.classList.contains('sub_menu')) {
|
||||
parent.classList.remove("hidden");
|
||||
var grandparent = parent.parentElement.parentElement;
|
||||
if (grandparent.classList.contains('sub_menu')) {
|
||||
grandparent.classList.remove("hidden");
|
||||
grandparent.classList.add("active");
|
||||
}
|
||||
console.log(sidebar[i].text);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче