Split hljs into a new file; improved dev vite server system (#91)

internal/web/run.go

@@ -82,11 +82,14 @@ var fm = template.FuncMap{
 
 		return defaultAvatar()
 	},
-	"asset": func(jsfile string) string {
+	"asset": func(file string) string {
 		if dev {
-			return "http://localhost:16157/" + jsfile
+			return "http://localhost:16157/" + file
 		}
-		return config.C.ExternalUrl + "/" + manifestEntries[jsfile].File
+		return config.C.ExternalUrl + "/" + manifestEntries[file].File
+	},
+	"dev": func() bool {
+		return dev
 	},
 	"defaultAvatar": defaultAvatar,
 	"visibilityStr": func(visibility int, lowercase bool) string {

public/hljs.ts

@@ -0,0 +1,50 @@
+import hljs from 'highlight.js';
+import md from 'markdown-it';
+
+document.querySelectorAll('.markdown').forEach((e: HTMLElement) => {
+    e.innerHTML = md({
+        html: true,
+        highlight: function (str, lang) {
+            if (lang && hljs.getLanguage(lang)) {
+                try {
+                    return '<pre class="hljs"><code>' +
+                        hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
+                        '</code></pre>';
+                } catch (__) {
+                }
+            }
+
+            return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
+        }
+    }).render(e.textContent);
+});
+
+document.querySelectorAll<HTMLElement>('.table-code').forEach((el) => {
+    const ext = el.dataset.filename?.split('.').pop() || '';
+
+    if (hljs.autoDetection(ext) && ext !== 'txt') {
+        el.querySelectorAll<HTMLElement>('td.line-code').forEach((ell) => {
+            ell.classList.add('language-' + ext);
+            hljs.highlightElement(ell);
+        });
+    }
+
+    el.addEventListener('click', event => {
+        if (event.target && (event.target as HTMLElement).matches('.line-num')) {
+            Array.from(document.querySelectorAll('.table-code .selected')).forEach((el) => el.classList.remove('selected'));
+
+            const nextSibling = (event.target as HTMLElement).nextSibling;
+            if (nextSibling instanceof HTMLElement) {
+                nextSibling.classList.add('selected');
+            }
+
+
+            const filename = el.dataset.filenameSlug;
+            const line = (event.target as HTMLElement).textContent;
+            const url = location.protocol + '//' + location.host + location.pathname;
+            const hash = '#file-' + filename + '-' + line;
+            window.history.pushState(null, null, url + hash);
+            location.hash = hash;
+        }
+    });
+});

public/main.ts

@@ -34,11 +34,11 @@ document.addEventListener('DOMContentLoaded', () => {
         checkTheme();
     }
 
-    document.getElementById('theme-btn')!.onclick = (e) => {
+    document.getElementById('theme-btn')!.onclick = () => {
         themeMenu.classList.toggle('hidden');
     }
 
-    document.getElementById('user-btn')?.addEventListener("click" , (e) => {
+    document.getElementById('user-btn')?.addEventListener("click" , () => {
         document.getElementById('user-menu').classList.toggle('hidden');
     })
 
@@ -65,53 +65,6 @@ document.addEventListener('DOMContentLoaded', () => {
         };
     }
 
-    document.querySelectorAll('.markdown').forEach((e: HTMLElement) => {
-        e.innerHTML = md({
-            html: true,
-            highlight: function (str, lang) {
-                if (lang && hljs.getLanguage(lang)) {
-                    try {
-                        return '<pre class="hljs"><code>' +
-                            hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
-                            '</code></pre>';
-                    } catch (__) {
-                    }
-                }
-
-                return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
-            }
-        }).render(e.textContent);
-    });
-
-    document.querySelectorAll<HTMLElement>('.table-code').forEach((el) => {
-        const ext = el.dataset.filename?.split('.').pop() || '';
-
-        if (hljs.autoDetection(ext) && ext !== 'txt') {
-            el.querySelectorAll<HTMLElement>('td.line-code').forEach((ell) => {
-                ell.classList.add('language-' + ext);
-                hljs.highlightElement(ell);
-            });
-        }
-
-        el.addEventListener('click', event => {
-            if (event.target && (event.target as HTMLElement).matches('.line-num')) {
-                Array.from(document.querySelectorAll('.table-code .selected')).forEach((el) => el.classList.remove('selected'));
-
-                const nextSibling = (event.target as HTMLElement).nextSibling;
-                if (nextSibling instanceof HTMLElement) {
-                    nextSibling.classList.add('selected');
-                }
-
-
-                const filename = el.dataset.filenameSlug;
-                const line = (event.target as HTMLElement).textContent;
-                const url = location.protocol + '//' + location.host + location.pathname;
-                const hash = '#file-' + filename + '-' + line;
-                window.history.pushState(null, null, url + hash);
-                location.hash = hash;
-            }
-        });
-    });
 
     const colorhash = () => {
         Array.from(document.querySelectorAll('.table-code .selected')).forEach((el) => el.classList.remove('selected'));
@@ -191,7 +144,6 @@ document.addEventListener('DOMContentLoaded', () => {
     if (gistmenuvisibility) {
         let submitgistbutton = (document.getElementById('submit-gist') as HTMLInputElement);
         document.getElementById('gist-visibility-menu-button')!.onclick = () => {
-            console.log("z");
             gistmenuvisibility!.classList.toggle('hidden');
         }
         Array.from(document.querySelectorAll('.gist-visibility-option')).forEach((el) => {

templates/base/base_footer.html

@@ -15,6 +15,7 @@
 </p>
 </div>
 
+<script type="module" src="{{ asset "hljs.ts" }}"></script>
 
 </div>
 </body>

templates/base/base_header.html

@@ -27,8 +27,15 @@
     </script>
     <link rel="icon" type="image/svg+xml" href="{{ asset "favicon.svg" }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="{{ asset "main.css" }}" />
+
-    <script type="module" src="{{ asset "main.ts" }}"></script>
+    {{ if dev }}
+        <script type="module" src="{{ asset "@vite/client" }}"></script>
+        <link rel="stylesheet" href="{{ asset "style.css" }}" />
+        <script type="module" src="{{ asset "main.ts" }}"></script>
+    {{ else }}
+        <link rel="stylesheet" href="{{ asset "main.css" }}" />
+        <script type="module" src="{{ asset "main.ts" }}"></script>
+    {{ end }}
 
     {{ if .htmlTitle }}
         <title>{{ .htmlTitle }} - Opengist</title>

vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
         assetsDir: 'assets',
         manifest: true,
         rollupOptions: {
-            input: ['./public/main.ts', './public/editor.ts', './public/admin.ts']
+            input: ['./public/main.ts', './public/editor.ts', './public/admin.ts', './public/hljs.ts']
         }
     }
 })