summaryrefslogtreecommitdiffstats
path: root/layouts/_default/baseof.html
blob: e357e6692ddc851e79fae22708b76e729a29dab8 (plain)
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="{{ .Lang }}" class="theme-dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {{ partial "head-meta.html" . }}
  <title>{{ .Title }}{{ if ne .Title .Site.Title }} — {{ .Site.Title }}{{ end }}</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/images/fav.png">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Oxanium:wght@400;600;700&display=swap" rel="stylesheet">

  <!-- Feather Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">

  <!-- Tailwind CSS -->
  {{ $css := resources.Get "css/main.min.css" }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}">

  <!-- Syntax highlighting (Chroma) -->
  {{ $chroma := resources.Get "css/chroma-custom.css" | minify }}
  <link rel="stylesheet" href="{{ $chroma.RelPermalink }}">
</head>
<body class="bg-bg text-text antialiased" data-page-kind="{{ if .IsHome }}home{{ else }}other{{ end }}">
  <!-- Reading progress bar (only on single pages/articles) -->
  {{ if eq .Kind "page" }}
  <div
    id="reading-progress"
    class="fixed top-0 left-0 h-1 transition-all duration-100"
    style="width: 0%; background: linear-gradient(to right, var(--accent), var(--accent2)); z-index: 9999;"
  ></div>
  {{ partial "back-to-top.html" . }}
  {{ end }}
  <!-- Skip to main content link -->
  <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded">
    {{ i18n "skipToContent" }}
  </a>

  <!-- Dot grid background pattern -->
  <div class="fixed inset-0 pointer-events-none opacity-5 dot-grid" style="
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
  "></div>

  <!-- Matrix rain canvas background -->
  <canvas id="matrix-rain" aria-hidden="true"></canvas>

  <!-- Theme toggle & language toggle (before Alpine loads to prevent flash) -->
  <script>
    (function() {
      const theme = localStorage.getItem('theme') || 'dark';
      const html = document.documentElement;
      html.classList.remove('theme-light', 'theme-dark');
      html.classList.add('theme-' + theme);
    })();
  </script>

  <!-- Navigation -->
  {{ partial "header.html" . }}

  <!-- Main content (spaced for fixed header) -->
  <main id="main" class="mt-20 relative z-10">
    {{ block "main" . }}{{ end }}
  </main>

  <!-- Footer -->
  {{ partial "footer.html" . }}

  <!-- Search modal (desktop and mobile) -->
  {{ partial "search-modal.html" . }}

  <!-- Alpine.js -->
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

  <!-- Feather Icons initialization -->
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  <script>feather.replace();</script>

  <!-- Theme toggle script -->
  {{ $themeScript := resources.Get "js/theme-toggle.js" | minify }}
  <script src="{{ $themeScript.RelPermalink }}"></script>

  <!-- Menu script -->
  {{ $menuScript := resources.Get "js/menu.js" | minify }}
  <script src="{{ $menuScript.RelPermalink }}"></script>

  <!-- Contact form script -->
  {{ $contactScript := resources.Get "js/contact-form.js" | minify }}
  <script src="{{ $contactScript.RelPermalink }}"></script>

  <!-- 404 Not Found page script -->
  {{ $notFoundScript := resources.Get "js/not-found-page.js" | minify }}
  <script src="{{ $notFoundScript.RelPermalink }}"></script>

  <!-- Reading progress bar script (on single pages/articles) -->
  {{ if eq .Kind "page" }}
  {{ $progressScript := resources.Get "js/reading-progress.js" | minify }}
  <script src="{{ $progressScript.RelPermalink }}"></script>
  {{ end }}

  <!-- Code block copy button -->
  {{ if eq .Kind "page" }}
  {{ $codeScript := resources.Get "js/code-copy.js" | minify }}
  <script src="{{ $codeScript.RelPermalink }}"></script>
  {{ end }}

  <!-- Twemoji: consistent cross-platform emoji rendering on article pages -->
  {{ if eq .Kind "page" }}
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.1.2/dist/twemoji.min.js" crossorigin="anonymous"></script>
  {{ $twemojiScript := resources.Get "js/twemoji-init.js" | minify }}
  <script src="{{ $twemojiScript.RelPermalink }}"></script>
  {{ end }}

  <!-- Matrix rain background effect -->
  {{ with resources.Get "js/matrix-rain.js" }}
  {{ $s := . | minify }}
  <script src="{{ $s.RelPermalink }}"></script>
  {{ end }}

  <!-- Search functionality script -->
  {{ $searchScript := resources.Get "js/search.js" | minify }}
  <script src="{{ $searchScript.RelPermalink }}"></script>

  <!-- Timeline lazy-reveal (scroll-triggered reveal animation) -->
  {{ if eq .Kind "section" }}
  {{ $lazyScript := resources.Get "js/article-lazy.js" | minify }}
  <script src="{{ $lazyScript.RelPermalink }}"></script>
  {{ end }}

  <!-- Tag cloud spiral layout -->
  {{ $tagCloudScript := resources.Get "js/tag-cloud-spiral.js" | minify }}
  <script src="{{ $tagCloudScript.RelPermalink }}"></script>
</body>
</html>