diff --git a/.gitignore b/.gitignore index 56888464..73559751 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,4 @@ stadia/cmd/reverse-geocode/reverse-geocode stadia/cmd/structured-geocode/structured-geocode static/gen/ temp/ +ts/gen diff --git a/README.md b/README.md index 35847479..0a3b8e17 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,16 @@ This uses [goose](https://github.com/pressly/goose). You can use the goose comma > GOOSE_DRIVER=postgres GOOSE_DBSTRING="dbname=nidus-sync sslmode=disable" goose up ``` +### svg icons + +These icons are generated as part of the build system. You can generate them manually with: + +``` +pnpm generate-icons +``` + +This will produce an scss file at `ts/gen/custom-icons.scss` + ### typescript In order to work on the TypeScript code you'll need to install the dependencies locally in your dev environment: diff --git a/generate-icons.js b/generate-icons.js new file mode 100644 index 00000000..2eb72de3 --- /dev/null +++ b/generate-icons.js @@ -0,0 +1,58 @@ +// generate-icons.js +import fs from "fs"; +import path from "path"; + +const svgDir = "./svg"; +const outputFile = "./ts/gen/custom-icons.scss"; +const outputDir = path.dirname(outputFile); + +function svgToDataUri(svgContent) { + // Remove unnecessary attributes first + svgContent = svgContent + .replace(/\s+id="[^"]*"/g, "") + .replace(/\s+id='[^']*'/g, "") + .replace(/\s+data-name="[^"]*"/g, "") + .replace(/\s+data-name='[^']*'/g, ""); + + // Encode for data URI + return svgContent + .replace(/%/g, "%25") + .replace(//g, "%3E") + .replace(/#/g, "%23") + .replace(/"/g, "'") // Use single quotes in SVG + .replace(/'/g, "%27") // Then encode them + .replace(/\s+/g, " ") // Collapse whitespace + .trim(); +} + +function generateIconStyles() { + const svgFiles = fs.readdirSync(svgDir).filter((f) => f.endsWith(".svg")); + + let scss = `// Auto-generated custom icons\n\n`; + scss += `.bi-custom { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.125em; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +}\n\n`; + + svgFiles.forEach((file) => { + const iconName = path.basename(file, ".svg"); + const svgContent = fs.readFileSync(path.join(svgDir, file), "utf-8"); + const dataUri = svgToDataUri(svgContent); + + scss += `.bi-${iconName} { + @extend .bi-custom; + background-image: url("data:image/svg+xml,${dataUri}"); +}\n\n`; + }); + + fs.writeFileSync(outputFile, scss); + console.log(`Generated ${svgFiles.length} icon styles`); +} + +generateIconStyles(); diff --git a/html/parse.go b/html/parse.go index 84a6c804..c0855780 100644 --- a/html/parse.go +++ b/html/parse.go @@ -40,32 +40,6 @@ func addSupportingTemplates(sourceFS fs.FS, t *template.Template) error { } return nil } -func addSVGTemplates(filesystem fs.FS, t *template.Template) error { - err := fs.WalkDir(filesystem, "svg", func(path string, d fs.DirEntry, err error) error { - if err != nil || d.IsDir() { - return err - } - - content, err := fs.ReadFile(filesystem, path) - if err != nil { - return fmt.Errorf("Failed to read svg '%s' from filesystem: %w", path, err) - } - svg_name := removeLeadingDir(path) - svg_template := fmt.Sprintf("{{define \"%s\"}}%s{{end}}", svg_name, string(content)) - svg_t, err := template.New(svg_name).Parse(svg_template) - if err != nil { - return fmt.Errorf("Failed to parse svg '%s' from embedded filesystem: %v", path, err) - } - _, err = t.AddParseTree(svg_t.Name(), svg_t.Tree) - if err != nil { - return fmt.Errorf("Failed to add svg '%s' to embedded template: %v", path, err) - } - //log.Debug().Str("name", svg_name).Msg("add svg template") - return nil - }) - //log.Debug().Msg("Done adding SVG templates") - return err -} func parseTemplate(sourceFS fs.FS, template_name string) (*template.Template, error) { t, err := parseTemplateFile(sourceFS, template_name) if err != nil { @@ -75,10 +49,6 @@ func parseTemplate(sourceFS fs.FS, template_name string) (*template.Template, er if err != nil { return nil, fmt.Errorf("Failed to add supporting templates: %w", err) } - err = addSVGTemplates(sourceFS, t) - if err != nil { - return nil, fmt.Errorf("Failed to add supporting svg templates: %w", err) - } return t, nil } func parseTemplateFile(sourceFS fs.FS, filename string) (*template.Template, error) { diff --git a/package.json b/package.json index 5cc4606d..a3cce265 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "scripts": { "build": "node build.js", "build:prod": "node build.js --minify", + "generate-icons": "node generate-icons.js", "watch": "node build.js --watch" } } diff --git a/html/template/svg/assign.svg b/svg/assign.svg similarity index 100% rename from html/template/svg/assign.svg rename to svg/assign.svg diff --git a/html/template/svg/brain.svg b/svg/brain.svg similarity index 100% rename from html/template/svg/brain.svg rename to svg/brain.svg diff --git a/html/template/svg/check-report-color.svg b/svg/check-report-color.svg similarity index 100% rename from html/template/svg/check-report-color.svg rename to svg/check-report-color.svg diff --git a/html/template/svg/check-report.svg b/svg/check-report.svg similarity index 100% rename from html/template/svg/check-report.svg rename to svg/check-report.svg diff --git a/html/template/svg/god.svg b/svg/god.svg similarity index 100% rename from html/template/svg/god.svg rename to svg/god.svg diff --git a/html/template/svg/messaging.svg b/svg/messaging.svg similarity index 100% rename from html/template/svg/messaging.svg rename to svg/messaging.svg diff --git a/html/template/svg/mosquito-color.svg b/svg/mosquito-color.svg similarity index 100% rename from html/template/svg/mosquito-color.svg rename to svg/mosquito-color.svg diff --git a/html/template/svg/mosquito.svg b/svg/mosquito.svg similarity index 100% rename from html/template/svg/mosquito.svg rename to svg/mosquito.svg diff --git a/html/template/svg/pond-color.svg b/svg/pond-color.svg similarity index 100% rename from html/template/svg/pond-color.svg rename to svg/pond-color.svg diff --git a/html/template/svg/pond.svg b/svg/pond.svg similarity index 100% rename from html/template/svg/pond.svg rename to svg/pond.svg diff --git a/html/template/svg/review.svg b/svg/review.svg similarity index 100% rename from html/template/svg/review.svg rename to svg/review.svg diff --git a/html/template/svg/settings.svg b/svg/settings.svg similarity index 100% rename from html/template/svg/settings.svg rename to svg/settings.svg diff --git a/html/template/svg/strategy.svg b/svg/strategy.svg similarity index 100% rename from html/template/svg/strategy.svg rename to svg/strategy.svg diff --git a/ts/components/layout/Sidebar.vue b/ts/components/layout/Sidebar.vue index ec627e7d..2b5c059e 100644 --- a/ts/components/layout/Sidebar.vue +++ b/ts/components/layout/Sidebar.vue @@ -1,11 +1,39 @@