fayyyyg.github.io/index.html at main · fayyyyg/fayyyyg.github.io · 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
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en" style="background: rgb(10,10,10)">

<head>
  <title>Yifei 🌻 Gao</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Yifei Gao - website for artworks">
  <link rel="prefetch" href="images.json">
  <link rel="stylesheet" href="main.css">
  <link rel="prefetch" href="about.md">
  <script type="module">
    import snarkdown from "https://cdn.jsdelivr.net/npm/snarkdown@2.0.0/dist/snarkdown.es.js"
    document.addEventListener('DOMContentLoaded', renderPreloadedData)
    function renderPreloadedData(event) {
      document.querySelectorAll('link[rel="prefetch"]').forEach(link => {
        const path = link.getAttribute('href')
        const url = new URL(path, window.location)
        const [id, filetype] = path.split('.')
        if (filetype === 'json') {
          fetch(url).then(res => res.json()).then(data => {
            data.map(entry => renderTemplate(id, entry))
              .map(el => window[id].parentElement.insertBefore(el, window[id]))
          })
        } else if (filetype === 'md') {
          const placeholder = document.createElement('div')
          fetch(url).then(res => res.text()).then(markdown => {
            placeholder.innerHTML = snarkdown(markdown)
            window[id].appendChild(placeholder)
          })
        }
      })
    }

    function renderTemplate(id, data) {
      const el = window[id].content.cloneNode(true)
      for (const key in data) {
        el.querySelectorAll(`[data-${key}]`).forEach(node => {
          if (node.dataset[key] === 'innerHTML') return node[node.dataset[key]] = data[key]
          node.setAttribute(node.dataset[key], id + '/' + data[key])
        })
      }
      return el
    }
  </script>
  <script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
</head>

<body>
  <header>
    <h1>高逸菲 Yifei Gao</h1>
  </header>
  <nav>
    <a href="#works">Works</a>
    <a href="#about">About</a>
  </nav>
  <main>
    <section id="works">
      <template id="images">
        <figure>
          <picture>
            <img data-filename="src" loading="lazy" onload="this.removeAttribute('style')" style="opacity: 0; padding-top: 100%" data-title="alt" />
          </picture>
          <figcaption>
            <ul>
              <li rel="title" data-title="innerHTML"></li>
              <li rel="date" data-date="innerHTML"></li>
              <li rel="dimentions" data-dimention="innerHTML"></li>
              <li rel="material" data-medium="innerHTML"></li>
            </ul>
          </figcaption>
        </figure>
      </template>
    </section>
    <section id="about">

    </section>
  </main>
</body>

</html>