Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

Commit

The docs' Code tab opens on pull requests, and a phone shows where there is more to scroll (#52): the Code tab opened on Security and listed it above Landing changes, since a tab's groups followed the sidebar's order; a tab now lists, and opens on, its groups in the order tabs.ts names them, so Code starts at Pull requests and checks (route-data.ts). On a phone the tab row and wide tables were cut off at the screen's edge with nothing to say they scroll: the tab row now fades at an edge with more tabs past it, and a table that scrolls sideways shows a shadow at that edge (the stacked Live/Preview/Coming tables are left as they are). The On this page list that drops over a phone's page gets an edge and a shadow, where its last row ran into the text beneath. A page's eyebrow is left out when it only repeats the title (Chat in Chat), and a phone's lead paragraph is a step above the body rather than nearly a headline. Checked: the docs build and tests; rendered the docs home, Quickstart, Home, Pull requests and checks, Chat, Architecture overview, MCP tools and Create a pull request at 1440 and 390 wide, dark and light, before and after, plus the phone menu, the phone On this page list, search and the footer; no page scrolls sideways at 390.

G1t-Session:
ses_01m4ynr1peevvs8zwaqakycv2e
syntaqxcommitted Parent2e90f6fBrowse files
4 files+79−30/4 viewed
+30−0
4545 if (current && tabs && current.offsetLeft + current.offsetWidth > tabs.clientWidth) {
4646 tabs.scrollLeft = current.offsetLeft - (tabs.clientWidth - current.offsetWidth) / 2;
4747 }
48+ // The row fades out at an edge with more tabs past it, so a cut-off
49+ // tab reads as "scroll for more" rather than as a clipped word.
50+ const bar = document.querySelector<HTMLElement>('.g1t-tabs');
51+ if (bar) {
52+ const edges = () => {
53+ const end = bar.scrollWidth - bar.clientWidth;
54+ bar.toggleAttribute('data-more-start', bar.scrollLeft > 1);
55+ bar.toggleAttribute('data-more-end', bar.scrollLeft < end - 1);
56+ };
57+ edges();
58+ bar.addEventListener('scroll', edges, { passive: true });
59+ addEventListener('resize', edges);
60+ }
4861 </script>
4962
5063 <style>
144157 .g1t-tabs::-webkit-scrollbar {
145158 display: none;
146159 }
160+ .g1t-tabs[data-more-start],
161+ .g1t-tabs[data-more-end] {
162+ --fade: 2.5rem;
163+ mask-image: linear-gradient(
164+ to right,
165+ transparent,
166+ #000 var(--fade-start, 0px),
167+ #000 calc(100% - var(--fade-end, 0px)),
168+ transparent
169+ );
170+ }
171+ .g1t-tabs[data-more-start] {
172+ --fade-start: var(--fade);
173+ }
174+ .g1t-tabs[data-more-end] {
175+ --fade-end: var(--fade);
176+ }
147177 .g1t-tabs a {
148178 display: flex;
149179 flex-shrink: 0;
+9−1
99
1010 const { entry, id } = Astro.locals.starlightRoute;
1111 const { title, description } = entry.data;
12−const section = NAV.get(Astro.locals.starlightRoute)?.section;
12+const nav = NAV.get(Astro.locals.starlightRoute)?.section;
13+// No eyebrow that only repeats the title, as on Chat's page in Chat.
14+const section = nav && nav.toLowerCase() !== title.toLowerCase() ? nav : undefined;
1315 const markdown = `/${id === '' || id === 'index' ? 'index' : id}.md`;
1416 const absolute = new URL(markdown, Astro.site).href;
1517 const ask = encodeURIComponent(`Read ${absolute} so I can ask questions about it.`);
250252 font-size: 2rem;
251253 overflow-wrap: anywhere;
252254 }
255+ /* The lead a step above the body, not a headline of its own. */
256+ .g1t-description {
257+ margin-top: 0.75rem;
258+ font-size: 1.0625rem;
259+ line-height: 1.5;
260+ }
253261 .g1t-copy {
254262 height: 2.5rem;
255263 margin-top: 0;
+16−2
5454 return slug.startsWith('reference/') ? TABS[TABS.length - 1] : tabForGroup(group.label ?? '');
5555 }
5656
57+/**
58+ * A tab's groups in the tab's own order (`groups` in tabs.ts), so a tab
59+ * opens on, and its sidebar starts with, the group it is named for: Code
60+ * on Landing changes, not on Security, which comes first in the sidebar.
61+ * The API reference tab names no groups and keeps the sidebar's order.
62+ */
63+function inTabOrder(groups: Entry[], tab: Tab): Entry[] {
64+ const rank = (group: Entry) => {
65+ const index = tab.groups.indexOf(group.label ?? '');
66+ return index === -1 ? tab.groups.length : index;
67+ };
68+ return groups.filter((group) => tabOf(group) === tab).sort((a, b) => rank(a) - rank(b));
69+}
70+
5771 /** Whether the current page is in these entries, at any depth. */
5872 function holdsCurrent(entries: Entry[]): boolean {
5973 return entries.some((entry) => entry.isCurrent || holdsCurrent(entry.entries ?? []));
7488 const tab = holder ? tabOf(holder) : TABS[0];
7589 // A tab opens on the first page of its first group; the first tab, on the home page.
7690 const tabs = TABS.map((each) => {
77− const group = each === TABS[0] ? undefined : groups.find((entry) => tabOf(entry) === each);
91+ const group = each === TABS[0] ? undefined : inTabOrder(groups, each)[0];
7892 const slug = group ? firstSlug(group.entries ?? []) : undefined;
7993 return { label: each.label, href: slug === undefined ? '/' : `/${slug}/`, current: each === tab };
8094 });
8195 NAV.set(route, { tabs, section: section ?? (route.id === '' ? undefined : tab.label) });
82− route.sidebar = route.sidebar.filter((entry) => entry.type === 'group' && tabOf(entry as Entry) === tab);
96+ route.sidebar = inTabOrder(groups, tab) as typeof route.sidebar;
8397
8498 const { title, description } = route.entry.data;
8599 const card = new URL('/docs', OG);
+24−0
280280 display: block;
281281 overflow-x: auto;
282282 }
283+ /* A shadow at an edge with more columns past it, so a cut-off column
284+ reads as "scroll for more". The covers scroll with the table and hide
285+ the shadows at its ends. */
286+ .sl-markdown-content table:not(:has(.status)) {
287+ --cover: var(--g1t-bg);
288+ /* On the dark page a shadow is a faint light, as a dark one would not show. */
289+ --shade: rgb(255 255 255 / 0.12);
290+ background:
291+ linear-gradient(to right, var(--cover) 30%, transparent) left / 2.5rem 100% no-repeat local,
292+ linear-gradient(to left, var(--cover) 30%, transparent) right / 2.5rem 100% no-repeat local,
293+ radial-gradient(farthest-side at 0 50%, var(--shade), transparent) left / 0.875rem 100% no-repeat scroll,
294+ radial-gradient(farthest-side at 100% 50%, var(--shade), transparent) right / 0.875rem 100% no-repeat scroll;
295+ }
296+ :root[data-theme='light'] .sl-markdown-content table:not(:has(.status)) {
297+ --shade: rgb(24 24 27 / 0.16);
298+ }
283299 }
284300 /*
285301 * There, a name, route or value in a table is never broken, not even at a
345361
346362 /* --- On this page --------------------------------------------------------- */
347363
364+/* On a phone the list drops over the page: give it an edge and a shadow, so
365+ where it stops is clear rather than its last row running into the text. */
366+mobile-starlight-toc .dropdown {
367+ border-color: var(--g1t-line);
368+ border-bottom-color: var(--g1t-line-strong);
369+ box-shadow: var(--g1t-docs-menu-shadow);
370+}
371+
348372 .right-sidebar-panel {
349373 padding-top: 2.75rem;
350374 }

Comments

Sign in to comment.