feat: Build a Next.js SEO-Optimised Marketing Website Deployable on GitHub Pages

[coderabbitai]

Overview

The SocialShareButton library currently lacks a dedicated marketing/showcase website, limiting its visibility and discoverability. This issue proposes building a minimal, SEO-optimised Next.js frontend that can be deployed for free using GitHub Pages (via static export).

The goal is to help developers discover the library quickly, understand its value, and integrate it with minimal friction.

implement all your changes targeted to "website" branch (not main).

Motivation

• Improve organic discoverability through search engines
• Demonstrate real-world usage and benefits to potential users
• Provide developers with a quick onboarding path
• Keep infrastructure simple — free hosting via GitHub Pages

---

Proposed Tech Stack

Concern	Choice
Framework	Next.js (static export output: 'export')
Hosting	GitHub Pages (via GitHub Actions)
Styling	Tailwind CSS
SEO	next/head + Open Graph meta tags

---

Required Sections

1. Hero Section

• Tagline: "Lightweight social share button library for modern websites"
• Sub-tagline highlighting ease of integration and zero dependencies
• Primary CTA buttons: Star on GitHub, View Docs, Try Demo

2. "Trusted By" / "Used In" Section

Display logos/links of organisations and projects that use or are affiliated with SocialShareButton:

• AOSSIE
• Djed
• Stability Nexus

3. "Why SocialShareButton?" Section (SEO + onboarding)

Short, benefit-focused highlights — not technical-heavy. Examples:

• 🚀 Lightweight & fast
• 🎨 Fully customisable styles
• ♿ Accessible by default
• 🔌 Drop-in integration — no build step required
• 📦 Framework agnostic

4. Real Use-Case Section

