HUGO

MediaWiki Template

As promised, I finished my MediaWiki template.

And the darkmode

And with the fastSearch function:

It has a homepage where I display everything of note, it has a few other surprises as well:

  • Clean Inner links, pretty much like MediaWiki (thanks to @bep and his awesome solution [about](/about))
  • FastSearch (through content AND tags)
  • Infoboxes templates for (in my particular case), locations, characters, secondary characters. But they are configurable as well.
  • Dark Mode, for your tired eyes.
  • Minimal Front matter configuration. Simply add the bare bones and start writing.
  • Broken Links: like MediaWiki, if you linked an inner page but neglected to create it, the template will show you the link in red (until you create the page, that is).
4 Likes

That looks great … So, for the links, I assume you mark them as red if GetPage cannot find it?

Actually, I’m using a little vanilla Javascript. I tried GetPage, but couldn’t make it work so I gave up.

var anchors_doc = document.getElementById("main-content")
var anchors = anchors_doc.getElementsByTagName("a");
var x = 0;
for (var i=0; i<anchors.length; i++) {
    var href = anchors[i].getAttribute('href');
    doCheck(i,href,anchors[i]);
}

function doCheck(i,href, current_el) {
var request = new XMLHttpRequest();
request.open('HEAD', href, true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var resp = this.response;
  } else {
      x++
      current_el.classList.add("broken");
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();
}

I went vanilla instead of jQuery, because even though I am using Bootstrap for the Theme, I don’t like to go overhead with it.

1 Like

I don’t see how it should not work.

Well, I tried to use {{ findRE "<a.*?>(.|\n)*?</a>" .Content }} but I got stuck after getting the result.

{{ with .Site.GetPage .Section }}

        

    {{ range .Pages }}

        {{ $a:= findRE "<a.*?>(.|\n)*?</a>" .Content }}

        {{ if .Site.GetPage $a }}

        

        {{ end }}

    {{ end }}

    {{ end }}

Again, I’m a poor coder.

Just added a print css that looks exactly like Wikipedia’s site. I have no use for image galleries in my projects, but it can be easily added as well.

I began moving my MediaWiki files to Hugo by hand, even though there is a Python script for that, I find it easy since this project is rather small.

In the past, I talked about using Hugo for documentation. Now there are a bunch of themes and skins that really pushed me into creating my own MediaWiki template. Thanks to Bootstrap, works perfect on Mobile. The best feeling is when you can access your own docs anywhere, even on the go.

You know about render hooks, right?

I managed to add header links with render hooks, but I couldn’t get them to “test” if the URL exists or not. It just creates the link.

I just found out I can use definition lists by the way. Nice addition. This thing is exactly like wikipedia now.

this is a list
: a defined list!