Getting Started

Learn how to start building your next documentation site with Stellar.

Create a project

Create a new repo from this template.

Setting up workspace

Here are some vscode extensions you should install:

Astro provides language support for .astro files, syntax highlighting and more
Tailwind gives you intellisense for tailwind utility classes
Eslint intergrates eslint into vscode
MDX adds language support for .mdx files
Prettier integrates prettier into vscode

But even if you don’t install them it’s not that big of a deal.

Config

Go to src/config.ts and configure those values
Set GET_STARTED_LINK to a link where user should go after he presses get started button on landing page or docs link in nav (set it to first link in sidebar)
Go to src/astro.config.mjs and inside site enter your website url
src/astro.config.mjs
```
export default defineConfig({
  site: 'https://your-website-url.com',
})
```

I18N Config

Single language docs

If you want to have your docs only in one language (I don’t suggest you doing this unless you really want to) do the following:

Inside src/config.ts set SINGLE_LANGUAGE to true if you haven’t already
Inside src/i18n/ui.ts in LANGUAGES object leave only the language you want to use, and in the same file remove all data from old languages
Inside src/i18n/sidebar.ts delete all data from old languages

Inside src/components/navigation in both Nav.astro and MobileNav.astro components inside getDocs function leave only language you want to use

const getDocs = async () => {
  let docs: null | MarkdownInstance<any>[] = null

  switch (lang) {
    case 'en':
      docs = await Astro.glob(`@/pages/en/**`)
      break
    case 'sr':
      docs = await Astro.glob(`@/pages/sr/**`)
      break
  }

  docs = await Astro.glob(`@/pages/en/**`)
  // change this path so it fits your language

  return docs.map((doc: MarkdownInstance<any>) => {
    return {
      title: doc.frontmatter.title,
      description: doc.frontmatter.description,
      url: doc.url,
    } as MarkdownRecord
  })
}

Inside src/pages delete all astro files that are not index.astro and delete all folders except your lang folder

Multi language docs

Inside src/i18n/ui.ts in LANGUAGES object add all languages you wanna have your docs translated to
Inside src/i18n/sidebar.ts delete all data from old languages, and add data from new languages

Inside src/components/navigation in both Nav.astro and MobileNav.astro components inside getDocs add cases for each language you wanna use.

const getDocs = async () => {
  let docs: null | MarkdownInstance<any>[] = null

  switch (lang) {
    case 'en':
      docs = await Astro.glob(`@/pages/en/**`)
      break
    case 'sr':
      docs = await Astro.glob(`@/pages/sr/**`)
      break
    case 'es':
      docs = await Astro.glob(`@/pages/es/**`)
      break
  }

  return docs.map((doc: MarkdownInstance<any>) => {
    return {
      title: doc.frontmatter.title,
      description: doc.frontmatter.description,
      url: doc.url,
    } as MarkdownRecord
  })
}

Inside src/pages delete all folders except your current lang folders.

Also inside src/pages add a astro file for each lang except DEFAULT_LANGUAGE defined in config.ts

e.g. You have 4 languages.

export const LANGUAGES = {
  en: 'English',
  sr: 'Srpski',
  es: 'Español',
  fr: 'Français'
} as const

And let’s say you have only index.astro.

You will create sr.astro, es.astro, and fr.astro.

---
import LandingPage from '@/components/LandingPage.astro'
import { LANDING_PAGE } from '@/i18n/ui'
---

<LandingPage t={LANDING_PAGE.sr} />

---
import LandingPage from '@/components/LandingPage.astro'
import { LANDING_PAGE } from '@/i18n/ui'
---

<LandingPage t={LANDING_PAGE.es} />

---
import LandingPage from '@/components/LandingPage.astro'
import { LANDING_PAGE } from '@/i18n/ui'
---

<LandingPage t={LANDING_PAGE.fr} />

Basically for every language you create make a new astro page and name it after that language code, and import <LandingPage /> and pass LANDING_PAGE object to t prop with that language code property.

Edit this page