Avoid hardcoding /lottie-spec/ URLs

docs/validator/index.md

@@ -4,7 +4,7 @@ disable_toc: 1
 # Lottie Validator
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.16.0/ajv2020.min.js" integrity="sha512-OunSQfwE+NRzXE6jEJfFCyVkFQgMOk+oxD34iU8Xc21cUYfFH5TKBc7Z3RqKC4EW1tlllWIIOdq2Kf5F/5wKOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="/lottie-spec/static/js/validator.js"></script>
+<script src="{{url}}/js/validator.js"></script>
 
 <style>
 .hidden {
@@ -161,7 +161,7 @@ function on_load_error(err)
 
 function on_load_ok(schema_obj)
 {
-    validator = new Validator(ajv2020.Ajv2020, schema_obj);
+    validator = new Validator(ajv2020.Ajv2020, schema_obj, base_url);
     hide_element(document.getElementById("system-loading"));
     show_element(document.getElementById("validator-container"));
 }
@@ -250,7 +250,7 @@ function validate_url(url)
 
 function initialize()
 {
-    fetch("/lottie-spec/lottie.schema.json").then(response => {
+    fetch(base_url + "/lottie.schema.json").then(response => {
         if ( !response.ok )
             throw new Error("Request failed");
         return response.json();

mkdocs.yml

@@ -16,9 +16,6 @@ markdown_extensions:
     - latex_markdown
     - def_list
     - toc_deflist
-extra_css:
-    # - /lottie-spec/style/style.css
-    # - /lottie-spec/style/lottie-theme.css
 nav:
     - "Home" : index.md
     - "Format":

tools/lottie_markdown.py

@@ -5,9 +5,11 @@
 import xml.etree.ElementTree as etree
 
 import graphviz
+from markdown import Markdown
 from markdown.extensions import Extension
 from markdown.inlinepatterns import InlineProcessor
 from markdown.blockprocessors import BlockProcessor
+from markdown.preprocessors import Preprocessor
 from markdown.util import HTML_PLACEHOLDER_RE, AtomicString
 from mkdocs.utils import get_relative_url
 
@@ -687,9 +689,13 @@ def add_button(self, *, text=None, icon=None, **attrib):
         return button
 
 
+def get_page_processor(md):
+    return next(proc for proc in md.treeprocessors if proc.__class__.__module__ == 'mkdocs.structure.pages')
+
+
 def get_url(md, path, anchor=None, src_uri=True):
     # Mkdocs adds a tree processor to adjust urls, but it won't work with lottie js so we do the same here
-    processor = next(proc for proc in md.treeprocessors if proc.__class__.__module__ == 'mkdocs.structure.pages')
+    processor = get_page_processor(md)
     page = processor.files.get_file_from_path(path)
     if not page:
         raise Exception("Page not found at %s" % path)
@@ -702,6 +708,18 @@ def get_url(md, path, anchor=None, src_uri=True):
     return url
 
 
+class BaseUrl(Preprocessor):
+    def __init__(self, md):
+        super().__init__(md)
+        self.base_url = None
+
+    def run(self, lines):
+        if self.base_url is None:
+            pages = get_page_processor(self.md)
+            self.base_url = pages.config["site_url"]
+        return list(map(lambda line: line.replace("{{url}}", self.base_url), lines))
+
+
 class LottieBlock(BlockProcessor):
     def __init__(self, md):
         self.md = md
@@ -1188,7 +1206,7 @@ def handleMatch(self, match, data):
 
 
 class LottieExtension(Extension):
-    def extendMarkdown(self, md):
+    def extendMarkdown(self, md: Markdown):
         ts = typed_schema(Schema.load(docs_path / "lottie.schema.json"))
 
         md.inlinePatterns.register(SchemaString(md, ts.schema), "schema_string", 175)
@@ -1218,6 +1236,8 @@ def extendMarkdown(self, md):
         md.parser.blockprocessors.register(SchemaEnum(md, ts), "schema_enum", 175)
         md.parser.blockprocessors.register(EditorExample(md.parser), "editor_example", 175)
 
+        md.preprocessors.register(BaseUrl(md), "base_url", 1000)
+
 
 def makeExtension(**kwargs):
     return LottieExtension(**kwargs)

docs/static/js/validator.js → tools/theme/js/validator.js

@@ -237,15 +237,15 @@ function keyframe_has_t(kf)
 
 class Validator
 {
-    constructor(AjvClass, schema_json)
+    constructor(AjvClass, schema_json, docs_url="")
     {
         this.schema = schema_json;
         this.defs = this.schema["$defs"];
         var prop_map = new PropertyMap();
 
         for ( let [cat, sub_schemas] of Object.entries(this.defs) )
         {
-            let cat_docs = `/lottie-spec/specs/${cat}/`;
+            let cat_docs = `${docs_url}/specs/${cat}/`;
             let cat_name = kebab_to_title(cat.replace(/s$/, ""));
             for ( let [obj, sub_schema] of Object.entries(sub_schemas) )
             {

tools/theme/main.html

@@ -21,17 +21,21 @@
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-    <script src="/lottie-spec/static/js/lottie_raw_utils.js"></script>
-    <script src="/lottie-spec/static/js/value_editors.js"></script>
-    <link rel="stylesheet" href="/lottie-spec/static/css/style.css" />
-    <link rel="stylesheet" href="/lottie-spec/static/css/lottie-theme.css" />
+    <script src="{{ 'js/lottie_raw_utils.js'|url }}"></script>
+    <script src="{{ 'js/value_editors.js'|url }}"></script>
+    <link href="{{ 'css/style.css'|url }}" rel="stylesheet">
+    <link href="{{ 'css/lottie-theme.css'|url }}" rel="stylesheet">
+
+    <script>
+        const base_url = "{{ ''|url }}";
+    </script>
+
 {% endblock %}
 
 
 
 {% block footer %}
     <hr/>
-
 {% endblock %}
 
 {% block scripts %}