create-vitnode-app 1.2.0-canary.9 → 2.0.0-canary.10

package/copy-of-vitnode-app/root/.gitignore_template

@@ -0,0 +1,41 @@
+# Dependencies
+node_modules
+
+# Turbo
+.turbo
+
+# Test & Build
+/coverage
+/.output/
+/.nitro/
+/.vite/
+/.tanstack/
+/out/
+/build
+*.tsbuildinfo
+
+# Generated by the VitNode Vite plugin and the TanStack route generator
+src/*.gen.ts
+
+# Misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Others
+.vercel
+.env*.local
+
+# Local storage adapter uploads
+/public/uploads

package/copy-of-vitnode-app/root/global.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="use-intl" />
+
+import core from '@vitnode/core/locales/en.json' with { type: 'json' }
+
+
+declare module 'use-intl' {
+  interface AppConfig {
+    Messages: typeof core
+  }
+}

package/copy-of-vitnode-app/root/src/components/admin-shell.tsx

@@ -0,0 +1,21 @@
+import { AdminShellContent } from "@vitnode/core/tanstack/admin";
+import { useAppNavigate } from "@vitnode/core/tanstack/auth";
+import { LanguageSwitcher } from "@vitnode/core/tanstack/layout";
+
+import { adminNav } from "@/admin-nav.gen";
+
+export const AdminShell = ({ children }: { children: React.ReactNode }) => {
+  const navigate = useAppNavigate();
+
+  return (
+    <AdminShellContent
+      languageSwitcher={<LanguageSwitcher />}
+      nav={adminNav}
+      onNavigate={href => {
+        void navigate(href);
+      }}
+    >
+      {children}
+    </AdminShellContent>
+  );
+};

package/copy-of-vitnode-app/root/src/components/main-footer.tsx

@@ -0,0 +1,44 @@
+import {
+  VITNODE_DOCS_URL,
+  VITNODE_SPONSOR_URL,
+  VITNODE_WEBSITE_URL,
+} from "@vitnode/core/lib/docs-links";
+import { Heart } from "lucide-react";
+
+export const MainFooter = () => (
+  <footer className="border-t">
+    <div className="text-muted-foreground container mx-auto flex flex-col items-center justify-between gap-3 px-4 py-6 text-sm sm:flex-row">
+      <p>
+        Powered by{" "}
+        <a
+          className="text-foreground font-medium underline-offset-4 hover:underline"
+          href={VITNODE_WEBSITE_URL}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          VitNode
+        </a>
+      </p>
+
+      <nav aria-label="VitNode" className="flex items-center gap-5">
+        <a
+          className="hover:text-foreground transition-colors"
+          href={VITNODE_DOCS_URL}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Docs
+        </a>
+        <a
+          className="hover:text-foreground flex items-center gap-1.5 transition-colors"
+          href={VITNODE_SPONSOR_URL}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Heart className="size-3.5" />
+          Sponsor
+        </a>
+      </nav>
+    </div>
+  </footer>
+);

package/copy-of-vitnode-app/root/src/components/main-header.tsx

@@ -0,0 +1,4 @@
+import { MainHeader as MainHeaderContent } from "@vitnode/core/tanstack/layout";
+
+
+export const MainHeader = () => <MainHeaderContent />;

package/copy-of-vitnode-app/root/src/lib/i18n.ts

@@ -0,0 +1,37 @@
+/**
+ * The one bootstrap adapter this application still owns.
+ *
+ * Auth, the AdminCP session and the AdminCP user search all reach the API
+ * through `@vitnode/core`'s own default transports now, so none of them needs a
+ * module here. Messages cannot work that way, for two reasons that only hold
+ * in app source:
+ *
+ * - `loadIntlMessages` reads *this* application's locale barrels, which are the
+ *   app's own files plus whichever packages it installed. A package cannot know
+ *   them.
+ * - `createServerFn` is extracted by the TanStack Start compiler, and the
+ *   compiler only runs over the application's source. `@vitnode/core` ships
+ *   precompiled, so a server function declared there would never have its
+ *   handler extracted and would resolve to `undefined` at runtime.
+ *
+ * `configureIntl` is where the two meet: the app hands core the fetch and its
+ * configured languages, and everything else in the package reads them back
+ * through `getIntlRuntime()`.
+ */
+import { createServerFn } from "@tanstack/react-start";
+import { configureIntl, validateIntlInput } from "@vitnode/core/tanstack/i18n";
+import { IntlProvider } from "use-intl";
+
+import { loadIntlMessages } from "@/server/messages.server";
+import { vitNodeConfig } from "@/vitnode.config";
+
+export const getIntlMessages = createServerFn()
+  .validator(validateIntlInput)
+  .handler(async ({ data }) => await loadIntlMessages(data));
+
+export const { localeRouting } = configureIntl({
+  fetchMessages: async input => await getIntlMessages({ data: input }),
+
+  hostIntlProvider: IntlProvider,
+  i18n: vitNodeConfig.i18n,
+});

