Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tariqdev.xyz/llms.txt

Use this file to discover all available pages before exploring further.

​
General Configuration

Most Sonata customization starts in a small number of files.
Start with config and data files before editing components. Sonata is designed so common storefront changes do not require layout rewrites.

​
Important Files

FilePurpose
lib/config/site.tsBrand, SEO, social links, billing URLs, panel URL, locations, and metadata.
app/globals.cssTheme tokens, colors, light mode, depth, buttons, cards, and border beam.
lib/data/game-hosting.tsGame hosting products, plans, tiers, locations, software variants, and billing params.
lib/data/product-config.tsWeb hosting, app hosting, VPS, domains, and private node data.
components/ProductCatalogPage.tsxShared catalog UI for app hosting, VPS, and private nodes.
app/game-host/ProductCard.tsxGame hosting plan card UI.
LICENSECommercial license terms.

​
Folder Structure

app/
  api/
  app-host/
  domain/
  game-host/
  home/
  nodes/
  status/
  support/
  vps/
  web-host/
components/
content/
hooks/
lib/
public/

​
Site Config

Edit: 
lib/config/site.ts
Common fields:
  • name
  • fullName
  • logo
  • description
  • url
  • billing.url
  • billing.panel
  • social
  • seo
  • icons
  • nav.banner
  • locations

​
Billing URL

Most product order links use: 
siteConfig.billing.url
Then product data appends a product path. Example: 
billingUrl: `${B}/products/vps/starter-s1`
Change the suffix to match your billing panel. Main navigation is in: 
components/Navbar.tsx
Footer is in: 
components/Footer.tsx
When adding a new public page, update navigation only if the page needs to be discoverable from the header or footer.

​
Configuration Priority

For a new brand, update files in this order:
  1. lib/config/site.ts
  2. app/globals.css
  3. lib/data/game-hosting.ts
  4. lib/data/product-config.ts
  5. public/asset/
  6. components/Navbar.tsx
  7. components/Footer.tsx
This keeps identity, colors, pricing, and navigation aligned before deeper customization.

​
Locations

Location data should stay consistent across the website, billing panel, and Pterodactyl. Example: 
{
  id: "sg",
  label: "Singapore",
  region: "Asia",
}
Use the same naming style for:
  • Location selectors.
  • Game hosting plans.
  • Billing configurable options.
  • Pterodactyl location or node mapping.

​
Copy Guidelines

  • Use short labels in navigation.
  • Use concise plan card text.
  • Put longer explanations in FAQ or docs pages.
  • Keep button labels action-oriented.
  • Avoid unsupported claims in product copy.

​
Final Check

After changing configuration:
  • Run pnpm build.
  • Click every header and footer link.
  • Check all product categories.
  • Confirm checkout links point to production billing.
  • Test light mode and dark mode.