From 3d0bfd6c39b8bc538e0e9a550b2133f20f7e9e9f Mon Sep 17 00:00:00 2001 From: Kang Cheng Date: Sun, 23 Dec 2018 09:52:39 -0800 Subject: [PATCH 01/50] fix: scrollToView not working properly if images exist Closes: https://github.com/docsifyjs/docsify/issues/351 --- src/core/event/scroll.js | 24 ++++++++++++++ src/core/render/compiler.js | 4 ++- src/core/util/image.js | 62 +++++++++++++++++++++++++++++++++++++ src/core/util/index.js | 1 + 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/core/util/image.js diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js index 762d949..93c4f61 100644 --- a/src/core/event/scroll.js +++ b/src/core/event/scroll.js @@ -1,5 +1,6 @@ import {isMobile} from '../util/env' import * as dom from '../util/dom' +import image from '../util/image' import Tweezer from 'tweezer.js' const nav = {} @@ -123,11 +124,34 @@ export function scrollActiveSidebar(router) { }) } +export let pausedScrollToView + +export function proceedScrollToView() { + if (pausedScrollToView) { + const copy = pausedScrollToView.slice() + pausedScrollToView = undefined + scrollIntoView(...copy) + } + + image.unsubscribe(proceedScrollToView) +} + export function scrollIntoView(path, id) { if (!id) { return } + if (pausedScrollToView) { + pausedScrollToView = [path, id] + return + } + + if (!image.isAllImagesComplete()) { + pausedScrollToView = [path, id] + image.subscribe(proceedScrollToView) + return + } + const section = dom.find('#' + id) section && scrollTo(section) diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index 9d6536d..1267fd1 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -299,7 +299,9 @@ export class Compiler { url = getPath(contentBase, getParentPath(router.getCurrentPath()), href) } - return `${text}` + window.Docsify.util.image.increaseLoadingImageCount() + + return `${text}` } renderer.origin = origin diff --git a/src/core/util/image.js b/src/core/util/image.js new file mode 100644 index 0000000..47aaff1 --- /dev/null +++ b/src/core/util/image.js @@ -0,0 +1,62 @@ +export default (function () { + let loadingImageCount = 0 + const subscribers = [] + + function subscribe(cb) { + subscribers.push(cb) + } + + function unsubscribe(cb) { + const index = subscribers.indexOf(cb) + + if (index !== -1) { + subscribers.splice(index, 1) + } + } + + function notifyAllImagesComplete() { + for (let i = 0; i < subscribers.length; i++) { + subscribers[i]() + } + } + + function increaseLoadingImageCount() { + loadingImageCount += 1 + } + + function decreaseLoadingImageCount() { + loadingImageCount -= 1 + + if (loadingImageCount === 0) { + notifyAllImagesComplete() + } + } + + function cleanElement(ele) { + ele.removeAttribute('onload') + ele.removeAttribute('onerror') + } + + function onLoad(ele) { + cleanElement(ele) + decreaseLoadingImageCount() + } + + function onError(ele) { + cleanElement(ele) + decreaseLoadingImageCount() + } + + function isAllImagesComplete() { + return loadingImageCount === 0 + } + + return { + subscribe, + unsubscribe, + increaseLoadingImageCount, + onLoad, + onError, + isAllImagesComplete + } +})() diff --git a/src/core/util/index.js b/src/core/util/index.js index eba6598..baf1c6b 100644 --- a/src/core/util/index.js +++ b/src/core/util/index.js @@ -1,3 +1,4 @@ export * from './core' export * from './env' export * from '../router/util' +export {default as image} from './image' From 0586fe7174f0303374a426dd7b7ce639ae7019cd Mon Sep 17 00:00:00 2001 From: Kang Cheng Date: Sun, 23 Dec 2018 10:00:12 -0800 Subject: [PATCH 02/50] chore: use imported util fn --- src/core/render/compiler.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index 1267fd1..967d16e 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -6,6 +6,7 @@ import {slugify} from './slugify' import {emojify} from './emojify' import {isAbsolutePath, getPath, getParentPath} from '../router/util' import {isFn, merge, cached, isPrimitive} from '../util/core' +import image from '../util/image' // See https://github.com/PrismJS/prism/pull/1367 import 'prismjs/components/prism-markup-templating' @@ -299,7 +300,7 @@ export class Compiler { url = getPath(contentBase, getParentPath(router.getCurrentPath()), href) } - window.Docsify.util.image.increaseLoadingImageCount() + image.increaseLoadingImageCount() return `${text}` } From 99dbaa3050aab3d9cfa817a29695e4ff3c6cdfad Mon Sep 17 00:00:00 2001 From: jthegedus Date: Sat, 5 Jan 2019 19:19:54 +1100 Subject: [PATCH 03/50] document customising page title with sidebar --- docs/more-pages.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/more-pages.md b/docs/more-pages.md index 38184a2..46e7df8 100644 --- a/docs/more-pages.md +++ b/docs/more-pages.md @@ -72,6 +72,16 @@ You can specify `alias` to avoid unnecessary fallback. !> You can create a `README.md` file in a subdirectory to use it as the landing page for the route. +## Set Page Titles from Sidebar Selection + +A page's `title` tag is generated from the _selected_ sidebar item name. For better SEO, you can customize the title by specifying a string after the filename. + +```markdown + +* [Home](/) +* [Guide](guide.md "The greatest guide in the world") +``` + ## Table of Contents Once you've created `_sidebar.md`, the sidebar content is automatically generated based on the headers in the markdown files. From 3b952ac7c3dd93591b3b5a2d9829d0131c3cfcec Mon Sep 17 00:00:00 2001 From: jthegedus Date: Sun, 6 Jan 2019 10:26:21 +1100 Subject: [PATCH 04/50] fix error in ssr config example --- docs/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ssr.md b/docs/ssr.md index 3fa6879..e9c435f 100644 --- a/docs/ssr.md +++ b/docs/ssr.md @@ -111,7 +111,7 @@ var readFileSync = require('fs').readFileSync // init var renderer = new Renderer({ - template: readFileSync('./docs/index.template.html', 'utf-8')., + template: readFileSync('./docs/index.template.html', 'utf-8'), config: { name: 'docsify', repo: 'docsifyjs/docsify' From 1447c8a40aad7fe475293728c2e9cd8df527e7bc Mon Sep 17 00:00:00 2001 From: Anton Wilhelm Date: Wed, 23 Jan 2019 03:54:50 +0100 Subject: [PATCH 05/50] feat: Provide code fragments feature (#748) --- docs/_media/example.js | 16 ++++++++++++++++ docs/embed-files.md | 15 +++++++++++++++ src/core/render/compiler.js | 1 + src/core/render/embed.js | 5 +++++ 4 files changed, 37 insertions(+) create mode 100644 docs/_media/example.js diff --git a/docs/_media/example.js b/docs/_media/example.js new file mode 100644 index 0000000..7b6f668 --- /dev/null +++ b/docs/_media/example.js @@ -0,0 +1,16 @@ +import fetch from 'fetch' + +const URL = 'https://example.com' +const PORT = 8080 + +/// [demo] +const result = fetch(`${URL}:${PORT}`) + .then(function(response) { + return response.json(); + }) + .then(function(myJson) { + console.log(JSON.stringify(myJson)); + }); +/// [demo] + +result.then(console.log).catch(console.error) diff --git a/docs/embed-files.md b/docs/embed-files.md index a935dd3..dab2efe 100644 --- a/docs/embed-files.md +++ b/docs/embed-files.md @@ -39,6 +39,21 @@ You will get it [filename](_media/example.md ':include :type=code') +## Embedded code fragments +Sometimes you don't want to embed a whole file. Maybe because you need just a few lines but you want to compile and test the file in CI. + +```markdown +[filename](_media/example.js ':include :type=code :fragment=demo') +``` + +In your code file you need to surround the fragment between `/// [demo]` lines (before and after the fragment). +Alternatively you can use `### [demo]`. + +Example: + +[filename](_media/example.js ':include :type=code :fragment=demo') + + ## Tag attribute If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags. diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index 9d6536d..b086b14 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -164,6 +164,7 @@ export class Compiler { embed = compileMedia[type].call(this, href, title) embed.type = type } + embed.fragment = config.fragment return embed } diff --git a/src/core/render/embed.js b/src/core/render/embed.js index 85afbe6..8218374 100644 --- a/src/core/render/embed.js +++ b/src/core/render/embed.js @@ -20,6 +20,11 @@ function walkFetchEmbed({embedTokens, compile, fetch}, cb) { if (token.embed.type === 'markdown') { embedToken = compile.lexer(text) } else if (token.embed.type === 'code') { + if (token.embed.fragment) { + const fragment = token.embed.fragment + const pattern = new RegExp(`(?:###|\\/\\/\\/)\\s*\\[${fragment}\\]([\\s\\S]*)(?:###|\\/\\/\\/)\\s*\\[${fragment}\\]`) + text = ((text.match(pattern) || [])[1] || '').trim() + } embedToken = compile.lexer( '```' + token.embed.lang + From c3345ba20c888cd7ea908a62024919fb4265ec0b Mon Sep 17 00:00:00 2001 From: Andy Chen Date: Wed, 23 Jan 2019 10:57:07 +0800 Subject: [PATCH 06/50] feat: Add new theme "dolphin" (#735) Dolphin is a blue theme based on the theme vue, using the font Thasadith -- https://fonts.google.com/specimen/Thasadith as default. --- src/themes/dolphin.styl | 228 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 src/themes/dolphin.styl diff --git a/src/themes/dolphin.styl b/src/themes/dolphin.styl new file mode 100644 index 0000000..f5ea286 --- /dev/null +++ b/src/themes/dolphin.styl @@ -0,0 +1,228 @@ +@import url('https://fonts.googleapis.com/css?family=Thasadith:400,400i,700') + +$color-primary = #00ffff +$color-bg = #f0ffff +$color-text = #34495e +$sidebar-width = 300px + +@import 'basic/_layout' +@import 'basic/_coverpage' + +body + background-color $color-bg + +/* sidebar */ +.sidebar + background-color $color-bg + color #364149 + + li + margin 6px 0 6px 0 + + ul li a + color #505d6b + font-size 14px + font-weight normal + overflow hidden + text-decoration none + text-overflow ellipsis + white-space nowrap + + &:hover + text-decoration underline + + ul li ul + padding 0 + + ul li.active > a + border-right 2px solid + color var(--theme-color, $color-primary) + font-weight 600 + +.app-sub-sidebar + li + &::before + content '-' + padding-right 4px + float left + +/* markdown content found on pages */ +.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong + color #2c3e50 + font-weight 600 + +.markdown-section a + color var(--theme-color, $color-primary) + font-weight 600 + + &:hover + text-decoration underline + +.markdown-section h1 + font-size 2rem + margin 0 0 1rem + +.markdown-section h2 + font-size 1.75rem + margin 45px 0 0.8rem + +.markdown-section h3 + font-size 1.5rem + margin 40px 0 0.6rem + +.markdown-section h4 + font-size 1.25rem + +.markdown-section h5 + font-size 1rem + +.markdown-section h6 + color #777 + font-size 1rem + +.markdown-section figure, .markdown-section p + margin 1.2em 0 + +.markdown-section p, .markdown-section ul, .markdown-section ol + line-height 1.6rem + word-spacing 0.05rem + +.markdown-section ul, .markdown-section ol + padding-left 1.5rem + +.markdown-section blockquote + border-left 4px solid var(--theme-color, $color-primary) + color #858585 + margin 2em 0 + padding-left 20px + +.markdown-section blockquote p + font-weight 600 + margin-left 0 + +.markdown-section iframe + margin 1em 0 + +.markdown-section em + color #7f8c8d + +.markdown-section code + background-color #f8f8f8 + border-radius 2px + color #e96900 + font-family 'Roboto Mono', Monaco, courier, monospace + font-size 0.8rem + margin 0 2px + padding 3px 5px + white-space pre-wrap + +.markdown-section pre + -moz-osx-font-smoothing initial + -webkit-font-smoothing initial + background-color #f8f8f8 + font-family 'Roboto Mono', Monaco, courier, monospace + line-height 1.5rem + margin 1.2em 0 + overflow auto + padding 0 1.4rem + position relative + word-wrap normal + +/* code highlight */ +.token.comment, .token.prolog, .token.doctype, .token.cdata + color #8e908c + +.token.namespace + opacity 0.7 + +.token.boolean, .token.number + color #c76b29 + +.token.punctuation + color #525252 + +.token.property + color #c08b30 + +.token.tag + color #2973b7 + +.token.string + color var(--theme-color, $color-primary) + +.token.selector + color #6679cc + +.token.attr-name + color #2973b7 + +.token.entity, .token.url, .language-css .token.string, .style .token.string + color #22a2c9 + +.token.attr-value, .token.control, .token.directive, .token.unit + color var(--theme-color, $color-primary) + +.token.keyword, .token.function + color #e96900 + +.token.statement, .token.regex, .token.atrule + color #22a2c9 + +.token.placeholder, .token.variable + color #3d8fd1 + +.token.deleted + text-decoration line-through + +.token.inserted + border-bottom 1px dotted #202746 + text-decoration none + +.token.italic + font-style italic + +.token.important, .token.bold + font-weight bold + +.token.important + color #c94922 + +.token.entity + cursor help + +.markdown-section pre > code + -moz-osx-font-smoothing initial + -webkit-font-smoothing initial + background-color #f8f8f8 + border-radius 2px + color #525252 + display block + font-family 'Roboto Mono', Monaco, courier, monospace + font-size 0.8rem + line-height inherit + margin 0 2px + max-width inherit + overflow inherit + padding 2.2em 5px + white-space inherit + +.markdown-section code::after, .markdown-section code::before + letter-spacing 0.05rem + +code .token + -moz-osx-font-smoothing initial + -webkit-font-smoothing initial + min-height 1.5rem + +pre::after + color #ccc + content attr(data-lang) + font-size 0.6rem + font-weight 600 + height 15px + line-height 15px + padding 5px 10px 0 + position absolute + right 0 + text-align right + top 0 From 69ef4892104f3cf1986e541a918be46da41949f6 Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Tue, 29 Jan 2019 22:21:50 -0800 Subject: [PATCH 07/50] fix: task list rendering (Fix #749) (#757) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR restores the task list presentation removed in 4.8: - Add “task-list-item” class to task list `
  • ` elms - Hide list bullets on unordered task lists `
  • ` elms It also provides several improvements on the pre-4.8 presentation: - Add “task-list” class to task list `