From 1435cec9d312f7d29f1cbe88fe5c3d62aae0de2b Mon Sep 17 00:00:00 2001
From: fluid-design-io <2216991777@qq.com>
Date: Wed, 18 Oct 2023 00:01:48 -0500
Subject: [PATCH] feat: ability to load colors via searchParams
---
apps/web/app/color-store-initializer.tsx | 1 +
apps/web/app/existingColorsOverwritter.tsx | 51 ++++++++++++++++++++++
apps/web/app/layout.tsx | 46 ++++++++-----------
apps/web/app/page.tsx | 26 ++++++-----
4 files changed, 85 insertions(+), 39 deletions(-)
create mode 100644 apps/web/app/existingColorsOverwritter.tsx
diff --git a/apps/web/app/color-store-initializer.tsx b/apps/web/app/color-store-initializer.tsx
index 82c2fea..abbc08c 100644
--- a/apps/web/app/color-store-initializer.tsx
+++ b/apps/web/app/color-store-initializer.tsx
@@ -1,6 +1,7 @@
"use client";
import { useColorStore } from "@/store/store";
+import { useSearchParams } from "next/navigation";
import { useRef } from "react";
function ColorStoreInitializer({ ...props }) {
diff --git a/apps/web/app/existingColorsOverwritter.tsx b/apps/web/app/existingColorsOverwritter.tsx
new file mode 100644
index 0000000..fb0b3cf
--- /dev/null
+++ b/apps/web/app/existingColorsOverwritter.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { colorHelper } from "@/lib/colorHelper";
+import { useColorStore } from "@/store/store";
+import { AnimatePresence, motion } from "framer-motion";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+function ExistingColorsOverwritter({ searchParams }) {
+ const { updateBaseColor } = useColorStore();
+ const colors = searchParams.colors;
+ const [loading, setLoading] = useState(colors ? true : false);
+ useEffect(() => {
+ if (!colors) return;
+ const colorArray = colors.split(",");
+ const baseColors = {
+ primary: colorHelper.toRaw(colorArray[0]),
+ secondary: colorHelper.toRaw(colorArray[1]),
+ accent: colorHelper.toRaw(colorArray[2]),
+ };
+ setTimeout(() => {
+ updateBaseColor("primary", baseColors.primary);
+ updateBaseColor("secondary", baseColors.secondary);
+ updateBaseColor("accent", baseColors.accent);
+ setLoading(false);
+ }, 200);
+ }, []);
+ return (
+
+ {loading && (
+
+
+
+ )}
+
+ );
+}
+
+export default ExistingColorsOverwritter;
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 08ba1cf..ab1c84f 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -14,6 +14,7 @@ import PerformanceChecker from "@/components/core/performance-checker";
import Toolbar from "@/components/core/toobar";
import StyleSheetInitializer from "./stylesheet-initializer";
import { cookies } from "next/headers";
+import { getServerColors } from "@/lib/getServerColors";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const comfortaa = Comfortaa({
@@ -26,38 +27,25 @@ export const metadata: Metadata = {
default: "Fluid Colors",
template: "%s | Fluid Colors",
},
- description: "Mordern color palette generator",
+ description: "Next-gen color palette generator",
viewport:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
-};
-
-const getServerColors = async () => {
- const newBaseColors = generateBaseColors();
- const cookieStore = cookies();
- const mode = cookieStore.get("colorMode");
- // short-hand
- const [primaryPalette, secondaryPalette, accentPalette, grayPalette] = [
- "primary",
- "secondary",
- "accent",
- "gray",
- ].map((color) =>
- generateColorPalette({
- color: color === "gray" ? newBaseColors.primary : newBaseColors[color],
- type: color as BaseColorTypes,
- colorMode: mode ? (mode.value as ColorMode) : ColorMode.HEX,
- }),
- );
- return {
- baseColors: newBaseColors,
- colorPalettes: {
- primary: primaryPalette,
- secondary: secondaryPalette,
- accent: accentPalette,
- gray: grayPalette,
+ openGraph: {
+ images: ["/og-default.jpg"],
+ },
+ robots: {
+ index: false,
+ follow: true,
+ nocache: true,
+ googleBot: {
+ index: true,
+ follow: false,
+ noimageindex: true,
+ "max-video-preview": -1,
+ "max-image-preview": "large",
+ "max-snippet": -1,
},
- colorMode: mode ? (mode.value as ColorMode) : ColorMode.HEX,
- };
+ },
};
export default async function RootLayout({
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index dbcba44..643a160 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -5,6 +5,7 @@ import { BaseColors } from "@/types/app";
import { colorHelper } from "@/lib/colorHelper";
import RootSkipNavContent from "./root-skip-nav-content";
+import ExistingColorsOverwritter from "./existingColorsOverwritter";
type Props = {
searchParams: { colors: string } | undefined;
@@ -15,33 +16,38 @@ export async function generateMetadata(
): Promise {
const colors = searchParams?.colors;
let paletteColors = "";
+ let opengraphImage = "/og-default.jpg";
if (colors) {
- const parsedColors: { state: { baseColors: BaseColors } } =
- JSON.parse(colors);
- const { primary, secondary, accent } = parsedColors.state.baseColors;
+ const [primary, secondary, accent] = colors.split(",");
+ if (primary && secondary && accent) {
+ paletteColors = `${primary}, ${secondary}, ${accent}`;
+ }
// console.log(primary, secondary, accent);
paletteColors = `${colorHelper.toHex(primary)}, ${colorHelper.toHex(
secondary,
)}, ${colorHelper.toHex(accent)}`;
+ // fetch dynamic og
+ const colorsUrl = encodeURIComponent(paletteColors);
+ opengraphImage = `${process.env.NEXT_PUBLIC_URL}/api/og?colors=${colorsUrl}`;
}
- // // fetch data
- // const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || [];
return {
- title: `${paletteColors}`,
- // openGraph: {
- // images: ['/some-specific-page-image.jpg', ...previousImages],
- // },
+ title: "Check out this palette",
+ description: `Generated with Fluid Colors: ${paletteColors}`,
+ openGraph: {
+ images: [opengraphImage, ...previousImages],
+ },
};
}
-export default async function Page() {
+export default async function Page({ searchParams }: Props) {
return (
+
);
}