|
1 | | -# Hello Tham Website (Astro) |
| 1 | +# Hello Tham Website |
2 | 2 |
|
3 | 3 | [](https://app.netlify.com/sites/hellotham/deploys) |
4 | 4 |
|
5 | | -This is the Hello Tham Corporate Website Web App (v4.0.0), built using the [Hello Astro](https://github.com/hellotham/hello-astro) starter. |
| 5 | +The corporate website of [Hello Tham Pty Ltd](https://hellotham.com) (v4.0.0), a boutique management consulting firm — built on our own [Hello Astro](https://github.com/hellotham/hello-astro) starter. |
6 | 6 |
|
7 | | -## Modernized Architecture |
| 7 | +## Design |
8 | 8 |
|
9 | | -The site runs on a modern dynamic serverless stack: |
| 9 | +The 2026 redesign implements our **Rosely** design system in an editorial style: Noto Serif headlines, mono uppercase eyebrows, hairline rules, numbered indexes, and the Rosely palette (mulberry, rose, quartz, plum, cream) expressed as Tailwind CSS v4 `@theme` tokens in `src/styles/global.css`. Every page supports light and dark themes, and illustrations are [unDraw](https://undraw.co) SVGs recoloured to the palette. The variable Noto Sans/Serif/Mono families are handled by Astro's native Fonts API (`fonts` in `astro.config.ts` + `<Font />` in the base layout): font files are downloaded at build time and self-hosted with preload links, so no third-party font requests are made at runtime. The design was authored in Claude Design and implemented with [Claude Code](https://claude.com/claude-code). |
10 | 10 |
|
11 | | -- **Astro v7 & Tailwind CSS v4:** Powered by Vite under the hood for maximum build performance and modern visual styles. |
12 | | -- **Dynamic Future-Dating (SSR):** Enabled via `@astrojs/netlify`. Dynamic routes (`/`, `/blog`, `/rss.xml`, categories, tags, and authors) are served on-demand, dynamically filtering out future-dated blog entries by comparing their `publishDate` against the current system clock at request time. |
13 | | -- **Client-Side Search:** High-performance local site searching powered by Pagefind v1.5.2. |
14 | | -- **Enhanced by Antigravity:** Google Deepmind's **Antigravity** agentic AI assistant was utilized to perform the code-base upgrades, enhance the underlying `hello-astro` template, and port the changes while preserving all custom consultancies content, partner listings, forms, and the original signature pink/purple theme colours. |
| 11 | +## Architecture |
| 12 | + |
| 13 | +A static-first Astro site — no servers, no databases, no cookies: |
| 14 | + |
| 15 | +- **Astro v7 + Tailwind CSS v4 + TypeScript**, `output: 'static'`. |
| 16 | +- **Future-dated publishing (client-side):** future posts are built into the static output but hidden; a small script in `src/layouts/base.astro` compares each element's `data-publish-date` with the visitor's clock at view time, so scheduled articles unlock automatically without a rebuild. |
| 17 | +- **Search:** [Pagefind](https://pagefind.app) builds a local index post-build; queries run entirely in the browser. |
| 18 | +- **Content pipelines:** Markdown, MDX and Markdoc via `@astrojs/markdown-satteri`, with custom satteri plugins (reading time, diagrams, emoji), Mermaid/Markmap diagrams and KaTeX math. |
| 19 | +- **SEO:** JSON-LD + Open Graph via `src/components/seo.astro`; `@astrojs/sitemap` is extended by `scripts/extend-sitemap.mjs` to reference the sitemaps of our five subsites (Rosely, HelloNotes, FinvestLens, Hello Astro, Spotlite), mirrored in `robots.txt`. |
| 20 | +- **Contact:** Netlify Forms (with honeypot) and an `astro-leaflet` OpenStreetMap map — the site's only third-party request. |
| 21 | + |
| 22 | +## Content |
| 23 | + |
| 24 | +Content lives in `src/content/` collections: `blog`, `page`, `doc`, `author`, `category` and `partner`. Notable conventions: |
| 25 | + |
| 26 | +- **Achievements** (`/work`) are parsed at build time from `src/content/page/work.md` — keep the strict `#### year, client` heading + `>` blockquote format; `src/pages/work.astro` turns them into year-grouped cards with client-keyed tints and artwork. |
| 27 | +- **Partners** are one markdown file + logo per partner in `src/content/partner/`; the home partner strip, the Find-out-more card and the Partners page CTA copy name them as well. |
| 28 | +- **Blog covers:** posts may set `coverSVG` (displayed in cards and heroes) alongside `coverImage` (used for Open Graph, which needs a raster). |
| 29 | +- Bespoke pages (`about`, `consultants`, `partners`, `apps`, `services`, `work`) live in `src/pages/` and are excluded from the generic `[page].astro` collection route. |
| 30 | + |
| 31 | +## Development |
| 32 | + |
| 33 | +```bash |
| 34 | +pnpm install |
| 35 | +pnpm dev # dev server on http://localhost:4321 |
| 36 | +pnpm build # astro build + extend sitemap + pagefind index |
| 37 | +pnpm preview # preview the production build |
| 38 | +pnpm check # astro type/content checks |
| 39 | +pnpm lint # prettier --write + eslint --fix |
| 40 | +``` |
| 41 | + |
| 42 | +## Deployment |
| 43 | + |
| 44 | +Every push to `master` deploys twice: |
| 45 | + |
| 46 | +- **GitHub Pages** via `.github/workflows/deploy.yml`. |
| 47 | +- **Netlify** (badge above), which also processes the contact form submissions. |
| 48 | + |
| 49 | +## Credits |
| 50 | + |
| 51 | +Based on the [Hello Astro](https://github.com/hellotham/hello-astro) starter. The Astro v7 / Tailwind v4 platform upgrade was performed with Google DeepMind's Antigravity agentic assistant; the subsequent Rosely redesign, bespoke pages and content overhaul were implemented with Anthropic's Claude Code. Illustrations by [unDraw](https://undraw.co). |
0 commit comments