From 4b5a33278fc288d09e5e8901e80f45772d61c128 Mon Sep 17 00:00:00 2001 From: Eyre_S Date: Fri, 27 Jan 2023 19:10:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=87=E9=A2=98permalink?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=E5=92=8C=E6=8C=87=E5=90=91=E9=97=AA=E7=83=81?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E7=BD=91=E9=A1=B5=E6=A0=87=E9=A2=98=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加插件 rolling-title 可以使网页标题有滚动向左的效果 - 默认关闭，使用 enhanced.web.web-title.rolling-title = true 打开 - PHP Markdown 添加 Heading_Permalink 插件 - 支持了自动为标题生成同名定位标 - 添加了一个 ⁕ 悬浮的 permalink 按钮 - 添加了插件 heading-permalink-highlights 使标题被定位时 permalink 按钮会产生闪烁效果 --- ...rd-markdown-heading-permalink-highlight.js | 35 ++++++++++++ .../bread-card-markdown-heading-permalink.css | 56 +++++++++++++++++++ assets/enhanced-rolling-title.js | 28 ++++++++++ composer.lock | 4 +- constant.php | 2 +- src/Data/SiteMeta.php | 9 ++- src/Utils/Markdown/Markdown.php | 16 +++++- 7 files changed, 144 insertions(+), 6 deletions(-) create mode 100644 assets/bread-card-markdown-heading-permalink-highlight.js create mode 100644 assets/bread-card-markdown-heading-permalink.css create mode 100644 assets/enhanced-rolling-title.js diff --git a/assets/bread-card-markdown-heading-permalink-highlight.js b/assets/bread-card-markdown-heading-permalink-highlight.js new file mode 100644 index 0000000..fbae70d --- /dev/null +++ b/assets/bread-card-markdown-heading-permalink-highlight.js @@ -0,0 +1,35 @@ +/****************************************************************************** + ############################################################################## + ##### ##### + ##### JavaScript of ph-Bookshelf of ui design BreadCard ##### + ##### enhanced extension ##### + ##### for ! Permalink Highlight ! ##### + ##### for ¶[Heading Permalink](#heading-permalink) ##### + ##### ##### + ##### @author: Sukazyo Workshop ##### + ##### @version： 1.0 ##### + ##### ##### + ############################################################################## + ******************************************************************************/ + +const headingPermalink_animaTimeoutMs = 150; + +function headingPermalink_onScrollFocused (event) { + const node = event.target; + node.classList.add("highlighting"); + sleep(headingPermalink_animaTimeoutMs).then(() => { + node.classList.remove("highlighting"); + sleep(headingPermalink_animaTimeoutMs).then(() => { + node.classList.add("highlighting"); + sleep(headingPermalink_animaTimeoutMs).then(() => { + node.classList.remove("highlighting"); + }); + }); + }); +} + +for (const node of document.getElementsByClassName("heading-permalink")) { + node.addEventListener("focus", headingPermalink_onScrollFocused); +} + +// document.getElementById("main").addEventListener("scrollend", onHeadingPermalinkScrollFocused); diff --git a/assets/bread-card-markdown-heading-permalink.css b/assets/bread-card-markdown-heading-permalink.css new file mode 100644 index 0000000..f6773fe --- /dev/null +++ b/assets/bread-card-markdown-heading-permalink.css @@ -0,0 +1,56 @@ +/****************************************************************************** + ############################################################################## + ##### ##### + ##### Markdown StyleSheet of ui design BreadCard ##### + ##### extended support ##### + ##### for ¶[Heading Permalink](#heading-permalink) ##### + ##### ##### + ##### @author: Sukazyo Workshop ##### + ##### @version： 1.0 ##### + ##### ##### + ############################################################################## + ******************************************************************************/ + +:root { + + --bcm-permalink-color: #d3d9e0; + /*--bcm-permalink-visited-color: #edf0f3;*/ + --bcm-permalink-activited-color: #99bbe1; + + --bcm-permalink-highlighting-color: #293048; + + --bcm-element-permalink-anima-speed: 0.15s; + +} + +:is(h1, h2, h3, h4, h5, h6) { + position: relative; +} + +:is(h1, h2, h3, h4, h5, h6) > .heading-permalink { + position: absolute; + /*z-index: -1;*/ + top: 0; + left: -0.4em; + color: var(--bcm-permalink-color); + line-height: 0; + font-size: 2.6em; + font-weight: bolder; + opacity: 0.3; + transition-duration: var(--bcm-element-permalink-anima-speed); + user-select: none; +} + +:is(h1, h2, h3, h4, h5, h6) > .heading-permalink:visited { + color: var(--bcm-permalink-color); + /*color: var(--bcm-permalink-visited-color);*/ +} + +:is(h1, h2, h3, h4, h5, h6) > a.heading-permalink:hover { + color: var(--bcm-permalink-activited-color); +} + +:is(h1, h2, h3, h4, h5, h6) > a.heading-permalink.highlighting { + color: var(--bcm-permalink-highlighting-color); + opacity: 0.8; +} diff --git a/assets/enhanced-rolling-title.js b/assets/enhanced-rolling-title.js new file mode 100644 index 0000000..a56228c --- /dev/null +++ b/assets/enhanced-rolling-title.js @@ -0,0 +1,28 @@ +/****************************************************************************** + ############################################################################## + ##### ##### + ##### Web JavaScripts of ph-Bookshelf ##### + ##### enhanced extension ##### + ##### for [ling-title rol] ##### + ##### ##### + ##### @author: Sukazyo Workshop ##### + ##### @version： 1.0 ##### + ##### ##### + ############################################################################## + ******************************************************************************/ + +const rollingTitle_rollingSpeed = 450; + +function rollingTitle_titleRollChar () { + + let title = document.title; + const start = title[0]; + title = title.substring(1); + title += start; + document.title = title; + + setTimeout(rollingTitle_titleRollChar, rollingTitle_rollingSpeed); + +} + +rollingTitle_titleRollChar(); diff --git a/composer.lock b/composer.lock index 770b656..26de57e 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "b17c1b13eef5e26750d8c72ff545c616", + "content-hash": "ffafb389bb041261bde7ae336b613721", "packages": [ { "name": "dflydev/dot-access-data", @@ -809,7 +809,7 @@ "prefer-stable": false, "prefer-lowest": false, "platform": { - "php": ">=8.0", + "php": ">=8.1", "ext-xml": "*", "ext-dom": "*", "ext-mbstring": "*", diff --git a/constant.php b/constant.php index f0b0340..703a32c 100644 --- a/constant.php +++ b/constant.php @@ -2,6 +2,6 @@ const APP_NAME = "ph-Bookshelf"; -const VERSION = "0.3.3.1"; +const VERSION = "0.3.4"; const CHANNEL = "suk-ws"; const BRANCH = "master"; diff --git a/src/Data/SiteMeta.php b/src/Data/SiteMeta.php index dc5fa67..f5ca061 100644 --- a/src/Data/SiteMeta.php +++ b/src/Data/SiteMeta.php @@ -44,8 +44,9 @@ class SiteMeta { (PageMeta::getConfigurationLevelPage("customization.article.regex.highlight")=="false")? null:"//cdn.jsdelivr.net/gh/suk-ws/regex-colorizer@master/regex-colorizer-default.min.css", "/assets/bread-card-markdown.css?ver=1", - "/assets/bread-card-markdown-footnote.css", - "/assets/bread-card-markdown-task-list.css", + "/assets/bread-card-markdown-footnote.css?ver=1", + "/assets/bread-card-markdown-task-list.css?ver=1", + "/assets/bread-card-markdown-heading-permalink.css?ver=1", (PageMeta::getConfigurationLevelPage("customization.article.listing.rainbow.marker")=="true"? "/assets/bread-card-markdown-enhanced-listing-rainbow.css?ver=1":null), "/assets/bread-card-markdown-compat-highlight-js.css?ver=1", @@ -63,6 +64,10 @@ class SiteMeta { null:"//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"), (PageMeta::getConfigurationLevelPage("customization.article.regex.highlight")=="false"? null:"//cdn.jsdelivr.net/gh/suk-ws/regex-colorizer@master/regex-colorizer.min.js"), + (PageMeta::getConfigurationLevelPage("enhanced.web.web-title.rolling-title")=="true"? + "/assets/enhanced-rolling-title.js?ver=1":null), + (PageMeta::getConfigurationLevelPage("customization.article.title.permalink.highlight-on-focus")=="true"? + "/assets/bread-card-markdown-heading-permalink-highlight.js?ver=1":null), "/assets/utils-touchscreen-event.js?ver=1", "/assets/main.js?ver=1", ); diff --git a/src/Utils/Markdown/Markdown.php b/src/Utils/Markdown/Markdown.php index 98981dd..7bf8a34 100644 --- a/src/Utils/Markdown/Markdown.php +++ b/src/Utils/Markdown/Markdown.php @@ -9,6 +9,7 @@ use League\CommonMark\Extension\Autolink\AutolinkExtension; use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension; use League\CommonMark\Extension\DescriptionList\DescriptionListExtension; use League\CommonMark\Extension\Footnote\FootnoteExtension; +use League\CommonMark\Extension\HeadingPermalink\HeadingPermalinkExtension; use League\CommonMark\Extension\Strikethrough\StrikethroughExtension; use League\CommonMark\Extension\Table\TableExtension; use League\CommonMark\Extension\TaskList\TaskListExtension; @@ -29,11 +30,24 @@ class Markdown implements PageContentType { public static function getDefaultParser (): ConverterInterface { + $parserConfig = [ + 'heading_permalink' => [ + 'symbol' => "⁕", + 'insert' => 'after', + 'id_prefix' => "", + 'fragment_prefix' => "", + 'title' => "" + ] + ]; + // MarkDown Parser: // CommonMark - $parserEnv = new Environment(); + $parserEnv = new Environment($parserConfig); $parserEnv->addExtension(new CommonMarkCoreExtension()); + // + heading(title) permalink # [title](#title) + $parserEnv->addExtension(new HeadingPermalinkExtension()); + // from GitHub Flavor Markdown // + autolink [https://link.to] // + strikethrough ~~removed~~