From a4796819ee875d5470283607ecb96262bf1691af Mon Sep 17 00:00:00 2001 From: immi Date: Fri, 27 Sep 2024 02:54:06 +0500 Subject: [PATCH] seo --- app/package.json | 2 +- app/pnpm-lock.yaml | 16 +- app/public/google0297be4585eb90db.html | 1 + app/src/app/globals.css | 40 +++- app/src/app/layout.tsx | 100 ++++++++- app/src/components/github-corner.tsx | 5 +- app/src/components/pages/cards/cards.tsx | 16 +- app/src/components/pages/home/display.tsx | 238 +++------------------- app/src/components/theme-editor.tsx | 25 ++- app/src/lib/brand-config.tsx | 35 ---- app/src/lib/site-config.ts | 80 ++++++++ app/src/lib/utils.ts | 15 ++ 12 files changed, 290 insertions(+), 283 deletions(-) create mode 100644 app/public/google0297be4585eb90db.html delete mode 100644 app/src/lib/brand-config.tsx create mode 100644 app/src/lib/site-config.ts diff --git a/app/package.json b/app/package.json index 488fa04..38766b0 100644 --- a/app/package.json +++ b/app/package.json @@ -62,7 +62,7 @@ "react-icons": "^5.3.0", "react-wrap-balancer": "^1.1.1", "recharts": "^2.12.7", - "shadcn-theme-editor": "1.3.2", + "shadcn-theme-editor": "1.3.3", "sonner": "^1.5.0", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index f667a77..47c6f60 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -168,8 +168,8 @@ importers: specifier: ^2.12.7 version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) shadcn-theme-editor: - specifier: 1.3.2 - version: 1.3.2(@types/react@18.3.3)(next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + specifier: 1.3.3 + version: 1.3.3(@types/react@18.3.3)(next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) sonner: specifier: ^1.5.0 version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2564,8 +2564,8 @@ packages: resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==} engines: {node: '>= 0.4'} - shadcn-theme-editor@1.3.2: - resolution: {integrity: sha512-c2JCR+Ig5q5uY+5OwINkdf+1QImfxsaMDUZWVufZj6194jDJ3/+uSSxi727hXZbigoeiNG5GsWkbuVPq0FxpfA==} + shadcn-theme-editor@1.3.3: + resolution: {integrity: sha512-rSiQw4EX1zbQFLlHgPrVaYul0/wqsF5/fLKVG7HfAKvTmV83QYeuJR0NWAH76nTQ4rM1Z4YQXxpZZ5wxVnozQQ==} peerDependencies: next-themes: ^0.3.0 react: ^18.3.1 @@ -4442,7 +4442,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -4466,7 +4466,7 @@ snapshots: enhanced-resolve: 5.17.1 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -4488,7 +4488,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -5435,7 +5435,7 @@ snapshots: functions-have-names: 1.2.3 has-property-descriptors: 1.0.2 - shadcn-theme-editor@1.3.2(@types/react@18.3.3)(next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): + shadcn-theme-editor@1.3.3(@types/react@18.3.3)(next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) class-variance-authority: 0.7.0 diff --git a/app/public/google0297be4585eb90db.html b/app/public/google0297be4585eb90db.html new file mode 100644 index 0000000..98c0f86 --- /dev/null +++ b/app/public/google0297be4585eb90db.html @@ -0,0 +1 @@ +google-site-verification: google0297be4585eb90db.html \ No newline at end of file diff --git a/app/src/app/globals.css b/app/src/app/globals.css index 8108789..e47ec97 100644 --- a/app/src/app/globals.css +++ b/app/src/app/globals.css @@ -2,15 +2,6 @@ @tailwind components; @tailwind utilities; -/* .masked-element { - -webkit-mask-image: url('/wave-haikei (1).svg'); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: cover; - mask-image: url('/wave-haikei (1).svg'); - mask-repeat: no-repeat; - mask-size: cover; -} */ - :root { --main-gradient: linear-gradient( 35deg, @@ -143,6 +134,35 @@ div[role="dialog"] > #shadcn-theme-editor > aside { @apply border-border; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground size-full; } } + +:host, +html, +body { + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + scrollbar-gutter: stable; + scroll-behavior: smooth; + font-feature-settings: + 'rlig' 1, + 'calt' 1; +} + +svg { + shape-rendering: crispEdges; +} + +svg circle, +svg line, +svg path, +svg polygon, +svg rect { + shape-rendering: geometricprecision; +} + diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx index 3b13854..4071e88 100644 --- a/app/src/app/layout.tsx +++ b/app/src/app/layout.tsx @@ -1,4 +1,4 @@ -import type { Metadata } from "next"; +import type { Metadata, Viewport } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import clsx from "clsx"; @@ -6,13 +6,88 @@ import { ThemeProvider } from "next-themes"; import ShadcnThemeEditor from "shadcn-theme-editor"; import ThemeEditor from "@/components/theme-editor"; import GithubCorner from "@/components/github-corner"; +import { joinPaths } from "@/lib/utils"; +import { siteConfig } from "@/lib/site-config"; +import { RiTwitterXLine, RiGithubFill } from "react-icons/ri"; +import { TbMail } from "react-icons/tb"; + const inter = Inter({ subsets: ["latin"] }); +export const viewport: Viewport = { + themeColor: [{ media: "(prefers-color-scheme: dark)", color: "#030014" }], +}; + export const metadata: Metadata = { - title: "Shadcn Theme Editor", - description: "Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.", + title: { + default: siteConfig.name, + template: `%s | ${siteConfig.name}`, + }, + description: siteConfig.description, + applicationName: siteConfig.name, + appleWebApp: { title: siteConfig.name, statusBarStyle: "default" }, + abstract: siteConfig.description, + archives: siteConfig.url, + category: "Developer Tools", + classification: "", + keywords: siteConfig.keywords, + authors: { url: "https://oimmi.com", name: "immi" }, + twitter: { + creator: "@o_immi", + creatorId: "1813232551131291651", + description: siteConfig.description, + title: siteConfig.name, + card: "summary_large_image", + images: siteConfig.images.map(img=>img.url), + }, + creator: "immi", + publisher: siteConfig.name, + alternates: { + canonical: { url: siteConfig.url, title: "Home" }, + languages: { en: [{ url: siteConfig.url, title: "Home" }] }, + }, + openGraph: { + type: "website", + locale: "en_US", + url: siteConfig.url, + title: siteConfig.name, + description: siteConfig.description, + siteName: siteConfig.name, + images: siteConfig.images, + }, + // icons: { + // icon: [ + // { + // url: joinPaths(siteConfig.url, "artgalestudio-logo.ico"), + // sizes: "16x16 32x32 48x48 192x192 256x256", + // }, + // joinPaths(siteConfig.url, "/favicon.ico"), + // ], + // }, }; +const SOCIALS: { + title: string; + url: string; + icon: (props: React.SVGProps) => React.JSX.Element; +}[] = [ + { + title: "Github", + url: "https://github.com/programming-with-ia", + icon: RiGithubFill, + }, + { + title: "X (Twitter)", + url: "https://x.com/o_immi", + icon: RiTwitterXLine, + }, + { + title: "GMail", + url: "mailto:" + "iafullprogrammer@gmail.com", + icon: TbMail, + }, +]; + + export default async function RootLayout({ children, }: Readonly<{ @@ -36,6 +111,25 @@ export default async function RootLayout({ +
+ {/* */} +

Built with ♥️ by immi

+
+ {SOCIALS.map((social, idx) => ( + + {} + + ))} +
+ {/* */} +
diff --git a/app/src/components/github-corner.tsx b/app/src/components/github-corner.tsx index 4f587a9..cf11e5e 100644 --- a/app/src/components/github-corner.tsx +++ b/app/src/components/github-corner.tsx @@ -1,11 +1,12 @@ -import { brandConfig } from "@/lib/brand-config"; +import { siteConfig } from "@/lib/site-config"; import React from "react"; function GithubCorner() { return ( <> diff --git a/app/src/components/pages/cards/cards.tsx b/app/src/components/pages/cards/cards.tsx index 9d9dfca..6d4280f 100644 --- a/app/src/components/pages/cards/cards.tsx +++ b/app/src/components/pages/cards/cards.tsx @@ -20,9 +20,9 @@ import { cn } from "@/lib/utils"; export const Cards = () => { return (
-
-
-
+
+
+ {/*
*/} @@ -38,9 +38,9 @@ export const Cards = () => { -
+ {/*
*/} -
+ {/*
*/} @@ -56,8 +56,8 @@ export const Cards = () => { -
-
+ {/*
*/} + {/*
*/} @@ -73,7 +73,7 @@ export const Cards = () => { -
+ {/*
*/}
); diff --git a/app/src/components/pages/home/display.tsx b/app/src/components/pages/home/display.tsx index e1c882c..0b135c0 100644 --- a/app/src/components/pages/home/display.tsx +++ b/app/src/components/pages/home/display.tsx @@ -1,227 +1,39 @@ import { Button } from "@/components/ui/button"; -import Container from "@/components/ui/Container"; import Heading, { getHeadingSize } from "@/components/ui/heading"; -import { brandConfig } from "@/lib/brand-config"; -import clsx from "clsx"; -import React from "react"; import { IoLogoGithub } from "react-icons/io"; -import { IoLogoNpm } from "react-icons/io"; import { CgNpm } from "react-icons/cg"; import DisplayContainer from "@/components/display-container"; -import { cn } from "@/lib/utils"; +import { siteConfig } from "@/lib/site-config"; -function Display_() { +function Display() { return ( -
-
- - - - - {" "} - -
-

- - Components crafted for
Design - Engineers - -

-
-
-
- Ready-to-use -
- -
- components for your React apps. - Shadcn compatible. -
- - - - - -
- Styled with tailwindcss. -
- -
- Copy and paste. Open Source. Typed. -
- -
-
-
-
+ ); } -function Display() { - return ( - - - {brandConfig.Brand} - - Manage Shadcn theme colors with an intuitive UI. -

Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects

- {/*

Crafting digital dreams. Expertise in animation, UI/UX, video editing, design, and web development.

*/} -
- - -
- - ); - } - export default Display; diff --git a/app/src/components/theme-editor.tsx b/app/src/components/theme-editor.tsx index 7def4c6..ccf439c 100644 --- a/app/src/components/theme-editor.tsx +++ b/app/src/components/theme-editor.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Sheet, SheetContent, @@ -10,14 +12,31 @@ import { } from "@/components/ui/sheet"; import ShadcnThemeEditor from "shadcn-theme-editor"; import { Button } from "./ui/button"; +import { IoColorPaletteSharp as ColorPalette } from "react-icons/io5"; +import clsx from "clsx"; +import { useState } from "react"; function ThemeEditor() { + const [isOpen, setIsOpen] = useState(false); return ( - + - + - + diff --git a/app/src/lib/brand-config.tsx b/app/src/lib/brand-config.tsx deleted file mode 100644 index 482f38d..0000000 --- a/app/src/lib/brand-config.tsx +++ /dev/null @@ -1,35 +0,0 @@ -export const url = - process.env.NEXT_PUBLIC_BASE_URL ?? // * Production URL - process.env.NEXT_PUBLIC_VERCEL_URL ?? // * Vercel Auto URL - "http://localhost:3000"; // * Dev - -export const brandConfig = { - Brand: "Shadcn Theme Editor", - email: "mimranabid2@gmail.com", - keywords: ["animation studio", "2d animation"], - // description: "A Brand That's Provide differents Services, ", - description: - "2d animation studio, web development, nextjs development, react development, video editing, character design, ui-ux design, ui/ux design, concept art, art design", - seo: {}, - url: url, - github: "https://github.com/programming-with-ia/shadcn-theme-editor/", - npm: "https://www.npmjs.com/package/shadcn-theme-editor", -// ogImage: `${url}/src-1200x630.png`, // w: 1200px, h: 630px -// images: [ -// { -// url: `${url}/src-1200x630.png`, -// width: 1200, -// height: 630, -// }, -// { -// url: `${url}/src-1024x512.png`, -// width: 1024, -// height: 512, -// }, -// { -// url: `${url}/src-512x512.png`, -// width: 512, -// height: 512, -// }, -// ] -}; diff --git a/app/src/lib/site-config.ts b/app/src/lib/site-config.ts new file mode 100644 index 0000000..1fc5b23 --- /dev/null +++ b/app/src/lib/site-config.ts @@ -0,0 +1,80 @@ +export const url = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"; // ?? // * Production URL +// process.env.NEXT_PUBLIC_VERCEL_URL ?? // * Vercel Auto URL +// "http://localhost:3000"; // * Dev + +export const siteConfig = { + name: "Shadcn Theme Editor", + description: + "Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.", + id: "oimmi", + email: "iafullprogrammer@gmail.com", + keywords: [ + "shadcn-theme-editor", + "shadcn theme editor", + "shadcn", + "shadcn-ui", + "theme", + "color", + "next-themes", + "theme-edit", + "customization", + "personalization", + "colord", + "theme-customization", + "dev tool", + "development tools", + "UI toolkit", + "design tools", + "CSS customization", + "UI customization", + "frontend development", + "theme switching", + "responsive design", + "web design tools", + "user interface", + "color palette", + "style guide", + "visual design", + "user experience", + "web development", + "JavaScript tools", + "React tools", + "Next.js themes", + "component library", + ], + color: "#169fb1", + seo: {}, + url: url, + authors: { + name: "immi", + url: "https://oimmi.com/", + }, + github: "https://github.com/programming-with-ia/shadcn-theme-editor/", + npm: "https://www.npmjs.com/package/shadcn-theme-editor", + images: [ + { width: 1200, height: 630 }, + { width: 1024, height: 512 }, + { width: 512, height: 512 }, + + ].map((size) => ({ + url: `https://placehold.co/${size.width}x${size.height}/169fb1/FFFFFF.png/?font=Open%20Sans&text=Shadcn%20Theme%20Editor`, + ...size, + })), + // images: [ + // { + // url: "src-1200x630.png", + // width: 1200, + // height: 630, + // }, + // { + // url: "src-1024x512.png", + // width: 1024, + // height: 512, + // }, + // { + // url: "src-512x512.png", + // width: 512, + // height: 512, + // }, + // ] +}; diff --git a/app/src/lib/utils.ts b/app/src/lib/utils.ts index 7933d83..9ae89b2 100644 --- a/app/src/lib/utils.ts +++ b/app/src/lib/utils.ts @@ -5,4 +5,19 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } +export function joinPaths(...paths: (string | boolean)[]): string { + const complete = + typeof paths[paths.length - 1] === "boolean" + ? (paths.pop() as boolean) + : false; + + let joinedPath = paths.join("/").replace(/\/{2,}/g, "/"); + + if (complete && !/^https?:\/\//.test(joinedPath)) { + joinedPath = `https://${joinedPath}`; + } + + return joinedPath; +} + export {clsx, twMerge} \ No newline at end of file