Make it yours

How to customize and add the data to build the directory of your dreams

Main data file

The most important file is /data/config/metadata.js, where you'll fill all your app data.

const metadata = {
    title: "DirectoryFast",
    tagline: "Launch Trending Directories in Minutes",
    description:
        "The best directory boilerplate to get ahead of the competition and become the next listing place to be.",
    domain: "demo.directoryfa.st",
    siteUrl: "https://demo.directoryfa.st",
    ...
}

Empty lines won't show their associated components (no Facebook icon in footer if the line is empty)

The last section will let you customize how your products, collections and links/filters are called:

  1. Product (eg: "book", "person")

  1. Collection (eg: "reading list", "group")

  1. Links / Filters (eg: "1st Project", "is free?")

Theme

  • You'll be able to easily modify the whole look of your app by updating these 2 files:

  1. /data/config/theme.js to set the primary and secondary colors

  2. /app/globals.css to set the whole app colors and border radius.

    (check gradient.page or ui.jln.dev)

  • Add your own logo (app/icon.png and public/logo.png)

  • Update your font in /app/layout.tsx :

/app/layout.tsx
import { GeistSans } from "geist/font/sans";
...
<body lang="en" className={GeistSans.className}>

Link/Filter Icons

Like you saw above, you can customize the products Links/Filters.

You can customize their icons to make it more coherent!

Simply modify the icons in the /data/config/optionsIcons.tsx file. ☑

PreviousHow it's structured?NextBonus

Last updated