Logo
    Get Aether

    Search

    Getting Started

    Using Aether

    Blocks

    Documentation

    Design System

    Get Aether

    Aether
    Aether
    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.
    ⚡
    Check out the official Super documentation built using Aether here

    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.

    A .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.

    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

    Name
    Text
    BG
    Select
    Text Color
    BG Color
    Select Color
    Text CSS Variable
    BG CSS Variable
    Select CSS Variable
    Default

    Default

    Default

    #37352F

    #FFFFFF

    206,205,202,0.5

    --color-text-default

    --color-bg-default

    --color-pill-default

    Gray

    Gray

    ‎

    Gray

    #9B9A97

    #EBECED

    155,154,151,0.4

    --color-text-gray

    --color-bg-gray

    --color-pill-gray

    Brown

    Brown

    ‎

    Brown

    #64473A

    #E9E5E3

    140,46,0,0.2

    --color-text-brown

    --color-bg-brown

    --color-pill-brown

    Orange

    Orange

    ‎

    Orange

    #D9730D

    #FAEBDD

    245,93,0,0.2

    --color-text-orange

    --color-bg-orange

    --color-pill-orange

    Yellow

    Yellow

    Yellow

    #DFAB01

    #FBF3DB

    233,168,0,0.2

    --color-text-yellow

    --color-bg-yellow

    --color-pill-yellow

    Green

    Green

    Green

    #0F7B6C

    #DDEDEA

    0,135,107,0.2

    --color-text-green

    --color-bg-green

    --color-pill-green

    Blue

    Blue

    Blue

    #0B6E99

    #DDEBF1

    0,120,223,0.2

    --color-text-blue

    --color-bg-blue

    --color-pill-blue

    Purple

    Purple

    Purple

    #6940A5

    #EAE4F2

    103,36,222,0.2

    --color-text-purple

    --color-bg-purple

    --color-pill-purple

    Pink

    Pink

    Pink

    #AD1A72

    #F4DFEB

    221,0,129,0.2

    --color-text-pink

    --color-bg-pink

    --color-pill-pink

    Red

    Red

    Red

    #E03E3E

    #FBE4E4

    255,0,26,0.2

    --color-text-red

    --color-bg-red

    --color-pill-red

    Dark mode colors

    Dark Mode

    Name
    Text
    BG
    Select
    Text Color
    BG Color
    Select Color
    Text CSS Variable
    BG CSS Variable
    Select CSS Variable
    Default

    Default

    Default

    255,255,255,0.9

    #2F3437

    206,205,202,0.5

    --color-text-default

    --color-bg-default

    --color-pill-default

    Gray

    Gray

    ‎

    Gray

    151,154,155,0.95

    #454B4E

    151,154,155,0.5

    --color-text-gray

    --color-bg-gray

    --color-pill-gray

    Brown

    Brown

    ‎

    Brown

    #937264

    #434040

    147,114,100,0.5

    --color-text-brown

    --color-bg-brown

    --color-pill-brown

    Orange

    Orange

    ‎

    Orange

    #FFA344

    #594A3A

    255,163,68,0.5

    --color-text-orange

    --color-bg-orange

    --color-pill-orange

    Yellow

    Yellow

    Yellow

    #FFDC49

    #59563B

    255,220,73,0.5

    --color-text-yellow

    --color-bg-yellow

    --color-pill-yellow

    Green

    Green

    Green

    #4DAB9A

    #354C4B

    77,171,154,0.5

    --color-text-green

    --color-bg-green

    --color-pill-green

    Blue

    Blue

    Blue

    #529CCA

    #364954

    82,156,202,0.5

    --color-text-blue

    --color-bg-blue

    --color-pill-blue

    Purple

    Purple

    Purple

    #9A6DD7

    #443F57

    154,109,215,0.5

    --color-text-purple

    --color-bg-purple

    --color-pill-purple

    Pink

    Pink

    Pink

    #E255A1

    #533B4C

    226,85,161,0.5

    --color-text-pink

    --color-bg-pink

    --color-pill-pink

    Red

    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:

    Type
    Name
    Value
    A
    @

    76.76.21.21

    CNAME
    www

    cname.super.so

    Subdomain records

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

    Type
    Name
    Value
    CNAME
    (your subdomain)

    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

    Next →

    Design System

    On this page

    • Documentation
    • Code Documentation
    • Environment Variables
    • Accessing Environment Variables in the browser.
    • Add .env* files to .gitignore
    • Reference Tables
    • Light mode colors
    • Dark mode colors
    • Guides and Instructions
    • Adding a custom domain to your site
    • DNS Settings
    • Root domain records
    • Subdomain records
    Logo

    Content from Notion – powered by Super.

    XDiscordYouTube
    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