From 55f4dcc4603be52651daed8b0314b6dca6ccd368 Mon Sep 17 00:00:00 2001
From: Qubasa <consulting@qube.email>
Date: Sat, 1 Jun 2024 22:19:33 +0200
Subject: [PATCH] docs: Add meta tags for link preview and fix js loading
 issue.

---
 docs/main.py             | 29 ++++++++++++++++++++---------
 docs/mkdocs.yml          |  7 +++----
 docs/overrides/main.html | 12 ++++++++++++
 3 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 docs/overrides/main.html

diff --git a/docs/main.py b/docs/main.py
index e8e05282..a54bbf37 100644
--- a/docs/main.py
+++ b/docs/main.py
@@ -16,15 +16,26 @@ def define_env(env: Any) -> None:
     @env.macro
     def asciinema(name: str) -> str:
         return f"""<div id="{name}">
-            <script src="{asciinema_dir}/asciinema-player.min.js"></script>
             <script>
-                AsciinemaPlayer.create('{video_dir + name}',
-                document.getElementById("{name}"), {{
-                    loop: true,
-                    autoPlay: true,
-                    controls: false,
-                    speed: 1.5,
-                    theme: "solarized-light"
-                }});
+                // Function to load the script and then create the Asciinema player
+                function loadAsciinemaPlayer() {{
+                    var script = document.createElement('script');
+                    script.src = "{asciinema_dir}/asciinema-player.min.js";
+                    script.onload = function() {{
+                        AsciinemaPlayer.create('{video_dir + name}', document.getElementById("{name}"), {{
+                            loop: true,
+                            autoPlay: true,
+                            controls: false,
+                            speed: 1.5,
+                            theme: "solarized-light"
+                    }});
+                    }};
+                    document.head.appendChild(script);
+                }}
+
+                // Load the Asciinema player script
+                loadAsciinemaPlayer();
             </script>
+
+            <link rel="stylesheet" type="text/css" href="{asciinema_dir}/asciinema-player.css" />
         </div>"""
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index f34d4bf4..12b92a49 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -1,4 +1,4 @@
-site_name: Clan Docs
+site_name: Clan Documentation
 site_url: https://docs.clan.lol
 repo_url: https://git.clan.lol/clan/clan-core/
 repo_name: clan-core
@@ -105,7 +105,8 @@ theme:
     - content.code.copy
     - content.tabs.link
   icon:
-    repo: fontawesome/brands/git
+    repo: fontawesome/brands/git-alt
+  custom_dir: overrides
 
   palette:
     # Palette toggle for light mode
@@ -128,8 +129,6 @@ theme:
 
 extra_css:
   - static/extra.css
-  - static/asciinema-player/custom-theme.css
-  - static/asciinema-player/asciinema-player.css
 
 extra:
   social:
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
new file mode 100644
index 00000000..184e7115
--- /dev/null
+++ b/docs/overrides/main.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+<meta property="og:title" content="Clan - Documentation, Blog & Getting Started Guide" />
+<meta property="og:description" content="Documentation for Clan. The peer-to-peer machine deployment framework." />
+<meta property="og:image" content="https://clan.lol/static/dark-favicon/128x128.png" />
+<meta property="og:url" content="https://docs.clan.lol" />
+<meta property="og:type" content="website" />
+<meta property="og:site_name" content="Clan" />
+<meta property="og:locale" content="en_US" />
+
+{% endblock %}
\ No newline at end of file