Skip to content

fix: swap copilot and three steps sections in getting started page #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amankv1234 wants to merge 3 commits into
base: main
Choose a base branch
from
+29 −20
Open

fix: swap copilot and three steps sections in getting started page #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
749e020
fix docs page
amankv1234 Jul 17, 2026
8f2e8da
fix client demo page
amankv1234 Jul 17, 2026
9865371
docs: differentiate AI-Agent and Manual setup in Getting Started
amankv1234 Jul 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions docs/client-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@ Your audience is already sharing. Give them a button worth clicking.

## How to Get Started

### 1. By AI-Agent

> **Using GitHub Copilot?**
> Open the chat, type `@workspace`, then copy the public prompt from:
> https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md
> Copilot will walk through each step for your exact framework automatically.

### 2. Manually

You have exactly **three steps** between you and a live share button.

```text
Expand All @@ -29,10 +38,6 @@ You have exactly **three steps** between you and a live share button.

That's it. No accounts. No API keys. No configuration files.

> **Using GitHub Copilot?**
> Open the chat, type `@workspace`, then copy the public prompt from:
> https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md
> Copilot will walk through each step for your exact framework automatically.

---

Expand Down
36 changes: 20 additions & 16 deletions landing-page/src/app/docs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,23 +132,9 @@ export default function Docs() {
How to Get Started
</h2>

<p className="text-base sm:text-lg md:text-xl mb-6 sm:mb-8">
You have exactly <span className="font-bold text-[#00C853]">three steps</span> between you and a live share button.
</p>
<h3 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">1. By AI-Agent</h3>

<div className="bg-[#00C853]/10 dark:bg-[#00C853]/5 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-l-4 border-[#00C853]">
<pre className="text-sm sm:text-base md:text-lg font-mono whitespace-pre-wrap">
1. Load the library → one line in your HTML or package install
2. Drop a div → place it wherever you want the button
3. Initialize → one line of JavaScript
</pre>
</div>

<p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8">
That's it. No accounts. No API keys. No configuration files.
</p>

<div className="bg-[#FFCC00]/10 dark:bg-[#FFCC00]/5 rounded-2xl p-4 sm:p-6 border-2 border-[#FFCC00]">
<div className="bg-[#FFCC00]/10 dark:bg-[#FFCC00]/5 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-2 border-[#FFCC00]">
<p className="text-xs sm:text-sm font-bold text-[#FFCC00] mb-2">Using GitHub Copilot?</p>
<p className="text-sm sm:text-base mb-4">
Open the chat, type <code className="bg-black dark:bg-white text-white dark:text-black px-2 py-1 rounded text-sm">@workspace</code>, then copy the public prompt from:
Expand All @@ -165,6 +151,24 @@ export default function Docs() {
Copilot will walk through each step for your exact framework automatically.
</p>
</div>

<h3 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">2. Manually</h3>

<p className="text-base sm:text-lg md:text-xl mb-6 sm:mb-8">
You have exactly <span className="font-bold text-[#00C853]">three steps</span> between you and a live share button.
</p>

<div className="bg-[#00C853]/10 dark:bg-[#00C853]/5 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-l-4 border-[#00C853]">
<pre className="text-sm sm:text-base md:text-lg font-mono whitespace-pre-wrap">
1. Load the library → one line in your HTML or package install
2. Drop a div → place it wherever you want the button
3. Initialize → one line of JavaScript
</pre>
</div>

<p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8">
That's it. No accounts. No API keys. No configuration files.
</p>
</div>
</div>

Expand Down
Loading