Gatsby Theme Hacker News

• an elegant way to display linked headlines from Hacker News
• option to display on styled MDX file

This theme includes

• two components <List /> and <Headline /> to display Hacker News headlines on your site
• gatsby-theme-mdx configured inside this theme
• gatsby-source-hacker-news plugin

Here's the source code

Check out a live demo

Example:

Installation

To use this theme in your Gatsby sites, follow these instructions:

1. Install the theme

npm install --save gatsby-theme-hacker-news

2. Add the theme to your gatsby-config.js:

module.exports = {
  plugins: ["gatsby-theme-hacker-news"],
}

3. Start your site

gatsby develop

To change the number of displayed headlines:

• create a shadow component List.js
• in the shadow component, splice the map function. For example, to display 11 results:

{data.allHnStory.edges.splice(0,11).map(({ node })

• alternately, modify the GraphQL query:

allHnStory(sort: {fields: [order]}, limit: 11)