‚̧Nickel Palladium Manganese
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    @eshlox/gatsby-theme-axii
    TypeScript icon, indicating that this package has built-in type declarations

    0.15.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    AXII - A Gatsby blog theme

    AXII - A Gatsby blog theme

    Netlify Status NPM Licence npm

    Demo

    Features

    • Markdown/MDX support
    • Material UI
    • Code syntax highlighter
    • Responsive images
    • Aloglia search with partial updates
    • Light/Dark mode
    • SEO
    • RSS
    • Sitemap
    • Sentry support
    • Twitter & Youtube embeds support
    • Web monetization support

    Example site - source code

    You can find the example site code in packages/site directory.

    How to use the theme

    1. Create a new directory and add package.json file with this content:
    {
      "private": true,
      "name": "blog",
      "version": "0.0.1",
      "license": "MIT",
      "scripts": {
        "build": "gatsby build",
        "develop": "gatsby develop",
        "clean": "gatsby clean"
      }
    }
    1. Installation
    npm install gatsby @eshlox/gatsby-theme-axii
    
    1. Create an Algolia application and configure three API keys.
    • admin API key for indexing
    • search API key
    • search API key for dev environment

    Algolia - API keys

    1. Create .env file to provide Algolia credentials.
    ALGOLIA_APPLICATION_ID=APP-ID
    ALGOLIA_ADMIN_API_KEY=ADMIN-API-KEY
    ALGOLIA_SEARCH_API_KEY=SEARCH-API-KEY
    ALGOLIA_INDEX_NAME=Posts
    1. Configuration.

    Create a gatsby-config.js file, use the configuration below and modify it to your needs.

    // Loads environment variables from a .env file into process.env
    require("dotenv").config();
     
    const options = {
      // The directory with blog posts (markdown/mdx files)
      contentPosts: "content/posts",
      // The site configuration
      siteMetadata: {
        // The site URL
        siteUrl: `https://gatsby-theme-axii.netlify.app`,
        // The site description
        siteDescription: `Very simple blog theme.`,
        // Author data
        author: {
          nickname: `eshlox`,
          // Author name. It's added to each page title.
          name: `Foo Bar`,
          firstName: "AXII",
          lastName: "A Gatsby theme",
          email: `email@example.com`,
          site: `gatsby-theme-axii.netlify.app`,
          gender: "male",
        },
        // Monetization
        monetization: {
          paymentPointer: "PAYMENT-POINTER",
        },
        // Social accounts. Remove to disable.
        social: {
          twitter: {
            handle: "@eshlox",
            url: "https://twitter.com/eshlox",
          },
          github: {
            url: "https://github.com/eshlox/gatsby-theme-axii",
          },
          linkedin: {
            url: "https://linkedin.com/eshlox",
          },
          telegram: {
            url: "https://telegram.me/eshlox",
          },
        },
        // Data used for the manifest page file
        manifest: {
          name: `AXII - A Gatsby blog theme`,
          short_name: `AXII`,
        },
        // Data used to display support component. Remove to disable.
        support: {
          buymeacoffee: {
            url: "https://www.buymeacoffee.com/eshlox",
          },
        },
        // Comments services. Remove to disable.
        comments: {
          disqus: {
            shortname: "axii-a-gatsby-theme",
          },
        },
        // Alogolia application ID and credentials
        search: {
          algolia: {
            posts: {
              applicationId: process.env.ALGOLIA_APPLICATION_ID,
              searchApiKey: process.env.ALGOLIA_SEARCH_API_KEY,
              adminApiKey: process.env.ALGOLIA_ADMIN_API_KEY,
              indexName: process.env.ALGOLIA_INDEX_NAME,
            },
          },
        },
        errorReporting: {
          sentry: {
            dsn: process.env.SENTRY_DSN_URL,
          },
        },
        feeds: [
          {
            query: `{
              allArticle(sort: {fields: date, order: DESC}) {
                edges {
                  node {
                    excerpt
                    slug
                    title
                    date(formatString: "YYYY-MM-DD")
                    categories
                  }
                }
              }
            }`,
            output: "/rss/index.xml",
            title: "AXII - A Gatsby blog theme",
          },
        ],
      },
    };
     
    const plugins = [
      {
        resolve: "@eshlox/gatsby-theme-axii",
        options,
      },
    ];
     
    module.exports = {
      plugins,
    };
    1. Run the development server.
    npm run develop
    1. Build the site.
    npm run build

    Index page

    To build the index page, create an index.mdx file in content/pages directory. It supports MDX so you can import and use all components. Components from src/components are available automatically. Example:

    import Typography from "@material-ui/core/Typography";
    import { GatsbySeo } from "gatsby-plugin-next-seo";
     
    <GatsbySeo title="Homepage" />
     
    <Typography variant="h1" component="h1" align="center">
      Greetings!
    </Typography>
     
    # AXII
     
    ![AXII logo](./images/avatar.png "AXII logo")
     
    ## A Gatsby blog theme.
     
    ---
     
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet venenatis risus ac malesuada. Sed accumsan tellus libero, porttitor aliquam neque consequat aliquet. Nulla massa libero, ultricies ut sapien ac, sollicitudin pretium felis. Quisque non tellus fringilla, tempus sapien nec, vulputate nulla. Vivamus eleifend fringilla felis, ac facilisis nunc congue in. Nullam ac aliquam neque. Nam egestas molestie venenatis. Vivamus vitae ipsum in sem dapibus sodales vitae nec arcu.

    Open Graph images

    File Description
    static/og-default.png Image for / and /blog
    static/og-article.png Image for all blog posts

    Site favicon.

    Add icon.png (favicon) file to the content/images directory.

    Blog posts

    By default, blog posts should be stored in the content/posts directory. Example structure:

    content
    ‚ĒĒ‚ĒÄ‚ĒÄ posts
        ‚ĒĒ‚ĒÄ‚ĒÄ 2019
            ‚Ēú‚ĒÄ‚ĒÄ music-from-aladdin-2019
            ‚Ēā¬†¬† ‚ĒĒ‚ĒÄ‚ĒÄ index.mdx
            ‚Ēú‚ĒÄ‚ĒÄ photos-from-unsplash
            ‚Ēā¬†¬† ‚Ēú‚ĒÄ‚ĒÄ images
            ‚Ēā¬†¬† ‚Ēā¬†¬† ‚Ēú‚ĒÄ‚ĒÄ carly-johnston-ndsA009eNy8-unsplash.jpg
            ‚Ēā¬†¬† ‚Ēā¬†¬† ‚Ēú‚ĒÄ‚ĒÄ eberhard-grossgasteiger-iYyfRNIgckk-unsplash.jpg
            ‚Ēā¬†¬† ‚Ēā¬†¬† ‚Ēú‚ĒÄ‚ĒÄ jamie-fenn-kj7Gp4LIvtw-unsplash.jpg
            ‚Ēā¬†¬† ‚Ēā¬†¬† ‚ĒĒ‚ĒÄ‚ĒÄ todd-trapani-kLKg4fJlmqM-unsplash.jpg
            ‚Ēā¬†¬† ‚ĒĒ‚ĒÄ‚ĒÄ index.mdx
            ‚ĒĒ‚ĒÄ‚ĒÄ twitter-test
                ‚ĒĒ‚ĒÄ‚ĒÄ index.mdx
    

    Example post file:

    ---
    title: Post title
    date: 2019-11-05
    categories: ["category"]
    tags: ["tag1", "tag2"]
    language: en
    slug: post-title
    comments: false
    ---
     
    Post body.
    Key Required Default Value Description
    title True Post title
    date True Post creation date
    categories False List of the post categories
    tags False List of the post tags
    language False en Post language
    slug False Autogenerated from title Post slug (used in URL)
    comments False True Enable/disable comments

    RSS

    It's possible to generate multiple feeds by adding more queries to siteMetadata.feeds.

    const options = {
      contentPosts: "content/posts",
      siteMetadata: {
        // ...
        feeds: [
          {
            query: `{
              allArticle(sort: {fields: date, order: DESC}) {
                edges {
                  node {
                    excerpt
                    slug
                    title
                    date(formatString: "YYYY-MM-DD")
                    categories
                  }
                }
              }
            }`,
            output: "/rss/index.xml",
            title: "AXII - A Gatsby blog theme",
          },
          {
            query: `{
              allArticle(sort: {fields: date, order: DESC}, filter: {tags: {eq: "code"}}) {
                edges {
                  node {
                    excerpt
                    slug
                    title
                    date(formatString: "YYYY-MM-DD")
                    categories
                  }
                }
              }
            }`,
            output: "/rss/tags/code.xml",
            title: "AXII - A Gatsby blog theme - #code",
          },
        ],
      },
    };

    Install

    npm i @eshlox/gatsby-theme-axii

    DownloadsWeekly Downloads

    9

    Version

    0.15.1

    License

    MIT

    Unpacked Size

    961 kB

    Total Files

    79

    Last publish

    Collaborators

    • avatar