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

@lbsonley/gatsby-theme-technical-blog

v0.5.3

Published

Technical Blog Template for Gatsby.js

Downloads

3

Readme

Gatsby Theme Tech(nical) Blog

latest version on npm npm downloads a month package license

A feature-rich, customizable Gatsby Blog Theme for technical bloggers. Useful for developers, scientists, teachers and anyone who wants to publish technical documents.

Features

  • Categorization and Tagging
  • SEO Meta Data
  • Write posts in MDX
  • Configurable theming (theme-ui)
  • Code blocks (prismjs)
  • KaTeX Math (katex)
  • Image optimization (sharp)
  • Gif support

Quick Start

Install the theme on an existing project.

yarn add @lbsonley/gatbsy-theme-technical-blog
# or
npm i @lbsonley/gatsby-theme-technical-blog

Add it to your sites gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-theme-tech-blog"
  ]
};

Now start up gatsby with gatsby develop and you are ready to start writing your blog.

Configuration

There are several options for configuring gatsby-theme-technical-blog, when you include it as a plugin in gatsby-config.js.

| Property | Type | Default | Description | | --- | --- | --- | --- | | postsPath | string | "posts" | The directory, from the root of your project, where theme looks for *.mdx files. | | basePath | string | "/blog" | The path at which pages will be created. | | categories | boolean | true | Whether or not to create an index page for categories | | tags | boolean | true | Whether or not to create an index page for tags | | categorySeoTitle | string | "Posts categorized:" | Used in SEO title on PostsByCategory page. Dynamically combined with selected category to produce a title "Post categorized: {category}". | | tagSeoTitle | string | "Posts tagged:" | Used in SEO title on PostsbyTag page. Dynamically combined with selected category to produce a title "Post tagged: {tag}". |

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-technical-blog",
      options: {
        contentPath: "docs", // look for mdx files in docs directory
        basePath: "/docs", // publish pages at /docs/{page}
        categories: true,
        categorySeoTitle: "Docs categorized:",
        tags: true,
        tagSeoTitle: "Docs tagged:"
      }
    }
  ]
};

Categorization and Tagging

The theme supports two ways to organize content; categories and tags. Categories should be used to group content by it's function (i.e. tutorials, gists, and opinions) and tags should be used to describe the topic (i.e. react, redux, and graphql).

Both categorization and tagging are enable by default. If you don't need both, you can turn off one or the other in the theme config (see above).

Frontmatter

The theme builds and sorts pages based on metadata included in mdx files via frontmatter. All of the frontmatter fields are required unless otherwise disabled in the configuration object. If a frontmatter field is not present Gatsby will throw errors when building. Make sure to include a complete frontmatter object at the beginning of each mdx file.

| Key | Example Value | Description | | --- | --- | --- | | title | Rad Technical Stuff | The title for the content | | date | 2020-05-13 | The date of publication | | category | tutorials | Categorical grouping of content. Can be disabled | | tags | [ "react", "redux" ] | Tagged grouped of content. Can be disabled | | published | true | Whether or not to publish the content |

---
  title: Rad technical stuff
  date: 2020-05-13
  category: tutorials
  tags: [ "react", "redux" ]
  published: true
---

Adding a Layout

To allow for easy customization and integration into existing gatsby sites, the theme does not include a layout. The best way to add a layout is to use wrapPageElement from the Gatbsy Browser API. To do this, first install theme-ui if you havent' already. This way, we can use the sx property to access theme variables when styling our layout component. If you are not familiar with theme-ui you can read about the sx prop here.

yarn add theme-ui

With theme-ui installed, create a layout component in your sites src/components directory that looks something like this.

/** @jsx jsx */
import {
  jsx,
  Flex,
  Container,
  Styled,
  Link as ThemeLink,
} from "theme-ui";
import { Link } from "gatsby";

