franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update database option to sqlite and replace framer-motion with motion

Browse Source
This commit is contained in:
fgrreloaded
2025-02-18 11:34:49 +05:30
parent 60e721142a
commit f76e82cff7
8 changed files with 59 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/package.json
View File

@@ -12,11 +12,11 @@
"dependencies": { "dependencies": {
"@xyflow/react": "^12.4.3", "@xyflow/react": "^12.4.3",
"babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216", "babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216",
"framer-motion": "^12.4.3",
"fumadocs-core": "15.0.6", "fumadocs-core": "15.0.6",
"fumadocs-mdx": "11.5.3", "fumadocs-mdx": "11.5.3",
"fumadocs-ui": "15.0.6", "fumadocs-ui": "15.0.6",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
"motion": "^12.4.3",
"next": "15.1.6", "next": "15.1.6",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0"

2
apps/web/src/app/(home)/_components/CustomizableSection.tsx
View File

@@ -1,4 +1,4 @@
import { motion } from "framer-motion"; import { motion } from "motion/react";
import CustomizableStack from "./CustomizableStack"; import CustomizableStack from "./CustomizableStack";
export default function CustomizableSection() { export default function CustomizableSection() {

6
apps/web/src/app/(home)/_components/CustomizableStack.tsx
View File

@@ -44,7 +44,7 @@ const CustomizableStack = () => {
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const [activeNodes, setActiveNodes] = useState({ const [activeNodes, setActiveNodes] = useState({
backend: "hono", backend: "hono",
database: "libsql", database: "sqlite",
orm: "drizzle", orm: "drizzle",
auth: "better-auth", auth: "better-auth",
}); });
@@ -140,9 +140,9 @@ const CustomizableStack = () => {
const generateCommand = useCallback(() => { const generateCommand = useCallback(() => {
const flags: string[] = ["-y"]; const flags: string[] = ["-y"];
if (activeNodes.database !== "libsql") { if (activeNodes.database !== "sqlite") {
flags.splice(flags.indexOf("-y"), 1); flags.splice(flags.indexOf("-y"), 1);
flags.push(`--database ${activeNodes.database}`); flags.push(`--${activeNodes.database}`);
} }
if (activeNodes.auth !== "better-auth") { if (activeNodes.auth !== "better-auth") {

17
apps/web/src/app/(home)/_components/Icons.tsx
View File

@@ -120,6 +120,23 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
/> />
</svg> </svg>
); );
case "github":
return (
<svg
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 97.63 96.03"
>
<title>Github</title>
<path
fill="#f0f6fc"
fillRule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a47 47 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0"
clipRule="evenodd"
/>
</svg>
);
default: default:
return null; return null;
} }

74
apps/web/src/app/(home)/_components/Navbar.tsx
View File

@@ -1,8 +1,10 @@
"use client"; "use client";
import Link from "next/link";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons";
const Navbar = () => { const Navbar = () => {
const [activeLink, setActiveLink] = useState("about"); const [activeLink, setActiveLink] = useState("home");
const [bgStyles, setBgStyles] = useState({}); const [bgStyles, setBgStyles] = useState({});
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({}); const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
@@ -56,57 +58,47 @@ const Navbar = () => {
<div <div
className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${ className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
scrolled ? "w-[480px]" : "w-[350px]" scrolled ? "w-[420px]" : "w-[280px]"
}`} }`}
> >
<div <div
className="absolute transition-all duration-300 ease-in-out bg-white/5 border border-white/10 rounded-full py-2" className="absolute transition-all duration-300 ease-in-out bg-white/5 border border-white/10 rounded-full py-2"
style={bgStyles} style={bgStyles}
/> />
{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */} <Link
<a href="/"
href="#about"
ref={(ref) => { ref={(ref) => {
linkRefs.current.about = ref; linkRefs.current.home = ref;
}} }}
onClick={() => setActiveLink("about")} onMouseOver={() => setActiveLink("home")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
> >
About Home
</a> </Link>
{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */} <Link
<a href="https://www.github.com/better-t-stack/create-better-t-stack"
href="#careers" target="_blank"
ref={(ref) => { ref={(ref) => {
linkRefs.current.careers = ref; linkRefs.current.github = ref;
}} }}
onClick={() => setActiveLink("careers")} onMouseOver={() => setActiveLink("github")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" onMouseLeave={() => setActiveLink("home")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
> >
Careers <PackageIcon pm="github" className="w-4 h-4" /> Github
</a> </Link>
{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */} <Link
<a href="https://www.npmjs.com/package/create-better-t-stack"
href="#blog" target="_blank"
ref={(ref) => { ref={(ref) => {
linkRefs.current.blog = ref; linkRefs.current.npm = ref;
}} }}
onClick={() => setActiveLink("blog")} onMouseOver={() => setActiveLink("npm")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" onMouseLeave={() => setActiveLink("home")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
> >
Blog <PackageIcon pm="npm" className="w-4 h-4 rounded-full" /> Npm
</a> </Link>
{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}
<a
href="#changelog"
ref={(ref) => {
linkRefs.current.changelog = ref;
}}
onClick={() => setActiveLink("changelog")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
>
Changelog
</a>
<span <span
className="text-gray-500 transition-all duration-300" className="text-gray-500 transition-all duration-300"
style={{ style={{
@@ -116,13 +108,13 @@ const Navbar = () => {
> >
| |
</span> </span>
{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */} <Link
<a href="/docs"
href="#documentation"
ref={(ref) => { ref={(ref) => {
linkRefs.current.documentation = ref; linkRefs.current.documentation = ref;
}} }}
onClick={() => setActiveLink("documentation")} onMouseOver={() => setActiveLink("documentation")}
onMouseLeave={() => setActiveLink("home")}
style={{ style={{
transform: scrolled ? "translateY(0)" : "translateY(-8px)", transform: scrolled ? "translateY(0)" : "translateY(-8px)",
}} }}
@@ -133,7 +125,7 @@ const Navbar = () => {
}`} }`}
> >
Documentation Documentation
</a> </Link>
</div> </div>
<div <div

6
apps/web/src/app/(home)/_components/TechSelector.tsx
View File

@@ -5,12 +5,8 @@ type TechOption = {
}; };
const techOptions: Record<string, TechOption[]> = { const techOptions: Record<string, TechOption[]> = {
backend: [
{ id: "hono", label: "Hono", category: "backend" },
{ id: "express", label: "Express", category: "backend" },
],
database: [ database: [
{ id: "libsql", label: "libSQL", category: "database" }, { id: "sqlite", label: "Sqlite", category: "database" },
{ id: "postgres", label: "PostgreSQL", category: "database" }, { id: "postgres", label: "PostgreSQL", category: "database" },
], ],
orm: [ orm: [

13
apps/web/src/lib/constant.ts
View File

@@ -170,19 +170,6 @@ export const initialNodes: TechNode[] = [
group: "backend", group: "backend",
}, },
}, },
{
id: "express",
type: "techNode",
position: { x: 897, y: 389 },
data: {
label: "Express",
category: "backend",
description: "Fast, unopinionated web framework",
isDefault: false,
isActive: false,
group: "backend",
},
},
{ {
id: "libsql", id: "libsql",
type: "techNode", type: "techNode",

4
bun.lock
View File

@@ -41,11 +41,11 @@
"dependencies": { "dependencies": {
"@xyflow/react": "^12.4.3", "@xyflow/react": "^12.4.3",
"babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216", "babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216",
"framer-motion": "^12.4.3",
"fumadocs-core": "15.0.6", "fumadocs-core": "15.0.6",
"fumadocs-mdx": "11.5.3", "fumadocs-mdx": "11.5.3",
"fumadocs-ui": "15.0.6", "fumadocs-ui": "15.0.6",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
"motion": "^12.4.3",
"next": "15.1.6", "next": "15.1.6",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
@@ -1233,6 +1233,8 @@
"minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="], "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
"motion": ["motion@12.4.3", "", { "dependencies": { "framer-motion": "^12.4.3", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-KeoMpKFEVdofN0v/z1g3tm4cMtk1WAHQ5Pg7M1ElxeRLA8cBSrkmSCJ9q6hLo7spp/n906h2kmeDNvBkysaxcQ=="],
"motion-dom": ["motion-dom@12.0.0", "", { "dependencies": { "motion-utils": "^12.0.0" } }, "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg=="], "motion-dom": ["motion-dom@12.0.0", "", { "dependencies": { "motion-utils": "^12.0.0" } }, "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg=="],
"motion-utils": ["motion-utils@12.0.0", "", {}, "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="], "motion-utils": ["motion-utils@12.0.0", "", {}, "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="],