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

package html

type RepoFileContext struct {
  BaseContext
	RepoHeaderComponentContext
  Code string
	Path string
}

templ RepoFile(rfc RepoFileContext) {
	@base(rfc.BaseContext) {
		@repoHeaderComponent(rfc.RepoHeaderComponentContext)
		<div class="mt-2 text-text">
			<a class="text-text underline decoration-text/50 decoration-dashed hover:decoration-solid" href="?raw">Raw</a>
			<span>{ " - " }{ rfc.Path }</span>
			<div class="code">@templ.Raw(rfc.Code)</div>
		</div>
	}
	<script>
		const lineRe = /#L(\d+)(?:-L(\d+))?/g
		const $lineLines = document.querySelectorAll(".chroma .lntable .lnt");
		const $codeLines = document.querySelectorAll(".chroma .lntable .line");
		let start = 0;
		let end = 0;

		const results = [...location.hash.matchAll(lineRe)];		
		if (0 in results) {
			start = results[0][1] !== undefined ? parseInt(results[0][1]) : 0;
			end = results[0][2] !== undefined ? parseInt(results[0][2]) : 0;
		}
		if (start != 0) {
			deactivateLines();
			activateLines(start, end);
		}

		for (let line of $lineLines) {
			line.addEventListener("click", (event) => {
				event.preventDefault();
				deactivateLines();
				const n = parseInt(line.id.substring(1));
				let anchor = "";
				if (event.shiftKey) {
					end = n;
					anchor = `#L${start}-L${end}`;
				} else {
					start = n;
					end = 0;
					anchor = `#L${start}`;
				}
				history.pushState(null, null, anchor);
				activateLines(start, end);
			});
		}

		function activateLines(start, end) {
			if (end < start) end = start;
			for (let idx = start - 1; idx < end; idx++) {
				$codeLines[idx].classList.add("active");
			}
		}

		function deactivateLines() {
			for (let code of $codeLines) {
				code.classList.remove("active");
			}
		}

		
		
	</script>
}