const Layout = ({ children }) => {
  return (
    <Flex sx={{ flexDirection: "column", minHeight: "minHeight" }}>
      <Flex
        as="header"
        sx={{
          flex: "0 1 15%",
          justifyContent: "space-between",
          padding: 6,
          marginBottom: 7,
          color: "light",
          bg: "primary",
          boxShadow: "medium",
        }}
      >
        <Styled.h1 sx={{ fontSize: 3, m: 0 }}>
          <ThemeLink
            as={Link}
            to="/"
            sx={{
              color: "light",
              textDecoration: "none"
            }}
          >
            DigiGarden
          </ThemeLink>
        </Styled.h1>
      </Flex>
      <main sx={{ flex: "1 0 70%" }}>
        <Container>{children}</Container>
      </main>
      <Flex
        as="footer"
        sx={{
          flex: "0 1 15%",
          padding: 6,
          marginTop: 7,
          alignItems: "center",
        }}
      >
        <Styled.p sx={{ m: 0 }}>Site Footer</Styled.p>
      </Flex>
    </Flex>
  );
};

export default Layout;

Now that we have a layout component, we can create a file gatsby-browser.js at the root of our project and tell Gatsby to wrap all of our pages in this layout.

const React = require("react");
const Layout = require("./src/components/layout").default;

exports.wrapPageElement = ({ element }) => {
  return (
    <Layout>
      {element}
    </Layout>
  )
}

Customizing theme-ui

The default theme-ui configuration for gatsby-theme-technical-blog is described in theme.js. This can be overridden using component shadowing. Create a file at src/gatsby-plugin-theme-ui/index.js, import the default theme and expand/override the defaults.

import { theme as baseTheme } from "@lbsonley/gatsby-theme-technical-blog/src/theme";

export default {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    // color overrides
  },
  // other theme-ui settings
}

Using the Color Mode Toggle Component

The theme-ui config in gatsby-theme-technical-blog supports Light and Dark Mode out of the box. Including a button to toggle the color mode is as easy as importing the component and using it somewhere. For example, you could add it inside the header of your layout component. It can be imported like:

import ColorModeToggle from "@lbsonley/gatsby-theme-technical-blog/src/components/color-mode-toggle";

Using KaTeX Math Blocks

gatsby-theme-technical-blog automatically recognizes KaTeX blocks in your .mdx documents. Just add some KaTeX markup like:


Math Inline
$\frac{1}{m} \sum_{i=1}^m \big[ (h_\theta(x^{(i)}) - y^{(i)}) ^2 \big]$

Math Block

$$
\frac{1}{m} \sum_{i=1}^m \big[ (h_\theta(x^{(i)}) - y^{(i)}) ^2 \big]
$$

Using Code Blocks

gatsby-theme-technical-blog automatically recognizes code blocks in your .mdx documents. This is accomplished via the MDX Provider component from mdx-js, Syntax Highlighting and wrapRootElement. Just add a regular markdown code block and let Gatsby handle the magic.

If you want to customize your code block component (i.e. change the color theme), you will need to install prism-react-renderer.

yarn add prism-react-renderer

Then you can shadow the code block component from gatsby-theme-technical-blog by creating a file at src/@lbsonley/gatsby-theme-technical-blog/code-block.js with the following content. Just exchange the theme import below with the theme of your choice.

/** @jsx jsx */
import { jsx } from "theme-ui";
import Highlight, { defaultProps } from "prism-react-renderer";
import themeLight from "prism-react-renderer/themes/oceanicNext";

const CodeBlock = ({ children, className }) => {
  const language = className ? className.replace(/language-/, "") : "";
  return (
    <Highlight
      {...defaultProps}
      code={children}
      language={language}
      theme={themeLight}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={style} sx={{ p: 5 }}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  );
};

export default CodeBlock;

Additional Resources

The theme is built on the shoulders of giants. An effort has been made above to document the minimum information needed to get up and running quickly with gatsby-theme-technical-blog. Should you need more in depth documentation for one of the technologies used to build this theme, check out the links below.