feat: customizable favicon (#282)

hperl · web-flow · commit 8188b29b77fe · 2023-08-29T15:59:16.000+02:00
diff --git a/src/index.ts b/src/index.ts
@@ -5,7 +5,7 @@ import express, { Request, Response } from "express"
 import { engine } from "express-handlebars"
 import * as fs from "fs"
 import * as https from "https"
-import { handlebarsHelpers } from "./pkg"
+import { addFavicon, defaultConfig, handlebarsHelpers } from "./pkg"
 import { middleware as middlewareLogger } from "./pkg/logger"
 import {
   register404Route,
@@ -31,6 +31,7 @@ const router = express.Router()
 
 app.use(middlewareLogger)
 app.use(cookieParser())
+app.use(addFavicon(defaultConfig))
 app.set("view engine", "hbs")
 
 app.engine(
diff --git a/src/pkg/index.ts b/src/pkg/index.ts
@@ -30,6 +30,8 @@ export const defaultConfig: RouteOptionsCreator = () => {
   return {
     apiBaseUrl: apiBaseUrl,
     kratosBrowserUrl: apiBaseUrl,
+    faviconUrl: "favico.png",
+    faviconType: "image/png",
     ...sdk,
   }
 }
diff --git a/src/pkg/middleware.ts b/src/pkg/middleware.ts
@@ -77,6 +77,16 @@ export const requireAuth =
       })
   }
 
+export const addFavicon =
+  (createHelpers: RouteOptionsCreator) =>
+  (req: Request, res: Response, next: NextFunction) => {
+    const { faviconUrl, faviconType } = createHelpers(req, res)
+    res.locals.faviconUrl = faviconUrl
+    res.locals.faviconType = faviconType
+
+    next()
+  }
+
 /**
  * Sets the session in the request. If no session is found,
  * the request still succeeds.
diff --git a/src/pkg/route.ts b/src/pkg/route.ts
@@ -11,6 +11,8 @@ export interface RouteOptions {
   apiBaseUrl: string
   kratosBrowserUrl: string
   logoUrl?: string
+  faviconUrl?: string
+  faviconType?: string
   theme?: Theme
 }
 
diff --git a/src/routes/recovery.ts b/src/routes/recovery.ts
@@ -17,7 +17,10 @@ export const createRecoveryRoute: RouteCreator =
     res.locals.projectName = "Recover account"
 
     const { flow, return_to = "" } = req.query
-    const { frontend, kratosBrowserUrl, logoUrl } = createHelpers(req, res)
+    const { frontend, kratosBrowserUrl, logoUrl, faviconUrl, faviconType } =
+      createHelpers(req, res)
+    res.locals.faviconUrl = faviconUrl
+    res.locals.faviconType = faviconType
     const initFlowUrl = getUrlForFlow(
       kratosBrowserUrl,
       "recovery",
diff --git a/views/layouts/auth.hbs b/views/layouts/auth.hbs
@@ -1,4 +1,4 @@
-<html lang='en'>
+<html lang="en">
   <head>
     {{> standard_headers}}
     <link type="text/css" rel='stylesheet' href="auth-layout.css" />
diff --git a/views/partials/standard_headers.hbs b/views/partials/standard_headers.hbs
@@ -1,5 +1,5 @@
 <meta content="width=device-width, initial-scale=1" name="viewport" />
-<link rel="icon" type="image/png" href="favico.png" />
+<link rel="icon" href="{{{faviconUrl}}}" type="{{{faviconType}}}" />
 <meta charset="utf-8" />
 <title>{{projectName}}</title>
 {{! CSS Reset}}

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,8 @@ export const defaultConfig: RouteOptionsCreator = () => {`
`30`	`30`	`return {`
`31`	`31`	`apiBaseUrl: apiBaseUrl,`
`32`	`32`	`kratosBrowserUrl: apiBaseUrl,`
	`33`	`+ faviconUrl: "favico.png",`
	`34`	`+ faviconType: "image/png",`
`33`	`35`	`...sdk,`
`34`	`36`	`}`
`35`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@ export interface RouteOptions {`
`11`	`11`	`apiBaseUrl: string`
`12`	`12`	`kratosBrowserUrl: string`
`13`	`13`	`logoUrl?: string`
	`14`	`+ faviconUrl?: string`
	`15`	`+ faviconType?: string`
`14`	`16`	`theme?: Theme`
`15`	`17`	`}`
`16`	`18`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<html lang='en'>`
	`1`	`+<html lang="en">`
`2`	`2`	`<head>`
`3`	`3`	`{{> standard_headers}}`
`4`	`4`	`<link type="text/css" rel='stylesheet' href="auth-layout.css" />`