refactor(docs): improve style and fix typo (#7094)

* refactor(docs): improve style and fix typo

* fix(docs): dark
This commit is contained in:
三咲智子 2022-04-12 20:14:08 +08:00 committed by GitHub
parent 80676ed520
commit 3ab869b446
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 55 additions and 42 deletions

View File

@ -1,8 +1,8 @@
{
"view-source": "View source",
"hide-source": "Hide source",
"edit-in-editor": "Edit in PlayGround",
"edit-on-github": "Edit on Github",
"edit-in-editor": "Edit in Playground",
"edit-on-github": "Edit on GitHub",
"edit-in-codepen": "Edit in Codepen.io",
"copy-code": "Copy code",
"switch-button-option-text": "Switch to Options API",

3
docs/.vitepress/env.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
/// <reference types="vite/client" />
export {}

View File

@ -21,7 +21,7 @@ defineProps({
<style lang="scss" scoped>
.example-showcase {
padding: 1.5rem;
padding: 0.8rem;
margin: 0.5px;
background-color: var(--bg-color);
}

View File

@ -12,14 +12,14 @@ const contributors = computed(() => _contributors[props.id])
<div class="mb-4">
<div class="flex flex-wrap gap-4 pt-2">
<div v-for="c of contributors" :key="c.hash">
<VpLink
<vp-link
:href="`https://github.com/${c.login}`"
class="flex gap-2 items-center link"
no-icon
>
<img :src="c.avatar" class="w-8 h-8 rounded-full" />
{{ c.name }}
</VpLink>
</vp-link>
</div>
</div>
</div>

View File

@ -5,7 +5,7 @@ import CommonThemeToggler from '../common/vp-theme-toggler.vue'
<template>
<div class="theme-toggler-content">
<CommonThemeToggler @click="toggleDark()" />
<CommonThemeToggler @click="() => toggleDark()" />
</div>
</template>

View File

@ -4,7 +4,7 @@ import { isClient, useClipboard, useToggle } from '@vueuse/core'
import { CaretTop } from '@element-plus/icons-vue'
import { useLang } from '../composables/lang'
import { useSourceCode } from '../composables/source-code'
import { usePlayGround } from '../composables/use-playground'
import { usePlayground } from '../composables/use-playground'
import demoBlockLocale from '../../i18n/component/demo-block.json'
@ -26,7 +26,7 @@ const { copy, isSupported } = useClipboard({
read: false,
})
const [sourceVisible, setSourceVisible] = useToggle()
const [sourceVisible, toggleSourceVisible] = useToggle()
const lang = useLang()
const demoSourceUrl = useSourceCode(toRef(props, 'path'))
@ -46,8 +46,8 @@ const decodedDescription = computed(() =>
decodeURIComponent(props.description!)
)
const onPlaygroundClicked = () => {
const { link } = usePlayGround(props.rawSource)
const onPlaygroundClick = () => {
const { link } = usePlayground(props.rawSource)
if (!isClient) return
window.open(link)
}
@ -70,16 +70,21 @@ const copyCode = async () => {
<ClientOnly>
<!-- danger here DO NOT USE INLINE SCRIPT TAG -->
<p text="sm" v-html="decodedDescription" />
<div class="example">
<Example :file="path" :demo="formatPathDemos[path]" />
<ElDivider class="m-0" />
<div class="op-btns">
<ElTooltip :content="locale['edit-in-editor']" :show-arrow="false">
<ElIcon :size="20" class="op-btn">
<i-ri-play-circle-line @click="onPlaygroundClicked" />
<ElIcon :size="16" class="op-btn">
<i-ri-flask-line @click="onPlaygroundClick" />
</ElIcon>
</ElTooltip>
<ElTooltip :content="locale['edit-on-github']" :show-arrow="false">
<ElIcon
:size="20"
:size="16"
class="op-btn github"
style="color: var(--text-color-light)"
>
@ -89,35 +94,33 @@ const copyCode = async () => {
</ElIcon>
</ElTooltip>
<ElTooltip :content="locale['copy-code']" :show-arrow="false">
<ElIcon :size="20" class="op-btn" @click="copyCode">
<!-- <CopyIcon /> -->
<i-ri-file-copy-2-line />
<ElIcon :size="16" class="op-btn" @click="copyCode">
<i-ri-file-copy-line />
</ElIcon>
</ElTooltip>
<ElTooltip :content="locale['view-source']" :show-arrow="false">
<ElIcon :size="20" class="op-btn" @click="setSourceVisible">
<!-- <SourceCodeIcon /> -->
<ElIcon :size="16" class="op-btn" @click="toggleSourceVisible()">
<i-ri-code-line />
</ElIcon>
</ElTooltip>
</div>
<ElDivider class="m-0" />
<Example :file="path" :demo="formatPathDemos[path]" />
<el-collapse-transition>
<ElCollapseTransition>
<SourceCode v-show="sourceVisible" :source="source" />
</el-collapse-transition>
<transition name="el-fade-in-linear">
</ElCollapseTransition>
<Transition name="el-fade-in-linear">
<div
v-show="sourceVisible"
class="example-float-control"
@click="setSourceVisible(false)"
@click="toggleSourceVisible(false)"
>
<ElIcon :size="16">
<CaretTop />
</ElIcon>
<span>{{ locale['hide-source'] }}</span>
</div>
</transition>
</Transition>
</div>
</ClientOnly>
</template>
@ -128,12 +131,11 @@ const copyCode = async () => {
border-radius: var(--el-border-radius-base);
.op-btns {
padding: 0.5rem;
padding: 0.3rem;
display: flex;
align-items: center;
justify-content: flex-end;
height: 3rem;
line-height: 3rem;
height: 2rem;
.el-icon {
&:hover {

View File

@ -1,10 +1,12 @@
import { useDark, useToggle } from '@vueuse/core'
export const isDark =
// @ts-expect-error when PROD is true, do not useDark
import.meta.env.DEV &&
useDark({
storageKey: 'el-theme-appearance',
})
// remove as boolean when dark mode is ok
export const toggleDark = useToggle(isDark as boolean)
export const isDark = useDark({
storageKey: 'el-theme-appearance',
})
// TODO: remove when dark mode is ready
if (!import.meta.env.DEV) {
isDark.value = false
}
export const toggleDark = useToggle(isDark)

View File

@ -1,10 +1,16 @@
import { computed } from 'vue'
import { computed, unref } from 'vue'
import { useData } from 'vitepress'
import { useBrowserLocation } from '@vueuse/core'
import type { MaybeRef } from '@vueuse/core'
export const useFeatureFlag = (flag: string) => {
const location = useBrowserLocation()
export const useFeatureFlag = (flag: MaybeRef<string>) => {
const { theme } = useData()
return computed(() => {
return (theme.value.features || {})[flag]
const _flag = unref(flag)
const params = new URLSearchParams(location.value.search)
return params.get(`feature:${_flag}`) || (theme.value.features || {})[_flag]
})
}

View File

@ -2,7 +2,7 @@ import { utoa } from '../utils'
const MAIN_FILE_NAME = 'App.vue'
export const usePlayGround = (source: string) => {
export const usePlayground = (source: string) => {
const code = decodeURIComponent(source)
const originCode = {
[MAIN_FILE_NAME]: code,

View File

@ -6,9 +6,9 @@ declare module 'vue' {
export interface GlobalComponents {
IRiCodeLine: typeof import('~icons/ri/code-line')['default']
IRiExternalLinkLine: typeof import('~icons/ri/external-link-line')['default']
IRiFileCopy2Line: typeof import('~icons/ri/file-copy2-line')['default']
IRiFileCopyLine: typeof import('~icons/ri/file-copy-line')['default']
IRiFlaskLine: typeof import('~icons/ri/flask-line')['default']
IRiGithubLine: typeof import('~icons/ri/github-line')['default']
IRiPlayCircleLine: typeof import('~icons/ri/play-circle-line')['default']
IRiTranslate2: typeof import('~icons/ri/translate2')['default']
}
}