Showcase scenarios where the library shines (see #26 for reference):

• Blog posts & articles
• Documentation websites
• E-commerce product pages
• Web3 / DeFi applications with steps-based sharing flows
• Marketing landing pages

5. Quick Integration Example (Copy-Paste Snippet)

A syntax-highlighted, copy-to-clipboard code block showing the minimal integration (HTML <script> + <link> + button markup). Developers love quick onboarding — this section should answer "How do I add this in 30 seconds?"

Important: Always import the button CSS and JS from the existing library files — no duplication or additional bundling.

6. Animated Demo Preview

An interactive or animated section showing the social share buttons in action. Creative freedom is encouraged, but:

• Must source styles and behaviour from the existing src/ CSS and JS files
• No extra third-party UI libraries just for the demo

7. Comparison Section

A simple table comparing SocialShareButton with alternative libraries (e.g., AddToAny, ShareThis, react-share) across dimensions like:

• Bundle size
• Customisability
• SSR compatibility
• Framework support
• Open-source / self-hosted

8. Footer CTAs

Sticky or prominent end-of-page buttons:

• ⭐ Star on GitHub
• 📖 View Docs
• 🎮 Try Demo

---

SEO Requirements

• Proper <title>, <meta description>, Open Graph, and Twitter Card tags on every page
• Semantic HTML5 structure
• Fast load times (static export = no server needed)
• Target keywords: "social share button library", "lightweight share buttons javascript", "open source social sharing"

---

Deployment

The site should be deployable via a GitHub Actions workflow that:

1. Runs next build with output: 'export'
2. Publishes the out/ directory to the gh-pages branch

---

Acceptance Criteria

• Next.js project bootstrapped with static export configured
• GitHub Actions workflow for automated deployment to GitHub Pages
• All 8 sections above implemented
• SEO meta tags in place on all pages
• Existing library CSS/JS imported — no duplication
• Responsive design (mobile + desktop)
• Lighthouse score ≥ 90 for Performance, SEO, and Accessibility
• Design preview (Figma or AI-generated mockup) shared before implementation begins

---

References

• Real use-cases discussion: [FEATURE]: Auto-generate Share Text Based on Content #26
• Library source: src/social-share-button.js, src/social-share-button.css

---

Note for contributors: Please share a Figma file or AI-generated preview images in this issue before opening a PR, so the design can be reviewed and aligned with project goals early.

[aashnaachaudhary10]

Hi @coderabbitai ! I’d like to work on this issue.

I will first share a Figma/AI-generated design preview of the marketing website before starting implementation, as suggested in the issue.

Please let me know if I can proceed.

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch details of issue `#58`
gh issue view 58 --repo AOSSIE-Org/SocialShareButton

Length of output: 4551

---

@aashnaachaudhary10, welcome, and thanks for your interest in working on this! 🎉

Your approach is exactly right — sharing a Figma or AI-generated design preview first is a stated requirement in the issue, so please go ahead and do that before starting implementation.

Here are a few things to keep in mind as you prepare your design mockup:

✅ All 8 sections should be represented in the preview

1. Hero Section — tagline, sub-tagline, CTAs (Star on GitHub, View Docs, Try Demo)
2. "Trusted By" — logos for AOSSIE, Djed, Stability Nexus
3. "Why SocialShareButton?" — benefit-focused highlights
4. Real Use-Case Section — blog posts, docs sites, e-commerce, Web3, etc.
5. Quick Integration Example — syntax-highlighted copy-paste snippet
6. Animated Demo Preview — social share buttons in action (sourcing from existing src/ files)
7. Comparison Table — vs AddToAny, ShareThis, react-share, etc.
8. Footer CTAs — Star on GitHub, View Docs, Try Demo

🛠️ Tech stack to target

• Next.js with output: 'export' (static export for GitHub Pages)
• Tailwind CSS for styling
• No extra third-party UI libraries for the demo section

📐 Design considerations

• Responsive design for mobile + desktop
• Aim for a Lighthouse score ≥ 90 for Performance, SEO, and Accessibility — keep this in mind even at the design stage (contrast ratios, semantic structure, etc.)
• The demo section must source styles and behaviour from the existing src/social-share-button.js and src/social-share-button.css — no duplication

Once you share the design preview here in the issue, the maintainers can review and give the go-ahead for implementation. Feel free to tag the maintainers when you post it!

[aashnaachaudhary10]

Hi @coderabbitai, @kpj2006 👋

I created an AI-generated design preview for the SocialShareButton marketing landing page.

The design includes the required sections:

• Hero section with CTA buttons
• Trusted By section
• Why SocialShareButton
• Real Use Cases
• Quick Integration Example
• Animated Demo preview
• Comparison table
• Footer CTA

I’m sharing the design preview screenshots below.
Please let me know if the layout looks good or if any adjustments are needed.

If approved, I will proceed with the implementation using Next.js and Tailwind CSS as described in the issue.

[aashnaachaudhary10]

Hi @kpj2006 @coderabbitai !

I’ve started working on a design preview for the marketing website mentioned in this issue. Already shared the initial mockup here for feedback.
Please let me know if the layout or sections should be adjusted before I proceed with the development targeting the website branch.

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch details of issue `#58`
gh issue view 58 --repo AOSSIE-Org/SocialShareButton

echo "---BRANCHES---"
# List branches to confirm website branch exists
gh api repos/AOSSIE-Org/SocialShareButton/branches --jq '.[].name'

echo "---WEBSITE BRANCH TREE---"
# Check what's in the website branch
gh api repos/AOSSIE-Org/SocialShareButton/git/trees/website?recursive=1 --jq '.tree[].path' 2>/dev/null || echo "website branch not found or empty"

Length of output: 5116

---

@aashnaachaudhary10, thanks for sharing the design previews — the mockups look like a solid starting point and cover all 8 required sections! 🎉 Here's structured feedback before you proceed:

---

✅ What looks good

• All 8 sections appear to be represented
• The layout follows a clear visual hierarchy
• CTA buttons are prominently placed in the Hero section

---

🔍 Feedback & things to double-check

1. Hero Section

• Make sure the tagline exactly matches the issue spec: "Lightweight social share button library for modern websites"
• Confirm all three CTA buttons are present: Star on GitHub, View Docs, and Try Demo
• Use the existing public/socialsharebutton.svg from the website branch as the logo

2. "Trusted By" Section

• The logos for AOSSIE already exist on the website branch at public/AOSSIE-light.png and public/aossie_logo.svg — reuse these rather than generating new ones
• Logos for Djed and Stability Nexus will need to be sourced from their respective sites

3. "Why SocialShareButton?" Section

• Ensure all 5 highlights are visible: 🚀 Lightweight, 🎨 Customisable, ♿ Accessible, 🔌 Drop-in, 📦 Framework agnostic
• Keep copy benefit-focused, not technical-heavy

4. Quick Integration Example

• The code block should show the minimal HTML <script> + <link> + button markup integration
• Must reference the actual library files — no duplicated or inlined styles

5. Animated Demo Preview

• The demo section must use src/social-share-button.js and src/social-share-button.css from the branch directly — please confirm the mockup reflects this (not a standalone re-implementation)

6. Comparison Table

• Verify the dimensions match the issue spec: Bundle size, Customisability, SSR compatibility, Framework support, Open-source/self-hosted

7. Accessibility & Contrast

• Since Lighthouse ≥ 90 for Accessibility is required, please review your colour choices for contrast ratios (WCAG AA minimum: 4.5:1 for text)

---

🏗️ Implementation notes for the website branch

The website branch currently has no Next.js scaffold yet. When you start, you'll need to bootstrap it cleanly:

# Bootstrap Next.js in the website branch
npx create-next-app@latest . --ts --tailwind --eslint --app --src-dir --import-alias "@/*"

Key things to keep in mind:

• Add output: 'export' to next.config.ts for GitHub Pages static export
• Reuse existing assets already on the branch (public/AOSSIE-light.png, public/aossie_logo.svg, public/socialsharebutton.svg)
• The src/social-share-button.js and src/social-share-button.css must be imported into the demo section — not duplicated
• You'll also need to create a GitHub Actions workflow (.github/workflows/deploy.yml) to build and publish the out/ directory to gh-pages

---

Once the maintainer (@kpj2006) gives the go-ahead on the design, you're good to start implementation. Feel free to tag them directly on this comment for a faster response!

[aashnaachaudhary10]

Thanks for the detailed feedback! I'll update the mockup to incorporate the suggested improvements (CTA buttons, trusted-by assets, feature highlights, integration example, comparison table, and accessibility checks). I'll share the revised preview shortly before starting the implementation on the website branch.

[lakshyasarve]

Hi @kpj2006, I would like to work on this issue, I would firstly create a UI/UX then get it approved before moving to the actual code

[reach2saksham]

Hi @kpj2006 , I would like to work on this issue. I will soon share the Figma file for the designs.