Astro Sphere: Primeiros Passos

O Astro Sphere foi projetado para ser configurável. Este artigo cobre o básico para personalizar o site.

Primeiro, vamos alterar a URL

//astro.config.mjs

export default defineConfig({
  site: "https://astro-sphere.vercel.app", // seu domínio aqui
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
})

Em seguida, vamos configurar o Site

// src/consts.ts

export const SITE: Site = {
  TITLE: "Astro Sphere",
  DESCRIPTION: "Bem-vindo ao Astro Sphere, portfólio e blog para designers e desenvolvedores.",
  AUTHOR: "Mark Horn",
}

Altere a identidade visual

O ícone do navegador está em /public/favicon.svg

O ícone de marca do cabeçalho e rodapé está em /public/brand.svg como um sprite com id=“brand”

O restante do arquivo consts

Cada página possui uma entrada de metadados útil para SEO.

export const WORK: Page = {
  TITLE: "Experiências",
  DESCRIPTION: "Lugares onde trabalhei.",
}

Os links exibidos no cabeçalho e no menu lateral

export const LINKS: Links = [
  { HREF: "/", TEXT: "Home" },
  { HREF: "/experiencias", TEXT: "Experiências" },
  { HREF: "/blog", TEXT: "Blog" },
  { HREF: "/projetos", TEXT: "Projetos" },
]

Os links para redes sociais

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