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

add svelte

Browse Source
This commit is contained in:
Aman Varshney
2025-04-26 08:12:01 +05:30
parent 0e8af094da
commit 8adf020c2a
45 changed files with 1212 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/cli/templates/frontend/svelte/src/app.css Normal file
View File

@@ -0,0 +1,5 @@
@import 'tailwindcss';
body {
@apply bg-neutral-950 text-neutral-100;
}

13
apps/cli/templates/frontend/svelte/src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
apps/cli/templates/frontend/svelte/src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

40
apps/cli/templates/frontend/svelte/src/components/Header.svelte.hbs Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
{{#if auth}}
import UserMenu from './UserMenu.svelte';
{{/if}}
const links = [
{ to: "/", label: "Home" },
{{#if auth}}
{ to: "/dashboard", label: "Dashboard" },
{{/if}}
{{#if (includes examples "todo")}}
{ to: "/todos", label: "Todos" },
{{/if}}
{{#if (includes examples "ai")}}
{ to: "/ai", label: "AI Chat" },
{{/if}}
];
</script>
<div>
<div class="flex flex-row items-center justify-between px-4 py-2 md:px-6">
<nav class="flex gap-4 text-lg">
{#each links as link (link.to)}
<a
href={link.to}
class=""
>
{link.label}
</a>
{/each}
</nav>
<div class="flex items-center gap-2">
{{#if auth}}
<UserMenu />
{{/if}}
</div>
</div>
<hr class="border-neutral-800" />
</div>

1
apps/cli/templates/frontend/svelte/src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

19
apps/cli/templates/frontend/svelte/src/routes/+layout.svelte.hbs Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { QueryClientProvider } from '@tanstack/svelte-query';
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
import '../app.css';
import { queryClient } from '$lib/orpc';
import Header from '../components/Header.svelte';
let { children } = $props();
</script>
<QueryClientProvider client={queryClient}>
<div class="grid h-svh grid-rows-[auto_1fr]">
<Header />
<main class="overflow-y-auto">
{@render children()}
</main>
</div>
<SvelteQueryDevtools />
</QueryClientProvider>

44
apps/cli/templates/frontend/svelte/src/routes/+page.svelte.hbs Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts">
import { orpc } from "$lib/orpc";
import { createQuery } from "@tanstack/svelte-query";
const healthCheck = createQuery(orpc.healthCheck.queryOptions());
const TITLE_TEXT = `
██████╗ ███████╗████████╗████████╗███████╗██████╗
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
██║ ███████╗ ██║ ███████║██║ █████╔╝
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
`;
</script>
<div class="container mx-auto max-w-3xl px-4 py-2">
<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
<div class="grid gap-6">
<section class="rounded-lg border p-4">
<h2 class="mb-2 font-medium">API Status</h2>
<div class="flex items-center gap-2">
<div
class={`h-2 w-2 rounded-full ${$healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
></div>
<span class="text-muted-foreground text-sm">
{$healthCheck.isLoading
? "Checking..."
: $healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
</section>
</div>
</div>