From c39ff2449eb2bfefd6b3b87a31f697309ce2560f Mon Sep 17 00:00:00 2001 From: Sean Morley <98704938+seanmorley15@users.noreply.github.com> Date: Wed, 14 Jan 2026 10:22:14 -0500 Subject: [PATCH] [v0.12.0 pre] Planning & Itinerary Overhaul, Recommendation Engine, OIDC Enhancements, and More (#931) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fixes [REQUEST] Email-based auto-linking for OIDC Fixes #921 * Add ClusterMap integration for regions and cities with fit-to-bounds functionality * Update COUNTRY_REGION_JSON_VERSION to v3.0 and modify state ID generation to use ISO2 code * fix: handle email verification required case during signup Updated the signup action to return a specific message when the backend responds with a 401 status, indicating that the signup succeeded but email verification is required. This allows the frontend to display the appropriate message using an i18n key. * feat: add Advanced Configuration documentation with optional environment variables * Fixes #511 * fix: update appVersion to v0.11.0-main-121425 and enhance socialProviders handling in settings page * feat: implement social signup controls and update documentation for new environment variables * fix: update LocationCard props and enhance restore data functionality - Changed the user prop to null in LocationCard component on the dashboard page. - Added isRestoring state to manage loading state during data restoration in settings. - Updated the restore button to show a loading spinner when a restore operation is in progress. * fix: update appVersion to v0.12.0-pre-dev-121625 * feat: implement itinerary planning feature with CollectionItineraryPlanner component and related updates * feat: add overnight lodging indicator and functionality to CollectionItineraryPlanner * feat: add compact display option to LocationCard and enhance lodging filtering in CollectionItineraryPlanner * feat(itinerary): add itinerary management features and link modal - Introduced ItineraryViewSet for managing itinerary items with create and reorder functionalities. - Added itinerary linking capabilities in CollectionModal and CollectionItineraryPlanner components. - Implemented new ItineraryLinkModal for linking existing items to specific dates. - Enhanced the frontend with new modals for creating locations, lodging, transportation, notes, and checklists. - Updated the backend to handle itinerary item creation and reordering with appropriate permissions. - Improved data handling for unscheduled items and their association with the itinerary. - Added new dependencies to the frontend for enhanced functionality. * feat(itinerary): implement auto-generate functionality for itinerary items based on dated records * feat(collection): enhance collection sharing logic and improve data handling on invite acceptance * fix: update appVersion to correct pre-dev version * feat(wikipedia): implement image selection from Wikipedia with enhanced results display * Refactor code structure for improved readability and maintainability * feat: add CollectionRecommendationView component for displaying location recommendations - Implemented CollectionRecommendationView.svelte to handle location recommendations based on user input and selected categories. - Added Recommendation and RecommendationResponse types to types.ts for better type safety and structure. - Updated collections/[id]/+page.svelte to include a new view for recommendations, allowing users to switch between different views seamlessly. * fix: update appVersion and improve button accessibility in collection views * feat: add canModify prop to collection components for user permission handling * feat: add itinerary removal functionality to various cards and update UI components - Implemented `removeFromItinerary` function in `LodgingCard`, `NoteCard`, and `TransportationCard` to allow users to remove items from their itinerary. - Replaced the trash icon with a calendar remove icon in `LocationCard`, `LodgingCard`, `NoteCard`, and `TransportationCard` for better visual representation. - Updated the dropdown menus in `LodgingCard`, `NoteCard`, and `TransportationCard` to include the new remove from itinerary option. - Enhanced `CollectionItineraryPlanner` to pass itinerary items to the respective cards. - Removed `PointSelectionModal.svelte` as it is no longer needed. - Refactored `LocationMedia.svelte` to integrate `ImageManagement` component and clean up unused code related to image handling. * feat: enhance itinerary management with deduplication and initial visit date handling * feat: add FullMap component for enhanced map functionality with clustering support - Introduced FullMap.svelte to handle map rendering, clustering, and marker management. - Updated map page to utilize FullMap component, replacing direct MapLibre usage. - Implemented clustering options and marker properties handling in FullMap. - Added utility functions for resolving theme colors and managing marker states. - Enhanced user experience with hover popups and improved loading states for location details. - Updated app version to v0.12.0-pre-dev-122225. * feat: enhance map interaction for touch devices with custom popup handling * feat: add progress tracker for folder views to display visited and planned locations * feat: add map center and zoom state management with URL synchronization * feat: add status and days until start fields to collections with filtering options * Component folder structure changes * feat: add LodgingMedia and LodgingModal components for managing lodging details and media attachments feat: implement LocationSearchMap component for interactive location searching and mapping functionality * fix: update contentType in ImageManagement component to 'lodging' for correct media handling * feat: enhance lodging management with date validation and update messages * feat: implement lodging detail page with server-side loading and image modal functionality - Added a new server-side load function to fetch lodging details by ID. - Created a new Svelte component for the lodging detail page, including image carousel and map integration. - Implemented a modal for displaying images with navigation. - Enhanced URL handling in the locations page to only read parameters. * feat: add Transportation modal component and related routes - Implemented TransportationModal component for creating and editing transportation entries. - Added server-side loading for transportation details in the new route [id]/+page.server.ts. - Created a new Svelte page for displaying transportation details with image and attachment handling. - Integrated modal for editing transportation in the transportation details page. - Updated lodging routes to include a modal for editing lodging entries. - Removed unused delete action from lodging server-side logic. * feat: add start_code and end_code fields to Transportation model and update related components * feat: implement date validation for itinerary items and add day picker modal for scheduling * Reorder town and county checks in geocoding.py Fix detection if only town exists for a location but county is no city name * Use address keys only if city is found * Make sure reverse geocoding uses correct key for cities (#938) * Reorder town and county checks in geocoding.py Fix detection if only town exists for a location but county is no city name * Use address keys only if city is found * Refactor code structure for improved readability and maintainability * Enhance collection management with modal updates and item handling * feat: integrate CollectionMap component in collections page and update map titles in lodging and transportation pages - Replaced inline map implementation with CollectionMap component in collections/[id]/+page.svelte for better modularity. - Updated the map title in lodging/[id]/+page.svelte to reflect lodging context. - Updated the map title in transportations/[id]/+page.svelte to reflect transportation context. - Added functionality to collect and render GeoJSON data from transportation attachments in transportations/[id]/+page.svelte. * chore: update copyright year to 2026 in various files * feat: enhance backup export functionality with itinerary items and export IDs * fix: improve dropdown close behavior by handling multiple event types * fix: remove unnecessary cache decorator from globespin function * feat: add initial visit date support in ChecklistModal and NoteModal, with UI suggestions for prefilled dates * feat: add details view for checklist and note cards with edit functionality * feat: add travel duration and GPX distance calculation to Transportation model and UI * feat: add primary image support to Collection model, serializers, and UI components * Refactor calendar components and enhance event detail handling - Replaced direct calendar implementation with a reusable CalendarComponent in the calendar route. - Introduced EventDetailsModal for displaying event details, improving modularity and readability. - Added functionality to fetch event details asynchronously when an event is clicked. - Implemented ICS calendar download functionality with loading state management. - Enhanced collections page to support calendar view, integrating event handling and timezone management. - Improved lodging and transportation pages to display local time for stays and trips, including timezone badges. - Cleaned up unused code and comments for better maintainability. * feat: enhance hero image handling in collection view by prioritizing primary image * chore: update .env.example to include account email verification configuration * feat: enhance LodgingCard and TransportationCard components with expandable details and improved layout * feat: add price and currency fields to locations, lodging, and transportation components - Introduced price and price_currency fields in LocationModal, LodgingDetails, LodgingModal, TransportationDetails, and TransportationModal components. - Implemented MoneyInput and CurrencyDropdown components for handling monetary values and currency selection. - Updated data structures and types to accommodate new price and currency fields across various models. - Enhanced cost summary calculations in collections and routes to display total costs by currency. - Added user preference for default currency in settings, affecting new item forms. - Updated UI to display price information in relevant components, ensuring consistent formatting and user experience. * feat: add Development Timeline link to overview and create timeline documentation * feat: enhance map functionality with search and zoom features - Updated availableViews in collection page to include map view based on lodging and transportation locations. - Added search functionality to the map page, allowing users to filter pins by name and category. - Implemented auto-zoom feature to adjust the map view based on filtered search results. - Introduced a search bar with a clear button for better user experience. * feat: enhance ISO code extraction and region matching logic in extractIsoCode function * feat: enhance extractIsoCode function with normalization for locality matching * feat: update extractIsoCode function to include additional ISO3166 levels for improved region matching * feat: enhance extractIsoCode function to handle cases without city information and update CollectionMap to bind user data * feat: add cron job for syncing visited regions and cities, enhance Docker and supervisord configurations * feat: add CollectionItineraryDay model and related functionality for itinerary day metadata management * feat: implement cleanup of out-of-range itinerary items and notify users of potential impacts on itinerary when dates change * Refactor collection page for improved localization and code clarity - Removed unused imports and consolidated cost category labels to be reactive. - Updated cost summary function to accept localized labels. - Enhanced localization for various UI elements, including buttons, headings, and statistics. - Improved user feedback messages for better clarity and consistency. - Ensured all relevant text is translatable using the i18n library. * feat: add collaborator serialization and display in collections - Implemented `_build_profile_pic_url` and `_serialize_collaborator` functions for user profile picture URLs and serialization. - Updated `CollectionSerializer` and `UltraSlimCollectionSerializer` to include collaborators in the serialized output. - Enhanced `CollectionViewSet` to prefetch shared_with users for optimized queries. - Modified frontend components to display collaborators in collection details, including profile pictures and initials. - Added new localization strings for collaborators. - Refactored map and location components to improve usability and functionality. - Updated app version to reflect new changes. * feat: add dynamic lodging icons based on type in CollectionMap component * feat: add CollectionStats component for detailed trip statistics - Implemented CollectionStats.svelte to display various statistics related to the collection, including distances, activities, and locations visited. - Enhanced CollectionMap.svelte to filter activities based on date range using new getActivityDate function. - Updated LocationSearchMap.svelte to handle airport mode for start and end locations. - Modified types.ts to include is_global property in CollectionItineraryItem for trip-wide items. - Updated +page.svelte to integrate the new stats view and manage view state accordingly. * feat: enhance itinerary management by removing old items on date change for notes and checklists; normalize date handling in CollectionMap * feat: add functionality to change day and move items to trip-wide itinerary - Implemented changeDay function in ChecklistCard, LocationCard, LodgingCard, NoteCard, and TransportationCard components to allow users to change the scheduled day of items. - Added a button to move items to the global (trip-wide) itinerary in the aforementioned components, with appropriate dispatch events. - Enhanced CollectionItineraryPlanner to handle moving items to the global itinerary and added UI elements for unscheduled items. - Updated ItineraryDayPickModal to support the deletion of source visits when moving locations. - Added new translations for "Change Day" and "Move Trip Wide" in the English locale. * fix: specify full path for python3 in cron job and add shell and path variables * fix: update appVersion to v0.12.0-pre-dev-010726 * feat: enhance CollectionItineraryPlanner and CollectionStats with dynamic links and transport type normalization * Add Dev Container + WSL install docs and link in install guide (#944) (#951) * feat: enhance internationalization support in CollectionMap and CollectionStats components - Added translation support for various labels and messages in CollectionMap.svelte and CollectionStats.svelte using svelte-i18n. - Updated English and Chinese locale files to include new translation keys for improved user experience. - Simplified the rendering of recommendation views in the collections page. * Refactor itinerary management and UI components - Updated ItineraryViewSet to handle visit updates and creations more efficiently, preserving visit IDs when moving between days. - Enhanced ChecklistCard, LodgingCard, TransportationCard, and NoteCard to include a new "Change Day" option in the actions menu. - Improved user experience in CollectionItineraryPlanner by tracking specific itinerary items being moved and ensuring only the relevant entries are deleted. - Added new location sharing options in LodgingCard and TransportationCard for Apple Maps, Google Maps, and OpenStreetMap. - Updated translations in en.json for consistency and clarity. - Minor UI adjustments for better accessibility and usability across various components. * feat: implement action menus and close event handling in card components * feat: refactor Dockerfile and supervisord configuration to remove cron and add periodic sync script * feat: enhance LocationSearchMap and TransportationDetails components with initialization handling and airport mode logic * feat: add airport and location search mode labels to localization file * feat: enhance periodic sync logging and improve airport mode handling in LocationSearchMap * feat: enhance unscheduled items display with improved card interactions and accessibility * Add dev compose for hot reload and update WSL dev container docs (#958) * feat: enhance localization for itinerary linking and transportation components * Localization: update localization files with new keys and values * fix: improve error messages for Overpass API responses * chore: update dependencies in frontend package.json and pnpm-lock.yaml - Updated @sveltejs/adapter-node from ^5.2.12 to ^5.4.0 - Updated @sveltejs/adapter-vercel from ^5.7.0 to ^6.3.0 - Updated tailwindcss from ^3.4.17 to ^3.4.19 - Updated typescript from ^5.8.3 to ^5.9.3 - Updated vite from ^5.4.19 to ^5.4.21 * chore: update dependencies in pnpm-lock.yaml to latest versions * Refactor code structure for improved readability and maintainability * Refactor code structure for improved readability and maintainability * fix: update package dependencies to resolve compatibility issues * Add "worldtravel" translations to multiple locale files - Added "worldtravel" key with translations for Spanish, French, Hungarian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, Brazilian Portuguese, Russian, Slovak, Swedish, Turkish, Ukrainian, and Chinese. - Updated the navigation section in each locale file to include the new "worldtravel" entry. * Add new screenshots and update email verification message in locale file * feat: Implement data restoration functionality with file import - Added a new action `restoreData` in `+page.server.ts` to handle file uploads for restoring collections. - Enhanced the UI in `+page.svelte` to include an import button and a modal for import progress. - Integrated file input handling to trigger form submission upon file selection. - Removed unused GSAP animations from the login, profile, and signup pages for cleaner code. * feat: Add modals for creating locations and lodging from recommendations, enhance image import functionality * fix: Adjust styles to prevent horizontal scroll and enhance floating action button visibility * feat: Enhance error handling and messaging for Google Maps and OpenStreetMap geocoding functions * fix: Enhance error messaging for Google Maps access forbidden response * feat: Add User-Agent header to Google Maps API requests and refine error messaging for access forbidden response * fix: Update User-Agent header in Google Maps API requests for improved compatibility * fix: Disable proxy settings in Google Maps API request to prevent connection issues * fix: Update Trivy security scan configuration and add .trivyignore for known false positives * fix: Refactor update method to handle is_public cascading for related items * feat: Integrate django-invitations for user invitation management and update settings * feat: Add Tailwind CSS and DaisyUI plugin for styling * feat: Add Tailwind CSS and DaisyUI plugin for styling * feat: Add "Invite a User" guide and update navigation links * docs: Update "Invite a User" guide to include email configuration tip * feat: Update email invitation template for improved styling and clarity * fix: Remove trailing backslash from installation note in Unraid documentation * feat: Add export/import messages and user email verification prompts in multiple languages * Squashed commit of the following: commit a993a15b93ebb7521ae2e5cc31596b98b29fcd6c Author: Alex Date: Mon Jan 12 20:44:47 2026 +0100 Translated using Weblate (German) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/ commit fdc455d9424fbb0f6b72179d9eb1340411700773 Author: Ettore Atalan Date: Sat Jan 10 23:24:23 2026 +0100 Translated using Weblate (German) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/ commit 5942129c55e89dd999a13d4df9c40e6e3189355c Author: Orhun Date: Sun Jan 11 13:05:31 2026 +0100 Translated using Weblate (Turkish) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/tr/ commit 8712e43d8ba4a7e7fe163fb454d6577187f9a375 Author: Henrique Fonseca Veloso Date: Fri Jan 9 22:53:11 2026 +0100 Translated using Weblate (Portuguese (Brazil)) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/pt_BR/ commit 18ee56653470413afe8d71ecd2b5028f6e4cf118 Author: Anonymous Date: Fri Jan 9 22:52:57 2026 +0100 Translated using Weblate (Dutch) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/nl/ commit 57783c544e583c035c8b57b5c10ca320f25f399e Author: Anonymous Date: Fri Jan 9 22:52:14 2026 +0100 Translated using Weblate (Arabic) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ar/ commit fb09edfd85bc85234b1c1ba7dd499f2915093fff Author: Anonymous Date: Fri Jan 9 22:52:26 2026 +0100 Translated using Weblate (Spanish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/es/ commit 554a207d8e454a1f7ae826e2a40d389b94be5512 Author: Anonymous Date: Fri Jan 9 22:52:21 2026 +0100 Translated using Weblate (German) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/ commit b70b9db27fb8607beefeb288185601c8f5eae28d Author: Anonymous Date: Fri Jan 9 22:53:02 2026 +0100 Translated using Weblate (Norwegian Bokmål) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/nb_NO/ commit 3b467caa9007c553e4ae7de97f53b6e462161ea3 Author: Anonymous Date: Fri Jan 9 22:53:07 2026 +0100 Translated using Weblate (Polish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/pl/ commit 30fbbfba3572c8f78ec7c7e1a231e363aca1ef10 Author: Anonymous Date: Fri Jan 9 22:53:17 2026 +0100 Translated using Weblate (Russian) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ru/ commit 8cecb492cfcac0a1f93ee8919f7b41d978d331ee Author: Anonymous Date: Fri Jan 9 22:52:42 2026 +0100 Translated using Weblate (Italian) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/it/ commit f0d3d41029c89bfa83d5891ee7af70241f27b7be Author: Anonymous Date: Fri Jan 9 22:52:38 2026 +0100 Translated using Weblate (Hungarian) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/hu/ commit 102e0f1912d010d38755a1713abb2a7f7564aafb Author: Anonymous Date: Fri Jan 9 22:53:21 2026 +0100 Translated using Weblate (Slovak) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/sk/ commit 428b8f18cf6195a96b55109e0221413d82415a2f Author: Максим Горпиніч Date: Sat Jan 10 08:55:28 2026 +0100 Translated using Weblate (Ukrainian) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/uk/ commit 1a71aaf279ecab26c0c1fede05025732e6dcfa5e Author: Anonymous Date: Fri Jan 9 22:53:27 2026 +0100 Translated using Weblate (Swedish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/sv/ commit 36ec3701f3a1a904e7c42ac4ffbe6a050dc6d1ed Author: Anonymous Date: Fri Jan 9 22:53:43 2026 +0100 Translated using Weblate (Chinese (Simplified Han script)) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/zh_Hans/ commit 65d8b74b340c877cad2028b7142c783a1b568d49 Author: Anonymous Date: Fri Jan 9 22:52:48 2026 +0100 Translated using Weblate (Japanese) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ja/ commit 4d11d1d31022583657e93aee70301a8ffcde1340 Author: Anonymous Date: Fri Jan 9 22:52:52 2026 +0100 Translated using Weblate (Korean) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ko/ commit bd1135bcb965ad73cf493771b15081cc97cf513a Author: Orhun Date: Fri Jan 9 22:53:33 2026 +0100 Translated using Weblate (Turkish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/tr/ commit 2c3d814119f4cf2dabd20933699f5b991f20f3e6 Author: Anonymous Date: Fri Jan 9 22:52:32 2026 +0100 Translated using Weblate (French) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/fr/ * Refactor code structure and remove redundant code blocks for improved readability and maintainability * fix: Correct appVersion to match the latest pre-release version * fix: Add missing vulnerability reference for jaraco.context in .trivyignore --------- Co-authored-by: Lars Lehmann <33843261+larsl-net@users.noreply.github.com> Co-authored-by: Lars Lehmann Co-authored-by: Nick Petrushin --- .env.example | 6 + .github/instructions/daisyui.instructions.md | 1852 ++++++++++ .github/workflows/trivy_security_scans.yml | 10 +- .trivyignore | 13 + .vscode/settings.json | 39 +- LICENSE | 2 +- README.md | 2 +- backend/Dockerfile | 5 +- backend/entrypoint.sh | 6 +- backend/server/.env.example | 4 + backend/server/adventures/admin.py | 37 +- backend/server/adventures/geocoding.py | 375 +- .../commands/sync_visited_regions.py | 259 ++ .../0064_collectionitineraryitem.py | 32 + ...tion_end_code_transportation_start_code.py | 23 + .../0066_collection_primary_image.py | 19 + ...067_lodging_transportation_money_fields.py | 48 + ...8_alter_lodging_price_currency_and_more.py | 24 + ..._location_price_location_price_currency.py | 24 + .../migrations/0070_collectionitineraryday.py | 33 + ...nitineraryitem_unique_together_and_more.py | 31 + backend/server/adventures/models.py | 119 +- backend/server/adventures/permissions.py | 31 +- backend/server/adventures/serializers.py | 393 ++- backend/server/adventures/signals.py | 50 +- backend/server/adventures/urls.py | 2 + .../utils/autogenerate_itinerary.py | 221 ++ backend/server/adventures/utils/itinerary.py | 115 + backend/server/adventures/views/__init__.py | 3 +- .../server/adventures/views/checklist_view.py | 46 +- .../adventures/views/collection_view.py | 604 +++- .../views/generate_description_view.py | 25 +- .../adventures/views/ics_calendar_view.py | 109 +- .../adventures/views/import_export_view.py | 176 +- .../server/adventures/views/itinerary_view.py | 518 +++ .../server/adventures/views/location_view.py | 49 +- backend/server/adventures/views/note_view.py | 46 +- .../adventures/views/recommendations_view.py | 675 +++- .../adventures/views/reverse_geocode_view.py | 117 +- backend/server/main/settings.py | 138 +- backend/server/main/urls.py | 2 + backend/server/main/utils.py | 3 +- backend/server/requirements.txt | 4 +- backend/server/run_periodic_sync.py | 105 + backend/server/static/allauth_ui/tailwindcss | 2 + backend/server/static/favicon.png | Bin 0 -> 88890 bytes backend/server/templates/admin/base.html | 3 + backend/server/templates/base.html | 1 + .../email/email_invite_message.html | 96 + .../templates/invitations/forms/_invite.html | 23 + .../server/templates/mfa/authenticate.html | 39 + backend/server/users/adapters.py | 71 +- backend/server/users/apps.py | 5 + backend/server/users/backends.py | 5 + backend/server/users/form_overrides.py | 15 +- .../0006_customuser_default_currency.py | 18 + backend/server/users/models.py | 26 + backend/server/users/serializers.py | 6 +- backend/server/users/signals.py | 53 + backend/server/users/views.py | 3 +- .../management/commands/download-countries.py | 2 +- backend/server/worldtravel/views.py | 59 +- backend/supervisord.conf | 12 +- brand/screenshots/adventures.png | Bin 1411103 -> 4620303 bytes brand/screenshots/countries.png | Bin 396652 -> 1025813 bytes brand/screenshots/dashboard.png | Bin 902957 -> 4435891 bytes brand/screenshots/itinerary.png | Bin 441671 -> 686926 bytes brand/screenshots/map.png | Bin 273104 -> 1141241 bytes brand/screenshots/regions.png | Bin 230360 -> 754752 bytes brand/screenshots/trip_stats.png | Bin 0 -> 693227 bytes docker-compose.dev.yml | 59 + documentation/.vitepress/config.mts | 22 +- .../docs/changelogs/development_timeline.md | 204 ++ .../configuration/advanced_configuration.md | 9 + .../configuration/social_auth/pocket_id.md | 143 + documentation/docs/guides/invite_user.md | 6 + .../docs/install/dev_container_wsl.md | 180 + documentation/docs/install/getting_started.md | 3 +- documentation/docs/install/unraid.md | 2 +- .../docs/intro/adventurelog_overview.md | 2 + documentation/package.json | 6 +- documentation/pnpm-lock.yaml | 232 +- frontend/package-lock.json | 1575 ++++----- frontend/package.json | 2 + frontend/pnpm-lock.yaml | 1410 ++++---- frontend/src/app.d.ts | 1 + frontend/src/app.html | 3 +- .../lib/components/AttachmentDropdown.svelte | 415 --- .../components/AttachmentManagement.svelte | 360 ++ .../lib/components/CategoryDropdown.svelte | 435 ++- .../src/lib/components/ChecklistCard.svelte | 104 - .../src/lib/components/ChecklistModal.svelte | 29 +- frontend/src/lib/components/ClusterMap.svelte | 192 +- .../lib/components/CollectionAllView.svelte | 551 --- .../src/lib/components/CollectionLink.svelte | 2 +- .../src/lib/components/CollectionModal.svelte | 556 ++- .../CollectionRecommendationView.svelte | 800 +++++ .../lib/components/DateRangeCollapse.svelte | 506 --- .../src/lib/components/ImageDropdown.svelte | 284 -- .../src/lib/components/ImageManagement.svelte | 545 +++ .../src/lib/components/ImmichSelect.svelte | 284 +- .../src/lib/components/LocationCard.svelte | 395 --- .../lib/components/LocationDropdown.svelte | 616 ---- .../src/lib/components/LocationLink.svelte | 220 +- .../src/lib/components/LodgingCard.svelte | 186 - .../src/lib/components/LodgingModal.svelte | 540 --- .../lib/components/MapStyleSelector.svelte | 54 - frontend/src/lib/components/NoteCard.svelte | 135 - frontend/src/lib/components/NoteModal.svelte | 30 +- .../lib/components/PointSelectionModal.svelte | 157 - frontend/src/lib/components/ShareModal.svelte | 2 +- .../lib/components/StravaActivityCard.svelte | 117 +- .../lib/components/TimezoneSelector.svelte | 6 +- frontend/src/lib/components/Toast.svelte | 101 +- .../lib/components/TransportationCard.svelte | 220 -- .../lib/components/TransportationModal.svelte | 803 ----- .../lib/components/calendar/Calendar.svelte | 139 + .../calendar/EventDetailsModal.svelte | 152 + .../{ => cards}/ActivityCard.svelte | 0 .../{ => cards}/AttachmentCard.svelte | 0 .../lib/components/cards/ChecklistCard.svelte | 466 +++ .../components/{ => cards}/CityCard.svelte | 0 .../{ => cards}/CollectionCard.svelte | 226 +- .../components/{ => cards}/CountryCard.svelte | 0 .../lib/components/cards/LocationCard.svelte | 587 ++++ .../lib/components/cards/LodgingCard.svelte | 504 +++ .../src/lib/components/cards/NoteCard.svelte | 373 ++ .../components/{ => cards}/RegionCard.svelte | 0 .../components/{ => cards}/TrailCard.svelte | 0 .../cards/TransportationCard.svelte | 512 +++ .../cards/TransportationRoutePreview.svelte | 183 + .../components/{ => cards}/UserCard.svelte | 0 .../{ => cards}/WandererCard.svelte | 0 .../collections/CollectionAllItems.svelte | 383 ++ .../CollectionItineraryPlanner.svelte | 2497 +++++++++++++ .../collections/CollectionMap.svelte | 1048 ++++++ .../collections/CollectionStats.svelte | 827 +++++ .../collections/ItineraryDayPickModal.svelte | 138 + .../collections/ItineraryLinkModal.svelte | 456 +++ .../locations/LocationDetails.svelte | 537 +-- .../components/locations/LocationMedia.svelte | 691 +--- .../LocationModal.svelte} | 37 +- .../locations/LocationVisits.svelte | 58 +- .../components/lodging/LodgingDetails.svelte | 769 ++++ .../components/lodging/LodgingModal.svelte | 308 ++ .../src/lib/components/map/FullMap.svelte | 381 ++ .../components/map/MapStyleSelector.svelte | 92 + .../components/shared/CurrencyDropdown.svelte | 195 ++ .../shared/LocationSearchMap.svelte | 1087 ++++++ .../lib/components/shared/MediaStep.svelte | 115 + .../lib/components/shared/MoneyInput.svelte | 74 + .../transportation/StravaGpxList.svelte | 138 + .../TransportationDetails.svelte | 947 +++++ .../transportation/TransportationModal.svelte | 303 ++ frontend/src/lib/config.ts | 4 +- frontend/src/lib/index.ts | 7 - frontend/src/lib/money.ts | 83 + frontend/src/lib/types.ts | 102 +- frontend/src/lib/utils/resolveThemeColor.ts | 52 + frontend/src/locales/ar.json | 381 +- frontend/src/locales/de.json | 387 +- frontend/src/locales/en.json | 391 ++- frontend/src/locales/es.json | 381 +- frontend/src/locales/fr.json | 381 +- frontend/src/locales/hu.json | 389 +- frontend/src/locales/it.json | 383 +- frontend/src/locales/ja.json | 381 +- frontend/src/locales/ko.json | 382 +- frontend/src/locales/nl.json | 383 +- frontend/src/locales/no.json | 381 +- frontend/src/locales/pl.json | 383 +- frontend/src/locales/pt-br.json | 383 +- frontend/src/locales/ru.json | 383 +- frontend/src/locales/sk.json | 387 +- frontend/src/locales/sv.json | 381 +- frontend/src/locales/tr.json | 389 +- frontend/src/locales/uk.json | 441 ++- frontend/src/locales/zh.json | 383 +- frontend/src/routes/+layout.svelte | 8 + frontend/src/routes/+page.server.ts | 2 +- frontend/src/routes/calendar/+page.server.ts | 55 +- frontend/src/routes/calendar/+page.svelte | 323 +- .../src/routes/collections/+page.server.ts | 61 +- frontend/src/routes/collections/+page.svelte | 191 +- .../src/routes/collections/[id]/+page.svelte | 3120 ++++++++--------- frontend/src/routes/dashboard/+page.svelte | 7 +- frontend/src/routes/locations/+page.svelte | 22 +- .../src/routes/locations/[id]/+page.svelte | 38 +- .../src/routes/lodging/[id]/+page.server.ts | 30 + frontend/src/routes/lodging/[id]/+page.svelte | 644 ++++ frontend/src/routes/login/+page.server.ts | 23 + frontend/src/routes/login/+page.svelte | 202 +- frontend/src/routes/map/+page.svelte | 829 +++-- .../src/routes/profile/[uuid]/+page.svelte | 8 +- frontend/src/routes/search/+page.svelte | 12 +- frontend/src/routes/settings/+page.server.ts | 11 + frontend/src/routes/settings/+page.svelte | 67 +- frontend/src/routes/signup/+page.server.ts | 8 +- frontend/src/routes/signup/+page.svelte | 10 - .../transportations/[id]/+page.server.ts | 30 + .../routes/transportations/[id]/+page.svelte | 948 +++++ frontend/src/routes/users/+page.svelte | 2 +- frontend/src/routes/worldtravel/+page.svelte | 3 +- .../src/routes/worldtravel/[id]/+page.svelte | 140 +- .../routes/worldtravel/[id]/[id]/+page.svelte | 129 +- install_adventurelog.sh | 2 +- 206 files changed, 33830 insertions(+), 14254 deletions(-) create mode 100644 .github/instructions/daisyui.instructions.md create mode 100644 .trivyignore create mode 100644 backend/server/adventures/management/commands/sync_visited_regions.py create mode 100644 backend/server/adventures/migrations/0064_collectionitineraryitem.py create mode 100644 backend/server/adventures/migrations/0065_transportation_end_code_transportation_start_code.py create mode 100644 backend/server/adventures/migrations/0066_collection_primary_image.py create mode 100644 backend/server/adventures/migrations/0067_lodging_transportation_money_fields.py create mode 100644 backend/server/adventures/migrations/0068_alter_lodging_price_currency_and_more.py create mode 100644 backend/server/adventures/migrations/0069_location_price_location_price_currency.py create mode 100644 backend/server/adventures/migrations/0070_collectionitineraryday.py create mode 100644 backend/server/adventures/migrations/0071_alter_collectionitineraryitem_unique_together_and_more.py create mode 100644 backend/server/adventures/utils/autogenerate_itinerary.py create mode 100644 backend/server/adventures/utils/itinerary.py create mode 100644 backend/server/adventures/views/itinerary_view.py create mode 100644 backend/server/run_periodic_sync.py create mode 100644 backend/server/static/allauth_ui/tailwindcss create mode 100644 backend/server/static/favicon.png create mode 100644 backend/server/templates/admin/base.html create mode 100644 backend/server/templates/invitations/email/email_invite_message.html create mode 100644 backend/server/templates/invitations/forms/_invite.html create mode 100644 backend/server/templates/mfa/authenticate.html create mode 100644 backend/server/users/migrations/0006_customuser_default_currency.py create mode 100644 backend/server/users/signals.py create mode 100644 brand/screenshots/trip_stats.png create mode 100644 docker-compose.dev.yml create mode 100644 documentation/docs/changelogs/development_timeline.md create mode 100644 documentation/docs/configuration/advanced_configuration.md create mode 100644 documentation/docs/configuration/social_auth/pocket_id.md create mode 100644 documentation/docs/guides/invite_user.md create mode 100644 documentation/docs/install/dev_container_wsl.md delete mode 100644 frontend/src/lib/components/AttachmentDropdown.svelte create mode 100644 frontend/src/lib/components/AttachmentManagement.svelte delete mode 100644 frontend/src/lib/components/ChecklistCard.svelte delete mode 100644 frontend/src/lib/components/CollectionAllView.svelte create mode 100644 frontend/src/lib/components/CollectionRecommendationView.svelte delete mode 100644 frontend/src/lib/components/DateRangeCollapse.svelte delete mode 100644 frontend/src/lib/components/ImageDropdown.svelte create mode 100644 frontend/src/lib/components/ImageManagement.svelte delete mode 100644 frontend/src/lib/components/LocationCard.svelte delete mode 100644 frontend/src/lib/components/LocationDropdown.svelte delete mode 100644 frontend/src/lib/components/LodgingCard.svelte delete mode 100644 frontend/src/lib/components/LodgingModal.svelte delete mode 100644 frontend/src/lib/components/MapStyleSelector.svelte delete mode 100644 frontend/src/lib/components/NoteCard.svelte delete mode 100644 frontend/src/lib/components/PointSelectionModal.svelte delete mode 100644 frontend/src/lib/components/TransportationCard.svelte delete mode 100644 frontend/src/lib/components/TransportationModal.svelte create mode 100644 frontend/src/lib/components/calendar/Calendar.svelte create mode 100644 frontend/src/lib/components/calendar/EventDetailsModal.svelte rename frontend/src/lib/components/{ => cards}/ActivityCard.svelte (100%) rename frontend/src/lib/components/{ => cards}/AttachmentCard.svelte (100%) create mode 100644 frontend/src/lib/components/cards/ChecklistCard.svelte rename frontend/src/lib/components/{ => cards}/CityCard.svelte (100%) rename frontend/src/lib/components/{ => cards}/CollectionCard.svelte (53%) rename frontend/src/lib/components/{ => cards}/CountryCard.svelte (100%) create mode 100644 frontend/src/lib/components/cards/LocationCard.svelte create mode 100644 frontend/src/lib/components/cards/LodgingCard.svelte create mode 100644 frontend/src/lib/components/cards/NoteCard.svelte rename frontend/src/lib/components/{ => cards}/RegionCard.svelte (100%) rename frontend/src/lib/components/{ => cards}/TrailCard.svelte (100%) create mode 100644 frontend/src/lib/components/cards/TransportationCard.svelte create mode 100644 frontend/src/lib/components/cards/TransportationRoutePreview.svelte rename frontend/src/lib/components/{ => cards}/UserCard.svelte (100%) rename frontend/src/lib/components/{ => cards}/WandererCard.svelte (100%) create mode 100644 frontend/src/lib/components/collections/CollectionAllItems.svelte create mode 100644 frontend/src/lib/components/collections/CollectionItineraryPlanner.svelte create mode 100644 frontend/src/lib/components/collections/CollectionMap.svelte create mode 100644 frontend/src/lib/components/collections/CollectionStats.svelte create mode 100644 frontend/src/lib/components/collections/ItineraryDayPickModal.svelte create mode 100644 frontend/src/lib/components/collections/ItineraryLinkModal.svelte rename frontend/src/lib/components/{NewLocationModal.svelte => locations/LocationModal.svelte} (88%) create mode 100644 frontend/src/lib/components/lodging/LodgingDetails.svelte create mode 100644 frontend/src/lib/components/lodging/LodgingModal.svelte create mode 100644 frontend/src/lib/components/map/FullMap.svelte create mode 100644 frontend/src/lib/components/map/MapStyleSelector.svelte create mode 100644 frontend/src/lib/components/shared/CurrencyDropdown.svelte create mode 100644 frontend/src/lib/components/shared/LocationSearchMap.svelte create mode 100644 frontend/src/lib/components/shared/MediaStep.svelte create mode 100644 frontend/src/lib/components/shared/MoneyInput.svelte create mode 100644 frontend/src/lib/components/transportation/StravaGpxList.svelte create mode 100644 frontend/src/lib/components/transportation/TransportationDetails.svelte create mode 100644 frontend/src/lib/components/transportation/TransportationModal.svelte create mode 100644 frontend/src/lib/money.ts create mode 100644 frontend/src/lib/utils/resolveThemeColor.ts create mode 100644 frontend/src/routes/lodging/[id]/+page.server.ts create mode 100644 frontend/src/routes/lodging/[id]/+page.svelte create mode 100644 frontend/src/routes/transportations/[id]/+page.server.ts create mode 100644 frontend/src/routes/transportations/[id]/+page.svelte diff --git a/.env.example b/.env.example index fed0981c..f2e3bba4 100644 --- a/.env.example +++ b/.env.example @@ -30,6 +30,12 @@ BACKEND_PORT=8016 DISABLE_REGISTRATION=False # DISABLE_REGISTRATION_MESSAGE=Registration is disabled for this instance of AdventureLog. +# SOCIALACCOUNT_ALLOW_SIGNUP=False # When false, social providers cannot be used to create new user accounts when registration is disabled. + +# FORCE_SOCIALACCOUNT_LOGIN=False # When true, only social login is allowed (no password login) and the login page will show only social providers or redirect directly to the first provider if only one is configured. + +# ACCOUNT_EMAIL_VERIFICATION='none' # 'none', 'optional', 'mandatory' # You can change this as needed for your environment + # Optional: Use email # https://adventurelog.app/docs/configuration/email.html # EMAIL_BACKEND=email diff --git a/.github/instructions/daisyui.instructions.md b/.github/instructions/daisyui.instructions.md new file mode 100644 index 00000000..86dbc152 --- /dev/null +++ b/.github/instructions/daisyui.instructions.md @@ -0,0 +1,1852 @@ +--- +description: daisyUI 5 +alwaysApply: true +applyTo: "**" +downloadedFrom: https://daisyui.com/llms.txt +version: 5.5.x +--- + +# daisyUI 5 +daisyUI 5 is a CSS library for Tailwind CSS 4 +daisyUI 5 provides class names for common UI components + +- [daisyUI 5 docs](http://daisyui.com) +- [Guide: How to use this file in LLMs and code editors](https://daisyui.com/docs/editor/) +- [daisyUI 5 release notes](https://daisyui.com/docs/v5/) +- [daisyUI 4 to 5 upgrade guide](https://daisyui.com/docs/upgrade/) + +## daisyUI 5 install notes +[install guide](https://daisyui.com/docs/install/) +1. daisyUI 5 requires Tailwind CSS 4 +2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency. +3. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file +4. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files: +```html + + +``` +5. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency) +```css +@import "tailwindcss"; +@plugin "daisyui"; +``` + +## daisyUI 5 usage rules +1. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component) +2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn` +3. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly +4. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility +5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes. +6. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes. +7. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred. +8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want +9. suggested - when designing , don't add a custom font unless it's necessary +10. don't add `bg-base-100 text-base-content` to body unless it's necessary +11. For design decisions, use Refactoring UI book best practices + +daisyUI 5 class names are one of the following categories. These type names are only for reference and are not used in the actual code +- `component`: the required component class +- `part`: a child part of a component +- `style`: sets a specific style to component or part +- `behavior`: changes the behavior of component or part +- `color`: sets a specific color to component or part +- `size`: sets a specific size to component or part +- `placement`: sets a specific placement to component or part +- `direction`: sets a specific direction to component or part +- `modifier`: modifies the component or part in a specific way +- `variant`: prefixes for utility classes that conditionally apply styles. syntax is `variant:utility-class` + +## Config +daisyUI 5 config docs: https://daisyui.com/docs/config/ +daisyUI without config: +```css +@plugin "daisyui"; +``` +daisyUI config with `light` theme only: +```css +@plugin "daisyui" { + themes: light --default; +} +``` +daisyUI with all the default configs: +```css +@plugin "daisyui" { + themes: light --default, dark --prefersdark; + root: ":root"; + include: ; + exclude: ; + prefix: ; + logs: true; +} +``` +An example config: +In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode) +All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `` element +root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled +```css +@plugin "daisyui" { + themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk; + root: ":root"; + include: ; + exclude: rootscrollgutter, checkbox; + prefix: daisy-; + logs: false; +} +``` +## daisyUI 5 colors + +### daisyUI color names +- `primary`: Primary brand color, The main color of your brand +- `primary-content`: Foreground content color to use on primary color +- `secondary`: Secondary brand color, The optional, secondary color of your brand +- `secondary-content`: Foreground content color to use on secondary color +- `accent`: Accent brand color, The optional, accent color of your brand +- `accent-content`: Foreground content color to use on accent color +- `neutral`: Neutral dark color, For not-saturated parts of UI +- `neutral-content`: Foreground content color to use on neutral color +- `base-100`:-100 Base surface color of page, used for blank backgrounds +- `base-200`:-200 Base color, darker shade, to create elevations +- `base-300`:-300 Base color, even more darker shade, to create elevations +- `base-content`: Foreground content color to use on base color +- `info`: Info color, For informative/helpful messages +- `info-content`: Foreground content color to use on info color +- `success`: Success color, For success/safe messages +- `success-content`: Foreground content color to use on success color +- `warning`: Warning color, For warning/caution messages +- `warning-content`: Foreground content color to use on warning color +- `error`: Error color, For error/danger/destructive messages +- `error-content`: Foreground content color to use on error color + +### daisyUI color rules +1. daisyUI adds semantic color names to Tailwind CSS colors +2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background +3. daisyUI color names include variables as value so they can change based the theme +4. There's no need to use `dark:` for daisyUI color names +5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme +6. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes +7. If a daisyUI color name (like `primary`) is used, it will change color based on the theme +8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color +9. `*-content` colors should have a good contrast compared to their associated colors +10. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements + +### daisyUI custom theme with custom colors +A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this: +```css +@import "tailwindcss"; +@plugin "daisyui"; +@plugin "daisyui/theme" { + name: "mytheme"; + default: true; /* set as default */ + prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ + color-scheme: light; /* color of browser-provided UI */ + + --color-base-100: oklch(98% 0.02 240); + --color-base-200: oklch(95% 0.03 240); + --color-base-300: oklch(92% 0.04 240); + --color-base-content: oklch(20% 0.05 240); + --color-primary: oklch(55% 0.3 240); + --color-primary-content: oklch(98% 0.01 240); + --color-secondary: oklch(70% 0.25 200); + --color-secondary-content: oklch(98% 0.01 200); + --color-accent: oklch(65% 0.25 160); + --color-accent-content: oklch(98% 0.01 160); + --color-neutral: oklch(50% 0.05 240); + --color-neutral-content: oklch(98% 0.01 240); + --color-info: oklch(70% 0.2 220); + --color-info-content: oklch(98% 0.01 220); + --color-success: oklch(65% 0.25 140); + --color-success-content: oklch(98% 0.01 140); + --color-warning: oklch(80% 0.25 80); + --color-warning-content: oklch(20% 0.05 80); + --color-error: oklch(65% 0.3 30); + --color-error-content: oklch(98% 0.01 30); + + --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */ + --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */ + --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */ + /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */ + + --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. In so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */ + --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. In so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */ + + --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. In so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */ + + --depth: 1; /* only 0 or 1 – Adds a shadow and subtle 3D depth effect to components */ + --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */ +} +``` +#### Rules +- All CSS variables above are required +- Colors can be OKLCH or hex or other formats +- If you're generating a custom theme, do not include the comments from the example above. Just provide the code. + +People can use https://daisyui.com/theme-generator/ visual tool to create their own theme. + +## daisyUI 5 components + +### accordion +Accordion is used for showing and hiding content but only one item can stay open at a time + +[accordion docs](https://daisyui.com/components/accordion/) + +#### Class names +- component: `collapse` +- part: `collapse-title`, `collapse-content` +- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close` + +#### Syntax +```html +
{CONTENT}
+``` +where content is: +```html + +
{title}
+
{CONTENT}
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier class names +- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time +- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set +- Replace {name} with a unique name for the accordion group +- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default + +### alert +Alert informs users about important events + +[alert docs](https://daisyui.com/components/alert/) + +#### Class names +- component: `alert` +- style: `alert-outline`, `alert-dash`, `alert-soft` +- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error` +- direction: `alert-vertical`, `alert-horizontal` + +#### Syntax +```html + +``` + +#### Rules +- {MODIFIER} is optional and can have one of each style/color/direction class names +- Add `sm:alert-horizontal` for responsive layouts + +### avatar +Avatars are used to show a thumbnail + +[avatar docs](https://daisyui.com/components/avatar/) + +#### Class names +- component: `avatar`, `avatar-group` +- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder` + +#### Syntax +```html +
+
+ +
+
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier class names +- Use `avatar-group` for containing multiple avatars +- You can set custom sizes using `w-*` and `h-*` +- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle` + +### badge +Badges are used to inform the user of the status of specific data + +[badge docs](https://daisyui.com/components/badge/) + +#### Class names +- component: `badge` +- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost` +- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` +- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl` + +#### Syntax +```html +Badge +``` + +#### Rules +- {MODIFIER} is optional and can have one of each style/color/size class names +- Can be used inside text or buttons +- To create an empty badge, just remove the text between the span tags + +### breadcrumbs +Breadcrumbs helps users to navigate + +[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/) + +#### Class names +- component: `breadcrumbs` + +#### Syntax +```html +
+ +
+``` + +#### Rules +- breadcrumbs only has one main class name +- Can contain icons inside the links +- If you set `max-width` or the list gets larger than the container it will scroll + +### button +Buttons allow the user to take actions + +[button docs](https://daisyui.com/components/button/) + +#### Class names +- component: `btn` +- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` +- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link` +- behavior: `btn-active`, `btn-disabled` +- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` +- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle` + +#### Syntax +```html + +``` +#### Rules +- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names +- btn can be used on any html tags such as ` +``` + +#### Rules +- {MODIFIER} is optional and can have one of the size class names +- To make a button active, add `dock-active` class to the button +- add `` is required for responsivness of the dock in iOS + +### drawer +Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page + +[drawer docs](https://daisyui.com/components/drawer/) + +#### Class names +- component: `drawer` +- part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay` +- placement: `drawer-end` +- modifier: `drawer-open` +- variant: `is-drawer-open:`, `is-drawer-close:` + +#### Syntax +```html +
+ +
{CONTENT}
+
{SIDEBAR}
+
+``` +where {CONTENT} can be navbar, site content, footer, etc +and {SIDEBAR} can be a menu like: +```html + +``` +To open/close the drawer, use a label that points to the `drawer-toggle` input: +```html + +``` +Example: This sidebar is always visible on large screen, can be toggled on small screen: +```html +
+ +
+ + +
+
+ +
    + +
    • +
    • +
+
+
+``` + +Example: This sidebar is always visible. When it's close we only see iocns, when it's open we see icons and text +```html +
+ +
+ +
+
+ +
+ +
    + +
  • + +
    • + +
  • + +
    • +
+ +
+ +
+
+
+
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier/placement class names +- `id` is required for the `drawer-toggle` input. change `my-drawer` to a unique id according to your needs +- `lg:drawer-open` can be used to make sidebar visible on larger screens +- `drawer-toggle` is a hidden checkbox. Use label with "for" attribute to toggle state +- if you want to open the drawer when a button is clicked, use `` where `my-drawer` is the id of the `drawer-toggle` input +- when using drawer, every page content must be inside `drawer-content` element. for example navbar, footer, etc should not be outside of `drawer` + +### dropdown +Dropdown can open a menu or any other element when the button is clicked + +[dropdown docs](https://daisyui.com/components/dropdown/) + +#### Class names +- component: `dropdown` +- part: `dropdown-content` +- placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` +- modifier: `dropdown-hover`, `dropdown-open`, `dropdown-close` + +#### Syntax +Using details and summary +```html +
+ Button +
    {CONTENT}
+
+``` + +Using popover API +```html + +
    {CONTENT}
+``` + +Using CSS focus +```html +
+
Button
+
    {CONTENT}
+
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier/placement class names +- replace `{id}` and `{anchor}` with a unique name +- For CSS focus dropdowns, use `tabindex="0"` and `role="button"` on the button +- The content can be any HTML element (not just `