Skill-Wanderer Landing Page

This repository contains the source code for the Skill-Wanderer landing page, a Nuxt.js application designed to introduce the Skill-Wanderer platform and its components (Blog, Dojo, Hub).

Related Projects & Links

• Main Website: https://skill-wanderer.com
• Blog: https://wanderings.skill-wanderer.com
• Dojo (Moodle LMS): https://dojo.skill-wanderer.com

Table of Contents

• Prerequisites
• Getting Started
  • Installation
  • Development Server
• Building for Production
• Design System for Micro Frontends
• TypeScript Support
• Deployment
  • Docker
    • Building Locally
    • Multi-Architecture Builds
    • Running Locally
  • Helm (Kubernetes)
    • Prerequisites
    • Installation
    • Configuration
    • Upgrading
    • Uninstalling
  • CI/CD with GitHub Actions
• License

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (LTS version recommended)
• npm, pnpm, yarn, or bun
• Docker (for containerized deployment)
• Helm (for Kubernetes deployment)
• kubectl (for Kubernetes deployment)

Getting Started

Installation

Clone the repository and install the dependencies using your preferred package manager:

git clone https://github.com/skill-wanderer/skill-wanderer-landing-page.git
cd skill-wanderer-landing-page

# Choose one:
npm install
# or
pnpm install
# or
yarn install
# or
bun install

Development Server

Start the Nuxt.js development server. It will be available at http://localhost:3000.

# Choose one:
npm run dev
# or
pnpm dev
# or
yarn dev
# or
bun run dev

Building for Production

Build the application for production deployment:

# Choose one:
npm run build
# or
pnpm build
# or
yarn build
# or
bun run build

To preview the production build locally:

# Choose one:
npm run preview
# or
pnpm preview
# or
yarn preview
# or
bun run preview

Design System for Micro Frontends

To keep visual consistency across this app and any additional micro frontends, use the shared design guide:

• DESIGN_SYSTEM.md
• MARKETING_DESIGN_GUIDELINES.md

These documents define the shared visual system for the site and a companion guideline for marketing materials so external assets can keep the same feel.

TypeScript Support

This project is built with full TypeScript support, providing type safety and enhanced development experience.

TypeScript Configuration

• Nuxt 3: Built-in TypeScript support with automatic type generation
• Vue Components: Use <script setup lang="ts"> for type-safe Vue components
• Shared Types: Common type definitions are available in /types/index.ts
• Config Files: All configuration files use TypeScript (.ts extension)

Available Scripts

# Type checking without emitting output
npm run typecheck
# or
pnpm typecheck
# or
yarn typecheck

Development Features

• IDE Support: Full IntelliSense and autocompletion in VS Code and other TypeScript-aware editors
• Type Safety: Compile-time type checking prevents runtime errors
• Auto-import: Automatic imports for components, composables, and utilities
• Type Generation: Nuxt automatically generates types for routes, components, and APIs

Project Structure

├── types/           # Shared TypeScript type definitions
├── nuxt.config.ts   # Nuxt configuration with TypeScript
├── tailwind.config.ts # Tailwind configuration with TypeScript
├── tsconfig.json    # TypeScript configuration
└── server/tsconfig.json # Server-side TypeScript configuration

Deployment

This application can be deployed using Docker containers or Helm charts for Kubernetes.

Docker

This project includes Docker support for containerized deployment.

Building the Docker image locally

docker build -t skill-wanderer-landing-page .

Building multi-architecture Docker images

Use Docker Buildx to create images compatible with both amd64 (x86_64) and arm64 architectures.

# Ensure buildx builder is set up (run once)
# docker buildx create --name multiarch-builder --use
# docker buildx inspect --bootstrap

# Build for multiple platforms and load into local Docker images
docker buildx build --platform linux/amd64,linux/arm64 -t skill-wanderer-landing-page --load .

# Build and push to a container registry (replace <username> with your registry username)
# docker buildx build --platform linux/amd64,linux/arm64 -t <username>/skill-wanderer-landing-page:latest --push .

Running the Docker container locally

docker run -p 3000:3000 skill-wanderer-landing-page

Helm (Kubernetes)

A Helm chart is provided in the ./charts/skill-wanderer directory for easy deployment to Kubernetes clusters.

Helm Prerequisites

• Kubernetes cluster (v1.19+)
• Helm (v3.0+)
• kubectl configured for your cluster

Helm Installation

Method 1: From Local Chart

# Navigate to the repository root if you cloned it
helm install my-release ./charts/skill-wanderer

Helm Configuration

Customize the deployment by setting parameters during installation. Refer to ./charts/skill-wanderer/values.yaml for all available options.

Example using --set:

helm install my-release skill-wanderer/skill-wanderer --set replicaCount=2 --set service.type=LoadBalancer

Example using a custom values.yaml file:

helm install my-release skill-wanderer/skill-wanderer -f my-custom-values.yaml

Key Configuration Parameters:

Parameter	Description	Default
replicaCount	Number of application pods	1
image.repository	Container image repository	ghcr.io/skill-wanderer/skill-wanderer-landing-page
image.pullPolicy	Image pull policy	IfNotPresent
image.tag	Image tag (defaults to chart appVersion)	"" (uses Chart.yaml appVersion)
service.type	Kubernetes Service type	ClusterIP
service.port	Service port	80
service.targetPort	Container port the service targets	3000
ingress.enabled	Enable Kubernetes Ingress	false
ingress.className	Ingress Class name	""
ingress.hosts[0].host	Hostname for Ingress rule	chart-example.local
ingress.hosts[0].paths	Ingress paths	[ { path: "/", pathType: "ImplementationSpecific" } ]
resources	Pod CPU/Memory requests/limits	{} (No limits/requests set by default)

Upgrading the Chart

# Using local chart
helm upgrade my-release ./charts/skill-wanderer

Uninstalling the Chart

helm uninstall my-release

CI/CD with GitHub Actions

This project utilizes GitHub Actions (.github/workflows/docker-build.yml) for automated Docker image builds and pushes to the GitHub Container Registry (ghcr.io).

• Triggers: Pushes to main/master, tags starting with v, and pull requests targeting these branches.
• Functionality: Builds multi-architecture images (AMD64, ARM64) using Docker Buildx.
• Registry: Images are pushed to ghcr.io/skill-wanderer/skill-wanderer-landing-page.
• Tagging: Images are tagged automatically based on branch, PR number, version tag, or commit SHA (e.g., latest, v1.0.0, pr-123).

You can pull these pre-built images for deployment.

License

This project is licensed under the Apache License.

Your Usage

You are welcome to fork, modify, and distribute the code under the terms of the MIT License. However, if you are distributing a modified version of this software, you must:

1. Use a different name and logo. You may not use the "Skill-Wanderer" name or logo, or any confusingly similar name, to promote your version.
2. Remove our branding. You must replace all of our branding assets (like logos in the UI, etc.) with your own.

Essentially, you can do whatever you want with the code, but your project must be clearly identifiable as your own and not a "duplicate" or official version of our project.