Refactor post generation to streamline Markmap integration and enhance styling in post_blog.py

post_blog.py

@@ -23,9 +23,7 @@ def generate_post_html(title, summary, mindmap, citation):
     html_summary = mistune.html(summary)
     post = f"""
         <div id="paper_post">
-        <link href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.4/dist/index.min.js" rel="preload" as="script">
         <script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.4/dist/index.min.js"></script>
-        <link href="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest" rel="preload" as="script">
         <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
 		<script>
             window.markmap = {{
@@ -36,14 +34,12 @@ def generate_post_html(title, summary, mindmap, citation):
         </script>
       	<script>
           window.addEventListener(&#39;load&#39;, function() {{
-            setTimeout(function() {{
               const element = document.querySelector(&#39;div.mm-toolbar-item[title=&quot;Fit window size&quot;]&#39;);
               if (element) {{
                   element.click();
               }} else {{
                   console.log(&#39;Element not found&#39;);
               }}
-              }}, 500);
           }});
         </script>
         <style>
@@ -56,6 +52,16 @@ def generate_post_html(title, summary, mindmap, citation):
                 height: 80dvh;
             }}
         </style>
+        <style>
+            .markmap {{
+                position: relative;
+            }}
+            .markmap > svg {{
+                width: 100%;
+                border: 2px solid #000;
+                height: 80dvh;
+            }}
+        </style>
         <img style="display:block; width:100%; height:100%;" id="paper_image" src="{image}" alt="{title}">
         <br>
         <b>{{getToc}} $title={{Table of Contents}}</b>
@@ -68,7 +74,7 @@ def generate_post_html(title, summary, mindmap, citation):
         <p><small><em>If MindMap doesn't load, please refresh the page.</em></small></p>
         <div class="markmap" id="paper_mindmap">
             <script type="text/template">
-                {"\n"+mindmap.replace("&amp;", "&").replace(":", "=>")+"\n"}
+                {mindmap.replace("&amp;", "&").replace(":", "=>")}
             </script>
         </div>
         <br>
@@ -76,29 +82,7 @@ def generate_post_html(title, summary, mindmap, citation):
         <div id="paper_citation">
             {mistune.html(citation.replace("&amp;", "&"))}
         </div>
-		<script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.4/dist/index.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
-		<script>
-            window.markmap = {{
-                autoLoader: {{
-                    toolbar: true,
-                }},
-            }};
-        </script>
-      	<script>
-          window.addEventListener(&#39;load&#39;, function() {{
-            setTimeout(function() {{
-              const element = document.querySelector(&#39;div.mm-toolbar-item[title=&quot;Fit window size&quot;]&#39;);
-              if (element) {{
-                  element.click();
-              }} else {{
-                  console.log(&#39;Element not found&#39;);
-              }}
-              }}, 500);
-          }});
-        </script>
     </div>
-
     """
     return post, image