allow load scripts on page change

Author: Lhcfl

layout/partial/comments.pug

@@ -85,16 +85,13 @@ mixin make_comments
       if theme.valine.enable == true
         a#comments
         #vcomments(style="margin: 0 30px")
-        script Anatolo.comment.load();
 
     if theme.gitment
       if theme.gitment.enable == true
         a#comments
         #gitment_container(style="padding: 10px")
-        script Anatolo.comment.load();
 
     if theme.gitalk
       if theme.gitalk.enable == true
         a#comments
         #gitalk_container(style="padding: 10px")
-        script Anatolo.comment.load();

src/anatolo/anatolo.ts

@@ -4,7 +4,7 @@ import { darkLightToggle } from './dark-light-toggle';
 import { site } from './site';
 
 async function getPageTitle() {
-  return (await site.thisPage()).title ?? document.querySelector('title')?.textContent;
+  return (await site.thisPage())?.title ?? document.querySelector('title')?.textContent ?? '';
 }
 
 // Classes for interacting with elements in static HTML

src/anatolo/comment.ts

@@ -6,6 +6,8 @@ let config: CommentConfig | null = null;
 
 export async function load(retry = 3) {
   if (!config) return;
+  const id = (await Anatolo.getPageTitle()).slice(0, 50);
+  if (!id) return;
   if (config.valine?.enable && (window as any).Valine) {
     new (window as any).Valine({
       el: '#vcomments',
@@ -21,7 +23,6 @@ export async function load(retry = 3) {
       avatar: config.valine.avatar,
     });
   }
-  const id = (await Anatolo.getPageTitle()).slice(0, 50);
   if (config.gitment?.enable && (window as any).Gitment) {
     var git_ment = {
       id,
@@ -50,7 +51,7 @@ export async function load(retry = 3) {
   }
 }
 
-router.onPageChange(load);
+router.onPageChange(() => load().catch(() => {}));
 
 export function setConfig(conf: CommentConfig) {
   config = conf;

src/anatolo/load-comment.ts

@@ -1,6 +1,7 @@
 import { make_friends_list } from '@/utils/main';
 import { AnatoloRef } from './ref';
 import { site } from './site';
+import { loadScript } from '@/utils/load-script';
 
 type RouterState = { url: string; body: string; title: string; scrollY?: number };
 
@@ -212,6 +213,7 @@ export class AnatoloRouter {
 
   handlePage() {
     this.scrollToHash();
+    this.reloadScript();
     this.pageChangeFns.forEach((fn) => {
       try {
         fn();
@@ -229,6 +231,16 @@ export class AnatoloRouter {
   onPageChange(fn: () => void) {
     this.pageChangeFns.push(fn);
   }
+
+  reloadScript() {
+    const body_scripts = document.querySelector('main-outlet')?.getElementsByTagName('script');
+    for (const script of body_scripts ?? []) {
+      loadScript({
+        url: script.src,
+        script: script.textContent,
+      });
+    }
+  }
 }
 
 export const router = new AnatoloRouter();

src/anatolo/router.ts

@@ -31,6 +31,6 @@ export const site = {
 
   async thisPage() {
     await site.data();
-    return urlMap.get(site.thisPageUrl()) as WebPage;
+    return urlMap.get(site.thisPageUrl());
   },
 };

src/anatolo/site.ts

@@ -0,0 +1,10 @@
+export async function loadScript(config: { url?: string | null; script?: string | null }) {
+  if (config.url) {
+    config.script = await fetch(config.url).then((r) => r.text());
+  }
+  if (!config.script) {
+    return;
+  }
+  const runner = new Function(config.script);
+  runner();
+}