Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Configuration

Configure your site name, description, plugins and themes.

gatsby-config.js

Configuration options for a Gatsby (and Reflex) site are placed in a gatsby-config.js file at the root of the project folder.

gatsby-config.js
module.exports = {
siteMetadata: {
title: "Reflex",
description: "Starter for Reflex.",
siteUrl: process.env.SITE_URL || "http://localhost:8000",
},
plugins: ["@reflexjs/gatsby-theme-base"],
}

siteMetadata

The siteMetadata is for common config that is used across the site. The site name (title), description and other site related config are stored in the siteMetadata.

Reflex provides the useSiteMetadata helper hook to retrieve the siteMetadata config.

content/blocks/copyright.mdx
import { useSiteMetadata } from "@reflexjs/gatsby-theme-core"
export const Copyright = ({ ...props }) => {
const { title } = useSiteMetadata()
return (
<P fontSize="sm" {...props}>
© {new Date().getFullYear()} {title}
</P>
)
}

plugins

This is where you define your site plugins and themes. Plugins can be listed by name or with options.

gatsby-config.js
module.exports = {
siteMetadata: {
title: "Reflex",
description: "Starter for Reflex.",
siteUrl: process.env.SITE_URL || "http://localhost:8000",
},
plugins: [
"@reflexjs/gatsby-theme-base"
{
resolve: "@reflexjs/gatsby-theme-post",
options: {
basePath: "/the-blog",
}
}
],
}

You can read more on the gatsby-config.js file in the Gatsby docs.

Directory StructureConfigure your editor

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github