jada

A blog starter for Gridsome

Demo

https://gridsome-jada.netlify.com

Features

• Accessible and fluid design
• Markdown support for blog content
• Table of contents for articles
• Tags for articles
• Pagination for blog posts
• Contributor profiles (with @gridsome/vue-remark)
• Search for blog posts (with Fuse.js and vue-fuse)
• Excerpts and Edit URL generation for blog posts
• Support for marking articles as outdated
• Syntax highlighting (with Shiki)
• Dark and light themes with Sass and theme-switching support
• SVGs as Vue components (with svg-to-vue-component)
• RSS, Atom and JSON feeds (with @microflash/gridsome-plugin-feed)
• Sitemap (with plugin-sitemap)

Installation

Using Gridsome CLI

npx gridsome create my-blog https://github.com/Microflash/jada.git

Gridsome will remove .git directory and install dependencies for you.

Using Git

Clone this repository.

git clone https://github.com/Microflash/jada.git my-blog

# navigate to the directory
cd my-blog

# remove the git folder
rm -rf .git

# install dependencies
npm install

Using GitHub Templates

You can directly generate a new project from this repository on GitHub.

Documentation

Configuration

• app.config.js contains application-specific configuration, including
  • name, description, url, copyright and maintainer of the application
  • the URL of the favicon (used by gridsome-plugin-feed to set a favicon in the generated feed)
  • prefs.editContext is the default context used to generate the edit URL
  • prefs.excerptSize lets you control the size of the excerpt generated by jada
  • prefs.maxTocDepth controls the levels of headings to be considered while generating the table of contents (default: 3)
  • prefs.outdationPeriod lets you control the duration (in days) after which a post will be marked as old (see Outdating a post)
  • searchConfig containing file (used to customize the location of search index generated during the build) and options (used to define the behavior of fuse)
  • editConfig that has collection-specific configuration for edit URL generation
• marked.config.js contains summarize function that generates the excerpts for the blog posts
• purgecss.config.js contains the configuration for purgecss to strip down the unused CSS classes during the build
• gridsome.config.js contains the project configuration for Gridsome
• gridsome.server.js contains the server configuration for Gridsome

Generating excerpts

marked's lexer is used to generate the excerpt for a blog post. Automatic excerpt generation kicks in if no excerpt field is provided in the frontmatter.

The size of the excerpts can be controlled by prefs.excerptSize in app.config.js.

A global clip filter is available to dynamically trim the excerpt length.

By default, clip trims first 240 characters of a text. Optionally, it accepts a numeric value, e.g., clip(200), to clip the specified number of characters.

Generating Edit URLs

The editConfig key in app.config.js provides an object of collection-specific editContexts, e.g.,

editConfig: {
  Post: 'https://github.com/Microflash/jada/edit/master'
}

If editConfig is not available, jada will fallback to the prefs.editContext.

By default, jada generates the GitHub edit URLs for Post collection with edit branch pointing to master.

Outdating a post

You can specify a post as outdated by setting outdated: 'outdated' in the frontmatter. Conversely, you can mark a post to never get outdated by setting outdated: 'never'.

If you provide prefs.outdationPeriod, jada will determine if a post is old and mark it as outdated: 'old' accordingly.

By default, prefs.outdationPeriod is set to 365 days.

Search

Search is supported through fuse. jada generates a search.json file on every build which is queried by axios in the browser. By default, search index is created from the post title and the excerpt.

Styles

jada uses SASS to generate styles, with optimizations to improve the readability of posts through remarkability. The color palette for dark and light themes have been carefully chosen to provide good accessibility. Leonardo was used to generate the palettes.

Gridsome

For Gridsome configurations and docs, check Gridsome docs.

Appendix

License

Licensed under MIT

Acknowledgements

This project is made possible thanks to the open-source community and the following projects and people.

• Gridsome: a modern Vue.js framework for static websites (and more)
• Gridsome Portfolio Starter: a simple portfolio starter for Gridsome
• Fuse.js: a lightweight fuzzy-search library
• Shiki: a beautiful syntax highlighter
• Feather Icons: beautiful open-source icons
• Remarkability: the baseline css for HTML generated from markdown
• Animate.css: a cross-browser library of CSS animations
• Grid By Example: a collection of examples and references on CSS Grid maintained by Rachel Andrews
• Leonardo: an adaptive color scale generator developed by Adobe

Notes

• jada is based on Microflash