From c35d82a9e51cac785594f45a4f73b58aa0cd2c6a Mon Sep 17 00:00:00 2001 From: kpj2006 Date: Sun, 1 Mar 2026 02:37:30 +0000 Subject: [PATCH] chore(template): merge template changes :up: Signed-off-by: kpj2006 --- .coderabbit.yml | 236 +++++++++++++++ .gitignore | 340 +++++++++++++++++++++- COPYRIGHT.md | 8 + Contributors.md | 15 + DCO.md | 34 +++ README.md | 679 ++++++------------------------------------- public/stability.svg | 14 + 7 files changed, 724 insertions(+), 602 deletions(-) create mode 100644 .coderabbit.yml create mode 100644 COPYRIGHT.md create mode 100644 Contributors.md create mode 100644 DCO.md create mode 100644 public/stability.svg diff --git a/.coderabbit.yml b/.coderabbit.yml new file mode 100644 index 0000000..8aaf7f9 --- /dev/null +++ b/.coderabbit.yml @@ -0,0 +1,236 @@ +# Enables IDE autocompletion for this config file +# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json + +# Language for CodeRabbit's review comments +language: en + +# Enable experimental features (currently not using any specific early_access features) +early_access: true + +chat: + # CodeRabbit will automatically respond to @coderabbitai mentions in PR comments + auto_reply: true + +reviews: + profile: assertive # Options: chill (focuses on significant issues, less nitpicky about style), assertive (more thorough, flags style issues and minor improvements too) + + auto_review: + # Automatically trigger reviews when PRs are opened or updated + enabled: true + # Skip auto-review if PR title contains these keywords + ignore_title_keywords: + - "WIP" + # Don't auto-review draft PRs + drafts: false + # Only auto-review PRs targeting these branches + base_branches: + - main + - develop + + # Include a high-level summary at the start of each review + high_level_summary: true + + # Generate sequence diagrams for complex code flows + sequence_diagrams: true + + # Include poems in reviews + poem: true + + # Show review completion status + review_status: true + + # Keep the walkthrough section expanded by default + collapse_walkthrough: false + + # Include summary of all changed files + changed_files_summary: true + + # Automatically request changes on the PR (just leave comments) + request_changes_workflow: true + + # Pre-merge checks to enforce before merging PRs + pre_merge_checks: + description: + # Validate that PR has a proper description + mode: warning # Options: off, warning, error + docstrings: + # Disable docstring coverage checks (let's assume we don't need them) + mode: off + + # Exclude these paths from reviews (build artifacts and dependencies) + path_filters: + - "!**/node_modules/**" # npm dependencies + - "!**/android/**" # Native Android build files + - "!**/ios/**" # Native iOS build files + - "!**/.expo/**" # Expo build cache + - "!**/.expo-shared/**" # Expo shared config + - "!**/dist/**" # Build output + + # Use the following tools when reviewing + tools: + shellcheck: + enabled: true + ruff: + enabled: true + markdownlint: + enabled: true + github-checks: + enabled: true + timeout_ms: 90000 + languagetool: + enabled: true + enabled_only: false + level: default + biome: + enabled: true + hadolint: + enabled: true + swiftlint: + enabled: true + phpstan: + enabled: true + level: default + golangci-lint: + enabled: true + yamllint: + enabled: true + gitleaks: + enabled: true + checkov: + enabled: true + detekt: + enabled: true + eslint: + enabled: true + + # Apply the following labels to PRs + labeling_instructions: + - label: Python Lang + instructions: Apply when the PR/MR contains changes to python source-code + - label: Solidity Lang + instructions: Apply when the PR/MR contains changes to solidity source-code + - label: Typescript Lang + instructions: Apply when the PR/MR contains changes to javascript or typescript source-code + - label: Ergoscript Lang + instructions: Apply when the PR/MR contains changes to ergoscript source-code + - label: Bash Lang + instructions: >- + Apply when the PR/MR contains changes to shell-scripts or BASH code + snippets + - label: Make Lang + instructions: >- + Apply when the PR/MR contains changes to the file `Makefile` or makefile + code snippets + - label: Documentation + instructions: >- + Apply whenever project documentation (namely markdown source-code) is + updated by the PR/MR + - label: Linter + instructions: >- + Apply when the purpose of the PR/MR is related to fixing the feedback + from a linter + + # Review instructions that apply to all files + instructions: >- + - Verify that documentation and comments are free of spelling mistakes + - Ensure that test code is automated, comprehensive, and follows testing best practices + - Verify that all critical functionality is covered by tests + - Confirm that the code meets the project's requirements and objectives + - Confirm that copyright years are up-to date whenever a file is changed + - Point out redundant obvious comments that do not add clarity to the code + - Look for code duplication + - Suggest code completions when: + - seeing a TODO comment + - seeing a FIXME comment + + # Custom review instructions for specific file patterns + path_instructions: + # TypeScript/JavaScript files + - path: "**/*.{ts,tsx,js,jsx}" + instructions: | + NextJS: + - Ensure that "use client" is being used + - Ensure that only features that allow pure client-side rendering are used + - NextJS best practices (including file structure, API routes, and static generation methods) are used. + + TypeScript: + - Avoid 'any', use explicit types + - Prefer 'import type' for type imports + - Review for significant deviations from Google JavaScript style guide. Minor style issues are not a priority + - The code adheres to best practices associated with React + - The code adheres to best practices associated with React PWA + - The code adheres to best practices associated with SPA + - The code adheres to best practices recommended by lighthouse or similar tools for performance + - The code adheres to best practices associated with Node.js + - The code adheres to best practices recommended for performance + + Security: + - No exposed API keys or sensitive data + - Use expo-secure-store for sensitive storage + - Validate deep linking configurations + - Check for common security vulnerabilities such as: + - SQL Injection + - XSS (Cross-Site Scripting) + - CSRF (Cross-Site Request Forgery) + - Insecure dependencies + - Sensitive data exposure + + Internationalization: + - User-visible strings should be externalized to resource files (i18n) + + # HTML files + - path: "**/*.html" + instructions: | + Review the HTML code against the google html style guide and point out any mismatches. Ensure that: + - The code adheres to best practices recommended by lighthouse or similar tools for performance + + # CSS files + - path: "**/*.css" + instructions: | + Review the CSS code against the google css style guide and point out any mismatches. Ensure that: + - The code adheres to best practices associated with CSS. + - The code adheres to best practices recommended by lighthouse or similar tools for performance. + - The code adheres to similar naming conventions for classes, ids. + + # Python files + - path: "**/*.{py}" + instructions: | + Python: + - Check for major PEP 8 violations and Python best practices. + + # Solidity Smart Contract files + - path: "**/*.sol" + instructions: | + Solidity: + - Review the Solidity contracts for security vulnerabilities and best practices + - Ensure that the contracts are immutable + - Ensure that there no unbounded loops that may run out of gas + - Use appropriate visibility modifiers + - flag variables that are defined and used only once + - Look for gas optimization opportunities + + # Javascript/Typescript test files + - path: "**/*.test.{ts,tsx,js,jsx}" + instructions: | + Review test files for: + - Comprehensive coverage of component behavior + - Proper use of @testing-library/react-native + - Async behavior is properly tested + - Accessibility testing is included + - Test descriptions are sufficiently detailed to clarify the purpose of each test + - The tests are not tautological + + # Solidity test files + - path: "**/*.test.{sol}" + instructions: | + Review test files for: + - Comprehensive coverage of contract behavior + + # Asset files (images, fonts, etc.) + - path: "assets/**/*" + instructions: | + Review asset files for: + - Image optimization (appropriate size and format) + - Proper @2x and @3x variants for different screen densities + - SVG assets are optimized + - Font files are licensed and optimized diff --git a/.gitignore b/.gitignore index f80d934..9308a4b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,16 +1,326 @@ -node_modules/ -dist/ +## Core latex/pdflatex auxiliary files: +*.aux +*.lof *.log -.DS_Store -.vscode/ -.idea/ -*.swp -*.swo -*~ -.cache/ -coverage/ -.env -.env.local -.env.development.local -.env.test.local -.env.production.local +*.lot +*.fls +*.out +*.toc +*.fmt +*.fot +*.cb +*.cb2 +.*.lb + +## Intermediate documents: +*.dvi +*.xdv +*-converted-to.* +# these rules might exclude image files for figures etc. +# *.ps +# *.eps +# *.pdf + +## Generated if empty string is given at "Please type another file name for output:" +.pdf + +## Bibliography auxiliary files (bibtex/biblatex/biber): +*.bbl +*.bbl-SAVE-ERROR +*.bcf +*.bcf-SAVE-ERROR +*.blg +*-blx.aux +*-blx.bib +*.run.xml + +## Build tool auxiliary files: +*.fdb_latexmk +*.synctex +*.synctex(busy) +*.synctex.gz +*.synctex.gz(busy) +*.pdfsync +*.rubbercache +rubber.cache + +## Build tool directories for auxiliary files +# latexrun +latex.out/ + +## Auxiliary and intermediate files from other packages: +# algorithms +*.alg +*.loa + +# achemso +acs-*.bib + +# amsthm +*.thm + +# attachfile2 +*.atfi + +# beamer +*.nav +*.pre +*.snm +*.vrb + +# changes +*.soc +*.loc + +# comment +*.cut + +# cprotect +*.cpt + +# elsarticle (documentclass of Elsevier journals) +*.spl + +# endnotes +*.ent + +# fixme +*.lox + +# feynmf/feynmp +*.mf +*.mp +*.t[1-9] +*.t[1-9][0-9] +*.tfm + +#(r)(e)ledmac/(r)(e)ledpar +*.end +*.?end +*.[1-9] +*.[1-9][0-9] +*.[1-9][0-9][0-9] +*.[1-9]R +*.[1-9][0-9]R +*.[1-9][0-9][0-9]R +*.eledsec[1-9] +*.eledsec[1-9]R +*.eledsec[1-9][0-9] +*.eledsec[1-9][0-9]R +*.eledsec[1-9][0-9][0-9] +*.eledsec[1-9][0-9][0-9]R + +# glossaries +*.acn +*.acr +*.glg +*.glg-abr +*.glo +*.glo-abr +*.gls +*.gls-abr +*.glsdefs +*.lzo +*.lzs +*.slg +*.slo +*.sls + +# uncomment this for glossaries-extra (will ignore makeindex's style files!) +# *.ist + +# gnuplot +*.gnuplot +*.table + +# gnuplottex +*-gnuplottex-* + +# gregoriotex +*.gaux +*.glog +*.gtex + +# htlatex +*.4ct +*.4tc +*.idv +*.lg +*.trc +*.xref + +# hypdoc +*.hd + +# hyperref +*.brf + +# knitr +*-concordance.tex +# TODO Uncomment the next line if you use knitr and want to ignore its generated tikz files +# *.tikz +*-tikzDictionary + +# latexindent will create succesive backup files by default +#*.bak* + +# listings +*.lol + +# luatexja-ruby +*.ltjruby + +# makeidx +*.idx +*.ilg +*.ind + +# minitoc +*.maf +*.mlf +*.mlt +*.mtc[0-9]* +*.slf[0-9]* +*.slt[0-9]* +*.stc[0-9]* + +# minted +_minted* +*.data.minted +*.pyg + +# morewrites +*.mw + +# newpax +*.newpax + +# nomencl +*.nlg +*.nlo +*.nls + +# pax +*.pax + +# pdfpcnotes +*.pdfpc + +# sagetex +*.sagetex.sage +*.sagetex.py +*.sagetex.scmd + +# scrwfile +*.wrt + +# spelling +*.spell.bad +*.spell.txt + +# svg +svg-inkscape/ + +# sympy +*.sout +*.sympy +sympy-plots-for-*.tex/ + +# pdfcomment +*.upa +*.upb + +# pythontex +*.pytxcode +pythontex-files-*/ + +# tcolorbox +*.listing + +# thmtools +*.loe + +# TikZ & PGF +*.dpth +*.md5 +*.auxlock + +# titletoc +*.ptc + +# todonotes +*.tdo + +# vhistory +*.hst +*.ver + +# easy-todo +*.lod + +# xcolor +*.xcp + +# xmpincl +*.xmpi + +# xindy +*.xdy + +# xypic precompiled matrices and outlines +*.xyc +*.xyd + +# endfloat +*.ttt +*.fff + +# Latexian +TSWLatexianTemp* + +## Editors: +# WinEdt +*.bak +*.sav + +# latexindent.pl +*.bak[0-9]* + +# Texpad +.texpadtmp + +# LyX +*.lyx~ + +# Kile +*.backup + +# gummi +.*.swp + +# KBibTeX +*~[0-9]* + +# TeXnicCenter +*.tps + +# auto folder when using emacs and auctex +./auto/* +*.el + +# expex forward references with \gathertags +*-tags.tex + +# standalone packages +*.sta + +# Makeindex log files +*.lpz + +# xwatermark package +*.xwm + +# REVTeX puts footnotes in the bibliography by default, unless the nofootinbib +# option is specified. Footnotes are the stored in a file with suffix Notes.bib. +# Uncomment the next line to have this generated file ignored. +#*Notes.bib diff --git a/COPYRIGHT.md b/COPYRIGHT.md new file mode 100644 index 0000000..d9467d0 --- /dev/null +++ b/COPYRIGHT.md @@ -0,0 +1,8 @@ +Copyright © 2025 The Stable Order
+All rights reserved. + +All works in this repository may be used according to the conditions +stated in the LICENSE.md file available in this repository. + +These works are WITHOUT ANY WARRANTY, without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. diff --git a/Contributors.md b/Contributors.md new file mode 100644 index 0000000..e0e23b1 --- /dev/null +++ b/Contributors.md @@ -0,0 +1,15 @@ +This file contains information about people who contribute to this project. + +Please do not contact these people directly. +Instead, join our [Discord](https://discord.gg/fuuWX4AbJt) and communicate about +this project in the [TODO channel](TODO). + +## Contributors + +By having yourself in the table below, all your contributions to this project +are made under the terms of the [Developer Certificate of Origin](DCO.md). + +| Name | Github Username | Discord Username | Email Address | +| -------------------------------- | ------------------ | ------------------ | ---------------------------- | +| Bruno Woltzenlogel Paleo | @Zahnentferner | @b.wp | zahnentferner@gmail.com | +| TODO | TODO | TODO | TODO | diff --git a/DCO.md b/DCO.md new file mode 100644 index 0000000..49b8cb0 --- /dev/null +++ b/DCO.md @@ -0,0 +1,34 @@ +Developer Certificate of Origin +Version 1.1 + +Copyright (C) 2004, 2006 The Linux Foundation and its contributors. + +Everyone is permitted to copy and distribute verbatim copies of this +license document, but changing it is not allowed. + + +Developer's Certificate of Origin 1.1 + +By making a contribution to this project, I certify that: + +(a) The contribution was created in whole or in part by me and I + have the right to submit it under the open source license + indicated in the file; or + +(b) The contribution is based upon previous work that, to the best + of my knowledge, is covered under an appropriate open source + license and I have the right under that license to submit that + work with modifications, whether created in whole or in part + by me, under the same open source license (unless I am + permitted to submit under a different license), as indicated + in the file; or + +(c) The contribution was provided directly to me by some other + person who certified (a), (b) or (c) and I have not modified + it. + +(d) I understand and agree that this project and the contribution + are public and that a record of the contribution (including all + personal information I submit with it, including my sign-off) is + maintained indefinitely and may be redistributed consistent with + this project or the open source license(s) involved. diff --git a/README.md b/README.md index 8345a7b..64c32c1 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# +
- Stability Nexus - + Stability Nexus +
  @@ -12,7 +12,7 @@
-[![Static Badge](https://img.shields.io/badge/AOSSIE-Social_Share_Button-228B22?style=for-the-badge&labelColor=FFC517)](https://TODO.aossie/) +[![Static Badge](https://img.shields.io/badge/Stability_Nexus-/TODO-228B22?style=for-the-badge&labelColor=FFC517)](https://TODO.stability.nexus/) @@ -25,19 +25,19 @@ Telegram Badge    - -X (formerly Twitter) Badge + +X (formerly Twitter) Badge    - -Discord Badge + +Discord Badge    Medium Badge    - + LinkedIn Badge    @@ -48,615 +48,120 @@ ---
-

SocialShareButton

+

TODO: Project Name

-Lightweight social sharing component for web applications. Zero dependencies, framework-agnostic. - - -[![npm version](https://img.shields.io/npm/v/social-share-button-aossie.svg)](https://www.npmjs.com/package/social-share-button-aossie) -[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE) - ---- -## Features - -- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email -- 🎯 Zero dependencies - pure vanilla JavaScript -- ⚛️ Framework support: React, Next.js, Vue, Angular, or plain HTML -- 🔄 Auto-detects current URL and page title -- 📱 Fully responsive and mobile-ready -- 🎨 Customizable themes (dark/light) -- ⚡ Lightweight (< 10KB gzipped) +[TODO](https://TODO.stability.nexus/) is a ... TODO: Project Description. --- -## Installation - -### Via CDN (Recommended) - -```html - - -``` +## Project Maturity + +TODO: In the checklist below, mark the items that have been completed and delete items that are not applicable to the current project: + +* [ ] The project has a logo. +* [ ] The project has a favicon. +* [ ] The protocol: + - [ ] has been described and formally specified in a paper. + - [ ] has had its main properties mathematically proven. + - [ ] has been formally verified. +* [ ] The smart contracts: + - [ ] were thoroughly reviewed by at least two knights of The Stable Order. + - [ ] were deployed to: + - [ ] Ergo + - [ ] Cardano + - [ ] EVM Chains: + - [ ] Ethereum Classic + - [ ] Ethereum + - [ ] Polygon + - [ ] BSC + - [ ] Base +* [ ] The mobile app: + - [ ] has an _About_ page containing the Stability Nexus's logo and pointing to the social media accounts of the Stability Nexus. + - [ ] is available for download as a release in this repo. + - [ ] is available in the relevant app stores. +* [ ] The web frontend: + - [ ] has proper title and metadata. + - [ ] has proper open graph metadata, to ensure that it is shown well when shared in social media (Discord, Telegram, Twitter, LinkedIn). + - [ ] has a footer, containing the Stability Nexus's logo and pointing to the social media accounts of the Stability Nexus. + - [ ] is fully static and client-side. + - [ ] is deployed to Github Pages via a Github Workflow. + - [ ] is accessible through the https://TODO:PROJECT-NAME.stability.nexus domain. +* [ ] the project is listed in [https://stability.nexus/protocols](https://stability.nexus/protocols). --- -## Quick Start Guide - -> 🚫 **IMPORTANT:** Do NOT create new files like `ShareButton.jsx` or `ShareButton.tsx`! -> ✅ Add code directly to your **existing** component (Header, Navbar, etc.) - -
-📦 Create React App - -### Step 1: Add CDN to `public/index.html` - -```html - - - - -
- - -``` - -### Step 2: In your **existing** React component (e.g., `MainLayout.jsx`, `Header.jsx`, or wherever you want the button): - -```jsx -import { useEffect, useRef } from 'react'; - -function YourComponent() { // Use your actual component name (Header, Navbar, etc.) - const shareButtonRef = useRef(null); - const initRef = useRef(false); - - useEffect(() => { - if (initRef.current || !window.SocialShareButton) return; - - shareButtonRef.current = new window.SocialShareButton({ - container: '#share-button' - }); - initRef.current = true; - - return () => { - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - }, []); - - return ( -
-
-
- ); -} -``` - -
- -
-▲ Next.js (App Router) - -### Step 1: Add CDN to `app/layout.tsx` - -```tsx -import Script from 'next/script'; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - - - - {children} - - - - ); -} -``` +## Tech Stack -### Step 2: In your **existing** component (e.g., `components/Header.tsx`, or wherever you want the button): - -```tsx -import { useEffect, useRef } from 'react'; - -export default function YourComponent() { // Use your actual component name - const shareButtonRef = useRef(null); - const containerRef = useRef(null); - const initRef = useRef(false); - - useEffect(() => { - const initButton = () => { - if (initRef.current || !window.SocialShareButton || !containerRef.current) return; - - shareButtonRef.current = new window.SocialShareButton({ - container: '#share-button' - }); - initRef.current = true; - }; - - if (window.SocialShareButton) { - initButton(); - } else { - const checkInterval = setInterval(() => { - if (window.SocialShareButton) { - clearInterval(checkInterval); - initButton(); - } - }, 100); - - return () => { - clearInterval(checkInterval); - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - } - - return () => { - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - }, []); - - return ( -
-
-
- ); -} - -declare global { - interface Window { - SocialShareButton: any; - } -} -``` +TODO: -
+### Frontend -
-⚡ Vite / Vue / Angular +TODO: -### Step 1: Add CDN to `index.html` +- Next.js 14+ (React) +- TypeScript +- TailwindCSS +- shadcn/ui -```html - - - - -
- - -``` +### Blockchain -### Step 2: Initialize in component +TODO: -```javascript -new window.SocialShareButton({ - container: '#share-button' -}); -``` - -
+- Wagmi +- Solidity Smart Contracts +- Ethers.js --- -## Configuration - -### Basic Options - -```jsx -new SocialShareButton({ - container: '#share-button', // Required: CSS selector or DOM element - url: 'https://example.com', // Optional: defaults to window.location.href - title: 'Custom Title', // Optional: defaults to document.title - buttonText: 'Share', // Optional: button label text - buttonStyle: 'primary', // default | primary | compact | icon-only - theme: 'dark', // dark | light - platforms: ['twitter', 'linkedin'] // Optional: defaults to all platforms -}); -``` - -### All Available Options - -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `container` | string/Element | - | **Required.** CSS selector or DOM element | -| `url` | string | `window.location.href` | URL to share | -| `title` | string | `document.title` | Share title/headline | -| `description` | string | `''` | Additional description text | -| `hashtags` | array | `[]` | Hashtags for posts (e.g., `['js', 'webdev']`) | -| `via` | string | `''` | Twitter handle (without @) | -| `platforms` | array | All platforms | Platforms to show (see below) | -| `buttonText` | string | `'Share'` | Button label text | -| `buttonStyle` | string | `'default'` | `default`, `primary`, `compact`, `icon-only` | -| `buttonColor` | string | `''` | Custom button background color | -| `buttonHoverColor` | string | `''` | Custom button hover color | -| `customClass` | string | `''` | Additional CSS class for button | -| `theme` | string | `'dark'` | `dark` or `light` | -| `modalPosition` | string | `'center'` | Modal position on screen | -| `showButton` | boolean | `true` | Show/hide the share button | -| `onShare` | function | `null` | Callback when user shares: `(platform, url) => {}` | -| `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` | - -**Available Platforms:** -`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email` - -### Customize Share Message/Post Text - -Control the text that appears when users share to social platforms: - -```jsx -new SocialShareButton({ - container: '#share-button', - url: 'https://myproject.com', - title: 'Check out my awesome project!', // Main title/headline - description: 'An amazing tool for developers', // Additional description - hashtags: ['javascript', 'webdev', 'opensource'], // Hashtags included in posts - via: 'MyProjectHandle' // Your Twitter handle -}); -``` +## Getting Started -**How messages are customized per platform:** -- **WhatsApp:** `title` + `description` + `hashtags` + link -- **Facebook:** `title` + `description` + `hashtags` + link -- **Twitter/X:** `title` + `description` + `hashtags` + `via` handle + link -- **Telegram:** `title` + `description` + `hashtags` + link -- **LinkedIn:** `title` + `description` + link -- **Reddit:** `title` - `description` (used as title) -- **Email:** Subject = `title`, Body = `description` + link +### Prerequisites -### Customize Button Color & Appearance +TODO -**Option 1: Use Pre-built Styles** (Easiest) +- Node.js 18+ +- npm/yarn/pnpm +- MetaMask or any other web3 wallet browser extension -```jsx -new SocialShareButton({ - container: '#share-button', - buttonStyle: 'primary' // or 'default', 'compact', 'icon-only' -}); -``` +### Installation -**Option 2: Programmatic Color Customization** (Recommended) +TODO -Pass `buttonColor` and `buttonHoverColor` to match your project's color scheme: +#### 1. Clone the Repository -```jsx -new SocialShareButton({ - container: '#share-button', - buttonColor: '#ff6b6b', // Button background color - buttonHoverColor: '#ff5252' // Hover state color -}); +```bash +git clone https://github.com/StabilityNexus/TODO.git +cd TODO ``` -**Option 3: CSS Class Customization** (Advanced) +#### 2. Install Dependencies -For more complex styling, use a custom CSS class: +Using your preferred package manager: -```jsx -new SocialShareButton({ - container: '#share-button', - buttonStyle: 'primary', - customClass: 'my-custom-button' -}); +```bash +npm install +# or +yarn install +# or +pnpm install ``` -Then in your CSS file: +#### 3. Run the Development Server -```css -/* Override the button background color */ -.my-custom-button.social-share-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} +Start the app locally: -/* Customize hover state */ -.my-custom-button.social-share-btn:hover { - background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); -} +```bash +npm run dev +# or +yarn dev +# or +pnpm dev ``` -**Color Examples:** - -```jsx -// Material Design Red -new SocialShareButton({ - container: '#share-button', - buttonColor: '#f44336', - buttonHoverColor: '#da190b' -}); - -// Tailwind Blue -new SocialShareButton({ - container: '#share-button', - buttonColor: '#3b82f6', - buttonHoverColor: '#2563eb' -}); - -// Custom Brand Color -new SocialShareButton({ - container: '#share-button', - buttonColor: '#your-brand-color', - buttonHoverColor: '#your-brand-color-dark' -}); -``` +#### 4. Open your Browser -### Button Styles - -| Style | Description | -|-------|-------------| -| `default` | Standard button with icon and text | -| `primary` | Gradient button (recommended) | -| `compact` | Smaller size for tight spaces | -| `icon-only` | Icon without text | - -### Callbacks - -```jsx -new SocialShareButton({ - container: '#share-button', - onShare: (platform, url) => { - console.log(`Shared on ${platform}: ${url}`); - }, - onCopy: (url) => { - console.log('Link copied:', url); - } -}); -``` - ---- - -## Advanced Usage - -### Using npm Package - -```javascript -import SocialShareButton from 'social-share-button-aossie'; -import 'social-share-button-aossie/src/social-share-button.css'; - -new SocialShareButton({ - container: '#share-button' -}); -``` - -### React Wrapper Component (Optional) - -If you want a reusable React component, copy `src/social-share-button-react.jsx` to your project: - -```jsx -import { SocialShareButton } from './components/SocialShareButton'; - -function App() { - return ; -} -``` - -### Update URL Dynamically (SPA) - -```jsx -const shareButton = useRef(null); - -useEffect(() => { - shareButton.current = new window.SocialShareButton({ - container: '#share-button' - }); -}, []); - -useEffect(() => { - if (shareButton.current) { - shareButton.current.updateOptions({ - url: window.location.href - }); - } -}, [pathname]); // Update on route change -``` - ---- - -## Troubleshooting - -
-Multiple buttons appearing - -**Cause:** Component re-renders creating duplicate instances - -**Solution:** Use `useRef` to track initialization (already in examples above) - -
- -
-Button not appearing - -**Cause:** Script loads after component renders - -**Solution:** Add null check: -```jsx -if (window.SocialShareButton) { - new window.SocialShareButton({ container: '#share-button' }); -} -``` - -
- -
-Modal not opening - -**Cause:** CSS not loaded or ID mismatch - -**Solution:** -- Verify CSS CDN link in `` -- Match container ID: `container: '#share-button'` = `
` - -
- -
-TypeError: SocialShareButton is not a constructor - -**Cause:** CDN script not loaded yet - -**Solution:** Use interval polling (see Next.js example above) - -
- -
-URL not updating on navigation - -**Cause:** Component initialized once, doesn't track routes - -**Solution:** Use `updateOptions()` method (see Advanced Usage above) - -
- ---- - -## Examples - -### Mobile Menu - -```jsx - -``` - -### Custom Platforms - -```jsx -// Professional networks only -new SocialShareButton({ - container: '#share-button', - platforms: ['linkedin', 'twitter', 'email'] -}); - -// Messaging apps only -new SocialShareButton({ - container: '#share-button', - platforms: ['whatsapp', 'telegram'] -}); -``` - -### Custom Styling - -```jsx -new SocialShareButton({ - container: '#share-button', - buttonStyle: 'icon-only', - theme: 'light' -}); -``` - ---- - -## Demo - -Open `index.html` in your browser to see all features. -Tutorial: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM +Navigate to [http://localhost:3000](http://localhost:3000) to see the application. --- @@ -666,7 +171,10 @@ We welcome contributions of all kinds! To contribute: 1. Fork the repository and create your feature branch (`git checkout -b feature/AmazingFeature`). 2. Commit your changes (`git commit -m 'Add some AmazingFeature'`). -3. Test your changes by opening `index.html` in your browser to verify functionality. +3. Run the development workflow commands to ensure code quality: + - `npm run format:write` + - `npm run lint:fix` + - `npm run typecheck` 4. Push your branch (`git push origin feature/AmazingFeature`). 5. Open a Pull Request for review. @@ -677,7 +185,4 @@ If you encounter bugs, need help, or have feature requests: We appreciate your feedback and contributions! -This project is licensed under the GNU General Public License v3.0. -See the [LICENSE](LICENSE) file for details. - ---- +© 2025 The Stable Order. diff --git a/public/stability.svg b/public/stability.svg new file mode 100644 index 0000000..cd2d3a7 --- /dev/null +++ b/public/stability.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +