DOCSEARCHbyAlgolia
Submit Docs

Odyssey Theme

repository·main·Indexed 21 days ago

https://github.com/treefarmstudio/odyssey-theme

A high-performance, SEO-optimized marketing website starter built with Astro for businesses and startups. Version 3.1.0 features a fully themeable UI, a built-in blog with MDX support, ready-to-use components, and a Lit-based theme switcher. It includes pre-configured contact forms, local font setup, and customizable CSS properties for colors, shapes, and layout.

Tokens
6K
Snippets
24
Records
29
Agent score
68%

What's inside odyssey-theme

  1. Overview of Odyssey Theme features

    main

    Odyssey Theme is a modern starter/theme for business or startup marketing websites. Key features include:

    • Performance: Blazing fast performance with a perfect Lighthouse score thanks to Astro.
    • Content: A full-featured blog with tagging support.
    • Customization: Fully themeable styles for buttons, shapes, backgrounds, and surfaces. Includes a theme switcher component for easy style changes.
    • SEO: Built-in SEO best practices including Open Graph, Canonical URLs, and sitemaps.
    • Components: A package of ready-to-use UI components and responsive, mobile-friendly landing pages.
    • Forms: Pre-configured contact forms compatible with Netlify, Formspree, Formspark, etc.
    • Fonts: Performant local fonts setup.

  2. Quickstart: Install and run Odyssey Theme

    main

    To get started with the Odyssey Theme locally, navigate to the theme directory, install the dependencies using npm, and start the development server.

    Note: This project is built on Astro, so ensure you have a compatible Node.js environment installed.

    cd theme
npm install
npm start

  3. Replace the site logo

    main

    To change the logo across the entire site, replace the content of src/components/Logo.astro with your company's SVG code or an <img> tag.

    Alternatively, many components in the theme include a <slot /> for the logo, allowing you to pass a custom logo component or element directly where needed.

    <p class="odyssey-logo">Odyssey</p>

<style>
  .odyssey-logo {
    width: fit-content;
    margin: 0;
    font-family: var(--theme-font-family-serif);
    font-size: var(--font-size-md);
    color: inherit;
  }
  .odyssey-logo:hover {
    text-decoration: underline;
    cursor: pointer;
  }
</style>

  4. Disable the theme switcher

    main

    If you do not plan to use the theme switcher (the component found on the demo's home page), you should disable it in your configuration to remove the associated components and JavaScript from your site.

    Modify the enableThemeSwitcher property in src/config/settings.js and set it to false.

    export default {
  title: `Odyssey Astro Theme | A Marketing Website Theme for Startups and Businesses`,
  description: `A simple, clean, and modern theme a startup or businesses' marketing website.`,
  ...
  enableThemeSwitcher: false,
};

  5. Create a blog post using MDX and the Post layout

    main

    To create a new blog post in the Odyssey Theme, create an .mdx file and include a YAML frontmatter block. The frontmatter must specify the Post.astro layout and provide metadata such as title, description, publishDate, featuredImage, excerpt, and tags. The content of the post is written in Markdown below the frontmatter.

    Required/Supported Frontmatter Keys:

    • layout: Must be set to '../../../layouts/Post.astro' (or the appropriate relative path to the Post layout).
    • title: The title of the post.
    • description: A brief description for SEO and previews.
    • publishDate: The date the post is published.
    • featuredImage: The path to the header image (e.g., '/assets/images/blog/...').
    • excerpt: A short summary used for blog listing pages.
    • tags: An array of strings for categorizing the post.
    ---
layout: '../../../layouts/Post.astro'
title: Top 10 Reasons To Consider A Hybrid Work Model
description: This is a sample blog post for Odyssey
publishDate: February 22, 2021
featuredImage: '/assets/images/blog/consider-hybrid-work/featured.jpg'
excerpt: 'This is also a sample blog post for the Odyssey Theme.'
tags: ['Remote Work']
---

Your post content goes here...

  7. Customize theme styles using CSS custom properties

    main

    Odyssey Theme's appearance is controlled via top-level CSS custom properties located in src/styles/theme.css.

    If you are only using a single theme, you can delete all [data-theme] rules from theme.css and keep only the :root block. This allows you to define a single global look and feel for your site.

    :root {
	/* Theme Colors */
	--theme-primary: hsl(0, 0%, 0%);
	--theme-primary-hover: hsl(0, 0%, 20%);
	--theme-on-primary: #fff;

	--theme-bg: #fff;
	--theme-on-bg: #000;

	--theme-surface-1: #f2f2f2;
	--theme-on-surface-1: #000;

	--theme-surface-2: #cce6d0;
	--theme-on-surface-2: #000;

	/* Theme Shapes */
	--theme-shape-radius: clamp(1rem, 2rem, 3rem);
	--theme-button-border-radius: 3rem;

	/* Theme Transition */
	--theme-transition: 0.2s ease-in-out;

	/* Theme Layout */
	--section-margin: 3rem;
	--theme-grid-gap: 1rem;
	--container-max-width: 1440px;
	--container-max-width-narrow: 960px;
	--container-padding: 0 1rem;

	--theme-blog-post-header-width: 1200px;

	/* Theme Fonts */
	--theme-font-family-serif: 'Roboto Serif', Georgia, Cambria, 'Times New Roman',
		Times, serif;
	--theme-font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont,
		sans-serif;
}

  12. Create a blog post using MDX

    main

    To create a blog post in the Odyssey Theme, use an .mdx file. You must define the frontmatter to specify the layout and metadata, and you can import specialized components like YouTubeEmbed to enhance your content.

    Required Frontmatter Fields

    • layout: The path to the Astro layout component (e.g., '../../../layouts/Post.astro').
    • title: The title of the post.
    • description: A brief summary of the post.
    • publishDate: The publication date.
    • featuredImage: The path to the post's featured image.
    • excerpt: (Optional) A summary used in blog previews. If provided, it will appear in the preview instead of the default content.
    • tags: An array of strings for categorizing the post.
    ---
layout: '../../../layouts/Post.astro'
title: Is Remote Work Better For Your Mental Health?
description: This is a sample blog post for Odyssey
publishDate: July 4, 2021
featuredImage: '/assets/images/blog/remote-work-mental-health/featured.jpg'
excerpt: 'This is a sample blog post for the Odyssey Theme. If an excerpt is provided it will appear in the preview.'
tags: ['Remote Work']
---

import {YouTubeEmbed} from '@components/odyssey-theme'

# Post Content Here