pinky-pig / what-holidays

地区节日查询

What Holidays Online

Introduction

Visualizes official holiday data for various regions on a map(Data for reference only).

Points

• Flags Data: https://github.com/lipis/flag-icons
• Holiday Data: https://github.com/commenthol/date-holidays
• Geo Data: https://developers.google.com/public-data/docs/canonical/countries_csv?hl=zh-cn
• Styling inspiration: http://species-in-pieces.com/
• Technology Stack:
• • Framework: Vue3
• • Maps: Mapbox
• • Date Management: Dayjs
• • Hooks: VueUse
• • Layout: Splitpanes
• • Animation Effects: @vueuse/motion
• • CSS Library: UnoCSS
• • Icon Library: Iconify
• • Global State Management: Pinia , with persistence via pinia-plugin-persistedstate

Development

1. How to bind custom DOM to a map's JavaScript while supporting two-way binding? There are many ways to create custom DOM for maps, such as using DOM strings or web components (native | Lit | Vue customElement). However, ensuring two-way binding after mounting the component to the map can be challenging. One straightforward approach is to use Vue.createApp.

2. One minor drawback when persisting Pinia state using pinia-plugin-persistedstate is that, when using the setup syntax, the state must be defined as reactive for persistence to work. When using the setup syntax with Pinia, defining variables as reactive can lead to increased memory consumption and performance overhead for large data sets, such as map instances and marker instances.