{"id":15022514,"url":"https://github.com/eggheadio/gatsby-theme-egghead-blog","last_synced_at":"2025-05-02T07:32:54.944Z","repository":{"id":57110800,"uuid":"175672127","full_name":"eggheadio/gatsby-theme-egghead-blog","owner":"eggheadio","description":"This is a theme version of our gatsby-starter-egghead-blog.","archived":false,"fork":false,"pushed_at":"2020-04-09T21:18:19.000Z","size":4668,"stargazers_count":16,"open_issues_count":3,"forks_count":10,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T23:13:19.393Z","etag":null,"topics":["gatsby","gatsby-theme","mdx"],"latest_commit_sha":null,"homepage":null,"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/eggheadio.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-03-14T17:47:47.000Z","updated_at":"2023-05-12T16:54:14.000Z","dependencies_parsed_at":"2022-08-20T18:50:48.420Z","dependency_job_id":null,"html_url":"https://github.com/eggheadio/gatsby-theme-egghead-blog","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggheadio%2Fgatsby-theme-egghead-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggheadio%2Fgatsby-theme-egghead-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggheadio%2Fgatsby-theme-egghead-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggheadio%2Fgatsby-theme-egghead-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eggheadio","download_url":"https://codeload.github.com/eggheadio/gatsby-theme-egghead-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224252764,"owners_count":17280927,"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":["gatsby","gatsby-theme","mdx"],"created_at":"2024-09-24T19:58:03.527Z","updated_at":"2024-11-12T16:04:50.646Z","avatar_url":"https://github.com/eggheadio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# egghead.io creator MDX Blog Theme Project\n\nThis is based on Robin Wieruch's https://github.com/rwieruch/gatsby-mdx-blog-starter-project\n\nLots of nice pieces are also borrowed from Jason Lengstorf https://github.com/jlengstorf/lengstorf.com\n\nA project in [Gatsby.js](https://www.gatsbyjs.org/) themes with [MDX](https://github.com/mdx-js/mdx).\n\n## Features\n\n- MDX: JavaScript/React in Markdown\n- Prism.js: Syntax Highlighting\n- Pagination\n- Emotion\n- Typography.js\n- Self-hosted fonts ([Inter UI](https://rsms.me/inter/))\n- Social media share buttons\n- Site \u0026 Theme config files\n- ConvertKit subscribe form (Formik and Yup)\n- Placeholder illustrations by [Katerina Limpitsouni](https://twitter.com/ninalimpi) from [undraw.co](https://undraw.co/)\n\n## Getting Started\n\nThis guide will take you through how to set up a blog with this theme.\n\n### Step 1: Installation\n\n```bash\n# make your site folder\nmkdir your-site \u0026\u0026 cd your-site\n\n# init a new package.json\nyarn init\n\n# add dependencies\nyarn add -D react react-dom gatsby @eggheadio/gatsby-theme-egghead-blog\n\ntouch gatsby-config.js\n```\n\n```js\n// add the theme to your gatsby config\nmodule.exports = {\n  plugins: [`@eggheadio/gatsby-theme-egghead-blog`],\n}\n```\n\nWe will walk through the `siteMetadata` this theme expects and how to change the default path to your blog posts.\n\n### Step 2: Folder Structure\n\nThis is the default folder structure that we recommend:\n\n```\nyour-site/\n├── README.md\n├── config\n│   └── website.js\n├── content\n│   └── posts\n│       ├── demo01\n│       │   ├── HelloWorld.js\n│       │   ├── banner.png\n│       │   └── index.mdx\n│       ├── demo02\n│       └── frontmatter-placeholder\n│           ├── images\n│           │   └── banner.jpg\n│           └── index.md\n├── gatsby-config.js\n├── node_modules\n├── package.json\n```\n\n### Step 3: Adding Frontmatter Placeholder\n\nFrontmatter is the block in a markdown file denoted by surrounding hyphens: `---`.\n\nWe need to supply MDX placeholder frontmatter so that our queries wont break. Inside of your `content/blog` folder, you can add a folder called `frontmatter-placeholder`.\n\n```bash\n# navigate to where you blog posts live\ncd content/blog\n# make a placeholder folder\nmkdir frontmatter-placeholder \u0026\u0026 cd frontmatter-placeholder\n# add an index file and an images directory.\ntouch index.md\nmkdir images\n```\n\nAdd this content to the `index.md` file:\n\n```markdown\n---\nslug: invisible-post\ndate: 2019-01-01\ntitle: 'this post is a ghost'\ndescription: 'this post has all of the right fields'\ncategories: ['test']\nkeywords: ['test']\nbanner: './images/banner.jpg'\npublished: false\nredirects:\n  - '/invisible-post-423123'\n---\n\nThis exists to populate GraphQL fields and avoid null errors. It should contain all of the available frontmatter.\n```\n\nThen add [this image](./example/content/posts/frontmatter-placeholder/images/banner.jpg) (or any other image) to the images folder inside of `content/blog/frontmatter-placeholder/images`.\n\n### Step 4: Configuring siteMetadata\n\nIn order for this theme to function properly, these fields need to be inside of `siteMetadata` in you `gatsby-config.js`.\n\n```js\nconst config = require('./config/website')\nconst pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix\nmodule.exports = {\n  pathPrefix: config.pathPrefix,\n  siteMetadata: {\n    siteUrl: config.siteUrl + pathPrefix,\n    title: config.siteTitle,\n    description: config.siteDescription,\n    keywords: ['Video Blogger'],\n    canonicalUrl: config.siteUrl,\n    twitterUrl: config.twitterUrl,\n    twitterHandle: config.twitterHandle,\n    fbAppID: config.fbAppID,\n    githubUrl: config.githubUrl,\n    githubHandle: config.githubHandle,\n    image: config.siteLogo,\n    author: {\n      name: config.author,\n      minibio: `\n        \u003cstrong\u003eegghead\u003c/strong\u003e is the premier place on the internet for\n        experienced developers to enhance their skills and stay current\n        in the fast-faced field of web development.\n      `,\n    },\n    organization: {\n      name: config.organization,\n      url: config.siteUrl,\n      logo: config.siteLogo,\n    },\n  },\n  plugins: [\n    {\n      resolve: `gatsby-theme-egghead-blog`,\n      options: {},\n    },\n  ],\n}\n```\n\n## Override theme components (Component Shadowing)\n\nOnly the components that are exported from the theme are available to be overridden.\n\nTo override a theme component you will need to add `@eggheadio/gatsby-theme-egghead-blog/`. You may override anything in the `gatsby-theme-egghead-blog/src` directory.\n\nFor example, if you would like to override the default `Header` component. You would a file like this.\n\n```js\n// @egghead/gatsby-theme-egghead-blog/components/Header/index.js\nimport React from 'react'\n\nclass Header extends React.Component {\n  render() {\n    return \u003cdiv\u003ehello egghead\u003c/div\u003e\n  }\n}\n\nexport default Header\n```\n\nNow \"hello egghead\" will be rendered anywhere the old `Header` component was render.\n\nIf you shadowing a component that references other theme components (and you still need them), You will need to import them. To import them, you start with `@eggheadio/gatsby-theme-egghead-blog/` and fill in the relative path of the component that you need.\n\ne.g.\n\n```js\nimport { withTheme } from '@eggheadio/gatsby-theme-egghead-blog/components/Theming'\nimport { rhythm } from 'eggheadio/gatsby-theme-egghead-blog/lib/typography’\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feggheadio%2Fgatsby-theme-egghead-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feggheadio%2Fgatsby-theme-egghead-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feggheadio%2Fgatsby-theme-egghead-blog/lists"}