Configuration

The project configuration is simple and centralized in the explainer.config.ts file.

This file uses the defineExplainerConfig function to define all the configurations for the site. Here is an overview of the different configuration sections available:

export default defineExplainerConfig({
  meta: { ... },
  urls: { ... },
  docs: { ... },
  blog: { ... },
  navbar: [ ... ]
})

---

Metadata

The meta section defines the main metadata for the site:

meta: {
  title: 'Explainer',
  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  thumbnail: 'https://placehold.co/1200x630',
}

Property	Type	Description
title	string	Main title of the site, displayed in the browser tabs
description	string	Short description of the site used in SEO metadata
thumbnail	string	Default thumbnail URL for social media sharing

---

External URLs (urls)

The urls section contains the external links to the project resources:

urls: {
  github: 'https://github.com/LeadcodeDev/explainer',
}

Property	Type	Description
github	string	URL of the project GitHub repository

---

Documentation (docs)

The docs section configures the different documentation sections. Each key defines a section with its properties :

docs: {
  framework: {
    icon: CuboidIcon,
    label: 'Framework',
    href: '/docs/framework/getting-started',
    baseUrl: '/docs/framework',
  },
  syntax: {
    icon: PencilLineIcon,
    label: 'Syntax',
    href: '/docs/syntax/texts',
    baseUrl: '/docs/syntax',
  },
}

For each documentation section :

Property	Type	Description
icon	Component	Lucide icon component for representing the section
label	string	Displayed name of the section in the interface
href	string	Complete URL to the main page of the section
baseUrl	string	Base URL for all pages in this section

---

Blog (blog)

The blog section configures the blog settings:

blog: {
  defaults: {
    thumbnail: 'https://placehold.co/1200x630',
  },
  authors: {
    leadcode_dev: {
      name: 'LeadcodeDev',
      avatar: 'https://avatars.githubusercontent.com/u/8946317?v=4',
      href: 'https://github.com/LeadcodeDev',
    },
  }
}

Property	Type	Description
defaults.thumbnail	string	Default thumbnail for articles without specified image
authors	object	Definition of authors who can publish on the blog

For each author (authors.{id}):

Property	Type	Description
name	string	Full name of the author
avatar	string	URL of the author’s avatar
href	string	Link to the author’s profile

---

Navigation bar (navbar)

The navbar section defines the structure of the navigation bar as an array of elements:

navbar: [
  {
    label: 'Docs',
    items: [
      {
        label: 'Framework',
        description: 'Discover Explainer framework guidelines and usages.',
        href: '/docs/framework/getting-started',
      },
      // ...autres items
    ],
  },
  {
    label: 'API',
    href: '/api',
  },
  // ...autres éléments de navigation
]

Each navigation element can have the following properties:

Property	Type	Description
label	string	Text displayed in the navigation
href	string	(Optional) Direct link to a page
items	array	(Optional) Dropdown submenu

For each dropdown item (items):

Property	Type	Description
label	string	Name of the item
description	string	Description text of the section
href	string	Link to the corresponding page

Complete example

Here is a complete example of configuration:

import { defineExplainerConfig } from '@/utils'
import { CuboidIcon, PencilLineIcon } from 'lucide-react'

export default defineExplainerConfig({
  meta: {
    title: 'My Explainer',
    description: 'Complete documentation of my project',
    thumbnail: 'https://my-site.com/thumbnail.png',
  },
  urls: {
    github: 'https://github.com/my-account/my-project',
  },
  docs: {
    guide: {
      icon: CuboidIcon,
      label: 'Guide',
      href: '/docs/guide/introduction',
      baseUrl: '/docs/guide',
    },
    api: {
      icon: PencilLineIcon,
      label: 'API',
      href: '/docs/api/overview',
      baseUrl: '/docs/api',
    },
  },
  blog: {
    defaults: {
      thumbnail: 'https://my-site.com/blog-default.png',
    },
    authors: {
      john_doe: {
        name: 'John Doe',
        avatar: 'https://my-site.com/avatars/john.png',
        href: 'https://github.com/johndoe',
      },
    }
  },
  navbar: [
    {
      label: 'Documentation',
      items: [
        {
          label: 'Guide',
          description: 'Complete project guide',
          href: '/docs/guide/introduction',
        },
        {
          label: 'API',
          description: 'Documentation of the API',
          href: '/docs/api/overview',
        },
      ],
    },
    {
      label: 'Blog',
      href: '/blog',
    },
  ]
})