karidea site

Karidea company website. Modernized with Vite, Pug, and SCSS.

Requirements

• Node.js 22 (LTS) or higher.

Usage

Development Workflow

• Local Development: All development occurs on the main branch.
• Push Policy: The main branch is for local development and should not be pushed to the remote repository.
• Public Release: Only squashed commits from the public branch are pushed to the remote repository.
• Local guidelines: Keep local guidelines and guidance out of public branch. Relevant path has been gitignored.

Development

Clone the source files and navigate into the project's root directory. Run npm install and then run npm run dev which will open up a preview of the site in your default browser, watch for changes, and live reload the browser when changes are saved.

npm Scripts

• npm run dev - Starts the Vite development server with HMR.
• npm run build - Builds the project for production - this bundles assets, HTML, JS, and CSS into dist.
• npm run preview - Previews the production build locally.
• npm run clean - Deletes the dist directory.
• npm run lint - Runs ESLint and Stylelint to check code quality.
• npm run format - Automatically formats the codebase with Prettier (including Pug files).

Project Structure

• src/pug/ - Pug templates.
• src/news/ - News articles in Markdown format.
• src/scss/ - SCSS styles.
• src/js/ - JavaScript source.
• public/ - Static assets (images, favicon, robots.txt) copied directly to dist.

Content Management

Adding News Articles (Tarinat)

To add a new news article, create a new .md file in src/news/. The filename should follow the format YYYY-MM-DD-title.md.

Each file must have a YAML frontmatter:

---
title: Article Title
date: 2026-05-31
img: https://example.com/image.png (optional)
imgAlt: Alternative text for image (optional)
video: https://example.com/video.mp4 (optional)
iframe: https://example.com/embed (optional)
photographer: Name (optional)
---

Your content in Markdown here...

The build system automatically:

1. Sorts articles by date.
2. Displays the most recent year's articles as the main content.
3. Groups older articles into yearly accordions.

Adding Service Pages (Isännöidyt ATK-palvelut)

Service descriptions for the Isännöidyt ATK-palvelut portfolio item live as standalone Vite HTML pages under palvelut/<service>/index.html (one directory per service). They are processed by the Vite build like the main page, in the same visual style as the Webemailer page.

To add a new service page:

1. Create the Pug template src/pug/services/<service-name>.pug — a standalone page (no Bootstrap, no site layout mixins) that links to the shared service page stylesheet (/src/scss/service-page.scss), which Vite compiles and bundles automatically. The theme follows the browser's prefers-color-scheme setting; there is no theme toggle. Content is in Finnish.
2. Create the page entry palvelut/<service-name>/index.html containing a Pug template tag pointing at the template: <template data-type="pug" data-src="../../src/pug/services/<service-name>.pug"></template>.
3. Register the entry in rollupOptions.input in vite.config.js (e.g. <service-name>: resolve(__dirname, 'palvelut/<service-name>/index.html')). Vite emits it to dist/palvelut/<service-name>/index.html.
4. Link the page from the Isännöidyt ATK-palvelut accordion in src/pug/index.pug.
5. The sitemap generator (scripts/build-sitemap.js) picks up all palvelut/**/*.html entries automatically (Pug templates under src/pug/services/ are excluded from the Pug scan since their public URLs come from palvelut/).

Assets & Git LFS

To keep the repository size manageable and ensure fast cloning, large binary assets should be handled with Git LFS (Large File Storage).

Best Practices

• Only Track Binaries: Use LFS for .png, .jpg, .webp, .pdf, and other non-text formats.
• Do NOT Track SVGs: SVGs are XML-based text files; standard Git handles them more efficiently with compression and diffing.
• Strip Metadata: Before committing images, use tools like exiftool or sips to remove sensitive EXIF data (camera info, GPS, etc.).
• Optimize for Web: Prefer modern formats like WebP and ensure resolutions are appropriate for web display (usually 72/96 DPI).
• History Cleanliness: Avoid committing large binaries to the main branch history if they are temporary; our squashing policy for the public branch helps, but LFS is better for long-term management.

Commands

# Install LFS locally (one-time)
git lfs install

# Track a new file type
git lfs track "*.png"

# Check LFS status
git lfs status

Documentation & Guidance

• Official Forgejo Documentation: Forgejo Docs
• Git LFS Best Practices: Atlassian Git LFS Tutorial
• General Guidance: Git LFS Official Site

Code Quality & Security

This project uses ESLint and Stylelint for code quality, and Trivy for security scanning.

Code Quality (Linting)

• Static Analysis: ESLint (for JS) and Stylelint (for SCSS) are integrated into the pipeline to catch bugs and enforce style rules.
• Run locally: npm run lint

Security Scanning

• Vulnerability Detection: Trivy automatically scans the project's dependencies (package-lock.json) for known vulnerabilities (CVEs).
• Secret Scanning: Trivy also checks for accidentally committed secrets (API keys, tokens, etc.).
• European-Friendly: Developed by Aqua Security, Trivy is an open-source, fast, and privacy-conscious tool that does not require cloud registration or data export to operate.

AI-Assisted Maintenance

This repository is monitored and maintained with the help of Junie, an AI programmer. Junie is configured to:

• Monitor Forgejo Action runs and react to failures.
• Propose and apply fixes for build, linting, and security scan issues.
• Maintain and update the CI/CD pipeline infrastructure.

Note for Salespeople

Make a Pull Request first. After that we can discuss further possibilities.

You can also create issue. See top navigation bar.

About

This project is the official website for Karidea Oy. It has undergone a complete modernization to provide a fast and efficient developer experience and a high-performance production site.

Tech Stack

• Vite - Frontend Tooling & Build System
• Pug - Template Engine
• Sass - CSS Extension Language
• Bootstrap 5 - Frontend Framework

Credits

Originally based on the Start Bootstrap template.