❤Normal Programming Mistake

    @pauliescanlon/gatsby-theme-gatstats

    0.0.57 • Public • Published
    gatsby-theme-gatstats main image

    npm (scoped)

    npm

    NPM

    Netlify Status

    GatStats is a dashboard for your tech blog.

    ... or a dashblog if you prefer? 🤷‍♂️

    Properties sourced from frontmatter in src/posts/[name].mdx are used to create data visualizations to wow your readers.

    👁️ Preview

    🚀 Getting started

    Install

    npm install @pauliescanlon/gatsby-theme-gatstats
    

    Setup

    gatsby-config.js

    Add the siteMetaData and @pauliescanlon/gatsby-theme-gatstats to your gatsby-config.js

    module.exports = {
      siteMetadata: {
        title: "Your blog title",
        description: "I like tech",
        keywords: ["tech", "blog", "boop"],
        siteUrl: 'https://gatsby-theme-gatstats.netlify.com/',
        siteImage: 'name-of-open-graphy-image.jpg', // pop an image in the static folder to use it as og:image
        config: {
          headerHeight: 64,
          sideBarWidth: 240,
          twitter: 'pauliescanlon', // no need to include the @
          github: 'pauliescanlon'
        },
      },
      plugins: ['@pauliescanlon/gatsby-theme-gatstats']
    }
    

    directory structure

    If you'd like to add more pages and posts add them to your src dir.

    |-- src
        |-- pages
            |-- about.mdx
        |-- posts
            |-- year-post-dir
                |-- some-post-dir
                    |-- some-post.mdx
                    |-- some-image.jpg
                    |-- some-embedding-image.jpg
    

    frontmatter setup

    For pages use the following template. The icon field is a path for any icon. This is an example is from Material Icons. The icon property is whats used to determine if an .mdx file is a page or a post. Pages appear in the side bar navigation

    ---
    title: About
    icon: 'M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'
    ---
    
    # Demo About
    
    This is about from the demo
    
    

    For posts use the following template

    ---
    title: Some Post
    tags: ["Gatsbyjs", "React"]
    date: 2019-11-13
    status: draft // setting the status to draft hides the post from blog
    featuredImage: some-image.jpg
    embeddedImages:
      - some-embeddedImage.jpg
    ---
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    

    🖼️ Embedding Images

    Embedding images into .mdx can be tricky but using MdxRenderer we can still use frontmatter to pass graphQL image data to any part of the post body

    frontmatter

    Add locally sourced images to frontmatter using embeddedImages then pass a reference to them to the <EmbeddedImage /> component via props.

    The <EmbeddedImage /> component is part of the theme and is passed to all .mdx files using the MDXProvider so you don't have to import anything for this to work.

    There's a couple of optional helper props for width and justifyContent so you get a bit more control over size and alignment.

    EmbeddedImage

    The <EmbeddedImage /> component accepts a width prop which can be used to control the image size. The width prop can either be a single string which will apply the the same size across all breakpoints or an array of sizes to use across the breakpoints defined in the theme.

    ---
    embeddedImages:
      - image1.jpg
      - image2.jpg
    ---
    
    Post body text
    
    <EmbeddedImage
      src={props.embedded.image1}
      width={['100%', '75%', '50%', '25%']}
    />
    
    More post body text
    
    <EmbeddedImage
      src={props.embedded.image2}
      width="25%"
      justifyContent="center"
    />
    
    

    👥 Component Shadowing

    You know about component shadowing right? By shadowing the filePath/fileName you can replace any component in the theme with your own.

    Once such component might be src/components/Code/Code.tsx this file is in charge of formatting code snippets. For the time being the only way to format the colours used in code snippets is to change the theme used by prism-react-renderer

    If you need to re-style the code snippets shadow this component and change the bits you need.

    ko-fi

    Install

    npm i @pauliescanlon/gatsby-theme-gatstats

    DownloadsWeekly Downloads

    1

    Version

    0.0.57

    License

    MIT

    Unpacked Size

    637 kB

    Total Files

    256

    Last publish

    Collaborators

    • pauliescanlon