feat: env for shortener domain

Author: lorenzocorallo

src/app/openapi.json/route.ts

@@ -2,6 +2,7 @@
 import { generateOpenApi } from "@ts-rest/open-api"
 // import z from "zod"
 import { contract } from "@/lib/contract"
+import { env } from "@/env";
 
 // const ZOD_4_ASYNC: SchemaTransformerAsync = async ({ schema }) => {
 //   console.log("Converting schema:", schema)
@@ -16,11 +17,11 @@ import { contract } from "@/lib/contract"
 
 const openapiDocument = generateOpenApi(contract, {
   info: {
-    title: "polinet.cc API",
+    title: `${env.DOMAIN} API`,
     version: "1.0.0",
     description: "PoliNetwork's Short URLs - Service API",
   },
-  servers: [{ url: "https://polinet.cc/api" }],
+  servers: [{ url: `https://${env.DOMAIN}/api` }],
   components: {
     securitySchemes: {
       CloudflareID: {

src/components/create-url-dialog.tsx

@@ -19,6 +19,7 @@ import { Label } from "@/components/ui/label"
 import { createUrl } from "@/lib/actions"
 import { createUrlSchema } from "@/lib/validations"
 import { RandomText } from "./random-text"
+import { env } from "@/env";
 
 interface CreateUrlDialogProps {
   open: boolean
@@ -111,7 +112,7 @@ export function CreateUrlDialog({
           <p className="text-xs">Preview: </p>
           <div className="text-sm p-4 border rounded-md border-border mb-4 mt-1 flex flex-col gap-1 bg-muted/50 text-muted-foreground">
             <p className="font-mono mx-auto">
-              https://polinet.cc/
+              https://${env.DOMAIN}/
               {isRandom ? (
                 <RandomText generate={randomCode} />
               ) : (

src/components/dashboard.tsx

@@ -31,9 +31,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { env } from "@/env";
 import { useUrls } from "@/hooks/urls"
 import type { UrlRecord, UrlsQueryParams } from "@/lib/schemas"
-import { copyToClipboard } from "@/lib/utils"
+import { 
+copyToClipboard, makeShortUrl} from "@/lib/utils"
 import { CreateUrlDialog } from "./create-url-dialog"
 import { type EditDialogState, EditUrlDialog } from "./edit-url-dialog"
 import { PaginationControls } from "./pagination"
@@ -120,7 +122,7 @@ export function Dashboard() {
         <div className="flex items-center gap-4">
           <Image src={logo} alt="PoliNetwork Logo" className="h-16 w-16" />
           <div className="gap-2">
-            <h1 className="text-3xl font-bold">polinet.cc</h1>
+            <h1 className="text-3xl font-bold">${env.DOMAIN}</h1>
             <p className="text-muted-foreground max-md:text-sm">
               PoliNetwork's URL shortener dashboard
             </p>
@@ -222,7 +224,7 @@ export function Dashboard() {
                     key={url.id}
                     url={url}
                     onCopy={(url) =>
-                      copyToClipboard(`https://polinet.cc/${url.short_code}`)
+                      copyToClipboard(makeShortUrl(url))
                     }
                     onDelete={(url) => handleDelete(url.short_code)}
                     onEdit={(url) => setEditDialog({ open: true, url })}
@@ -249,7 +251,7 @@ export function Dashboard() {
                       key={url.id}
                       url={url}
                       onCopy={(url) =>
-                        copyToClipboard(`https://polinet.cc/${url.short_code}`)
+                        copyToClipboard(makeShortUrl(url))
                       }
                       onDelete={(url) => handleDelete(url.short_code)}
                       onEdit={(url) => setEditDialog({ open: true, url })}

src/components/edit-url-dialog.tsx

@@ -18,6 +18,7 @@ import { Label } from "@/components/ui/label"
 import { editUrl } from "@/lib/actions"
 import type { UrlRecord } from "@/lib/schemas"
 import { editUrlSchema } from "@/lib/validations"
+import { makeShortUrl } from "@/lib/utils";
 
 export type EditDialogState =
   | {
@@ -67,7 +68,7 @@ export function EditUrlDialog({
           <DialogHeader>
             <DialogTitle>Edit Short URL</DialogTitle>
             <DialogDescription>
-              Update the destination URL for polinet.cc/{state.url.short_code}.
+              Update the destination URL for {makeShortUrl(state.url)}.
             </DialogDescription>
           </DialogHeader>
           <form {...getFormProps(form, {})} action={action}>

src/components/qr-code-dialog.tsx

@@ -20,6 +20,7 @@ import {
   DialogTitle,
 } from "./ui/dialog"
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs"
+import { makeShortUrl } from "@/lib/utils";
 
 export interface QrCodeDialogProps {
   open: boolean
@@ -48,7 +49,7 @@ export function QrCodeDialog({ open, url, onOpenChange }: QrCodeDialogProps) {
   }
 
   if (!url) return null
-  const shortUrl = `https://polinet.cc/${url.short_code}`
+  const shortUrl = makeShortUrl(url)
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

src/components/url-record-row.tsx

@@ -9,7 +9,8 @@ import {
   Trash2,
 } from "lucide-react"
 import type { UrlRecord } from "@/lib/schemas"
-import { copyToClipboard } from "@/lib/utils"
+import { makeShortUrl,
+copyToClipboard } from "@/lib/utils"
 import { Button } from "./ui/button"
 import { TableCell, TableRow } from "./ui/table"
 
@@ -28,6 +29,7 @@ export function MobileRow({
   onEdit,
   onQrCode,
 }: UrlRecordRowProps) {
+  const shortUrl = makeShortUrl(url)
   return (
     <div className="flex flex-col gap-1 border rounded-md py-2 px-4">
       <div className="flex justify-start gap-2 items-center">
@@ -38,12 +40,12 @@ export function MobileRow({
         )}
 
         <a
-          href={`https://polinet.cc/${url.short_code}`}
+          href={shortUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="text-blue-400 hover:underline font-mono"
         >
-          polinet.cc/{url.short_code}
+          {shortUrl}
         </a>
         <Button variant="ghost" size="icon" onClick={() => onCopy(url)}>
           <Copy />
@@ -92,6 +94,7 @@ export function MobileRow({
 }
 
 export function UrlRecordRow({ url, ...props }: UrlRecordRowProps) {
+  const shortUrl = makeShortUrl(url)
   return (
     <TableRow key={url.id} className="max-sm:hidden">
       <TableCell>
@@ -104,12 +107,12 @@ export function UrlRecordRow({ url, ...props }: UrlRecordRowProps) {
       <TableCell>
         <div className="flex items-center gap-2">
           <a
-            href={`https://polinet.cc/${url.short_code}`}
+            href={shortUrl}
             target="_blank"
             rel="noopener noreferrer"
             className="text-blue-400 hover:underline font-mono"
           >
-            polinet.cc/{url.short_code}
+            {shortUrl}
           </a>
           <Button variant="ghost" size="icon" onClick={() => props.onCopy(url)}>
             <Copy />

src/env.ts

@@ -10,6 +10,8 @@ export const env = createEnv({
     NODE_ENV: z.enum(["development", "production"]).default("development"),
     // PUBLIC_URL: z.string().default(`https://polinet.cc`),
     // LOG_LEVEL: z.string().default("DEBUG"),
+    DOMAIN: z.string().default(`polinet.cc`).describe("This is the domain to use as shortener. API available at /api and Admin dashboard at /admin"),
+
 
     DB_HOST: z.string().min(1),
     DB_PORT: z.coerce.number().min(1).max(65535).default(5432),
@@ -21,6 +23,7 @@ export const env = createEnv({
 
   runtimeEnv: {
     PORT: process.env.PORT,
+    DOMAIN: process.env.DOMAIN,
     DB_HOST: process.env.DB_HOST,
     DB_PORT: process.env.DB_PORT,
     DB_USER: process.env.DB_USER,

src/lib/utils.ts

@@ -1,6 +1,8 @@
 import { type ClassValue, clsx } from "clsx"
 import { toast } from "sonner"
 import { twMerge } from "tailwind-merge"
+import { env } from "@/env";
+import type { UrlRecord } from "./schemas";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -33,3 +35,7 @@ export const copyToClipboard = async (text: string) => {
     toast.error("Failed to copy to clipboard")
   }
 }
+
+export function makeShortUrl(url: UrlRecord): string {
+  return `https://${env.DOMAIN}/${url.short_code}`
+}