landing — interactive editor #2113
Conversation
hasparus
force-pushed
the
landing--interactive-editor-on-landing
branch
from
ae81d1c to
7fd6a9a
Compare
hasparus
force-pushed
the
landing--interactive-editor-on-landing
branch
from
264a944 to
f6d4810
Compare
hasparus
force-pushed
the
landing--interactive-editor-on-landing
branch
from
f6d4810 to
8d8054d
Compare
hasparus
force-pushed
the
landing--interactive-editor-on-landing
branch
from
16bcd6c to
755ba27
Compare
|
Found an issue with how the InteractiveEditor sits on top of the static bits. Screen.Recording.2025-10-24.at.2.12.45.PM.mov |
|
Converted to draft to fix the mobile view bug Jon found in #2113 (comment). |
| {inView && ( | ||
| <ol | ||
| // this is rendered *on top* of the static version to avoid layout shift | ||
| className="max-lg:before pointer-events-none absolute inset-0 list-none gap-px [counter-set:list-item_1] *:pointer-events-auto max-lg:before:absolute max-lg:before:inset-x-0 max-lg:before:-top-2 max-lg:before:bottom-[98%] max-lg:before:bg-[rgb(var(--nextra-bg))] max-sm:top-[191px] sm:max-lg:top-[214px] lg:grid lg:grid-cols-3 lg:[&>:first-child]:col-start-2" |
There was a problem hiding this comment.
Should be [counter-set:list-item_0] and lg:[&>:first-child]:col-start-1.
There was a problem hiding this comment.
uh but the counters are okay now, aren't they?
There was a problem hiding this comment.
even on the video where you recorded the bug
There was a problem hiding this comment.
Yes, actually, I think you're right. It's possible that I hadn't pulled down your latest changes before checking, because I'm a different machine now, pulled your PR down fresh and it looks good!
| ) | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
rendering the first list item here, along with the css changes above, cleans things up nicely for me. it means rendering the first list item twice, but seems like a fair trade off.
3 participants
Description
@martinbonnin proposed making the "How it Works" code samples interactive on Slack.
We already had CodeMirror, and I already needed to restyle it for the docs, so it required just a new schema, some refactoring and shuffling things around.
I think the idea makes sense, and lets the user experience GraphQL immediately. Even if they're non-programmers, they can maybe get a feel how the data flows and what the experience is like.
I changed the section CTA to state "Try GraphiQL", because we're already trying it out live.
To-do
dynamic(importinstead ofdynamic(() => importinitially so it's good I double checked).