### Project Setup and Start

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/README.md

Instructions to set up and start the Odyssey Theme project locally. This involves navigating to the theme directory, installing dependencies using npm, and starting the development server.

```bash
cd theme

npm install

npm start
```

--------------------------------

### Clone Odyssey Theme Repository

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/blog/posts/odyssey-theme-officially-released.mdx

Provides the command to clone the Odyssey Theme repository directly from GitHub to get started.

```bash
git clone https://github.com/treefarmstudio/odyssey-theme
```

--------------------------------

### Favicon Configuration

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

Instructions for replacing the favicon. This can be done by replacing the `favicon.png` file in the `public/` folder or by updating the link in `BaseHead.astro`.

```html
<link rel="icon" type="image/png" href="/favicon.png" />
```

--------------------------------

### Global SEO Settings

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

Configure global SEO defaults for title, description, URL, and brand name. These settings are used if page-level defaults are not provided.

```javascript
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.`, 
  url: `https://odyssey-theme.sapling.supply`, // No trailing slash!
  name: `Odyssey`, // The short name of the business or brand name. Used for things like the copyright in the footer.
  enableThemeSwitcher: true,
};
```

--------------------------------

### Astro Sitemap Configuration

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

This code snippet shows the necessary configuration in `astro.config.mjs` to enable and set up the sitemap generation. It includes importing the sitemap integration and defining the `site` property with the website's live URL.

```js
import { defineConfig } from 'astro/config';
import lit from '@astrojs/lit';
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  site: 'https://odyssey-theme.sapling.supply/',
  // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
  sitemap: true,
  // Generate sitemap (set to "false" to disable)
  integrations: [lit(), sitemap()] // Add renderers to the config

});
```

--------------------------------

### Navigation Items Configuration

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

Customize the main navigation links by editing the `nav` array. Each item includes a title and a slug for the link.

```javascript
export const nav = [
  {
    title: 'Home',
    slug: '/',
  },
  {
    title: 'Blog',
    slug: '/blog',
  },
  {
    title: 'About',
    slug: '/company/about',
  },
  {
    title: 'Contact',
    slug: '/company/contact',
  },
];
```

--------------------------------

### Footer Link Lists Configuration

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

Define the link lists for the footer. Each list has a title and an array of items, where each item has a title and a slug.

```javascript
export const footerLists = [
  {
    title: 'Landing Pages',
    items: [
      {
        title: 'Landing Page 1',
        slug: '/landing-pages/landing-1',
      },
      {
        title: 'Landing Page 2',
        slug: '/landing-pages/landing-2',
      },
    ],
  },
  ...
];
```

--------------------------------

### Custom Logo Component

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

Replace the default logo text with your company's SVG logo or an image tag. This component is used throughout the theme.

```astro
<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>
```

--------------------------------

### Footer Social Links Configuration

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/theme-setup.mdx

Configure the social media links displayed in the footer. Each entry includes a URL and an icon. Custom icons can be provided via `src/icons/icons.js`.

```javascript
export const footerSocials = [
  {
    url: 'https://instagram.com/',
    icon: instagramIcon,
  },
  {
    url: 'https://youtube.com/',
    icon: youtubeIcon,
  },
  {
    url: 'https://twitter.com/jaydanurwin',
    icon: twitterIcon,
  },
  {
    url: 'https://github.com/treefarmstudio/odyssey-theme',
    icon: githubIcon,
  },
];
```

--------------------------------

### Import Button Component

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/blog/posts/odyssey-theme-officially-released.mdx

Demonstrates how to import the Button component from the '@components/odyssey-theme' package in an Astro project.

```astro
import {Button} from '@components/odyssey-theme'
```

--------------------------------

### Astro Frontmatter

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/blog/posts/consider-hybrid-work.mdx

This snippet represents the frontmatter of an Astro blog post, defining metadata such as layout, title, description, publish date, featured image, excerpt, and tags.

```astro
---
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']
---

```

--------------------------------

### Default Theme Styles

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/customizing-odyssey.mdx

This CSS code defines the default theme styles for the Odyssey Theme using CSS custom properties. It includes variables for colors, shapes, transitions, layout, and fonts, allowing for easy customization of the site's appearance.

```css
: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 */
	/* Set this to 0 if you want all of the rounded cards, images, etc to be straight edges */
	--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;
}
```

--------------------------------

### Disable Theme Switcher

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/theme/customizing-odyssey.mdx

This JavaScript snippet shows how to disable the theme switcher component by setting the `enableThemeSwitcher` property to `false` in the `settings.js` configuration file. This is recommended if you do not plan to use the theme switcher functionality.

```javascript
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,
};
```

--------------------------------

### YouTube Embed Component

Source: https://github.com/treefarmstudio/odyssey-theme/blob/main/src/pages/blog/posts/remote-work-mental-health.mdx

This snippet demonstrates the usage of a custom YouTube embed component within an Astro post. It takes a 'url' prop to specify the video and can accept a 'rounded' prop for styling.

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

<YouTubeEmbed url="https://www.youtube.com/watch?v=cbYr75_R15M" rounded />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.