Generated codebase configuration
- Updated on
The Shipixen App pre-configures the boilerplate for you so you can work on what's important.
However, the configuration can be changed later if you need to.
Overview
All configuration files are located in the data directory.
├── data
│ ├── authors # Authors configuration
│ ├── config # Site & theme configuration
│ │ ├── colors.js # Theme colors
│ │ ├── footerLinks.ts # Change footer links & columns
│ │ ├── headerNavLinks.ts # Change main navigation links
│ │ ├── metadata.js # Site metadata & socials
│ │ ├── pricingData.tsx # Change pricing configuration
│ │ ├── searchLinks.ts # Change custom search links (besides the ones extracted from the blog)
│ │ ├── site.settings.js # Site configuration for e.g. paths and plugins
We'll go into detail for each of these files in the following sections.
Authors
You can add authors to your site by adding a new Markdown (.md) file to the authors directory.
NB: The file name will be used as the author's ID and it has to be markdown and not .mdx.
An author files looks like this:
---
name: Shipixen
avatar: /static/images/avatar.png
occupation: Business
company: Shipixen
email:
twitter:
linkedin:
github:
---
Shipixen works tirelessly to make sure all customers are happy. We are always looking for ways to improve our service and welcome any feedback.
Each blog post can have one or more authors. Let's imagine we have added two authors to our site: dan.md and mark.md.
You can control that by adding the authors field to the frontmatter of your blog post:
---
title: 'My first blog post'
date: '2023-10-01'
authors: ['dan', 'mark']
---
Site & theme configuration
Colors
The colors of the theme can be changed in the colors.js file.
This is the sole place where you need to change the colors.
They will be reflected throughout the site.
✨ The easiest way to change the colors is to use our Color Theme Explorer Tool.
const colors = {
primary: {
lighter: '#f0abfc',
light: '#e879f9',
main: '#d946ef',
dark: '#c026d3',
darker: '#a21caf'
},
secondary: {
lighter: '#7dd3fc',
light: '#38bdf8',
main: '#0ea5e9',
dark: '#0284c7',
darker: '#0369a1'
}
}
module.exports = { colors };
Metadata
The metadata contains information about your site and socials, as well as some foundational settings such as language, theme & locale.
The metadata is defined by the following interface:
export interface SiteMetadata {
title: string; // Default meta title
description: string; // Default meta description
domain: string; // Domain of your site; used for absolute URLs like og:image
logoTitle: string; // Title of the logo
socialBanner: string; // Default social banner image; used for og:image. Keep in mind blog posts will use images provided in frontmatter instead, if any.
supportEmail: string; // Support email address - used in footer if enabled.
// Social contact: displayd in footer automatically if present
twitter: string;
github: string;
linkedin: string;
facebook: string;
youtube: string;
mastodon: string;
email: string;
// Language, theme & locale
language: string;
theme: 'system' | 'dark' | 'light';
locale: string;
}
If you want to use dark or light theme by default, you can change the theme property to dark or light respectively.
Site settings
Site settings contain information about the site's paths, plugins and other settings.
const { metadata } = require('./metadata');
/** @typedef {import("siteSettingsInterface.ts").SiteConfig } */
const siteConfig = {
blogPath: '', // The location of all blog pages under 'data'. Empty string means 'data' (default). Best for SEO is to have articles under the root path.
allArticlesPath: '/all-articles', // The name of the page where you can see a list of all articles (needs to match app/all-articles/page.tsx)
// Configure analytics
disableAnalytics: false, // Disable all analytics on the site
analytics: {}, // By default Vercel analytics is enabled. Other providers can be configured here.
newsletter: {}, // Optional: enable newsletter. This is a beta feature.
search: true, // Enable or disable search
};
module.exports = { siteConfig };
You can disable analytics by setting disableAnalytics to true.
Similarly, you can disable search by setting search to false.
By default, a list of all your articles will be available at /all-articles.
If you want to change that to e.g. /blog, you can change the allArticlesPath property to /blog and rename the app/all-articles directory to app/blog.
Pricing data
The pricing page is rendered based on the data in the pricingData.tsx file.
If you want to add additional tiers of frequencies, you can do it in this file.
The configuration is defined by the following interface:
export interface PricingTierFrequency {
value: string;
label: string;
priceSuffix: string;
}
export interface PricingTier {
name: string;
id: string;
href: string;
discountPrice: Record<string, string>;
price: Record<string, string>;
description: string | React.ReactNode;
features: string[];
featured?: boolean;
highlighted?: boolean;
cta: string;
soldOut?: boolean;
}
Footer links
Footer links & columns are rendered based on the data in the footerLinks.ts file.
It's possible to customize the footer links & columns by changing the footerLinks.ts file.
For example, if you want to add a new column called Documentation with a link to your documentation, you can do the following:
export const footerLinks = [
{
columnName: 'Company',
links: [
{ href: '/', title: 'Home' },
{ href: '/pricing', title: 'Pricing' },
{ href: '/about', title: 'About' },
{ href: '/all-articles', title: 'Blog' },
{ href: '/#faq', title: 'FAQ' },
],
},
+ {
+ columnName: 'Documentation',
+ links: [
+ { href: '/boilerplate-documentation', title: 'Documentation' },
+ ]
+ }
];
Header links
Main navigation links are rendered based on the data in the headerNavLinks.ts file.
It's possible to customize the main navigation links by changing the headerNavLinks.ts file.
For example, if you want to add a new link to your documentation, you can do the following:
export const headerNavLinks = [
{ href: '/', title: 'Home' },
{ href: '/pricing', title: 'Pricing' },
{ href: '/about', title: 'About' },
+ { href: '/boilerplate-documentation', title: 'Documentation' },
];
Configuration tools
For your convenience, we have created a few tools that will help you configure your site.
Make sure to check them out, depending on what you want to do: