you need javascriiiiiiiiiipt
<script type="module">
import { dakr } from "./dakrk.js";

function mainPage() {
  return ["main",,
    ["h1",, "Welcome to mein website"],
    ["p",,
      "Check out the ",
      ["b",, "HUGE"],
      " balls on this fish"
    ],
    ["p",,
      ["button", [["on", "click", () => alert("Hello from addEventListener(\"click\")")]], "Click me"],
      " ",
      ["button", [{onclick: () => alert("Hello from onclick")}], "Click me also"],
    ],
  ];
};

function counter(count = 0) {
  return ["div",,
    ["button", [["on", "click", () => this.replace(count - 1)]], "--"],
    " ",
    ["span", [(() => {
      if (count % 2 === 0)
        return "style=color:#008";
      if (count < 0)
        return "style=color:#800";
      if (count > 0)
        return "style=color:#080;"
      return "";
    })()], count],
    " ",
    ["button", [["on", "click", () => this.replace(count + 1)]], "++"],
  ];
}

function bigChungus() {
  return ["button", [["on", "click", () => this.replaceWith([bigBlungus])]], "big chungus"];
}
function bigBlungus() {
  return ["button", [["on", "click", () => this.replaceWith([bigChungus])]], "big blungus"];
}

function showSrc(url, _text) {
  if (!_text) {
    fetch(url, {signal: this.abort.signal})
      .then(res => res.text())
      .then(text => this.replace(url, text));
    return ["div",,
      "fetching ", ["b",, url]
    ];
  } else {
    return ["details",,
      ["summary",, "Contents of ", ["b",, url]],
      ["pre",, _text]
    ];
  }
}

// this is a mess... :(
let runningTimeouts = new Map();
function timeout(_id) {
  if (!_id) {
    return ["button", [["on", "click", () => {
      let id = setTimeout(() => {
        const fn = runningTimeouts.get(id);
        if (fn) {
          fn();
        }
      }, 5000);
      this.replace(id);
    }]], "Start 5 second timer"];
  }
  const clear = () => {
    runningTimeouts.delete(_id);
    this.replace();
  };
  runningTimeouts.set(_id, clear);
  return ["div",,
    "Timer is running... ",
    ["button", [["on", "click", () => { clear(); this.replace(); }]], "Abort"]
  ];
}

function reactPage() {
  return ["main",,
    ["h1",, "React if it was awesome"],
    ["p",, [counter]],
    ["p",, [bigChungus]],
    ["p",, [timeout]],
  ]
}

function sourcePage() {
  return ["main",,
    ["h1",, "Source code"],
    ["p",,
      "Here is the source to this page:",
      ["br"],
      [showSrc, "dakrk.html"],
      [showSrc, "dakrk.js"],
      [showSrc, "dakrk.ts"]
    ]
  ];
}

const PAGES = {
  "index": {
    title: "",
    link: "Index",
    page: [mainPage]
  },
  "react": {
    title: "React",
    link: "React (but awesome)",
    page: [reactPage]
  },
  "source": {
    title: "Source",
    link: "Source",
    page: [sourcePage]
  }
};

function website(pages, pageName) {
  if (!pageName) {
    if (location.hash !== "") {
      pageName = location.hash.slice(1);
    } else {
      pageName = "index";
    }
  }

  const nav = [];
  for (const [k, v] of Object.entries(pages)) {
    if (nav.length > 0) {
      nav.push(" | ");
    }
    nav.push(["a", ["href=#" + k], v.link]);
  }

  const page = pages[pageName];
  if (!page) {
    return ["html",,
      ["head",,
        ["title",, "404 Not Found"]
      ],
      ["body",,
        ["h1",, "404 Not Found :("]
      ]
    ];
  }

  location.hash = "#" + pageName;
  return ["html",,
    ["head",,
      ["title",, page.title ? (page.title + " | Nintendo Shitcube") : "Nintendo Shitcube"]
    ],
    ["body",,
      ["h1",, "dakrk demo"],
      ["nav",, ...nav],
      page ? page.page : ["main",, "404 :("]
    ]
  ];
}

//console.log(dakr(mainpage()));
function replaceHTML() {
  document.removeChild(document.firstChild);
  document.appendChild(dakr([website, PAGES]));
}

window.addEventListener("hashchange", replaceHTML);

replaceHTML();
</script>