seo renderer

1 files changed, 12 insertions, 6 deletions

diff --git a/web/src/blog.tsx b/web/src/blog.tsx
index bfef434..1fcfec2 100644
--- a/web/src/blog.tsx
+++ b/web/src/blog.tsx
@@ -8,12 +8,9 @@ let reqErr = 0;
 
 let hljs = null;
 let hljs_imported = 0;
-async function importHlJs() {
-  if( hljs ) return;
-  if( hljs_imported ) return;
 
-  hljs_imported = 1;
-  hljs = ( await import( 'highlight.js' ) ).default;
+async function highlightCode() {
+  if( !hljs || !hljs_imported ) return setTimeout( highlightCode, 500 );
 
   const elements = $( "code" );
   elements.each( ( _, e ) => {
@@ -21,6 +18,14 @@ async function importHlJs() {
   } );
 }
 
+async function importHlJs() {
+  if( hljs ) return;
+  if( hljs_imported ) return;
+
+  hljs_imported = 1;
+  hljs = ( await import( 'highlight.js' ) ).default;
+}
+
 function urlForHref( href: string, isdir: boolean ) {
   const url = new URL( window.location.href );
   let path = url.pathname;
@@ -105,19 +110,20 @@ async function populatePost() {
       $( "title" ).html( title );
     }
 
-    importHlJs();
 
     $( "#package-entries" ).find( ".spinner" ).remove();
     $( "#package-entries" ).css( "display", "none" );
     $( "#blog-entry" ).html( text );
     $( "#blog-entry" ).css( "display", "flex" );
     $( "#back-btn" ).css( "display", "block" );
+    setTimeout( highlightCode );
   } catch( e ) {
     return populateEntries();
   }
 }
 
 export default function Blog() {
+  importHlJs();
   entries = [];
   reqErr = 0;
   setTimeout( async () => {