package/copy-of-vitnode-app/root/src/locales/app.ts

@@ -0,0 +1,4 @@
+import type { AppMessagesMap } from "@vitnode/core/lib/i18n/types";
+
+
+export const appMessages: AppMessagesMap = {};

package/copy-of-vitnode-app/root/src/locales/packages.ts

@@ -0,0 +1,10 @@
+import type { LocaleMessagesMap } from "@vitnode/core/lib/i18n/types";
+
+import { CONFIG_PLUGIN as CORE } from "@vitnode/core/config";
+
+
+export const packageMessages: Record<string, LocaleMessagesMap> = {
+  [CORE.pluginId]: {
+    en: async () => await import("@vitnode/core/locales/en.json"),
+  },
+};

package/copy-of-vitnode-app/root/src/router.tsx

@@ -0,0 +1,71 @@
+import type { AnyRouter } from "@tanstack/react-router";
+
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import { createVitNodeQueryClient } from "@vitnode/core/lib/query-client";
+import { createLocaleRewrite } from "@vitnode/core/tanstack/i18n";
+import { pageHead } from "@vitnode/core/tanstack/metadata";
+import { RoutePendingSpinner } from "@vitnode/core/tanstack/pending";
+import {
+  pluginRouteSpecs,
+  withPluginRoutes,
+} from "@vitnode/core/tanstack/plugin-routes";
+import {
+  withCoreAdminRoutes,
+  withCoreMainRoutes,
+  withCoreRootRoutes,
+} from "@vitnode/core/tanstack/routes";
+
+import { localeRouting } from "./lib/i18n";
+import { pluginRouteSources } from "./plugin-routes.gen";
+import { Route as adminShellRoute } from "./routes/_admin";
+import { Route as mainShellRoute } from "./routes/_main";
+import { routeTree as fileRouteTree } from "./routeTree.gen";
+
+const loadContentRegistry = async () =>
+  (await import("./content-registry.gen")).contentRegistry;
+
+const routeTree = withCoreRootRoutes(
+  withCoreAdminRoutes(
+    withCoreMainRoutes(
+      withPluginRoutes(fileRouteTree, pluginRouteSpecs(pluginRouteSources), {
+        mountUnder: { admin: adminShellRoute, main: mainShellRoute },
+        pageHead,
+      }),
+      { localeRouting, mountUnder: mainShellRoute, pageHead },
+    ),
+    { loadContentRegistry, mountUnder: adminShellRoute, pageHead },
+  ),
+  { localeRouting, mountUnder: fileRouteTree, pageHead },
+);
+
+export function getRouter() {
+  const queryClient = createVitNodeQueryClient();
+
+  const holder: { current?: AnyRouter } = {};
+
+  const router = createTanStackRouter({
+    context: { queryClient },
+    defaultPendingComponent: RoutePendingSpinner,
+    defaultPendingMs: 150,
+    defaultPendingMinMs: 300,
+    defaultPreload: "intent",
+    defaultPreloadStaleTime: 0,
+    defaultStaleReloadMode: "blocking",
+    rewrite: createLocaleRewrite(() => holder.current),
+    routeTree,
+    scrollRestoration: true,
+  });
+
+  holder.current = router;
+
+  setupRouterSsrQueryIntegration({ queryClient, router });
+
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/copy-of-vitnode-app/root/src/routes/__root.tsx

@@ -0,0 +1,109 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+import {
+  createRootRouteWithContext,
+  HeadContent,
+  Outlet,
+  Scripts,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { ThemeScript } from "@vitnode/core/components/theme-script";
+import {
+  intlQueryOptions,
+  publicPathnameOf,
+  resolveLocale,
+  useLocale,
+} from "@vitnode/core/tanstack/i18n";
+import { VitNodeRootProviders } from "@vitnode/core/tanstack/layout";
+
+import type { Locale } from "@/vitnode.config";
+
+import { vitNodeConfig } from "@/vitnode.config";
+
+import appCss from "../styles.css?url";
+
+const { debug, editor, i18n, metadata, theme } = vitNodeConfig;
+
+export interface RootRouterContext {
+  queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<RootRouterContext>()({
+  beforeLoad: ({ location }) => ({
+    locale: resolveLocale<Locale>(publicPathnameOf(location)),
+  }),
+  component: RootComponent,
+  head: () => ({
+    links: [
+      { href: appCss, rel: "stylesheet" },
+
+      {
+        href: "/favicon.ico",
+        rel: "icon",
+        sizes: "32x32",
+        type: "image/x-icon",
+      },
+    ],
+    meta: [
+      { charSet: "utf-8" },
+      { content: "width=device-width, initial-scale=1", name: "viewport" },
+      { title: metadata.title },
+    ],
+  }),
+  loader: async ({ context }) => {
+    await context.queryClient.query({
+      ...intlQueryOptions({ locale: context.locale }),
+      staleTime: "static",
+    });
+  },
+  shellComponent: RootDocument,
+});
+
+function RootComponent() {
+  return (
+    <VitNodeRootProviders
+      config={{ debug, editor, locales: i18n.locales, theme }}
+    >
+      <Outlet />
+    </VitNodeRootProviders>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  const locale = useLocale();
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        <HeadContent />
+        <ThemeScript {...theme} />
+      </head>
+
+      <body suppressHydrationWarning>
+        {children}
+
+        {import.meta.env.DEV ? (
+          <TanStackDevtools
+            config={{
+              position: "bottom-right",
+            }}
+            plugins={[
+              {
+                name: "TanStack Router",
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              {
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />,
+              },
+            ]}
+          />
+        ) : null}
+
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/copy-of-vitnode-app/root/src/routes/_admin/admin.core.index.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { adminBreadcrumb } from "@vitnode/core/tanstack/admin";
+import {
+  AdminDashboardRouteContent,
+  loadAdminDashboardRoute,
+} from "@vitnode/core/tanstack/admin/dashboard";
+
+
+export const Route = createFileRoute("/_admin/admin/core/")({
+  loader: async ({ context }) => await loadAdminDashboardRoute(context),
+  component: AdminDashboardRoute,
+  
+  staticData: {
+    breadcrumb: adminBreadcrumb({ segments: ["core"] }),
+  },
+});
+
+function AdminDashboardRoute() {
+  return <AdminDashboardRouteContent {...Route.useLoaderData()} />;
+}

package/copy-of-vitnode-app/root/src/routes/_admin.tsx

@@ -0,0 +1,65 @@
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import {
+  ADMIN_ENTRY_PATH,
+  adminReturnToFor,
+  canEnterAdmin,
+  ensureAdminAccess,
+  loadAdminMessages,
+  preloadAdminAccess,
+} from "@vitnode/core/tanstack/admin";
+import { pageHead } from "@vitnode/core/tanstack/metadata";
+
+import { AdminShell } from "@/components/admin-shell";
+
+export const Route = createFileRoute("/_admin")({
+  beforeLoad: async ({ context, location, preload }) => {
+    const access = preload
+      ? await preloadAdminAccess(context.queryClient)
+      : await ensureAdminAccess(context.queryClient);
+
+    if (!canEnterAdmin(access)) {
+      // TanStack Router's own control-flow signal: `redirect()` returns a typed
+      // redirect object that the router catches and turns into a navigation
+      // (or, during SSR, a 302). Throwing it is what stops the guard.
+      //
+      // `/admin` is a sibling leaf, not a child of this route, so this cannot
+      // loop: the sign-in page's own guard only redirects *away* on a granted
+      // session, and `sanitizeAdminReturnTo` rejects `/admin` as a target.
+      //
+      // Cast because `/admin` is not in this router's type table: it is
+      // `@vitnode/core`'s code-based route now, mounted by `withCoreRootRoutes`,
+      // and code-based routes are outside the generated tree's types. The
+      // *runtime* is unaffected, and `ADMIN_ENTRY_PATH` is the package's own
+      // constant - so the path and the sign-in route that serves it are still one
+      // fact in one place.
+      // eslint-disable-next-line @typescript-eslint/only-throw-error
+      throw redirect({
+        search: { returnTo: adminReturnToFor(location) },
+        to: ADMIN_ENTRY_PATH,
+      } as unknown as Parameters<typeof redirect>[0]);
+    }
+
+    // Merged into the context of everything below, so a child route reads
+    // `context.adminAccess` already narrowed to the granted half of the union.
+    // It is the same object the guard decided on, from the same cache entry, so
+    // a page cannot disagree with the guard that let it render.
+    return { adminAccess: access };
+  },
+
+  loader: async ({ context }) => {
+    const { adminNav } = await import("@/admin-nav.gen");
+
+    await loadAdminMessages({ ...context, namespaces: adminNav.namespaces });
+  },
+
+  head: () => pageHead({ robots: "noindex, nofollow" }),
+  component: AdminLayout,
+});
+
+function AdminLayout() {
+  return (
+    <AdminShell>
+      <Outlet />
+    </AdminShell>
+  );
+}

package/copy-of-vitnode-app/root/src/routes/_main/index.tsx

@@ -0,0 +1,196 @@
+import type { LucideIcon } from "lucide-react";
+
+import type { RegisteredRouter } from "@tanstack/react-router";
+
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { LogoVitNode } from "@vitnode/core/components/logo-vitnode";
+import { buttonVariants } from "@vitnode/core/components/ui/button";
+import {
+  VITNODE_DOCS_URL,
+  VITNODE_WEBSITE_URL,
+} from "@vitnode/core/lib/docs-links";
+import { useSessionQuery } from "@vitnode/core/tanstack/auth";
+import { pageHead } from "@vitnode/core/tanstack/metadata";
+import { cn } from "cn";
+import {
+  ArrowUpRight,
+  BookOpen,
+  Globe,
+  ShieldCheck,
+  UserRoundPlus,
+} from "lucide-react";
+
+const REGISTER_HREF = "/register";
+const ADMIN_HREF = "/admin";
+
+export const Route = createFileRoute("/_main/")({
+  head: () =>
+    pageHead({
+      description: "Your VitNode app is up and running.",
+      robots: "index, follow",
+      title: "Welcome",
+    }),
+  component: HomeRoute,
+});
+
+interface NextStep {
+  description: string;
+  external?: boolean;
+  href: string;
+  icon: LucideIcon;
+  title: string;
+}
+
+const registerStep: NextStep = {
+  description:
+    "Create a member account. On a fresh install the first one becomes the administrator.",
+  href: REGISTER_HREF,
+  icon: UserRoundPlus,
+  title: "Register",
+};
+
+const sharedSteps: NextStep[] = [
+  {
+    description: "Settings, members, roles, plugins and content live here.",
+    href: ADMIN_HREF,
+    icon: ShieldCheck,
+    title: "AdminCP",
+  },
+  {
+    description: "Configuration, routing, plugins and deployment guides.",
+    external: true,
+    href: VITNODE_DOCS_URL,
+    icon: BookOpen,
+    title: "Documentation",
+  },
+  {
+    description: "Project website, release notes and community links.",
+    external: true,
+    href: VITNODE_WEBSITE_URL,
+    icon: Globe,
+    title: "vitnode.com",
+  },
+];
+
+function HomeRoute() {
+  const { data } = useSessionQuery();
+  const user = data?.user ?? null;
+  const steps = user ? sharedSteps : [registerStep, ...sharedSteps];
+
+  return (
+    <div className="container mx-auto flex max-w-3xl flex-col gap-14 px-4 py-16 sm:py-24">
+      <section className="flex flex-col items-center gap-6 text-center">
+        <LogoVitNode className="size-14" idPrefix="welcome-logo" small />
+
+        <div className="flex flex-col gap-3">
+          <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+            Your VitNode app is running
+          </h1>
+
+          <p className="text-muted-foreground mx-auto max-w-xl text-lg leading-relaxed text-pretty">
+            {user
+              ? `You are signed in as ${user.name}. Open the AdminCP to configure the site.`
+              : "Create an account or sign in, then open the AdminCP to configure the site. On a fresh install the first registered member becomes the administrator."}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row">
+          {user ? null : (
+            <Link
+              className={cn(buttonVariants({ size: "lg" }), "px-5")}
+              to={REGISTER_HREF}
+            >
+              <UserRoundPlus />
+              Create an account
+            </Link>
+          )}
+
+          <Link
+            className={cn(
+              buttonVariants({
+                size: "lg",
+                variant: user ? "default" : "outline",
+              }),
+              "px-5",
+            )}
+            to={ADMIN_HREF}
+          >
+            <ShieldCheck />
+            Open AdminCP
+          </Link>
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Next steps
+        </h2>
+
+        <div
+          className={cn(
+            "grid gap-3",
+            steps.length === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2",
+          )}
+        >
+          {steps.map(step => (
+            <NextStepCard key={step.href} {...step} />
+          ))}
+        </div>
+      </section>
+
+      <p className="text-muted-foreground text-center text-sm text-pretty">
+        This page lives in <code>src/routes/_main/index.tsx</code>. Replace it
+        whenever you are ready.
+      </p>
+    </div>
+  );
+}
+
+function NextStepCard({
+  description,
+  external = false,
+  href,
+  icon: Icon,
+  title,
+}: NextStep) {
+  const className =
+    "group bg-card hover:bg-muted/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-col gap-3 rounded-xl border p-5 transition-colors outline-none focus-visible:ring-3";
+
+  const content = (
+    <>
+      <div className="flex items-center justify-between">
+        <span className="bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg">
+          <Icon className="size-4.5" />
+        </span>
+
+        <ArrowUpRight className="text-muted-foreground size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">{title}</span>
+        <span className="text-muted-foreground text-sm leading-relaxed text-pretty">
+          {description}
+        </span>
+      </div>
+    </>
+  );
+
+  if (external) {
+    return (
+      <a
+        className={className}
+        href={href}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <Link<RegisteredRouter, string, string> className={className} href={href}>
+      {content}
+    </Link>
+  );
+}

package/copy-of-vitnode-app/root/src/routes/_main.tsx

@@ -0,0 +1,29 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { MainBreadcrumb } from "@vitnode/core/tanstack/breadcrumb";
+import {
+  loadMainShell,
+  ThemeLayoutContent,
+} from "@vitnode/core/tanstack/layout";
+
+import { MainFooter } from "@/components/main-footer";
+import { MainHeader } from "@/components/main-header";
+
+export const Route = createFileRoute("/_main")({
+  loader: async ({ context }) => await loadMainShell(context),
+  component: MainLayout,
+});
+
+function MainLayout() {
+  return (
+    <div className="flex min-h-svh flex-col [&>main]:flex-1">
+      <ThemeLayoutContent
+        breadcrumb={<MainBreadcrumb />}
+        header={<MainHeader />}
+      >
+        <Outlet />
+      </ThemeLayoutContent>
+
+      <MainFooter />
+    </div>
+  );
+}

package/copy-of-vitnode-app/root/src/server/messages.server.ts

@@ -0,0 +1,8 @@
+import "@tanstack/react-start/server-only";
+import { createIntlMessagesLoader } from "@vitnode/core/tanstack/i18n/server";
+
+import { vitNodeServerConfig } from "@/vitnode.server.config";
+
+export type { IntlMessages } from "@vitnode/core/tanstack/i18n/server";
+
+export const loadIntlMessages = createIntlMessagesLoader(vitNodeServerConfig);

package/copy-of-vitnode-app/root/src/start.ts

@@ -0,0 +1,5 @@
+import { createVitNodeStart } from "@vitnode/core/tanstack/start";
+
+import { vitNodeConfig } from "@/vitnode.config";
+
+export const startInstance = createVitNodeStart({ config: vitNodeConfig });