Gatsby Pocket

gatsby-theme-pocket is a Gatsby theme that imports articles you've saved to Pocket into your Gatsby site, rendering them as an SEO-optimized, tag-filterable index page.

What is gatsby-theme-pocket?

gatsby-theme-pocket is a Gatsby theme created by Rich Haines of Hungry Bear Studio. It connects to the Pocket API using your access token and weeksOfHistory option to fetch saved articles, then outputs an article index page that lists each item as a clickable card. The page includes the article's title, excerpt, image when available, and word count, and it ships with built-in SEO props for title, description, keywords, and site URL.

Key Features

• Pocket API integration — Requires a Pocket access token obtained via yarn pocket-setup; fetches saved items from the last weeksOfHistory weeks.
• Tag filtering — Set tagFilter to true and provide tagFilterString to show only articles with that tag; use _untagged_ to show only untagged saves.
• Search filtering — Set searchFilter to true and provide searchFilterString to match articles against their URL or title.
• Custom page URL — The default page at /articleIndex can be overridden by setting the customUrl theme option, for example research.
• Built-in SEO fields — Configure seoTitle, seoDescription, seoKeywords as a string array, and siteUrl for the generated page.
• Theme-UI styling — The theme uses Theme-UI out of the box; the Article component styles come from the sx prop, so overriding the theme-ui index changes fonts and colors globally.
• Shadowable Article component — The card component is exported separately, so Gatsby component shadowing can replace or alter its markup and behavior.
• No CSS framework lock-in — Built with Emotion and Theme-UI, so styling is scoped and theme-able.

Who is it for?

• Personal site owners — Add a curated list of articles they've read or saved, ready for visitors to browse by tag.
• Business websites — Show market-relevant articles on a campaign page such as /research, using tags to keep the list focused.
• Gatsby developers — Easily extend the theme with component shadowing and theme-ui overrides without forking the package.

What can you do with gatsby-theme-pocket?

• Personal bloggers: Display a tag-filtered list of your Pocket saves so readers can see your reading interests without leaving your site.
• Marketing teams: Curate third-party articles that support your industry positioning and place them on a custom URL with SEO metadata controlled per site.
• Advanced users: Filter by tags or search terms, then restyle the cards entirely by shadowing the Article component.

How does the theme work?

Install the theme with yarn add gatsby-theme-pocket, then run yarn pocket-setup to authorize your Pocket account and receive an access token. Add the theme to your gatsby-config.js plugins array with the required options — pocketAccessToken, weeksOfHistory, tagFilter, searchFilter, pageTitle, and SEO fields — and the theme generates a page listing article cards at your chosen URL.

Pricing

gatsby-theme-pocket is open-source and released under the MIT License, so it is free to use, modify, and redistribute. A Pocket account is required; Pocket itself offers a free tier.

FAQ

How do I get my Pocket access token?

Run yarn pocket-setup from your project after installing the theme. It will open a browser URL where you authorize your Pocket account, then prints an access token to save and pass to the theme.

Can I change the page URL from /articleIndex?

Yes. Set the customUrl theme option to a path such as research, and the article index page will be served at that path instead of the default.

How do I filter articles by tag?

Enable tagFilter and set tagFilterString to the desired tag. If you set tagFilterString to _untagged_, only articles without any tags will be shown.

Can I restyle the article cards?

The Article component uses Theme-UI's sx prop, so you can change colors and typography by shadowing the theme-ui index. For more control, shadow the Article component itself.

Does the theme include SEO support?

Yes. The theme accepts seoTitle, seoDescription, seoKeywords, and siteUrl options and applies them to the generated page's metadata.