Skip to content

G
galaxy-vuepress2-cli
Commit 5e3ae703 authored by rock王's avatar rock王
Browse files
Options

feat: 本地调试修改

parent 54b969c2
Expand all Show whitespace changes
Inline Side-by-side
Showing with 382 additions and 85 deletions
package.json
View file @ 5e3ae703
......@@ -4,6 +4,7 @@
"description": "Vuepress plugin for demo-block & code-edit",
"main": "dist/ggg3.es.js",
"module": "dist/ggg3.es.js",
"type": "module",
"scripts": {
"build": "vite build ."
},
......@@ -12,6 +13,7 @@
"@codemirror/theme-one-dark": "^6.1.1",
"@rollup/plugin-commonjs": "24.1.0-0",
"@vue/shared": "^3.2.37",
"@vuepress/core": "2.0.0-beta.61",
"@vueuse/core": "^9.1.0",
"ansi-styles": "^6.2.1",
"chalk": "^4.1.2",
......@@ -26,6 +28,7 @@
},
"peerDependencies": {
"@vuepress/client": "2.0.0-beta.61",
"@vuepress/core": "2.0.0-beta.61",
"vue": "^3.2.47",
"vuepress": "2.0.0-beta.61"
},
......
pnpm-lock.yaml
View file @ 5e3ae703
This diff is collapsed.
src/CodeEdit.vue 0 → 100644
View file @ 5e3ae703
<script>
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
export default {
name: 'CodeEdit',
components: {
Codemirror,
},
data() {
return {
source: '',
codeSource: '',
extensions: [javascript(), oneDark],
}
},
mounted() {
const source = sessionStorage.getItem('gcodeSource')
this.source = source
this.codeSource = decodeURIComponent(this.source)
this.handleRun()
},
methods: {
onCtrlSClick(event) {
event.preventDefault()
this.handleRun()
},
handleRun() {
fetch(`/updateTemp?codesource=${encodeURIComponent(this.codeSource)}`)
},
handleReset() {
const res = window.confirm('确认要重置吗？')
if (res) {
const code = sessionStorage.getItem('gcodeSource')
this.source = code
this.codeSource = decodeURIComponent(this.source)
}
},
handleRefresh() {
this.$refs.gframe.contentWindow.location.reload()
},
},
}
</script>
<template>
<ClientOnly>
<div class="kf-preview-block">
<div class="operate-container">
<span class="btn" @click="handleRun"> 运行(ctrl + s) </span>
<span class="btn" @click="handleReset"> 重置代码 </span>
<span class="btn" @click="handleRefresh"> 刷新效果 </span>
</div>
<div class="preview-panel">
<div class="preview-source" @keydown.ctrl.s="onCtrlSClick">
<Codemirror
v-model="codeSource" placeholder="Code goes here..." :autofocus="true" language="javascript"
:extensions="extensions" :indent-with-tab="true" :tab-size="2"
/>
</div>
<div class="preview-code">
<iframe ref="gframe" src="/gpreview" />
</div>
</div>
</div>
</ClientOnly>
</template>
<style>
/* 重写样式 ==============start============== */
.navbar {
display: none;
}
.theme-default-content {
max-width: 100% !important;
}
iframe {
width: 100%;
height: 100%;
}
/* 重新样式 ===============end============= */
.kf-preview-block .btn {
color: #1f93ff;
cursor: pointer;
margin-left: 16px;
}
.kf-preview-block {
background: #fff;
display: flex;
flex-direction: column;
border: solid 1px #ebebeb;
border-radius: 3px;
transition: 0.3s;
height: 85vh;
overflow: hidden;
}
.kf-preview-block .operate-container {
text-align: right;
padding-right: 40px;
border-bottom: solid 1px #ebebeb;
}
.kf-preview-block .preview-header {
display: flex;
align-items: center;
height: 60px;
}
.kf-preview-block .preview-panel {
display: flex;
flex: 1;
overflow: hidden;
}
.kf-preview-block .preview-source {
display: block;
width: 50%;
background-color: #f3f4f5;
overflow: auto;
}
.kf-preview-block .preview-code {
display: block;
width: 50%;
padding: 24px;
}
.kf-preview-block .CodeMirror.cm-s-monokai {
height: 100%;
}
</style>
src/Demo.vue 0 → 100644
View file @ 5e3ae703
<template>
<ClientOnly>
<div class="kf-demo-block" :class="[{ hover: hovering }]" @mouseenter="hovering = true"
@mouseleave="hovering = false">
<!-- danger here DO NOT USE INLINE SCRIPT TAG -->
<p text="sm" v-html="decodedDescription" />
<div class="example">
<component :is="formatPathDemos[path]"></component>
</div>
<transition name="code-slide">
<div v-show="sourceVisible" class="example-source-wrapper">
<div class="example-source language-vue" v-html="decodedCode" />
</div>
</transition>
<div ref="control" :class="['kf-demo-block-control', { 'is-fixed': sourceVisible }]"
@click="toggleSourceVisible(!sourceVisible)">
<transition name="text-slide">
<i v-show="hovering || sourceVisible">{{ iconClass }}</i>
</transition>
<transition name="text-slide">
<span v-show="hovering || sourceVisible" class="btn">{{ controlText }}</span>
</transition>
<div class="control-button-container">
<span v-show="hovering || sourceVisible" size="small" type="text" class="control-button copy-button btn"
@click.stop="handleCopy">
{{ copyMessage }}
</span>
<transition name="text-slide">
<span v-show="hovering || sourceVisible" class="control-button run-online-button btn"
@click.stop="handleCodeView">
在线运行
</span>
</transition>
</div>
</div>
</div>
</ClientOnly>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useClipboard, useToggle } from '@vueuse/core'
const props = defineProps<{
demos: object
source: string
path: string
rawSource: string
description?: string
}>()
const { copy } = useClipboard({
source: decodeURIComponent(props.rawSource),
read: false,
})
let hovering = ref(false);
let copyMessage = ref('复制代码');
const [sourceVisible, toggleSourceVisible] = useToggle()
const formatPathDemos = computed(() => {
return props.demos
})
const iconClass = computed(() => {
return sourceVisible ? '▲' : '▼';
})
const controlText = computed(() => {
return sourceVisible ? '隐藏代码' : '显示代码';
})
const decodedDescription = computed(() =>
decodeURIComponent(props.description!)
)
const decodedCode = computed(() =>
decodeURIComponent(props.source!)
)
async function handleCopy() {
await copy();
copyMessage.value = '复制成功🎉';
setTimeout(() => {
copyMessage.value = '复制代码';
}, 2000);
}
function handleCodeView() {
sessionStorage.setItem('gcodeSource', props.rawSource);
window.open('/gedit');
}
</script>
<style lang="scss">
.kf-demo-block {
position: relative;
border: solid 1px #ebebeb;
padding: 20px;
border-radius: 3px;
transition: 0.3s;
.code-slide-enter,
.code-slide-enter-active,
.code-slide-leave,
.code-slide-leave-active {
transition:
0.3s max-height ease-in-out,
0.3s padding-top ease-in-out,
0.3s padding-bottom ease-in-out;
}
.example {
margin-bottom: 20px;
}
.btn {
color: #1f93ff;
cursor: pointer;
margin-left: 16px;
}
&.hover {
box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
}
code {
font-family: Menlo, Monaco, Consolas, Courier, monospace;
}
.demo-button {
float: right;
}
.source {
padding: 24px;
}
.meta {
border-top: solid 1px #eaeefb;
overflow: hidden;
height: 0;
transition: height 0.3s;
}
.description {
padding: 20px;
box-sizing: border-box;
border: solid 1px #ebebeb;
border-radius: 3px;
font-size: 14px;
line-height: 22px;
color: #666;
word-break: break-word;
margin: 10px;
p {
margin: 0;
line-height: 26px;
}
}
.highlight {
div[class*="language-"] {
border-radius: 0;
}
}
#highlight {
& > .language-vue > .language-vue {
padding-top: 0;
margin-top: 0;
}
}
.kf-demo-block-control {
position: relative;
z-index: 9;
border-top: solid 1px #eaeefb;
height: 44px;
box-sizing: border-box;
// border-bottom-left-radius: 4px;
// border-bottom-right-radius: 4px;
border: 1px solid #d3dce6;
background-color: #eaeefb;
text-align: center;
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
&.is-fixed {
position: sticky;
top: 0;
bottom: 20px;
}
>i {
position: absolute;
transform: translateX(-30px);
font-size: 14px;
line-height: 44px;
transition: 0.3s;
display: inline-block;
color: #1f93ff;
}
>span {
position: absolute;
transform: translateX(-30px);
font-size: 14px;
line-height: 44px;
transition: 0.3s;
display: inline-block;
}
&:hover {
// background-color: #f9fafc;
}
& .text-slide-enter,
& .text-slide-leave-active {
opacity: 0;
transform: translateX(10px);
}
.control-button-container {
line-height: 40px;
position: absolute;
top: 0;
right: 0;
padding-left: 5px;
padding-right: 25px;
}
.control-button {
font-size: 14px;
margin: 0 10px;
}
}
}
</style>
src/gedit.md 0 → 100644
View file @ 5e3ae703
<script setup>
import CodeEdit from '@temp/CodeEdit.vue'
</script>
<ClientOnly>
<CodeEdit />
</ClientOnly>
src/gpreview.md 0 → 100644
View file @ 5e3ae703
<script setup>
import tempCmp from '@temp/tempCode.vue';
</script>
<ClientOnly>
<tempCmp />
</ClientOnly>
src/index.ts
View file @ 5e3ae703
// import { createPage } from '@vuepress/core'
import { createPage } from '@vuepress/core'
import type MarkdownIt from 'markdown-it'
import { mdPlugin } from './plugins/plugins'
import { MarkdownTransform } from './plugins/markdown-transform'
......@@ -24,16 +24,19 @@ export default function preview2edit() {
app.writeTemp('Demo.vue', fs.readFileSync(path.resolve(__dirname, './Demo.vue'))),
app.writeTemp('tempCode.vue', ''),
])
// const editPage = await createPage(app, {
// path: '/gedit.html',
const editPage = await createPage(app, {
path: '/gedit.html',
filePath: path.resolve(__dirname, '../../demo/gedit.md')
// filePath: path.resolve(__dirname, './gedit.md')
// })
// app.pages.push(editPage)
// const previewPage = await createPage(app, {
// path: '/gpreview.html',
})
app.pages.push(editPage)
const previewPage = await createPage(app, {
path: '/gpreview.html',
filePath: path.resolve(__dirname, '../../demo/gpreview.md')
// filePath: path.resolve(__dirname, './gpreview.md')
// })
// app.pages.push(previewPage)
})
app.pages.push(previewPage)
},
extendsBundlerOptions: async (bundlerOptions, app) => {
// 生产模式没有node服务
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment