Skip to content

Commit 4d906b0

Browse files
mosheshammoshesham
committed
pormp ideas
1 parent e1524fe commit 4d906b0

File tree

1 file changed

+297
-0
lines changed

1 file changed

+297
-0
lines changed

‎assets/js/Untitled-1.md‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
# Image Prompt Catalogue for Delta Lake & Apache Iceberg Knowledge Hub
2+
3+
This document defines **what images to generate**, **where they will be used**, **where they should be stored in the repo**, and **detailed prompts** suitable for modern generative image models.
4+
5+
All images are designed to match the **bright, vibrant UI** defined in `assets/css/main.css`:
6+
- Primary colors: vibrant indigo, pink, amber (`#4F46E5`, `#EC4899`, `#F59E0B`)
7+
- Light backgrounds, soft gradients
8+
- Friendly, modern, slightly playful style
9+
- No heavy realism; prefer stylized / illustration / isometric
10+
11+
## 1. Site‑wide Open Graph / Social Preview
12+
13+
**Purpose**: Shown when the site is shared (Twitter, LinkedIn, Slack).
14+
**Placement**:
15+
- Referenced in [`_layouts/default.html`](_layouts/default.html) as `assets/images/og-image.png`.
16+
- Should represent the entire knowledge hub.
17+
18+
**File path**:
19+
- `assets/images/og-image.png` (1200x630 recommended)
20+
21+
**Prompt** (copy‑paste ready):
22+
23+
> A bright, modern, isometric illustration of a **data lakehouse knowledge hub**.
24+
> Visual elements: a central lake of data as glowing indigo water, two stylized crystalline structures labeled “Delta Lake” and “Apache Iceberg”, connected by flowing data streams (light beams) and small spark icons, surrounded by floating cards or panels representing documentation, code, charts, and dashboards.
25+
> Style: clean vector or semi‑flat illustration, vibrant colors (indigo, pink, amber, teal), soft gradients, subtle glow, no text labels embedded in the image (so the same image works internationally), high contrast, plenty of white space around the central composition.
26+
> Composition: landscape 16:9, centered focal point, suitable for social media preview (1200×630).
27+
> Background: light, subtle gradient from warm white to light blue, with abstract geometric shapes or faint grid to suggest technology and structure.
28+
> Mood: friendly, expert, fun, welcoming, high‑tech but not intimidating.
29+
30+
---
31+
32+
## 2. Home Page Hero Illustration
33+
34+
**Page**: [`index.md`](../index.md)
35+
**Section**: `<section class="hero">` at the top of the home page.
36+
**Goal**: Visual anchor that reinforces the “Knowledge Hub for Delta Lake & Apache Iceberg” message.
37+
38+
**File path**:
39+
- `assets/images/hero-knowledge-hub.png` (ideally wide, 1600x900 or SVG)
40+
41+
**Prompt**:
42+
43+
> A clean, high‑level illustration showing a **data engineer’s control center** for a data lakehouse.
44+
> Foreground: a stylized dashboard with multiple panels – one showing a table icon (for Delta Lake), another an iceberg icon (for Apache Iceberg), others showing graphs, timelines, checklists, and code blocks.
45+
> Middle ground: pipelines or flows of data represented by glowing lines connecting storage icons (data lake) to the dashboard.
46+
> Background: a futuristic cityscape made of server racks and data blocks, softly blurred so it doesn’t distract.
47+
> Style: flat or semi‑flat illustration, bright and fun, in a palette of indigo, pink, amber, teal, with soft rounded shapes and subtle gradients. No actual text in the image.
48+
> Visual tone: playful yet professional, approachable, emphasizing learning and experimentation rather than corporate rigidity.
49+
> Aspect ratio: wide (16:9), with enough whitespace on left/right so the hero title and buttons can overlay or sit next to it responsively.
50+
51+
---
52+
53+
## 3. Architecture Overview Diagram
54+
55+
**Docs**:
56+
- [`docs/architecture/system-overview.md`](../docs/architecture/system-overview.md)
57+
- Mentioned under “Architecture” and in `index.md` features (“Explore Architecture”).
58+
59+
**Usage**:
60+
- As the main conceptual diagram for the “System Overview” page.
61+
- Potentially reused in talks or slides.
62+
63+
**File path**:
64+
- `assets/images/architecture/system-overview-diagram.png`
65+
66+
**Prompt**:
67+
68+
> An isometric architecture diagram of an **automated knowledge hub for data lakehouse technologies**.
69+
> Components to show:
70+
> - Left: various sources — docs icon, RSS feed icon, GitHub icon — feeding into an “Ingestion & Curation” layer.
71+
> - Middle: a “Knowledge Engine” area with modules labeled conceptually (no literal text in the image): stale content detector, leaderboard, awesome‑list aggregator, CI/CD, validation. Represent them as distinct boxes with iconography (clock, trophy, list, gear, checkmark).
72+
> - Right: output channels — documentation site, code recipes, dashboards, community. Represent as screens or cards.
73+
> Connections: arrows or glowing pathways showing the flow from inputs → processing → outputs.
74+
> Style: clean lines, minimalistic but clear, bright palette (indigo, cyan, magenta, amber), soft gradients, subtle drop shadows for depth.
75+
> Avoid tiny illegible text; rely on icons and spatial arrangement so the diagram is understandable at 1200×800.
76+
> Overall: modern tech illustration, not a low‑level infra diagram (no cloud vendor logos).
77+
78+
---
79+
80+
## 4. Delta vs Iceberg Comparison Illustration
81+
82+
**Docs**:
83+
- [`docs/comparisons/feature-matrix.md`](../docs/comparisons/feature-matrix.md)
84+
- Linked from home page “Comprehensive Comparisons” card.
85+
86+
**Goal**: Convey the idea of two powerful, complementary technologies.
87+
88+
**File path**:
89+
- `assets/images/comparisons/delta-vs-iceberg-overview.png`
90+
91+
**Prompt**:
92+
93+
> A side‑by‑side comparison illustration of **Delta Lake** and **Apache Iceberg** as two friendly, iconic structures built on the same data lake.
94+
> Left: a crystalline blue‑green “Delta” structure, like a transparent pyramid made of data tiles, with subtle triangle motifs.
95+
> Right: a multi‑layer iceberg emerging from a calm “lake of data,” visualizing the “Iceberg” metaphor, with data grid patterns embedded in the ice layers.
96+
> Both sit on the same shared lake surface (representing a data lake), with underlying files drawn as small rectangles.
97+
> Between them: soft arrows or bridges implying interoperability and shared lakehouse architecture.
98+
> Style: minimalist but vivid, flat/semi‑flat, with vibrant indigo and cyan blues accented by amber highlights. No logos or text.
99+
> Mood: neutral and informative — not “versus” as in a fight, but as complementary options in the same ecosystem.
100+
101+
---
102+
103+
## 5. Code Recipes / Labs Illustration
104+
105+
**Docs**:
106+
- [`code-recipes/index.md`](../code-recipes/index.md)
107+
- Home page “Battle‑Tested Recipes” card linking to `code-recipes/`.
108+
109+
**Goal**: Represent hands‑on experimentation and validated pipelines.
110+
111+
**File path**:
112+
- `assets/images/recipes/code-recipes-lab.png`
113+
114+
**Prompt**:
115+
116+
> A playful yet professional illustration of a **data engineering lab bench** for code recipes.
117+
> Visual elements:
118+
> - A laptop showing code or terminal output.
119+
> - Beakers and flasks with glowing data particles to symbolize experiments.
120+
> - Small pipelines or mini conveyor belts moving data “blocks” between stages labeled visually as “raw”, “validated”, “optimized” (no text).
121+
> - Checkmarks or green indicators representing tests/validation.
122+
> Style: bright colors (indigo, pink, amber), slightly cartoony but still tech‑oriented, clean lines, rounded corners.
123+
> Background: subtle gradient and geometric shapes evoking a lab/tech environment.
124+
> Composition: medium detail so it remains readable when scaled down as a card thumbnail.
125+
126+
---
127+
128+
## 6. Best Practices / Production Readiness Illustration
129+
130+
**Docs**:
131+
- [`docs/best-practices/index.md`](../docs/best-practices/index.md)
132+
- [`docs/best-practices/production-readiness.md`](../docs/best-practices/production-readiness.md)
133+
134+
**Goal**: Visual metaphor for robust, production‑ready systems.
135+
136+
**File path**:
137+
- `assets/images/best-practices/production-readiness.png`
138+
139+
**Prompt**:
140+
141+
> An illustration of a **well‑engineered data pipeline control room** representing production readiness.
142+
> Central: a large status dashboard with multiple green checkmarks, gauges, and alerts indicators all “healthy”.
143+
> Around it:
144+
> - A shield icon subtly embedded behind or around the dashboard (security & reliability).
145+
> - Gears and automation arms tuning or monitoring pipelines.
146+
> - Logs or metrics panels showing clean trend lines.
147+
> Style: flat/semi‑flat, bright with emphasis on greens for “healthy” but anchored in the site’s core palette (indigo, pink, amber).
148+
> Mood: calm, confident, stable — this is the “it’s ready for prod” illustration, not experimental.
149+
> No text labels; rely on iconography and color coding.
150+
151+
---
152+
153+
## 7. Tutorials / Getting Started Illustration
154+
155+
**Docs**:
156+
- [`docs/tutorials/index.md`](../docs/tutorials/index.md)
157+
- [`docs/tutorials/getting-started.md`](../docs/tutorials/getting-started.md)
158+
159+
**Goal**: Encourage new users and make the learning path feel guided and safe.
160+
161+
**File path**:
162+
- `assets/images/tutorials/getting-started-path.png`
163+
164+
**Prompt**:
165+
166+
> A friendly illustration of a **guided learning path** for data lakehouse technologies.
167+
> Visual metaphor: a winding path or staircase of tiles, each tile containing a small icon (book, code, database, chart, rocket).
168+
> At the start: a person or abstract character standing at “Beginner” with a laptop.
169+
> Along the path: signposts or milestones, visual but not text‑labeled.
170+
> At the top or end: a stylized rocket or trophy representing “production‑ready skills”.
171+
> Style: bright, optimistic colors; soft gradients; rounded shapes; character is abstract enough to be inclusive (no detailed facial features).
172+
> Mood: encouraging, low‑friction, learning‑friendly.
173+
174+
---
175+
176+
## 8. Gamification / Leaderboard Illustration
177+
178+
**Docs & scripts**:
179+
- [`docs/BLUEPRINT.md`](../docs/BLUEPRINT.md) (Gamification Engine section)
180+
- Leaderboard surfaced in [`README.md`](../README.md) via `scripts/generate_leaderboard.py`.
181+
182+
**Goal**: Visual representation of community contribution and fun.
183+
184+
**File path**:
185+
- `assets/images/community/leaderboard-gamification.png`
186+
187+
**Prompt**:
188+
189+
> A dynamic illustration of a **developer leaderboard** with a fun gamified feel.
190+
> Visuals:
191+
> - A large scoreboard panel with rows, avatars, and trophies (no readable text).
192+
> - Contributors represented as abstract characters or icons with varying trophy levels (gold, silver, bronze).
193+
> - Badges floating around: stars, diamonds, shields, sparkles, representing achievements.
194+
> - A “contribute” button visual element suggesting ongoing participation.
195+
> Style: bright and upbeat, bold color contrasts, soft shadows, playful but not childish.
196+
> Mood: celebratory and inclusive; emphasizes recognition and collaboration rather than hardcore competition.
197+
198+
---
199+
200+
## 9. AI‑Powered Features Illustration
201+
202+
**Docs**:
203+
- [`docs/BLUEPRINT.md`](../docs/BLUEPRINT.md), “AI‑Powered Features” section.
204+
- Mentioned on homepage in the “AI‑Powered Curation” feature card.
205+
206+
**File path**:
207+
- `assets/images/ai/ai-curation-engine.png`
208+
209+
**Prompt**:
210+
211+
> A modern illustration of an **AI assistant curating and organizing data lakehouse resources**.
212+
> Central: an abstract AI “orb” or holographic head made of wireframe lines and dots, hovering above a desk.
213+
> Around it: small cards representing articles, docs, code snippets, and diagrams being sorted into neat stacks or columns.
214+
> Visual hints: tiny spark icons and flow lines indicating the AI is analyzing and tagging content.
215+
> Style: futuristic but friendly, using blues and purples for the AI with warm accent colors (amber, pink) for the curated cards.
216+
> Background: subtle network or constellation pattern to suggest intelligence and connections.
217+
> Mood: smart, magical, but trustworthy and not opaque.
218+
219+
---
220+
221+
## 10. Time‑Series Forecasting Weather Example Illustration
222+
223+
**Code recipe**:
224+
- [`code-recipes/examples/time-series-forecasting/README.md`](../code-recipes/examples/time-series-forecasting/README.md)
225+
- Also suitable as a thumbnail in a listing of advanced recipes.
226+
227+
**File path**:
228+
- `assets/images/recipes/time-series-forecasting-weather.png`
229+
230+
**Prompt**:
231+
232+
> An illustration of **time‑series forecasting for weather data** in a data engineering context.
233+
> Foreground: a chart with a wavy line representing temperature over time, with a dotted extension into the future indicating forecast.
234+
> Icons along the line: sun, cloud, rain, snow to show changing conditions.
235+
> Around the chart:
236+
> - A calendar icon.
237+
> - A clock.
238+
> - A small server or database icon representing storage.
239+
> Style: flat/semi‑flat, bright and clean, with clear lines and high contrast.
240+
> Color palette: sky blues, indigo, white, with accent orange/yellow for sun and pink for highlights.
241+
> Mood: precise yet approachable, blending data science with intuitive visuals.
242+
243+
---
244+
245+
## 11. Where to Place the Generated Files
246+
247+
Once images are generated, place them under:
248+
249+
```text
250+
assets/
251+
images/
252+
og-image.png
253+
hero-knowledge-hub.png
254+
architecture/
255+
system-overview-diagram.png
256+
comparisons/
257+
delta-vs-iceberg-overview.png
258+
recipes/
259+
code-recipes-lab.png
260+
time-series-forecasting-weather.png
261+
best-practices/
262+
production-readiness.png
263+
tutorials/
264+
getting-started-path.png
265+
community/
266+
leaderboard-gamification.png
267+
ai/
268+
ai-curation-engine.png
269+
```
270+
271+
Then update references in:
272+
273+
- [`_layouts/default.html`](_layouts/default.html)
274+
- Ensure `<meta property="og:image">` and `<meta property="twitter:image">` point to `/assets/images/og-image.png`.
275+
- [`index.md`](../index.md)
276+
- Add `<img>` or `<figure>` elements in the hero section and near key feature cards.
277+
- Relevant docs (`docs/architecture/system-overview.md`, `docs/comparisons/feature-matrix.md`, etc.) to embed their respective diagrams using standard Markdown:
278+
279+
```md
280+
![System overview of the automated Delta Lake & Apache Iceberg knowledge hub](/assets/images/architecture/system-overview-diagram.png)
281+
```
282+
283+
---
284+
285+
## 12. Quality Checklist for Each Generated Image
286+
287+
Before committing any generated image:
288+
289+
- [ ] Matches the **bright, vibrant** palette (indigo, pink, amber, teal).
290+
- [ ] No embedded text that could conflict with localization or UI copy.
291+
- [ ] Readable and meaningful at **card size** (~320×200) and at large sizes.
292+
- [ ] No vendor logos or IP‑sensitive visuals.
293+
- [ ] Consistent illustration style across all images (line weight, shading, perspective).
294+
- [ ] Good contrast and legibility in **both light and dark themes**.
295+
- [ ] File size optimized (typically `< 300 KB` for web images) without visible artifacts.
296+
297+
Once this catalogue is in place, image generation becomes a repeatable process: pick the prompt, run in your preferred model (Midjourney, DALL·E, SDXL, etc.), select the best candidate, optimize, and save at the documented path.

0 commit comments

Comments
 (0)