Split hljs into a new file; improved dev vite server system (thomicel…

…i#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:https://localhost:16157/" + jsfile
+ return "http:https://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']
  }
  }
 })