Documentation

Documentation

Documentation

Aether is perfect for building out documentation of all kinds, check out the content below for examples on what can be achieved.

Code Documentation

Environment Variables

Aether has built-in support for loading environment variables into the browser and Functions. Loading environment variables into Node.js requires a small code snippet. In development, Aether will load environment variables from a file named .env.development. For builds, it will load from .env.production.

.env file could look like:

Aether=https://dev.example.com/apiAPI_KEY=927349872349798

To load these into Node.js, add the following code snippet to the top of your Aether-config.js file:

require("dotenv").config({  path: `.env.${process.env.NODE_ENV}`,})

This loads process.env.AETHER_API_URL and process.env.API_KEY for use in Aether-*.js files and functions.

For example, when configuring a plugin in aether-config.js:

require("dotenv").config({  
	path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {  
	plugins: [    
		{      
			resolve: `aether`,      
			options: {        
				apiKey: process.env.API_KEY,      
			},    
		},  
	],
}

Accessing Environment Variables in the browser.

By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret and not exposed to anyone visiting the site.

To expose a variable in the browser, you must preface its name with AETHER_. So AETHER_API_URL will be available in browser code but API_KEY will not.

Variables are set when JavaScript is compiled so when the development server is started or you build your site.

import React, { useState, useEffect } from "react"
function App() {
  const [data, setData] = useState()
  useEffect(async () => {
    const result = await fetch(
      `${process.env.AETHER_API_URL}/users`
    ).then(res => res.json())
    setData(result.data)
  })
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>
          <a href={user.url}>{user.name}</a>
        </li>
      ))}
    </ul>
  )
}
export default App

Add .env* files to .gitignore

Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add .env.* to your .gitignore file and setup the environment variables manually locally.

Reference Tables

Light mode colors

Light Mode

NameTextBGSelectText ColorBG ColorSelect ColorText CSS VariableBG CSS VariableSelect CSS Variable

Default

Default

#37352F

#FFFFFF

206,205,202,0.5

--color-text-default

--color-bg-default

--color-pill-default

Gray

Gray

#9B9A97

#EBECED

155,154,151,0.4

--color-text-gray

--color-bg-gray

--color-pill-gray

Brown

Brown

#64473A

#E9E5E3

140,46,0,0.2

--color-text-brown

--color-bg-brown

--color-pill-brown

Orange

Orange

#D9730D

#FAEBDD

245,93,0,0.2

--color-text-orange

--color-bg-orange

--color-pill-orange

Yellow

Yellow

#DFAB01

#FBF3DB

233,168,0,0.2

--color-text-yellow

--color-bg-yellow

--color-pill-yellow

Green

Green

#0F7B6C

#DDEDEA

0,135,107,0.2

--color-text-green

--color-bg-green

--color-pill-green

Blue

Blue

#0B6E99

#DDEBF1

0,120,223,0.2

--color-text-blue

--color-bg-blue

--color-pill-blue

Purple

Purple

#6940A5

#EAE4F2

103,36,222,0.2

--color-text-purple

--color-bg-purple

--color-pill-purple

Pink

Pink

#AD1A72

#F4DFEB

221,0,129,0.2

--color-text-pink

--color-bg-pink

--color-pill-pink

Red

Red

#E03E3E

#FBE4E4

255,0,26,0.2

--color-text-red

--color-bg-red

--color-pill-red

Dark mode colors

Dark Mode

NameTextBGSelectText ColorBG ColorSelect ColorText CSS VariableBG CSS VariableSelect CSS Variable

Default

Default

255,255,255,0.9

#2F3437

206,205,202,0.5

--color-text-default

--color-bg-default

--color-pill-default

Gray

Gray

151,154,155,0.95

#454B4E

151,154,155,0.5

--color-text-gray

--color-bg-gray

--color-pill-gray

Brown

Brown

#937264

#434040

147,114,100,0.5

--color-text-brown

--color-bg-brown

--color-pill-brown

Orange

Orange

#FFA344

#594A3A

255,163,68,0.5

--color-text-orange

--color-bg-orange

--color-pill-orange

Yellow

Yellow

#FFDC49

#59563B

255,220,73,0.5

--color-text-yellow

--color-bg-yellow

--color-pill-yellow

Green

Green

#4DAB9A

#354C4B

77,171,154,0.5

--color-text-green

--color-bg-green

--color-pill-green

Blue

Blue

#529CCA

#364954

82,156,202,0.5

--color-text-blue

--color-bg-blue

--color-pill-blue

Purple

Purple

#9A6DD7

#443F57

154,109,215,0.5

--color-text-purple

--color-bg-purple

--color-pill-purple

Pink

Pink

#E255A1

#533B4C

226,85,161,0.5

--color-text-pink

--color-bg-pink

--color-pill-pink

Red

Red

#FF7369

#594141

255,115,105,0.5

--color-text-red

--color-bg-red

--color-pill-red

Guides and Instructions

Adding a custom domain to your site

To add a domain to your site, first head into your site editor (cog icon) and click into the "Domains" page, then click the "Add a custom domain" button. After entering your own domain address in the popup, you'll then need to make some changes to the DNS settings through your hosting provider.

You would need to do this through your domain registrar's (GoDaddy, Namecheap, Google Domains, etc) or DNS provider's (Cloudflare, Netlify, etc) website. For specific instructions, view the content inside the toggle blocks below.

DNS Settings

Below you can find the DNS settings that need to be included on your domain registrar's (GoDaddy, Namecheap, Google Domains, etc) or DNS provider's (Cloudflare, Netlify, etc) website.

Root domain records

For a root domain like example.com you'll need to add the following records:

TypeNameValue
A

76.76.21.21

CNAME

cname.super.so

Subdomain records

For a subdomain like blog.example.com add this record:

TypeNameValue
CNAME

cname.super.so

If you run into issues, please make sure that you have:

  • Added new DNS records to your domain provider
  • Removed old DNS records
  • Waited up to 24 hours for new settings to propagate
💡
This tool can be used to check if the records are set up correctly: https://www.whatsmydns.net/

← Previous

Blocks