Giter Club home page Giter Club logo

bookworm-blight-astro's Introduction

Bookworm Blight Astro

Bookworm Blight is a feature-rich, minimal, highly customizable, easy-to-use free Astro 4.x blog theme.

This theme is based on Bookworm Light Astro by Themefisher. A number of improvements and opinionated changes have been made:

  • Astro upgraded to v4, following these guides:

  • Pages as content were removed

    • The Themefisher template allowed pages to be created as content, i.e. you could create a .md file under content/pages/ and it would automatically be made routable and presented like a page through its slug (i.e. /page-slug).

      There was nothing really wrong with this idea, except that it slightly complicated the routing scheme by allowing the possibility of route conflicts. I guess the original intent was to allow draft pages but drafting seems to not be necessary when you have a full version control system available to you as well as built-in support using the underscore (_) prefix convention for pages and content.

  • Blog post routes were moved to /posts/

    • The Themefisher template created routes for posts directly under the base path (i.e. /post-slug).
  • Images are optimized with the <Image /> Astro component

    • This component was released as a built-in in Astro 3.0.
  • View Transitions support added

  • Better use of TypeScript

    • Content types are more transparently handled in this project and typings were added to all component props.
  • Reduced usage of TailwindCSS's @apply rule

    • It is considered a code smell to use this too much. TailwindCSS provides a guide on reusability which suggests using framework components for reusable styles rather than CSS classes.
  • Significant style changes

    • These were made in anticipation for use on a production site and interspersed with the other changes, so they can't easily be undone. However, you are encouraged to make changes to the theme anyway, and the TailwindCSS improvements should make that easier.
  • Opt-In to RSS feed

    • An RSS configuration has been added. To enable, rename src/pages/_rss.xml.ts without the underscore (_) prefix.

Bookworm Blight is a minimal multi-author free Astro blog theme which is perfect for any kind of blog website. Whether you're interested in food, beauty, travel, photography, lifestyle, fitness, health, or other topics, this theme is a great fit. The theme is super fast and SEO friendly which makes it easier for your content to be discovered by search engines.

🔑Key Features

  • 🎨 Highly Customizable (Color, Font, Menu, Social Links, SEO Meta Tags, etc.)
  • 👥 Multi-Author Support
  • 📚 Authors Page
  • 👤 Author Single Page
  • 🔍 Search Functionality with FuseJS
  • 🏷️ Tags and Categories Support
  • 📲 Post Social Share Option
  • 🔗 Similar Post Suggestions
  • ⚡ Fast by Default (95+ Google PageSpeed Score)
  • ⚙️ Netlify Settings Pre-configured
  • 📬 Contact Form Support
  • 🌅 Support OG Image
  • ✍️ Write and Update Content in Markdown / MDX
  • 📚 MDX Components Auto Import
  • 📝 Includes Draft Posts
  • 🚀 Built with Tailwind CSS Framework
  • 📱 Fully Responsive on Desktops, Tablets, and Smartphones
  • 🔍 SEO Friendly

🔧Installation

After downloading the template, you have some prerequisites to install. Then you can run it on your localhost. You can view the package.json file to see which scripts are included.

⚙️Install prerequisites (once for a machine)

  • Node Installation: Install node js [Recommended LTS version; Minimum 18.1.4]

🖥️Local setup

After successfully installing those dependencies, open this template with any IDE [VS Code recommended], and then open the internal terminal of IDM [vs code shortcut ctrl/cmd+`]

  • Install dependencies
npm install
  • Run locally
npm run dev

After that, it will open up a preview of the template in your default browser, watch for changes to source files, and live-reload the browser when changes are saved.

🔨Production Build

After finishing all the customization, you can create a production build by running this command.

npm run build

🐞Reporting Issues

We use GitHub Issues as the official bug tracker for this Template. Please Search existing issues. It’s possible someone has already reported the same problem. If your problem or idea has not been addressed yet, feel free to open a new issue.

📄License

Copyright (c) 2016 - Present, Designed & Developed by Themefisher

Copyright (c) 2023, Mark Ross (Xericode)

Code License: Released under the MIT license.

Image license: Released under the CC0 1.0 license.

bookworm-blight-astro's People

Contributors

krazkidd avatar tffarhad avatar tffaruk avatar tflijon avatar tfsojon avatar tfsomrat avatar

Watchers

 avatar  avatar

bookworm-blight-astro's Issues

Support dark mode

I would like to add dark mode support. This will require some duplication of theme configs and styles.

Obsolete styles used on Search page

Because the Search page is one large React component, it doesn't use any of our custom Astro components, and so document structure and styles must be duplicated.

A lot of structure/style changes have been made to other areas of the project, and they now need to be replicated to the Search component.

Add more view transitions

I quickly added a slide animation to all content headers. Are there other, tasteful animations we can add?

One idea I have is to fade in the content subheaders (after the main header slides in).

Style improvements needed

The TailwindCSS config (tailwind.config.ts) extends the default theme with some custom colors (see theme.extend.colors) which are not adequately named and not used as extensively as you might expect. The project should make better use of these colors so changes apply more widely and cohesively.

Additionally, there are other config settings I would like to explore to see if they really ought to be in the config or if they can be reproduced easily in component files.

Furthermore, I would like to remove the tailwind-bootstrap-grid plugin and use TailwindCSS grid/flex layout classes instead.

Show draft content items in dev mode

We currently filter out any content items that are marked as draft: true. We can conditionally show these in dev mode:

// Example: Filter out content entries with `draft: true` only when building for production
import { getCollection } from 'astro:content';
const blogEntries = await getCollection('blog', ({ data }) => {
  return import.meta.env.PROD ? data.draft !== true : true;
});

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.