From 310e44aefdb0d4addcb7e76f7d09c259986a1782 Mon Sep 17 00:00:00 2001 From: EtienneLescot Date: Mon, 12 Oct 2026 10:08:37 +0200 Subject: [PATCH] docs: show the #5 Product of the Day rank on the site and in the README The site shows the rank as a pill beside the v2 announcement, styled like it and translated. Product Hunt's own embed was a white 250x54 card that outshone the download button beside it. The README gets a shields.io pill in its badge row instead of the large embed. --- README.md | 5 +- website/i18n/code.source.json | 57 ++++++++++--------- website/i18n/de/code.json | 4 ++ website/i18n/es/code.json | 4 ++ website/i18n/fr/code.json | 4 ++ website/i18n/ja/code.json | 4 ++ website/i18n/pt-BR/code.json | 4 ++ website/i18n/zh-CN/code.json | 4 ++ website/i18n/zh-TW/code.json | 4 ++ website/src/components/ReleaseBadge/index.tsx | 24 ++++++++ website/src/pages/index.module.css | 20 +++++-- website/src/pages/index.tsx | 20 ++----- 12 files changed, 102 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 34ba119cb..df1fae260 100644 --- a/README.md +++ b/README.md @@ -17,12 +17,11 @@ Discord Sponsor Platform + #5 Product of the Day on Product Hunt

- getopenscreen/openscreen | Trendshift - OpenScreen 2 on Product Hunt -

+ getopenscreen/openscreen | Trendshift

