{"id":33561009,"url":"https://github.com/techquestsdev/blog","last_synced_at":"2026-03-04T01:18:10.712Z","repository":{"id":323549512,"uuid":"1093711221","full_name":"techquestsdev/blog","owner":"techquestsdev","description":"Tech Quests Blog – The saga of a SRE sharing his technological adventures. A modern, performant blog built with SvelteKit 5, featuring enhanced MDX content, advanced syntax highlighting, and automated deployment via GitOps. Built with cutting-edge web technologies for optimal performance and developer experience.","archived":false,"fork":false,"pushed_at":"2026-01-13T20:23:50.000Z","size":16834,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T21:38:36.600Z","etag":null,"topics":["blog","javascript","mdx","playwright","rss","scss","seo","ssg","static-site","svelte","sveltekit","testing","vitest","web-development"],"latest_commit_sha":null,"homepage":"https://techquests.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techquestsdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-10T18:29:16.000Z","updated_at":"2026-01-13T19:16:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/techquestsdev/blog","commit_stats":null,"previous_names":["techquestsdev/blog"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/techquestsdev/blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techquestsdev%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techquestsdev%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techquestsdev%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techquestsdev%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techquestsdev","download_url":"https://codeload.github.com/techquestsdev/blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techquestsdev%2Fblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29048698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T15:43:47.601Z","status":"ssl_error","status_checked_at":"2026-02-03T15:43:46.709Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","javascript","mdx","playwright","rss","scss","seo","ssg","static-site","svelte","sveltekit","testing","vitest","web-development"],"created_at":"2025-11-27T23:00:44.829Z","updated_at":"2026-03-04T01:18:10.700Z","avatar_url":"https://github.com/techquestsdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tech Quests Blog\n\n[![CI](https://github.com/techquestsdev/blog/workflows/CI/badge.svg)](https://github.com/techquestsdev/blog/actions)\n[![Codecov](https://codecov.io/gh/techquestsdev/blog/branch/main/graph/badge.svg)](https://codecov.io/gh/techquestsdev/blog)\n[![License: GNU GPLv3](https://img.shields.io/badge/License-GNU%20GPLv3-green.svg)](LICENSE)\n![Latest Release](https://img.shields.io/github/v/release/techquestsdev/blog?include_prereleases)\n\n![Blog](docs/blog.gif)\n\nA modern, performant blog built with SvelteKit 5, featuring enhanced MDX content, advanced syntax highlighting, and automated deployment via GitOps. Built with cutting-edge web technologies for optimal performance and developer experience.\n\n## Features\n\n- **Modern Stack**: Built with SvelteKit v2 + Svelte v5, featuring SSG (Static Site Generation)\n- **Enhanced MDX**: Rich content with custom components and advanced markdown features\n- **Syntax Highlighting**: Beautiful code blocks with Shiki v3 (Rose Pine themes)\n- **Dark Mode**: Seamless theme switching with persistent user preferences\n- **Responsive Design**: Mobile-first approach with optimized layouts for all devices\n- **SEO Optimized**: Comprehensive meta tags, OpenGraph, and structured data\n- **RSS Feeds**: Multiple RSS 2.0 feeds for content syndication (all content, blog-only, projects-only)\n- **High Performance**: Lighthouse scores of 95+ across all metrics\n- **Enhanced Images**: Advanced image processing with multiple format support (AVIF, WebP)\n- **Optimized Builds**: Fast CI builds with Bun, ultra-fast Docker packaging (~5-10s)\n- **Containerized**: Lightweight Docker images with Caddy web server\n- **Security First**: Trivy scanning, SBOM generation, and artifact attestation\n- **GitOps Deployment**: Automated CI/CD with ArgoCD and Kubernetes\n- **Comprehensive Testing**: Unit tests with Vitest and E2E tests with Playwright\n\n## Tech Stack\n\n### Frontend\n\n- **Framework**: [SvelteKit](https://kit.svelte.dev/) v2\n- **UI Library**: [Svelte](https://svelte.dev/) v5\n- **Styling**: SCSS with custom design system\n- **Content Processing**: [MDsveX](https://mdsvex.pngwn.io/) for MDX\n- **Syntax Highlighting**: [Shiki](https://shiki.matsu.io/) v3\n- **Icons**: [Iconify](https://iconify.design/) with unplugin-icons\n- **Animations**: [Lottie](https://airbnb.design/lottie/) web\n- **Image Enhancement**: [@sveltejs/enhanced-img](https://kit.svelte.dev/docs/images)\n- **Carousel**: [Embla Carousel](https://www.embla-carousel.com/) for Svelte\n\n### Build \u0026 Deploy\n\n- **Build Tool**: [Vite](https://vitejs.dev/)\n- **Container**: Docker with multi-stage builds\n- **Server**: [Caddy](https://caddyserver.com/)\n- **CI/CD**: GitHub Actions\n- **Container Registry**: GitHub Container Registry (GHCR)\n- **Deployment**: Kubernetes + ArgoCD (GitOps)\n\n### Quality \u0026 Security\n\n- **Linting**: ESLint v9 + Prettier for code formatting\n- **Testing**:\n  - **Unit**: [Vitest](https://vitest.dev/) v4 with jsdom\n  - **E2E**: [Playwright](https://playwright.dev/) v1.56 with testing-library\n- **Security Scanning**: [Trivy](https://trivy.dev/) for vulnerability detection\n- **Dependency Management**: [Renovate](https://renovatebot.com/) for automated updates\n- **Runtime**: [Bun](https://bun.sh/) for fast package management and test execution\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js \u003e= 20\n- Bun \u003e= 1.0 (recommended runtime)\n- Docker (optional, for containerized development)\n- Trivy (optional, for security scanning)\n\n### Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/techquestsdev/blog.git\ncd blog\n\n# Install dependencies\nbun install\n\n# Start development server\nbun run dev\n\n# Open http://localhost:5173\n```\n\n### Available Scripts\n\n```bash\n# Development\nbun run dev               # Start development server\nbun run build             # Build for production\nbun run preview           # Preview production build\n\n# Code Quality\nbun run lint              # Run ESLint and Prettier checks\nbun run format            # Format code with Prettier\n\n# Testing\nbun run test              # Run all tests\nbun run test:unit         # Run unit tests with Vitest\nbun run test:integration  # Run E2E tests with Playwright\n\n# Dependencies\nbun install               # Install dependencies\nbun update                # Update dependencies\nbun audit                 # Audit for vulnerabilities\n```\n\n### Make Commands\n\n## Development Workflow\n\n1. **During Development**: Use watch mode for immediate feedback\n\n   ```bash\n   bun run test:unit:watch\n   ```\n\n2. **Before Committing**: Run full test suite\n\n   ```bash\n   bun run test\n   ```\n\n   ```bash\n   bun run test:integration -- --headed --timeout=0\n   ```\n\n## Make Commands \u0026 Dependencies\n\nThe project includes a comprehensive Makefile for common tasks:\n\n```bash\n# Development Workflow\nmake help                 # Show all available commands\nmake install              # Install dependencies (bun install)\nmake dev                  # Start development server\nmake build                # Build for production\n\n# Testing commands\nmake test                 # Run all tests\nmake test-unit            # Run unit tests only\nmake test-coverage        # Run unit tests with coverage\nmake test-coverage-watch  # Run tests with coverage in watch mode\nmake test-integration     # Run E2E tests\n\n# Performance testing\nmake lighthouse           # Run Lighthouse performance audit (requires build)\nmake lighthouse-full      # Build site + run Lighthouse audit\n\n# Code quality\nmake lint                 # Run linter\nmake format               # Format code\nmake clean                # Clean build artifacts, coverage, and test results\n\n# Docker commands (requires pre-built files in build/ directory)\nmake docker-build         # Build Docker image (validates build/ exists)\nmake docker-build-full    # Build site + Docker image in one command\nmake docker-run           # Run Docker container locally\nmake docker-scan          # Security scan with Trivy\nmake docker-compose-up    # Start with docker-compose\n\n# Dependency management\nmake deps-update          # Update dependencies (bun update)\nmake deps-audit           # Audit dependencies (bun audit)\n\n# CI/CD commands\nmake ci-full              # Run complete CI pipeline\n```\n\n## Docker\n\nThe project uses an optimized Docker workflow where the build happens in CI (GitHub Actions) for maximum speed, and Docker simply packages the pre-built static files with Caddy.\n\n### Build Architecture\n\n```mermaid\ngraph LR\n    A[CI: Build with Bun] --\u003e B[Upload Artifact]\n    B --\u003e C[Docker: Copy Pre-built Files]\n    C --\u003e D[Caddy Server]\n```\n\n**Benefits:**\n\n- **Fast Docker builds** (~5-10 seconds vs minutes)\n- **Better caching** in CI environment\n- **Consistent builds** across environments\n- **Smaller images** (no build dependencies)\n\n### Local Development\n\nFor local development, build first then create the Docker image:\n\n```bash\n# Option 1: Build site then Docker image separately\nbun run build              # Build the static site first\nmake docker-build          # Build Docker image (requires build/ directory)\n\n# Option 2: Build everything in one command\nmake docker-build-full     # Runs 'make build' then 'make docker-build'\n\n# Run the container\nmake docker-run\n\n# Access at http://localhost:3000\n```\n\n**Note**: The `docker-build` target now validates that the `build/` directory exists before building the image. This prevents common errors from building Docker without first building the site.\n\n### Docker Compose\n\n```bash\n# Build and start services\nmake docker-compose-up\n\n# View logs\nmake docker-compose-logs\n\n# Stop services\nmake docker-compose-down\n```\n\n### Docker Context Optimization\n\nThe `.dockerignore` file uses a whitelist approach for minimal build context:\n\n- Ignores everything by default (`*`)\n- Only includes: `build/`, `Caddyfile`, and `README.md`\n- Results in ultra-fast Docker builds with minimal context transfer\n\n### Security Scanning\n\n```bash\n# Scan for vulnerabilities\nmake docker-scan\n\n# Scan for critical issues only\nmake docker-scan-critical\n```\n\n## Production Deployment\n\n### CI/CD Pipeline\n\nThe blog uses GitHub Actions for continuous integration and deployment with a multi-stage workflow:\n\n```mermaid\ngraph TB\n    START[Trigger: Push/PR/Manual] --\u003e SPLIT{Event Type}\n\n    SPLIT --\u003e|Push to main only| SV[Semantic Version Job]\n    SV --\u003e|Calculate bump| DECIDE{Bump Needed?}\n    DECIDE --\u003e|Yes| NEWTAG[Create and Push Tag]\n    DECIDE --\u003e|No| SKIP[Skip Versioning]\n    NEWTAG -.-\u003e|Expose vX.Y.Z to build| DOCKERPUSH\n\n    SPLIT --\u003e VAL[Validate Job]\n    VAL --\u003e|Check files| LINT[Lint and Test Job]\n    LINT --\u003e|Run tests| BUILD[Build Artifact]\n    BUILD --\u003e|Upload| ARTIFACT[(build artifact)]\n    LINT --\u003e|Upload| COV[Codecov]\n\n    ARTIFACT --\u003e CHECK{Event?}\n\n    CHECK --\u003e|Pull Request| DOCKERVAL[Validate Docker Job]\n    DOCKERVAL --\u003e|Build test| TRIVY1[Trivy Scan]\n    TRIVY1 --\u003e|Exit 1 on HIGH/CRITICAL| PRBLOCK[Block if vulnerable]\n\n    CHECK --\u003e|Push not PR| DOCKERPUSH[Build and Push Job]\n    DOCKERPUSH --\u003e|Multi-arch build| PUSH[Push to GHCR]\n    PUSH --\u003e ATTEST[Generate Attestation]\n    ATTEST --\u003e TRIVY2[Trivy SARIF + Table]\n    TRIVY2 --\u003e UPLOAD[Upload SARIF to GitHub Security]\n\n    SV -.-\u003e|New tag + build success| RELEASE[Create Release Job]\n    DOCKERPUSH -.-\u003e|Success| RELEASE\n    RELEASE --\u003e|GitHub Release| DONE[✓ Complete]\n```\n\n### Workflow Jobs\n\n#### 1. **Validate**\n\n- Validates `package.json` exists\n- Ensures `bun.lock` is present (generates if missing)\n- Sets up Bun runtime environment\n\n#### 2. **Lint \u0026 Test**\n\n- Runs ESLint and Prettier checks\n- Executes unit tests with Vitest and generates code coverage\n- Installs Playwright browsers for server-side rendering\n- Builds the static site (SvelteKit + Vite)\n- Runs E2E integration tests on the built site\n- Uploads build artifacts and test results\n\n#### 3. **Coverage Upload**\n\n- Uploads coverage reports to Codecov (Linux only)\n- Generates coverage badges and metrics\n- Integrates with GitHub pull request comments\n\n#### 4. **Build \u0026 Push** (main branch only)\n\n- Downloads pre-built site from artifacts\n- Multi-arch Docker builds (amd64/arm64) - packages static files only\n- Pushes to GitHub Container Registry (GHCR)\n- Generates build provenance and SBOM\n- Creates artifact attestations\n- Comprehensive vulnerability scanning with Trivy\n\n#### 5. **Docker Validate** (PRs only)\n\n- Downloads pre-built site from artifacts\n- Builds Docker image for validation (packages static files)\n- Runs security scans on PR builds\n- Fails on critical/high vulnerabilities\n\n### Available Images\n\n```bash\n# Pull the latest image\ndocker pull ghcr.io/techquestsdev/blog:latest\n\n# Specific versions\ndocker pull ghcr.io/techquestsdev/blog:v1.0.0\ndocker pull ghcr.io/techquestsdev/blog:main-abc123\n```\n\n**Image Tags:**\n\n- `latest` - Latest from main branch\n- `main` - All pushes to main branch\n- `v*.*.*` - Semantic version tags (e.g., v1.2.3) created by CI\n- `main-{sha}` - Commit-specific builds from main\n\n### Security Features\n\nAll Docker images include:\n\n- Optimized single-stage builds (static files only, minimal attack surface)\n- Multi-architecture support (amd64/arm64)\n- Comprehensive Trivy vulnerability scanning\n- SBOM (Software Bill of Materials) generation\n- Build provenance and artifact attestation\n- Caddy server with automatic HTTPS and security headers\n- Health checks and proper signal handling\n- Automated security updates via Renovate\n- GitHub Security tab integration for vulnerability reporting\n\nSecurity scan results are available in the [GitHub Security tab](https://github.com/techquestsdev/blog/security).\n\n## Content Management\n\n### Writing Blog Posts\n\nCreate a new markdown file in `src/content/blog/{slug}/+{slug}.md`:\n\n```markdown\n---\npublished: true\nname: 'Your Post Title'\nicon: 'ph:icon-name'\ndescription: 'Brief description'\ndate: 2025-01-15\n---\n\nYour content here...\n```\n\n### Supported Features\n\n- **Markdown**: Standard markdown syntax with GitHub Flavored Markdown\n- **MDX Components**: Custom Svelte components in markdown\n- **Code Blocks**: Advanced syntax highlighting with Shiki (Rose Pine themes)\n- **Mermaid Diagrams**: Flowcharts, sequence diagrams, and more\n- **Table of Contents**: Auto-generated from headings with remark-toc\n- **Images**: Enhanced image processing with multiple formats (AVIF, WebP, PNG)\n- **Autolink Headings**: Clickable heading anchors with rehype-autolink-headings\n- **Front Matter**: YAML metadata for posts and projects\n- **Math**: KaTeX support for mathematical expressions\n- **Task Lists**: GitHub-style checkboxes and task lists\n\n### Content Structure\n\n```bash\nsrc/content/\n├── blog/               # Blog posts\n│   ├── {slug}/\n│   │   ├── +{slug}.md  # Main content file\n│   │   └── assets/     # Post-specific assets\n│   └── ...\n└── projects/           # Project showcases\n    ├── {slug}/\n    │   ├── +{slug}.md  # Project description\n    │   └── assets/     # Project assets\n    └── ...\n```\n\n### Adding Projects\n\nCreate a new file in `src/content/projects/{slug}/+{slug}.md` with similar front matter.\n\n### RSS Feeds\n\nThe blog provides RSS 2.0 feeds for content syndication:\n\n- **Combined Feed** (`/rss.xml`): All content (blog posts + projects)\n- **Blog Feed** (`/blog/rss.xml`): Blog posts only\n- **Projects Feed** (`/projects/rss.xml`): Projects only\n\nRSS feeds include:\n\n- Full content descriptions with HTML\n- Publication dates and metadata\n- Proper XML escaping and validation\n- Caching headers for optimal performance\n\n## Architecture\n\n```txt\nblog/\n├── src/\n│   ├── routes/          # SvelteKit routes\n│   ├── lib/             # Components and utilities\n│   │   ├── components/  # Svelte components\n│   │   ├── assets/      # Static assets\n│   │   └── js/          # JavaScript utilities\n│   ├── content/         # MDX content\n│   │   ├── blog/        # Blog posts\n│   │   └── projects/    # Project showcases\n│   └── app.scss         # Global styles\n├── static/              # Static files\n├── Dockerfile           # Multi-stage Docker build\n├── Caddyfile            # Caddy server config\n└── Makefile             # Development commands\n```\n\n## Configuration\n\n### Customization\n\n- **Theme**: Edit `src/app.scss` for colors and typography\n- **Fonts**: Modify `src/lib/assets/fonts/`\n- **SEO**: Update `src/routes/+layout.js` for default metadata\n- **Syntax Theme**: Change in `svelte.config.js` (Shiki themes)\n\n## Testing\n\n### Test Structure\n\nThe project uses a comprehensive testing strategy:\n\n- **Unit Tests**: Vitest for component and utility testing with code coverage\n- **E2E Tests**: Playwright for end-to-end browser testing\n- **Code Coverage**: Automated coverage reporting with Codecov integration\n- **Linting**: ESLint for code quality\n- **Type Safety**: SvelteKit's built-in TypeScript support\n\n### Running Tests\n\n```bash\n# Run all tests\nbun run test\n\n# Unit tests with coverage and watch mode\nbun run test:unit --coverage --watch\n\n# Generate coverage report only\nbun run test:unit --coverage\n\n# Generate coverage in different formats\nbun run test:unit --coverage --reporter=html  # HTML report in coverage/\nbun run test:unit --coverage --reporter=lcov  # LCOV format for CI\n\n# E2E tests with different options\nbun run test:integration              # Headless mode\nbun run test:integration --ui         # With Playwright UI\nbun run test:integration --headed     # With browser visible\nbun run test:integration --debug      # Debug mode\n\n# Update test snapshots\nbun run test:integration --update-snapshots\n\n# Install Playwright browsers (first time only)\nnpx playwright install --with-deps\n```\n\n### Test Configuration\n\n- **Vitest Config**: `vitest.config.js` - Unit test configuration with coverage settings\n- **Playwright Config**: `playwright.config.js` - E2E test configuration\n- **Coverage Reports**: Generated in `coverage/` directory (HTML, JSON, LCOV formats)\n- **CI Integration**: Automatic coverage upload to Codecov on successful builds\n- **Test Utilities**: `src/test-setup.js` and `tests/helpers.js`\n\n### Key Metrics\n\n- **First Contentful Paint**: \u003c 1.8s\n- **Largest Contentful Paint**: \u003c 2.5s\n- **Cumulative Layout Shift**: \u003c 0.1\n- **Time to Interactive**: \u003c 3.8s\n\n### Bundle Analysis\n\n- **Total JS Bundle**: ~45KB (gzipped)\n- **CSS Bundle**: ~12KB (gzipped)\n- **Image Optimization**: AVIF/WebP with fallbacks\n- **Tree Shaking**: Optimized with Vite\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Commit Convention\n\nThis project follows [Conventional Commits](https://www.conventionalcommits.org/):\n\n- `feat:` - New features\n- `fix:` - Bug fixes\n- `docs:` - Documentation changes\n- `style:` - Code style changes (formatting, etc.)\n- `refactor:` - Code refactoring\n- `test:` - Adding or updating tests\n- `chore:` - Maintenance tasks\n\n## License\n\nThis project is licensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details.\n\n## Links\n\n- **Live Site**: [techquests.dev](https://blog.techquests.dev)\n- **GitHub**: [techquestsdev/blog](https://github.com/techquestsdev/blog)\n- **Docker Images**: [GHCR Package](https://github.com/techquestsdev/blog/pkgs/container/blog)\n\n## Contact\n\n- **Author**: Andre Nogueira\n- **Email**: [Contact Page](https://blog.techquests.dev/contact)\n- **GitHub**: [@techquestsdev](https://github.com/techquestsdev)\n\n---\n\n## Made with ❤️ and Js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechquestsdev%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechquestsdev%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechquestsdev%2Fblog/lists"}