Skip to content

Commit 76069eb

Browse files
KianNHKianNH
authored
[Docs Site] Add PartialsUsage component (#23608)
* [Docs Site] Add PartialsUsage component * naming and 1111 slugs
1 parent fb579fa commit 76069eb

File tree

7 files changed

+228
-88
lines changed

7 files changed

+228
-88
lines changed

‎src/components/ComponentUsage.astro‎

Lines changed: 2 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
import { z } from "astro:schema";
33
import { getComponentsUsage } from "~/util/components";
4-
import { slug } from "github-slugger";
54
5+
import UsageList from "./UsageList.astro";
66
import Details from "./Details.astro";
77
88
type Props = z.infer<typeof props>;
@@ -22,70 +22,6 @@ const usage = await getComponentsUsage(component);
2222
<code>{usage.pages.size}</code> pages.
2323
</p>
2424
<Details header={`Pages which use ${component}`}>
25-
<p><strong>Pages</strong></p>
26-
<ul>
27-
{
28-
[...usage.pages]
29-
.filter((path) => path.startsWith("src/content/docs/"))
30-
.sort()
31-
.map((path) => {
32-
const slugified =
33-
"/" +
34-
path
35-
.replace("src/content/docs/", "")
36-
.replace(".mdx", "")
37-
.split("/")
38-
.map((segment) => slug(segment))
39-
.join("/") +
40-
"/";
41-
42-
return (
43-
<li>
44-
<a
45-
href={"https://developers.cloudflare.com" + slugified}
46-
target="_blank"
47-
>
48-
{slugified}
49-
</a>
50-
<span>
51-
-
52-
<a
53-
href={
54-
"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
55-
path
56-
}
57-
target="_blank"
58-
>
59-
Source
60-
</a>
61-
</span>
62-
</li>
63-
);
64-
})
65-
}
66-
</ul>
67-
<p><strong>Partials</strong></p>
68-
<ul>
69-
{
70-
[...usage.pages]
71-
.filter((path) => path.startsWith("src/content/partials/"))
72-
.sort()
73-
.map((path) => {
74-
return (
75-
<li>
76-
<a
77-
href={
78-
"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
79-
path
80-
}
81-
target="_blank"
82-
>
83-
{path}
84-
</a>
85-
</li>
86-
);
87-
})
88-
}
89-
</ul>
25+
<UsageList usage={usage} />
9026
</Details>
9127
</>

‎src/components/Details.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ type Props = z.infer<typeof props>;
77
const props = z.object({
88
header: z.string(),
99
open: z.boolean().optional(),
10+
id: z.string().optional(),
1011
});
1112
12-
const { header, open } = props.parse(Astro.props);
13+
const { header, open, id } = props.parse(Astro.props);
1314
---
1415

15-
<details open={open}>
16+
<details open={open} id={id}>
1617
<summary set:html={marked.parse(header)} />
1718
<slot />
1819
</details>

‎src/components/PartialsUsage.astro‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
import { getPartialsUsage } from "~/util/components";
3+
4+
import Details from "./Details.astro";
5+
import UsageList from "./UsageList.astro";
6+
7+
const partials = await getPartialsUsage();
8+
---
9+
10+
<Details header="Usage" id="partials-container">
11+
{
12+
[...Object.entries(partials)]
13+
.sort((a, b) => a[0].localeCompare(b[0]))
14+
.map(([name, usage]) => (
15+
<Details header={name} id={name}>
16+
<UsageList usage={usage} />
17+
</Details>
18+
))
19+
}
20+
</Details>
21+
22+
<script>
23+
const params = new URLSearchParams(window.location.search);
24+
console.log(params);
25+
const partial = params.get("partial");
26+
27+
if (partial) {
28+
const container = document.querySelector<HTMLDetailsElement>(
29+
"#partials-container",
30+
);
31+
const details = document.querySelector<HTMLDetailsElement>(
32+
`#${CSS.escape(partial)}`,
33+
);
34+
35+
if (container && details) {
36+
container.open = true;
37+
details.open = true;
38+
details.scrollIntoView();
39+
}
40+
}
41+
</script>

‎src/components/UsageList.astro‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
import { z } from "astro:schema";
3+
import { slug } from "github-slugger";
4+
5+
const props = z.object({
6+
usage: z.object({
7+
count: z.number(),
8+
pages: z.set(z.string()),
9+
}),
10+
});
11+
12+
const { usage } = props.parse(Astro.props);
13+
---
14+
15+
<>
16+
<p>
17+
Used <strong>{usage.count}</strong> times.
18+
</p>
19+
<p>
20+
<strong>Pages</strong>
21+
</p>
22+
<ul>
23+
{
24+
[...usage.pages]
25+
.filter((path) => path.startsWith("src/content/docs/"))
26+
.sort()
27+
.map((path) => {
28+
const slugified =
29+
"/" +
30+
path
31+
.replace("src/content/docs/", "")
32+
.replace(".mdx", "")
33+
.split("/")
34+
.map((segment) => {
35+
if (segment === "1.1.1.1") {
36+
return segment;
37+
}
38+
return slug(segment);
39+
})
40+
.join("/") +
41+
"/";
42+
43+
return (
44+
<li>
45+
<a
46+
href={"https://developers.cloudflare.com" + slugified}
47+
target="_blank"
48+
>
49+
{slugified}
50+
</a>
51+
<span>
52+
-
53+
<a
54+
href={
55+
"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
56+
path
57+
}
58+
target="_blank"
59+
>
60+
Source
61+
</a>
62+
</span>
63+
</li>
64+
);
65+
})
66+
}
67+
</ul>
68+
<p>
69+
<strong>Partials</strong>
70+
</p>
71+
<ul>
72+
{
73+
[...usage.pages]
74+
.filter((path) => path.startsWith("src/content/partials/"))
75+
.sort()
76+
.map((path) => {
77+
return (
78+
<li>
79+
<a
80+
href={
81+
"https://github.com/cloudflare/cloudflare-docs/blob/production/" +
82+
path
83+
}
84+
target="_blank"
85+
>
86+
{path}
87+
</a>
88+
</li>
89+
);
90+
})
91+
}
92+
</ul>
93+
</>

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export { default as PagesBuildEnvironmentTools } from "./PagesBuildEnvironmentTo
4141
export { default as PagesBuildPreset } from "./PagesBuildPreset.astro";
4242
export { default as PagesBuildPresetsTable } from "./PagesBuildPresetsTable.astro";
4343
export { default as PagesLanguageSupport } from "./PagesLanguageSupport.astro";
44+
export { default as PartialsUsage } from "./PartialsUsage.astro";
4445
export { default as Plan } from "./Plan.astro";
4546
export { default as PlanInfo } from "./PlanInfo.astro";
4647
export { default as ProductChangelog } from "./ProductChangelog.astro";

‎src/content/docs/style-guide/components/render.mdx‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ styleGuide:
44
component: Render
55
---
66

7-
import { Code, Details, Type, MetaInfo } from "~/components";
7+
import { Code, Details, Type, MetaInfo, PartialsUsage } from "~/components";
88

99
The `Render` component allows us to include a "partial", a reusable Markdown snippet, onto a page.
1010

@@ -15,40 +15,43 @@ It also accepts parameters that can be used as variables within the partial, so
1515
```mdx live
1616
import { Render } from "~/components";
1717

18-
<Render file="simple-props" params={{
19-
name: "world",
20-
}} />
18+
<Render
19+
file="simple-props"
20+
params={{
21+
name: "world",
22+
}}
23+
/>
2124
```
2225

2326
### Inputs
2427

2528
- `file` <Type text="string" />
2629

27-
This should be the name of the partial, without the containing directory or file extension. For example, `/partials/style-guide/hello.mdx` would be `file="hello"`.
30+
This should be the name of the partial, without the containing directory or file extension. For example, `/partials/style-guide/hello.mdx` would be `file="hello"`.
2831

2932
- `product` <Type text="string" /> <MetaInfo text="optional" />
3033

31-
By default, it will look for partials in the same product folder as the current page. You can use this to specify a different product.
34+
By default, it will look for partials in the same product folder as the current page. You can use this to specify a different product.
3235

33-
:::caution
36+
:::caution
3437

35-
When using the `Render` component inside partials, the original `product` is lost.
38+
When using the `Render` component inside partials, the original `product` is lost.
3639

37-
For example, if there are three files:
40+
For example, if there are three files:
3841

39-
1. `docs/fundamentals/index.mdx`
40-
2. `partials/dns/thing.mdx`
41-
3. `partials/dns/thing2.mdx`
42+
1. `docs/fundamentals/index.mdx`
43+
2. `partials/dns/thing.mdx`
44+
3. `partials/dns/thing2.mdx`
4245

43-
`docs/fundamentals/index.mdx` uses `<Render file="thing" product="dns" />`
46+
`docs/fundamentals/index.mdx` uses `<Render file="thing" product="dns" />`
4447

45-
`partials/dns/thing.mdx` must use `<Render file="thing2" product="dns" />` as `product` cannot be inferred.
48+
`partials/dns/thing.mdx` must use `<Render file="thing2" product="dns" />` as `product` cannot be inferred.
4649

47-
:::
50+
:::
4851

4952
- `params` <Type text="object" /> <MetaInfo text="optional" />
5053

51-
If you wish to substitute values inside your partial, you can use pass params which can be referenced in your partial. Refer to [properties](#properties).
54+
If you wish to substitute values inside your partial, you can use pass params which can be referenced in your partial. Refer to [properties](#properties).
5255

5356
## Properties
5457

@@ -128,9 +131,12 @@ import linkRaw from "~/content/partials/style-guide/link-in-props.mdx?raw";
128131
```mdx live
129132
import { Render } from "~/components";
130133

131-
<Render file="link-in-props" params={{
132-
link: "/style-guide/components/render/#links"
133-
}} />
134+
<Render
135+
file="link-in-props"
136+
params={{
137+
link: "/style-guide/components/render/#links",
138+
}}
139+
/>
134140
```
135141

136142
#### Images
@@ -185,4 +191,8 @@ import { Render } from "~/components";
185191
<hr />
186192

187193
<Render file="optional-props" params={{ product: "Thing Three" }} />
188-
```
194+
```
195+
196+
## Partials
197+
198+
<PartialsUsage />

0 commit comments

Comments
 (0)