Repository files navigation

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

• 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
    • Storage Mode Configuration
    • Accessing Keystatic Admin UI
    • 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

• 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.

• 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.

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

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

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].gitcd [YOUR_REPO_NAME]

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 thepackage.json file.

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: TheNode adapter supportspreview for builds generated with on-demand rendering.
• npm run build: Generates the required server files for deployment.

DataNova is configured forServer-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:

import{defineConfig}from'astro/config';importnetlifyfrom'@astrojs/netlify';exportdefaultdefineConfig({// ...output:'server',adapter:netlify(),});

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

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

The navigation bar links are stored in theutils/navigation.ts file. To add or modify links, update thenavigationLinks array:

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

Replacelabel with the desired display text and usehref to specify the corresponding page path.

Use these links in theNavbar.astro:

   <divclass="grow">{navigationLinks.map((link)=> (         <ahref={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>

ThecurrentPath variable is used to highlight the active link in the navigation.

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 theutils/megaMenu/* files. For example, the downloads mega menu is stored inutils/megaMenu/downloads.ts:

exportconstdownloadsMenu=[{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 theutils/megaMenu/ directory.

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

   ---   import{downloadsMenu} from "@utils/megaMenu/downloads";   const currentPath = Astro.url.pathname;   ---   <divclass="hs-dropdown">     <buttonclass={`hs-dropdown-toggle ${currentPath.startsWith("/downloads")?"underline":"" }`}>       Downloads     </button>     // ...     <divclass="hs-dropdown-menu">{downloadsMenu.map((section)=> (           <div>             <p>{section.sectionTitle}</p>{section.items.map((item)=> (               <ahref={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 theMegaMenu components to theNavbar.astro component.

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

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

---// ...// Company Informationconst companyName="Your Company Name";const companyDescription="Brief company description";// Contact Detailsconst 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 & Attributionconst craftedBy= {  name:"Your Name",  url:"[https://yourwebsite.com](https://yourwebsite.com)"};const trademarkNotice="Your trademark information";---

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

---// ...importFooterFormExpandedfrom"@ui/forms/FooterFormExpanded.astro";// Import data for dynamic renderingimport {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.

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

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

• Modifytitle,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 thetitle variable:

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

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

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

• Local Mode: Visithttp://127.0.0.1:4321/keystatic to access the Admin UI in development.
• GitHub Mode: Once deployed, access the Admin UI athttps://your_domain.com/keystatic.

Keystatic allows you to configure the storage mode inkeystatic.config.ts. You can set the mode to eitherlocal orgithub:

// ...letKEYSTATIC_STORAGE_MODE="local";constGITHUB_REPO_OWNER="REPO_OWNER";constGITHUB_REPO_NAME="REPO_NAME";exportdefaultconfig({storage:(KEYSTATIC_STORAGE_MODEas"github")==="github"      ?{kind:"github",repo:`${GITHUB_REPO_OWNER}/${GITHUB_REPO_NAME}`,}      :{kind:"local",},// ...});

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

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

// ...importkeystaticfrom'@keystatic/astro';exportdefaultdefineConfig({integrations:[react(),markdoc(), ...(process.env.SKIP_KEYSTATIC ?[] :[keystatic()])],});

import{defineConfig}from'astro/config';// ...constisDev=process.env.NODE_ENV==="development"exportdefaultdefineConfig({// ...integrations:[// ...     ...(isDev ?[keystatic()] :)// Uses the integration conditionally],output:isDev ?'server' :'static'// Only set server rendering for dev mode});

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

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.

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

1. Sign up and create a database:

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

2. 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 URLASTRO_DB_APP_TOKEN=your_turso_db_token# Create a database token

3. 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!

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";constFeedback=defineTable({columns:{slug:column.text({primaryKey:true}),helpful:column.number({default:0}),notHelpful:column.number({default:0})},});exportdefaultdefineDb({tables:{ Feedback},});

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

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

InBaseLayout.astro, theSEO component fromastro-seo is used to define global SEO settings liketitle,description,openGraph, andtwitter metadata. Page-specific SEO settings can be overridden by passingseo props to theBaseLayout component, as shown in the example below:

---//...const seo= {  title:"About DataNova",  description:"Learn more about DataNova...",};---<BaseLayoutseo={seo}>{/* ... page content ...*/}</BaseLayout>

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

InBaseLayout.astro, the Schema component fromastro-seo-schema is used to define default schema.org data for the website. Page-specific schema.org data can be added by passingschema props to theBaseLayout component, as shown in the example below.

---// ...importtype {WithContext,Thing }from"schema-dts";const schema:WithContext<Thing>= {// ... schema.org metadata};---<BaseLayoutschema={schema}>{/* ... page content ...*/}</BaseLayout>

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

InBaseLayout.astro, theAstroFont component is used to define font configurations, includingname,src,preload,display,selector, andfallback options. This ensures fonts are loaded efficiently and applied to the correct elements.

TheClientRouter component fromastro:transitions enables client-side routing with page transitions, providing a smoother and more interactive user experience.

InBaseLayout.astro, theClientRouter component is included to activate client-side routing. This allows for page transitions and improves navigation performance.

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-maintainedSitemap Extensions package.

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

1. Reporting Issues: Feel free to use the issue tracker to report bugs or request features.
2. 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.
3. Providing Feedback: Share your thoughts on the project's current features and suggest improvements.

This project is released under the MIT License. Please read theLICENSE 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.