Single page app for the calendar #860
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
contains a calendar list, and an expanded menu; placeholder for a single events. has very few styles; no aria setup
move the node dev endpoints from facade out into config.js ( dont need this yet, but will so that sub-urls of "slim" can all be served by the same single page. )
move menu location to the toolbar change header into an image ( placeholder as last year's pedalp ) add / read query parameter for current tool and open menu move the menu component into its own file rename menus to menu rename appstyles to slim.css
and simplify the date range request
and move site info to a site config
- change the top banner depending on the start day - implement forward/back navigation; don't add "end date" to the url ( but accept it if provided ); make daysToFetch 7 by default; limit to a max of ten - fix some small issues with jump to date ( no way to jump to "today", invalid url generation when nothing selected, auto-close on selection ) - added a very silly loading spinner
paths needed to be absolute; needed to include the new "events" endpoint for the new single page app.
the event list puts its start date into the individual event query params so returning can reload the right events; the individual events put their id so the list can scroll back to the right event. seems to work!
including splitting out the topbar, nav, into separate component files
- ensure calList shows exactly one week of data; shift by that amount of time forward/back; show days with no events ( by building an array of empty days ) - removes enddate from query parameters; changes startdate to 'start' to simplify/show there's been a change. - removes the siteConfig daysToFetch: it makes more sense with this setup ( and the empty days, etc. ) to have it hardcoded to a week. - renable cachin in dataPool ( had turned it off for debugging ) - move delSpan example to its own file; move other extraneous comments to notes
- improve shortcuts allowing urls to use links ( for the preview capability in the browser ) - add document title to pages - improve? history a bit for naving weeks ( push instead of replace )
add remaining contact info to single page add "all events" to the left side of the toolbar use the router rather than "at" to determine last event to scroll to
|
sweet! this seems to work: |
try ignoring app and tools workspaces on netlify
not sure which directory hugo is outputting files to; vite didn't seem to be able to find them. try restoring the publish location which i thought we didn't need.
- <Meta> tag adds to the document head so open graph tags can be bound - event details return link now use vue router instead of ?start=... and it looks much nicer - update todo doc
the layout of the page is the same each time with the center swappable; so make the router just that center part. that should simplify search and favorites handling
+ add comments
also: - change "cancelled: to use styles as much as possible instead of props - add "EventHeader" and "DateDivider" ... mainly to reuse styles across event summary and details pages; ( moves longDate out of helpers ) - move (most) placeholder styles into their appropriate .vue file - only change to "loading" when changing view
- adds disclaimer and promo to every page
- adds an <ExternalLink> component for opening in new window
- changes tags from array to object
- gives <Term> an optional "text" property, which makes it easier to use; dont need the array of terms in details anymore; which allows it to separate into groups for "overview" and "body" ( future: different styling
- fixes bug where location would generate link for non-http like text
- fixes bug where late at night diffing days for grouping would fail; not 100% sure why, some slight difference in subtraction. manually asking for .startOf('day') helps.
express proxy needed a slug parameter ( marked optional )
( ex. for a missing event )
- add the subscribe info to the menu section - edit the menu to remove the calendar part ( since we're already on those pages ) - change the menu structure to key-value pairs from an array - fix some opening / closing bugs ( due to refactor of the page chrome ; router as subview )
and update calvue doc with sizes now that the double menu image fetch is fixed.
|
this will expose a new set of urls at |
ionous
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This provides a new frontend for the calendar at the
/eventsurl.The rest of the site is left as is, though there were some changes to support this ( below )
The overall layout is based on the sketches from the biking-and-bits-jul-22Ideas that came out of the biking and bits ride 2022
issues. ( esp. https://skybot.app/cdn/IMG_3A80BD487018-1.jpeg and https://skybot.app/cdn/taytay.png ) -- it's meant to be mobile focused, while still being desktop friendly.
Basically, there's one page which shows a week's worth of events ( starting with "today" ). The image on the top bar changes based on the starting date ( normally shows "shift" but changes to "pedalpalooza" during festival dates --
handled by extracting start/end dates from the pedalp.md pages(!) ) And, as a nicety, there's auto-generated dividers inserted at the start/end of each pedalp festival.
Clicking on an event link, shifts to a subpage, and the top image changes to the user's image ( or a default )
"Jump To Date" and the "Menu" work; and there's placeholder buttons for "search" and for "favorites". ( Part of the motivation for this all was to have a good place for "Search" to appear. )
Right now, it has only minimal css styling ( only layout support, no colors or fonts, or anything like that. ) There's still a bit to go, and wanted to start getting feedback before doing more. ( The CalVue doc has a list of todos. )
Changes to main code
1 . swaps hugo build for
npm run deploy( which builds hugo and the vue spa )2. adds the /events/ path to the netlify redirects