Skip to content

Commit c5fb49c

Browse files
AlemTuzlakAlemTuzlak
authored
Merge branch 'main' into feat-race-condition-bug-fix
2 parents 8cca289 + e04bb11 commit c5fb49c

File tree

7 files changed

+533
-69
lines changed

7 files changed

+533
-69
lines changed

‎.changeset/ripe-coats-drive.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/devtools': patch
3+
---
4+
5+
Restore plugin scroll

‎.changeset/vast-apes-attend.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/devtools': patch
3+
---
4+
5+
Implemented a new SERP (Search Engine Results Page) section in the SEO tab. This update introduces desktop and mobile preview of search results. It displays the current site's favicon, title and description while displaying errors and issues when they are not found or they exceed the character limit.

‎examples/react/basic/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
<meta name="twitter:url" content="https://example.com/basic" />
2929
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
3030
<title>Basic Example - TanStack Devtools</title>
31+
<meta
32+
name="description"
33+
content="A basic example of using TanStack Devtools with React."
34+
/>
35+
3136
<description
3237
>A basic example of using TanStack Devtools with React.</description
3338
>

‎packages/devtools/src/styles/use-styles.ts‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,32 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
119119
margin-bottom: 2rem;
120120
border-radius: 0.75rem;
121121
`,
122+
seoSubNav: css`
123+
display: flex;
124+
flex-direction: row;
125+
gap: 0;
126+
margin-bottom: 1rem;
127+
border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
128+
`,
129+
seoSubNavLabel: css`
130+
padding: 0.5rem 1rem;
131+
font-size: 0.875rem;
132+
font-weight: 500;
133+
color: ${t(colors.gray[600], colors.gray[400])};
134+
background: none;
135+
border: none;
136+
border-bottom: 2px solid transparent;
137+
margin-bottom: -1px;
138+
cursor: pointer;
139+
font-family: inherit;
140+
&:hover {
141+
color: ${t(colors.gray[800], colors.gray[200])};
142+
}
143+
`,
144+
seoSubNavLabelActive: css`
145+
color: ${t(colors.gray[900], colors.gray[100])};
146+
border-bottom-color: ${t(colors.gray[900], colors.gray[100])};
147+
`,
122148
seoPreviewSection: css`
123149
display: flex;
124150
flex-direction: row;
@@ -205,6 +231,139 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
205231
padding: 0 10px 8px 10px;
206232
font-size: 0.875rem;
207233
`,
234+
serpPreviewBlock: css`
235+
margin-bottom: 1.5rem;
236+
border: 1px solid ${t(colors.gray[200], colors.gray[700])};
237+
border-radius: 10px;
238+
padding: 1rem;
239+
`,
240+
serpPreviewLabel: css`
241+
font-size: 0.875rem;
242+
font-weight: 600;
243+
margin-bottom: 0.5rem;
244+
color: ${t(colors.gray[700], colors.gray[300])};
245+
`,
246+
serpSnippet: css`
247+
border: 1px solid ${t(colors.gray[100], colors.gray[800])};
248+
border-radius: 8px;
249+
padding: 1rem 1.25rem;
250+
background: ${t(colors.white, colors.darkGray[900])};
251+
max-width: 600px;
252+
font-family: ${fontFamily.sans};
253+
box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
254+
`,
255+
serpSnippetMobile: css`
256+
border: 1px solid ${t(colors.gray[100], colors.gray[800])};
257+
border-radius: 8px;
258+
padding: 1rem 1.25rem;
259+
background: ${t(colors.white, colors.darkGray[900])};
260+
max-width: 380px;
261+
font-family: ${fontFamily.sans};
262+
box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
263+
`,
264+
serpSnippetDescMobile: css`
265+
font-size: 0.875rem;
266+
color: ${t(colors.gray[700], colors.gray[300])};
267+
margin: 0;
268+
line-height: 1.5;
269+
display: -webkit-box;
270+
-webkit-box-orient: vertical;
271+
-webkit-line-clamp: 3;
272+
overflow: hidden;
273+
`,
274+
serpSnippetTopRow: css`
275+
display: flex;
276+
align-items: center;
277+
gap: 12px;
278+
margin-bottom: 8px;
279+
`,
280+
serpSnippetFavicon: css`
281+
width: 28px;
282+
height: 28px;
283+
border-radius: 50%;
284+
flex-shrink: 0;
285+
object-fit: contain;
286+
overflow: hidden;
287+
display: flex;
288+
align-items: center;
289+
justify-content: center;
290+
`,
291+
serpSnippetDefaultFavicon: css`
292+
width: 28px;
293+
height: 28px;
294+
background-color: ${t(colors.gray[200], colors.gray[800])};
295+
border-radius: 50%;
296+
flex-shrink: 0;
297+
object-fit: contain;
298+
overflow: hidden;
299+
display: flex;
300+
align-items: center;
301+
justify-content: center;
302+
`,
303+
serpSnippetSiteColumn: css`
304+
display: flex;
305+
flex-direction: column;
306+
gap: 0;
307+
min-width: 0;
308+
`,
309+
serpSnippetSiteName: css`
310+
font-size: 0.875rem;
311+
color: ${t(colors.gray[900], colors.gray[100])};
312+
line-height: 1.4;
313+
margin: 0;
314+
`,
315+
serpSnippetSiteUrl: css`
316+
font-size: 0.75rem;
317+
color: ${t(colors.gray[500], colors.gray[500])};
318+
line-height: 1.4;
319+
margin: 0;
320+
`,
321+
serpSnippetTitle: css`
322+
font-size: 1.25rem;
323+
font-weight: 400;
324+
color: ${t('#1a0dab', '#8ab4f8')};
325+
margin: 0 0 4px 0;
326+
line-height: 1.3;
327+
`,
328+
serpSnippetDesc: css`
329+
font-size: 0.875rem;
330+
color: ${t(colors.gray[700], colors.gray[300])};
331+
margin: 0;
332+
line-height: 1.5;
333+
`,
334+
serpMeasureHidden: css`
335+
position: absolute;
336+
left: -9999px;
337+
top: 0;
338+
visibility: hidden;
339+
pointer-events: none;
340+
box-sizing: border-box;
341+
`,
342+
serpMeasureHiddenMobile: css`
343+
position: absolute;
344+
left: -9999px;
345+
top: 0;
346+
width: 340px;
347+
visibility: hidden;
348+
pointer-events: none;
349+
font-size: 0.875rem;
350+
line-height: 1.5;
351+
`,
352+
serpReportSection: css`
353+
margin-top: 1rem;
354+
font-size: 0.875rem;
355+
color: ${t(colors.gray[700], colors.gray[300])};
356+
`,
357+
serpErrorList: css`
358+
margin: 4px 0 0 0;
359+
padding-left: 1.25rem;
360+
list-style-type: disc;
361+
`,
362+
serpReportItem: css`
363+
margin-top: 0.25rem;
364+
color: ${t(colors.red[700], colors.red[400])};
365+
font-size: 0.875rem;
366+
`,
208367
devtoolsPanelContainer: (
209368
panelLocation: TanStackDevtoolsConfig['panelLocation'],
210369
isDetached: boolean,
@@ -506,6 +665,12 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
506665
width: 100%;
507666
height: 100%;
508667
668+
& > * > * {
669+
min-width: 0;
670+
min-height: 0;
671+
height: 100%;
672+
}
673+
509674
&:not(:last-child) {
510675
border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
511676
}

‎packages/devtools/src/tabs/seo-tab/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Show, createSignal } from 'solid-js'
2+
import { MainPanel } from '@tanstack/devtools-ui'
3+
import { useStyles } from '../../styles/use-styles'
4+
import { SocialPreviewsSection } from './social-previews'
5+
import { SerpPreviewSection } from './serp-preview'
6+
7+
type SeoSubView = 'social-previews' | 'serp-preview'
8+
9+
export const SeoTab = () => {
10+
const [activeView, setActiveView] =
11+
createSignal<SeoSubView>('social-previews')
12+
const styles = useStyles()
13+
14+
return (
15+
<MainPanel withPadding>
16+
<nav class={styles().seoSubNav} aria-label="SEO sections">
17+
<button
18+
type="button"
19+
class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`}
20+
onClick={() => setActiveView('social-previews')}
21+
>
22+
Social previews
23+
</button>
24+
<button
25+
type="button"
26+
class={`${styles().seoSubNavLabel} ${activeView() === 'serp-preview' ? styles().seoSubNavLabelActive : ''}`}
27+
onClick={() => setActiveView('serp-preview')}
28+
>
29+
SERP Preview
30+
</button>
31+
</nav>
32+
33+
<Show when={activeView() === 'social-previews'}>
34+
<SocialPreviewsSection />
35+
</Show>
36+
<Show when={activeView() === 'serp-preview'}>
37+
<SerpPreviewSection />
38+
</Show>
39+
</MainPanel>
40+
)
41+
}

0 commit comments

Comments
 (0)