threejs-playground/index.html at main · rarioj/threejs-playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ThreeJS Playground</title>
    <link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
  </head>
  <body>
    <header>
      <nav>
        <a href="./index.html" id="nav-apps">Apps</a>
        <a href="./index.html?setup=1" id="nav-setup">Setup</a>
        <a href="./index.html?notes=1" id="nav-notes">Notes</a>
        <a href="https://github.com/rarioj/threejs-playground" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> GitHub</a>
      </nav>
      <h1>ThreeJS Playground</h1>
      <p><mark>Personal ThreeJS experimentation and learning space.</mark></p>
    </header>

    <main></main>

    <footer>
      Converted from a markdown file into HTML on the fly using
      <a href="https://showdownjs.com/" target="_blank">Showdown.js</a> and styled with <a href="https://simplecss.org/" target="_blank">Simple.css</a>.
    </footer>
    <script>
      (async () => {
        const query = Object.fromEntries(new URL(location).searchParams);
        const header = document.getElementsByTagName("header")[0];
        const content = document.getElementsByTagName("main")[0];
        const footer = document.getElementsByTagName("footer")[0];

        let mdfile;
        if (query?.setup) {
          mdfile = "./SETUP.md";
          document.getElementById("nav-setup").classList.add("current");
        } else if (query?.notes) {
          mdfile = "./NOTES.md";
          document.getElementById("nav-notes").classList.add("current");
        } else {
          mdfile = "./APPS.md";
          document.getElementById("nav-apps").classList.add("current");
        }

        const fetchMarkdown = async (file) => {
          const converter = new showdown.Converter({
            openLinksInNewWindow: true,
            tables: true,
          });
          const response = await fetch(file);
          if (!response.ok || response.status !== 200) {
            console.error("Unable to fetch file");
          }
          const text = await response.text();
          content.innerHTML = converter.makeHtml(text);
        };

        await fetchMarkdown(mdfile);

        const title = document.getElementsByTagName("h1")[1];
        document.title = `${title.innerText} | ThreeJS Playground`;
      })();
    </script>
  </body>
</html>