Skip to content

Refactor website with Vue 3, Vite and Vue Router - #1

Open
shiftz300 wants to merge 1 commit into
empty610:mainfrom
shiftz300:main
Open

shiftz300 wants to merge 1 commit into
empty610:mainfrom
shiftz300:main

Conversation

@shiftz300

Copy link
Copy Markdown

Summary

Migrate the existing static website to Vue 3, Vite, and Vue Router, using Bun for dependency management and development commands.

The website remains fully static. Each page is prerendered during the build, preserving direct access to existing URLs while enabling client-side navigation. The project is named website, with attribution retained as empty610.

Page structure and routing

  • Use one source index.html and an App.vue containing RouterView.
  • Organize page content into four main views:
    • Home.vue
    • Venus.vue
    • Mars.vue
    • Terminal.vue
  • Keep page sections within their respective views.
  • Extract only reusable controls: BackIcon, MusicButton, and MusicPlayer.
  • Preserve the existing routes:
    • /
    • /venus/
    • /mars/
    • /delocalized%20configuration%20project/
  • Support the corresponding /index.html aliases.
  • Handle page navigation, browser history, and section anchors through Vue Router.

Assets and interactions

  • Move images, fonts, audio, and styles into src/assets/.
  • Let Vite generate hashed URLs for imported assets.
  • Add an asset resolver for dynamically selected images, including rover imagery.
  • Keep vendor libraries, embedded model data, and hosting configuration in public/.
  • Preserve existing media files without re-encoding them.
  • Organize astronomy calculations and interaction scripts by page.
  • Scope page styles by data-page to prevent conflicts after navigation.

Add page lifecycle cleanup for event listeners, timers, animation frames, observers, audio, and WebGL resources. Async initialization checks whether its page is still active before continuing.

Retain the existing planet models, moon views, orbit demonstrations, rover exploration, terminal interactions, and music controls. The Mars profile remains a narrow expandable card aligned with the model controls; expanding it preserves the model's position and dimensions.

Static rendering and SEO

  • Prerender all four routes using the same Vue views and router used in the browser.
  • Include page content, styles, and resolved asset URLs in each generated HTML document.
  • Hydrate the prerendered content when JavaScript loads.
  • Display homepage content when JavaScript is disabled.
  • Centralize site and page metadata in src/seo.js.
  • Add unique page titles and descriptions.
  • Add canonical URLs, Open Graph and Twitter sharing metadata.
  • Add JSON-LD for the author, website, pages, and breadcrumbs.
  • Generate robots.txt and sitemap.xml during the build.
  • Update metadata during client-side navigation.

The production domain remains https://empty610.com/. Page aliases and fragments share the canonical URL of their main page.

Development and deployment

Add a Bun lockfile and these commands:

Command Purpose
bun run dev Start local development
bun run build Build assets and prerender pages
bun run check Validate the generated site
bun run preview Preview the production build

Publish the complete dist/ directory at the domain root. Known routes have their own static index.html, supporting direct visits and refreshes without a backend.

Preserve the production CSP and hosting headers. Local development removes the CSP meta tag to support Vite updates. Vue and JavaScript changes reload the page; CSS updates in place.

Add a concise English developer README covering setup, directory structure, routes, page extension, SEO configuration, and deployment.

Validation

  • bun run build passed.
  • bun run check passed:
    • 195 local resource and link references verified.
    • All four pages passed SEO, sitemap, and CSP checks.
    • Checked duplicate HTML IDs, prerendered content, and author attribution.
    • Checked unique titles and descriptions, canonical URLs, sharing images, and JSON-LD.
  • git diff --cached --check passed before committing.
  • Manually checked client-side navigation, browser back/forward, planet rendering, rover images, and resource cleanup after leaving pages.
  • Confirmed that opening and closing the Mars profile does not change the model's bounds.

Consolidate page views and shared controls, preserve astronomy interactions, add static prerendering and SEO metadata, and document the Bun development workflow.
Copilot AI balanced review requested due to automatic review settings October 1, 2026 20:35

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants