Versatile Astro Template for Multi-Page Websites

DataNova is an open-source, multi-page website template designed for flexibility — perfect for marketing sites, documentation hubs, and dynamic applications. Built with Astro, Tailwind CSS, and Preline UI, it seamlessly integrates with Keystatic CMS and Astro DB for effortless content management and data handling.

Why Choose DataNova?
- Features
What's New
Getting Started
Deployment
Project Structure
Customization
- Navigation
- Content Sections and Common Components
  - Tailwind CSS Customization
Content Management
- Keystatic CMS
Data Handling with Astro DB
- Create a Turso Database
  - Database Configuration
Integrations and Enhancements
Contributing
License

Why Choose DataNova?

Versatile: Build a variety of websites, from blogs and landing pages to complex applications.
Easy content management: Keystatic CMS makes it simple to manage and update your content.
Modern technology: Built with Astro for fast, lightweight, and SEO-friendly websites.
Developer-friendly: Modular, customizable, and extendable architecture.

Features

Multi-page structure: Suitable for websites with various sections and content types.
Content collections: Organize and manage different types of content efficiently.
Keystatic CMS: Streamlined content management for easy editing and updates.
Astro DB integration: Facilitates data handling and feedback collection.
Feedback component: Allows users to provide feedback, stored in Astro DB with Turso.
Tailwind CSS: Utility-first styling for rapid UI development and customization.
Preline UI: Interactive components like navbars and modals for enhanced user experience.
Astro SEO: Manage SEO metadata and schema.org data for improved search engine visibility.
Astro Font: Optimized font loading and preloading for better performance.
Client-Side Router: Enables client-side routing with page transitions for smoother navigation.

What's New

Note

Currently, there are no planned improvements or known bugs. If you encounter any issues, please report them on our issues page or start a discussion to share ideas, suggestions, or ask questions.

Getting Started

This guide will provide you with the necessary steps to set up and familiarize yourself with the Astro project on your local development machine.

Use This Template

Click the Use this template button at the top right of the repository to create your own repo based on this template.

Clone the Repository

Once your repository is created, you can clone it to your local machine using the following commands:

git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]

Installation

Start by installing the project dependencies using your preferred package manager. Open your terminal, navigate to the project's root directory, and execute:

npm install

This command will install all the necessary dependencies defined in the package.json file.

Development Commands

With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:

npm run dev: Runs Astro's development server.
npm run preview: The Node adapter supports preview for builds generated with on-demand rendering.
npm run build: Generates the required server files for deployment.

Tip

Need more details? Check out the Astro's documentation.

Deployment

DataNova is configured for Server-Side Rendering (SSR) and comes with the Vercel adapter pre-installed. You can deploy it by connecting your GitHub repository to Vercel.

Click the button below to start deploying your project on Vercel:

Important

Before deploying, configure the required environment variables. See Astro DB and Keystatic CMS for details.

ASTRO_DB_REMOTE_URL (database URL - required for feedback component)
ASTRO_DB_APP_TOKEN (database token - required for feedback component)
SKIP_KEYSTATIC=true (to disable Keystatic Admin UI in production if using local mode)

Note

SSR is used because Keystatic requires server-side execution for its API routes. If you only intend to use Keystatic for local development, you can configure the project for static output as described in the Keystatic CMS section.

Tip

If you're deploying to a different platform, you may need to install a different adapter. Astro provides official adapters for various platforms, including Netlify, Cloudflare, and Node.js. You can find a list of adapters in the Astro documentation.

To change the adapter, you'll need to modify the astro.config.mjs file. For example, to use the Netlify adapter, you would install it with npx astro add netlify and then update your astro.config.mjs file like this:

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
   // ...
   output: 'server',
   adapter: netlify(),
});

Project Structure

DataNova organizes modular sections, components, content, and layout to streamline development and content management.

├── db/                                  # Contains the database schema and migrations
├── public/                              # Static assets that are served directly
└── src/
    ├── assets/
    │   ├── images/                      
    │   └── styles/                      # CSS styles and Tailwind configuration
    ├── components/
    │   ├── common/                      # Commonly used components across the site
    │   ├── sections/                    # Components for specific website sections
    │   └── ui/                          # UI components (forms, icons, buttons)
    ├── content/                         # The articles and reference collection of Markdoc files
    │   ├── articles/
    │   └── reference/
    ├── data/                            # The spreadsheets and whitepapers collection of JSON files
    │   ├── spreadsheets/
    │   └── whitepapers/
    ├── layout/
    │   └── BaseLayout.astro             # A site-wide wrapping page template
    ├── pages/                           # Astro files representing individual pages and website sections
    │   ├── api/
    │   │   └── feedback.ts              # Handles feedback submissions
    │   ├── downloads/
    │   ├── support/
    │   │   └── articles/
    │   │       ├── [id].astro
    │   │       └── index.astro
    │   ├── 404.astro                    # Custom 404 page
    │   ├── about.astro
    │   ├── contact.astro
    │   ├── index.astro                  # The landing/home page
    │   └── robots.txt.ts                # Dynamically generates robots.txt
    ├── utils/                           # Shared utility functions and helpers
    └── content.config.ts                # Contains content collections configuration options

