{"id":22378880,"url":"https://github.com/codebrahma/gatsby-theme-blog","last_synced_at":"2025-07-31T01:31:37.554Z","repository":{"id":36053427,"uuid":"217320988","full_name":"Codebrahma/gatsby-theme-blog","owner":"Codebrahma","description":"Gatsby Blog theme with tags and categories","archived":false,"fork":false,"pushed_at":"2023-04-20T20:03:23.000Z","size":6941,"stargazers_count":4,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-09T16:54:20.195Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://codebrahma.com/blog","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codebrahma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-24T14:35:53.000Z","updated_at":"2022-09-24T16:26:41.000Z","dependencies_parsed_at":"2022-09-17T18:20:58.188Z","dependency_job_id":null,"html_url":"https://github.com/Codebrahma/gatsby-theme-blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fgatsby-theme-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fgatsby-theme-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fgatsby-theme-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codebrahma%2Fgatsby-theme-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codebrahma","download_url":"https://codeload.github.com/Codebrahma/gatsby-theme-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228204671,"owners_count":17884711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-04T23:08:13.399Z","updated_at":"2024-12-04T23:08:13.916Z","avatar_url":"https://github.com/Codebrahma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.codebrahma.com\"\u003e\n    \u003cimg alt=\"Gatsby\" src=\"https://oldwebsite.codebrahma.com/wp-content/themes/codebrahma/public/img/cb_logo_small@2x.png\" width=\"100\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.gatsbyjs.org\"\u003e\n    \u003cimg alt=\"Gatsby\" src=\"https://www.gatsbyjs.org/monogram.svg\" width=\"60\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eGatsby Theme Blog\u003c/h1\u003e\n\n:fire: A Gatsby blog theme supporting local filesystem content, MDX and image processing.\n\nThe theme provides several built-in features to set the bare-minimum for building a blog including:\n\n* Content sourcing and transformation from the filesystem via gatsby-source-filesystem\n* MDX support via gatsby-plugin-mdx\n* Image processing via gatsby-plugin-sharp and gatsby-remark-images\n* Auto creation of individual blog post pages\n* Auto creation of tags/category/author pages\n* Blog list page with Pagination - you specify the number of blogs in a page in the Theme Options.\n\n## Installation\n```bash\n  npm install @codebrahma/gatsby-theme-blog\n```\n\n## :rocket: Usage\n\n### Theme Options\n\n|Key            | Default Value | Description                                                                                             |\n|---------------|---------------|---------------------------------------------------------------------------------------------------------|\n|`basePath`     | `\"/blog\"`     | Root URL to all blog posts                                                                              |\n|`contentPath`  | `\"posts\"`     | Location of blog posts                                                                                  |\n|`itemsPerPage` | `7`           | Number of items per page                                                                                |\n|`mdx`          | `true`        | Configure gatsby-plugin-mdx (if your website already is using the plugin pass `false` to turn this off) |\n\n### Example Usage\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `@codebrahma/gatsby-theme-blog`,\n      options: {\n        contentPath: 'content/posts',\n        basePath: '/blogs',\n        itemsPerPage: 5\n      }\n    }\n  ]\n}\n```\n\n`content/posts` directory contains all your Markdown files powering the blog.\n\n```bash\n  mkdir -p content/posts/hello-world\n  touch content/posts/hello-world/hello-world.md\n```\n\n💡 A sample post is below:\n\n```\n---\ntitle: 'Hello World'\ndate: 2019-10-30\nfeaturedpost: false\ndescription: Hello World, this is my first post.\nkeywords:\n- gatsby\n- is\n- wonderful\nlink: /hello-world\ncategory:\n- Gatsby\nauthor: Codebrahma\nimage: ./image.png\ntags:\n- gatsby\n- react\ntemplateKey: blog-post\n---\n\nHello World! This is my first post! I'll have great features enabled by default, including:\n \n- Syntax highlighting with triple backticks\n- Responsive images\n- Responsive iframe embeds\n- and more!\n```\n\n## :sparkles: Additional Configuration:\n\n* In addition to the theme options you can add your own Layout component to the blogs. Create a file `src/@codebrahma/gatsby-theme-blog/components/layout.js` in your site for Component Shadowing.\n\nA sample layout file:\n\n```js\n// src/@codebrahma/gatsby-theme-blog/components/layout.js\nimport React from 'react'\nimport Header from './Header'\nimport Footer from './Footer'\n\nconst Layout = ({ children }) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cHeader /\u003e\n      \u003cmain\u003e\n        {children}\n      \u003c/main\u003e\n      \u003cFooter /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## :art: Theming\n* Add your own set of design tokens to create a whole new look for the theme. Take a look at current [theme file](https://github.com/Codebrahma/gatsby-theme-blog/blob/master/gatsby-blog-theme/src/theme.js) and get creative. Upgrade by creating your own `theme.js` file.\n\n* Example:\n```js\n// src/@codebrahma/gatsby-theme-blog/components/layout.js\nimport React from 'react'\nimport theme from './theme'\nimport { ThemeProvider } from 'theme-ui'\n\nconst Layout = ({ children }) =\u003e {\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      \u003cmain\u003e\n        {children}\n      \u003c/main\u003e\n    \u003c/ThemeProvider\u003e\n  )\n}\n```\n\n## :handshake: Contributing\n\nContributions, issues and feature requests are welcome.\nFeel free to check [issues](https://github.com/Codebrahma/gatsby-theme-blog/issues) page if you want to contribute.\n\n## :pencil: Licence\n This project is [MIT](https://github.com/Codebrahma/gatsby-theme-blog/blob/master/LICENSE) licensed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebrahma%2Fgatsby-theme-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebrahma%2Fgatsby-theme-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebrahma%2Fgatsby-theme-blog/lists"}