Spaces:

Atmint
/

cpns

Runtime error

App Files Files Community

rogasper commited on May 26

Commit

81d2e69

1 Parent(s): d3f3189

feat: update SEO metadata and enhance Open Graph support across the web application. Add sitemap.xml for improved search engine indexing, introduce a script for compressing the Open Graph image, and refine user session handling in hooks. Update package.json for new compression script and bump Bun version.

Browse files

Files changed (10) hide show

apps/web/index.html +16 -9
apps/web/public/og_image.png +2 -2
apps/web/public/sitemap.xml +28 -0
apps/web/src/hooks/use-generation-jobs.ts +2 -2
apps/web/src/lib/site-seo.ts +44 -0
apps/web/src/routes/__root.tsx +14 -17
apps/web/src/routes/index.tsx +8 -11
apps/web/src/utils/trpc.ts +8 -1
package.json +2 -1
scripts/compress-og-image.ts +58 -0

apps/web/index.html CHANGED Viewed

@@ -3,19 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Labas — AI-powered multi-language test practice platform. Practice JLPT, TOPIK, TOAFL, and more with AI-generated questions." />
     <meta name="theme-color" content="#0c0c0c" />
-    <meta property="og:title" content="Labas — AI Exam Practice" />
-    <meta property="og:description" content="AI-powered multi-language test practice platform" />
-    <meta property="og:url" content="https://labas.rogasper.com" />
-    <meta property="og:image" content="https://labas.rogasper.com/og_image.png" />
     <meta property="og:type" content="website" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Labas — AI Exam Practice" />
-    <meta name="twitter:description" content="AI-powered multi-language test practice platform" />
     <meta name="twitter:image" content="https://labas.rogasper.com/og_image.png" />
-    <link rel="canonical" href="https://labas.rogasper.com" />
-    <title>labas</title>
   </head>
   <body>

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." />
     <meta name="theme-color" content="#0c0c0c" />
+    <meta property="og:title" content="Labas — AI-Powered Exam Practice Platform" />
+    <meta property="og:description" content="Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." />
+    <meta property="og:url" content="https://labas.rogasper.com/" />
     <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://labas.rogasper.com/og_image.png" />
+    <meta property="og:image:secure_url" content="https://labas.rogasper.com/og_image.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="Labas — platform latihan ujian bahasa dengan AI Generator dan simulasi tes" />
     <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Labas — AI-Powered Exam Practice Platform" />
+    <meta name="twitter:description" content="Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." />
     <meta name="twitter:image" content="https://labas.rogasper.com/og_image.png" />
+    <meta name="twitter:image:alt" content="Labas — platform latihan ujian bahasa dengan AI Generator dan simulasi tes" />
+    <meta name="robots" content="index, follow" />
+    <link rel="canonical" href="https://labas.rogasper.com/" />
+    <title>Labas — AI-Powered Exam Practice Platform</title>
   </head>
   <body>

apps/web/public/og_image.png CHANGED Viewed

Git LFS Details

SHA256: 59c312288ab9c3d5e5a2f0f301e40704816d1c139606ff8b0aa462de319aa9ea
Pointer size: 132 Bytes
Size of remote file: 1.75 MB

Git LFS Details

SHA256: 485a28961923c2e52527589ae19876071c1ed6da648b919f7af0d9a9fd212720
Pointer size: 131 Bytes
Size of remote file: 175 kB

apps/web/public/sitemap.xml ADDED Viewed

	@@ -0,0 +1,28 @@

+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://labas.rogasper.com/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://labas.rogasper.com/login</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+  <url>
+    <loc>https://labas.rogasper.com/bank</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://labas.rogasper.com/packages</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://labas.rogasper.com/leaderboard</loc>
+    <changefreq>daily</changefreq>
+    <priority>0.6</priority>
+  </url>
+</urlset>

apps/web/src/hooks/use-generation-jobs.ts CHANGED Viewed

