Merge pull request #340 from reedu-reengineering-education/feat/zeitg…

…eisty-theme

Add zeitgeisty theme

middleware.ts

@@ -51,7 +51,8 @@ const i18nMiddleware = (req: NextRequest) => {
   if (
     req.nextUrl.pathname.indexOf('icon') > -1 ||
     req.nextUrl.pathname.indexOf('chrome') > -1 ||
-    req.nextUrl.pathname.indexOf('api') > -1
+    req.nextUrl.pathname.indexOf('api') > -1 ||
+    req.nextUrl.pathname.indexOf('static') > -1
   ) {
     return NextResponse.next()
   }

prisma/seed/data/themes.json

@@ -9,6 +9,17 @@
     "button_color": "#38383a",
     "background_color": "white"
   },
+  {
+    "name": "Zeitgeisty",
+    "shadow_color": "rgba(56,56.58, 0.9)",
+    "border": "3px solid #38383a",
+    "box_shadow": "none",
+    "border_radius": "0px",
+    "text_color": "#38383a",
+    "button_color": "#38383a",
+    "background_color": "white",
+    "fontFamily": "Albertsthal Typewriter"
+  },
   {
     "name": "Funky",
     "shadow_color": "rgba(237, 130, 222, 0.9)",

src/components/Viewer/ContentTypes/TitleContent.tsx

@@ -8,5 +8,11 @@ interface TitleContentProps extends React.HTMLAttributes<HTMLFormElement> {
 }
 
 export function TitleContent({ content }: TitleContentProps) {
-  return <div>{content.content && <h1>{content.content}</h1>}</div>
+  return (
+    <div>
+      {content.content && (
+        <h1 className="enable-theme-font">{content.content}</h1>
+      )}
+    </div>
+  )
 }

src/components/Viewer/StoryOverviewContols.tsx

@@ -124,7 +124,7 @@ export function StoryOverviewControls({ slug, page, story, tags }: Props) {
         {story && (
           <div className="flex max-w-fit flex-col">
             <div className="bg-gray flex flex-row gap-2">
-              <h3 className="max-w-[500px]">{story?.name}</h3>
+              <h3 className="enable-theme-font max-w-[500px]">{story?.name}</h3>
             </div>
 
             {page == 'start' && (

src/helper/applyTheme.tsx

@@ -35,6 +35,12 @@ export function applyTheme(theme: any) {
             theme[key],
           )
           break
+        case 'fontFamily':
+          document.documentElement.style.setProperty(
+            '--font-family',
+            theme[key],
+          )
+          break
       }
     })
   }

src/styles/elements.scss

@@ -53,6 +53,10 @@ html {
   box-shadow: var(--boxshadow);
   color: var(--text-color);
   background-color: var(--background-color);
+
+  .enable-theme-font {
+    font-family: var(--font-family);
+  }
 }
 
 .re-basic-box-no-shadow {

src/styles/typo.scss

@@ -19,3 +19,8 @@ p {
   line-height: 1.5rem; // text-base
   color: var(--text-color);
 }
+
+@font-face {
+  font-family: 'Albertsthal Typewriter';
+  src: url('/static/fonts/AlbertsthalTypewriter.ttf') format('truetype');
+}