diff --git a/css/main.css b/css/main.css index 99e58b5..d613100 100644 --- a/css/main.css +++ b/css/main.css @@ -1,17 +1,41 @@ [data-color-mode*='dark'], [data-color-mode*='dark'] body { --color-header-bg: #3a3a3a8f; - --color-header-border: #21262d; + --color-header-border: #21262d7a; --color-hover: #ffffff1c; --color-hoc-bg: #fffefe08; + + --color-border-default: #d0d7de; + --color-accent-fg: #0969da; + --color-accent-emphasis: #0969da; + --color-danger-fg: #d1242f; + --color-danger-emphasis: #cf222e; + --color-attention-fg: #9a6700; + --color-attention-emphasis: #9a6700; + --color-done-fg: #8250df; + --color-done-emphasis: #8250df; + --color-success-fg: #1a7f37; + --color-success-emphasis: #1f883d; } [data-color-mode*='light'], [data-color-mode*='light'] body { --color-header-bg: #ffffff52; - --color-header-border: #d3d3d3; + --color-header-border: #0000001c; --color-hover: #0000001a; --color-hoc-bg: #00000008; + + --color-border-default: #30363d; + --color-accent-fg: #58a6ff; + --color-accent-emphasis: #1f6feb; + --color-danger-fg: #f85149; + --color-danger-emphasis: #da3633; + --color-attention-fg: #d29922; + --color-attention-emphasis: #9e6a03; + --color-done-fg: #a371f7; + --color-done-emphasis: #8957e5; + --color-success-fg: #3fb950; + --color-success-emphasis: #238636; } *, @@ -256,3 +280,59 @@ section.article-footer .atime { color: var(--color-fg-muted); font-size: 14px; } + +.markdown-alert { + border-left: 0.25em solid var(--borderColor-default, var(--color-border-default)); + color: inherit; + margin-bottom: 16px; + padding: 0.5rem 1em; +} +.markdown-alert > :last-child { + margin-bottom: 0 !important; +} +.markdown-alert .markdown-alert-title { + align-items: center; + display: flex; + font-size: 14px; + font-weight: 500; + line-height: 1; +} +.markdown-alert .markdown-alert-title svg.octicon { + margin-right: 8px !important; + margin-right: var(--base-size-8, 8px) !important; +} +.markdown-alert.markdown-alert-note { + border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); +} +.markdown-alert.markdown-alert-note .markdown-alert-title { + color: var(--color-accent-fg); + color: var(--fgColor-accent, var(--color-accent-fg)); +} +.markdown-alert.markdown-alert-tip { + border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)); +} +.markdown-alert.markdown-alert-tip .markdown-alert-title { + color: var(--color-success-fg); + color: var(--fgColor-success, var(--color-success-fg)); +} +.markdown-alert.markdown-alert-important { + border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)); +} +.markdown-alert.markdown-alert-important .markdown-alert-title { + color: var(--color-done-fg); + color: var(--fgColor-done, var(--color-done-fg)); +} +.markdown-alert.markdown-alert-warning { + border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)); +} +.markdown-alert.markdown-alert-warning .markdown-alert-title { + color: var(--color-attention-fg); + color: var(--fgColor-attention, var(--color-attention-fg)); +} +.markdown-alert.markdown-alert-caution { + border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)); +} +.markdown-alert.markdown-alert-caution .markdown-alert-title { + color: var(--color-danger-fg); + color: var(--fgColor-danger, var(--color-danger-fg)); +} diff --git a/index.html b/index.html index 43a59dd..573a0b4 100644 --- a/index.html +++ b/index.html @@ -7,16 +7,16 @@ React Native React Native - - - - - - + + + + + + - - - + + + top
@@ -31,7 +31,7 @@
- +

一些 React Native 开发上遇到的问题简单记录。

修改 App 在手机上展示的名称

Android

@@ -309,8 +309,8 @@

idoc v1.27.2
- + +
Released under the MIT License. Copyright © 2024 Kenny Wong
Generated by idoc v1.31.0
+ diff --git a/js/giscus.js b/js/giscus.js new file mode 100644 index 0000000..729dd0b --- /dev/null +++ b/js/giscus.js @@ -0,0 +1,34 @@ +;(() => { + const targetElement = document.documentElement; + const defaultTheme = targetElement.getAttribute("data-color-mode"); + changeGiscusTheme(defaultTheme) + const observer = new MutationObserver((mutationsList, observer) => { + for(const mutation of mutationsList) { + if (mutation.type === 'attributes') { + const value = targetElement.getAttribute("data-color-mode"); + changeGiscusTheme(value) + } + } + }); + + observer.observe(targetElement, { + attributes: true, + attributeOldValue: true + }); + + function changeGiscusTheme(theme = "light") { + const iframe = document.querySelector('.giscus-frame'); + if (iframe) { + const config = { + giscus: { + setConfig: { + theme: theme.toLocaleLowerCase(), + }, + } + }; + iframe.contentWindow.postMessage(config, 'https://giscus.app'); + const script = document.querySelector("script[data-script-id=\"giscus\"]") + script.setAttribute("data-theme", theme) + } + } +})(); diff --git a/js/markdown-style.js b/js/markdown-style.js index 5d54bf2..62d6db5 100644 --- a/js/markdown-style.js +++ b/js/markdown-style.js @@ -1,3 +1,12 @@ +/** + * Markdown Style + * @version 1.1.0 + * @author 小弟调调 + * https://github.com/jaywcjlove/markdown-style + * + * Integrate markdown styles into web components, Markdown CSS styles will not be conflicted. + * The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode. + */ const octiconLinkStyle = ` markdown-style h1:hover a.anchor .icon-link:before, markdown-style h2:hover a.anchor .icon-link:before, @@ -110,7 +119,7 @@ ${octiconLinkStyle} markdown-style { display: block; -webkit-text-size-adjust: 100%; - font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 16px; line-height: 1.5; word-wrap: break-word; @@ -579,6 +588,35 @@ markdown-style sup>a::after { content: "]"; } +.markdown-body .octicon-video { + border: 1px solid #d0d7de !important; + border-radius: 6px !important; + display: block; +} + +markdown-style .octicon-video summary { + border-bottom: 1px solid #d0d7de !important; + padding: 8px 16px !important; + cursor: pointer; +} + +markdown-style .octicon-video > video { + display: block !important; + max-width: 100% !important; + padding: 2px; + box-sizing: border-box; + border-bottom-right-radius: 6px !important; + border-bottom-left-radius: 6px !important; +} + +markdown-style details.octicon-video:not([open])>*:not(summary) { + display: none !important; +} + +markdown-style details.octicon-video:not([open]) > summary { + border-bottom: 0 !important; +} + markdown-style h1 .octicon-link, markdown-style h2 .octicon-link, markdown-style h3 .octicon-link, @@ -962,6 +1000,13 @@ markdown-style ::-webkit-calendar-picker-indicator { `; class MarkdownStyle extends HTMLElement { + get theme() { + const value = this.getAttribute('theme'); + return value === null ? '' : value; + } + set theme(name) { + this.setAttribute('theme', name); + } constructor() { super(); this.shadow = this.attachShadow({ mode: 'open' }); @@ -978,14 +1023,11 @@ class MarkdownStyle extends HTMLElement { } } } - get theme() { - const value = this.getAttribute('theme'); - return value === null ? '' : value; - } - set theme(name) { - this.setAttribute('theme', name); - } connectedCallback() { + const disableThemeAutoSwitch = this.getAttribute('theme-auto-switch-disabled'); + if (disableThemeAutoSwitch == "" || disableThemeAutoSwitch && disableThemeAutoSwitch.toLowerCase() === 'true') { + return; + } if (!this.theme) { const { colorMode } = document.documentElement.dataset; this.theme = colorMode; @@ -1002,5 +1044,4 @@ class MarkdownStyle extends HTMLElement { } } } -customElements.define('markdown-style', MarkdownStyle); -//# sourceMappingURL=index.js.map \ No newline at end of file +customElements.define('markdown-style', MarkdownStyle); \ No newline at end of file