⚠️ [BREAKING CHANGE] SYNC TEMPLATE v2.0

[Mara-Li]

Hello!
Following this issue (Enveloppe/assets#1), I updated and changed the way "non existant internal links" are checked.
Now, I rely on a new hooks called on_files:

import json
import posixpath
import os
from pathlib import PurePosixPath
from mkdocs.structure.files import Files
from mkdocs.config.defaults import MkDocsConfig

def list_existing_pages(config: MkDocsConfig, files: Files):
    pages = []
    output_dir = config['site_dir']
    for file in files:
        if file.is_documentation_page() or file.is_media_file():
            pages.append(file)
    
    with open(posixpath.join(output_dir, 'search', 'all_files.json'), 'w') as f:
        json.dump(pages, f, default=lambda o: o.__dict__, indent=4)

def on_files(files: Files, config: MkDocsConfig):
    if not (posixpath.exists(posixpath.join(config['site_dir'], 'search'))):
        os.mkdir(posixpath.join(config['site_dir'], 'search'))
    list_existing_pages(config, files)
    return files

Why ?
Because search_index.json of Material doesn't list all files, ie image or some root files. So, I created another .json files, that will be stored in the build directly.

Now, in url_exists, I call this file, and read it. If the link is not found, I adjust the DOM.

/**
 * Correct some bug in mkdocs creation for links
 * @param {URL} url 
 * @param {number} typeURL 
 * @returns 
 */
function parseURL(url, typeURL) {

    let ref = "";
    let title = "";
    if (typeURL === 0) {
        ref = url.href;
        title = url.title;
    } else if (type_url === 1) {
        ref = url.src;
        title = url.alt;
    }
    if (ref.match(/index$/)) {
        ref = ref.replace(/index$/, "");
    }
    if (ref.includes("%5C")) {
        ref = ref.replace(/%5C/g, "/");
    }
    if (ref.match(/\.md\/$/)) {
        ref = ref.replace(/\.md\/$/, "/");
    }
    ref = decodeURI(ref);
    if (typeURL === 0) {
        url.href = ref;
        url.title = title;
        if (title.length === 0) {
            title = url.innerText;
            url.title = title;
        }
    } else if (typeURL === 1) {
        url.src = ref;
        url.alt = title;
    }
    return {
        title: title,
        ref: ref,
        url: url
    };
}

/**
 * Use search/all_files.json to check if the url exists
 * @param {URL} url 
 * @param {string} ref
 * @param {string} title
 */
function checkIfInternalLinksExists(ref, title, url) {
    //return if the url is not internal
    //verify by checking if the url starts with the blog url

    fetch("/search/all_files.json")
        .then((response) => response.json())
        .then((json) => {

            let cleanURL = url.href.replace(url.host, "").replace(/http(s)?:(\/){1,3}/gi, "");
            cleanURL = cleanURL.length === 0 ? "./" : cleanURL;
            const test = json.some((doc) => {
                return decodeURI(doc.url) === decodeURI(cleanURL);
            });

            if (!test) {
                console.log(`${decodeURI(cleanURL)} does not exist`)
                const newItem = document.createElement("div");
                newItem.innerHTML = title;
                newItem.classList.add("not_found");
                newItem.setAttribute("href", ref);
                try {
                    url.parentNode.replaceChild(newItem, url);
                }
                catch (error) {
                    console.log(error);
                }
            }
        })
        .catch((error) => {
            console.log(error);
        });
}

var p_search = /\.{2}\//gi;
var ht = document.querySelectorAll("a:not(img)");
for (const anchor of ht) {
    if (
        !anchor.getElementsByTagName("img").length > 0 &&
        !anchor.getElementsByTagName("svg").length > 0 &&
        !anchor.href.includes("#") &&
        anchor.hostname === window.location.hostname
    ) {
        var link = parseURL(anchor, 0);
        checkIfInternalLinksExists(link.ref, link.title, anchor);
    }
}

var p_img = /\.+\\/gi;
var img = document.querySelectorAll("img");
for (const image of img) {
    if (image.hostname === window.location.hostname) {
        var link = parseURL(image, 1);
        checkIfInternalLinksExists(link.ref, link.title, image);
    }
}

So, now there is only one XHR call.

Warning
You need to update your mkdocs.yml with adding the new hooks!

[andrey-jef]

These notes of changelog are gem and joyful to read to learn how you find and solve the problem. It should be integrated into the plugin's document page for better visibility.

[Mara-Li]

I will do it :D

[Mara-Li]

https://obsidian-publisher.netlify.app/changelog/ :D