This is alfadev-astro-starter

Here are some of the features that make this template a great choice for your next project.

You love Markdown?

We've got you covered. This template is built with MDX and Astro. You can write your content in Markdown and use React or Astro components to add complexity and interactivity. Fast, organized, and easy to use.

In fact, everything you see here is written in Markdown. Exciting, isn't it?

---
title: "Features"
page_title: "This is alfadev-astro-starter"
description: "Here are some of the features that make this template a great choice for your next project."
show_description: true
---

<Section
  section={{
    title: "You love Markdown?",
    content:
      "We've got you covered. This template is built with <span class='text-[#fcb32c] font-bold'>MDX</span> ...",
  }}
/>
...

A codeblock with mdx inside a markdown file, how meta!

The content stays in place

The site content is separated from the layout, so it feels intuitive and you can change the layout without affecting the content. The content is written either in Markdown (for static pages) or in configuration files (for core site data).

// @/config/config.json
{
  "site": {
    "title": "alfadev-astro-starter",
    "base_url": "https://astro-starter.alfadev.io",
    "base_path": "/",
    "trailing_slash": false,
    "favicon": "/images/favicon.ico",
    ...
  },
  ...
}

<html lang="en">
<head>
<!-- favicon -->
<link rel="shortcut icon" href="/images/favicon.ico">
<!-- title -->
<title>alfadev-astro-starter</title>
...

Support for TypeScript and JavaScript

Astro does, so does the starter.
We all know theres a love-hate relationship with TypeScript. This template is built with TypeScript, so you can enjoy the benefits of static typing and code completion. But if you're not a fan, you can easily remove it and use plain JavaScript.

In Fact, theres examples of both in the codebase.

Astro content configuration is written in TypeScript, so you can have type safety and code completion when creating new pages at start.

export interface PageConfig {
  document_title?: string;
  meta_title?: string;
  meta_description?: string;
  meta_keywords?: string[];
  meta_author?: string;
  canonical_url?: string;
  noindex?: boolean;
  meta_image?: string;
}

export interface PageCommonProps {
  title: string;
  description?: string;
  buttons?: LinkButton[] & { length: 0 | 1 | 2 | 3 | 4 };
  sections?: PageSection[];
}

export type PageType<data_type = any> = PageCommonProps & PageConfig & { data: data_type };

const zodPageConfig = z.custom<PageType>();

// Pages collection schema
const pagesCollection = defineCollection({
  type: "content",
  schema: zodPageConfig,
});

const indexSchema = z.intersection(
  z.object({
    banner: z.custom<Section>(),
    features: z.object({
      title: z.string(),
      description: z.string(),
      feaure_list: z.any(),
    }),
    testimonial: z.custom<Testimonial>(),
    call_to_action: z.object({
      title: z.string(),
      description: z.string(),
      button: z.custom<LinkButton>(),
    }),
  }),
  zodPageConfig,
);

const indexPage = defineCollection({
  type: "content",
  schema: indexSchema,
});

// Export collections
export const collections = {
  about: pagesCollection,
  changelog: pagesCollection,
  contact: pagesCollection,
  features: pagesCollection,
  homepage: indexPage,
  pages: pagesCollection,
};

Layout is ready and recognizable

The layout is ready to go. It's responsive, accessible, and SEO-friendly. It's built with Tailwind CSS tailwind-bootstrap-grid plugin. You can customize it to fit your needs or start adding content right away.

<div class="container border-4 border-primary h-full content-center">
  <div class="row border-4 border-secondary">
    <div class="col-12 md:col-6 lg:col-3 border-accent">
      <p>Column 1</p>
    </div>
    <div class="col-12 md:col-6 lg:col-3 border-accent">
      <p>Column 2</p>
    </div>
    <div class="col-12 md:col-6 lg:col-3 border-accent">
      <p>Column 3</p>
    </div>
    <div class="col-12 md:col-6 lg:col-3 border-accent">
      <p>Column 4</p>
    </div>
  </div>
</div>

Column 1

Column 2

Column 3

Column 4

Ready to fit your theme

The template is designed to be easily customizable. You can change the colors, fonts, and layout to fit your brand. It's built with Sass and Tailwind CSS, so you can easily change the styles to match your brand.

  // @/styles/theme.scss

  $default: (
    "primary": #1164a3,
    "secondary": #199AFC,
    "accent": #ff5a02,
    "background": #f9f9f9,
    "background-contrast": #141414,
    "surface": #ffffff,
    "surface-contrast": #000000,
    "border": #f5f5f5,
    "text": #2a2a2a,
    "text-secondary": #494949,
    "text-disabled": #999999,
  );

  $dark: (
  ...
  );