Skip to content

Commit 8b26751

Browse files
programming-with-iaprogramming-with-ia
committed
bing | footer | more
1 parent a479681 commit 8b26751

File tree

7 files changed

+59
-24
lines changed

7 files changed

+59
-24
lines changed

‎app/public/BingSiteAuth.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<?xml version="1.0"?>
2+
<users>
3+
<user>50D575324B09D3BA4B8E40A743D0BD10</user>
4+
</users>

‎app/src/app/layout.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { joinPaths } from "@/lib/utils";
1010
import { siteConfig } from "@/lib/site-config";
1111
import { RiTwitterXLine, RiGithubFill } from "react-icons/ri";
1212
import { TbMail } from "react-icons/tb";
13+
import DisplayContainer from "@/components/display-container";
1314

1415
const inter = Inter({ subsets: ["latin"] });
1516

@@ -44,6 +45,12 @@ export const metadata: Metadata = {
4445
alternates: {
4546
canonical: { url: siteConfig.url, title: "Home" },
4647
languages: { en: [{ url: siteConfig.url, title: "Home" }] },
48+
types: {
49+
"Home" : siteConfig.url,
50+
"NPM Package": siteConfig.npm,
51+
"GitHub Repository": siteConfig.github,
52+
"Docs": siteConfig.docs
53+
}
4754
},
4855
openGraph: {
4956
type: "website",
@@ -111,7 +118,7 @@ export default async function RootLayout({
111118
<ThemeEditor />
112119
</main>
113120
<GithubCorner />
114-
<footer className="py-8 flex md:flex-row flex-col items-center md:px-8 px-4 lg:px-12 max-w-[1700px] mx-auto bg-accent text-accent-foreground mt-10 md:mt-16">
121+
<DisplayContainer As="footer" waveColors={{c1: "fill-accent"}} bottom className="pb-8 pt-1 flex md:flex-row flex-col items-center md:px-8 px-4 lg:px-12 max-w-[1700px] mx-auto bg-accent text-accent-foreground" containerClassName="mt-10 md:mt-16">
115122
{/* <Container> */}
116123
<p>Built with <span className="text-destructive-foreground font-extrabold text-red-500" title="love" aria-label="love" style={{fontFamily: '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>♥️</span> by <a href='https://github.com/programming-with-ia' className="underline underline-offset-1" target="_blank">immi</a></p>
117124
<div className="flex items-center mt-4 sm:mt-0 md:ml-auto">
@@ -129,7 +136,7 @@ export default async function RootLayout({
129136
))}
130137
</div>
131138
{/* </Container> */}
132-
</footer>
139+
</DisplayContainer>
133140
</ThemeProvider>
134141
</body>
135142
</html>

‎app/src/app/sitemap.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { siteConfig } from "@/lib/site-config";
2+
import { MetadataRoute } from "next";
3+
4+
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
5+
return [
6+
siteConfig.url,
7+
siteConfig.github,
8+
siteConfig.npm,
9+
siteConfig.docs,
10+
].map((url) => ({ url }));
11+
}

‎app/src/components/display-container.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import { cn } from "@/lib/utils";
1+
import { clsx, cn } from "@/lib/utils";
22
import React, { SVGProps } from "react";
33

4-
function DisplayContainer({ children, className }: { children: React.ReactNode, className?: string }) {
4+
function DisplayContainer({ children, className, bottom, As='div', containerClassName, waveColors }: { children: React.ReactNode, className?: string, bottom?:boolean, As?: keyof JSX.IntrinsicElements, containerClassName?:string, waveColors?: SVGWaveColors }) {
55
return (
6-
<div className=" drop-shadow-xl xl:w-4/5 mx-auto">
7-
<div className={cn("p-8 md:p-16 lg:p-24 w-[98.6%] bg-card mx-auto rounded-t-xl drop-shadow-lg relative -z-10 flex flex-col items-center", className)}>
6+
<As className={clsx("drop-shadow-xl xl:w-4/5 mx-auto flex relative group", bottom ? 'flex-col-reverse' : 'flex-col', containerClassName)}>
7+
<div className={cn("w-[98.6%] bg-card mx-auto drop-shadow-lg relative flex flex-col items-center -z-[1]", bottom ? 'rounded-b-xl':'rounded-t-xl', className)}>
88
{children}
99
</div>
10-
<SVGComponent className="-mt-1" />
11-
</div>
10+
<SVGWave className={clsx(bottom ?"-mb-1 -scale-y-100 -scale-x-100":"-mt-1")} {...waveColors} />
11+
</As>
1212
);
1313
}
1414

15-
const SVGComponent = (props: SVGProps<SVGSVGElement>) => (
15+
type SVGWaveColors = {c1?:string, c2?:string, c3?:string}
16+
17+
export const SVGWave = ({c1, c2, c3, ...props}: SVGProps<SVGSVGElement> & SVGWaveColors) => (
1618
<svg
1719
id="Layer_1"
1820
data-name="Layer 1"
@@ -23,22 +25,22 @@ const SVGComponent = (props: SVGProps<SVGSVGElement>) => (
2325
>
2426
<path
2527
d="m1062.77,24.16s-43.27,280.48-802.45-.54l802.45.54Z"
26-
className="fill-primary drop-shadow-xl"
28+
className={c3 || "fill-primary drop-shadow-xl"}
2729
fillRule="evenodd"
2830
strokeMiterlimit={10}
2931
strokeWidth={1.73}
3032
/>
3133
<path
3234
d="m1444.65,112.37s-282.25,85.09-532.85-45.77l-1.82-31.45L1438.4,4.55l6.24,107.82Z"
33-
className="fill-secondary drop-shadow-md"
35+
className={c2 || "fill-secondary drop-shadow-md"}
3436
fillRule="evenodd"
3537
strokeWidth={0}
3638
/>
3739
<path
3840
d="m1447,136.18V0H0v71.23h0c0,12.62,8.46,23.69,20.65,27,388.24,105.43,592.19,42.39,769.5-2.3,180.93-45.61,334.11-84.22,627.06,58.08,13.44,6.53,29.8-2.88,29.8-17.82Z"
3941
fillRule="evenodd"
4042
// strokeWidth={0}
41-
className="fill-card drop-shadow-xl"
43+
className={c1 || "fill-card drop-shadow-xl"}
4244
/>
4345
</svg>
4446
);

‎app/src/components/pages/home/display.tsx

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import { IoLogoGithub } from "react-icons/io";
44
import { CgNpm } from "react-icons/cg";
55
import DisplayContainer from "@/components/display-container";
66
import { siteConfig } from "@/lib/site-config";
7+
import { ChevronRight } from "lucide-react";
78

89
function Display() {
910
return (
10-
<DisplayContainer className="text-center gap-1">
11+
<DisplayContainer className="text-center gap-1 p-8 md:p-16 lg:p-24">
1112
<Heading size="xl" className={"primaryText font-bold"}>
1213
{siteConfig.name}
1314
</Heading>
@@ -19,16 +20,24 @@ function Display() {
1920
the process of managing and customizing theme colors in Shadcn-based
2021
projects
2122
</p>
22-
<div className="mt-10 flex flex-wrap md:gap-x-6 gap-3 justify-center">
23-
<Button asChild className="w-32 gap-1 rounded-xl" variant={"default"}>
24-
<a target="_blank" href={siteConfig.github}>
25-
<IoLogoGithub size={22} /> Github
26-
</a>
27-
</Button>
28-
<Button asChild className="w-32 gap-1 rounded-xl" variant={"default"}>
29-
<a target="_blank" href={siteConfig.npm}>
30-
<CgNpm size={22} />
31-
Npm
23+
<div className="mt-10 flex flex-wrap md:gap-x-1 gap-3 justify-center">
24+
<div className="absolute top-2 right-2 hidden md:inline-flex gap-2 opacity-0 transition-opacity group-hover:opacity-70 hover:!opacity-100">
25+
26+
<Button asChild className="rounded-xl" variant={"outline"} size={"icon"}>
27+
<a target="_blank" href={siteConfig.github}>
28+
<IoLogoGithub size={20} />
29+
</a>
30+
</Button>
31+
<Button asChild className="rounded-xl" variant={"outline"} size={"icon"}>
32+
<a target="_blank" href={siteConfig.npm}>
33+
<CgNpm size={20} />
34+
</a>
35+
</Button>
36+
</div>
37+
<Button asChild className="w-32 gap-1 rounded-xl group/docs" variant={"default"}>
38+
<a target="_blank" href={siteConfig.docs}>
39+
Get Started
40+
<ChevronRight className="group-hover/docs:translate-x-2 transition" size={22} />
3241
</a>
3342
</Button>
3443
</div>

‎app/src/components/theme-editor.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,11 @@ function ThemeEditor() {
2626
aria-label={(isOpen? 'Close': "Open")+' Editor'}
2727
variant={isOpen ? "secondary" : "default"}
2828
className={clsx(
29-
"rounded-full px-3 py-3 fixed bottom-2 right-2 border shadow-md drop-shadow-sm z-20", !isOpen && 'opacity-70 hover:opacity-100 animate-bounce hover:animate-none'
29+
"rounded-full px-3 py-3 fixed transition-all duration-300 border shadow-md drop-shadow-sm z-20 group overflow-hidden bottom-2 left-1/2 -translate-x-1/2", isOpen ? 'opacity-0': ''
3030
)}
3131
>
3232
<ColorPalette size={24} />
33+
<span className="group-hover:w-40 group-hover:opacity-100 w-0 opacity-0 transition-all duration-300">Shadcn Theme Editor</span>
3334
</Button>
3435
</SheetTrigger>
3536
<SheetContent

‎app/src/lib/site-config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export const siteConfig = {
5151
},
5252
github: "https://github.com/programming-with-ia/shadcn-theme-editor/",
5353
npm: "https://www.npmjs.com/package/shadcn-theme-editor",
54+
docs: "https://github.com/programming-with-ia/shadcn-theme-editor#readme",
5455
images: [
5556
{ width: 1200, height: 630 },
5657
{ width: 1024, height: 512 },

0 commit comments

Comments
 (0)