Merge pull request #6 from rogeraabbccdd/vitepress

VitePress 重構

.github/workflows/build.yml

@@ -13,11 +13,11 @@ jobs:
           node-version: 16
       - name: Install and Build
         run: |
-          yarn
-          yarn build
+          pnpm install
+          pnpm run build
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages
-          folder: public
+          folder: dist
           single-commit: true

.gitignore

@@ -1 +1,4 @@
-node_modules/
+node_modules/
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/.vitepress/.temp

README.md

@@ -1,11 +1,11 @@
 # 前端網頁課程教材  [![Actions Status](https://github.com/rogeraabbccdd/F2E-book/workflows/Deploy/badge.svg)](https://github.com/rogeraabbccdd/F2E-book/actions)
 <p align="center">
-  <img height="300" src="./docs/.vuepress/public/hero.png">
+  <img height="300" src="./docs/public/hero.png">
 </p>
 
 ## 教材內容
 本教材為本人於勞動部泰山職業訓練場前端網頁開發技術班的授課教材  
-本教材包含以下基礎課程，部分章節的內容不完整，詳細請報名課程  
+包含以下基礎課程，部分章節的內容不完整，詳細請報名課程  
 - Git
 - JavaScript
 - jQuery
@@ -14,9 +14,4 @@
 - Vue.js 
 
 ## 課程報名
-- [111 年前端網頁開發技術 1 期](https://ttms.etraining.gov.tw/eYVTR/YR008/Detail?BCM_SNO=133844)
-- [111 年前端網頁開發技術 2 期](https://ttms.etraining.gov.tw/eYVTR/YR008/Detail?BCM_SNO=133845)
-
-## 連結
-- [線上閱讀](https://rogeraabbccdd.github.io/F2E-book/)
-- [版型](https://github.com/rogeraabbccdd/vuepress-theme-reco)
+- [課程介紹](https://wdaweb.github.io/)

docs/.vitepress/components/DemoBlock.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { onUpdated, onMounted } from 'vue'
+import '../.vitepress/plugins/demo-block/style.scss'
+import { webController } from '../.vitepress/plugins/demo-block/main'
+
+const props = defineProps()
+
+onMounted(() => {
+  window.$VUEPRESS_DEMO_BLOCK = SETTINGS
+    webController()
+})
+
+onUpdated(() => {
+  webController()
+})
+</script>

docs/.vitepress/components/FlowChart.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    :class="{ 'loading': loading, [preset]: preset }"
+    class="vitepress-flowchart"
+    ref="flowchartEl"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg" 
+      x="0px" y="0px" viewBox="0 0 30 30"
+      style="enable-background:new 0 0 50 50;"
+      class="vitepress-flowchart-loading-icon"
+      v-if="loading"
+    >
+      <rect x="0" y="13" width="4" height="5" >
+        <animate attributeName="height" attributeType="XML"
+          values="5;21;5"
+          begin="0s" dur="0.6s" repeatCount="indefinite" />
+        <animate attributeName="y" attributeType="XML"
+          values="13; 5; 13"
+          begin="0s" dur="0.6s" repeatCount="indefinite" />
+      </rect>
+      <rect x="10" y="13" width="4" height="5" >
+        <animate attributeName="height" attributeType="XML"
+          values="5;21;5"
+          begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+        <animate attributeName="y" attributeType="XML"
+          values="13; 5; 13"
+          begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+      </rect>
+      <rect x="20" y="13" width="4" height="5">
+        <animate attributeName="height" attributeType="XML"
+          values="5;21;5"
+          begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+        <animate attributeName="y" attributeType="XML"
+          values="13; 5; 13"
+          begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+      </rect>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import presets from '../plugins/flowchart/presets/index'
+import { ref, onMounted } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  code: {
+    type: String,
+    required: true
+  },
+  preset: {
+    type: String,
+    default: 'vue'
+  }
+})
+
+const loading = ref(false)
+const flowchartEl = ref(null)
+
+onMounted(() => {
+  const preset = presets[props.preset]
+  if (!preset) {
+    console.warn(`[vitepress-plugin-flowchart] Unknown preset: ${props.preset}`)
+    return
+  }
+
+  const code = props.code
+  flowchartEl.value.setAttribute('id', props.id)
+  const delay = () => new Promise(resolve => setTimeout(resolve, 500))
+  Promise.all([
+    import(/* webpackChunkName: "flowchart" */ 'flowchart.js'),
+    delay(),
+  ]).then(([flowchart]) => {
+    const { parse } = flowchart.default
+    const svg = parse(code)
+    svg.drawSVG(props.id, preset)
+    loading.value = false
+  })
+})
+</script>
+
+<style lang="sass">
+.vitepress-flowchart
+  text-align: center
+  font-size: 0px
+  min-height: 200px
+  display: flex
+  justify-content: center
+  align-items: center
+  transition: all 1s
+  padding: 10px
+  & > svg
+    max-width: 100%
+    height: auto
+  &.loading
+    background-color: #f3f6f8
+
+.vitepress-flowchart
+  &.vue
+    .start-element, .end-element, .operation-element, .parallel-element
+      rx: 5px
+      ry: 5px
+
+.vitepress-flowchart-loading-icon
+  width: 40px
+  height: 40px
+  fill: #3eaf7c
+</style>

docs/.vitepress/components/ImageFigure.vue

@@ -0,0 +1,45 @@
+<template>
+  <figure class="image-figure">
+    <template v-if="!link">
+      <img :src="realSrc" :alt="alt" :title="title">
+      <figcaption>
+        <slot></slot>
+      </figcaption>
+    </template>
+    <template v-else>
+      <a :href="link" target="_blank">
+        <img :src="realSrc" :alt="alt" :title="title">
+      </a>
+      <a :href="link" target="_blank">
+        <figcaption>
+          <slot></slot>
+        </figcaption>
+      </a>
+    </template>
+  </figure>
+</template>
+
+<script setup>
+import { withBase } from 'vitepress'
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String
+  }
+})
+
+const realSrc = computed(() => withBase(props.src))
+</script>

