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

@sh4hids/gatsby-theme-open-sourcerer

v1.0.2

Published

A configurable minimal gatsby portfolio theme for open source developers.

Downloads

14

Readme

gatsby-theme-open-sourcerer

A configurable and performant minimal gatsby portfolio theme for open source developers.

Live Demo

gatsby-theme-open-sourcerer

Installing the theme

  1. Create a site

You can easily bootstrap a site by using the starter theme. For this, you have to have gatsby-cli installed. Now run the following command:

gatsby new my-site https://github.com/sh4hids/gatsby-starter-open-sourcerer
  1. Start development server

After installation process has finished, nevigate to the project and run the following command:

cd my-site
gatsby develop
  1. See the theme in action

Open http://localhost:8000 in your browser to see your site in action or visit http://localhost:8000/___graphql to check the graphql playground.

  1. Start hacking

Open the current directory in your favorite code editor and start hacking the theme.

NB All the available commands can be found here.

Customizing default configuration

You can provide necessary configuration via plugin options on gatsby-config.js. Copy the default configuration from here and customize as you need. If you bootstrapped your site by using the starter kit, you just have to customize the my-site/src/config/index.js file.

Component shadowing

If you want to customize a component, you can use theme shadowing. Create the following directories in your src folder:

├── src
│   ├── @sh4hids
│   │   └── gatsby-theme-open-sourcerer

For example, if you want to shadow the BrandLogo component, your directory structure will be like this:

├── src
│   ├── @sh4hids
│   │   └── gatsby-theme-open-sourcerer
│   │       └── components
│   │           ├── BrandLogo.js

You can shadow any component you like by following the above structure. All the components can be found in src dorectory of this repo.

N.B. You might get some error while shadowing a component. This might happen if copy/paste components from this theme's src folder. One of the error might be:

Module not found: Error: Can't resolve '../components' in

In the above case, check if there's any relative import. If there's any, refactor the imports like this:

import { Text } from '@sh4hids/gatsby-theme-open-sourcerer/src/components';
import { DefaultLayout } from '@sh4hids/gatsby-theme-open-sourcerer/src/layouts';

Writing posts

You can write blog post using markdown file format. Just follow this structure:

// contents/blog/your-post.md

---
title: My Awesome Post
slug: my-awesome-post
publishedAt: 2021-07-30
isPublished: true
tags:
  - test
  - web dev
---

Your post will go here...

NB: If you want to make draft post, set isPublished to false in post's frontmatter. You can use this script to automate the process.

Customizing pages

Contents for the following pages are required for this theme to work properly. You have to provide the contents in .yml format in your contents folder.

Customizing About/Contact page

Create files named About.js/Contact.js in the following directory:

├── src
│   ├── @sh4hids
│   │   ├── gatsby-theme-open-sourcerer
│   │   │   ├── templates
│   │   │   │   ├── About.js
│   │   │   │   ├── Contact.js

Page layout

Copy the base layout for each of the pages from the following links and customize as you like.

Using built-in components

You can import and use any components from the source folder. Some of the default components directories are:

Example:

import { Box } from '@shahids/gatsby-theme-open-sourcerer/src/components';

Adding post comment

The theme has the commenting feature on the article page, which uses utterances under the hood. utterances is a lightweight comments widget built on GitHub issues. To set up utterances, you have to create a public GitHub repository and add utterances app on that repo. Now add utterancesCommentRepo key in your theme config file (your-site/src/config/index.js) with your repository name as a value (i.e. sh4hids/shahid.pro-comments).

Performance

Performance

Want to help?

If you want to help in any way to make the theme better, you are welcome. Some of the ways you can help are:

  • Reporting an issue (bug)
  • Improving the documentation (README)
  • Adding your site to the showcase section

Want to offer me a Cofee?

If you like the theme and want to buy me a coffee, please follow the link 👇

Sites built with this theme

Related projects