Make it your brand

Run the site with yarn dev while you edit: the page reloads each time you save.

The site's name

The name is Publino out of the box, بوبلينو in Arabic. It appears in several texts, each in both message files:

• metadata.siteName, metadata.title and metadata.description in messages/common/<locale>.json: the name search engines and social cards show, and the home page's title and description.
• navigation.logo in the same files: the name next to the logo in the header and in the dashboard mockup's sidebar.
• footer.copyright in the same files: the line at the bottom of every page. {year} is filled in by the site; keep it.
• whyChooseUs.title and footer.description in messages/home/<locale>.json: two sentences on the home page.
• PricingPage.meta in messages/pricing/<locale>.json and ContactPage.meta in messages/contact/<locale>.json: the titles Publino | Pricing and Publino | Contact us, and their descriptions.

Two more places hold it as plain text: the wordmark in src/features/home/Footer/index.tsx, and name and short_name in public/site.webmanifest, the name a phone shows when the site is added to its home screen.

The logo

The logo is a rocket icon from Tabler Icons followed by the site's name. The header draws it in src/layouts/Navbar/index.tsx, and the dashboard mockup repeats the icon in src/features/home/DashboardMockup/components/Sidebar/components/BrandHeader.tsx.

Swap the icon for another Tabler icon, or for your own image, for example a file you put in public/:

import Image from "next/image";

const logo = {
  icon: <Image src="/your-logo.svg" alt="" width={20} height={20} priority />,
  text: t("logo"),
};

Light and dark themes

The site has a light and a dark theme, and opens in dark. The sun and moon button in the header switches between them, and the browser remembers the visitor's choice.

Both themes are a set of colours in src/styles/theme.css: the light colours under :root, the dark ones under [data-theme="dark"]. The palette is black, white and greys, with blue as the accent for focus rings, rising trends and the map's dots. Change a value there and every page follows, such as --interactive-primary for the main buttons or --background for the page.

[data-theme="dark"] {
    --background: #000000;
    --interactive-primary: #ffffff;
}

To open in light for a first visit, change "dark" to "light" in src/providers/ThemeProvider.tsx and in the script inside src/app/[locale]/layout.tsx, in every place it appears in both files.

• The site stays dark

Fonts

The site uses the visitor's system fonts in both languages: --font-sans and --font-mono in src/styles/theme.css. Nothing is downloaded, so text appears at once.

To use a Google font instead, load it with next/font/google in src/app/[locale]/layout.tsx, put its class on <html>, and name its CSS variable first in --font-sans. For Arabic, pick a font that covers Arabic letters, such as Noto Sans Arabic.

The favicon and app icons

Every page links public/favicon.svg as its icon, public/apple-touch-icon.png for iPhones, and public/site.webmanifest, which names web-app-manifest-192x192.png and web-app-manifest-512x512.png. Replace each file with your own under the same name. public/favicon.ico is the fallback that browsers ask for on their own.

The 512 pixel icon is also the logo search engines see for your organisation.

The image shown when a page is shared

Social networks and chat apps show public/image.png, 1200 by 630 pixels, when someone shares a page. Replace it with your own image of the same size. If you change the size, change width and height in ogImage in src/config/site.config.ts too.

Its description for screen readers is metadata.imageAlt in messages/common/<locale>.json. The Performance Metrics feature card on the home page shows the same image as the site it analyses, so your image appears there too.

How the themes work