diff --git a/.gitignore b/.gitignore index 6eecc775..9598acdd 100644 --- a/.gitignore +++ b/.gitignore @@ -17,4 +17,6 @@ Thumbs.db # Optional: IDE/Editor-specific files .idea/ -.vscode/ \ No newline at end of file +.vscode/ + +demo \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 901a4af4..a325bb7e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,18 +1,21 @@ { - "overrides": [ - { - "files": ["*.vue","*.ts","*.mts","*.js"], - "options": { - "printWidth": 100, - "singleQuote": true, - "semi": true, - "htmlWhitespaceSensitivity": "ignore", - "tabWidth": 4, - "vueIndentScriptAndStyle": true, - "arrowParens": "avoid" - } - + "overrides": [ + { + "files": [ + "*.vue", + "*.ts", + "*.mts", + "*.js" + ], + "options": { + "singleQuote": true, + "semi": true, + "htmlWhitespaceSensitivity": "ignore", + "tabWidth": 4, + "vueIndentScriptAndStyle": true, + "arrowParens": "avoid", + "printWidth": 120 } - ] - } - \ No newline at end of file + } + ] +} \ No newline at end of file diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json index 925812d3..0408ef1f 100644 --- a/docs/.vitepress/cache/deps/_metadata.json +++ b/docs/.vitepress/cache/deps/_metadata.json @@ -1,47 +1,62 @@ { - "hash": "899144e9", - "browserHash": "8ee42cf7", + "hash": "773ca2f8", + "browserHash": "1d1f60fb", "optimized": { "vue": { "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js", "file": "vue.js", - "fileHash": "042c8cc9", + "fileHash": "acb17af8", "needsInterop": false }, "vitepress > @vue/devtools-api": { "src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js", "file": "vitepress___@vue_devtools-api.js", - "fileHash": "f0a80775", + "fileHash": "d01b0919", "needsInterop": false }, "vitepress > @vueuse/integrations/useFocusTrap": { "src": "../../../../node_modules/@vueuse/integrations/useFocusTrap.mjs", "file": "vitepress___@vueuse_integrations_useFocusTrap.js", - "fileHash": "568ee8b9", + "fileHash": "68de14c2", "needsInterop": false }, "vitepress > mark.js/src/vanilla.js": { "src": "../../../../node_modules/mark.js/src/vanilla.js", "file": "vitepress___mark__js_src_vanilla__js.js", - "fileHash": "d6ce1306", + "fileHash": "55c05fd2", "needsInterop": false }, "vitepress > minisearch": { "src": "../../../../node_modules/minisearch/dist/es/index.js", "file": "vitepress___minisearch.js", - "fileHash": "7bd4e668", + "fileHash": "71dab9dd", + "needsInterop": false + }, + "linq": { + "src": "../../../../node_modules/linq/linq.js", + "file": "linq.js", + "fileHash": "fa900b69", "needsInterop": false }, "shikiji": { "src": "../../../../node_modules/shikiji/dist/index.mjs", "file": "shikiji.js", - "fileHash": "8f4f3aa7", + "fileHash": "ec922caf", "needsInterop": false } }, "chunks": { - "vue-html-WJHCO56X": { - "file": "vue-html-WJHCO56X.js" + "zig-JQILG6AX": { + "file": "zig-JQILG6AX.js" + }, + "vue-B27ZHYKL": { + "file": "vue-B27ZHYKL.js" + }, + "vue-html-LZUYKDKF": { + "file": "vue-html-LZUYKDKF.js" + }, + "chunk-EJKA7CY5": { + "file": "chunk-EJKA7CY5.js" }, "vyper-KVZR75JO": { "file": "vyper-KVZR75JO.js" @@ -61,8 +76,8 @@ "zenscript-EKRWUQWY": { "file": "zenscript-EKRWUQWY.js" }, - "zig-JQILG6AX": { - "file": "zig-JQILG6AX.js" + "system-verilog-ZCRHO7VD": { + "file": "system-verilog-ZCRHO7VD.js" }, "tasl-57YJRKUZ": { "file": "tasl-57YJRKUZ.js" @@ -85,11 +100,8 @@ "viml-3CYFR5ZR": { "file": "viml-3CYFR5ZR.js" }, - "vue-2OLSRGLU": { - "file": "vue-2OLSRGLU.js" - }, - "chunk-AOVV7XFL": { - "file": "chunk-AOVV7XFL.js" + "smalltalk-XSICF23L": { + "file": "smalltalk-XSICF23L.js" }, "solidity-SFCMVF7U": { "file": "solidity-SFCMVF7U.js" @@ -112,11 +124,11 @@ "stata-ZHWOHVFK": { "file": "stata-ZHWOHVFK.js" }, - "svelte-4CDSZSRZ": { - "file": "svelte-4CDSZSRZ.js" + "svelte-7KNVA7KT": { + "file": "svelte-7KNVA7KT.js" }, - "system-verilog-ZCRHO7VD": { - "file": "system-verilog-ZCRHO7VD.js" + "razor-OHYZL6TF": { + "file": "razor-OHYZL6TF.js" }, "reg-BAOTK4K4": { "file": "reg-BAOTK4K4.js" @@ -139,8 +151,8 @@ "shaderlab-IUCZ5YPK": { "file": "shaderlab-IUCZ5YPK.js" }, - "smalltalk-XSICF23L": { - "file": "smalltalk-XSICF23L.js" + "pascal-R2A5TVWT": { + "file": "pascal-R2A5TVWT.js" }, "plsql-GJ6SJAIN": { "file": "plsql-GJ6SJAIN.js" @@ -163,8 +175,8 @@ "purescript-XOM5AT2N": { "file": "purescript-XOM5AT2N.js" }, - "razor-OHYZL6TF": { - "file": "razor-OHYZL6TF.js" + "mojo-OX6XMVHD": { + "file": "mojo-OX6XMVHD.js" }, "narrat-P62HDVZL": { "file": "narrat-P62HDVZL.js" @@ -175,8 +187,8 @@ "nginx-AHW6NBG2": { "file": "nginx-AHW6NBG2.js" }, - "nim-7COYLZ6G": { - "file": "nim-7COYLZ6G.js" + "nim-SKJW3YVZ": { + "file": "nim-SKJW3YVZ.js" }, "nix-QAISYY7L": { "file": "nix-QAISYY7L.js" @@ -187,17 +199,17 @@ "ocaml-ZNLJQ37Q": { "file": "ocaml-ZNLJQ37Q.js" }, - "pascal-R2A5TVWT": { - "file": "pascal-R2A5TVWT.js" + "logo-RLVNGLKB": { + "file": "logo-RLVNGLKB.js" }, - "marko-N7FIRH2T": { - "file": "marko-N7FIRH2T.js" + "marko-OEAU7GOK": { + "file": "marko-OEAU7GOK.js" }, "matlab-4GYH7IOD": { "file": "matlab-4GYH7IOD.js" }, - "mdc-MS4T4GBJ": { - "file": "mdc-MS4T4GBJ.js" + "mdc-GT5CNQTH": { + "file": "mdc-GT5CNQTH.js" }, "toml-YGBSJI6N": { "file": "toml-YGBSJI6N.js" @@ -205,8 +217,8 @@ "shellsession-5BQAENYP": { "file": "shellsession-5BQAENYP.js" }, - "mdx-YYNL6NYF": { - "file": "mdx-YYNL6NYF.js" + "mdx-ZYDSNPBY": { + "file": "mdx-ZYDSNPBY.js" }, "chunk-R5CKCU3B": { "file": "chunk-R5CKCU3B.js" @@ -217,8 +229,11 @@ "mermaid-FRSOABGZ": { "file": "mermaid-FRSOABGZ.js" }, - "mojo-OX6XMVHD": { - "file": "mojo-OX6XMVHD.js" + "json5-RTLIKUFK": { + "file": "json5-RTLIKUFK.js" + }, + "chunk-GE3I4O2G": { + "file": "chunk-GE3I4O2G.js" }, "jsonl-QPF5B4OG": { "file": "jsonl-QPF5B4OG.js" @@ -244,8 +259,8 @@ "lisp-DOYRYJPB": { "file": "lisp-DOYRYJPB.js" }, - "logo-RLVNGLKB": { - "file": "logo-RLVNGLKB.js" + "haml-DPHEBHAV": { + "file": "haml-DPHEBHAV.js" }, "hcl-HK7MLZW4": { "file": "hcl-HK7MLZW4.js" @@ -271,11 +286,8 @@ "jison-6P2WXGAN": { "file": "jison-6P2WXGAN.js" }, - "json5-RTLIKUFK": { - "file": "json5-RTLIKUFK.js" - }, - "chunk-GE3I4O2G": { - "file": "chunk-GE3I4O2G.js" + "python-QDLK5YC3": { + "file": "python-QDLK5YC3.js" }, "julia-YKDAFLA6": { "file": "julia-YKDAFLA6.js" @@ -292,24 +304,24 @@ "haskell-74MMC5NK": { "file": "haskell-74MMC5NK.js" }, - "latex-EBBSAK7K": { - "file": "latex-EBBSAK7K.js" - }, - "markdown-3WR3NXLA": { - "file": "markdown-3WR3NXLA.js" + "latex-3MUFZZLN": { + "file": "latex-3MUFZZLN.js" }, - "haml-D5Y4AY6T": { - "file": "haml-D5Y4AY6T.js" + "markdown-SPWXYT3B": { + "file": "markdown-SPWXYT3B.js" }, - "chunk-Q2FI4RNX": { - "file": "chunk-Q2FI4RNX.js" + "chunk-DPWQ5DXM": { + "file": "chunk-DPWQ5DXM.js" }, - "chunk-PCBLVODW": { - "file": "chunk-PCBLVODW.js" + "chunk-VRFXCP3D": { + "file": "chunk-VRFXCP3D.js" }, "chunk-YU6IFEAK": { "file": "chunk-YU6IFEAK.js" }, + "chunk-PXOXFYEA": { + "file": "chunk-PXOXFYEA.js" + }, "chunk-PYEWW4VG": { "file": "chunk-PYEWW4VG.js" }, @@ -322,6 +334,12 @@ "chunk-DSQHWXLF": { "file": "chunk-DSQHWXLF.js" }, + "vb-NGMW3GW5": { + "file": "vb-NGMW3GW5.js" + }, + "chunk-Z7ESOW3Y": { + "file": "chunk-Z7ESOW3Y.js" + }, "xsl-NM75NCVH": { "file": "xsl-NM75NCVH.js" }, @@ -364,11 +382,11 @@ "chunk-ALMKOMNU": { "file": "chunk-ALMKOMNU.js" }, - "python-QDLK5YC3": { - "file": "python-QDLK5YC3.js" + "graphql-3HZIKS56": { + "file": "graphql-3HZIKS56.js" }, - "chunk-PXOXFYEA": { - "file": "chunk-PXOXFYEA.js" + "chunk-HVYM6WW6": { + "file": "chunk-HVYM6WW6.js" }, "groovy-G2L34F4T": { "file": "groovy-G2L34F4T.js" @@ -409,11 +427,11 @@ "chunk-T7JWQ5JJ": { "file": "chunk-T7JWQ5JJ.js" }, - "vb-NGMW3GW5": { - "file": "vb-NGMW3GW5.js" + "git-rebase-JTTACRGM": { + "file": "git-rebase-JTTACRGM.js" }, - "chunk-Z7ESOW3Y": { - "file": "chunk-Z7ESOW3Y.js" + "chunk-ZYO4ECSD": { + "file": "chunk-ZYO4ECSD.js" }, "yaml-NTIWN2MM": { "file": "yaml-NTIWN2MM.js" @@ -448,15 +466,15 @@ "jsx-4LY6GOQF": { "file": "jsx-4LY6GOQF.js" }, - "graphql-3HZIKS56": { - "file": "graphql-3HZIKS56.js" - }, - "chunk-HVYM6WW6": { - "file": "chunk-HVYM6WW6.js" - }, "chunk-QNDVDVOE": { "file": "chunk-QNDVDVOE.js" }, + "erlang-M3DDHH24": { + "file": "erlang-M3DDHH24.js" + }, + "chunk-IOE6B7MR": { + "file": "chunk-IOE6B7MR.js" + }, "fish-WHWFOMV7": { "file": "fish-WHWFOMV7.js" }, @@ -490,11 +508,11 @@ "chunk-7GMHU37I": { "file": "chunk-7GMHU37I.js" }, - "git-rebase-JTTACRGM": { - "file": "git-rebase-JTTACRGM.js" + "diff-YIBUJBFT": { + "file": "diff-YIBUJBFT.js" }, - "chunk-ZYO4ECSD": { - "file": "chunk-ZYO4ECSD.js" + "chunk-FLXLRGQS": { + "file": "chunk-FLXLRGQS.js" }, "docker-VAUUTYKF": { "file": "docker-VAUUTYKF.js" @@ -532,11 +550,8 @@ "chunk-HZQ7FODK": { "file": "chunk-HZQ7FODK.js" }, - "erlang-M3DDHH24": { - "file": "erlang-M3DDHH24.js" - }, - "chunk-IOE6B7MR": { - "file": "chunk-IOE6B7MR.js" + "crystal-OGUW44KK": { + "file": "crystal-OGUW44KK.js" }, "csharp-ZFNLJINQ": { "file": "csharp-ZFNLJINQ.js" @@ -565,11 +580,11 @@ "dax-VU7S3XHZ": { "file": "dax-VU7S3XHZ.js" }, - "diff-YIBUJBFT": { - "file": "diff-YIBUJBFT.js" + "clojure-TFF7OURA": { + "file": "clojure-TFF7OURA.js" }, - "chunk-FLXLRGQS": { - "file": "chunk-FLXLRGQS.js" + "chunk-L3OQMYI7": { + "file": "chunk-L3OQMYI7.js" }, "cmake-32BV62B2": { "file": "cmake-32BV62B2.js" @@ -604,12 +619,12 @@ "shellscript-6LF2EYOX": { "file": "shellscript-6LF2EYOX.js" }, - "crystal-OGUW44KK": { - "file": "crystal-OGUW44KK.js" - }, "chunk-XADUVIAY": { "file": "chunk-XADUVIAY.js" }, + "berry-OAIVH3NJ": { + "file": "berry-OAIVH3NJ.js" + }, "bibtex-4OPDIN36": { "file": "bibtex-4OPDIN36.js" }, @@ -640,11 +655,8 @@ "clarity-U6US5MNK": { "file": "clarity-U6US5MNK.js" }, - "clojure-TFF7OURA": { - "file": "clojure-TFF7OURA.js" - }, - "chunk-L3OQMYI7": { - "file": "chunk-L3OQMYI7.js" + "less-DAVAXEQO": { + "file": "less-DAVAXEQO.js" }, "postcss-EWKTCOSZ": { "file": "postcss-EWKTCOSZ.js" @@ -652,8 +664,11 @@ "tsx-VLGWE4R5": { "file": "tsx-VLGWE4R5.js" }, - "astro-WE7H6Z2V": { - "file": "astro-WE7H6Z2V.js" + "astro-U7EXNFRT": { + "file": "astro-U7EXNFRT.js" + }, + "chunk-OV3R4IDT": { + "file": "chunk-OV3R4IDT.js" }, "chunk-CTSIKKXI": { "file": "chunk-CTSIKKXI.js" @@ -676,8 +691,8 @@ "beancount-46FOHQ2O": { "file": "beancount-46FOHQ2O.js" }, - "berry-OAIVH3NJ": { - "file": "berry-OAIVH3NJ.js" + "apl-PFUMNEN7": { + "file": "apl-PFUMNEN7.js" }, "applescript-H3L5OBPU": { "file": "applescript-H3L5OBPU.js" @@ -712,11 +727,8 @@ "chunk-PVGY6HG2": { "file": "chunk-PVGY6HG2.js" }, - "less-DAVAXEQO": { - "file": "less-DAVAXEQO.js" - }, - "chunk-OV3R4IDT": { - "file": "chunk-OV3R4IDT.js" + "apache-YGI2VJMN": { + "file": "apache-YGI2VJMN.js" }, "apex-HCH3GZJZ": { "file": "apex-HCH3GZJZ.js" @@ -730,18 +742,6 @@ "html-PFNH32ZK": { "file": "html-PFNH32ZK.js" }, - "java-AZF5ZVFJ": { - "file": "java-AZF5ZVFJ.js" - }, - "xml-AB6GAK2I": { - "file": "xml-AB6GAK2I.js" - }, - "json-PDAS6PBO": { - "file": "json-PDAS6PBO.js" - }, - "apl-PFUMNEN7": { - "file": "apl-PFUMNEN7.js" - }, "chunk-TGTVR7RK": { "file": "chunk-TGTVR7RK.js" }, @@ -751,15 +751,27 @@ "chunk-2ELCN3IJ": { "file": "chunk-2ELCN3IJ.js" }, + "java-AZF5ZVFJ": { + "file": "java-AZF5ZVFJ.js" + }, + "xml-AB6GAK2I": { + "file": "xml-AB6GAK2I.js" + }, "chunk-CPJZYYCP": { "file": "chunk-CPJZYYCP.js" }, "chunk-CVE6OSNN": { "file": "chunk-CVE6OSNN.js" }, + "json-PDAS6PBO": { + "file": "json-PDAS6PBO.js" + }, "chunk-PZEFMSVZ": { "file": "chunk-PZEFMSVZ.js" }, + "slack-ochin-C27X2H57": { + "file": "slack-ochin-C27X2H57.js" + }, "solarized-dark-75WOY7DZ": { "file": "solarized-dark-75WOY7DZ.js" }, @@ -781,8 +793,8 @@ "ada-TVFQUZMU": { "file": "ada-TVFQUZMU.js" }, - "apache-YGI2VJMN": { - "file": "apache-YGI2VJMN.js" + "monokai-XAHIS4I5": { + "file": "monokai-XAHIS4I5.js" }, "nord-YB6MYGOI": { "file": "nord-YB6MYGOI.js" @@ -805,8 +817,8 @@ "slack-dark-GN6IHR5H": { "file": "slack-dark-GN6IHR5H.js" }, - "slack-ochin-C27X2H57": { - "file": "slack-ochin-C27X2H57.js" + "light-plus-I4K52EUT": { + "file": "light-plus-I4K52EUT.js" }, "material-theme-2SA3632G": { "file": "material-theme-2SA3632G.js" @@ -829,8 +841,8 @@ "min-light-YO4OFGU7": { "file": "min-light-YO4OFGU7.js" }, - "monokai-XAHIS4I5": { - "file": "monokai-XAHIS4I5.js" + "css-variables-JC65FAKT": { + "file": "css-variables-JC65FAKT.js" }, "dark-plus-IVH4O774": { "file": "dark-plus-IVH4O774.js" @@ -853,17 +865,11 @@ "hc_light-5RG2LYSF": { "file": "hc_light-5RG2LYSF.js" }, - "light-plus-I4K52EUT": { - "file": "light-plus-I4K52EUT.js" - }, "chunk-V7AUFIRV": { "file": "chunk-V7AUFIRV.js" }, "onig-WVBQWDJQ": { "file": "onig-WVBQWDJQ.js" - }, - "css-variables-JC65FAKT": { - "file": "css-variables-JC65FAKT.js" } } } \ No newline at end of file diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index d00888ca..3d4e5200 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -1,9 +1,5 @@ -import { DefaultTheme, PageData, defineConfig } from 'vitepress'; -import { Sidebar, generateSidebar } from 'vitepress-sidebar'; -import { DirectoryInfo, Path, documentRoot, projectRoot } from '../shared/FileSystem'; +import { defineConfig } from 'vitepress'; import { getSidebar } from '../shared/utils'; -import * as shikiji from 'shikiji'; -import * as fs from 'fs'; import { getRegisteredMarkdownTheme } from '../shared/utils'; // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -11,7 +7,7 @@ export default defineConfig({ lineNumbers: true, theme: { light: await getRegisteredMarkdownTheme('Eva-Light'), - dark: 'dark-plus', // await getRegisteredMarkdownTheme('vscode-dark-plus'), + dark: await getRegisteredMarkdownTheme('Eva-Dark'), }, }, locales: { diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 3e372546..eb723a09 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -1,11 +1,28 @@ :root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient(120deg, rgb(86, 34, 191), rgb(251, 70, 202)); - } -.VPImage { - border-radius: 20%; + --vp-home-hero-name-color: #fa5c15; + --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #fa5c15, rgb(251, 70, 202)); + --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Code', Menlo, 'JetBrains Mono', Monaco, + Consolas, 'Liberation Mono', 'Courier New', monospace; + --vp-font-family-base: Roboto, 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif, + system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --vp-c-brand-1: #2cbc23; + --vp-c-indigo-2: #fa5c15; +} + +.dark { + --vp-code-block-bg: #282c34; + --vp-c-bg: #21252b; + --vp-c-bg-alt: #282c34; + --vp-c-bg-elv: #282c34; + --vp-c-bg-soft: #282c34; + /* inline code color */ + --vp-code-color: #2dbc24 + /*#a78cfa*/ + ; } -/* .markdown-page { - -} */ \ No newline at end of file +.VPImage { + border-radius: 20%; +} \ No newline at end of file diff --git a/docs/[docRoute].md b/docs/[docRoute].md index 6fe72343..df73511b 100644 --- a/docs/[docRoute].md +++ b/docs/[docRoute].md @@ -1,20 +1,30 @@ diff --git a/docs/[docRoute].paths.ts b/docs/[docRoute].paths.ts index 52b4c6ee..3b26f499 100644 --- a/docs/[docRoute].paths.ts +++ b/docs/[docRoute].paths.ts @@ -4,6 +4,8 @@ const object = { { params: { docRoute: 'javascript' } }, { params: { docRoute: 'sql' } }, { params: { docRoute: 'csharpdesignpatterns' } }, + { params: { docRoute: 'articles' } }, + { params: { docRoute: 'vue3' } }, ], }; diff --git a/docs/components/DocumentLayout.vue b/docs/components/DocumentLayout.vue index 6e22ee06..b30650ec 100644 --- a/docs/components/DocumentLayout.vue +++ b/docs/components/DocumentLayout.vue @@ -1,16 +1,22 @@ diff --git a/docs/data/Features.data.ts b/docs/data/Features.data.ts new file mode 100644 index 00000000..4a8a9310 --- /dev/null +++ b/docs/data/Features.data.ts @@ -0,0 +1,60 @@ +import { type Feature } from 'vitepress/dist/client/theme-default/components/VPFeatures.vue'; +import matter from 'gray-matter'; +// const matter = require('gray-matter'); +const featuresLiteral = `--- +features: + - title: SQL + details: SQL syntax for beginners with MySQL + icon: 📝 + linkText: Get started + link: /sql + - title: Docker + details: Ultimate Docker + icon: 🐋 + link: /docker + linkText: Get started + - title: CSharp Design Patterns + details: Design Patterns in C# + icon: 👾 + link: /csharpdesignpatterns + linkText: Get started + - title: JavaScript + details: JavaScript for C# developer + icon: 🦖 + link: /javascript + linkText: Get started + - title: TypeScript + details: TypeScript for C# developer + icon: ⌨ + link: / + linkText: Get started + - title: Rust + details: Rust for C# developer + icon: 🦀 + link: / + linkText: Get started + - title: Python + details: Python for C# developer + icon: 🐍 + link: / + linkText: Get started + - title: Java + details: Java for C# developer + icon: ☕ + link: / + linkText: Get started + - title: Vue3 + details: Vue3 for .NET blazor developer + icon: ⚡ + link: /vue3 + linkText: Get started +--- +`; + +const featuresItems: Feature[] = matter(featuresLiteral).data.features; +const loader = { + load: (): Feature[] => featuresItems, +}; + +export default loader; +export declare const data: Feature[]; diff --git a/docs/document/Articles/docs/Custom markdown theme in VitePress.md b/docs/document/Articles/docs/Custom markdown theme in VitePress.md new file mode 100644 index 00000000..38b5437c --- /dev/null +++ b/docs/document/Articles/docs/Custom markdown theme in VitePress.md @@ -0,0 +1,114 @@ +# Custom markdown theme in VitePress + +## What are textmate rules + +TextMate grammars are for syntax highlighting and language support. The rules are defined in JSON format. + +## How VitePress manage markdown themes + +`VitePress` uses [`shikiji`](/~https://github.com/antfu/shikiji) to perform highlighting(built-in themes are also from `shikiji`). +To figure out how to create an theme instance with correct type, let's check source code of VitePress, `shiki` and `shikiji`. + +```ts +// from vitepress source +import { IThemeRegistration } from 'shiki'; + +type ThemeOptions = IThemeRegistration | { + light: IThemeRegistration; + dark: IThemeRegistration; +}; +interface MarkdownOptions extends MarkdownIt.Options { + // ... + theme?: ThemeOptions; + // ... +} +``` + +```ts +// from shiki source +type IThemeRegistration = IShikiTheme | StringLiteralUnion; + +interface IShikiTheme extends IRawTheme { ... } + +interface ThemeRegistrationRaw extends IRawTheme { } + +interface ThemeRegistration extends ThemeRegistrationRaw { ... } +``` + +Luckily we have these methods from `shikiji` so we can perform registration for themes. +And for those abstraction relationships, we can pass `ThemeRegistration` instance to `theme?: ThemeOptions` + +```ts +// from shikiji +declare const getSingletonHighlighter: () => Promise; +``` + +```ts +// from shikiji +interface HighlighterGeneric { + /** + * Load a theme to the highlighter, so later it can be used synchronously. + */ + loadTheme(...themes: (ThemeInput | BundledThemeKeys)[]): Promise; + /** + * Get the theme registration object + */ + getTheme(name: string | ThemeRegistration | ThemeRegistrationRaw): ThemeRegistration; + /** + * Get the names of loaded themes + */ + getLoadedThemes(): string[]; + // ... +} +``` + +## Parse json into `shikiji.ThemeRegistration` + +1. First, get the theme represented as json you desired. If you are using built-in themes from `shikiji` you can find them in `node_modules/shikiji/dist/themes/*.mjs`. The anon object in the module is the presentation of the theme. No matter what method you take, make it a json and include it in your project. + +2. Next, we find a way to register the modified theme. + +```ts +import * as shikiji from 'shikiji'; +import * as fs from 'fs'; + +// assuming that we have these theme available in somewhere. Then find its path by name. +type CustomMarkdownTheme = 'Eva-Dark' | 'Eva-Light' | 'Rider-Dark' | 'Darcula' | 'vscode-dark-plus'; + +export async function getRegisteredMarkdownTheme(theme: CustomMarkdownTheme): Promise { + let isThemeRegistered = (await shikiji.getSingletonHighlighter()) + .getLoadedThemes() // this method returns names of loaded themes, name is specified in each textmate rule json. + .find(x => x === theme); + if (!isThemeRegistered) { + const myTheme = JSON.parse( + fs.readFileSync(/* find the path of your json */), 'utf8') + ); + (await shikiji.getSingletonHighlighter()).loadTheme(myTheme); + } + return (await shikiji.getSingletonHighlighter()).getTheme(theme); +} +``` + +## Specify themes in `config.mts` + +Finally we can specify the theme in config, but this solution does not support hot reload for the theme json. **If you need to reload the theme, please rebuild.** + +```ts +// config.mts +export default defineConfig({ + markdown: { + lineNumbers: true, + theme: { + light: await getRegisteredMarkdownTheme('Eva-Light'), + dark: await getRegisteredMarkdownTheme('vscode-dark-plus'), + }, + },... +} +``` + +::: info + +- [`shikiji` - Load Custom Themes](/~https://github.com/antfu/shikiji/blob/main/docs/themes.md#load-custom-themes) +- [MarkdownOption in `VitePress`](https://vitepress.dev/reference/site-config#markdown) + +::: diff --git a/docs/document/Articles/docs/Start your first npm package - Build, CI and Publish.md b/docs/document/Articles/docs/Start your first npm package - Build, CI and Publish.md new file mode 100644 index 00000000..4ddb6a41 --- /dev/null +++ b/docs/document/Articles/docs/Start your first npm package - Build, CI and Publish.md @@ -0,0 +1,428 @@ +# Developing your first npm library - Build, CI and Publish + +## Prerequisites + +- Node.js + +- Package manager: `npm` (or any alternative like `pnpm`) + +- Github account + +- npm account + +## Project structure + +Create three folders for library source(src), testing(test), and compiled(dist). + +```text +project-root +| ++---dist ++---src +\---test +``` + +## Init repository + +Init your repository and add `.gitignore` + +```bash +git init +``` + +```gitignore +dist +node_modules +``` + +## Init `package.json` + +```bash +npm init -y +``` + +Add package name for your project. + +```json +// package.json +{ + "name": "My first npm package", +} +``` + +## Add LICENSE + +Install `license` for generating a `LICENSE`. + +```bash +npm install license -D +``` + +Add MIT license or add other license, the author name is the same as the user.name in current git config. + +```bash +npx license MIT +# or +npx license +``` + +## Add TypeScript + +### Add as devDependency + +```bash +npm install -D typescript +``` + +### `tsconfig.json` + +```bash +npx tsc -init +``` + +```json +// tsconfig.json +{ + "include": ["./src/**/*.ts"], + "exclude": ["./node_modules"], + "compilerOptions": { + "target": "es2016", + "rootDir": "./src", + "outDir": "./dist", + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true, + "noEmit": true + } +} +``` + +## Add [`tsup`](/~https://github.com/egoist/tsup) + +`tsup` is a zero-config TypeScript bundler with a focus on simplicity and speed. It is designed to make it easy to bundle TypeScript code for the web without needing extensive configuration. The name "tsup" is derived from "TypeScript micro bundler." + +```bash +npm install -D tsup +``` + +### Add scripts in `package.json` + +Add a script that calls `tsup` to help us build the source. +And `lint` for get syntax checking. + +```json{4,5} +// package.json +{ + "scripts": { + "build": "tsup ./src/index.ts -d ./dist --format cjs,esm --dts", + "lint": "tsc" + } +} +``` + +### Build using `tsup` + +Now add `./src/index.ts` just for demonstration. + +```ts +export const hello = () => console.log('Hello!'); +``` + +Then build it. And check compiled file in `./dist` + +```bash +npm run build +``` + +## Add [`vitest`](/~https://github.com/vitest-dev/vitest?tab=readme-ov-file) for testing + +Vitest testing framework powered by Vite. It aims to position itself as the Test Runner of choice for Vite projects, and as a solid alternative even for projects not using Vite. + +```bash +npm install -D vitest +``` + +### Create a test + +Add `./test/index.test.ts` for demonstration. + +```ts +import { describe, expect, it } from "vitest"; + +describe("Whatever", () => { + it("should pass CI", () => { + expect(1).toBe(1); + }); +}); +``` + +### Add scripts for testing + +```json{6,7} +// package.json +{ + "scripts": { + "build": "tsup ./src/index.ts -d ./dist --format cjs,esm --dts", + "lint": "tsc", + "dev": "vitest", // watch the project + "test": "vitest run" + }, +} +``` + +## Add script for CI + +When CI runs, we should do syntax check first, then testing, finally build our library. + +```json{7} +// package.json +{ + "build": "tsup ./src/index.ts -d ./dist --format cjs,esm --dts", + "lint": "tsc", + "dev": "vitest", + "test": "vitest run", + "ci": "npm run lint && npm run test && npm run build" +} +``` + +## Add CI action + +With `"ci"` script, we can now set our workflow. +Add `.github/workflows/main.yml` in project root. + +```yml +# .github/workflows/main.yml +name: CI +on: + push: + branches: + - "**" + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 18 + cache: npm + - run: npm install + - run: npm run ci +``` + +Now commit files and publish the branch to github, the workflow will auto run. + +## Set entries for your package + +Compiled files in `./dist` include `index.js`, `index.mjs`, `index.d.ts` and `index.d.mts`. `"main"` for `commonjs` entry, `"module"` for `esm` entry. This are the entries for other users to import your code. +Also, include type info from `index.d.ts`. + +```json +{ + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts" +} +``` + +## Alpha version + +In the early stage of development, we set the first version as `0.0.1`. Working with `changeset`, each version will be automatically changed. + +```json +// package.json +{ + "version": "0.0.1" +} +``` + +## Access token from npm account + +- Generate new automation token for your npm account. +- Open repository setting, find `security-Secrets and variables-Actions`, add new repository secret with copied token value, and name the secret as `NPM_TOKEN`. + +## Add [`@changesets/cli`](/~https://github.com/changesets/changesets) + +The changesets workflow is designed to help when people are making changes, all the way through to publishing. It lets contributors declare how their changes should be released, then we automate updating package versions, and changelogs, and publishing new versions of packages based on the provided information. + +```bash +npm install @changesets/cli -D +``` + +### changeset init + +```bash +npx changeset init +``` + +After initialization, `.changeset/config.json` is added in project root. Please check if `"baseBranch"` is same as your branch. + +```json{8} +/* .changeset/config.json */ +{ + "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "restricted", + "baseBranch": "master", + "updateInternalDependencies": "patch", + "ignore": [] +} +``` + +### Ready to release? `changeset` your version + +Once you are ready to release the initial version, do + +```bash +npx changeset +``` + +::: info +changeset documentation + +[changesets/docs/command-line-options.md](/~https://github.com/changesets/changesets/blob/main/docs/command-line-options.md#add) +::: + +## Publish automation + +### Add `"release"` script + +For releasing, we first do `CI`. If everything is fine, `changeset` publishes it. + +```json{8} +{ + "scripts": { + "build": "tsup ./src/index.ts -d ./dist --format cjs,esm --dts", + "lint": "tsc", + "dev": "vitest", + "test": "vitest run", + "ci": "npm run lint && npm run test && npm run build", + "release": "npm run ci && npx changeset publish" + } +} +``` + +### Add `publish` action + +Add `publish.yml` in `.github/workflows/` + +```yml{6,28} +# .github/workflows/publish.yml +name: Publish +on: + push: + branches: + - "master" + +concurrency: ${{ github.workflow }}-${{ github.ref }} + +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 18 + cache: npm + + - run: npm install + - name: Create Release Pull Request or Publish + id: changesets + uses: changesets/action@v1 + with: + publish: npm run release + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + +``` + +## What files to release? - Add `.npmignore` + +`.npmignore` excludes the files we don't want to release in npm as a package. +We should exclude all develop-stage files but compiled files in `./dist` and `package.json`, `CHANGELOG.md` as well as `LICENSE`. + +```npmignore +src +.changeset +.github +.editorconfig +package-lock.json +tsconfig.json +``` + +## Publish your package + +Make sure `changeset` release your library as public. + +```json{8} +// .changeset/config.json +{ + "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "public", + "baseBranch": "master", + "updateInternalDependencies": "patch", + "ignore": [] +} +``` + +Before you commit, check if workflow has permission to perform actions. + +![workflow-permission](../pics/workflow-permisson.png) + +Then commit the current stage, sync to repository, when publish action completed, an auto generated pull request is right there. + +![version-package](../pics/version-packages.png) + +Now simply merge the pull request, the `CI` action will run to release your library in npm! + +## Add more info into `package.json` + +```json +// package.json +{ + "author": "sharpchen", + "repository": { + "type": "git", + "url": "/~https://github.com/sharpchen/myfirst-npm-package/" + }, + "homepage": "/~https://github.com/sharpchen/myfirst-npm-package/", + "keywords": [ + // ...keywords for searching + ], + "license": "MIT", + "description": "what this package do", +} +``` + +## How to work with it + +### Regular develop-stage + +During regular development stage, we just do commit and sync to repository. + +### Ready to release a new version + +If a version is ready, do + +```bash +npx changeset +``` + +Then + +```bash +npx changeset version +``` + +And finally commit those changes, actions will start to work and publish the new version in npm! diff --git a/docs/document/Articles/docs/String nature in .NET.md b/docs/document/Articles/docs/String nature in .NET.md new file mode 100644 index 00000000..7535a863 --- /dev/null +++ b/docs/document/Articles/docs/String nature in .NET.md @@ -0,0 +1,35 @@ +# String nature in .NET + +## String pool + +In .NET, the string pool (also known as the intern pool) is a special area of memory where the runtime stores unique string literals. The purpose of the string pool is to optimize memory usage by ensuring that only one copy of a particular string value is held in memory, regardless of how many times it is used in the code. This is possible because strings are immutable in .NET; once a string is created, it cannot be modified. + +### Mutating string in pool + +We are able to mutate the string in pool in `unsafe` block to demonstrate this characteristic. + +```c# +string text = "abc"; + +unsafe +{ + fixed (char* p = text) + { + p[0] = 'd'; + } +} +Console.Write("abc"); // dbc +``` + +### Retrieve reference and register string from string pool + +For string from external resources, we may need to registered it into string pool using `string.Intern(str: string): string`. +This approach is the same as declaring a string literal, they will all exist during application domain. + +```c# +string url = ...; +HttpResponseMessage response = await httpClient.GetAsync(url); +string responseBody = await response.Content.ReadAsStringAsync(); +// Register the string so it won't be auto collected. +string.Intern(responseBody); +``` \ No newline at end of file diff --git a/docs/document/Articles/pics/version-packages.png b/docs/document/Articles/pics/version-packages.png new file mode 100644 index 00000000..fe8d765c Binary files /dev/null and b/docs/document/Articles/pics/version-packages.png differ diff --git a/docs/document/Articles/pics/workflow-permisson.png b/docs/document/Articles/pics/workflow-permisson.png new file mode 100644 index 00000000..6ab98fd2 Binary files /dev/null and b/docs/document/Articles/pics/workflow-permisson.png differ diff --git a/docs/document/Csharp Design Patterns/docs/Structural/1.Adapter.md b/docs/document/Csharp Design Patterns/docs/Structural/1.Adapter.md index 61706f61..c0f93479 100644 --- a/docs/document/Csharp Design Patterns/docs/Structural/1.Adapter.md +++ b/docs/document/Csharp Design Patterns/docs/Structural/1.Adapter.md @@ -116,12 +116,12 @@ VectorObjectAdapter vecAdapter = new(vec); Geometry.Draw(vecAdapter); ``` -![first-run](../../pics/adapter-caching-first-run.png "first-run") +![first-run](<../../../CSharp Design Patterns/pics/adapter-caching-first-run.png> "first-run") However if you draw it twice, problem comes. If you want to draw a geometry in a diagram, it should be drew only once, or it may cause a bunch of memory issues and looks bad when displayed. -![second-run](../../pics/adapter-caching-second-run.png) +![second-run](<../../../CSharp Design Patterns/pics/adapter-caching-second-run.png>) ### Solution - Apply Caching diff --git a/docs/document/Vue3/docs/1. Define a Component and Reuse it/1. How to define a component.md b/docs/document/Vue3/docs/1. Define a Component and Reuse it/1. How to define a component.md new file mode 100644 index 00000000..e0d98f81 --- /dev/null +++ b/docs/document/Vue3/docs/1. Define a Component and Reuse it/1. How to define a component.md @@ -0,0 +1,61 @@ +# How to define a component + +## Define a component + +Let's start with a simple example. How much difference you can tell? + +::: code-group + +```razor[razor] + + +@code { + private int _count; + private void IncrementCount() => _count++; +} +``` + +```vue[vue]{2} + + + + + +``` + +::: + +## Difference + +### Reactivity + +- The view model of razor page would be compiled into a class that every field or property is reactive. +- However, vue requires explicit reactivity with api like `ref()`, `reactive()`. + +::: tip +[Prefer `ref()` than `reactive()`](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive) + +::: + +### Event Handling + +- razor supports method delegation, but doesn't support raw expression like `@(_count++)`. +- vue supports both expression and function reference. + +### `CSS` Isolation + +- `Blazor` isolates `css` file with the separate file named as the same as component. +- `Vue` could specify styles for component in scope using `