feat: glsl support with shaderview

.github/workflows/deploy.yml

@@ -3,6 +3,9 @@ on:
     schedule:
         - cron: "*/30 * * * *"
     push:
+        branches:
+            - "main"
+    workflow_dispatch:
 
 jobs:
     build:

README.md

@@ -19,8 +19,11 @@ bun run build
 - [x] SPA and opengraph
 - [x] build with github actions
 - [x] config in sub repo
+- [x] copyright
 - [ ] nav bar on top
 - [ ] date updated
 - [ ] archive page
+- [ ] about page
+- [ ] contact/links
 - [ ] link to previous/next article
 - [ ] proper docs

bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "md-blog",
       "dependencies": {
+        "@keithclark/shaderview": "git+https://github.com/keithclark/shaderview",
         "highlight.js": "^11.11.1",
         "katex": "^0.16.45",
         "lucide": "^1.11.0",
@@ -210,6 +211,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@keithclark/shaderview": ["@keithclark/shaderview@github:keithclark/shaderview#fee0cf0", {}, "keithclark-shaderview-fee0cf0"],
+
     "@mermaid-js/parser": ["@mermaid-js/parser@1.1.0", "", { "dependencies": { "langium": "^4.0.0" } }, "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw=="],
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",
@@ -17,6 +17,7 @@
     "format": "prettier --write src/ *.ts *.json"
   },
   "dependencies": {
+    "@keithclark/shaderview": "git+https://github.com/keithclark/shaderview",
     "highlight.js": "^11.11.1",
     "katex": "^0.16.45",
     "lucide": "^1.11.0",

src/components/PageFooter.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, BASE_URL } from '@/lib/meta'
+import { REPOSITORY, NAME, VERSION, BASE_URL, TITLE, COPYRIGHT } from '@/lib/meta'
+import { stripHTML } from '@/lib/strings';
 </script>
 
 <template>
@@ -8,10 +9,8 @@ import { REPOSITORY, NAME, VERSION, BASE_URL } from '@/lib/meta'
   </template>
   <hr />
   <footer>
-    <small>
+    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> | Made with
-      {{ new Date().getFullYear() }} — Made with
+    <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a> |
-      <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a> —
+    <a :href="BASE_URL + 'atom.xml'"><i icon="rss"></i> RSS</a>
-      <a :href="BASE_URL + 'atom.xml'"><i icon="rss"></i> RSS</a>
-    </small>
   </footer>
 </template>

src/lib/meta.ts

@@ -5,4 +5,5 @@ export const VERSION = packageJson.version
 export const REPOSITORY = packageJson.repository
 export const TITLE = import.meta.env.VITE_APP_TITLE
 export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE
+export const COPYRIGHT = import.meta.env.VITE_APP_COPYRIGHT
 export const BASE_URL = import.meta.env.BASE_URL

src/main.ts

@@ -2,6 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
+import ShaderviewElement from '@keithclark/shaderview';
+customElements.define('kc-shaderview', ShaderviewElement);
+
 const app = createApp(App)
 
 app.use(router)

vite.config.ts

@@ -16,6 +16,7 @@ export default ({ mode }: { mode: string }) => {
   process.env.VITE_APP_LANG = articlesConfig['lang']
   process.env.VITE_APP_SIGNATURE = articlesConfig['signature']
   process.env.VITE_CUSTOM_HEAD = articlesConfig['custom_head']
+  process.env.VITE_APP_COPYRIGHT = articlesConfig['copyright']
 
   return defineConfig({
     plugins: [vue(), vueDevTools(), mdPlugin({ mode: [Mode.HTML] })],