Allow updating styles from extensions (#151)

scaffold-eth · Nov 26, 2024 · d7d9321 · d7d9321
1 parent 4fbbfb4
commit d7d9321
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 75 deletions.
diff --git 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/...s/base/packages/nextjs/styles/globals.css → ...es/nextjs/styles/globals.css.template.mjs b/...s/base/packages/nextjs/styles/globals.css → ...es/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
@@ -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/.../nextjs/utils/scaffold-eth/getMetadata.ts → .../scaffold-eth/getMetadata.ts.template.mjs b/.../nextjs/utils/scaffold-eth/getMetadata.ts → .../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",
+})