Merge pull request #2 from mintyPT/examples/dribbble-social-posts

Add Brandency social post examples

Author: mintyPT

README.md

@@ -308,6 +308,24 @@ await screenshotUrl({
 These examples cover the workflows ClickClick is meant to make scriptable: live website screenshots,
 custom HTML cards, template modifications, and config-driven image sets.
 
+### Example Set Workflow
+
+Use manifest-driven example sets for multi-post inspiration work. The manifest keeps template paths,
+variant JSON, output paths, and README labels in one place, so rendering and documentation stay in
+sync.
+
+```bash
+npm run examples:scaffold -- campaign-social coral indigo lime
+npm run examples:render -- examples/use-cases/orbit-social.manifest.json
+npm run examples:readme -- examples/use-cases/orbit-social.manifest.json
+npm run examples:contact-sheet -- examples/use-cases/orbit-social.manifest.json examples/use-cases/orbit-social-contact-sheet.png
+```
+
+When adapting external references, replace source-specific names, logos, slogans, URLs, and direct
+media. Use fictional copy and pass any needed assets through modification JSON or documented options.
+Palettes may be shifted when that keeps the composition recognizable without copying the source
+branding.
+
 ### Capture a Live Website
 
 Use URL screenshots when you need a reproducible image of a product page, docs page, landing page,
@@ -526,6 +544,189 @@ Result:
 
 ![Agriculture perspective pattern post result](./examples/use-cases/agriculture-social-perspective.png)
 
+### Render Orbit Marketing Social Posts
+
+Use a reusable template when a campaign has a fixed visual system but each square post swaps color,
+copy, and geometric accents. This set adapts a six-post marketing grid into source-neutral examples
+with fictional names, original slogans, and a shifted palette.
+
+#### Coral Signal Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/orbit-social-post.html \
+  --css examples/use-cases/orbit-social-post.css \
+  --modify-file examples/use-cases/orbit-social-coral.json \
+  --out examples/use-cases/orbit-social-coral.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+import { readFile } from "node:fs/promises";
+import { renderTemplate } from "@maurogoncalo/clickclick";
+
+await renderTemplate({
+  htmlPath: "examples/use-cases/orbit-social-post.html",
+  cssPath: "examples/use-cases/orbit-social-post.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/orbit-social-coral.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/orbit-social-coral.png" },
+});
+```
+
+Result:
+
+![Orbit coral social post result](./examples/use-cases/orbit-social-coral.png)
+
+#### Indigo Ideas Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/orbit-social-post.html \
+  --css examples/use-cases/orbit-social-post.css \
+  --modify-file examples/use-cases/orbit-social-indigo.json \
+  --out examples/use-cases/orbit-social-indigo.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/orbit-social-post.html",
+  cssPath: "examples/use-cases/orbit-social-post.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/orbit-social-indigo.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/orbit-social-indigo.png" },
+});
+```
+
+Result:
+
+![Orbit indigo social post result](./examples/use-cases/orbit-social-indigo.png)
+
+#### Lime Story Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/orbit-social-post.html \
+  --css examples/use-cases/orbit-social-post.css \
+  --modify-file examples/use-cases/orbit-social-lime.json \
+  --out examples/use-cases/orbit-social-lime.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/orbit-social-post.html",
+  cssPath: "examples/use-cases/orbit-social-post.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/orbit-social-lime.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/orbit-social-lime.png" },
+});
+```
+
+Result:
+
+![Orbit lime social post result](./examples/use-cases/orbit-social-lime.png)
+
+#### Mint Signal Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/orbit-social-post.html \
+  --css examples/use-cases/orbit-social-post.css \
+  --modify-file examples/use-cases/orbit-social-mint.json \
+  --out examples/use-cases/orbit-social-mint.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/orbit-social-post.html",
+  cssPath: "examples/use-cases/orbit-social-post.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/orbit-social-mint.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/orbit-social-mint.png" },
+});
+```
+
+Result:
+
+![Orbit mint social post result](./examples/use-cases/orbit-social-mint.png)
+
+#### Stone Story Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/orbit-social-post.html \
+  --css examples/use-cases/orbit-social-post.css \
+  --modify-file examples/use-cases/orbit-social-stone.json \
+  --out examples/use-cases/orbit-social-stone.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/orbit-social-post.html",
+  cssPath: "examples/use-cases/orbit-social-post.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/orbit-social-stone.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/orbit-social-stone.png" },
+});
+```
+
+Result:
+
+![Orbit stone social post result](./examples/use-cases/orbit-social-stone.png)
+
+#### Ink Ideas Post
+
+CLI:
+
+```bash
+npm run dev -- template examples/use-cases/orbit-social-post.html \
+  --css examples/use-cases/orbit-social-post.css \
+  --modify-file examples/use-cases/orbit-social-ink.json \
+  --out examples/use-cases/orbit-social-ink.png \
+  --width 1080 \
+  --height 1080
+```
+
+Library:
+
+```ts
+await renderTemplate({
+  htmlPath: "examples/use-cases/orbit-social-post.html",
+  cssPath: "examples/use-cases/orbit-social-post.css",
+  modifications: JSON.parse(await readFile("examples/use-cases/orbit-social-ink.json", "utf8")),
+  viewport: { width: 1080, height: 1080 },
+  output: { path: "examples/use-cases/orbit-social-ink.png" },
+});
+```
+
+Result:
+
+![Orbit ink social post result](./examples/use-cases/orbit-social-ink.png)
+
 ### Render Custom HTML with Fit Text
 
 Use custom HTML/CSS when presets are too constrained, but keep `data-clickclick-fit` on important

examples/use-cases/orbit-social-contact-sheet.png

@@ -0,0 +1,6 @@
+[
+  { "name": "post", "className": "post post-coral" },
+  { "name": "brand", "text": "orbitside" },
+  { "name": "title", "html": "Build<br>a <span>signal</span> people<br>notice" },
+  { "name": "url", "text": "orbitside.example" }
+]

examples/use-cases/orbit-social-coral.json

@@ -0,0 +1,6 @@
+[
+  { "name": "post", "className": "post post-indigo" },
+  { "name": "brand", "text": "orbitside" },
+  { "name": "title", "html": "Give your<br>ideas lift" },
+  { "name": "url", "text": "orbitside.example" }
+]

examples/use-cases/orbit-social-coral.png

@@ -0,0 +1,6 @@
+[
+  { "name": "post", "className": "post post-ink" },
+  { "name": "brand", "text": "orbitside" },
+  { "name": "title", "html": "Give your<br>ideas lift" },
+  { "name": "url", "text": "orbitside.example" }
+]

examples/use-cases/orbit-social-indigo.json

@@ -0,0 +1,6 @@
+[
+  { "name": "post", "className": "post post-lime" },
+  { "name": "brand", "text": "orbitside" },
+  { "name": "title", "html": "Start with<br>the <span>story</span>" },
+  { "name": "url", "text": "orbitside.example" }
+]