How elizabthpazp/blog works
1. What this repository is
- A multilingual personal blog built with Next.js App Router, React, TypeScript, and Tailwind CSS.
- The content is primarily Markdown-based articles organized by slug and language, with deployment/runtime oriented toward Vercel.
- The blog also includes engagement features like likes and newsletter subscription.
2. Primary application boundary: the Next.js app
- The main UI lives under app/.
- The route structure is language-aware: app/[lang]/... handles localized pages, and app/[lang]/[slug]/page.tsx renders individual posts.
- app/[lang]/layout.tsx and app/[lang]/providers.tsx define the shared shell and client-side providers for localized pages.
3. Content model: Markdown posts on disk
- Blog articles are stored in the posts/ directory, grouped by slug and then by language (en, es).
- This means the site is not CMS-driven at runtime; it reads content from the repository itself.
- getPostMetadata.ts, PostMetadata.ts, and likely related helpers extract frontmatter/metadata and build the post index used by listing pages and post pages.
4. Internationalization and routing
- Localization is a first-class boundary: dictionaries/en.json and dictionaries/es.json provide translated UI copy.
- get-dictionary.ts and i18n-config.ts centralize dictionary lookup and supported locales.
- middleware.ts likely enforces locale routing or redirects users into the correct [lang] segment.
- Public locale-specific assets also exist under public/en and public/es, including robots.txt and sitemap.xml.
5. Page composition
- app/[lang]/page.tsx is the localized home/index page, likely showing post previews and site-level content.
- components/PostPreview.tsx is the main content-card boundary for listing posts.
- app/[lang]/[slug]/page.tsx is the article detail page, pulling markdown content, metadata, and post-specific features together.
6. Interactive client-side features
- Several components are explicitly interaction-heavy: Search.tsx, LocaleSwitcher.tsx, ThemeSwitcher.tsx, Toggle.tsx, DropDown.tsx, and CopyCode.tsx.
- CodeHighlight.tsx, CompareSlider.tsx, ResizablePanel.tsx, and LoadingDots.tsx support richer article presentation and UX.
- app/hooks/useSubscribe.ts and app/hooks/index.ts package reusable client behavior, probably around newsletter subscription state or form submission.
7. Engagement and external integrations
- Newsletter flow is present through components/EmailSubs.tsx, components/EmailPlantilla.tsx, and app/api/convertkit/route.ts.
- The ConvertKit API route suggests the newsletter is backed by an external email marketing service rather than an in-repo mailing system.
- The subscription hook likely posts through this route, keeping the API boundary separate from the UI.
8. Likes and post statistics subsystem
- app/api/get/route.ts, app/api/post/route.ts, get-likes.ts, get-likes-post.ts, and the LikeCount.tsx / LikesList.tsx components form a dedicated engagement subsystem.
- The presence of utils/redis.ts and the README’s PostgreSQL mention suggests likes are persisted outside the React layer, using server-side storage or caching.
- This subsystem is isolated behind API routes so the frontend can fetch and update like counts without direct database access.
9. Search and navigation
- components/Search.tsx provides site search, likely indexing article metadata/content client-side or via local data fetched from the app.
- components/Header.tsx, components/Footer.tsx, and components/RouteActualLink.tsx define the global navigation boundary.
- links-web.ts appears to be a centralized link/config file for site navigation or external destinations.
10. SEO, indexing, and public assets
- public/sitemap.xml plus locale-specific robots.txt and sitemap.xml files show SEO is treated as a first-class deliverable.
- getPostMetadata.ts and article metadata utilities likely feed canonical URLs, titles, and descriptions.
- The structure suggests statically generated or server-rendered pages with SEO-friendly output, which fits a blog optimized for discovery.
11. Styling and presentation system
- Global styles live in styles/globals.css, with feature-specific styles like styles/newsletter.css, styles/search.css, and styles/loading-dots.module.css.
- tailwind.config.js and postcss.config.js define the utility-first styling pipeline.
- The UI mixes Tailwind-driven layout with a few dedicated CSS modules for more specialized interactions.
12. Utility and infrastructure layer
- utils/ contains shared low-level helpers such as date formatting, Redis access, image downloading, and string/file-name manipulation.
- revalidate-cache.ts indicates the site uses cache invalidation or ISR-style regeneration for content updates.
- next.config.js, tsconfig.json, and the package lock files define the build/runtime envelope around the app.
13. End-to-end data flow
- Content flow: Markdown in posts/ → metadata extraction → localized page rendering under app/[lang] → article display components.
- Interaction flow: user actions in client components → Next.js API routes → persistence layer/external service → updated UI state.
- Localization flow: locale detected/routed via middleware → dictionary loaded → localized layout/page/components rendered.
14. Architectural summary
- This is a content-first, multilingual blog with a clear split between:
- static/repository content,
- localized presentation,
- server-side API endpoints for engagement,
- and small integrations with external services like ConvertKit and likely Redis/PostgreSQL-backed storage.
- For an architecture diagram, the key boxes are: Next.js app shell, Markdown content store, i18n dictionaries, API routes, persistence/cache layer, and external newsletter/hosting services.
Main entry points: layout.tsx Localized shell · getPostMetadata.ts Post index · [lang]/page.tsx Home page · [slug]/page.tsx Article page
Components 24
Next.js app
Localized application shell, pages, providers, middleware, and route handlers.
- Localized shell · Shared layout for language-scoped pages.
app/[lang]/layout.tsx - Home page · Localized index page for posts and site content.
app/[lang]/page.tsx - Article page · Renders individual markdown posts under a language and slug.
app/[lang]/[slug]/page.tsx - Providers · Client-side providers and shared runtime state for localized pages.
app/[lang]/providers.tsx
Content
Markdown posts and metadata extraction for the blog index and article pages.
- Markdown posts · Repository-hosted articles organized by slug and language.
posts/como-desarrollar-una-web-desde-cero/en/como-desarrollar-una-web-desde-cero.md - Metadata model · Shared post metadata shape used across listings and detail pages.
PostMetadata.ts - Post index · Extracts frontmatter and builds the post listing/index.
getPostMetadata.ts
UI
Reusable components and client-side interaction boundaries.
- Post preview · Preview card used on listing and index pages.
components/PostPreview.tsx - Search · Site search boundary for finding articles and content.
components/Search.tsx - Shell chrome · Global header and footer navigation components.
components/Header.tsx - Locale/theme UI · Locale switcher, theme switcher, and related toggles.
components/LocaleSwitcher.tsx - Article widgets · Code highlighting, copy, slider, panel, and loading helpers for richer posts.
components/CodeHighlight.tsx - Subscribe hook · Reusable hook for newsletter subscription flow.
app/hooks/useSubscribe.ts
Data services
Engagement APIs and server-side persistence helpers.
- Newsletter UI · Newsletter form and email template components.
components/EmailSubs.tsx - Likes UI · Like count and likes list components for post engagement.
components/LikeCount.tsx - ConvertKit API · Server endpoint for newsletter subscription requests.
app/api/convertkit/route.ts - Likes API · Server endpoints for reading and posting like data.
app/api/get/route.ts - Likes store · Server-side persistence/caching used by the likes subsystem.
utils/redis.ts
Platform
Localization, styling, build, and deployment-related files.
- Locale middleware · Detects or enforces locale-aware routing.
middleware.ts - Locale config · Supported locales and routing configuration.
i18n-config.ts - Dictionary loader · Loads translated UI copy for the active language.
get-dictionary.ts - Translations · Localized UI strings for English and Spanish.
dictionaries/en.json - Site config · Central site configuration used by the app shell and metadata.
app/site.config.ts - Styles · Global styles and feature-specific CSS modules for the UI.
styles/globals.css
Connections 22
- Locale middleware → Locale config: locale rules · Middleware uses the supported locale configuration.
- Locale middleware → Localized shell: route into · Locale-aware requests are routed into the localized app shell.
- Localized shell → Providers: wraps · The localized layout provides shared client runtime state.
- Localized shell → Dictionary loader: loads copy · The shell resolves translated strings for the active language.
- Dictionary loader → Translations: reads · Dictionary helper loads JSON translation files.
- Home page → Post index: lists posts · The home page builds its article list from repository metadata.
- Home page → Post preview: renders cards · Listing output is composed with preview cards.
- Article page → Markdown posts: reads markdown · Article detail pages load the post content from disk.
- Article page → Post index: resolves metadata · Detail pages use post metadata for titles and routing.
- Post index → Metadata model: shapes · The indexer produces the shared metadata model.
- Post index → Markdown posts: scans · Repository markdown is scanned to build the index.
- Home page → Search: enables discovery · The localized index page exposes search over content.
- Shell chrome → Site config: uses · Navigation and shell chrome follow central site configuration.
- Locale/theme UI → Providers: client state · Switchers and toggles rely on provider-level runtime state.
- Article widgets → Article page: enhances · Richer article presentation is composed on the post page.
- Subscribe hook → ConvertKit API: submits to · The subscription hook posts form data to the newsletter API.
- Newsletter UI → Subscribe hook: drives · Newsletter UI uses the reusable subscribe hook.
- ConvertKit API → Newsletter UI: serves · The route supports the newsletter subscription flow from the UI.
- Likes UI → Likes API: fetches updates · Like components read and update counts through the API boundary.
- Likes API → Likes store: persists · Like data is stored through the server-side persistence layer.
- Styles → Localized shell: skins · Global and feature styles shape the localized app shell.
- Styles → Search: skins · Search uses dedicated styling alongside the global stylesheet.