Skip to content

feat(pages): hub OG image, deploy wiring, and adopter docs #59

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

Merged
Ndevu12 merged 1 commit into from
Mar 29, 2026
Merged

feat(pages): hub OG image, deploy wiring, and adopter docs #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 33 additions & 4 deletions .github/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<!DOCTYPE html>
<!--
Production GitHub Pages source: this file is copied to _site/index.html by .github/workflows/deploy.yml.
User-visible links must use canonical public HTTPS URLs (no placeholders or generic profile links for brands).
Social previews intentionally use the project hub graphic at /assets/rich-text-editor-hub-og.png, not adopter logos.
Do not ship TODOs or internal-only notes in visible HTML; keep drafts on a branch until ready for the public hub.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -10,13 +16,15 @@
<meta property="og:url" content="https://ndevu12.github.io/RichTextEditor/" />
<meta property="og:title" content="RichTextEditor — Live demos &amp; documentation hub" />
<meta property="og:description" content="Try the Playground, React and Next.js examples, and Storybook. Open-source rich text editor for React with themes, accessibility, and TypeScript." />
<meta property="og:image" content="https://ndevu12.github.io/RichTextEditor/assets/geofinda-logo.png" />
<meta property="og:image:alt" content="GEOFINDA logo — project adopter" />
<meta property="og:image" content="https://ndevu12.github.io/RichTextEditor/assets/rich-text-editor-hub-og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="RichTextEditor — live demos and documentation hub (project branding)" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="RichTextEditor — Live demos &amp; documentation hub" />
<meta name="twitter:description" content="Interactive demos and Storybook for the open-source RichTextEditor React component." />
<meta name="twitter:image" content="https://ndevu12.github.io/RichTextEditor/assets/geofinda-logo.png" />
<meta name="twitter:image:alt" content="GEOFINDA logo — project adopter" />
<meta name="twitter:image" content="https://ndevu12.github.io/RichTextEditor/assets/rich-text-editor-hub-og.png" />
<meta name="twitter:image:alt" content="RichTextEditor — live demos and documentation hub (project branding)" />
<style>
*, *::before, *::after { box-sizing: border-box; }
:root {
Expand Down Expand Up @@ -274,6 +282,16 @@
max-height: 52px;
width: auto;
}
.adopter-wordmark {
display: flex;
align-items: center;
min-height: 52px;
padding-block: 4px;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-text);
}
.adopter-name {
font-size: 0.9rem;
font-weight: 600;
Expand Down Expand Up @@ -433,11 +451,22 @@ <h2 id="adopters-heading">Trusted by</h2>
Organizations and products that build on or ship this editor. Listing here is informational, not an endorsement.
</p>
<ul class="adopters-list" aria-describedby="adopters-description">
<li>
<a
class="adopter-link"
href="https://www.ndevuspace.com/"
rel="noopener noreferrer"
aria-label="NdevuSpace — visit website"
>
<span class="adopter-logo adopter-wordmark">NdevuSpace</span>
</a>
</li>
<li>
<a
class="adopter-link"
href="https://www.geofinda.com/"
rel="noopener noreferrer"
aria-label="GEOFINDA — visit website"
>
<span class="adopter-name">GEOFINDA</span>
<span class="adopter-logo">
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ jobs:
mkdir -p _site
mkdir -p _site/assets
cp src/assets/GEOFINDA-bgless-logo.png _site/assets/geofinda-logo.png
cp src/assets/rich-text-editor-hub-og.png _site/assets/rich-text-editor-hub-og.png
cp -r playground/dist/ _site/playground
cp -r examples/react-demo/dist/ _site/react-demo
cp -r examples/nextjs-demo/out/ _site/nextjs-demo
Expand Down
8 changes: 4 additions & 4 deletions docs/contributing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,15 +223,15 @@ The [documentation hub](https://ndevu12.github.io/RichTextEditor/) (`index.html`

- **Source file:** Add the logo to [`src/assets/`](../src/assets/) (PNG or SVG with transparency is ideal). Use a descriptive filename; avoid spaces.
- **Published path:** The workflow copies assets into `_site/assets/` with a **lowercase, URL-stable** name (for example, `src/assets/GEOFINDA-bgless-logo.png` is copied to `_site/assets/geofinda-logo.png`). Add a `cp` line in the “Assemble deployment directory” step in `deploy.yml` alongside the existing copies.
- **Markup:** In `.github/pages/index.html`, append a new `<li>` inside the `#adopters` list: an `<a href="https://…">` with `rel="noopener noreferrer"`, a visible name (for example `<span class="adopter-name">…</span>`), and an `<img>` pointing at `./assets/your-file.png` with explicit `width` and `height`, `loading="lazy"`, and `decoding="async"`.
- **Markup:** In `.github/pages/index.html`, append a new `<li>` inside the `#adopters` list: an `<a href="https://…">` with `rel="noopener noreferrer"`. Prefer a **logo image**: `<span class="adopter-name">…</span>` plus `<span class="adopter-logo"><img …></span>` (explicit `width` and `height`, `loading="lazy"`, `decoding="async"`). For a **text-only wordmark** (no image asset), use a single `<span class="adopter-logo adopter-wordmark">YourBrand</span>` inside the link so the link name is unambiguous for assistive technology.

### Pull request checklist

When adding or updating an adopter entry, verify the following before requesting review:

1. Logo file is committed under `src/assets/` and the **license or trademark** situation is clear (your own mark or explicit permission).
2. `.github/workflows/deploy.yml` copies the new asset into `_site/assets/` with a stable filename that matches `index.html`.
3. `.github/pages/index.html` includes the new list item: HTTPS homepage, accessible link text (see below), and dimensions on the image to limit layout shift.
1. **With logo asset:** The file is committed under `src/assets/` and the **license or trademark** situation is clear (your own mark or explicit permission). **Text-only wordmark:** Skip to step 3; no `deploy.yml` asset line is required.
2. `.github/workflows/deploy.yml` copies the new asset into `_site/assets/` with a stable filename that matches `index.html` (not applicable for wordmark-only entries).
3. `.github/pages/index.html` includes the new list item: HTTPS homepage, accessible link text (see below), and dimensions on the image when present to limit layout shift.
4. **Social previews:** If maintainers use a single `og:image` / `twitter:image` for the hub, coordinate any change to that image and its **alt** metadata in `<head>` so link previews stay accurate and accessible; do not swap global preview metadata casually when only adding a secondary logo in the body.

### Alternative text and link purpose
Expand Down
Binary file added src/assets/rich-text-editor-hub-og.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading