Skip to content

Commit

Permalink
fix: valaxy light-dark code theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@YunYouJun
YunYouJun committed Sep 6, 2023
1 parent db20340 commit e474e88
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 191 deletions.
2 changes: 2 additions & 0 deletions demo/yun/pages/posts/code.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
---
title: Code Block Test
categories:
- Test
---

```dockerfile
Expand Down
6 changes: 4 additions & 2 deletions demo/yun/valaxy.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,10 @@ export default defineValaxyConfig<ThemeConfig>({
markdown: {
// default material-theme-palenight
theme: {
light: 'material-theme-lighter',
dark: 'material-theme-darker',
// light: 'material-theme-lighter',
light: 'github-light',
// dark: 'material-theme-darker',
dark: 'github-dark',
},
blocks: {
tip: {
Expand Down
83 changes: 39 additions & 44 deletions packages/valaxy/client/composables/features/copy-code.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,43 @@
import { nextTick, watch } from 'vue'
// ref vitepress copyCode.ts
import { isClient } from '@vueuse/core'
import { useRoute } from 'vue-router'

export function useCopyCode() {
const route = useRoute()

if (isClient) {
watch(
() => route.path,
() => {
nextTick(() => {
document
.querySelectorAll<HTMLSpanElement>(
'.markdown-body div[class*="language-"]>span.copy',
)
.forEach(handleElement)
const timeoutIdMap: WeakMap<HTMLElement, NodeJS.Timeout> = new WeakMap()
window.addEventListener('click', (e) => {
const el = e.target as HTMLElement
if (el.matches('div[class*="language-"] > button.copy')) {
const parent = el.parentElement
const sibling = el.nextElementSibling?.nextElementSibling
if (!parent || !sibling)
return

const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(
parent.className,
)

let text = ''

sibling
.querySelectorAll('span.line:not(.diff.remove)')
.forEach(node => (text += `${node.textContent || ''}\n`))
text = text.slice(0, -1)

if (isShell)
text = text.replace(/^ *(\$|>) /gm, '').trim()

copyToClipboard(text).then(() => {
el.classList.add('copied')
clearTimeout(timeoutIdMap.get(el))
const timeoutId = setTimeout(() => {
el.classList.remove('copied')
el.blur()
timeoutIdMap.delete(el)
}, 2000)
timeoutIdMap.set(el, timeoutId)
})
},
{ immediate: true, flush: 'post' },
)
}
})
}
}

Expand All @@ -42,7 +61,7 @@ async function copyToClipboard(text: string) {

const selection = document.getSelection()
const originalRange = selection
? (selection.rangeCount > 0 && selection.getRangeAt(0))
? selection.rangeCount > 0 && selection.getRangeAt(0)
: null

document.body.appendChild(element)
Expand All @@ -61,32 +80,8 @@ async function copyToClipboard(text: string) {
}

// Get the focus back on the previously focused element, if any
if (previouslyFocusedElement)
(previouslyFocusedElement as HTMLElement).focus()
}
}

function handleElement(el: HTMLElement) {
el.onclick = () => {
const parent = el.parentElement

if (!parent)
return

const isShell
= parent.classList.contains('language-sh')
|| parent.classList.contains('language-bash')

let { innerText: text = '' } = parent

if (isShell)
text = text.replace(/^ *\$ /gm, '')

copyToClipboard(text).then(() => {
el.classList.add('copied')
setTimeout(() => {
el.classList.remove('copied')
}, 3000)
})
if (previouslyFocusedElement) {
;(previouslyFocusedElement as HTMLElement).focus()
}
}
}
174 changes: 53 additions & 121 deletions packages/valaxy/client/styles/common/code.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,160 +101,92 @@ html:not(.dark) .vp-code-dark {
}
}

[class*="language-"] > span.copy {
// copy
[class*='language-'] > button.copy {
/*rtl:ignore*/
direction: ltr;
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: block;
justify-content: center;
align-items: center;
top: 12px;
/*rtl:ignore*/
right: 12px;
z-index: 3;
border: 1px solid var(--va-code-copy-code-border-color);
border-radius: 4px;
width: 40px;
height: 40px;
background-color: var(--va-code-block-bg);
background-color: var(--va-code-copy-code-bg);
opacity: 0;
cursor: pointer;
background-image: var(--va-icon-copy);
background-position: 50%;
background-size: 20px;
background-repeat: no-repeat;
transition: opacity 0.25s;
}

[class*="language-"]:hover > span.copy {
transition:
border-color 0.25s,
background-color 0.25s,
opacity 0.25s;
}

[class*='language-']:hover > button.copy,
[class*='language-'] > button.copy:focus {
opacity: 1;
}

[class*="language-"] > span.copy:hover {

[class*='language-'] > button.copy:hover,
[class*='language-'] > button.copy.copied {
border-color: var(--va-code-copy-code-hover-border-color);
background-color: var(--va-code-copy-code-hover-bg);
}

[class*="language-"] > span.copy.copied,
[class*="language-"] > span.copy:hover.copied {

[class*='language-'] > button.copy.copied,
[class*='language-'] > button.copy:hover.copied {
/*rtl:ignore*/
border-radius: 0 4px 4px 0;
background-color: var(--va-code-copy-code-hover-bg);
background-image: var(--va-icon-copied);
}

[class*="language-"] > span.copy.copied::before,
[class*="language-"] > span.copy:hover.copied::before {
[class*='language-'] > button.copy.copied::before,
[class*='language-'] > button.copy:hover.copied::before {
position: relative;
left: -65px;
display: block;
top: -1px;
/*rtl:ignore*/
transform: translateX(calc(-100% - 1px));
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--va-code-copy-code-hover-border-color);
/*rtl:ignore*/
border-right: 0;
border-radius: 4px 0 0 4px;
padding-top: 8px;
width: 64px;
padding: 0 10px;
width: fit-content;
height: 40px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: var(--va-code-copy-code-active-text);
background-color: var(--va-code-copy-code-hover-bg);
white-space: nowrap;
content: "Copied";
content: var(--va-code-copy-copied-text-content);
}

[class*="language-"]:before {
[class*='language-'] > span.lang {
position: absolute;
top: 6px;
right: 12px;
top: 2px;
/*rtl:ignore*/
right: 8px;
z-index: 2;
font-size: 12px;
font-weight: 500;
color: var(--va-c-text-dark-3);
transition: color 0.5s, opacity 0.5s;
}

[class*="language-"]:hover:before {
color: var(--va-code-lang-color);
transition:
color 0.4s,
opacity 0.4s;
}

[class*='language-']:hover > button.copy + span.lang,
[class*='language-'] > button.copy:focus + span.lang {
opacity: 0;
}

[class~="language-c"]:before {
content: "c";
}
[class~="language-css"]:before {
content: "css";
}
[class~="language-go"]:before {
content: "go";
}
[class~="language-html"]:before {
content: "html";
}
[class~="language-java"]:before {
content: "java";
}
[class~="language-javascript"]:before {
content: "js";
}
[class~="language-js"]:before {
content: "js";
}
[class~="language-json"]:before {
content: "json";
}
[class~="language-jsx"]:before {
content: "jsx";
}
[class~="language-less"]:before {
content: "less";
}
[class~="language-markdown"]:before {
content: "md";
}
[class~="language-md"]:before {
content: "md";
}
[class~="language-php"]:before {
content: "php";
}
[class~="language-python"]:before {
content: "py";
}
[class~="language-py"]:before {
content: "py";
}
[class~="language-rb"]:before {
content: "rb";
}
[class~="language-ruby"]:before {
content: "rb";
}
[class~="language-rust"]:before {
content: "rust";
}
[class~="language-sass"]:before {
content: "sass";
}
[class~="language-scss"]:before {
content: "scss";
}
[class~="language-sh"]:before {
content: "sh";
}
[class~="language-bash"]:before {
content: "sh";
}
[class~="language-stylus"]:before {
content: "styl";
}
[class~="language-vue-html"]:before {
content: "template";
}
[class~="language-typescript"]:before {
content: "ts";
}
[class~="language-ts"]:before {
content: "ts";
}
[class~="language-tsx"]:before {
content: "tsx";
}
[class~="language-vue"]:before {
content: "vue";
}
[class~="language-yaml"]:before {
content: "yaml";
}
}
36 changes: 32 additions & 4 deletions packages/valaxy/client/styles/css-vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,47 @@ html.dark {
@include set-css-var-from-map(palette.$dark);
}

/**
* Colors: Text
*
* - `text-1`: Used for primary text.
*
* - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
*
* - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
* -------------------------------------------------------------------------- */
:root {
--va-c-text-1: rgba(60, 60, 67);
--va-c-text-2: rgba(60, 60, 67, 0.78);
--va-c-text-3: rgba(60, 60, 67, 0.56);
}
.dark {
--va-c-text-1: rgba(255, 255, 245, 0.86);
--va-c-text-2: rgba(235, 235, 245, 0.6);
--va-c-text-3: rgba(235, 235, 245, 0.38);
}

/* code */
:root {
--va-code-line-height: 1.7;
--va-code-font-size: 0.875em;

--va-code-block-color: var(--va-c-text-dark-1);
--va-code-block-bg: #282c34;
--va-code-block-color: var(--va-c-text-2);
--va-code-block-bg: var(--va-c-bg-alt);
--va-code-block-divider-color: var(--va-c-gutter);

--va-code-lang-color: var(--va-c-text-3);

--va-code-line-highlight-color: rgba(0, 0, 0, 0.5);
--va-code-line-number-color: var(--va-c-text-dark-3);

--va-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
--va-code-copy-code-active-text: var(--va-c-text-dark-2);
// copy
--va-code-copy-code-border-color: var(--va-c-divider);
--va-code-copy-code-bg: var(--va-c-bg-soft);
--va-code-copy-code-hover-border-color: var(--va-c-divider);
--va-code-copy-code-hover-bg: var(--va-c-bg);
--va-code-copy-code-active-text: var(--va-c-text-2);
--va-code-copy-copied-text-content: 'Copied';
}

/* Icons */
Expand Down
Loading

0 comments on commit e474e88

Please sign in to comment.