gatsby-theme-pitayan

gatsby-theme-pitayan is a minimalist blog theme plugin specifically designed for Gatsby, enabling developers to effortlessly create and customize their personal blog sites with a clean, modern aesthetic. This theme prioritizes ease of use and robust functionality, making it an excellent choice for those who appreciate a streamlined development experience.

Key Features:

• Gatsby V5 Ready: Built to leverage the latest features and performance enhancements of Gatsby.
• SEO Optimization: Includes built-in support for site structured data and meta tags to ensure high search engine visibility.
• Dynamic Theming: Offers a dark/light mode switch, powered by Tailwindcss, for a customizable user experience.
• Content Presentation: Features source code highlighting for technical posts, customizable in-page site links, and Medium-like functionalities such as a selection-popover for social sharing/copy and an image popover magnifier.
• Engagement Tools: Integrates with MailChimp for email newsletter subscriptions and supports multiple authors for single blog posts, fostering a collaborative environment.

Usage and Configuration: To get started, install the theme and its peer dependencies using npm or yarn. The theme requires a specific folder structure (content/authors, content/posts, content/site, src/assets) and relies on tailwind.config.js and postcss.config.js in the project root, which can export the theme's defaults for quick setup.

Configuration is managed via gatsby-config.js, where the @pitayan/gatsby-theme-pitayan plugin is added. Customizable options include siteAssets path, postsPerPage, tableOfContentsLevels, mailChimpEndpoint, mailChimpTimeout, and a function to applyGatsbyRemarkPlugins.

Content creation is straightforward:

• Site Metadata: Essential details like title, name, description, siteUrl, siteSlogan, siteLinks, siteCookieConsent, and siteSubscription are configured in siteMetadata within gatsby-config.js.
• Authors: Author profiles are defined in YAML files ({name}.yml) under content/authors/, including id, name, initial, bio, joined, avatar, and sns links.
• Posts: Blog posts are Markdown files located in content/posts/, requiring front matter for title, author, date, categories, description, keywords, and hero image. Optional slug and noIndex fields are also available.
• Site Pages: Static pages (e.g., "About," "Terms") can be created as Markdown files in content/site/, with front matter for title, date, description, keywords, and optional slug, noIndex, and displayTitle.
• Styling: The theme provides CSS utilities (e.g., .mark-w-sm, .border-t-white) for direct HTML tag adjustments, complementing Tailwindcss.
• Assets: Site logo (SiteLogo.svg) and cover image (SiteCover.svg) are placed in src/assets/.

Advanced Integration and Future Plans: The project includes a full-fledged example site (packages/www) demonstrating integration with other useful Gatsby plugins such as gatsby-plugin-feed, gatsby-plugin-sitemap, @raae/gatsby-remark-oembed (for embedding social media content), and gatsby-remark-responsive-iframe.

The theme also exposes custom events (CUSTOM_EVENT_SUBSCRIPTION, CUSTOM_EVENT_TOGGLE_THEME, CUSTOM_EVENT_SOCIAL_SHARING) for third-party script integration. It currently supports the latest versions of major browsers.

While Gatsby V3 is not supported, the roadmap includes exciting enhancements like making the theme a Tailwindcss Preset for deeper customization, implementing a search function (potentially with Algolia), adding comprehensive test cases, improving keyboard accessibility, supporting Contentful as a data source, and integrating comment systems like utteranc.es or Disqus.