Working towards 2.6 release

This week, there's a lot of things happening in terms of planning for 2.6 release. React Native is added to the repo, Supabase SSO is being implemented, there are also tons of documentation and research going on.

I opened 1 major PR this week and went through a few PRs by other contributors.

Understanding the unfinished work

I picked up the work from Irene trying to add mobile view to telescope. Basically, she tried to make the title of the blog post to be an accordion, whenever it is clicked, it expands and display more information.

The feature basically works but it has a few issues. It's hard tell apart which one is the header and which one is the blog post, the accordion pretty much blended in with the blog post. The GitHub information takes up too much space as it's displaying as flex column. Lastly, there's no hint that the accordion is open or closed.

Completing the mobile view feature

You can go to telescope staging to test the feature out

Basically I added a border between header and blog post, added icon button to hint user, and when clicked it expands or collapses, changed the flex direction to row and made it auto close when user scrolls past the post.

Most of the work was editing css and material ui, it can be understood easily if you look at the PR, though making it auto closes was a bit challenging.

 useEffect(() => {
    const onScroll = () => {
      // get the distance between the bottom of the blog post and
      // the top of the web page
      const bottom = sectionEl?.current?.getBoundingClientRect().bottom;
      if (bottom && bottom < 1) {
        // if bottom reaches top => close header and remove event listener
        setExpandHeader(false);
        window.removeEventListener('scroll', onScroll);
      }
    };
    // only if header is open, we attach the onScroll function to scroll event
    if (expandHeader) {
      window.addEventListener('scroll', onScroll);
}, [expandHeader])

Whenever a header is expanded, I attach an event listener onScroll() to the scroll event. const bottom = sectionEl?.current?.getBoundingClientRect().bottom; is to get the distance between the bottom of the blog post and the top of the page, if it is < 1 (I found 1 works better than 0) => close the header and remove the listener. Out of a few ways I came up with, this one saves a lot of performance.

---

I have a few issues to work on before 2.6, not all of them are doable but at least I have teammates to talk to and share the work. Will try to better to review PRs too, I'm not familiar with the project enough to spot mistakes.