Example | Tanner Sims

Alerts

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions

Summary and details

Click me for a deeper explanation.

Here is the extra content that is now opt-in. Maybe it is additional complexity, or maybe it is just a tangent that not all users may be interested in.

And here is a code block inside:

def my_example_function(parameter_a: int, parameter_b: int) -> int:
    return parameter_a + parameter_b

Caution

Advises about risks or negative outcomes of certain actions

Can be as long or short as you want to make them.

And even a summary inside a summary

These are not the droids you are looking for!

Note

Nested summarized are not advised behavior…

Astro Sphere is designed to be configurable. This article will cover the basics on configuring the site and make it personal.

First let’s change the url

astro.config.mjs

export default defineConfig({
  site: "https://astro-sphere.vercel.app", // your domain here
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
})

Next, Let’s configure the Site

src/consts.ts

export const SITE: Site = {
  TITLE: "Astro Sphere",
  DESCRIPTION: "Welcome to Astro Sphere, a portfolio and blog for designers and developers.",
  AUTHOR: "Mark Horn",
}

Field	Type	Description
TITLE	String	The title of the website. Displayed in header and footer. Used in SEO.
DESCRIPTION	String	The description of the index page of the website. Used in SEO.
AUTHOR	String	Your name.

Change the branding

The browser icon is located in /public/favicon.svg

The header and footer branding icon is located in /public/brand.svg as a sprite with id=“brand”

The rest of the consts file

Each page has a metadata entry that is useful for SEO.

src/consts.ts

export const WORK: Page = {
  TITLE: "Work",
  DESCRIPTION: "Places I have worked.",
}

The links that are displayed in the header and drawer

src/consts.ts

export const LINKS: Links = [
  { HREF: "/", TEXT: "Home" },
  { HREF: "/work", TEXT: "Work" },
  { HREF: "/blog", TEXT: "Blog" },
  { HREF: "/projects", TEXT: "Projects" },
]

The social media links

src/consts.ts

export const SOCIALS: Socials = [
  { 
    NAME: "Github",
    ICON: "github",
    TEXT: "markhorn-dev",
    HREF: "https://github.com/markhorn-dev/astro-sphere"
  },
]

Field	Type	Required	Description
NAME	string	yes	Accessible name
ICON	string	yes	Refers to the symbol id in `public/social.svg`
TEXT	string	yes	Shorthand profile name
HREF	string	yes	The link to the social media profile