Git Product home page Git Product logo

ev0-astro-theme's Introduction

πŸš€ EV0 Astro Theme - Blog Template

EV0 Astro Theme is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript. It serves as a starting point for creating your personal portfolio website or showcasing your projects online. The template is open-source and released under the MIT license, meaning you are free to use, modify, and distribute it for personal or commercial purposes.

EV0 Astro Theme

Built with Astro

πŸ”₯ DEMOS

Deploy to Netlify

πŸ”₯ Features

  • βœ… Minimal styling (Tailwind CSS)
  • βœ… 100/100 Lighthouse performance
  • βœ… SEO-friendly with canonical URLs and OpenGraph data
  • βœ… Dark Mode
  • βœ… Sitemap support
  • βœ… RSS Feed support
  • βœ… Markdown & MDX support
  • βœ… View Transitions
  • βœ… PWA-ready
  • βœ… Fully responsive
  • βœ… Robots.txt & Humans.txt
  • βœ… TypeScript support
  • βœ… Syntax highlighting
  • βœ… YouTube Integration
  • βœ… CLI for adding new posts

βš“ Lighthouse Score - PWA Ready

Lighthouse Score

πŸ‘¨πŸ»β€πŸ’» VIP Support (optional) $25

Includes personalized assistance via messages/emails, customization of up to 1 feature, assistance for implementation in your hosting and deployment, and advice for future changes. Buy VIP Support.

πŸš€ Getting Started

Clone this repository to your local machine using Git.

git clone https://github.com/gndx/ev0-astro-theme.git your-project-name
Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run youtube Fetches the Latest YouTube Channel Videos
npm run newpost Generate a New Blogpost Markdown Entry

Edit the HTML files in the src/pages directory to add your projects, experiences, and personal information.

πŸ“ Configuration Blog

To configure your blog, edit the src/config/config.json file. This file contains the following options:

{
  "site": {
    "title": "EV0 Astro Theme",
    "base_url": "https://ev0.gndx.dev/",
    "base_path": "/",
    "favicon": "/favicon.png",
    "logo": "https://s3.amazonaws.com/gndx.dev/ev0-astro-logo.png",
    "lang": "en",
    "description": "EV0 is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript.",
    "pageSize": 6
  },
  "features": {
    "youtube": true
  },
  "metadata": {
    "meta_author": "Oscar Barajas @gndx",
    "meta_description": "EV0 is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript."
  },
  "author": {
    "name": "Oscar Barajas Tavares @gndx",
    "avatar": "https://s3.amazonaws.com/gndx.dev/gndx-astro-avatar.png",
    "bio": "EV0 is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript."
  }
}

The menu is configured in the src/config/menu.json file. This file contains the following options:

[
  {
    "name": "Home",
    "url": "/"
  },
  {
    "name": "Blog",
    "url": "/blog"
  },
]

Social networks are configured in the src/config/social.json file. This file contains the following options:

  {
    "name": "Instagram",
    "url": "https://instagram.com/gndx"
    "svg": "...."
  }

πŸŽ₯ YouTube Integration

To integrate your YouTube channel, you need to create a new file called .env in the root directory of your project. Then add the CHANNEL_ID and API_KEY to get the latest videos from your YouTube channel in src/config/youtube.json.

npm run youtube

Your YouTube API is not used in production.

Requires an API KEY for YouTube API V3 - Google Console

You can disable the youtube integration by modifying the src/config/config.json.

  "features": {
    "youtube": false
  },

πŸ“ Adding New Posts

To add a new post, run the following command:

npm run newpost

Follow the instructions and this will generate a new markdown file in the src/content/blog directory. Edit the file to add your post content.

πŸ“‚ Project Structure

/
β”œβ”€β”€ public/
β”‚   └── favicons/
β”‚   └── fonts/
β”‚   └── blog-placeholder.jpg
β”‚   └── favicon.png
β”‚   └── humans.txt
β”œβ”€β”€ scripts/
β”‚   └── youtube.cjs
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ config/
β”‚   β”œβ”€β”€ content/
β”‚   β”œβ”€β”€ layouts/
β”‚   └── pages/
β”‚   └── styles/
β”‚   └── env.d.ts
└── package.json
└── astro.config.mjs
└── tailwind.config.js
└── tsconfig.json
└── .gitignore

πŸ’» Contributing

Contributions to this project are welcome. If you find a bug or have a suggestion for improvement, please open an issue or submit a pull request.

Oscar Barajas Tavares
Oscar Barajas Tavares

πŸ“–
Jhon Achata Limachi
Jhon Achata Limachi

πŸ› πŸ€”
Erasmo HernΓ‘ndez
Erasmo HernΓ‘ndez

πŸ›
Francisco Araujo
Francisco Araujo

🎨 πŸ›

πŸ“ƒ License

This project is licensed under the MIT License. See the LICENSE file for details.

β˜• Support

If this project helped you learn something new, or if you're feeling particularly generous, you can buy me a coffee. It's greatly appreciated! 😊 GitHub Sponsors

ev0-astro-theme's People

Contributors

allcontributors[bot] avatar andybaronp avatar dcyar avatar e10ydev avatar erasmoh avatar fountainpen avatar franciscoagx avatar galexbh avatar gndx avatar thomasbnt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ev0-astro-theme's Issues

Code blocks error

Hello, I have an issue on the code blocks and so does the theme preview at this URL: https://ev0.gndx.dev/blog/markdown-style-guide/

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

The error comes from the Code.astro file, the variable button and check are null:

  codeBlock.forEach((code) => {
    const button = code.querySelector(".copy-button");
    const check = code.querySelector(".check-span");

It looks like the component expect the button to be there, but for some reason in the HTML the code block actually looks like

<pre class="astro-code material-theme-palenight" style="background-color:#292D3E;color:#babed8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0">
<!-- ... contents ... -->
</pre>

I have no idea where this HTML comes from as I cannot find any reference to the class astro-code in the codebase.

Duplicate categories on categories page

I created 2 posts with same category. When i open category page, i see duplicate categories. I was fix this code and running successfuly without duplicate data. Can i pull this bugs? Thanks

Label page A large number of duplicate labels | Have been solved

Hello, I found the blog framework you wrote is very nice, so I used it to learn and change it to my favorite style, and then I found a situation that there would be a lot of repeats in the tag page, and then I asked the ai , ai gave a solution. Now replacing the function with this will solve the duplication problem

I don't know how to apply submit code without using github I am not a professional programmer and only know a little html and css so here is the question

Here is the modified code src\utils\getAllTags.ts


export const getTaxonomy = async (collection: string, name: string) => {
const singlePages = await getCollection(collection);
const taxonomyPages = singlePages.map((page) => page.data[name]);
let taxonomies = [];
for (let i = 0; i < taxonomyPages.length; i++) {
const categoryArray = taxonomyPages[i];
for (let j = 0; j < categoryArray.length; j++) {
const newTaxonomy = {
name: categoryArray[j],
slug: slugify(categoryArray[j]),
};
if (!taxonomies.find(taxonomy => taxonomy.name === newTaxonomy.name && taxonomy.slug === newTaxonomy.slug)) {
taxonomies.push(newTaxonomy);
}
}
}
return taxonomies;
};

image

Bug: When building the blog

I am experiencing the following problem when using pnpm build

And the dist created is the following:
image

Although in the preview everything is fine.
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.