Skip to content

Polar website upgrade#602

Draft
dopenguin wants to merge 37 commits intonextfrom
polar_website_upgrade
Draft

Polar website upgrade#602
dopenguin wants to merge 37 commits intonextfrom
polar_website_upgrade

Conversation

@dopenguin
Copy link
Member

Summary

Summarization of the changes in a short and concise sentence.

Instructions for local reproduction and review

Relevant tickets, issues, et cetera

@dopenguin dopenguin added this to the POLAR@3 milestone Mar 17, 2026
@dopenguin dopenguin self-assigned this Mar 17, 2026
@dopenguin dopenguin added documentation Improvements or additions to documentation refactor Refactoring of previous code labels Mar 17, 2026
Softwarecules and others added 26 commits March 17, 2026 20:13
Implements a new Vue.js application for the POLAR website's landing page.

This includes a full structure with dedicated sections for hero, features, roadmap, UX, developer experience, calls to action, and video content. Global styling is established using the KERN design system and custom theme variables.
Implements a new visual identity with a custom SVG background, updated brand colors, and new typography. Overhauls the header with a distinctive logo, centralized pill navigation, and a prominent GitHub call-to-action. Redesigns the hero section for a modern and engaging first impression, featuring an updated map preview and refined calls-to-action. Simplifies the Features section layout and enhances content descriptions within the UX and Video sections for clarity. Integrates `kern-extra-icons` and updates TypeScript configuration to support dynamic icon management. This comprehensive update aims to provide a more cohesive and visually appealing experience for visitors.
Introduces a new `lp-pill` component with associated color tokens, replacing the `kern-badge` components across various sections for a unified design.

Completely redesigns the Features section, adding a new visual background and updating its structure.

Applies minor styling improvements to the Hero section's title and subtitle for enhanced readability and visual depth.
Introduces the main `App.vue` component, defining global styles and layout.
Extracts inline SVGs for backgrounds and icons into dedicated asset files.
Updates components like `TheHeader`, `FeaturesSection`, `DevExSection`, and `UxSection` to import and utilize these SVG assets.
Adds the new `UsedBySection` to showcase integrations.
Refines component layouts and styles for a cleaner, more responsive user experience.
Establishes KERN design system integration and custom color tokens for consistent theming.
Integrates the UsedBySection into the main application layout and applies consistent formatting across all components.

Introduces ESLint overrides for safe v-html usage with build-time SVG imports. Normalizes CSS hex color tokens and fixes script tag string escaping within the developer experience code snippets to improve reliability.
Replaces the basic timeline in the Roadmap section with a sophisticated phased design, incorporating milestones, status-specific accents, and a responsive alternating grid.

Updates the UsedBy section to use a light background and ensures the logo SVG scales consistently across the full width of the section by removing the container constraints.
Splits the section into a dual-band layout with distinct header and body backgrounds.

Enables per-item icons within roadmap cards and introduces a custom CSS-based progress indicator for active milestones. Adjusts component shadows and borders to improve visual depth and consistency.
Lists dynamically used icon names in a comment for vite-plugin-kern-extra-icons to ensure they are correctly identified during static analysis. Also updates the accent icon for the Q4 2025 roadmap phase.
Switches the section to a dark background and removes fixed padding. Programmatically adjusts the logo SVG attributes and CSS properties to ensure the asset scales fluidly across different screen sizes.
Moves global styles from App.vue into scoped components to improve encapsulation. Enhances the CTA section with a background SVG and updated icons, and switches the Video section to a dark theme for better visual distinction.
Reflects the transition to the unified @polar/polar package across the install, quickstart, and advanced code snippets.

Also refines the code block UI by implementing a fixed-height layout with internal scrolling, updating syntax highlighting colors for better contrast, and redesigning the tab states.
Refines the hero section by replacing the background asset and implementing dynamic SVG attribute patching to ensure it fluidly covers the container.

Updates the DevEx section snippets to reflect the latest `createMap` and `subscribe` APIs while improving syntax highlighting logic. Also enhances header responsiveness on small screens by adjusting the navigation grid and creating a more compact GitHub link.
background-size: cover or background-size: 100% auto; for main differences
Implements an interactive map in the hero section using the `@polar/polar` library to showcase its features directly on the landing page. The demo integrates several plugins, including address search, pins, and a custom coordinate display.

Additionally, updates the TypeScript configuration to resolve the package and its plugins from the local source directories, ensuring the website reflects the latest library changes.
Refines the description to emphasize the benefits of POLAR for mapping applications and adjusts the card background color to a light gray for improved visual distinction.
Refines the roadmap UI by implementing pill-shaped phase labels, gradient connectors, and improved card layouts. It also transitions hardcoded hex values to a centralized set of CSS variables and adds new items to the Q1 2025 roadmap.
…data files

Refines the component architecture by breaking down the RoadmapSection into smaller sub-components and moving static content for the roadmap and developer experience sections into dedicated TypeScript files. Additionally, replaces remaining inline styles with CSS classes across the CTA, Video, and Roadmap sections to improve maintainability and consistency.
…ed to the store raw

Also, add proper cleanup example to snowbox.
Also, add information on what to do on teardown.
Transitions the interactive hero map to the @polar/polar/client entry point for a more concise configuration. This update switches to a remote service registry, implements mask layers for the Hamburg city border, and adds logic for selectable report markers. Additionally, it simplifies the hero title and subtitle font sizes.
Replaces the 2023 FOSSGIS presentation with the more recent 2024 talk, updating the embedded video link and associated accessibility labels.
Replaces the hero background and introduces layered SVG assets, including a polar bear and star, using CSS masking to enhance the landing page's visual depth.
…ader

Removes the redundant wrapper around the hero map to streamline its layout and deletes the "Playground" link from the header navigation.
Transitions from raw SVG string imports and v-html injection to standard img tags across landing page components. This improves security and simplifies component logic by removing the need for manual regex manipulation of SVG strings for attributes like opacity and width. Also introduces a dedicated background asset for the CTA section.
@dopenguin dopenguin force-pushed the polar_website_upgrade branch from 56da65b to f6da8ae Compare March 17, 2026 19:13
@github-actions
Copy link

github-actions bot commented Mar 17, 2026

PR Preview Action v1.8.0

QR code for preview link

🚀 View preview at
https://Dataport.github.io/polar/pr-preview/pr-602/

Built to branch gh-pages at 2026-03-23 05:52 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

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

Labels

documentation Improvements or additions to documentation refactor Refactoring of previous code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants