Skip to content

[WIP] Article revision feature #1299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

ckhackshaw
Copy link
Member

@ckhackshaw ckhackshaw commented Feb 10, 2025

@crutchcorn

This is a very basic WIP of the direction I am looking at with this feature.

As you can see, I am looking to make use of the Select component already in use in the project. Reason being, it has all the functionality that I need so make no sense reinventing the wheel.

I will just need to update the design, so I am thinking, an option to override the default styles but obviously keep default styles too.

  1. What do you think?

I have one issue right now, the dropdown isn't working. I will investigate but feel free to lmk if there's anything that you see that sticks out to you that I haven't done/forgot which is causing/contributing to that issue. I haven't added any state or state setters as yet but I don't think that should affect the functionality.

Copy link

vercel bot commented Feb 10, 2025

@ckhackshaw is attempting to deploy a commit to the OceanBit Team on Vercel.

A member of the Team first needs to authorize it.

@ckhackshaw ckhackshaw marked this pull request as draft February 10, 2025 04:27
@ckhackshaw
Copy link
Member Author

Fixes #1271

Copy link
Member

@crutchcorn crutchcorn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot use the existing Select component, as it uses Preact and some other heavy libraries that we do not want in our blog post pages (too large of a bundle size).

Instead, we should use the new Popover API:

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

To build out a different select component without Preact.

You can find a similar demo here: https://mdn.github.io/dom-examples/popover-api/nested-popovers/ (View source) to see how it works

Copy link

vercel bot commented Feb 13, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
playfulprogramming ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 13, 2025 5:31am

@fennifith
Copy link
Member

Summarizing some details from our discussion :)

Select popup component / behavior:

  • Using Preact on the post pages is perfect, but the existing Select component still shouldn't be used as it relies on react-aria (which is a much bigger dependency)
  • Using the popover="auto" mode should enable most of the popup behavior without JS (onClick isn't needed!)
  • The popover positioning should be handled with position: relative; on the parent container, and position: absolute; on the popup itself.
    • This way top: and left: properties are treated as an offset from the parent, and the element scrolls with the page without needing a scroll listener.

Getting the list of post versions:

  • version: string and upToDateSlug: string can be added as properties to the RawPostInfo interface
  • These can be accessed from the posts map in data.ts
  • To get a list of versions from a post, I'd add a getPostVersionsBySlug(slug: string): PostInfo[] function to api.ts
    • This can scan through the posts map for any entries with a matching upToDateSlug and sort those entries by date

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy