OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/lunr-languages-integration

Browse Source
This commit is contained in:
squidfunk 2017-06-01 09:14:10 +02:00
commit 271d974266
22 changed files with 372 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/getting-started.md
View File

@ -360,8 +360,10 @@ extra:
A new entry at the bottom of the table of contents is generated that is linking
to the comments section. The necessary JavaScript is automatically included.
!!! warning
`site_url` value must be set in `mkdocs.yml` for the Discus integration to load properly.
!!! warning "Requirements"
`site_url` value must be set in `mkdocs.yml` for the Discus integration to
load properly.
[17]: https://disqus.com

43
lib/declarations/clipboard.js Normal file
View File

@ -0,0 +1,43 @@
/*
* Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Declarations
* ------------------------------------------------------------------------- */
declare module "clipboard" {
/* Class: Clipboard action */
declare class ClipboardAction {
trigger: HTMLElement,
clearSelection(): void
}
/* Class: Clipboard */
declare class Clipboard {
static isSupported(): boolean,
on(name: string, cb: (action: ClipboardAction) => void): void
}
/* Exports */
declare export default typeof Clipboard
}

3
material/assets/javascripts/application-1906b41020.js
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/application-e3caa82af6.js Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-8817cfa535.palette.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-c147e0d28f.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-e2807e330f.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-f78e5cb881.palette.css
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -38,9 +38,9 @@
<script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e2807e330f.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-c147e0d28f.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f78e5cb881.palette.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-8817cfa535.palette.css">
{% endif %}
{% endblock %}
{% block fonts %}
@ -149,7 +149,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-1906b41020.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-e3caa82af6.js"></script>
{% set languages = lang.t('search.languages').split(",") %}
{% if languages | length and languages[0] != "" %}
{% set path = base_url + "/assets/javascripts/lunr" %}

2
material/partials/language.html
View File

@ -5,7 +5,7 @@
"footer.next": "Next",
"meta.comments": "Comments",
"meta.source": "Source",
"search.languages": "ru",
"search.languages": "",
"search.placeholder": "Search",
"search.result.placeholder": "Type to start searching",
"search.result.none": "No matching documents",

6
package.json
View File

@ -34,9 +34,7 @@
"test:visual:session": "scripts/test/visual/session",
"travis": "scripts/travis"
},
"dependencies": {
"escape-string-regexp": "^1.0.5"
},
"dependencies": {},
"devDependencies": {
"autoprefixer": "^7.0.1",
"babel-core": "^6.23.0",
@ -49,10 +47,12 @@
"babel-register": "^6.23.0",
"babel-root-import": "^4.1.5",
"chalk": "^1.1.3",
"clipboard": "^1.7.1",
"core-js": "^2.4.1",
"css-mqpacker": "^6.0.0",
"custom-event-polyfill": "^0.3.0",
"del": "^2.2.2",
"escape-string-regexp": "^1.0.5",
"eslint": "^3.16.0",
"expose-loader": "^0.7.3",
"fastclick": "^1.0.6",

50
src/assets/javascripts/application.js
View File

@ -20,7 +20,9 @@
* IN THE SOFTWARE.
*/
import Clipboard from "clipboard"
import FastClick from "fastclick"
import Material from "./components/Material"
/* ----------------------------------------------------------------------------
@ -48,7 +50,7 @@ function initialize(config) { // eslint-disable-line func-style
})
/* Wrap all data tables for better overflow scrolling */
const tables = document.querySelectorAll("table:not([class])")
const tables = document.querySelectorAll("table:not([class])") // TODO: this is JSX, we should rename the file
Array.prototype.forEach.call(tables, table => {
const wrap = (
<div class="md-typeset__scrollwrap">
@ -63,6 +65,52 @@ function initialize(config) { // eslint-disable-line func-style
wrap.children[0].appendChild(table)
})
/* Clipboard integration */
if (Clipboard.isSupported()) {
const blocks = document.querySelectorAll("div > pre, pre > code")
Array.prototype.forEach.call(blocks, (block, index) => {
const id = `__code_${index}`
/* Create button with message container */
const button = (
<button class="md-clipboard" title="Copy to clipboard"
data-clipboard-target={`#${id} pre, #${id} code`}>
<span class="md-clipboard__message"></span>
</button>
)
/* Link to block and insert button */
const parent = block.parentNode
parent.id = id
parent.insertBefore(button, block)
})
/* Initialize Clipboard listener */
const copy = new Clipboard(".md-clipboard")
/* Success handler */
let timer = null
copy.on("success", action => {
const message = action.trigger.querySelector(".md-clipboard__message")
if (!(message instanceof HTMLElement))
throw new ReferenceError
/* Clear selection and reset debounce logic */
action.clearSelection()
if (timer)
clearTimeout(timer)
/* Set message indicating success and show it */
message.classList.add("md-clipboard__message--active")
message.innerHTML = "Copied to clipboard"
/* Hide message after two seconds */
timer = setTimeout(() => {
message.classList.remove("md-clipboard__message--active")
}, 2000)
})
}
/* Force 1px scroll offset to trigger overflow scrolling */
if (Modernizr.ios) {
const scrollable = document.querySelectorAll("[data-md-scrollfix]")

10
src/assets/stylesheets/application.palette.scss
View File

@ -195,11 +195,17 @@ button[data-md-color-accent] {
}
// Hovered scrollbar thumb
pre::-webkit-scrollbar-thumb:hover,
.codehilite::-webkit-scrollbar-thumb:hover {
pre code::-webkit-scrollbar-thumb:hover,
.codehilite pre::-webkit-scrollbar-thumb:hover {
background-color: $color;
}
// Copy to clipboard active icon
.md-clipboard:hover::before,
.md-clipboard:active::before {
color: $color;
}
// Active or targeted back reference
.footnote li:hover .footnote-backref:hover,
.footnote li:target .footnote-backref {

1
src/assets/stylesheets/application.scss
View File

@ -42,6 +42,7 @@
@import "base/typeset";
@import "layout/base";
@import "layout/clipboard";
@import "layout/content";
@import "layout/header";
@import "layout/footer";

28
src/assets/stylesheets/base/_typeset.scss
View File

@ -214,20 +214,34 @@ kbd {
// Unformatted code blocks
pre {
position: relative;
margin: 1em 0;
padding: 1rem 1.2rem;
border-radius: 0.2rem;
line-height: 1.4;
overflow: auto;
-webkit-overflow-scrolling: touch;
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 1em -1.6rem;
padding: 1rem 1.6rem;
border-radius: 0;
}
// Actual container with code, overflowing
> code {
display: block;
margin: 0;
padding: 1.05rem 1.2rem;
background-color: transparent;
font-size: inherit;
box-shadow: none;
box-decoration-break: none;
overflow: auto;
// [mobile -]: Increase padding to match text
@include break-to-device(mobile) {
padding: 1.05rem 1.6rem;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
@ -243,14 +257,6 @@ kbd {
background-color: $md-color-accent;
}
}
// Reset, if code is wrapped inside pre tag
> code {
margin: 0;
background-color: transparent;
font-size: inherit;
box-shadow: none;
box-decoration-break: none;
}
}

51
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -216,15 +216,25 @@ $codehilite-whitespace: transparent;
// If code blocks are wrapped with codehilite, the styles must be adjusted
// so the marker stretches to the whole width and the padding is respected
.codehilite {
position: relative;
margin: 1em 0;
padding: 1rem 1.2rem 0.8rem;
padding: 0;
border-radius: 0.2rem;
background-color: $md-code-background;
color: $md-code-color;
line-height: 1.4;
overflow: auto;
-webkit-overflow-scrolling: touch;
// Actual container with code, overflowing
pre,
code {
display: block;
margin: 0;
padding: 1.05rem 1.2rem;
background-color: transparent;
overflow: auto;
vertical-align: top;
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
@ -240,17 +250,18 @@ $codehilite-whitespace: transparent;
background-color: $md-color-accent;
}
}
}
}
// Hack: set pre-tag to inline-block, in order to stetch the content on
// overflow correctly to the whole width
pre {
display: inline-block;
min-width: 100%;
margin: 0;
padding: 0;
background-color: transparent;
// If not using Pygments, code will be under pre>code
pre.codehilite {
overflow: visible;
vertical-align: top;
// Actual container with code, overflowing
code {
display: block;
padding: 1.05rem 1.2rem;
overflow: auto;
}
}
@ -286,7 +297,7 @@ $codehilite-whitespace: transparent;
// Add spacing to line number container
.linenodiv {
padding: 1rem 1.2rem 0.8rem;
padding: 1.05rem 1.2rem;
// Stretch the line number container vertically, so it always aligns with
// the code container, even when there's a scrollbar.
@ -327,8 +338,13 @@ $codehilite-whitespace: transparent;
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 1em -1.6rem;
padding: 1rem 1.6rem 0.8rem;
border-radius: 0;
// Actual container with code, overflowing
pre,
code {
padding: 1.05rem 1.6rem;
}
}
}
@ -342,10 +358,17 @@ $codehilite-whitespace: transparent;
border-radius: 0;
// Increase spacing
.codehilite,
.codehilite > pre,
.codehilite > code,
.linenodiv {
padding: 1rem 1.6rem;
}
}
}
// When pymdownx.superfences is enabled but codehilite is disabled, the
// outer container gets this class name by default.
.highlight {
@extend .codehilite;
}
}

55
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -49,19 +49,33 @@
}
}
// All headers with permalinks have ids
[id] {
// Hide anchor for top-level heading, as it makes no sense
h1[id] .headerlink {
display: none;
}
// Add spacing to anchor for offset
// Correct anchor offset for link blurring
@each $level, $delta in (
h2: 0.4rem,
h3: 0.7rem,
h4: 0.8rem,
h5: 1.1rem,
h6: 1.1rem
) {
#{$level}[id] {
// Un-targeted anchor
&::before {
display: inline-block;
display: block;
margin-top: -$delta;
padding-top: $delta;
content: "";
}
// Targeted anchor
// Targeted anchor (56px from header, 24px from sidebar offset)
&:target::before {
margin-top: -(5.6rem + 2.4rem + 1.8rem);
padding-top: (5.6rem + 2.4rem + 1.8rem);
margin-top: -(5.6rem + 2.4rem + $delta);
padding-top: (5.6rem + 2.4rem + $delta);
}
// Make permalink visible on hover
@ -79,32 +93,5 @@
color: $md-color-accent;
}
}
// Hide anchor for top-level heading, as it makes no sense
h1 .headerlink {
display: none;
}
// Correct anchor offset for link blurring
@each $level, $delta in (
h2: 0.4rem,
h3: 0.7rem,
h4: 0.8rem,
h5: 1.1rem,
h6: 1.1rem
) {
// Un-targeted anchor
#{$level}[id]::before {
display: block;
margin-top: -$delta;
padding-top: $delta;
}
// Targeted anchor (56px from header, 24px from sidebar offset)
#{$level}[id]:target::before {
margin-top: -(5.6rem + 2.4rem + $delta);
padding-top: (5.6rem + 2.4rem + $delta);
}
}
}