@@ -10,8 +10,8 @@ import type { GenerationResult } from "@labas/ai";
 export type { ActiveJob, CompletedResult } from "./use-job-shared";
 export function useGenerationJobs() {
-  const { data: session } = authClient.useSession();
-  const isAuthenticated = !!session;
   const {
     jobIds,

 export type { ActiveJob, CompletedResult } from "./use-job-shared";
 export function useGenerationJobs() {
+  const { data: session, isPending: isSessionPending } = authClient.useSession();
+  const isAuthenticated = Boolean(session?.user?.id) && !isSessionPending;
   const {
     jobIds,

apps/web/src/lib/site-seo.ts ADDED Viewed

	@@ -0,0 +1,44 @@

+export const SITE_URL = "https://labas.rogasper.com";
+export const OG_IMAGE_PATH = "/og_image.png";
+export const OG_IMAGE_URL = `${SITE_URL}${OG_IMAGE_PATH}`;
+export const OG_IMAGE_WIDTH = 1200;
+export const OG_IMAGE_HEIGHT = 630;
+export const OG_IMAGE_ALT =
+  "Labas — platform latihan ujian bahasa dengan AI Generator dan simulasi tes";
+export const DEFAULT_SITE_TITLE = "Labas — AI-Powered Exam Practice Platform";
+export const DEFAULT_SITE_DESCRIPTION =
+  "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation.";
+type SiteHeadInput = {
+  title?: string;
+  description?: string;
+  url?: string;
+};
+/** Shared Open Graph + Twitter tags for TanStack Router `head()`. */
+export function buildSocialMeta(input: SiteHeadInput = {}) {
+  const title = input.title ?? DEFAULT_SITE_TITLE;
+  const description = input.description ?? DEFAULT_SITE_DESCRIPTION;
+  const url = input.url ?? `${SITE_URL}/`;
+  return [
+    { name: "description", content: description },
+    { property: "og:title", content: title },
+    { property: "og:description", content: description },
+    { property: "og:url", content: url },
+    { property: "og:type", content: "website" },
+    { property: "og:image", content: OG_IMAGE_URL },
+    { property: "og:image:secure_url", content: OG_IMAGE_URL },
+    { property: "og:image:type", content: "image/png" },
+    { property: "og:image:width", content: String(OG_IMAGE_WIDTH) },
+    { property: "og:image:height", content: String(OG_IMAGE_HEIGHT) },
+    { property: "og:image:alt", content: OG_IMAGE_ALT },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:image", content: OG_IMAGE_URL },
+    { name: "twitter:image:alt", content: OG_IMAGE_ALT },
+  ];
+}

apps/web/src/routes/__root.tsx CHANGED Viewed

@@ -10,6 +10,12 @@ import { useSidebar } from "@/hooks/use-sidebar";
 import { GlobalGenerationProgress } from "@/components/generate/GlobalGenerationProgress";
 import { ErrorFallback } from "@/components/ErrorFallback";
 import type { RouteShell } from "@/lib/route-shell";
 import type { trpc } from "@/utils/trpc";
 function SkipLink() {
@@ -42,25 +48,16 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
   component: RootComponent,
   errorComponent: ({ error, reset }) => <ErrorFallback error={error} reset={reset} />,
   head: () => {
-    const siteUrl = "https://labas.rogasper.com";
     return {
       meta: [
-        { title: "Labas — AI Exam Practice" },
-        { name: "description", content: "AI-powered multi-language test practice platform" },
-        { property: "og:title", content: "Labas — AI Exam Practice" },
-        { property: "og:description", content: "AI-powered multi-language test practice platform" },
-        { property: "og:url", content: siteUrl },
-        { property: "og:image", content: `${siteUrl}/og_image.png` },
-        { property: "og:type", content: "website" },
-        { name: "twitter:card", content: "summary_large_image" },
-        { name: "twitter:title", content: "Labas — AI Exam Practice" },
-        { name: "twitter:description", content: "AI-powered multi-language test practice platform" },
-        { name: "twitter:image", content: `${siteUrl}/og_image.png` },
         { name: "robots", content: "index, follow" },
       ],
       links: [
         { rel: "icon", href: "/labas_icon.png" },
-        { rel: "canonical", href: siteUrl },
         { rel: "preconnect", href: "https://fonts.googleapis.com" },
         { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" as const },
         { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" },
@@ -75,11 +72,11 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
             "@context": "https://schema.org",
             "@type": "WebSite",
             name: "Labas",
-            url: siteUrl,
-            description: "AI-powered multi-language test practice platform",
             potentialAction: {
               "@type": "SearchAction",
-              target: `${siteUrl}/bank?search={search_term_string}`,
               "query-input": "required name=search_term_string",
             },
           }),
@@ -123,7 +120,7 @@ function RootComponent() {
             </main>
           </div>
         )}
-        <GlobalGenerationProgress />
         <Toaster richColors />
       </ThemeProvider>
       {import.meta.env.DEV && (

 import { GlobalGenerationProgress } from "@/components/generate/GlobalGenerationProgress";
 import { ErrorFallback } from "@/components/ErrorFallback";
 import type { RouteShell } from "@/lib/route-shell";
+import {
+  buildSocialMeta,
+  DEFAULT_SITE_DESCRIPTION,
+  DEFAULT_SITE_TITLE,
+  SITE_URL,
+} from "@/lib/site-seo";
 import type { trpc } from "@/utils/trpc";
 function SkipLink() {
   component: RootComponent,
   errorComponent: ({ error, reset }) => <ErrorFallback error={error} reset={reset} />,
   head: () => {
     return {
       meta: [
+        { title: DEFAULT_SITE_TITLE },
+        { name: "description", content: DEFAULT_SITE_DESCRIPTION },
+        ...buildSocialMeta(),
         { name: "robots", content: "index, follow" },
       ],
       links: [
         { rel: "icon", href: "/labas_icon.png" },
+        { rel: "canonical", href: `${SITE_URL}/` },
         { rel: "preconnect", href: "https://fonts.googleapis.com" },
         { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" as const },
         { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" },
             "@context": "https://schema.org",
             "@type": "WebSite",
             name: "Labas",
+            url: SITE_URL,
+            description: DEFAULT_SITE_DESCRIPTION,
             potentialAction: {
               "@type": "SearchAction",
+              target: `${SITE_URL}/bank?search={search_term_string}`,
               "query-input": "required name=search_term_string",
             },
           }),
             </main>
           </div>
         )}
+        {shell !== "public" && <GlobalGenerationProgress />}
         <Toaster richColors />
       </ThemeProvider>
       {import.meta.env.DEV && (

apps/web/src/routes/index.tsx CHANGED Viewed

@@ -1,29 +1,26 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { routeShell } from "@/lib/route-shell";
 export const Route = createFileRoute("/")({
   staticData: routeShell.public,
   head: () => ({
     meta: [
-      { title: "Labas — AI-Powered Exam Practice Platform" },
-      { name: "description", content: "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." },
-      { property: "og:title", content: "Labas — AI-Powered Exam Practice Platform" },
-      { property: "og:description", content: "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." },
-      { property: "og:url", content: "https://labas.rogasper.com/" },
-    ],
-    links: [
-      { rel: "canonical", href: "https://labas.rogasper.com/" },
     ],
   }),
   beforeLoad: async () => {
     try {
       const session = await authClient.getSession();
-      if (session?.data) {
         throw redirect({ to: "/dashboard", replace: true });
       }
     } catch (e) {
-      if (e instanceof Response) throw e;
     }
   },
 });

+import { createFileRoute, isRedirect, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { routeShell } from "@/lib/route-shell";
+import { buildSocialMeta, DEFAULT_SITE_TITLE, SITE_URL } from "@/lib/site-seo";
 export const Route = createFileRoute("/")({
   staticData: routeShell.public,
   head: () => ({
     meta: [
+      { title: DEFAULT_SITE_TITLE },
+      ...buildSocialMeta({ url: `${SITE_URL}/` }),
     ],
+    links: [{ rel: "canonical", href: `${SITE_URL}/` }],
   }),
   beforeLoad: async () => {
     try {
       const session = await authClient.getSession();
+      if (session.data?.user) {
         throw redirect({ to: "/dashboard", replace: true });
       }
     } catch (e) {
+      if (isRedirect(e)) throw e;
+      // Offline / auth endpoint unavailable — still show public landing.
     }
   },
 });

apps/web/src/utils/trpc.ts CHANGED Viewed

@@ -1,13 +1,20 @@
 import type { AppRouter } from "@labas/api/routers/index";
 import { env } from "@labas/env/web";
 import { QueryCache, QueryClient } from "@tanstack/react-query";
-import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error, query) => {
       toast.error(error.message, {
         action: {
           label: "retry",

 import type { AppRouter } from "@labas/api/routers/index";
 import { env } from "@labas/env/web";
 import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink, TRPCClientError } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error, query) => {
+      if (
+        error instanceof TRPCClientError &&
+        (error.data?.code === "UNAUTHORIZED" ||
+          error.message.toLowerCase().includes("authentication required"))
+      ) {
+        return;
+      }
       toast.error(error.message, {
         action: {
           label: "retry",

package.json CHANGED Viewed

@@ -26,6 +26,7 @@
     "build": "turbo build",
     "test": "turbo test",
     "check-types": "turbo check-types",
     "dev:web": "turbo -F web dev",
     "dev:server": "turbo -F server dev",
     "db:push": "turbo -F @labas/db db:push",
@@ -50,6 +51,6 @@
     "turbo": "^2.8.12",
     "typescript": "catalog:"
   },
-  "packageManager": "bun@1.3.11",
   "license": "AGPL-3.0"
 }

     "build": "turbo build",
     "test": "turbo test",
     "check-types": "turbo check-types",
+    "compress:og": "bun scripts/compress-og-image.ts",
     "dev:web": "turbo -F web dev",
     "dev:server": "turbo -F server dev",
     "db:push": "turbo -F @labas/db db:push",
     "turbo": "^2.8.12",
     "typescript": "catalog:"
   },
+  "packageManager": "bun@1.3.14",
   "license": "AGPL-3.0"
 }

scripts/compress-og-image.ts ADDED Viewed

	@@ -0,0 +1,58 @@

+/**
+ * Compress apps/web/public/og_image.png for social previews.
+ * Requires Bun >= 1.3.14 (Bun.Image API).
+ *
+ * Usage: bun scripts/compress-og-image.ts
+ */
+import { join } from "node:path";
+const ROOT = join(import.meta.dir, "..");
+const TARGET = join(ROOT, "apps/web/public/og_image.png");
+const WIDTH = 1200;
+const HEIGHT = 630;
+function requireBunImage() {
+  const file = Bun.file(TARGET);
+  if (typeof file.image !== "function") {
+    console.error(
+      "Bun.Image is not available. Upgrade Bun to >= 1.3.14:\n" +
+        "  bun upgrade\n" +
+        "  # or: curl -fsSL https://bun.com/install | bash",
+    );
+    process.exit(1);
+  }
+  return file.image();
+}
+function formatKb(bytes: number) {
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+async function main() {
+  const before = (await Bun.file(TARGET).arrayBuffer()).byteLength;
+  console.log(`Source: ${TARGET}`);
+  console.log(`Before: ${formatKb(before)} (${WIDTH}×${HEIGHT} target)`);
+  const pipeline = requireBunImage()
+    .resize(WIDTH, HEIGHT, { fit: "fill", filter: "lanczos3" })
+    .png({
+      compressionLevel: 9,
+      palette: true,
+      colors: 256,
+      dither: true,
+    });
+  await pipeline.write(TARGET);
+  const after = (await Bun.file(TARGET).arrayBuffer()).byteLength;
+  const meta = await Bun.file(TARGET).image().metadata();
+  console.log(`After:  ${formatKb(after)} (${meta.width}×${meta.height}, ${meta.format})`);
+  console.log(`Saved:  ${formatKb(before - after)} (${(((before - after) / before) * 100).toFixed(1)}%)`);
+}
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});