YunYouJun
/
valaxy
mirror of https://github.com/YunYouJun/valaxy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(styles): custom-block & new vars

This commit is contained in:
YunYouJun 2023-10-04 04:01:10 +08:00
parent 428185c5bb
commit 6c19e51e30
20 changed files with 444 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
demo/yun/pages/posts/custom-block.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Custom Blocks Test
categories:
- Test
---
```md
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details Details
This is a details block.
:::
```
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details Details
This is a details block.
:::

8
docs/pages/addons/write.md
View File

@ -8,6 +8,7 @@ end: false
---
## 开始编写
::: tip
@ -26,3 +27,10 @@ end: false
> 文档正在施工中，您可以参照 [插件橱窗](/addons/gallery) 一些已有的插件。
<!-- 用户如何配置 global -->
### 创建插件模板
```bash
pnpm create valaxy
# choose template addon
```

11
docs/pages/themes/write.md
View File

@ -9,7 +9,7 @@ top: 50
::: tip
Valaxy 与 Vite/Vue 的生态完全兼容，因此你在编写主题时，可以任意使用第三方的 Vite/Vue 插件。
Valaxy 与 Vite/Vue 的生态完全兼容，因此你在编写主题时，可以任意使用第三方的 `Vite`/`Vue` 插件。
- [Authoring a Plugin | Vite](https://vitejs.dev/guide/api-plugin.html#authoring-a-plugin)
- [Writing a Plugin | Vue](https://vuejs.org/guide/reusability/plugins.html#writing-a-plugin)
@ -34,6 +34,13 @@ Valaxy 主题无需预编译，直接发布源文件即可。
- [valaxy-theme-yun](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-yun): valaxy-theme-yun 一个更完善的主题示例
- [valaxy-theme-press](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-press): valaxy-theme-press 当前文档主题示例
## 创建主题模板
```bash
pnpm create valaxy
# choose template theme
```
## 主题结构
在动手之前，我们先来了解一下一个 Valaxy 主题的基础结构，它与正常的用户目录结构也十分相似。
@ -136,7 +143,7 @@ export interface ValaxyConfig {
::: tip
`data`解析自 Markdown frontmatter，为原始数据（不可变），将会被合并至 `route.meta.frontmatter` 中。
`data` 解析自 Markdown frontmatter，为原始数据（不可变），将会被合并至 `route.meta.frontmatter` 中。
:::

7
packages/valaxy-theme-press/components/PressAside.vue
View File

@ -18,8 +18,7 @@ const app = useAppStore()
<ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
<aside
class="press-aside lt-xl:fixed shadow
press-card xl:(shadow-none hover:shadow-none) hover:shadow-lg"
class="press-aside lt-xl:fixed shadow xl:(shadow-none hover:shadow-none) hover:shadow-lg"
flex="~ col grow"
p="l-0 xl:l-8" text="center"
z="$"
@ -41,10 +40,6 @@ const app = useAppStore()
<style lang="scss">
@use 'valaxy/client/styles/mixins/index.scss' as *;
.press-card{
background-color: var(--va-c-bg);
}
.press-aside {
top: 0;
bottom: 0;

2
packages/valaxy-theme-press/components/ValaxyMain.vue
View File

@ -36,7 +36,7 @@ const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.valu
>
<div class="container" flex="~ grow" justify="between">
<slot name="main">
<div class="content" w="full" :class="{ 'm-auto': !hasSidebar }" flex="~ col grow" p="lt-md:0">
<div class="vp-doc content" w="full" :class="{ 'm-auto': !hasSidebar }" flex="~ col grow" p="lt-md:0">
<slot name="main-header" />
<slot name="main-header-after" />

11
packages/valaxy-theme-press/setup/main.ts
View File

@ -1,6 +1,17 @@
import { defineAppSetup } from 'valaxy'
import { nextTick } from 'vue'
import 'vitepress/dist/client/theme-default/styles/vars.css'
import 'vitepress/dist/client/theme-default/styles/base.css'
// import 'vitepress/dist/client/theme-default/styles/utils.css'
// import 'vitepress/dist/client/theme-default/styles/components/vp-code.css'
// import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
// import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css'
export default defineAppSetup((ctx) => {
const { router, isClient } = ctx
if (!isClient)

4
packages/valaxy-theme-yun/components/YunOverview.vue
View File

@ -34,9 +34,9 @@ const router = useRouter()
</div>
<YunSidebarNav />
<hr m="t-4 b-2">
<hr m="t-4 b-2" op="20">
<YunSocialLinks />
<hr m="y-2">
<hr m="y-2" op="20">
<YunSidebarLinks />
<br>
</div>

2
packages/valaxy-theme-yun/components/YunSidebar.vue
View File

@ -3,7 +3,7 @@ import { ref } from 'vue'
import { useAppStore } from 'valaxy'
defineProps<{
showHamburger: boolean
showHamburger?: boolean
}>()
const app = useAppStore()

1
packages/valaxy-theme-yun/styles/components/custom-block.scss Normal file
View File

@ -0,0 +1 @@
@use 'valaxy/client/styles/components/custom-block.scss' as *;

1
packages/valaxy-theme-yun/styles/index.scss
View File

@ -9,3 +9,4 @@
// override the default style of star-markdown-css
@use "./common/markdown.scss" as *;
@use './components/custom-block.scss' as *;

93
packages/valaxy/client/styles/common/custom-blocks.scss
View File

@ -1,93 +0,0 @@
.custom-block.tip,
.custom-block.info,
.custom-block.warning,
.custom-block.danger {
margin: 1rem 0;
border-left: 4px solid;
padding: 0.1rem 1rem;
overflow-x: auto;
}
:root {
--va-c-text-warning: #544500;
}
.dark {
--va-c-text-warning: #ffea8a;
}
.custom-block {
&.info {
background-color: rgba(200, 200, 200, 0.1);
}
&.tip {
background-color: rgba(200, 200, 200, 0.1);
border-color: var(--va-c-primary);
}
&.warning {
border-color: #e7c000;
color: var(--va-c-text-warning);
background-color: rgba(255, 229, 100, 0.3);
a {
color: var(--va-c-text);
}
}
}
.custom-block.info {
border-color: var(--c-text-light-2);
}
.custom-block.warning .custom-block-title {
color: #b29400;
}
.custom-block.danger {
border-color: #c00;
color: #4d0000;
background-color: #ffe6e6;
}
.custom-block.danger .custom-block-title {
color: #900;
}
.custom-block.details {
position: relative;
display: block;
border-radius: 2px;
margin: 1.6em 0;
padding: 1.6em;
background-color: rgba(200, 200, 200, 0.2);
}
.custom-block.details h4 {
margin-top: 0;
}
.custom-block.details figure:last-child,
.custom-block.details p:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.custom-block.details summary {
outline: none;
cursor: pointer;
}
.custom-block-title {
margin-bottom: -0.4rem;
font-weight: 600;
display: flex;
align-items: center;
> .icon {
display: inline-flex;
width: 1rem;
height: 1rem;
margin-right: 4px;
}
}

8
packages/valaxy/client/styles/common/markdown.scss
View File

@ -48,4 +48,12 @@ a.header-anchor:focus {
height: 1px;
}
}
.custom-block {
margin: 16px 0;
p:first-child {
margin: 0;
}
}
}

190
packages/valaxy/client/styles/components/custom-block.scss Normal file
View File

@ -0,0 +1,190 @@
.custom-block-title {
margin-bottom: -0.4rem;
font-weight: 600;
display: flex;
align-items: center;
> .icon {
display: inline-flex;
width: 1rem;
height: 1rem;
margin-right: 4px;
}
}
/**
* Component: Custom Block
* -------------------------------------------------------------------------- */
:root {
--va-custom-block-font-size: 14px;
--va-custom-block-code-font-size: 13px;
--va-custom-block-info-border: transparent;
--va-custom-block-info-text: var(--va-c-text-1);
--va-custom-block-info-bg: var(--va-c-default-soft);
--va-custom-block-info-code-bg: var(--va-c-default-soft);
--va-custom-block-tip-border: transparent;
--va-custom-block-tip-text: var(--va-c-text-1);
--va-custom-block-tip-bg: var(--va-c-brand-soft);
--va-custom-block-tip-code-bg: var(--va-c-brand-soft);
--va-custom-block-warning-border: transparent;
--va-custom-block-warning-text: var(--va-c-text-1);
--va-custom-block-warning-bg: var(--va-c-warning-soft);
--va-custom-block-warning-code-bg: var(--va-c-warning-soft);
--va-custom-block-danger-border: transparent;
--va-custom-block-danger-text: var(--va-c-text-1);
--va-custom-block-danger-bg: var(--va-c-danger-soft);
--va-custom-block-danger-code-bg: var(--va-c-danger-soft);
--va-custom-block-details-border: var(--va-custom-block-info-border);
--va-custom-block-details-text: var(--va-custom-block-info-text);
--va-custom-block-details-bg: var(--va-custom-block-info-bg);
--va-custom-block-details-code-bg: var(--va-custom-block-info-code-bg);
}
// ref vitepress
.custom-block {
border: 1px solid transparent;
border-radius: 8px;
padding: 16px 16px 8px;
line-height: 24px;
font-size: var(--va-custom-block-font-size);
color: var(--va-c-text-2);
}
.custom-block.info {
border-color: var(--va-custom-block-info-border);
color: var(--va-custom-block-info-text);
background-color: var(--va-custom-block-info-bg);
}
.custom-block.info a,
.custom-block.info code {
color: var(--va-c-brand-1);
}
.custom-block.info a:hover {
color: var(--va-c-brand-2);
}
.custom-block.info code {
background-color: var(--va-custom-block-info-code-bg);
}
.custom-block.tip {
border-color: var(--va-custom-block-tip-border);
color: var(--va-custom-block-tip-text);
background-color: var(--va-custom-block-tip-bg);
}
.custom-block.tip a,
.custom-block.tip code {
color: var(--va-c-brand-1);
}
.custom-block.tip a:hover {
color: var(--va-c-brand-2);
}
.custom-block.tip code {
background-color: var(--va-custom-block-tip-code-bg);
}
.custom-block.warning {
border-color: var(--va-custom-block-warning-border);
color: var(--va-custom-block-warning-text);
background-color: var(--va-custom-block-warning-bg);
}
.custom-block.warning a,
.custom-block.warning code {
color: var(--va-c-warning-1);
}
.custom-block.warning a:hover {
color: var(--va-c-warning-2);
}
.custom-block.warning code {
background-color: var(--va-custom-block-warning-code-bg);
}
.custom-block.danger {
border-color: var(--va-custom-block-danger-border);
color: var(--va-custom-block-danger-text);
background-color: var(--va-custom-block-danger-bg);
}
.custom-block.danger a,
.custom-block.danger code {
color: var(--va-c-danger-1);
}
.custom-block.danger a:hover {
color: var(--va-c-danger-2);
}
.custom-block.danger code {
background-color: var(--va-custom-block-danger-code-bg);
}
.custom-block.details {
border-color: var(--va-custom-block-details-border);
color: var(--va-custom-block-details-text);
background-color: var(--va-custom-block-details-bg);
}
.custom-block.details a {
color: var(--va-c-brand-1);
}
.custom-block.details a:hover {
color: var(--va-c-brand-2);
}
.custom-block.details code {
background-color: var(--va-custom-block-details-code-bg);
}
.custom-block-title {
font-weight: 600;
}
.custom-block p + p {
margin: 8px 0;
}
.custom-block.details summary {
margin: 0 0 8px;
font-weight: 700;
cursor: pointer;
}
.custom-block.details summary + p {
margin: 8px 0;
}
.custom-block a {
color: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.25s;
}
.custom-block a:hover {
opacity: 0.75;
}
.custom-block code {
font-size: var(--va-custom-block-code-font-size);
}
.custom-block.custom-block th,
.custom-block.custom-block blockquote > p {
font-size: var(--va-custom-block-font-size);
color: inherit;
}

3
packages/valaxy/client/styles/css-vars.scss
View File

@ -10,6 +10,9 @@ $c-primary: #0078e7 !default;
)
);
@use './css-vars/palette.css' as *;
@use './css-vars/function.css' as *;
// common
:root {
@include set-css-var-from-map($common);

24
packages/valaxy/client/styles/css-vars/borders.css Normal file
View File

@ -0,0 +1,24 @@
/**
* Colors: Borders
*
* - `divider`: This is used for separators. This is used to divide sections
* within the same components, such as having separator on "h2" heading.
*
* - `border`: This is designed for borders on interactive components.
* For example this should be used for a button outline.
*
* - `gutter`: This is used to divide components in the page. For example
* the header and the lest of the page.
* -------------------------------------------------------------------------- */
:root {
--va-c-border: #c2c2c4;
--va-c-divider: #e2e2e3;
--va-c-gutter: #e2e2e3;
}
.dark {
--va-c-border: #3c3f44;
--va-c-divider: #2e2e32;
--va-c-gutter: #000000;
}

51
packages/valaxy/client/styles/css-vars/function.css Normal file
View File

@ -0,0 +1,51 @@
/**
* Colors: Function
*
* - `default`: The color used purely for subtle indication without any
* special meanings attched to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
*
* To understand the scaling system, refer to "Colors: Palette" section.
* -------------------------------------------------------------------------- */
:root {
--va-c-default-1: var(--va-c-gray-1);
--va-c-default-2: var(--va-c-gray-2);
--va-c-default-3: var(--va-c-gray-3);
--va-c-default-soft: var(--va-c-gray-soft);
--va-c-brand-1: var(--va-c-indigo-1);
--va-c-brand-2: var(--va-c-indigo-2);
--va-c-brand-3: var(--va-c-indigo-3);
--va-c-brand-soft: var(--va-c-indigo-soft);
/* DEPRECATED: Use `--va-c-brand-1` instead. */
--va-c-brand: var(--va-c-brand-1);
--va-c-tip-1: var(--va-c-brand-1);
--va-c-tip-2: var(--va-c-brand-2);
--va-c-tip-3: var(--va-c-brand-3);
--va-c-tip-soft: var(--va-c-brand-soft);
--va-c-warning-1: var(--va-c-yellow-1);
--va-c-warning-2: var(--va-c-yellow-2);
--va-c-warning-3: var(--va-c-yellow-3);
--va-c-warning-soft: var(--va-c-yellow-soft);
--va-c-danger-1: var(--va-c-red-1);
--va-c-danger-2: var(--va-c-red-2);
--va-c-danger-3: var(--va-c-red-3);
--va-c-danger-soft: var(--va-c-red-soft);
}

83
packages/valaxy/client/styles/css-vars/palette.css Normal file
View File

@ -0,0 +1,83 @@
/**
* Colors: Palette
*
* The primitive colors used for accent colors. These colors are referenced
* by functional colors such as "Text", "Background", or "Brand".
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
* -------------------------------------------------------------------------- */
:root {
--va-c-gray-1: #dddde3;
--va-c-gray-2: #e4e4e9;
--va-c-gray-3: #ebebef;
--va-c-gray-soft: rgba(142, 150, 170, 0.14);
--va-c-indigo-1: #3451b2;
--va-c-indigo-2: #3a5ccc;
--va-c-indigo-3: #5672cd;
--va-c-indigo-soft: rgba(100, 108, 255, 0.14);
--va-c-green-1: #18794e;
--va-c-green-2: #299764;
--va-c-green-3: #30a46c;
--va-c-green-soft: rgba(16, 185, 129, 0.14);
--va-c-yellow-1: #915930;
--va-c-yellow-2: #946300;
--va-c-yellow-3: #9f6a00;
--va-c-yellow-soft: rgba(234, 179, 8, 0.14);
--va-c-red-1: #b8272c;
--va-c-red-2: #d5393e;
--va-c-red-3: #e0575b;
--va-c-red-soft: rgba(244, 63, 94, 0.14);
--va-c-sponsor: #db2777;
}
.dark {
--va-c-gray-1: #515c67;
--va-c-gray-2: #414853;
--va-c-gray-3: #32363f;
--va-c-gray-soft: rgba(101, 117, 133, 0.16);
--va-c-indigo-1: #a8b1ff;
--va-c-indigo-2: #5c73e7;
--va-c-indigo-3: #3e63dd;
--va-c-indigo-soft: rgba(100, 108, 255, 0.16);
--va-c-green-1: #3dd68c;
--va-c-green-2: #30a46c;
--va-c-green-3: #298459;
--va-c-green-soft: rgba(16, 185, 129, 0.16);
--va-c-yellow-1: #f9b44e;
--va-c-yellow-2: #da8b17;
--va-c-yellow-3: #a46a0a;
--va-c-yellow-soft: rgba(234, 179, 8, 0.16);
--va-c-red-1: #f66f81;
--va-c-red-2: #f14158;
--va-c-red-3: #b62a3c;
--va-c-red-soft: rgba(244, 63, 94, 0.16);
}

1
packages/valaxy/client/styles/global/reset.scss
View File

@ -14,7 +14,6 @@ a {
}
hr {
opacity: 0.2;
margin: 1rem;
}

3
packages/valaxy/client/styles/index.scss
View File

@ -12,7 +12,6 @@ $c-primary: #0078e7 !default;
// common
@use "./common/code.scss" as *;
@use "./common/custom-blocks.scss" as *;
@use "./common/hamburger.scss" as *;
@use "./common/scrollbar.scss" as *;
@ -20,3 +19,5 @@ $c-primary: #0078e7 !default;
// markdown
@use "./common/markdown.scss";
// components import by yourself

3
packages/valaxy/node/config/site.ts
View File

@ -19,8 +19,7 @@ export async function resolveSiteConfigFromRoot(root: string) {
export async function resolveSiteConfig(root: string) {
const spinner = ora(`Resolve ${cyan('siteConfig')} from ${dim(root)}`).start()
const { config: userSiteConfig, configFile: siteConfigFile } = await resolveSiteConfigFromRoot(root)
if (userSiteConfig)
spinner.succeed(`Resolve ${cyan('siteConfig')} from ${dim(siteConfigFile)}`)
spinner.succeed(`Resolve ${cyan('siteConfig')} from ${dim(siteConfigFile)}`)
return {
siteConfig: userSiteConfig,