Merge feature/migrate-site-content into main
Complete migration of all content and images from live markusgraf.ch site to Hugo project. This merge includes: - OpenSpec proposal for content migration (proposal.md, design.md, tasks.md, specs) - Complete homepage content with all sections and projects - All images downloaded and organized in static/images/ - Verified content parity with live site - All accessibility requirements met All 13 tasks completed and verified successfully.
This commit is contained in:
Markus Graf
@@ -1,21 +1,3 @@
|
||||
<!-- OPENSPEC:START -->
|
||||
# OpenSpec Instructions
|
||||
|
||||
These instructions are for AI assistants working in this project.
|
||||
|
||||
Always open `@/openspec/AGENTS.md` when the request:
|
||||
- Mentions planning or proposals (words like proposal, spec, change, plan)
|
||||
- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work
|
||||
- Sounds ambiguous and you need the authoritative spec before coding
|
||||
|
||||
Use `@/openspec/AGENTS.md` to learn:
|
||||
- How to create and apply change proposals
|
||||
- Spec format and conventions
|
||||
- Project structure and guidelines
|
||||
|
||||
Keep this managed block so 'openspec update' can refresh the instructions.
|
||||
|
||||
<!-- OPENSPEC:END -->
|
||||
|
||||
# Git Workflow
|
||||
|
||||
@@ -63,4 +45,23 @@ When the user requests a new feature, change, or proposal:
|
||||
- `main` branch represents stable, reviewed code
|
||||
- Never commit directly to `main` (except initial setup)
|
||||
- All changes go through feature branches
|
||||
- Keeps history clean and reviewable
|
||||
- Keeps history clean and reviewable
|
||||
|
||||
<!-- OPENSPEC:START -->
|
||||
# OpenSpec Instructions
|
||||
|
||||
These instructions are for AI assistants working in this project.
|
||||
|
||||
Always open `@/openspec/AGENTS.md` when the request:
|
||||
- Mentions planning or proposals (words like proposal, spec, change, plan)
|
||||
- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work
|
||||
- Sounds ambiguous and you need the authoritative spec before coding
|
||||
|
||||
Use `@/openspec/AGENTS.md` to learn:
|
||||
- How to create and apply change proposals
|
||||
- Spec format and conventions
|
||||
- Project structure and guidelines
|
||||
|
||||
Keep this managed block so 'openspec update' can refresh the instructions.
|
||||
|
||||
<!-- OPENSPEC:END -->
|
||||
+76
-10
@@ -1,20 +1,86 @@
|
||||
---
|
||||
title: "Welcome"
|
||||
description: "Personal website of Markus Graf"
|
||||
title: "Markus Graf, Ruby on Rails Entwickler, Accessibility Consultant"
|
||||
description: "Entwicklung individueller Webapplikationen in Ruby on Rails. Datenerhebung, Datenaggregation und Datenanalyse mit R, Accessibility Consulting."
|
||||
---
|
||||
|
||||
# Welcome to Markus Graf's Website
|
||||
# Markus Graf
|
||||
|
||||
This is a placeholder homepage. Replace this content with the actual content from your existing markusgraf.ch website.
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
|
||||
## About
|
||||
**Adresse:**
|
||||
Huebwisstrasse 5
|
||||
8117 Fällanden
|
||||
[info@markusgraf.ch](mailto:info@markusgraf.ch)
|
||||
[+41 (0)79 261 16 37](tel:+41792611637)
|
||||
|
||||
Add your introduction and about section here.
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img src="/images/profile/markusgraf.jpg" alt="Portraitbild Markus Graf" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Skills
|
||||
## Softwareentwicklung
|
||||
|
||||
List your skills and expertise here.
|
||||
- Individuelle Webapplikationen mittels Ruby on Rails, PHP und MySQL
|
||||
- Umfrage- und Testsysteme mittels Helena oder LimeSurvey
|
||||
|
||||
## Contact
|
||||
## Datenanalyse
|
||||
|
||||
Add your contact information here.
|
||||
- Datenaufbereitung / Aggregation
|
||||
- Datenanalyse in R
|
||||
- Automatisierte Berichterstellung mit LaTeX und R
|
||||
|
||||
## Barrierefreiheit
|
||||
|
||||
- Individuelle Beratung für Web Accessibility.
|
||||
- Beratende Begleitung bezüglich Barrierefreiheit neuer und bestehender Projekt.
|
||||
|
||||
---
|
||||
|
||||
## Projekte und Referenzen
|
||||
|
||||
### Laufbahndiagnostik
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-2">
|
||||
<img src="/images/projects/laufbahndiagnostik.png" alt="Laufbahndiagnostik Projekt Screenshot" class="img-thumbnail" />
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
|
||||
laufbahndiagnostik.ch wurde im Auftrag des Departements Angewandte Psychologie der ZHAW Zürcher Hochschule für Angewandte Wissenschaften entwickelt und unterstützt verschiedene Dienstleistungsangebote wie Berufs-, Studien- und Laufbahnberatung, Outplacementberatung oder Personalentwicklung.
|
||||
|
||||
Die Plattform bietet dem Betreiber die Möglichkeit, psychologische Instrumente selbstständig zu verwalten, Daten zu erheben und dem Nutzer ein individuelles Profil zur Verfügung zu stellen.
|
||||
|
||||
[https://www.laufbahndiagnostik.ch](https://www.laufbahndiagnostik.ch)
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Persönlichkeitsdiagnostik
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-2">
|
||||
<img src="/images/projects/persoenlichkeitsdiagnostik.png" alt="Persönlichkeitsdiagnostik App Screenshot" class="img-thumbnail" />
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
|
||||
Mit Hilfe von Persönlichkeitsdiagnostik können Sie zu verschiedenen Tageszeiten Ihre aktuelle Befindlichkeit erfassen. Die App ist zur Unterstützung des Beratungsprozesses entwickelt worden und sollte auch in die Beratung eingebettet werden. Es handelt sich dabei um eine hybride App, welche sowohl für Android wie auch iOS verfügbar ist.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Prozessmessung psychologischer Therapien
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-2">
|
||||
<img src="/images/projects/cpd.png" alt="CPD Therapie-Prozessmessung Screenshot" class="img-thumbnail" />
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
|
||||
Um den Prozess einer psychologischen Therapie zu messen, wurde eine Applikation im Auftrag des Departements Angewandte Psychologie der ZHAW Zürcher Hochschule für Angewandte Wissenschaften entwickelt, mit der Klienten direkt im Anschluss eines Therapiegesprächs ein kurze Befragung ausfüllen.
|
||||
|
||||
Die Applikation ermöglicht den Beratungspersonen die Einsicht in die Einschätzungen seitens Klienten über die Zeit.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
title: "About"
|
||||
date: 2024-10-27
|
||||
description: "About Markus Graf"
|
||||
---
|
||||
|
||||
# About Me
|
||||
|
||||
This is a placeholder about page. Replace this content with your actual about information from markusgraf.ch.
|
||||
|
||||
Add your biography, experience, and background here.
|
||||
@@ -0,0 +1,70 @@
|
||||
# Design: Content Migration from markusgraf.ch
|
||||
|
||||
## Overview
|
||||
This change migrates all existing content from the live markusgraf.ch website into the Hugo-based project structure. The migration is a one-time content extraction and conversion process.
|
||||
|
||||
## Approach
|
||||
|
||||
### Content Extraction Strategy
|
||||
Since the live site cannot be automatically fetched, we rely on the user to provide:
|
||||
1. HTML source code from the live site (via browser "Save As" or inspector)
|
||||
2. Direct access to image URLs for downloading
|
||||
|
||||
### Content Conversion
|
||||
- **HTML to Markdown**: Extract semantic content from HTML and convert to clean markdown
|
||||
- **Preserve Structure**: Maintain the section hierarchy and flow from the live site
|
||||
- **Hugo Integration**: Use Hugo's front matter and content organization patterns
|
||||
|
||||
### Image Handling
|
||||
Images follow Hugo's static asset conventions:
|
||||
- Store in `static/images/` (or appropriate subdirectory)
|
||||
- Reference in markdown as `/images/filename.ext`
|
||||
- Organize by purpose (e.g., `static/images/projects/`, `static/images/profile/`)
|
||||
|
||||
### Content Organization
|
||||
|
||||
```
|
||||
content/
|
||||
_index.md # Homepage with bio, intro, projects
|
||||
about.md # About/CV page (if exists)
|
||||
|
||||
static/
|
||||
images/
|
||||
profile/ # Profile photos
|
||||
projects/ # Project-related images
|
||||
icons/ # Icons or small graphics (if any)
|
||||
```
|
||||
|
||||
## Trade-offs
|
||||
|
||||
### Why Not Automate Extraction?
|
||||
- WebFetch requires authentication (not available)
|
||||
- Manual provision ensures accuracy and allows user to curate content
|
||||
- One-time migration doesn't justify complex scraping infrastructure
|
||||
|
||||
### Content Structure Decisions
|
||||
- **Single vs Multiple Pages**: If live site is single-page, we keep it as `_index.md`. If multi-page, we create separate content files
|
||||
- **Project Organization**: Depending on number of projects, either:
|
||||
- Inline in homepage (few projects)
|
||||
- Separate section with list page (many projects)
|
||||
|
||||
### Image Optimization
|
||||
- Accept images as-is from live site initially
|
||||
- Future optimization (resizing, format conversion) can be separate change
|
||||
- Prioritize content parity over optimization
|
||||
|
||||
## Dependencies
|
||||
- Requires user to provide HTML source and ensure images are accessible
|
||||
- Depends on existing Hugo site structure from `add-minimal-hugo-site` change
|
||||
|
||||
## Validation Strategy
|
||||
- Visual comparison: Hugo build vs live site side-by-side
|
||||
- Checklist verification: Every section, image, and link accounted for
|
||||
- Browser console: No 404 errors or missing resources
|
||||
- Accessibility: All images have alt text
|
||||
|
||||
## Rollback Plan
|
||||
Since this is additive content migration:
|
||||
- Git revert to restore placeholder content
|
||||
- No breaking changes to existing Hugo structure
|
||||
- Image assets can be removed from static/ directory
|
||||
@@ -0,0 +1,15 @@
|
||||
## Why
|
||||
The Hugo site structure has been initialized but contains only placeholder content. To complete the migration from markusgraf.ch, we need to extract all actual content (text, images, and structure) from the live site and integrate it into the Hugo templates and content files. This ensures the Hugo site displays the exact same information as the current live site.
|
||||
|
||||
## What Changes
|
||||
- Extract and migrate homepage content (bio/intro text) from markusgraf.ch
|
||||
- Migrate all project/portfolio information and descriptions
|
||||
- Download and organize all images from the live site into Hugo's static directory
|
||||
- Update content markdown files (_index.md, etc.) with actual text content
|
||||
- Ensure all internal links and image references work correctly in Hugo
|
||||
- Verify visual and content parity between live site and Hugo build
|
||||
|
||||
## Impact
|
||||
- Affected specs: content-migration (new), image-assets (new)
|
||||
- Affected code: content/_index.md, content/about.md (if exists), static/ directory, potentially layout templates if content structure differs from placeholders
|
||||
- Migration: One-time content extraction from live markusgraf.ch website
|
||||
@@ -0,0 +1,82 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Content Extraction from Live Site
|
||||
The system SHALL capture all text content, structure, and formatting from the live markusgraf.ch website to migrate into the Hugo project.
|
||||
|
||||
#### Scenario: Extract homepage content from live site
|
||||
- **GIVEN** the live markusgraf.ch website HTML source is provided
|
||||
- **WHEN** the HTML is parsed for content extraction
|
||||
- **THEN** all text content, headings, and structure are captured
|
||||
- **AND** the content is organized by logical sections (bio, intro, projects, etc.)
|
||||
|
||||
#### Scenario: Extract projects and portfolio content
|
||||
- **GIVEN** the live site contains project or portfolio information
|
||||
- **WHEN** projects are identified and extracted
|
||||
- **THEN** each project has complete description captured
|
||||
- **AND** project metadata and structure is documented
|
||||
|
||||
### Requirement: Content Conversion to Hugo Format
|
||||
The system SHALL convert extracted HTML content into Hugo-compatible markdown format while preserving formatting and structure.
|
||||
|
||||
#### Scenario: Convert HTML to markdown
|
||||
- **GIVEN** extracted HTML content from live site
|
||||
- **WHEN** content is converted to markdown
|
||||
- **THEN** all text formatting is preserved (bold, italic, links)
|
||||
- **AND** HTML-specific elements are converted to markdown or Hugo shortcodes
|
||||
- **AND** content follows markdown best practices
|
||||
|
||||
#### Scenario: Add Hugo front matter
|
||||
- **GIVEN** converted markdown content
|
||||
- **WHEN** content files are created
|
||||
- **THEN** appropriate YAML front matter is added (title, description, date)
|
||||
- **AND** front matter variables are correctly configured for templates
|
||||
|
||||
### Requirement: Homepage Content Integration
|
||||
The system SHALL integrate migrated homepage content into content/_index.md, replacing placeholder content.
|
||||
|
||||
#### Scenario: Update homepage with actual content
|
||||
- **GIVEN** converted homepage markdown content
|
||||
- **WHEN** content/_index.md is updated
|
||||
- **THEN** all placeholder text is replaced with actual content
|
||||
- **AND** all sections from live site are present
|
||||
- **AND** content hierarchy and flow matches live site structure
|
||||
|
||||
#### Scenario: Image references in content
|
||||
- **GIVEN** homepage content references images
|
||||
- **WHEN** image references are added to markdown
|
||||
- **THEN** images use Hugo static path conventions (e.g., /images/photo.jpg)
|
||||
- **AND** all image markdown syntax is correct
|
||||
|
||||
### Requirement: Content Structure Parity
|
||||
The system SHALL ensure the Hugo site content structure matches the live markusgraf.ch site organization.
|
||||
|
||||
#### Scenario: Section organization matches live site
|
||||
- **GIVEN** live site has distinct sections
|
||||
- **WHEN** content is organized in Hugo
|
||||
- **THEN** all sections are represented
|
||||
- **AND** section order matches live site
|
||||
- **AND** navigation between sections works correctly
|
||||
|
||||
#### Scenario: Multi-page structure if needed
|
||||
- **GIVEN** live site has multiple pages
|
||||
- **WHEN** pages are created in Hugo
|
||||
- **THEN** each page has corresponding content file
|
||||
- **AND** internal links between pages work
|
||||
- **AND** navigation reflects page structure
|
||||
|
||||
### Requirement: Content Verification
|
||||
The system SHALL verify that migrated content achieves parity with the live site.
|
||||
|
||||
#### Scenario: Content completeness check
|
||||
- **GIVEN** Hugo site is built with migrated content
|
||||
- **WHEN** compared with live markusgraf.ch
|
||||
- **THEN** all text content from live site is present
|
||||
- **AND** no content is missing or truncated
|
||||
- **AND** content meaning and context are preserved
|
||||
|
||||
#### Scenario: Visual structure comparison
|
||||
- **GIVEN** Hugo site is rendered
|
||||
- **WHEN** viewed alongside live site
|
||||
- **THEN** content sections appear in same order
|
||||
- **AND** heading hierarchy matches
|
||||
- **AND** overall content flow is equivalent
|
||||
@@ -0,0 +1,86 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Image Asset Discovery
|
||||
The system SHALL identify and catalog all images from the live markusgraf.ch website for migration.
|
||||
|
||||
#### Scenario: Identify all images on live site
|
||||
- **GIVEN** the live markusgraf.ch website HTML source
|
||||
- **WHEN** images are catalogued from the HTML
|
||||
- **THEN** all image URLs are documented
|
||||
- **AND** image purposes (profile, project, icon, etc.) are identified
|
||||
- **AND** image file formats and sizes are noted
|
||||
|
||||
#### Scenario: Create asset inventory
|
||||
- **GIVEN** identified images from live site
|
||||
- **WHEN** asset inventory is created
|
||||
- **THEN** a complete list of images with URLs exists
|
||||
- **AND** each image is categorized by type/purpose
|
||||
- **AND** inventory documents source URLs for downloading
|
||||
|
||||
### Requirement: Image Download and Organization
|
||||
The system SHALL download images from the live site and organize them in Hugo's static directory following logical grouping principles.
|
||||
|
||||
#### Scenario: Download images from live site
|
||||
- **GIVEN** list of image URLs from inventory
|
||||
- **WHEN** images are downloaded
|
||||
- **THEN** all images are successfully retrieved
|
||||
- **AND** image files are verified for integrity
|
||||
- **AND** no corrupted or failed downloads exist
|
||||
|
||||
#### Scenario: Organize images in static directory
|
||||
- **GIVEN** downloaded images
|
||||
- **WHEN** images are placed in Hugo project
|
||||
- **THEN** images are saved to static/images/ or appropriate subdirectories
|
||||
- **AND** directory structure reflects logical grouping (e.g., static/images/projects/, static/images/profile/)
|
||||
- **AND** filenames are consistent and descriptive
|
||||
|
||||
### Requirement: Image Reference Integration
|
||||
The system SHALL update all image references in content files to use Hugo's static path conventions correctly.
|
||||
|
||||
#### Scenario: Update image paths in content
|
||||
- **GIVEN** images are in Hugo static directory
|
||||
- **WHEN** content files reference images
|
||||
- **THEN** image paths use Hugo static conventions (e.g., /images/photo.jpg)
|
||||
- **AND** all image references use correct relative or absolute paths
|
||||
- **AND** markdown image syntax is properly formatted
|
||||
|
||||
#### Scenario: Verify image links resolve
|
||||
- **GIVEN** Hugo site is built
|
||||
- **WHEN** pages with images are rendered
|
||||
- **THEN** all image references resolve correctly
|
||||
- **AND** no broken image links exist
|
||||
- **AND** no 404 errors occur for image resources
|
||||
|
||||
### Requirement: Image Display Verification
|
||||
The system SHALL ensure all migrated images display correctly in the built Hugo site.
|
||||
|
||||
#### Scenario: Images render correctly
|
||||
- **GIVEN** Hugo site is built and served
|
||||
- **WHEN** pages with images are viewed
|
||||
- **THEN** all images display visually
|
||||
- **AND** image aspect ratios are appropriate
|
||||
- **AND** images load from correct static paths
|
||||
- **AND** no missing or placeholder images appear
|
||||
|
||||
#### Scenario: Image dimensions and quality
|
||||
- **GIVEN** images are displayed on site
|
||||
- **WHEN** comparing to live site
|
||||
- **THEN** image sizes are comparable to originals
|
||||
- **AND** image quality is maintained
|
||||
- **AND** no distortion or stretching occurs
|
||||
|
||||
### Requirement: Image Accessibility
|
||||
The system SHALL ensure all images have appropriate accessibility attributes for screen readers and assistive technologies.
|
||||
|
||||
#### Scenario: Alt text for all images
|
||||
- **GIVEN** images in content files
|
||||
- **WHEN** markdown image syntax is used
|
||||
- **THEN** all images include descriptive alt text
|
||||
- **AND** alt text meaningfully describes image content
|
||||
- **AND** decorative images use empty alt text where appropriate
|
||||
|
||||
#### Scenario: Semantic image usage
|
||||
- **GIVEN** images serve specific purposes
|
||||
- **WHEN** images are integrated into content
|
||||
- **THEN** images are used semantically (figures, illustrations, etc.)
|
||||
- **AND** image context is clear from surrounding content
|
||||
@@ -0,0 +1,81 @@
|
||||
# Tasks
|
||||
|
||||
## Content Extraction & Analysis
|
||||
- [x] 1. **Obtain HTML source from live markusgraf.ch**
|
||||
- Used curl to fetch HTML from live site
|
||||
- Parsed and analyzed the structure and sections
|
||||
- Identified all text content blocks (bio, projects, etc.)
|
||||
- **Validation**: HTML source successfully fetched and readable
|
||||
|
||||
- [x] 2. **Catalog all images and assets**
|
||||
- Extracted all image URLs from live site HTML
|
||||
- Documented image filenames, paths, and purposes
|
||||
- Created asset inventory list: 1 profile image, 3 project images
|
||||
- **Validation**: Complete list of images with URLs
|
||||
|
||||
## Image Migration
|
||||
- [x] 3. **Download all images from live site**
|
||||
- Downloaded each catalogued image using curl
|
||||
- Verified image integrity (file sizes confirmed)
|
||||
- **Validation**: All images downloaded successfully
|
||||
|
||||
- [x] 4. **Organize images in static directory**
|
||||
- Created subdirectories: static/images/profile/, static/images/projects/
|
||||
- Placed images with consistent naming
|
||||
- Documented the organization structure
|
||||
- **Validation**: Images accessible via Hugo static path convention
|
||||
|
||||
## Content Migration
|
||||
- [x] 5. **Extract and convert homepage content**
|
||||
- Parsed homepage HTML to identify content sections
|
||||
- Converted HTML to markdown format
|
||||
- Preserved formatting (bold, italic, links, etc.)
|
||||
- **Validation**: Markdown content matches original HTML structure
|
||||
|
||||
- [x] 6. **Update _index.md with actual content**
|
||||
- Replaced placeholder content in content/_index.md
|
||||
- Added proper front matter with title and description
|
||||
- Integrated all homepage sections (header, services, projects)
|
||||
- Updated image references to Hugo paths (/images/...)
|
||||
- **Validation**: Hugo build successful
|
||||
|
||||
- [x] 7. **Migrate projects/portfolio content**
|
||||
- Extracted all 3 project descriptions and details
|
||||
- Integrated projects into homepage sections
|
||||
- Added project images and linked them correctly
|
||||
- **Validation**: All projects visible with complete information
|
||||
|
||||
- [x] 8. **Update or create additional content pages**
|
||||
- Removed placeholder about.md (not present on live site)
|
||||
- Live site is single-page, no additional pages needed
|
||||
- **Validation**: Page structure matches live site
|
||||
|
||||
## Verification & Quality Assurance
|
||||
- [x] 9. **Verify all internal links**
|
||||
- Checked all external links (laufbahndiagnostik.ch)
|
||||
- Verified email and phone links work correctly
|
||||
- **Validation**: All links properly formatted in generated HTML
|
||||
|
||||
- [x] 10. **Verify all image references**
|
||||
- Built Hugo site successfully
|
||||
- Verified all images copied to public/images/
|
||||
- Checked HTML output for correct image paths
|
||||
- **Validation**: All images present in build output
|
||||
|
||||
- [x] 11. **Content parity verification**
|
||||
- Compared Hugo build output with live markusgraf.ch
|
||||
- Verified all text content is present (headings, lists, descriptions)
|
||||
- Confirmed layout and sections match
|
||||
- **Validation**: Content comparison confirms identical content
|
||||
|
||||
- [x] 12. **Accessibility check for images**
|
||||
- Added descriptive alt text to all images
|
||||
- Used semantic image descriptions in German
|
||||
- **Validation**: All `<img>` tags have descriptive alt attributes
|
||||
|
||||
## Documentation
|
||||
- [x] 13. **Document content structure**
|
||||
- Content structure documented in this task file
|
||||
- Image organization: static/images/profile/ and static/images/projects/
|
||||
- Single-page site with all content in _index.md
|
||||
- **Validation**: Task completion documented
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Reference in New Issue
Block a user