From 367a5e13c2afa1725cd61e4715e2f3a0877b5be1 Mon Sep 17 00:00:00 2001 From: Thomas Miceli <27960254+thomiceli@users.noreply.github.com> Date: Tue, 5 Sep 2023 15:22:09 +0200 Subject: [PATCH] Split hljs into a new file; improved dev vite server system (#91) --- internal/web/run.go | 9 ++++-- public/hljs.ts | 50 +++++++++++++++++++++++++++++++ public/main.ts | 52 ++------------------------------- templates/base/base_footer.html | 1 + templates/base/base_header.html | 11 +++++-- vite.config.js | 2 +- 6 files changed, 69 insertions(+), 56 deletions(-) create mode 100644 public/hljs.ts diff --git a/internal/web/run.go b/internal/web/run.go index 4fb827f9..a4d1839d 100644 --- a/internal/web/run.go +++ b/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 { diff --git a/public/hljs.ts b/public/hljs.ts new file mode 100644 index 00000000..1edfb93d --- /dev/null +++ b/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 '
' +
+                        hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
+                        '
'; + } catch (__) { + } + } + + return '
' + md().utils.escapeHtml(str) + '
'; + } + }).render(e.textContent); +}); + +document.querySelectorAll('.table-code').forEach((el) => { + const ext = el.dataset.filename?.split('.').pop() || ''; + + if (hljs.autoDetection(ext) && ext !== 'txt') { + el.querySelectorAll('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; + } + }); +}); diff --git a/public/main.ts b/public/main.ts index 80d1a54c..daacf342 100644 --- a/public/main.ts +++ b/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 '
' +
-                            hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
-                            '
'; - } catch (__) { - } - } - - return '
' + md().utils.escapeHtml(str) + '
'; - } - }).render(e.textContent); - }); - - document.querySelectorAll('.table-code').forEach((el) => { - const ext = el.dataset.filename?.split('.').pop() || ''; - - if (hljs.autoDetection(ext) && ext !== 'txt') { - el.querySelectorAll('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) => { diff --git a/templates/base/base_footer.html b/templates/base/base_footer.html index b393c163..a63f90fc 100644 --- a/templates/base/base_footer.html +++ b/templates/base/base_footer.html @@ -15,6 +15,7 @@

+ diff --git a/templates/base/base_header.html b/templates/base/base_header.html index 415a0c3d..738d0a5c 100644 --- a/templates/base/base_header.html +++ b/templates/base/base_header.html @@ -27,8 +27,15 @@ - - + + {{ if dev }} + + + + {{ else }} + + + {{ end }} {{ if .htmlTitle }} {{ .htmlTitle }} - Opengist diff --git a/vite.config.js b/vite.config.js index 454e890f..7a601716 100644 --- a/vite.config.js +++ b/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'] } } })