> [!NOTE] > **This is OpenScreen, continued.** [Siddharth Vaddem](https://github.com/siddharthvaddem) created the project and [archived the original repository](https://github.com/siddharthvaddem/openscreen) after v1.5.0. Development moved here with his approval, under the same name and the same MIT license. diff --git a/website/i18n/code.source.json b/website/i18n/code.source.json index 6d2e6482c..8b735b7f9 100644 --- a/website/i18n/code.source.json +++ b/website/i18n/code.source.json @@ -68,8 +68,6 @@ "home.install.note.windows": "Windows", "home.install.note.mac": "Mac", "home.install.note.linux": "Linux", - "editor.skipLink": "Skip the editor — go to downloads", - "editor.title": "Five things you will actually do", "demoLoop.pause": "Pause video", "demoLoop.play": "Play video", "demoLoop.classic-zoom": "A task board recorded in OpenScreen. The view zooms in on a checklist item and a Ship button as they are clicked, then pulls back to the whole board.", @@ -108,6 +106,14 @@ "demoLoop.title.simpler-editor": "The OpenScreen editor", "demoLoop.title.edit-like-a-doc": "Editing a video like a document", "demoLoop.title.ask-the-agent": "Asking the editor's agent for an edit", + "editor.skipLink": "Skip the editor — go to downloads", + "editor.title": "Five things you will actually do", + "download.cta.mac": "Download for Mac", + "download.cta.windows": "Download for Windows", + "download.cta.linux": "Download for Linux", + "home.hero.download": "Download", + "download.cta.chooseMac": "Choose your Mac", + "download.cta.otherVersions": "Other versions", "films.default.kicker": "Out of the box", "films.default.title": "Good-looking from the first take.", "films.default.lead": "Every new recording opens {zoomed}, on a wallpaper, with padding, a shadow and rounded corners. Change any of it, or export it as it is.", @@ -157,32 +163,6 @@ "films.ship.blur": "{t} Smooth or mosaic, as a rectangle, an oval or a freehand shape, over an email, a key or a password.", "films.ship.blur.t": "Blur regions.", "films.label": "More of the app, in motion", - "announcement.v2.link": "See what's new", - "announcement.v2.title": "OpenScreen v2 is here", - "recreation.style.kicker": "Style", - "recreation.style.title": "Swap the background", - "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.", - "recreation.effects.kicker": "Effects", - "recreation.effects.title": "Frame it your way", - "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.", - "recreation.cursor.kicker": "Cursor", - "recreation.cursor.title": "A cursor worth watching", - "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.", - "recreation.timeline.kicker": "Timeline", - "recreation.timeline.title": "One click, every zoom placed", - "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.", - "recreation.transcript.kicker": "Transcript", - "recreation.transcript.title": "Edit video like text", - "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.", - "recreation.pause": "Pause animation", - "recreation.play": "Play animation", - "home.hero.explore": "Scroll to explore the editor", - "download.cta.mac": "Download for Mac", - "download.cta.windows": "Download for Windows", - "download.cta.linux": "Download for Linux", - "home.hero.download": "Download", - "download.cta.chooseMac": "Choose your Mac", - "download.cta.otherVersions": "Other versions", "showcase.record.kicker": "record", "showcase.record.claim": "It records with the operating system, not around it.", "showcase.record.body": "Pick a window or a display. macOS goes through ScreenCaptureKit, Windows through Windows Graphics Capture, Linux through PipeWire and the ScreenCast portal — on each, the capture path the system itself provides. The pointer is recorded as data rather than burned into the pixels, which is the only reason you could restyle it further up this page.", @@ -208,6 +188,27 @@ "showcase.agent.link.docs": "AI editing docs", "showcase.agent.link.feature": "How automatic zooms work", "showcase.title": "Recorder, captions, agent, encoder.", + "announcement.v2.link": "See what's new", + "announcement.v2.title": "OpenScreen v2 is here", + "announcement.productHunt.rank": "#5 Product of the Day", + "recreation.style.kicker": "Style", + "recreation.style.title": "Swap the background", + "recreation.style.sub": "Image, color or gradient behind your recording — no re-shoot.", + "recreation.effects.kicker": "Effects", + "recreation.effects.title": "Frame it your way", + "recreation.effects.sub": "Padding, motion blur, shadow, roundness — every effect composites live.", + "recreation.cursor.kicker": "Cursor", + "recreation.cursor.title": "A cursor worth watching", + "recreation.cursor.sub": "Size, smoothing, motion blur, click bounce — every move reads on screen.", + "recreation.timeline.kicker": "Timeline", + "recreation.timeline.title": "One click, every zoom placed", + "recreation.timeline.sub": "Zooms, speed ramps, trims, comments — each edit lands as a pill on the timeline.", + "recreation.transcript.kicker": "Transcript", + "recreation.transcript.title": "Edit video like text", + "recreation.transcript.sub": "Delete a word or a silence; the cut lands on the timeline. Nothing destructive.", + "recreation.pause": "Pause animation", + "recreation.play": "Play animation", + "home.hero.explore": "Scroll to explore the editor", "footer.brand.description": "A free, open-source screen recorder and editor. Community-maintained continuation, MIT licensed.", "footer.product.title": "Product", "footer.product.download": "Download", diff --git a/website/i18n/de/code.json b/website/i18n/de/code.json index 54f4f97d6..d8f1a00ba 100644 --- a/website/i18n/de/code.json +++ b/website/i18n/de/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "Andere Versionen" + }, + "announcement.productHunt.rank": { + "message": "#5 Produkt des Tages", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/i18n/es/code.json b/website/i18n/es/code.json index 9735cf318..c971d68c9 100644 --- a/website/i18n/es/code.json +++ b/website/i18n/es/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "Otras versiones" + }, + "announcement.productHunt.rank": { + "message": "#5 Producto del día", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/i18n/fr/code.json b/website/i18n/fr/code.json index d7c118fc9..aaa54d4f0 100644 --- a/website/i18n/fr/code.json +++ b/website/i18n/fr/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "Autres versions" + }, + "announcement.productHunt.rank": { + "message": "#5 Produit du jour", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json index 7ca5e1f07..05b9d5f4d 100644 --- a/website/i18n/ja/code.json +++ b/website/i18n/ja/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "その他のバージョン" + }, + "announcement.productHunt.rank": { + "message": "本日のプロダクト 第5位", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/i18n/pt-BR/code.json b/website/i18n/pt-BR/code.json index a58628762..4c400f6a6 100644 --- a/website/i18n/pt-BR/code.json +++ b/website/i18n/pt-BR/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "Outras versões" + }, + "announcement.productHunt.rank": { + "message": "#5 Produto do dia", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json index c858952db..18739b2db 100644 --- a/website/i18n/zh-CN/code.json +++ b/website/i18n/zh-CN/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "其他版本" + }, + "announcement.productHunt.rank": { + "message": "今日产品第 5 名", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json index 128f1472f..604df088a 100644 --- a/website/i18n/zh-TW/code.json +++ b/website/i18n/zh-TW/code.json @@ -1081,5 +1081,9 @@ }, "download.cta.otherVersions": { "message": "其他版本" + }, + "announcement.productHunt.rank": { + "message": "今日產品第 5 名", + "description": "The launch's rank on Product Hunt (October 11, 2026). Keep the #5." } } diff --git a/website/src/components/ReleaseBadge/index.tsx b/website/src/components/ReleaseBadge/index.tsx index 3a2b677a8..bfbd74cf7 100644 --- a/website/src/components/ReleaseBadge/index.tsx +++ b/website/src/components/ReleaseBadge/index.tsx @@ -22,3 +22,27 @@ export default function ReleaseBadge() { ); } + +// The launch's Product Hunt rank, in the same pill. Product Hunt's own embed is a white +// 250x54 card that outshone the download button beside it. The fill is Product Hunt's +// brand colour: the mark is theirs, not a theme colour. +export function ProductHuntBadge() { + return ( + + + + #5 Product of the Day + + + ); +} diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index d368ba73c..c12eaf595 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -65,14 +65,18 @@ margin: 32px 0 0; } -.productHunt { - display: inline-flex; +.pills { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 32px; } -/* Same height as the download button beside it. */ -.productHunt img { - height: 50px; - width: auto; +/* The row carries the spacing, so two wrapped pills sit 10px apart, not a full + margin apart. */ +.pills > a { + margin-bottom: 0; } .platforms { @@ -375,6 +379,10 @@ margin-top: 16px; } + .pills { + margin-bottom: 24px; + } + .actions { gap: 8px; margin-top: 24px; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 7614a911d..c802ce10d 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -11,7 +11,7 @@ import Editor from "../components/Editor"; import Films from "../components/Films"; import LocaleLink from "../components/LocaleLink"; import PlatformDownload from "../components/PlatformDownload"; -import ReleaseBadge from "../components/ReleaseBadge"; +import ReleaseBadge, { ProductHuntBadge } from "../components/ReleaseBadge"; import Showcase from "../components/Showcase"; import type { AppLanguage } from "../lib/release"; import { jsonLd, softwareApplicationLd } from "../lib/structured-data"; @@ -43,7 +43,10 @@ export default function Home() {
- +
+ + +
Beautiful demos on the first take. @@ -55,19 +58,6 @@ export default function Home() {