kale-stew / climb-log Goto Github PK

• Research libraries (Shopify? Paypal checkout? We don't want to handle CCs directly so a library would be key)
• Inventory managed by a new Notion table
  • no. of stock
  • $cost
  • item images
• Implement payment system

https://developers.notion.com/reference/pagination

resoc looks like a good option

• shared Google has access to GA dash for this website
• we should optimize it for SPA, though
  • https://www.bounteous.com/insights/2021/04/06/tracking-single-page-applications-google-analytics-4/

• Create an ImageGallery component that utilizes css-grid to display cards imperfectly aligned
  • will need to follow #39
• Create a FeaturedCard component that displays the "Read more ͢ " Link, decide whether to preview text
• Add a getFiveMostRecentEntries method that fetches the five most recently dated climbs and blogs
  • returns featuredPosts: [{ title, previewText?, href, category }, ...,]
• Add support for a 'climb' category (not trip-report, different)

It would be nice to have a text search for the climb log

• More of a personal summary
• Mention interests, family
• Social links at the bottom

Optional

• Include collage of recent photos
• Link to kylieis.online/now, kylieastewart.tech/blog

• Create a standard 404 ("page not found") that navigates back home

List the gear that I own (maybe pull from my gear log in Notion?)

Gear sub-sections:

• Hiking
• Climbing
• Camping
• Car Camping/4x4
  To-do:
• Create Page and Layout for the Gear
• Add fetchAllGear function to API code

Each climb-log popover should feature a compressed header img

To look up:

• Can we pull this from the Notion db entry? Would a header img url surface from the API or should we try to add it as an attached file in a new property?
• Can we serve a compressed version but have the hi-res available for future #36?)

• Add a pop-up disclaiming cookie usage
• Add a Footer with 'explore', 'connect', and 'referral' sub-sections
• Add a copyright notice
• Add new logo & feature it in the Footer

• Table formatting of State
• Table formatting of Range
• Nav header
• 'Back to Home' button
• Spice up the spinner
• Category buttons stay highlighted on selection

The climb-log takes a while to load, it would be nice to have a loading state that could display while getStaticProps or similar data functions process

Currently, we use grey-matter and remark to parse the blog post markdown content. Moving to next-mdx-remote will allow us to incorporate the custom components we need:

• img
  • needs to map to the component offered by next/image (let's try to leverage some of the optimization tools)
  • new url should be generated for each to be displayed independently (similar to static path generation for blog posts)
  • those urls should be accessible from a getStaticPaths call on the /all route

Filter by state please :(

When a user clicks on a category tag from the expanded blog post view, that should link them back to the /blog view of just posts carrying that category.

• Images should automatically resize below iPad threshold
• Consider a mobile NavBar

See TODOs in the source

Includes

• #26
• #30
• #17

Maybe introduce a ResponsiveImage component (same as used on the About page)?

Update: Closed because the mobile nav improvements introduced by #65 are sufficient for me for now

Look into how nextjs handles content subsets- I should be able to have a blog subcategory and a works subcategory, both able to be fetched as props on a given page

Every blog post should have

• dynamic route (use getStaticPaths to pull it from the md file name)
• header
• description
• date
• single category

https://nextjs.org/learn/basics/dynamic-routes

• Should take in props from the ref when a table row is clicked
• Determine which library is most performant for a small request
  • https://github.com/alexkatz/react-tiny-popover#demo
• There is a branch started for this at task/climb-log-popover

Some of the page views in google analytics are possibly making a new entry for a page view. EX: Kylie Stewart | Hiking Blog and kylies.photos | Hiking Blog may be for the same page.

• Fetch a random image url on page load
• Different selection of images for mobile

Dependent on #4

• Blog
  • Gear (links to a filtered view of all blog posts)
  • Thoughts (^)
  • Trip Reports (^)
  • Climb Log
    • TBD if combined with Trip Reports view or is separate entirely
  • Work
  • About

Use plaiceholder to generate a base64 image using the remote url to then pass into next/image

• /blog/<blog-post-title>
• /climb-log
• /work
• /about

⭐️ This should solve our two primary issues right now

• Should output to new domain: kylies.photos
• Should be automated to deploy on a push-basis
• ⭐️ Should accept nextjs output files (prepended with the _)
• ⭐️ Should have no problem with API secrets

Solved using vercel pointed to a custom domain ✓

• On the route /all (so kylies.photos/all)
• Aggregate all custom img components to appear here with a link to where it original appears
  • has to follow the mdx rewrite so custom components can be supplied
• Include header images from the climb-log popovers

• Allow user to scroll to next post or last post (sorted by date) at the bottom of the current blog post
• If no last post, offer to take user back home

It would be nice for it to stay highlighted when you select a category on the blog page. Maybe an "all" button?

• if the tr-slug matches an existing generated slug, then there is a related trip report in the blog
  • ✓ tr-slug is now a rich_text data type in the climb-log db
• if there is a trip report in the blog, put an <a> tag that links to it around the title td row
  • '${pageData.slug}.md'