feat: update readme video tutorial

oeyoews · Oct 17, 2024 · 2b749da · 2b749da
1 parent 92137dc
commit 2b749da
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 <h2>V3</h2>
 
+* `3.6.1`: update readme video tutorial
 * `3.6.0`: update `/?` to `@help:`, and some other triggers
 * `3.5.2`: update clickable icon style on hover
 * `3.5.1`: tag completion better for http link

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "license": "MIT",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "packageManager": "[email protected]",
   "scripts": {
     "update:config": " pnpm ts-node scripts/generateConfig.ts",

diff --git a/packages/lang-tiddlywiki/package.json b/packages/lang-tiddlywiki/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lang-tiddlywiki",
-  "version": "3.5.3",
+  "version": "3.6.1",
   "description": "",
   "scripts": {
     "build": "cm-buildhelper src/tiddlywiki.ts"

diff --git a/src/tiddlywiki-codemirror-6/plugin.info b/src/tiddlywiki-codemirror-6/plugin.info
@@ -2,7 +2,7 @@
   "title": "$:/plugins/oeyoews/tiddlywiki-codemirror-6",
   "name": "CodeMirror6",
   "description": "CodeMirror 6 editor",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "core-version": ">=5.3.4",
   "list": "readme settings changelog ",
   "stability": "STABILITY_2_STABLE"

diff --git a/src/tiddlywiki-codemirror-6/readme.tid b/src/tiddlywiki-codemirror-6/readme.tid
@@ -2,11 +2,10 @@ title: $:/plugins/oeyoews/tiddlywiki-codemirror-6/readme
 
 <!-- <img alt="version" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Foeyoews%2Ftiddlywiki-codemirror6%2Fmain%2Fpackage.json&query=version&style=flat-square&logo=Codemirror&logoColor=white&label=codemirror&labelColor=black&color=black"> -->
 
-<center>
-<video width="300" controls style="border-radius:8px;">
-  <source src="https://user-images.githubusercontent.com/72405338/294956491-948b791f-04e1-4447-a5d3-81ebb13619de.mp4" type="video/mp4">
-</video>
-</center>
+<$button style="border: none;">
+<$action-sendmessage $message="tm-modal" $param="$:/plugins/oeyoews/tiddlywiki-codemirror-6/video" />
+Show Video Tutorial
+</$button>
 
 [[Demo|https://oeyoews.github.io/tiddlywiki-codemirror6/#%24%3A%2Fplugins%2Foeyoews%2Ftiddlywiki-codemirror-6]]
 

diff --git a/src/tiddlywiki-codemirror-6/tiddlers/styles/styles.tid b/src/tiddlywiki-codemirror-6/tiddlers/styles/styles.tid
@@ -519,4 +519,39 @@ li[aria-selected] {
 <!-- 内联样式多了个overfolw: auto??? -->
 .tc-edit-texteditor-body  {
 	overflow: inherit !important;
-}
+}
+
+<!-- modal ui -->
+.o-tm .tc-modal,
+.o-tm .tc-modal-header,
+.o-tm .tc-modal-body,
+.o-tm .tc-modal-footer {
+  border: none;
+  background-color: #f5f5f5;
+}
+
+.o-tm .tc-modal-header {
+	border-radius: 10px 10px 0 0;
+}
+
+.o-tm .tc-modal {
+	border-radius: 10px;
+}
+
+.o-tm .tc-modal-footer {
+	border-radius: 0 0 10px 10px;
+}
+
+@media (max-width: 500px) {
+.o-tm .tc-modal {
+	width: 95% !important;
+}
+}
+
+.o-tm .tc-modal-footer {
+  <!-- display: none; -->
+}
+
+.o-tm .tc-modal-backdrop {
+  cursor: pointer;
+}
diff --git a/src/tiddlywiki-codemirror-6/video.tid b/src/tiddlywiki-codemirror-6/video.tid
@@ -0,0 +1,10 @@
+title: $:/plugins/oeyoews/tiddlywiki-codemirror-6/video
+class: tc-modal-centered o-tm
+mask-closable: yes
+subtitle: Codemirror6 Video Tutorial
+
+<center>
+<video width="700" controls style="border-radius:8px;">
+  <source src="https://user-images.githubusercontent.com/72405338/294956491-948b791f-04e1-4447-a5d3-81ebb13619de.mp4" type="video/mp4">
+</video>
+</center>