@futurethemes/galaxy-theme NPM

Galaxy Theme 🚀🌌

From FutureThemes

Galaxy is the very first theme from FutureThemes!

Galaxy is a beautiful, hand-crafted deep space experience! Galaxy is designed to be futuristic, with nice gradients and soft fade animations.

Galaxy is made using using only Vanilla JS, CSS, TailwindCSS and a tiny pinch of ThreeJS to transport you to the depths of the universe!

Galaxy is built to be fast and get you going as quickly as possible. It's fully installable from NPM, so no awkward updating using new files or relying on any 3rd party services!

Galaxy includes an optional Blog section which can be configured with a flag. The blog by default will paginate and create paginated blog pages by blog post written date. It creates pages of 9 blog posts at a time by default. The blog also has a space and a component for a Featured blog post which will appear at the top of your blog page.

It also contains a pre-built Contact Form which can be configured to use SendGrid or EmailJS so it's super easy to plug-and-play.

Also every single page is built for amazing SEO using the Astro-SEO package as standard so you can get your site ranking ASAP.

Features

Rapid - Galaxy is Q U I C K.
Easy to use - Get up and running in minutes, not hours.
Blog as standard - Easily set up a beautiful, scalable and paginated blog with a single flag.
Animations - Ultra quick, buttery smooth animations using nothing more than vanilla JS and CSS
Only one prod dependency - Galaxy only requires ThreeJS to run, everything else is vanilla baby.
Nav links as config - Easily set up links in both your nav and your footer through the plugin config, no messing around with tags, json or manually entering anchor tags!
Your brand images - Easily configure your logo, or both a light and dark logo using just the config.
SEO Powerhouse - Galaxy is powered by Astro-SEO which means each page is fully ready to get ranking by search engines.
SendGrid and EmailJS integration out the box - Just provide your API keys in your env and the contact form will JustWork™️!

Getting Started

Step 1 - Install Galaxy:

Install the theme from npm

pnpm i @futurethemes/galaxy

Step 2 - Configuring :

Install Tailwind

PNPM users: pnpm dlx astro add tailwind

NPM users: npx astro add tailwind

Step 3 - Configuring Astro:

Add and configure the Galaxy Theme Astro plugin

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import GalaxyPlugin from '@futurethemes/galaxy';

const galaxyConfig = {}

export const defineConfig({
    ...,
    integrations: [
        GalaxyPlugin({
            ...galaxyConfig,
        }),
        tailwind(),
        ...,
    ],
})

Step 4 - Configuring Tailwind:

Add the Galaxy Tailwind plugin and the Galaxy Tailwind paths to the Tailwind config

// tailwind.config.mjs
import {
    GalaxyThemeTailwindPlugin,
    GalaxyThemeTailwindContentPaths
} from '@futurethemes/galaxy/tailwind-plugin'

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
		...GalaxyThemeTailwindContentPaths,
	],
	theme: {
		extend: {},
	},
	plugins: [
		GalaxyThemeTailwindPlugin(),
	],
}

Step 5 - Adding the Page Schema:

Add the Galaxy Theme Pages Schema to your src/content/config.ts file

import { defineCollection } from 'astro:content'
import { PagesSchema } from '@futurethemes/galaxy/schema'

const pagesSchema = defineCollection({
    type: 'content',
    schema: PagesSchema(),
})

export const collections = {
    pages: PagesSchema,
}

Step 6 (Optional) - Adding a Blog:

If you'd like to include a blog on your site too, first specify the flag in the theme config

// astro.config.mjs

export defineConfig({
    ...,
    GalaxyThemePlugin({
        ...,
+       blog: true,
    }),
})

Then add the blog schema to your content.ts

// src/content/config.ts
import { defineCollection } from 'astro:content'
import { PagesSchema, BlogSchema } from '@futurethemes/galaxy/schema'

const pagesSchema = defineCollection({
    type: 'content',
    schema: PagesSchema(),
})

+ const blogSchema = defineCollection({
+    type: 'content',
+    schema: BlogSchema(),
+ })

export const collections = {
    pages: PagesSchema,
+   blog: BlogSchema,
}

👍 Then you're ready to start adding blog posts to content/blog! 👏

Configuring SendGrid / EmailJS

Configuring SendGrid

First, specify emailProvider: 'SendGrid' in the plugin config in your astro.config.mjs.

Then make sure you have the following environment variables so that the send function works:

//.env
...

SENDGRID_TO_ADDRESS=
SENDGRID_FROM_ADDRESS=
SENDGRID_SUBJECT_ADDRESS=

Then you should be good to go! 👍

Configuring EmailJS

First, specify emailProvider: 'EmailJS' in the plugin config in your astro.config.mjs.

Then make sure you have the following environment variables so that the send function works:

//.env
...

EMAILJS_SERVICE_ID=
EMAILJS_TEMPLATE_ID=

Then you should be good to go! 👍

Included Sections

It contains over ten components to allow you to shape your content exactly how you want!

Sections included:

Hero Section
Content Section
Navbar
Mobile navbar
Footer
Two Blog page Layouts
Form elements
Breadcrumbs
Themed buttons
A Pricing card
A glassmorphic callout
Several icons

FAQ

❓If I purchase the theme will I get updates forever?

Yes, purchase of any FutureThemes themes means you get free updates, forever delivered painlessly through npm.

❓Is this theme fully responsive?

Yes! All FutureThemes themes are 100% fully mobile responsive. They work perfectly no matter what screen size you're on.

❓Do you offer custom work?

Check out WeAreBold, a sister web design company to FutureThemes who works exclusively with Astro! Drop them a line and have a chat about your project!

Troubleshooting

⚠️ I'm getting a Tailwind error when running or building my project!

Make sure that your Tailwind content array contains the correct Galaxy Theme content paths exported from the theme package!

⚠️ Where do I add content?

Add content to your src/pages folder and the Galaxy plugin will automatically pick it up!

⚠️ I'm getting an error saying my content schema is incorrect!

Make sure that you're correctly using the Galaxy Theme PageSchema exported from the Galaxy Theme package:

import { defineCollection } from 'astro:content'
import { PagesSchema } from '@futurethemes/galaxy/schema'

const pagesSchema = defineCollection({
    type: 'content',
    schema: PagesSchema,
})

export const collections = {
    pages: PagesSchema,
}

Thank you so much for checking out Galaxy from FutureThemes!