From 2ab5f05f40d93224f73e211e84de50a88a6ecf03 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 12:19:15 +0100
Subject: [PATCH] Add svg linter and fix incorrect svgs (#30086)

Fixes https://github.com/go-gitea/gitea/issues/30082.

Adds a new linter that searches for non-existant SVG images in
templates. Output before the fix was:

```
$ make lint-templates
SVG "octicon-warning" not found, used in templates/devtest/flex-list.tmpl
SVG "octicon-warning" not found, used in templates/devtest/flex-list.tmpl
SVG "octicon-markup" not found, used in templates/repo/diff/comment_form.tmpl
make: *** [Makefile:438: lint-templates] Error 1
```

<img width="306" alt="Screenshot 2024-03-25 at 23 31 05"
src="https://github.com/go-gitea/gitea/assets/115237/1052d1a9-bfec-4d5a-9cae-f895f78f7c93">
---
 .github/workflows/files-changed.yml   |  1 +
 .github/workflows/pull-compliance.yml |  4 ++++
 Makefile                              |  3 ++-
 templates/devtest/flex-list.tmpl      |  4 ++--
 templates/repo/diff/comment_form.tmpl |  2 +-
 tools/lint-templates-svg.js           | 26 ++++++++++++++++++++++++++
 6 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100755 tools/lint-templates-svg.js

diff --git a/.github/workflows/files-changed.yml b/.github/workflows/files-changed.yml
index f9b6b1ec4..b8535cb42 100644
--- a/.github/workflows/files-changed.yml
+++ b/.github/workflows/files-changed.yml
@@ -73,6 +73,7 @@ jobs:
               - "Makefile"
 
             templates:
+              - "tools/lint-templates-*.js"
               - "templates/**/*.tmpl"
               - "pyproject.toml"
               - "poetry.lock"
diff --git a/.github/workflows/pull-compliance.yml b/.github/workflows/pull-compliance.yml
index 02a265b1f..99a69ab17 100644
--- a/.github/workflows/pull-compliance.yml
+++ b/.github/workflows/pull-compliance.yml
@@ -35,8 +35,12 @@ jobs:
       - uses: actions/setup-python@v5
         with:
           python-version: "3.12"
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
       - run: pip install poetry
       - run: make deps-py
+      - run: make deps-frontend
       - run: make lint-templates
 
   lint-yaml:
diff --git a/Makefile b/Makefile
index 236f115a2..a7e175e76 100644
--- a/Makefile
+++ b/Makefile
@@ -434,7 +434,8 @@ lint-actions:
 	$(GO) run $(ACTIONLINT_PACKAGE)
 
 .PHONY: lint-templates
-lint-templates: .venv
+lint-templates: .venv node_modules
+	@node tools/lint-templates-svg.js
 	@poetry run djlint $(shell find templates -type f -iname '*.tmpl')
 
 .PHONY: lint-yaml
diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index d5678566d..015ab1e15 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -25,7 +25,7 @@
 				</div>
 				<div class="flex-item-trailing">
 					<button class="ui tiny red button">
-						{{svg "octicon-warning" 14}} CJK文本测试
+						{{svg "octicon-alert" 14}} CJK文本测试
 					</button>
 					<button class="ui tiny primary button">
 						{{svg "octicon-info" 14}} Button
@@ -54,7 +54,7 @@
 				</div>
 				<div class="flex-item-trailing">
 					<button class="ui tiny red button">
-						{{svg "octicon-warning" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
+						{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
 					</button>
 				</div>
 			</div>
diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index 6a5dec6c4..856b3da01 100644
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -26,7 +26,7 @@
 		{{end}}
 
 		<div class="field footer tw-mx-2">
-			<span class="markup-info">{{svg "octicon-markup"}} {{ctx.Locale.Tr "repo.diff.comment.markdown_info"}}</span>
+			<span class="markup-info">{{svg "octicon-markdown"}} {{ctx.Locale.Tr "repo.diff.comment.markdown_info"}}</span>
 			<div class="tw-text-right">
 				{{if $.reply}}
 					<button class="ui submit primary tiny button btn-reply" type="submit">{{ctx.Locale.Tr "repo.diff.comment.reply"}}</button>
diff --git a/tools/lint-templates-svg.js b/tools/lint-templates-svg.js
new file mode 100755
index 000000000..72f756400
--- /dev/null
+++ b/tools/lint-templates-svg.js
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+import {readdirSync, readFileSync} from 'node:fs';
+import {parse, relative} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {exit} from 'node:process';
+import fastGlob from 'fast-glob';
+
+const knownSvgs = new Set();
+for (const file of readdirSync(new URL('../public/assets/img/svg', import.meta.url))) {
+  knownSvgs.add(parse(file).name);
+}
+
+const rootPath = fileURLToPath(new URL('..', import.meta.url));
+let hadErrors = false;
+
+for (const file of fastGlob.sync(fileURLToPath(new URL('../templates/**/*.tmpl', import.meta.url)))) {
+  const content = readFileSync(file, 'utf8');
+  for (const [_, name] of content.matchAll(/svg ["'`]([^"'`]+)["'`]/g)) {
+    if (!knownSvgs.has(name)) {
+      console.info(`SVG "${name}" not found, used in ${relative(rootPath, file)}`);
+      hadErrors = true;
+    }
+  }
+}
+
+exit(hadErrors ? 1 : 0);