Customization

This section provides guidance on customizing various aspects of the DataNova template, including the navigation bar, mega menu, footer, and sections.

Navigation

Navigation Bar Links

The navigation bar links are stored in the utils/navigation.ts file. To add or modify links, update the navigationLinks array:

export const navigationLinks = [
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
];

Replace label with the desired display text and use href to specify the corresponding page path.

Use these links in the Navbar.astro:

   <div class="grow">
     {
       navigationLinks.map((link) => (
         <a
           href={link.href}
           class={`flex items-center rounded-lg p-2 font-medium text-slate-800 hover:bg-slate-100 ${
             currentPath === link.href ? "underline underline-offset-4" : ""
           }`}
           aria-current={currentPath === link.href ? "page" : undefined}
         >
           {link.label}
         </a>
       ))
     }
   </div>

The currentPath variable is used to highlight the active link in the navigation.

Mega Menu Links

The mega menu allows you to create dropdown menus with multiple sections and links. This data, including icons, links, titles, and descriptions, is stored in the utils/megaMenu/* files. For example, the downloads mega menu is stored in utils/megaMenu/downloads.ts:

   export const downloadsMenu = [
     {
       sectionTitle: "Download",
       items: [
         {
           icon: "download",
           title: "DataNova Core",
           description: "Download the free trial version.",
           href: "/downloads/datanova-core",
         },
       ],
     },
     {
       sectionTitle: "Licensing",
       items: [
         { icon: "badge", title: "License Options", href: "/downloads/license-options" },
         { icon: "chatBubble", title: "Request a Quote", href: "/downloads/request-quote" },
       ],
     },
   ];

Create new mega menu sections by adding files to the utils/megaMenu/ directory.

The MegaMenu/*.astro components generate the mega menu. For example, the downloads mega menu is generated by the src/components/common/MegaMenu/Downloads.astro component:

   ---
   import { downloadsMenu } from "@utils/megaMenu/downloads";
   const currentPath = Astro.url.pathname;
   ---
   <div class="hs-dropdown">
     <button class={`hs-dropdown-toggle ${ currentPath.startsWith("/downloads") ? "underline" : "" }`}>
       Downloads
     </button>
     // ...
     <div class="hs-dropdown-menu">
       {
         downloadsMenu.map((section) => (
           <div>
             <p>{section.sectionTitle}</p>
             {section.items.map((item) => (
               <a href={item.href}>
                 <p>{item.title}</p>
                 <p>{item.description}</p>
               </a>
             ))}
           </div>
         ))
       }
     </div>
   </div>

To use the mega menu in the navigation bar, import and add the MegaMenu components to the Navbar.astro component.

Tip

Key locations to customize:

@utils/navigation.ts: Navigation bar links
@utils/megaMenu/*: Mega menu configurations
Navbar.astro: Navigation component

Footer Links

This project provides two distinct footer implementations, each offering different features and customization options.

Footer

The basic footer provides a simple layout with core company information, contact details, and a standard subscription form.

---
// ...

// Company Information
const companyName = "Your Company Name";
const companyDescription = "Brief company description";

// Contact Details
const contactDetails = {
  address: "City, State, ZIP",
  phone: "Phone Number",
  email: "contact@example.com",
  website: "[www.yourwebsite.com](https://www.google.com/search?q=https://www.yourwebsite.com)"
};

// Copyright & Attribution
const craftedBy = { 
  name: "Your Name", 
  url: "[https://yourwebsite.com](https://yourwebsite.com)" 
};

const trademarkNotice = "Your trademark information";
---

Expanded Footer

The expanded footer includes detailed navigation links and an alternative subscription form layout.

---
// ...
import FooterFormExpanded from "@ui/forms/FooterFormExpanded.astro";

// Import data for dynamic rendering
import { featuresMenu } from "@utils/megaMenu/features";
import { platformMenu } from "@utils/megaMenu/platform";
import { supportMenu } from "@utils/megaMenu/support";
---

To switch between the basic and expanded footers, replace the import statement in @layouts/BaseLayout.astro with the desired footer component.

---
// ...
import Navbar from "@sections/Navbar.astro";
import Footer from "@sections/Footer.astro"; // Replace with FooterExpanded.astro for the expanded version
---

Tip

Key locations to customize:

Footer.astro: Main basic footer component
FooterExpanded.astro: Expanded footer component
@ui/forms/FooterForm.astro: Basic email subscription form
@ui/forms/FooterFormExpanded.astro: Expanded email subscription form
@common/ContactInfo.astro: Contact information display

Content Sections and Common Components

DataNova's content sections and common components follow a similar structure, making customization easy. To customize content, update variables within component files:

Modify title, subTitle
Update Call-to-Action (CTA) configurations
- primaryCTA
- secondaryCTA
- tertiaryCTA

To change the title of a hero section, locate the corresponding Astro component file and update the title variable:

---
// ...
const title = "My New Title";
---

Tailwind CSS Customization

Color Customization

Modify colors in @styles/global.css
Tailwind Color Customization Docs

Font Customization

Update font families in @styles/global.css
Tailwind Font Family Docs

Utility Classes

Use Tailwind utility classes to fine-tune styling
Tailwind Utility Classes Guide

Tip

Recommended resources:

Content Management

Keystatic CMS

DataNova uses Keystatic CMS for content management. You can edit content through the Keystatic web interface and store it in either your local file system or a GitHub repository

Accessing Keystatic Admin UI

Local Mode: Visit http://127.0.0.1:4321/keystatic to access the Admin UI in development.
GitHub Mode: Once deployed, access the Admin UI at https://your_domain.com/keystatic.

Storage Mode Configuration

Keystatic allows you to configure the storage mode in keystatic.config.ts. You can set the mode to either local or github:

// ...
let KEYSTATIC_STORAGE_MODE = "local";

const GITHUB_REPO_OWNER = "REPO_OWNER";
const GITHUB_REPO_NAME = "REPO_NAME";

export default config({
  storage:
    (KEYSTATIC_STORAGE_MODE as "github") === "github"
      ? {
          kind: "github",
          repo: `${GITHUB_REPO_OWNER}/${GITHUB_REPO_NAME}`,
        }
      : {
          kind: "local",
        },
    // ...
});

The appropriate storage mode is automatically selected based on the configuration.

Disable Admin UI Routes in Production

When using the local strategy, you may want to disable access to /keystatic routes in production. To achieve this, astro.config.mjs was modified as follows:

// ...
import keystatic from '@keystatic/astro';

export default defineConfig({
   integrations: [react(), markdoc(), ...(process.env.SKIP_KEYSTATIC ? [] : [keystatic()])],
});

Important

Setting SKIP_KEYSTATIC=true in your environment variables will prevent Keystatic from mounting in production.

Note

The template uses Server-Side Rendering (SSR) because the API routes in the Keystatic Admin UI need to perform reads/writes on the file system (or GitHub repo), which require server-side execution.

If you only intend to use Keystatic for local development, you can configure Astro for static output and set Keystatic to local storage mode. This will allow you to deploy your project to any static hosting service.

To configure Astro for static output and Keystatic for local storage mode:

Update astro.config.mjs:

 import { defineConfig } from 'astro/config';
 // ...

 const isDev = process.env.NODE_ENV === "development"

 export default defineConfig({
   // ...
   integrations: [
     // ...
     ...(isDev ? [keystatic()] :) // Uses the integration conditionally
   ],
   output: isDev ? 'server' : 'static' // Only set server rendering for dev mode
 });

Update keystatic/config.ts:

import { config, fields, collection } from "@keystatic/core";

let KEYSTATIC_STORAGE_MODE = "local";

Update your dynamic route to use getStaticPaths(). Refer to the Astro documentation for details on generating static content from collections.

Tip

Recommended Resources:

Data Handling with Astro DB

DataNova utilizes Astro DB with Turso for the feedback component. Astro DB is a database integration for Astro that allows you to easily connect to various databases, including Turso. Turso is a serverless database platform that provides a scalable and globally distributed database.

Create a Turso Database

You will need to create a Turso database to use the feedback component.

Sign up and create a database:

Sign up for a Turso account
Create a new database in your Turso dashboard or click below:

Configure environment variables:

Rename .env.template to .env and fill in your specific database credentials:

    ASTRO_DB_REMOTE_URL=your_turso_db_url  # Copy the database URL
    ASTRO_DB_APP_TOKEN=your_turso_db_token  # Create a database token

Push the database schema:

npx astro db push --remote

You should see something like this on a successful push:

Pushing database schema updates...
Push complete!

Database Configuration

The database schema is defined in /db/config.ts. It stores the post slug and the counts for helpful and not helpful feedback:

import { defineDb, defineTable, column } from "astro:db";

const Feedback = defineTable({
columns: {
slug: column.text({ primaryKey: true }),
helpful: column.number({ default: 0 }),
notHelpful: column.number({ default: 0 })
},
});

export default defineDb({
tables: { Feedback },
});

Note

Don't forget to add the environment variables when deploying your site.

Tip

Key locations:

/db/*: Database schema
@common/PostFeedback.svelte: Feedback component
src/pages/api/feedback.ts: API

Recommended resources:

Integrations and Enhancements

DataNova uses several Astro integrations and enhancements to improve its functionality, performance, and developer experience.

Astro SEO

The astro-seo integration helps manage SEO metadata and schema.org data, improving the website's visibility on search engines.

In BaseLayout.astro, the SEO component from astro-seo is used to define global SEO settings like title, description, openGraph, and twitter metadata. Page-specific SEO settings can be overridden by passing seo props to the BaseLayout component, as shown in the example below:

---
//...

const seo = {
  title: "About DataNova",
  description: "Learn more about DataNova...",
};
---

<BaseLayout seo={seo}>
  {/* ... page content ... */}
</BaseLayout>

Astro SEO Schema

The astro-seo-schema integration provides a convenient way to add schema.org structured data to your pages, helping search engines understand the content better.

In BaseLayout.astro, the Schema component from astro-seo-schema is used to define default schema.org data for the website. Page-specific schema.org data can be added by passing schema props to the BaseLayout component, as shown in the example below.

---
// ...
import type { WithContext, Thing } from "schema-dts";

const schema: WithContext<Thing> = {
  // ... schema.org metadata
};
---

<BaseLayout schema={schema}>
  {/* ... page content ... */}
</BaseLayout>

Astro Font

The astro-font integration optimizes font loading and preloading, improving website performance.

In BaseLayout.astro, the AstroFont component is used to define font configurations, including name, src, preload, display, selector, and fallback options. This ensures fonts are loaded efficiently and applied to the correct elements.

Client-Side Router

The ClientRouter component from astro:transitions enables client-side routing with page transitions, providing a smoother and more interactive user experience.

In BaseLayout.astro, the ClientRouter component is included to activate client-side routing. This allows for page transitions and improves navigation performance.

Sitemap Generation

While DataNova doesn't include the official @astrojs/sitemap integration by default, you can easily add it if needed. However, please note that the official integration cannot generate sitemap entries for dynamic routes in SSR mode.

