npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-theme-blog-ghost-casper

v0.0.48

Published

Ghost theme for Gatsby

Downloads

63

Readme

gatsby-theme-ghost-casper

Ghost Casper theme for Gatsby blog.

Usage

  • Install the theme using npm or yarn
npm i --save gatsby react react-dom gatsby-theme-ghost-casper

or

yarn add gatsby react react-dom gatsby-theme-ghost-casper
  • Create the following project structure for your website.
your-awesome-website
├── src
│   ├── assets
│   │   ├── featured-image.jpg
│   │   └── icon.png
│   ├── data
│   │   ├── authors.yml
│   │   ├── navigation.yml
│   │   └── tags.yml
│   ├── gatsby-theme-ghost-casper
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── src
│   │   └── style
│   │       └── override.css
│   ├── pages
│   │   ├── blog
│   │   │   ├── your-awesome-blog-post-title
│   │   │   │   ├── featured-image.jpg
│   │   │   │   └── index.md
│   │   └── about.js
├── static
│   └── CNAME
├── gatsby-browser.js
├── gatsby-config.js
├── package.json
└── README.MD
  • In the gatsby-config.js file add the following changes
module.exports = {
  siteMetadata: {
    title: '', // Site Title
    author: '', // Author of the website
    description: '', // Description for the website
    siteUrl: 'https://example.com', // Base URL of the website (No trailing slash)
    social: {
      // Social URLs of the website. Will be used to show in footer if provided
      twitter: '',
      facebook: '',
      instagram: '',
      github: '',
    },
    config: {
      postsPerPage: 10, // Number of posts to show per page
      disqus: '', // Disqus username. If provided, disqus comments section will be added on each posts page
    },
  },
  plugins: [
    {
      resolve: 'gatsby-theme-ghost-casper',
      options: {
        title: 'Your Site Title', // Required: used for the title of RSS feed
        pathPrefix: '', // path prefix for the website URL
      },
    },
    // Other plugins comes here
  ],
};
  • Add the following content in src/data/authors.yml file to add the author information.
- id: username # unique username for the author. This will be used in the URL for the author page
  name: Name # Name of the author
  bio: Bio # Bio of the author
  location: Location # Location of the author
  website: https://authorswebsite.com # Website of the author
  twitter: twitter_username
  facebook: faceboon_username
  profileImage: https://avatars0.githubusercontent.com/u/AUTHOR # URL containing the author profile Image
  coverImage: # Cover Image to show in authors page
  • The links shown in the header can be customized by adding them in src/data/navigation.yml file
- label: Home
  url: /

- label: About
  url: /about
  • The theme supports creating blog posts using markdown files. You can start adding your first page by creating a file at src/pages/<YOUR-AWESOME-PATH>/index.md with the following content.
---

title: Your Awesome Title <!-- Title of the post -->
date: '2019-07-07' <!-- Date of the post in which it is published -->
tags: ['tag1', 'tag2'] <!-- A new page will be created for each tag listing all the posts associated with that tags -->
author: username <!-- id of the author that we defined in authors.yaml file  -->
featuredImage: ./welcome.jpg <!-- relative path of the image that used to show as featured Image  -->
draft: false <!-- Set it as true to skip this page during the production build.  -->

---

Your Awesome Blog Content
  • To set sitewide featured image, place a file named featured-image.jpeg and the theme will pick it up.
  • To change the site logo, place your logo file as PNG named as logo.png in the src/gatsby-theme-ghost-casper/assets/ directory.
  • Now run npm run develop or yarn run develop to start development. Happy Blogging. 😇

Example Site

For detailed usage of gatsby themes, refer themes documentation of Gatsby.

Copyright & License

Copyright (c) 2013-2019 Ghost Foundation / Kumar D - Released under the MIT license.