Enable setting custom fonts from admin panel

kir-dev · Feb 21, 2024 · 82bce56 · 82bce56
1 parent 59c7e52
commit 82bce56
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/backend/src/main/kotlin/hu/bme/sch/cmsch/component/app/ApplicationApiController.kt b/backend/src/main/kotlin/hu/bme/sch/cmsch/component/app/ApplicationApiController.kt
@@ -7,11 +7,15 @@ import hu.bme.sch.cmsch.component.countdown.CountdownComponent
 import hu.bme.sch.cmsch.model.RoleType
 import hu.bme.sch.cmsch.service.TimeService
 import hu.bme.sch.cmsch.util.getUserOrNull
+import org.springframework.http.HttpHeaders
+import org.springframework.http.HttpStatusCode
+import org.springframework.http.ResponseEntity
 import org.springframework.security.core.Authentication
 import org.springframework.web.bind.annotation.CrossOrigin
 import org.springframework.web.bind.annotation.GetMapping
 import org.springframework.web.bind.annotation.RequestMapping
 import org.springframework.web.bind.annotation.RestController
+import java.net.URI
 import java.util.*
 
 @RestController
@@ -56,4 +60,18 @@ class ApplicationApiController(
     private fun appComponentFields() =
         mapOf(applicationComponent.defaultComponent.property to applicationComponent.defaultComponent.getValue())
 
+    @GetMapping("/app/font-display.css")
+    fun getDisplayFont(): ResponseEntity<Any> {
+        val headers = HttpHeaders()
+        headers.location = URI.create(stylingComponent.displayFontCdn.rawValue)
+        return ResponseEntity.status(HttpStatusCode.valueOf(303)).headers(headers).build()
+    }
+
+    @GetMapping("/app/font-main.css")
+    fun getMainFont(): ResponseEntity<Any> {
+        val headers = HttpHeaders()
+        headers.location = URI.create(stylingComponent.mainFontCdn.rawValue)
+        return ResponseEntity.status(HttpStatusCode.valueOf(303)).headers(headers).build()
+    }
+
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -14,12 +14,13 @@
     <meta name="theme-color" content="%REACT_APP_THEME_COLOR%" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="%REACT_APP_API_BASE_URL%" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+      href="%REACT_APP_API_BASE_URL%/api/app/font-display.css"
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="%REACT_APP_API_BASE_URL%/api/app/font-main.css"
       rel="stylesheet"
     />
     <script defer data-domain="%REACT_APP_PLAUSIBLE_URL%" src="https://visit.kir-dev.hu/js/plausible.js"></script>

diff --git a/frontend/src/api/contexts/themeConfig/ThemeConfig.tsx b/frontend/src/api/contexts/themeConfig/ThemeConfig.tsx
@@ -3,7 +3,6 @@ import { useConfigContext } from '../config/ConfigContext'
 import { ChakraProvider, useColorMode } from '@chakra-ui/react'
 import { PropsWithChildren, useMemo } from 'react'
 import { mode } from '@chakra-ui/theme-tools'
-import { Helmet } from 'react-helmet-async'
 import { getColorShadesForColor } from '../../../util/core-functions.util'
 
 export const ThemeConfig = ({ children }: PropsWithChildren) => {
@@ -38,22 +37,12 @@ export const ThemeConfig = ({ children }: PropsWithChildren) => {
         }
       })
       customTheme.fonts = {
-        heading: "'Roboto Condensed', sans-serif",
-        body: "'Roboto', sans-serif",
+        heading: config.components.style.displayFontName,
+        body: config.components.style.mainFontName,
         mono: 'monospace'
       }
     }
     return customTheme
   }, [config])
-  return (
-    <ChakraProvider theme={chakraConfig}>
-      {(config?.components.style.mainFontCdn || config?.components.style.displayFontCdn) && (
-        <Helmet>
-          <link href={config?.components.style.displayFontCdn} rel="stylesheet" />
-          <link href={config?.components.style.mainFontCdn} rel="stylesheet" />
-        </Helmet>
-      )}
-      {children}
-    </ChakraProvider>
-  )
+  return <ChakraProvider theme={chakraConfig}>{children}</ChakraProvider>
 }