From d7d9321d48d8428fc7c7f4bb2739cf5888496fa8 Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Tue, 26 Nov 2024 18:21:21 +0100
Subject: [PATCH] Allow updating styles from extensions (#151)

---
 ...affoldEthAppWithProviders.tsx.template.mjs |   5 +-
 .../{globals.css => globals.css.template.mjs} |   9 ++
 .../nextjs/tailwind.config.js.template.mjs    | 136 +++++++++---------
 ...etadata.ts => getMetadata.ts.template.mjs} |  21 ++-
 4 files changed, 96 insertions(+), 75 deletions(-)
 rename templates/base/packages/nextjs/styles/{globals.css => globals.css.template.mjs} (65%)
 rename templates/base/packages/nextjs/utils/scaffold-eth/{getMetadata.ts => getMetadata.ts.template.mjs} (61%)

diff --git a/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs b/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs
index ae951562e..6119301a2 100644
--- a/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs
+++ b/templates/base/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.template.mjs
@@ -1,6 +1,6 @@
 import { withDefaults } from "../../../../utils.js";
 
-const contents = ({ providerNames, providerSetups, providerImports, providerProps }) => {
+const contents = ({ providerNames, providerSetups, providerImports, providerProps, globalClassNames }) => {
   // filter out empty strings
   const providerOpeningTags = providerNames.filter(Boolean).map((name, index) => `<${name} ${providerProps[index]}>`);
 
@@ -27,7 +27,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <>
-      <div className="flex flex-col min-h-screen">
+      <div className={\`flex flex-col min-h-screen ${globalClassNames}\`}>
         <Header />
         <main className="relative flex flex-col flex-1">{children}</main>
         <Footer />
@@ -79,4 +79,5 @@ export default withDefaults(contents, {
   providerSetups: "",
   providerImports: "",
   providerProps: "",
+  globalClassNames: "",
 });
diff --git a/templates/base/packages/nextjs/styles/globals.css b/templates/base/packages/nextjs/styles/globals.css.template.mjs
similarity index 65%
rename from templates/base/packages/nextjs/styles/globals.css
rename to templates/base/packages/nextjs/styles/globals.css.template.mjs
index 3fb55aecf..ade73d995 100644
--- a/templates/base/packages/nextjs/styles/globals.css
+++ b/templates/base/packages/nextjs/styles/globals.css.template.mjs
@@ -1,3 +1,7 @@
+import { withDefaults } from '../../../../utils.js'
+
+const contents = ({ globalImports }) =>
+`${globalImports}
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -30,3 +34,8 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+`
+
+export default withDefaults(contents, {
+  globalImports: ''
+})
diff --git a/templates/base/packages/nextjs/tailwind.config.js.template.mjs b/templates/base/packages/nextjs/tailwind.config.js.template.mjs
index 259fa3e22..1b2ffef55 100644
--- a/templates/base/packages/nextjs/tailwind.config.js.template.mjs
+++ b/templates/base/packages/nextjs/tailwind.config.js.template.mjs
@@ -1,97 +1,99 @@
-import { withDefaults } from "../../../utils.js";
+import { stringify, withDefaults } from "../../../utils.js";
 
 const contents = ({ lightTheme, darkTheme, extendTheme }) => `/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./utils/**/*.{js,ts,jsx,tsx}",
+  ],
   plugins: [require("daisyui")],
   darkTheme: "dark",
   darkMode: ["selector", "[data-theme='dark']"],
-  // DaisyUI theme colors
   daisyui: {
     themes: [
       {
-        light: ${lightTheme},
+        light: ${stringify(lightTheme[0])},
       },
       {
-        dark: ${darkTheme},
+        dark: ${stringify(darkTheme[0])},
       },
     ],
   },
   theme: {
-    extend: {
-      ${extendTheme[0] && `${extendTheme[0]},`}
+    extend: ${stringify({
+      ...extendTheme[0],
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
       },
       animation: {
         "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
-    },
+    })},
   },
 };`;
 
 export default withDefaults(contents, {
-  lightTheme: `{
-          primary: "#93BBFB",
-          "primary-content": "#212638",
-          secondary: "#DAE8FF",
-          "secondary-content": "#212638",
-          accent: "#93BBFB",
-          "accent-content": "#212638",
-          neutral: "#212638",
-          "neutral-content": "#ffffff",
-          "base-100": "#ffffff",
-          "base-200": "#f4f8ff",
-          "base-300": "#DAE8FF",
-          "base-content": "#212638",
-          info: "#93BBFB",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF8863",
+  lightTheme: {
+    primary: "#93BBFB",
+    "primary-content": "#212638",
+    secondary: "#DAE8FF",
+    "secondary-content": "#212638",
+    accent: "#93BBFB",
+    "accent-content": "#212638",
+    neutral: "#212638",
+    "neutral-content": "#ffffff",
+    "base-100": "#ffffff",
+    "base-200": "#f4f8ff",
+    "base-300": "#DAE8FF",
+    "base-content": "#212638",
+    info: "#93BBFB",
+    success: "#34EEB6",
+    warning: "#FFCF72",
+    error: "#FF8863",
 
-          "--rounded-btn": "9999rem",
+    "--rounded-btn": "9999rem",
 
-          ".tooltip": {
-            "--tooltip-tail": "6px",
-          },
-          ".link": {
-            textUnderlineOffset: "2px",
-          },
-          ".link:hover": {
-            opacity: "80%",
-          },
-        }`,
-  darkTheme: `{
-          primary: "#212638",
-          "primary-content": "#F9FBFF",
-          secondary: "#323f61",
-          "secondary-content": "#F9FBFF",
-          accent: "#4969A6",
-          "accent-content": "#F9FBFF",
-          neutral: "#F9FBFF",
-          "neutral-content": "#385183",
-          "base-100": "#385183",
-          "base-200": "#2A3655",
-          "base-300": "#212638",
-          "base-content": "#F9FBFF",
-          info: "#385183",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF8863",
+    ".tooltip": {
+      "--tooltip-tail": "6px",
+    },
+    ".link": {
+      textUnderlineOffset: "2px",
+    },
+    ".link:hover": {
+      opacity: "80%",
+    },
+  },
+  darkTheme: {
+    primary: "#212638",
+    "primary-content": "#F9FBFF",
+    secondary: "#323f61",
+    "secondary-content": "#F9FBFF",
+    accent: "#4969A6",
+    "accent-content": "#F9FBFF",
+    neutral: "#F9FBFF",
+    "neutral-content": "#385183",
+    "base-100": "#385183",
+    "base-200": "#2A3655",
+    "base-300": "#212638",
+    "base-content": "#F9FBFF",
+    info: "#385183",
+    success: "#34EEB6",
+    warning: "#FFCF72",
+    error: "#FF8863",
 
-          "--rounded-btn": "9999rem",
+    "--rounded-btn": "9999rem",
 
-          ".tooltip": {
-            "--tooltip-tail": "6px",
-            "--tooltip-color": "oklch(var(--p))",
-          },
-          ".link": {
-            textUnderlineOffset: "2px",
-          },
-          ".link:hover": {
-            opacity: "80%",
-          },
-        }`,
-  extendTheme: "",
+    ".tooltip": {
+      "--tooltip-tail": "6px",
+      "--tooltip-color": "oklch(var(--p))",
+    },
+    ".link": {
+      textUnderlineOffset: "2px",
+    },
+    ".link:hover": {
+      opacity: "80%",
+    },
+  },
+  extendTheme: {},
 });
diff --git a/templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts b/templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts.template.mjs
similarity index 61%
rename from templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts
rename to templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts.template.mjs
index ad531aea6..935b65dbb 100644
--- a/templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts
+++ b/templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts.template.mjs
@@ -1,20 +1,23 @@
-import type { Metadata } from "next";
+import { withDefaults } from '../../../../../utils.js'
+
+const contents = ({ titleTemplate, thumbnailPath }) =>
+`import type { Metadata } from "next";
 
 const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
-  ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
-  : `http://localhost:${process.env.PORT || 3000}`;
-const titleTemplate = "%s | Scaffold-ETH 2";
+  ? \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`
+  : \`http://localhost:\${process.env.PORT || 3000}\`;
+const titleTemplate = "${titleTemplate}";
 
 export const getMetadata = ({
   title,
   description,
-  imageRelativePath = "/thumbnail.jpg",
+  imageRelativePath = "${thumbnailPath}",
 }: {
   title: string;
   description: string;
   imageRelativePath?: string;
 }): Metadata => {
-  const imageUrl = `${baseUrl}${imageRelativePath}`;
+  const imageUrl = \`\${baseUrl}\${imageRelativePath}\`;
 
   return {
     metadataBase: new URL(baseUrl),
@@ -48,3 +51,9 @@ export const getMetadata = ({
     },
   };
 };
+`
+
+export default withDefaults(contents, {
+  titleTemplate: "%s | Scaffold-ETH 2",
+  thumbnailPath: "/thumbnail.jpg",
+})