sweep: Add a banner at the top asking the user to star the docusaurus repo with the current number of stars

Here's the PR! https://github.com/kevinlu1248/docusaurus-2/pull/4.

💎 Sweep Pro: I used GPT-4 to create this ticket. You have 1117 GPT-4 tickets left for the month. To retrigger Sweep edit the issue.

Install Sweep Configs: Pull Request

Step 1: 🔍 Code Search

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/kevinlu1248/docusaurus-2/blob/e2f0b3ef2802c6e668ea249c6ff57f3eda09d149/docusaurus.config.js#L1-L132 https://github.com/kevinlu1248/docusaurus-2/blob/e2f0b3ef2802c6e668ea249c6ff57f3eda09d149/docs/tutorial-basics/_category_.json#L1-L8 https://github.com/kevinlu1248/docusaurus-2/blob/e2f0b3ef2802c6e668ea249c6ff57f3eda09d149/src/components/HomepageFeatures/index.js#L1-L64 https://github.com/kevinlu1248/docusaurus-2/blob/e2f0b3ef2802c6e668ea249c6ff57f3eda09d149/package.json#L1-L41 https://github.com/kevinlu1248/docusaurus-2/blob/e2f0b3ef2802c6e668ea249c6ff57f3eda09d149/blog/authors.yml#L1-L17

I also found some related docs:

Summary of related docs from https://docusaurus.io/docs:

The relevant documentation snippets provide information about code blocks and theming in Docusaurus. However, they do not specifically address the problem of adding a banner at the top of the repo with the current number of stars and custom styling. Therefore, these snippets may not be directly applicable to solving the user's problem.

Sources:

https://docusaurus.io/docs/2.0.1/markdown-features/code-blocks

https://docusaurus.io/docs/2.1.0/markdown-features/code-blocks

https://docusaurus.io/docs/2.2.0/markdown-features/code-blocks

https://docusaurus.io/docs/next/markdown-features/code-blocks

https://docusaurus.io/docs/2.3.1/markdown-features/code-blocks

Step 2: 🧐 Snippet Analysis

From looking through the relevant snippets, I decided to make the following modifications:

File Path	Proposed Changes
`src/components/GithubStarsBanner.js`	Create src/components/GithubStarsBanner.js with contents: • Import React and necessary Docusaurus components • Create a new React component named `GithubStarsBanner` • In the component, fetch the star count from GitHub using the GitHub API • Render a banner with the star count and a message asking users to star the Docusaurus repository • Style the banner with a lime background and center alignment
`src/components/GithubStarsBanner.module.css`	Create src/components/GithubStarsBanner.module.css with contents: • Define CSS rules for the `GithubStarsBanner` component • Set the background color to lime • Center the text and adjust the padding and margins for aesthetic design
`src/pages/index.js`	Modify src/pages/index.js with contents: • Import the `GithubStarsBanner` component • Add the `GithubStarsBanner` component at the top of the main layout

Step 3: 📝 Planning

I have created a plan for writing the pull request. I am now working my plan and coding the required changes to address this issue. Here is the planned pull request:

Add GithubStarsBanner component and styling sweep/add-github-stars-banner

Description

This PR adds a new GithubStarsBanner component to the Docusaurus site. The component fetches the star count from the Docusaurus repository on GitHub and displays it in a banner at the top of the site. The banner has a lime background color and is centered for aesthetic design.

Summary of Changes

Created a new GithubStarsBanner component in the src/components directory

Implemented fetching the star count from the GitHub API and displaying it in the banner

Added a new CSS module GithubStarsBanner.module.css to style the banner with a lime background and center alignment

Modified the src/pages/index.js file to import and include the GithubStarsBanner component at the top of the main layout

Step 4: ⌨️ Coding

File	Instructions	Progress
`src/components/GithubStarsBanner.js`	Create src/components/GithubStarsBanner.js with contents: • Import React and necessary Docusaurus components • Create a new React component named `GithubStarsBanner` • In the component, fetch the star count from GitHub using the GitHub API • Render a banner with the star count and a message asking users to star the Docusaurus repository • Style the banner with a lime background and center alignment	✅ Commit `8a14dea`
`src/components/GithubStarsBanner.module.css`	Create src/components/GithubStarsBanner.module.css with contents: • Define CSS rules for the `GithubStarsBanner` component • Set the background color to lime • Center the text and adjust the padding and margins for aesthetic design	✅ Commit `8a14dea`
`src/pages/index.js`	Modify src/pages/index.js with contents: • Import the `GithubStarsBanner` component • Add the `GithubStarsBanner` component at the top of the main layout	✅ Commit `55da4ff`	I have finished coding the issue. I am now reviewing it for completeness.

Step 5: 🔁 Code Review

Here are my self-reviews of my changes at sweep/add-github-stars-banner.

Here is the 1st review

No changes required. The code is well-written and all functions are fully implemented. Good job!

I finished incorporating these changes.

To recreate the pull request edit the issue title or description. ^{Join Our Discord}

kevinlu1248 / docusaurus-2