Galaxy Configuration

Adding your API key to your env

Easily add your FutureThemes API key to your environment variables to unlock the full version of Galaxy!

FUTURETHEMES_API_KEY=12345678

Configuring Galaxy

import { defineConfig } from 'astro/config';
import GalaxyTheme from "@futurethemes/galaxy";

// https://astro.build/config
export default defineConfig({
  integrations: [
    GalaxyTheme({
      siteName: 'Sitey McSiteFace',
      /// Configuration options here
    }),
  ],
})

Configuration options

siteName

string

This is the name of your site. This will get appended to the page title for each page

GalaxyTheme({
  siteName: 'Sitey McSiteFace',
}),

On each page your page title will now contain your site name:

Home - Sitey McSiteFace

logo

logo allows you to specify your own logo to be used on your site.

You can specify just one logo:

GalaxyTheme({
  logo: {
    src: './src/assets/my-logo.svg',
  }
})

Or you can specify a light and dark version.

GalaxyTheme({
  logo: {
    light: './src/assets/my-logo_light.svg',
    dark: './src/assets/my-logo_dark.svg',
  }
})

navigation allows you to specify all your navigation options through config.

You can specify your top nav, your footer, and also your mobile navigation menu!

nav

navigation.nav is where you set your top navigation links.

GalaxyTheme({
  navigation: {
    nav: [
      {
        label: 'About',
        href: '/about',
      },
      {
        label: 'Pricing',
        href: '/pricing',
      },
      {
        label: 'Blog',
        href: '/blog',
      }
    ],
  },
}),

label

string

This is the label of your menu item.

href

string

This is the href for your menu item.

mobile

navigation.mobile is where you set your mobile navigation links.

mobile expects an array of objects.

GalaxyTheme({
  navigation: {
    mobile: [
      {
        label: 'About',
        href: '/about',
      },
      {
        label: 'Sign Up',
        href: '/auth/signup',
        asButton: true,
      },
    ],
  }
}),

label

string

This is the label of your menu item.

href

string

This is the href for your menu item.

asButton

boolean

This option allows you to specify a menu item should appear as a button rather than a plain link.

head

HeadSchema[]

This option allows you to set tags in your site’s <head>.

This is useful for analytics scripts, favicons and other icons too.

GalaxyTheme({
  head: [
    {
      tag: 'script',
      attrs: {
        async: true,
        src: 'https://www.googletagmanager.com/gtag/js?id=G-12345',
      }
    },
    {
      tag: 'script',
      content: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-12345');
      `
    }
  ]
})

Or even add a favicon!

GalaxyTheme({
  head: [
    {
      tag: 'link',
      attrs: {
        rel: 'icon',
        type: 'image/svg+xml'
        href: '/favicon.svg',
      }
    },
  ]
})

`HeadSchema`

interface HeadSchema {
  tag: string;
  attrs?: Record<String, string | boolean | undefined>;
  content?: string;
}

navigation.footer is where you set your footer navigation links.

The footer config is slightly different in it takes an object which specifies a “section” too.

So in this case, you’ll have two “section” in your footer nav, Pages and Our Company.

And underneath them you’ll have the links specified by key, value pair!

GalaxyTheme({
  navigation: {
    footer: {
      Pages: {
        Home: '/',
        About: '/about',
        Pricing: '/pricing',
        Blog: '/blog',
      },
      'Our Company': {
        About: '/about',
        History: '/history',
        Careers: '/careers',
      },
    },
  },
}),

socials

Here you can specify links to your social accounts that will appear in the top nav and footer.

GalaxyTheme({
  socials: {
    instagram: 'https://www.instagram.com/futurethemes.io',
    youtube: 'https://youtube.com',
    x: 'https://twitter.com/futurethemes_io',
  },
})

Available socials:

instagram
youtube
x

emailProvider

SendGrid | EmailJS

Here you can specify whether you would like your contact form to send emails through SendGrid or EmailJS.

In order to use either email provider, you also must include several environment variables to connect to their services.

SendGrid

GalaxyTheme({
  emailProvider: 'SendGrid',
})

PUBLIC_SENDGRID_TO_ADDRESS=1234
PUBLIC_SENDGRID_FROM_ADDRESS=test@text.com
PUBLIC_SENDGRID_SUBJECT="Hello there"

EmailJS

GalaxyTheme({
  emailProvider: 'EmailJS',
})

PUBLIC_EMAILJS_SERVICE_ID=1234
PUBLIC_EMAILJS_TEMPLATE_ID=1234

starSpeed

none | slow | normal | fast

Sets the initial speed of the star field background of the site.

There’s four speeds:

none - This stops the stars moving completely.
slow - Slow speed
normal - Normal speed
fast - Fast speed