If you require more advanced sitemap generation capabilities, such as including dynamic routes or customizing sitemap entries, you can use the community-maintained Sitemap Extensions package.

Contributing

If you're interested in helping, you can contribute in several ways:

Reporting Issues: Feel free to use the issue tracker to report bugs or request features.
Submitting Pull Requests: If you've fixed a bug or added a new feature, submit a pull request with a clear description of your changes.
Providing Feedback: Share your thoughts on the project's current features and suggest improvements.

License

This project is released under the MIT License. Please read the LICENSE file for more details.

Note: This website template has no affiliation with the companies displayed. Logos are used for demonstration purposes only and should be replaced in customized versions.

Name		Name	Last commit message	Last commit date
Latest commit History 237 Commits
.github		.github
db		db
public		public
src		src
.env.template		.env.template
.gitignore		.gitignore
.prettierrc		.prettierrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
astro.config.mjs		astro.config.mjs
keystatic.config.ts		keystatic.config.ts
package-lock.json		package-lock.json
package.json		package.json
svelte.config.js		svelte.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Uh oh!

License

mearashadowfax/DataNova

Folders and files

Latest commit

History

Repository files navigation

Versatile Astro Template for Multi-Page Websites

Table of Contents

Why Choose DataNova?

Features

What's New

Getting Started

Use This Template

Clone the Repository

Installation

Development Commands

Deployment

Project Structure

Customization

Navigation

Navigation Bar Links

Mega Menu Links

Footer Links

Footer

Expanded Footer

Content Sections and Common Components

Tailwind CSS Customization

Content Management

Keystatic CMS

Accessing Keystatic Admin UI

Storage Mode Configuration

Disable Admin UI Routes in Production

Data Handling with Astro DB

Create a Turso Database

Database Configuration

Integrations and Enhancements

Astro SEO

Astro SEO Schema

Astro Font

Client-Side Router

Sitemap Generation

Contributing

License

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Sponsor this project

Uh oh!

Uh oh!

Contributors 2

Uh oh!

Languages