113
src/assets/stylesheets/layout/_clipboard.scss Normal file
View File

@ -0,0 +1,113 @@
////
/// Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Copy to clipboard
.md-clipboard {
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 2.8rem;
height: 2.8rem;
border-radius: 0.2rem;
font-size: 1.6rem;
cursor: pointer;
z-index: 1;
// Hack: put everything on the GPU to omit flickering
backface-visibility: hidden;
// Icon
&::before {
@extend %md-icon;
transition:
color 0.25s,
opacity 0.25s;
color: $md-color-black--light;
content: "content_copy";
opacity: 0.25;
// Show on container hover
pre:hover &,
.codehilite:hover & {
opacity: 1;
}
}
// Hovered and active icon
&:hover::before,
&:active::before {
color: $md-color-accent;
}
// Message
&__message {
display: block;
position: absolute;
top: 0;
right: 3.4rem;
padding: 0.6rem 1rem;
transform: translateX(0.8rem);
transition:
transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
opacity 0.175s;
border-radius: 0.2rem;
background: $md-color-black--light;
color: $md-color-white;
font-size: ms(-1);
white-space: nowrap;
opacity: 0;
pointer-events: none;
// Active message
&--active {
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.175s 0.075s;
opacity: 1;
pointer-events: initial;
}
// Inject content from ARIA label
&::before {
content: attr(aria-label);
}
// Paint a nice speech bubble
&::after {
display: block;
position: absolute;
top: 50%;
right: -0.4rem;
width: 0;
margin-top: -0.4rem;
border-width: 0.4rem 0 0.4rem 0.4rem;
border-style: solid;
border-color: transparent $md-color-black--light;
content: "";
}
}
}

2
src/assets/stylesheets/layout/_header.scss
View File

@ -36,7 +36,7 @@
transition: background-color 0.25s;
background-color: $md-color-primary;
color: $md-color-white;
z-index: 1;
z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints
backface-visibility: hidden;

2
src/assets/stylesheets/layout/_source.scss
View File

@ -21,7 +21,7 @@
////
// ----------------------------------------------------------------------------
// Rules
// Keyframes
// ----------------------------------------------------------------------------
// Show source facts

2
src/base.html
View File

@ -294,7 +294,7 @@
<!-- Initialize application -->
<script>
app.initialize({ url: { base: "{{ base_url }}", } });
app.initialize({ url: { base: "{{ base_url }}" } });
</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

34
yarn.lock
View File

@ -998,6 +998,14 @@ cli-width@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
clipboard@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -1459,6 +1467,10 @@ delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
delegate@^3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.3.tgz#9a8251a777d7025faa55737bc3b071742127a9fd"
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@ -1825,6 +1837,10 @@ expand-tilde@^1.2.1, expand-tilde@^1.2.2:
dependencies:
os-homedir "^1.0.1"
expose-loader@^0.7.3:
version "0.7.3"
resolved "https://registry.yarnpkg.com/expose-loader/-/expose-loader-0.7.3.tgz#35fbd3659789e4faa81f59de8b7e9fc39e466d51"
extend@^3.0.0, extend@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
@ -2249,6 +2265,12 @@ glogg@^1.0.0:
dependencies:
sparkles "^1.0.0"
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
dependencies:
delegate "^3.1.2"
graceful-fs@4.X, graceful-fs@^4.1.2:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@ -3420,6 +3442,10 @@ lru-cache@^4.0.1:
pseudomap "^1.0.1"
yallist "^2.0.0"
lunr-languages@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lunr-languages/-/lunr-languages-1.0.0.tgz#830bca2fe864b713ebe13ff33ed48ee06e635723"
lunr@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.0.2.tgz#b3356bf365766da0dbbb1b00ba27b8faf5558ded"
@ -4876,6 +4902,10 @@ sax@~1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@ -5391,6 +5421,10 @@ timers-browserify@^2.0.2:
dependencies:
setimmediate "^1.0.4"
tiny-emitter@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.0.tgz#bad327adb1804b42a231afa741532bd884cd09ad"
to-arraybuffer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"