From 49a2f514becd7677288b8dc711297ef56340b0e9 Mon Sep 17 00:00:00 2001 From: 魏曹先生 <1992414357@qq.com> Date: Mon, 4 May 2026 17:57:18 +0800 Subject: Add day/night theme switching and GitHub corner to docs --- docs/_zh_CN/index.html | 36 +- docs/css/dark.css | 118 ++++- docs/css/light.css | 951 +++++++++++++++++++++++++++++++++++++++ docs/css/vue.css | 951 --------------------------------------- docs/index.html | 28 +- docs/scripts/day-night-switch.js | 27 ++ docs/scripts/docsify-corner.js | 97 ++++ 7 files changed, 1218 insertions(+), 990 deletions(-) create mode 100644 docs/css/light.css delete mode 100644 docs/css/vue.css create mode 100644 docs/scripts/day-night-switch.js create mode 100644 docs/scripts/docsify-corner.js diff --git a/docs/_zh_CN/index.html b/docs/_zh_CN/index.html index 80ed30d..2e265c7 100644 --- a/docs/_zh_CN/index.html +++ b/docs/_zh_CN/index.html @@ -13,27 +13,42 @@ content="Quick start with Mingling and build your command-line program!" /> - + +
+ + + diff --git a/docs/css/dark.css b/docs/css/dark.css index 12535bc..e7f7ac0 100644 --- a/docs/css/dark.css +++ b/docs/css/dark.css @@ -74,7 +74,8 @@ html { body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #34495e; + background-color: #121212 !important; + color: #f4fefe; font-family: Source Sans Pro, Helvetica Neue, @@ -220,7 +221,7 @@ main.hidden { transition: all 0.3s; } .anchor span { - color: #34495e; + color: #f4fefe; } .anchor:hover { text-decoration: underline; @@ -292,7 +293,7 @@ main.hidden { } .sidebar-toggle { background-color: transparent; - background-color: hsla(0, 0%, 100%, 0.8); + background-color: transparent; border: 0; outline: none; padding: 10px; @@ -328,12 +329,15 @@ body.sticky .sidebar-toggle { bottom: 0; left: 300px; transition: left 0.25s ease; + background-color: #121212; } .markdown-section { margin: 0 auto; - max-width: 80%; - padding: 30px 15px 40px; + max-width: 100%; + padding: 30px 45px 40px; position: relative; + background-color: #121212; + color: #fefefe; } .markdown-section > * { box-sizing: border-box; @@ -344,7 +348,7 @@ body.sticky .sidebar-toggle { } .markdown-section hr { border: none; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #323232; margin: 2em 0; } .markdown-section iframe { @@ -365,15 +369,15 @@ body.sticky .sidebar-toggle { } .markdown-section td, .markdown-section th { - border: 1px solid #ddd; + border: 1px solid #333; padding: 6px 13px; } .markdown-section tr { - border-top: 1px solid #ccc; + border-top: 1px solid #222; } .markdown-section p.tip, .markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; + background-color: #252525; } .markdown-section p.tip { border-bottom-right-radius: 2px; @@ -408,7 +412,7 @@ body.sticky .sidebar-toggle { background-color: #efefef; } .markdown-section p.tip em { - color: #34495e; + color: #f4fefe; } .markdown-section p.warn { background: rgba(66, 185, 131, 0.1); @@ -476,7 +480,6 @@ body.close .content { transform: translateX(300px); } body.close .sidebar-toggle { - background-color: hsla(0, 0%, 100%, 0.8); transition: background-color 1s; width: 284px; padding: 10px; @@ -615,13 +618,14 @@ body { background-color: #fefefe; } .sidebar { - color: #364149; + background-color: #080808; + color: #fefefe; } .sidebar li { margin: 6px 0; } .sidebar ul li a { - color: #505d6b; + color: #fefefe; font-size: 14px; font-weight: 400; overflow: hidden; @@ -660,7 +664,7 @@ body { .markdown-section h3, .markdown-section h4, .markdown-section strong { - color: #2c3e50; + color: #f2fefe; font-weight: 600; } .markdown-section a { @@ -732,7 +736,7 @@ body { } .markdown-section code, .markdown-section pre { - background-color: #f2f2f2; + background-color: #212121; } .markdown-section output, .markdown-section pre { @@ -753,7 +757,7 @@ body { } .markdown-section code { border-radius: 2px; - color: #f44336; + color: #f64739; margin: 0 2px; padding: 3px 5px; white-space: pre-wrap; @@ -777,6 +781,62 @@ body { overflow: inherit; white-space: inherit; } +.markdown-section pre code { + color: #eee; +} +.markdown-section pre code .token.punctuation { + color: #eee; +} +.alert.callout.note { + border: 1px solid #00bcd4; + box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2); +} +.alert.callout.tip { + border: 1px solid #4caf50; + box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2); +} +.alert.callout.important { + border: 1px solid #7c4dff; + box-shadow: 0 2px 8px rgba(124, 77, 255, 0.2); +} +.alert.callout.warning { + border: 1px solid #ffc107; + box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2); +} +.alert.callout.attention { + border: 1px solid #f44336; + box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2); +} +.alert.callout.note code { + color: #00c1d9; +} +.alert.callout.tip code { + color: #51af55; +} +.alert.callout.important code { + color: #8152ff; +} +.alert.callout.warning code { + color: #ffc60c; +} +.alert.callout.attention code { + color: #f9483b; +} +.alert.callout.note a { + color: #00c1d9; +} +.alert.callout.tip a { + color: #51af55; +} +.alert.callout.important a { + color: #8152ff; +} +.alert.callout.warning a { + color: #ffc60c; +} +.alert.callout.attention a { + color: #f9483b; +} .markdown-section output { padding: 1.7rem 1.4rem; border: 1px dotted #ccc; @@ -896,7 +956,7 @@ code .token { /* App name link styles */ .app-name-link { display: inline-block; - color: #34495e; + color: #f4fefe; font-size: 1.5rem; font-weight: 700; text-decoration: none; @@ -905,6 +965,11 @@ code .token { } /* Search styles */ +.search { + background-color: #101010; + border-bottom-width: 0px !important; +} + .search .input-wrap { position: relative; display: flex; @@ -913,12 +978,17 @@ code .token { .search .input-wrap input[type="search"] { width: 100%; padding: 8px 40px 8px 12px; - border: 1px solid #ccc; + border: 1px solid #444; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.3s; box-sizing: border-box; + background-color: #1f1f1f; + color: #f4fefe; +} +.search .input-wrap input[type="search"]::placeholder { + color: #888; } .search .input-wrap input[type="search"]:focus { border-color: #ff5722; @@ -934,18 +1004,20 @@ code .token { display: flex; align-items: center; justify-content: center; - opacity: 0.6; + opacity: 0.4; transition: opacity 0.3s; + color: #666; } .search .input-wrap .clear-button:hover { - opacity: 1; + opacity: 0.7; } .search .results-panel { margin-top: 8px; - border: 1px solid #e0e0e0; + border: 1px solid #444; border-radius: 4px; - background: #fff; + background: #2a2a2a; max-height: 300px; overflow-y: auto; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + color: #f4fefe; } diff --git a/docs/css/light.css b/docs/css/light.css new file mode 100644 index 0000000..d4f93dd --- /dev/null +++ b/docs/css/light.css @@ -0,0 +1,951 @@ +/* + * Based on vue.css + * Original: https://cdn.jsdelivr.net/npm/docsify@4.13.1/lib/themes/vue.css + */ + +@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600"); +* { + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + box-sizing: border-box; +} +body:not(.ready) { + overflow: hidden; +} +body:not(.ready) .app-nav, +body:not(.ready) > nav, +body:not(.ready) [data-cloak] { + display: none; +} +div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; +} +div#app:empty:before { + content: "Loading..."; +} +img.emoji { + height: 1.2em; +} +img.emoji, +span.emoji { + vertical-align: middle; +} +span.emoji { + font-family: + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; + font-size: 1.2em; +} +.progress { + background-color: #ff5722; + background-color: var(--theme-color, #ff5722); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: + width 0.2s, + opacity 0.4s; + width: 0; + z-index: 999999; +} +.search .search-keyword, +.search a:hover { + color: #ff5722; + color: var(--theme-color, #ff5722); +} +.search .search-keyword { + font-style: normal; + font-weight: 700; +} +body, +html { + height: 100%; +} +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #34495e; + font-family: + Source Sans Pro, + Helvetica Neue, + Arial, + sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; +} +img { + max-width: 100%; +} +a[disabled] { + cursor: not-allowed; + opacity: 0.6; +} +kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; +} +li input[type="checkbox"] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; +} +.app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; +} +.app-nav.no-badge { + margin-right: 25px; +} +.app-nav p { + margin: 0; +} +.app-nav > a { + margin: 0 1rem; + padding: 5px 0; +} +.app-nav li, +.app-nav ul { + display: inline-block; + list-style: none; + margin: 0; +} +.app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; +} +.app-nav a.active, +.app-nav a:hover { + color: #ff5722; + color: var(--theme-color, #ff5722); +} +.app-nav a.active { + border-bottom: 2px solid #ff5722; + border-bottom: 2px solid var(--theme-color, #ff5722); +} +.app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; +} +.app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; +} +.app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; +} +.app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; +} +.app-nav li ul a.active { + border-bottom: 0; +} +.app-nav li:hover ul { + display: block; +} +.github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; +} +.github-corner:hover .octo-arm { + animation: octocat-wave 0.56s ease-in-out; +} +.github-corner svg { + color: #fff; + fill: #ff5722; + fill: var(--theme-color, #ff5722); + height: 80px; + width: 80px; +} +main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; +} +main.hidden { + display: none; +} +.anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; +} +.anchor span { + color: #34495e; +} +.anchor:hover { + text-decoration: underline; +} +.sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; +} +.sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; +} +.sidebar > h1 a { + color: inherit; + text-decoration: none; +} +.sidebar > h1 .app-nav { + display: block; + position: static; +} +.sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; +} +.sidebar li.collapse .app-sub-sidebar { + display: none; +} +.sidebar ul { + margin: 0 0 0 15px; + padding: 0; +} +.sidebar li > p { + font-weight: 700; + margin: 0; +} +.sidebar ul, +.sidebar ul li { + list-style: none; +} +.sidebar ul li a { + border-bottom: none; + display: block; +} +.sidebar ul li ul { + padding-left: 20px; +} +.sidebar::-webkit-scrollbar { + width: 4px; +} +.sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; +} +.sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); +} +.sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); +} +.sidebar-toggle { + background-color: transparent; + background-color: hsla(0, 0%, 100%, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; +} +.sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; +} +.sidebar-toggle span { + background-color: #ff5722; + background-color: var(--theme-color, #ff5722); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; +} +body.sticky .sidebar, +body.sticky .sidebar-toggle { + position: fixed; +} +.content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; +} +.markdown-section { + margin: 0 auto; + max-width: 100%; + padding: 30px 45px 40px; + position: relative; +} +.markdown-section > * { + box-sizing: border-box; + font-size: inherit; +} +.markdown-section > :first-child { + margin-top: 0 !important; +} +.markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; +} +.markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; +} +.markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; +} +.markdown-section th { + font-weight: 700; +} +.markdown-section td, +.markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; +} +.markdown-section tr { + border-top: 1px solid #ccc; +} +.markdown-section p.tip, +.markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; +} +.markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #ff4081; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; +} +.markdown-section p.tip:before { + background-color: #ff4081; + border-radius: 100%; + color: #fff; + content: "!"; + font-family: + Dosis, + Source Sans Pro, + Helvetica Neue, + Arial, + sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; +} +.markdown-section p.tip code { + background-color: #efefef; +} +.markdown-section p.tip em { + color: #34495e; +} +.markdown-section p.warn { + background: rgba(66, 185, 131, 0.1); + border-radius: 2px; + padding: 1rem; +} +.markdown-section ul.task-list > li { + list-style-type: none; +} +body.close .sidebar { + transform: translateX(-300px); +} +body.close .sidebar-toggle { + width: auto; +} +body.close .content { + left: 0; +} +@media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } +} +@media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + min-height: 100vh; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: hsla(0, 0%, 100%, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + animation: none; + } + .github-corner .octo-arm { + animation: octocat-wave 0.56s ease-in-out; + } +} +@keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +section.cover { + position: relative; + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + width: 100%; + display: none; +} +section.cover.show { + display: flex; +} +section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + bottom: 0; + width: 100%; +} +section.cover .cover-main { + flex: 1; + margin: 0 16px; + text-align: center; + position: relative; +} +section.cover a { + color: inherit; +} +section.cover a, +section.cover a:hover { + text-decoration: none; +} +section.cover p { + line-height: 1.5rem; + margin: 1em 0; +} +section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; +} +section.cover h1 a { + display: block; +} +section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; +} +section.cover blockquote { + font-size: 1.5rem; + text-align: center; +} +section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; +} +section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid #ff5722; + border-color: var(--theme-color, #ff5722); + box-sizing: border-box; + color: #ff5722; + color: var(--theme-color, #ff5722); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; +} +section.cover .cover-main > p:last-child a:last-child { + background-color: #ff5722; + background-color: var(--theme-color, #ff5722); + color: #fff; +} +section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; +} +section.cover .cover-main > p:last-child a:hover { + color: inherit; +} +section.cover blockquote > p > a { + border-bottom: 2px solid #ff5722; + border-bottom: 2px solid var(--theme-color, #ff5722); + transition: color 0.3s; +} +section.cover blockquote > p > a:hover { + color: #ff5722; + color: var(--theme-color, #ff5722); +} +.sidebar, +body { + background-color: #fefefe; +} +.sidebar { + color: #364149; +} +.sidebar li { + margin: 6px 0; +} +.sidebar ul li a { + color: #505d6b; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} +.sidebar ul li a:hover { + text-decoration: underline; +} +.sidebar ul li ul { + padding: 0; +} +.sidebar ul li.active > a { + border-right: 2px solid; + color: #ff5722; + color: var(--theme-color, #ff5722); + font-weight: 600; + background: linear-gradient(to left, #ff572255, transparent 30%); + text-shadow: 0 0 8px rgba(255, 87, 34, 0.3); +} +.sidebar ul li > a:hover { + background: linear-gradient( + to left, + rgba(255, 87, 34, 0.05), + transparent 50% + ); +} +.app-sub-sidebar li:before { + content: "-"; + padding-right: 4px; + float: left; +} +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #2c3e50; + font-weight: 600; +} +.markdown-section a { + color: #ff5722; + color: var(--theme-color, #ff5722); + font-weight: 600; +} +.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 ol, +.markdown-section p, +.markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; +} +.markdown-section ol, +.markdown-section ul { + padding-left: 1.5rem; +} +.markdown-section blockquote { + border-left: 4px solid #ff5722; + border-left: 4px solid var(--theme-color, #ff5722); + 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, +.markdown-section output:after, +.markdown-section pre { + font-family: + Roboto Mono, + Monaco, + courier, + monospace; +} +.markdown-section code, +.markdown-section pre { + background-color: #f2f2f2; +} +.markdown-section output, +.markdown-section pre { + margin: 1.2em 0; + position: relative; + border-radius: 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.markdown-section output, +.markdown-section pre > code { + border-radius: 2px; + display: block; +} +.markdown-section output:after, +.markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; +} +.markdown-section code { + border-radius: 2px; + color: #f44336; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; +} +.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code { + font-size: 0.8rem; +} +.markdown-section pre { + padding: 0 1.4rem; + line-height: 1.5rem; + overflow: auto; + word-wrap: normal; +} +.markdown-section pre > code { + color: #525252; + font-size: 0.8rem; + padding: 2.2em 5px; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + white-space: inherit; +} +.markdown-section output { + padding: 1.7rem 1.4rem; + border: 1px dotted #ccc; +} +.markdown-section output > :first-child { + margin-top: 0; +} +.markdown-section output > :last-child { + margin-bottom: 0; +} +.markdown-section code:after, +.markdown-section code:before, +.markdown-section output:after, +.markdown-section output:before { + letter-spacing: 0.05rem; +} +.markdown-section output:after, +.markdown-section pre:after { + color: #ccc; + 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; + content: attr(data-lang); +} +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #8e908c; +} +.token.namespace { + opacity: 0.7; +} +.token.boolean, +.token.number { + color: #4caf50; +} +.token.punctuation { + color: #525252; +} +.token.property { + color: #c08b30; +} +.token.tag { + color: #ff5722; +} +.token.string { + color: #4caf50; + color: var(--theme-color, #4caf50); +} +.token.selector { + color: #6679cc; +} +.token.attr-name { + color: #2973b7; +} +.language-css .token.string, +.style .token.string, +.token.entity, +.token.url { + color: #22a2c9; +} +.token.attr-value, +.token.control, +.token.directive, +.token.unit { + color: #ff5722; + color: var(--theme-color, #ff5722); +} +.token.function, +.token.keyword { + color: #f44336; +} +.token.atrule, +.token.regex, +.token.statement { + 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.bold, +.token.important { + font-weight: 700; +} +.token.important { + color: #c94922; +} +.token.entity { + cursor: help; +} +code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; +} + +/* App name link styles */ +.app-name-link { + display: inline-block; + color: #34495e; + font-size: 1.5rem; + font-weight: 700; + text-decoration: none; + padding: 0 20px; + line-height: 1.5; +} + +/* Search styles */ +.search .input-wrap { + position: relative; + display: flex; + align-items: center; +} +.search .input-wrap input[type="search"] { + width: 100%; + padding: 8px 40px 8px 12px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 14px; + outline: none; + transition: border-color 0.3s; + box-sizing: border-box; +} +.search .input-wrap input[type="search"]:focus { + border-color: #ff5722; + border-color: var(--theme-color, #ff5722); + box-shadow: 0 0 0 3px #ff572212; +} +.search .input-wrap .clear-button { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.6; + transition: opacity 0.3s; +} +.search .input-wrap .clear-button:hover { + opacity: 1; +} +.search .results-panel { + margin-top: 8px; + border: 1px solid #e0e0e0; + border-radius: 4px; + background: #fff; + max-height: 300px; + overflow-y: auto; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} diff --git a/docs/css/vue.css b/docs/css/vue.css deleted file mode 100644 index 12535bc..0000000 --- a/docs/css/vue.css +++ /dev/null @@ -1,951 +0,0 @@ -/* - * Based on vue.css - * Original: https://cdn.jsdelivr.net/npm/docsify@4.13.1/lib/themes/vue.css - */ - -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600"); -* { - -webkit-font-smoothing: antialiased; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: none; - -webkit-touch-callout: none; - box-sizing: border-box; -} -body:not(.ready) { - overflow: hidden; -} -body:not(.ready) .app-nav, -body:not(.ready) > nav, -body:not(.ready) [data-cloak] { - display: none; -} -div#app { - font-size: 30px; - font-weight: lighter; - margin: 40vh auto; - text-align: center; -} -div#app:empty:before { - content: "Loading..."; -} -img.emoji { - height: 1.2em; -} -img.emoji, -span.emoji { - vertical-align: middle; -} -span.emoji { - font-family: - Apple Color Emoji, - Segoe UI Emoji, - Segoe UI Symbol, - Noto Color Emoji; - font-size: 1.2em; -} -.progress { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); - height: 2px; - left: 0; - position: fixed; - right: 0; - top: 0; - transition: - width 0.2s, - opacity 0.4s; - width: 0; - z-index: 999999; -} -.search .search-keyword, -.search a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.search .search-keyword { - font-style: normal; - font-weight: 700; -} -body, -html { - height: 100%; -} -body { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #34495e; - font-family: - Source Sans Pro, - Helvetica Neue, - Arial, - sans-serif; - font-size: 15px; - letter-spacing: 0; - margin: 0; - overflow-x: hidden; -} -img { - max-width: 100%; -} -a[disabled] { - cursor: not-allowed; - opacity: 0.6; -} -kbd { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-block; - font-size: 12px !important; - line-height: 12px; - margin-bottom: 3px; - padding: 3px 5px; - vertical-align: middle; -} -li input[type="checkbox"] { - margin: 0 0.2em 0.25em 0; - vertical-align: middle; -} -.app-nav { - margin: 25px 60px 0 0; - position: absolute; - right: 0; - text-align: right; - z-index: 10; -} -.app-nav.no-badge { - margin-right: 25px; -} -.app-nav p { - margin: 0; -} -.app-nav > a { - margin: 0 1rem; - padding: 5px 0; -} -.app-nav li, -.app-nav ul { - display: inline-block; - list-style: none; - margin: 0; -} -.app-nav a { - color: inherit; - font-size: 16px; - text-decoration: none; - transition: color 0.3s; -} -.app-nav a.active, -.app-nav a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.app-nav a.active { - border-bottom: 2px solid #ff5722; - border-bottom: 2px solid var(--theme-color, #ff5722); -} -.app-nav li { - display: inline-block; - margin: 0 1rem; - padding: 5px 0; - position: relative; - cursor: pointer; -} -.app-nav li ul { - background-color: #fff; - border: 1px solid; - border-color: #ddd #ddd #ccc; - border-radius: 4px; - box-sizing: border-box; - display: none; - max-height: calc(100vh - 61px); - overflow-y: auto; - padding: 10px 0; - position: absolute; - right: -15px; - text-align: left; - top: 100%; - white-space: nowrap; -} -.app-nav li ul li { - display: block; - font-size: 14px; - line-height: 1rem; - margin: 8px 14px; - white-space: nowrap; -} -.app-nav li ul a { - display: block; - font-size: inherit; - margin: 0; - padding: 0; -} -.app-nav li ul a.active { - border-bottom: 0; -} -.app-nav li:hover ul { - display: block; -} -.github-corner { - border-bottom: 0; - position: fixed; - right: 0; - text-decoration: none; - top: 0; - z-index: 1; -} -.github-corner:hover .octo-arm { - animation: octocat-wave 0.56s ease-in-out; -} -.github-corner svg { - color: #fff; - fill: #ff5722; - fill: var(--theme-color, #ff5722); - height: 80px; - width: 80px; -} -main { - display: block; - position: relative; - width: 100vw; - height: 100%; - z-index: 0; -} -main.hidden { - display: none; -} -.anchor { - display: inline-block; - text-decoration: none; - transition: all 0.3s; -} -.anchor span { - color: #34495e; -} -.anchor:hover { - text-decoration: underline; -} -.sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); - overflow-y: auto; - padding: 40px 0 0; - position: absolute; - top: 0; - bottom: 0; - left: 0; - transition: transform 0.25s ease-out; - width: 300px; - z-index: 20; -} -.sidebar > h1 { - margin: 0 auto 1rem; - font-size: 1.5rem; - font-weight: 300; - text-align: center; -} -.sidebar > h1 a { - color: inherit; - text-decoration: none; -} -.sidebar > h1 .app-nav { - display: block; - position: static; -} -.sidebar .sidebar-nav { - line-height: 2em; - padding-bottom: 40px; -} -.sidebar li.collapse .app-sub-sidebar { - display: none; -} -.sidebar ul { - margin: 0 0 0 15px; - padding: 0; -} -.sidebar li > p { - font-weight: 700; - margin: 0; -} -.sidebar ul, -.sidebar ul li { - list-style: none; -} -.sidebar ul li a { - border-bottom: none; - display: block; -} -.sidebar ul li ul { - padding-left: 20px; -} -.sidebar::-webkit-scrollbar { - width: 4px; -} -.sidebar::-webkit-scrollbar-thumb { - background: transparent; - border-radius: 4px; -} -.sidebar:hover::-webkit-scrollbar-thumb { - background: hsla(0, 0%, 53.3%, 0.4); -} -.sidebar:hover::-webkit-scrollbar-track { - background: hsla(0, 0%, 53.3%, 0.1); -} -.sidebar-toggle { - background-color: transparent; - background-color: hsla(0, 0%, 100%, 0.8); - border: 0; - outline: none; - padding: 10px; - position: absolute; - bottom: 0; - left: 0; - text-align: center; - transition: opacity 0.3s; - width: 284px; - z-index: 30; - cursor: pointer; -} -.sidebar-toggle:hover .sidebar-toggle-button { - opacity: 0.4; -} -.sidebar-toggle span { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); - display: block; - margin-bottom: 4px; - width: 16px; - height: 2px; -} -body.sticky .sidebar, -body.sticky .sidebar-toggle { - position: fixed; -} -.content { - padding-top: 60px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 300px; - transition: left 0.25s ease; -} -.markdown-section { - margin: 0 auto; - max-width: 80%; - padding: 30px 15px 40px; - position: relative; -} -.markdown-section > * { - box-sizing: border-box; - font-size: inherit; -} -.markdown-section > :first-child { - margin-top: 0 !important; -} -.markdown-section hr { - border: none; - border-bottom: 1px solid #eee; - margin: 2em 0; -} -.markdown-section iframe { - border: 1px solid #eee; - width: 1px; - min-width: 100%; -} -.markdown-section table { - border-collapse: collapse; - border-spacing: 0; - display: block; - margin-bottom: 1rem; - overflow: auto; - width: 100%; -} -.markdown-section th { - font-weight: 700; -} -.markdown-section td, -.markdown-section th { - border: 1px solid #ddd; - padding: 6px 13px; -} -.markdown-section tr { - border-top: 1px solid #ccc; -} -.markdown-section p.tip, -.markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; -} -.markdown-section p.tip { - border-bottom-right-radius: 2px; - border-left: 4px solid #ff4081; - border-top-right-radius: 2px; - margin: 2em 0; - padding: 12px 24px 12px 30px; - position: relative; -} -.markdown-section p.tip:before { - background-color: #ff4081; - border-radius: 100%; - color: #fff; - content: "!"; - font-family: - Dosis, - Source Sans Pro, - Helvetica Neue, - Arial, - sans-serif; - font-size: 14px; - font-weight: 700; - left: -12px; - line-height: 20px; - position: absolute; - height: 20px; - width: 20px; - text-align: center; - top: 14px; -} -.markdown-section p.tip code { - background-color: #efefef; -} -.markdown-section p.tip em { - color: #34495e; -} -.markdown-section p.warn { - background: rgba(66, 185, 131, 0.1); - border-radius: 2px; - padding: 1rem; -} -.markdown-section ul.task-list > li { - list-style-type: none; -} -body.close .sidebar { - transform: translateX(-300px); -} -body.close .sidebar-toggle { - width: auto; -} -body.close .content { - left: 0; -} -@media print { - .app-nav, - .github-corner, - .sidebar, - .sidebar-toggle { - display: none; - } -} -@media screen and (max-width: 768px) { - .github-corner, - .sidebar, - .sidebar-toggle { - position: fixed; - } - .app-nav { - margin-top: 16px; - } - .app-nav li ul { - top: 30px; - } - main { - height: auto; - min-height: 100vh; - overflow-x: hidden; - } - .sidebar { - left: -300px; - transition: transform 0.25s ease-out; - } - .content { - left: 0; - max-width: 100vw; - position: static; - padding-top: 20px; - transition: transform 0.25s ease; - } - .app-nav, - .github-corner { - transition: transform 0.25s ease-out; - } - .sidebar-toggle { - background-color: transparent; - width: auto; - padding: 30px 30px 10px 10px; - } - body.close .sidebar { - transform: translateX(300px); - } - body.close .sidebar-toggle { - background-color: hsla(0, 0%, 100%, 0.8); - transition: background-color 1s; - width: 284px; - padding: 10px; - } - body.close .content { - transform: translateX(300px); - } - body.close .app-nav, - body.close .github-corner { - display: none; - } - .github-corner:hover .octo-arm { - animation: none; - } - .github-corner .octo-arm { - animation: octocat-wave 0.56s ease-in-out; - } -} -@keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } -} -section.cover { - position: relative; - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - min-height: 100vh; - width: 100%; - display: none; -} -section.cover.show { - display: flex; -} -section.cover.has-mask .mask { - background-color: #fff; - opacity: 0.8; - position: absolute; - top: 0; - bottom: 0; - width: 100%; -} -section.cover .cover-main { - flex: 1; - margin: 0 16px; - text-align: center; - position: relative; -} -section.cover a { - color: inherit; -} -section.cover a, -section.cover a:hover { - text-decoration: none; -} -section.cover p { - line-height: 1.5rem; - margin: 1em 0; -} -section.cover h1 { - color: inherit; - font-size: 2.5rem; - font-weight: 300; - margin: 0.625rem 0 2.5rem; - position: relative; - text-align: center; -} -section.cover h1 a { - display: block; -} -section.cover h1 small { - bottom: -0.4375rem; - font-size: 1rem; - position: absolute; -} -section.cover blockquote { - font-size: 1.5rem; - text-align: center; -} -section.cover ul { - line-height: 1.8; - list-style-type: none; - margin: 1em auto; - max-width: 500px; - padding: 0; -} -section.cover .cover-main > p:last-child a { - border-radius: 2rem; - border: 1px solid #ff5722; - border-color: var(--theme-color, #ff5722); - box-sizing: border-box; - color: #ff5722; - color: var(--theme-color, #ff5722); - display: inline-block; - font-size: 1.05rem; - letter-spacing: 0.1rem; - margin: 0.5rem 1rem; - padding: 0.75em 2rem; - text-decoration: none; - transition: all 0.15s ease; -} -section.cover .cover-main > p:last-child a:last-child { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); - color: #fff; -} -section.cover .cover-main > p:last-child a:last-child:hover { - color: inherit; - opacity: 0.8; -} -section.cover .cover-main > p:last-child a:hover { - color: inherit; -} -section.cover blockquote > p > a { - border-bottom: 2px solid #ff5722; - border-bottom: 2px solid var(--theme-color, #ff5722); - transition: color 0.3s; -} -section.cover blockquote > p > a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.sidebar, -body { - background-color: #fefefe; -} -.sidebar { - color: #364149; -} -.sidebar li { - margin: 6px 0; -} -.sidebar ul li a { - color: #505d6b; - font-size: 14px; - font-weight: 400; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; -} -.sidebar ul li a:hover { - text-decoration: underline; -} -.sidebar ul li ul { - padding: 0; -} -.sidebar ul li.active > a { - border-right: 2px solid; - color: #ff5722; - color: var(--theme-color, #ff5722); - font-weight: 600; - background: linear-gradient(to left, #ff572255, transparent 30%); - text-shadow: 0 0 8px rgba(255, 87, 34, 0.3); -} -.sidebar ul li > a:hover { - background: linear-gradient( - to left, - rgba(255, 87, 34, 0.05), - transparent 50% - ); -} -.app-sub-sidebar li:before { - content: "-"; - padding-right: 4px; - float: left; -} -.markdown-section h1, -.markdown-section h2, -.markdown-section h3, -.markdown-section h4, -.markdown-section strong { - color: #2c3e50; - font-weight: 600; -} -.markdown-section a { - color: #ff5722; - color: var(--theme-color, #ff5722); - font-weight: 600; -} -.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 ol, -.markdown-section p, -.markdown-section ul { - line-height: 1.6rem; - word-spacing: 0.05rem; -} -.markdown-section ol, -.markdown-section ul { - padding-left: 1.5rem; -} -.markdown-section blockquote { - border-left: 4px solid #ff5722; - border-left: 4px solid var(--theme-color, #ff5722); - 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, -.markdown-section output:after, -.markdown-section pre { - font-family: - Roboto Mono, - Monaco, - courier, - monospace; -} -.markdown-section code, -.markdown-section pre { - background-color: #f2f2f2; -} -.markdown-section output, -.markdown-section pre { - margin: 1.2em 0; - position: relative; - border-radius: 6px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -} -.markdown-section output, -.markdown-section pre > code { - border-radius: 2px; - display: block; -} -.markdown-section output:after, -.markdown-section pre > code { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; -} -.markdown-section code { - border-radius: 2px; - color: #f44336; - margin: 0 2px; - padding: 3px 5px; - white-space: pre-wrap; -} -.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code { - font-size: 0.8rem; -} -.markdown-section pre { - padding: 0 1.4rem; - line-height: 1.5rem; - overflow: auto; - word-wrap: normal; -} -.markdown-section pre > code { - color: #525252; - font-size: 0.8rem; - padding: 2.2em 5px; - line-height: inherit; - margin: 0 2px; - max-width: inherit; - overflow: inherit; - white-space: inherit; -} -.markdown-section output { - padding: 1.7rem 1.4rem; - border: 1px dotted #ccc; -} -.markdown-section output > :first-child { - margin-top: 0; -} -.markdown-section output > :last-child { - margin-bottom: 0; -} -.markdown-section code:after, -.markdown-section code:before, -.markdown-section output:after, -.markdown-section output:before { - letter-spacing: 0.05rem; -} -.markdown-section output:after, -.markdown-section pre:after { - color: #ccc; - 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; - content: attr(data-lang); -} -.token.cdata, -.token.comment, -.token.doctype, -.token.prolog { - color: #8e908c; -} -.token.namespace { - opacity: 0.7; -} -.token.boolean, -.token.number { - color: #4caf50; -} -.token.punctuation { - color: #525252; -} -.token.property { - color: #c08b30; -} -.token.tag { - color: #ff5722; -} -.token.string { - color: #4caf50; - color: var(--theme-color, #4caf50); -} -.token.selector { - color: #6679cc; -} -.token.attr-name { - color: #2973b7; -} -.language-css .token.string, -.style .token.string, -.token.entity, -.token.url { - color: #22a2c9; -} -.token.attr-value, -.token.control, -.token.directive, -.token.unit { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.token.function, -.token.keyword { - color: #f44336; -} -.token.atrule, -.token.regex, -.token.statement { - 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.bold, -.token.important { - font-weight: 700; -} -.token.important { - color: #c94922; -} -.token.entity { - cursor: help; -} -code .token { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - min-height: 1.5rem; - position: relative; - left: auto; -} - -/* App name link styles */ -.app-name-link { - display: inline-block; - color: #34495e; - font-size: 1.5rem; - font-weight: 700; - text-decoration: none; - padding: 0 20px; - line-height: 1.5; -} - -/* Search styles */ -.search .input-wrap { - position: relative; - display: flex; - align-items: center; -} -.search .input-wrap input[type="search"] { - width: 100%; - padding: 8px 40px 8px 12px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 14px; - outline: none; - transition: border-color 0.3s; - box-sizing: border-box; -} -.search .input-wrap input[type="search"]:focus { - border-color: #ff5722; - border-color: var(--theme-color, #ff5722); - box-shadow: 0 0 0 3px #ff572212; -} -.search .input-wrap .clear-button { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.6; - transition: opacity 0.3s; -} -.search .input-wrap .clear-button:hover { - opacity: 1; -} -.search .results-panel { - margin-top: 8px; - border: 1px solid #e0e0e0; - border-radius: 4px; - background: #fff; - max-height: 300px; - overflow-y: auto; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} diff --git a/docs/index.html b/docs/index.html index e77d32b..3142dbd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,27 +13,37 @@ content="Quick start with Mingling and build your command-line program!" /> - + +
+ --> + + + diff --git a/docs/scripts/day-night-switch.js b/docs/scripts/day-night-switch.js new file mode 100644 index 0000000..91cebd1 --- /dev/null +++ b/docs/scripts/day-night-switch.js @@ -0,0 +1,27 @@ +function setTheme(theme) { + const dark = document.getElementById("dark-style"); + if (theme === "dark") { + dark.disabled = false; + } else { + dark.disabled = true; + } + localStorage.setItem("theme", theme); +} + +function toggleTheme() { + const currentTheme = localStorage.getItem("theme") || "light"; + const newTheme = currentTheme === "dark" ? "light" : "dark"; + setTheme(newTheme); +} + +(function () { + const savedTheme = localStorage.getItem("theme"); + if (savedTheme) { + setTheme(savedTheme); + } else { + const prefersDark = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + setTheme(prefersDark ? "dark" : "light"); + } +})(); diff --git a/docs/scripts/docsify-corner.js b/docs/scripts/docsify-corner.js new file mode 100644 index 0000000..b059ef8 --- /dev/null +++ b/docs/scripts/docsify-corner.js @@ -0,0 +1,97 @@ +'use strict'; + +function getIcon (cornerOptions) { + if (!cornerOptions.icon) { + return 'Not found the icon settings' + } + + const icon = cornerOptions.icon.toLowerCase(); + + if (icon === 'github') { + return '' + } + + if (icon === 'gitlab') { + return '' + } + + if (icon === 'spring') { + return '' + } + + if (icon === 'spring2') { + return '' + } + + if (icon === 'golang') { + return '' + } + + // if the icon is not in the preset, it should be the image url + const width = cornerOptions.width ? cornerOptions.width : cornerOptions.height ? cornerOptions.height : 100; + const heitht = cornerOptions.height ? cornerOptions.height : cornerOptions.width ? cornerOptions.width : 100; + return `` +} + +const cornerOptions = { + + // the widtH of the icon image + width: '', + // the height of the icon image + height: '', + // the repo url + url: '', + // the target, align to site by default + target:'', + // the icon name/url + icon: '', + // the text of the title attribute is displayed as a tooltip + title: '', + // the corner background color, default false to use default color + background: false, + // the icon color, default false to use default color + color: false +}; + +function corner (hook, vm) { + // check if config the repo + if (!window.$docsify.repo) { + return + } + + hook.mounted(function () { + const a = document.querySelector('a.github-corner'); + a.innerHTML = getIcon(cornerOptions); + + cornerOptions.url && (a.href = cornerOptions.url); + cornerOptions.title && (a.title = cornerOptions.title); + + if(cornerOptions.target){ + a.target = cornerOptions.target; + } + + // icon color config + const cl = document.querySelector('.github-corner svg'); + + if (cl && cornerOptions.background) { + cl.style.setProperty('fill', cornerOptions.background); + } + + if (cl && cornerOptions.color) { + cl.style.setProperty('color', cornerOptions.color); + } + }); +} + +// find corner plugin options +window.$docsify.corner = Object.assign( + cornerOptions, + window.$docsify.corner +); +window.$docsify.plugins = [].concat(corner, window.$docsify.plugins); -- cgit