docs/.vitepress/components/Mindmap.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :id="mindData.options.container" class="mindmap"></div>
+</template>
+
+<style lang="sass">
+.mindmap
+  width: 100%
+  height: 450px
+  overflow: auto
+  
+jmnode
+  font: unset !important
+</style>
+
+<script setup>
+import "jsmind/style/jsmind.css"
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  mindData: {
+    type: Object
+  }
+})
+
+onMounted(async () => {
+  const { default: jsMind } = await import("jsmind")
+  const jm = new jsMind(props.mindData.options);
+  jm.show(props.mindData.mind);
+})
+</script>

docs/.vitepress/components/PDF.vue

@@ -0,0 +1,26 @@
+<template>
+  <div ref="pdf"></div>
+</template>
+
+<style lang="sass">
+.pdfobject-container
+  height: 30rem
+  border: 1rem solid rgba(0,0,0,.1)
+</style>
+
+<script setup>
+import PDFObject from 'pdfobject'
+import { ref, onMounted } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String
+  }
+})
+
+const pdf = ref(null)
+
+onMounted(() => {
+  PDFObject.embed(props.src, pdf.value)
+})
+</script>

docs/.vitepress/components/Tree.vue

@@ -0,0 +1,69 @@
+<template>
+  <div :id="id" class="tree" :style="{height}" ref="elTree"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const elTree = ref(null)
+
+const props = defineProps({
+  id: {
+    type: String
+  },
+  height: {
+    type: String
+  },
+  data: {
+    type: Array
+  }
+})
+
+onMounted(async () => {
+  const Treeviz = await import('treeviz')
+  const tree = Treeviz.create({
+    htmlId: props.id,
+    idKey: "id",
+    hasFlatData: true,
+    relationnalField: "father",
+    nodeWidth: 90,
+    nodeHeight: 50,
+    mainAxisNodeSpacing: 1,
+    isHorizontal: false,
+    hasPan: false,
+    hasZoom: false,
+    renderNode: function(node) { 
+    return `<div class='tree-box' style='height:${node.settings.nodeHeight}px; width:${node.settings.nodeWidth}px;background-color:${node.data.color}'>
+        <div>
+          <strong>
+            ${node.data.text_1}
+          </strong>
+        </div>
+      </div>`;
+    },
+    linkWidth : (nodeData)=> 5,
+    linkShape: "curve",
+    linkColor : (nodeData) => "#B0BEC5"
+  })
+  tree.refresh(props.data)
+
+  const observer = new ResizeObserver(mutations => {
+    for (const mutation of mutations) {
+      tree.refresh(props.data)
+    }
+  })
+  observer.observe(elTree.value)
+})
+</script>
+
+<style lang="sass">
+.tree
+  margin: 10px 0px
+  width: 100%
+  .tree-box
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    border-radius: 5px
+</style>