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-amaranth

v4.17.1

Published

A stylish GatsbyJS theme built on top of gatsby-theme-advanced.

Downloads

94

Readme

Gatsby Theme Amaranth

gatsby-theme-amaranth is a mobile optimized stylish blog theme for GatsbyJS equipped with advanced features such as SEO, image optimization, PWA capabilities and infinite scrolling feeds.

The theme uses gatsby-theme-advanced under the hood.

Previews

Amaranth Preview

Amaranth Demo.

Visit gatsby-theme-amaranth for details regarding on how it was built using gatsby-theme-advanced.

Features

  • Gatsby v4 support
  • First class TypeScript support (for query data and components exposed by the theme)
  • Styled Components used for styling
  • Posts in MDX
    • Code syntax highlighting
    • Embed videos
    • Embed iframes
  • Infinite Scrolling
  • React Query for client side API calls
  • Tags
    • Separate page for posts under each tag
  • Categories
    • Separate page for posts under each category
  • Social features
    • Twitter tweet button
    • Facebook share/share count
    • Reddit share/share count
    • LinkedIn share button
  • Author section
  • Related posts computation and display based on category/tag match ranking
  • Disqus support
  • gatsby-plugin-image for optimized image generation
  • Inline SVG imports
  • High configurability
  • Separate components for everything:
    • Gatsby Link utilities
    • SEO
    • Disqus
  • PWA features
    • Offline support
    • Web App Manifest support
    • Loading progress for slow networks
  • SEO
  • RSS feeds

Usage

Install the theme via:

npm install gatsby-theme-amaranth

or

yarn add gatsby-theme-amaranth

Take a look at Gatsby Advanced Starter which can help you to kickstart your development process.

To configure the theme, consult the Configuration section.

Make sure you are familiar with GatsbyJS documentation for themes, in particular:

Configuration

To configure the theme edit your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-amaranth`,
      options: {
        basePath: `/blog`,
      },
    },
  ],
};

Available options are:

const config: SiteConfig = {
  // Website configuration
  website: {
    title: "Gatsby Advanced Starter", // Homepage title
    titleShort: "Advanced Blog", // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation
    name: "Gatsby Advanced Starter", // Website name used for homescreen (PWA) and SEO
    description: "A GatsbyJS starter equipped with advanced features.", // Website description used for RSS feeds/meta description tag
    language: "en", // Sets the global HTML lang attribute
    logoUrl: "/logos/logo-1024.png", // Logo used for SEO
    fbAppId: "1825356251115265", // FB Application ID for using app insights
    twitterName: "Vagr9K", // Twitter handle of the website
    url: "https://gatsby-advanced-starter-demo.netlify.com", // Domain of your website without the pathPrefix
    rss: "/rss.xml", // Path to the RSS file
    rssTitle: "Gatsby Advanced Starter RSS Feed", // Title of the RSS feed

    googleAnalyticsId: "UA-VALIDID", // GA tracking ID
    copyright: "© Copyright 2021 | Advanced User", // Copyright string for the footer of the website and RSS feed.

    themeColor: "#D83850", // Used for setting manifest and progress theme colors.
    backgroundColor: "#F7F7F7", // Used for setting manifest background color.
  },

  // User configuration
  user: {
    id: "AdvancedUser", // Unique identifier of the user on the website. Used for OpenGraph SEO tags
    firstName: "Advanced", // Used for SEO
    lastName: "User", // Used for SEO
    twitterName: "Vagr9K", // Twitter username used for SEO
    linkedIn: "your-linkedin", // Used for contact information
    github: "vagr9k", // Used for contact information
    email: "[email protected]", // Used for contact information and displayed in the RSS feed
    location: "User Location", // User location used for SEO
    about: "A full-stack web developer looking for a challenge!", // User information used for the author section
    avatar: "https://i.pravatar.cc/300", // User avatar used for the author section
  },

  // Organization information used for SEO
  organization: {
    name: "Organization Name",
    description: "Organization description",
    logoUrl: "/logos/logo-512.png",
    url: "https://gatsby-advanced-starter-demo.netlify.com", // URL of the organization website
  },

  // Gatsby Configuration
  pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.

  contentDir: undefined, // Directory for MDX posts. Defaults to "content".
  assetDir: undefined, // Asset directory. Defaults to "static".

  embeddedImageWidth: 768, // MDX embedded image width. Used by gatsby-plugin-image for optimization
  embeddedVideoWidth: 920, // MDX embedded video width in pixels

  iconPath: undefined, // Icon used for manifest icon creation.
  iconList: [], // Icons used for the web manifest. Can be used to override iconPath for a more pixel perfect control.
  iconCachePaths: undefined, // Glob pattern path for the icons to be cached by the gatsby-plugin-offline

  basePath: undefined, // Base path for mounting pages. Allows for multiple themes to be used in a single website.
};

Demo

Source Code

Live Preview

Author

Ruben Harutyunyan (@Vagr9K)