@tscircuit/fake-snippets 0.0.70 → 0.0.71

package/fake-snippets-api/routes/api/accounts/get.ts

@@ -1,15 +1,28 @@
 import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
 import { z } from "zod"
-import { accountSchema } from "fake-snippets-api/lib/db/schema"
+import { Account, accountSchema } from "fake-snippets-api/lib/db/schema"
 
 export default withRouteSpec({
-  methods: ["GET"],
+  methods: ["GET", "POST"],
   auth: "session",
+  jsonBody: z.object({
+    github_username: z.string(),
+  }),
   jsonResponse: z.object({
     account: accountSchema,
   }),
 })(async (req, ctx) => {
-  const account = ctx.db.getAccount(ctx.auth.account_id)
+  let account: Account | undefined
+
+  if (req.method === "POST") {
+    const { github_username } = req.jsonBody
+    account = ctx.db.accounts.find(
+      (acc: Account) => acc.github_username === github_username,
+    )
+  } else {
+    account = ctx.db.getAccount(ctx.auth.account_id)
+  }
+
   if (!account) {
     return ctx.error(404, {
       error_code: "account_not_found",

package/index.html

@@ -27,6 +27,9 @@
   <link rel="canonical" href="https://tscircuit.com" />
   <!-- SEO_END -->
 
+  <!-- SSR_START -->
+  <!-- SSR_END -->
+
   <style>
     /* Loader Styles */
     .loading-overlay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "type": "module",
   "repository": {
     "type": "git",

package/src/ContextProviders.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react"
 import { useGlobalStore } from "./hooks/use-global-store"
 import { posthog } from "./lib/posthog"
 import { Toaster } from "react-hot-toast"
+import { populateQueryCacheWithSSRData } from "./lib/populate-query-cache-with-ssr-data"
 
 const staffGithubUsernames = [
   "imrishabh18",
@@ -13,6 +14,7 @@ const staffGithubUsernames = [
 ]
 
 const queryClient = new QueryClient()
+populateQueryCacheWithSSRData(queryClient)
 
 const isInternalGithubUser = (githubUsername?: string | null) => {
   if (!githubUsername) return false

package/src/components/HeaderLogin.tsx

@@ -23,7 +23,7 @@ export const HeaderLogin = () => {
     return (
       <div className="flex items-center md:space-x-2 justify-end">
         <Button onClick={() => signIn()} variant="ghost">
-          Log in
+          Log In
         </Button>
         <Button onClick={() => signIn()}>Get Started</Button>
       </div>
@@ -68,7 +68,7 @@ export const HeaderLogin = () => {
         </DropdownMenuItem>
         <DropdownMenuItem asChild onClick={() => setSession(null)}>
           <a href="/" className="cursor-pointer">
-            Sign out
+            Sign Out
           </a>
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/lib/populate-query-cache-with-ssr-data.ts

@@ -0,0 +1,52 @@
+import type { QueryClient } from "react-query"
+
+/**
+ * Populates React Query cache with SSR data to prevent unnecessary API calls
+ * on initial page load. Should be called after QueryClient creation.
+ */
+export function populateQueryCacheWithSSRData(queryClient: QueryClient) {
+  if (typeof window === "undefined") return
+
+  const ssrPackage = (window as any).SSR_PACKAGE
+  const ssrPackageRelease = (window as any).SSR_PACKAGE_RELEASE
+  const ssrPackageFiles = (window as any).SSR_PACKAGE_FILES
+
+  if (ssrPackage) {
+    // Cache package data with all possible query keys
+    queryClient.setQueryData(["package", ssrPackage.package_id], ssrPackage)
+    queryClient.setQueryData(["package", ssrPackage.name], ssrPackage)
+    queryClient.setQueryData(["packages", ssrPackage.package_id], ssrPackage)
+  }
+
+  if (ssrPackageRelease && ssrPackage) {
+    // Cache package release with various query patterns
+    queryClient.setQueryData(
+      [
+        "packageRelease",
+        { package_id: ssrPackage.package_id, is_latest: true },
+      ],
+      ssrPackageRelease,
+    )
+    queryClient.setQueryData(
+      ["packageRelease", { package_name: ssrPackage.name, is_latest: true }],
+      ssrPackageRelease,
+    )
+    if (ssrPackageRelease.package_release_id) {
+      queryClient.setQueryData(
+        [
+          "packageRelease",
+          { package_release_id: ssrPackageRelease.package_release_id },
+        ],
+        ssrPackageRelease,
+      )
+    }
+
+    // Cache package files if available
+    if (ssrPackageFiles && ssrPackageRelease.package_release_id) {
+      queryClient.setQueryData(
+        ["packageFiles", ssrPackageRelease.package_release_id],
+        ssrPackageFiles,
+      )
+    }
+  }
+}

package/src/pages/dashboard.tsx

@@ -94,10 +94,10 @@ export const DashboardPage = () => {
                 </h2>
 
                 <p className="text-gray-600 mb-6 text-center max-w-md text-sm sm:text-base">
-                  Log in to access your dashboard and manage your snippets.
+                  Log in to access your dashboard and manage your packages.
                 </p>
                 <Button onClick={() => signIn()} variant="outline">
-                  Log in
+                  Log In
                 </Button>
               </div>
             ) : (

package/src/pages/landing.tsx

@@ -60,16 +60,27 @@ export function LandingPage() {
                     </p>
                   </div>
                   <div className="flex flex-col items-center gap-2 min-[500px]:flex-row">
-                    <a href="https://docs.tscircuit.com">
-                      <Button size="lg" aria-label="Get started with TSCircuit">
+                    <a
+                      href="https://docs.tscircuit.com"
+                      className="w-[70vw] min-[500px]:w-auto"
+                    >
+                      <Button
+                        size="lg"
+                        aria-label="Get started with TSCircuit"
+                        className="w-full min-[500px]:w-auto"
+                      >
                         Get Started
                       </Button>
                     </a>
-                    <PrefetchPageLink href="/quickstart">
+                    <PrefetchPageLink
+                      href="/seveibar/usb-c-flashlight#3d"
+                      className="w-[70vw] min-[500px]:w-auto"
+                    >
                       <Button
                         size="lg"
                         variant="outline"
                         aria-label="Open online example of TSCircuit"
+                        className="w-full min-[500px]:w-auto"
                       >
                         Open Online Example
                       </Button>