Skip to content

Commit a2b7d1e

Browse files
RebeccaTamachiroGregBrimble
RebeccaTamachiro
authored and
GregBrimble
committed
[BYOIP, CF4SaaS] Implement DashButton component (#24864)
* Replace Address Maps occurrences * Replace Notifications occurrence * Add DashButton to only account-level step in CF4SaaS
1 parent 7937bc6 commit a2b7d1e

File tree

9 files changed

+225
-37
lines changed

9 files changed

+225
-37
lines changed

‎patches/@astrojs+starlight-docsearch+0.6.0.patch‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
diff --git a/node_modules/@astrojs/starlight-docsearch/DocSearch.astro b/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
2+
index f50c208..5309557 100644
3+
--- a/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
4+
+++ b/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
5+
@@ -109,15 +109,20 @@ const docsearchTranslations: DocSearchTranslationProps = {
6+
.DocSearch-Button-Keys {
7+
margin-inline-start: auto;
8+
}
9+
- .DocSearch-Button-Keys::before {
10+
- content: '';
11+
- width: 1em;
12+
- height: 1em;
13+
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
14+
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
15+
- -webkit-mask-size: 100%;
16+
- mask-size: 100%;
17+
- background-color: currentColor;
18+
+ .DocSearch-Button-Key:first-child {
19+
+ margin-right: 0.4em;
20+
+ }
21+
+ .DocSearch-Button-Key {
22+
+ display: inline-block;
23+
+ font-size: 0.75em;
24+
+ font-weight: 600;
25+
+ opacity: 0.8;
26+
+ border: 1px solid var(--sl-color-gray-4);
27+
+ border-radius: 0.25rem;
28+
+ padding: 0.125rem 0.375rem;
29+
+ background-color: var(--sl-color-gray-6);
30+
+ color: var(--sl-color-gray-1);
31+
+ line-height: 1;
32+
}
33+
}
34+
</style>
35+
@@ -128,6 +133,7 @@ const docsearchTranslations: DocSearchTranslationProps = {
36+
class StarlightDocSearch extends HTMLElement {
37+
constructor() {
38+
super();
39+
+
40+
window.addEventListener('DOMContentLoaded', async () => {
41+
const { default: docsearch } = await import('@docsearch/js');
42+
const options = { ...config, container: 'sl-doc-search' };
43+
@@ -136,6 +142,27 @@ const docsearchTranslations: DocSearchTranslationProps = {
44+
Object.assign(options, translations);
45+
} catch {}
46+
docsearch(options);
47+
+
48+
+ const keyboardShortcuts = options.keyboardShortcuts ?? {};
49+
+ const slashEnabled = keyboardShortcuts?.['/'] !== false;
50+
+ const ctrlCmdKEnabled = keyboardShortcuts?.['Ctrl/Cmd+K'] !== false;
51+
+
52+
+ if (slashEnabled && !ctrlCmdKEnabled) {
53+
+ const styleContainer = document.createElement('style');
54+
+ styleContainer.innerHTML = `
55+
+ .DocSearch-Button-Keys::before {
56+
+ content: '';
57+
+ width: 1em;
58+
+ height: 1em;
59+
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
60+
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
61+
+ -webkit-mask-size: 100%;
62+
+ mask-size: 100%;
63+
+ background-color: currentColor;
64+
+ }
65+
+ `;
66+
+ document.head.appendChild(styleContainer);
67+
+ }
68+
});
69+
}
70+
}
71+
diff --git a/node_modules/@astrojs/starlight-docsearch/index.ts b/node_modules/@astrojs/starlight-docsearch/index.ts
72+
index e8cc7e5..6c88e07 100644
73+
--- a/node_modules/@astrojs/starlight-docsearch/index.ts
74+
+++ b/node_modules/@astrojs/starlight-docsearch/index.ts
75+
@@ -43,6 +43,18 @@ const DocSearchConfigSchema = z
76+
* @see https://www.algolia.com/doc/api-reference/search-api-parameters/
77+
*/
78+
searchParameters: z.custom<SearchOptions>(),
79+
+ /**
80+
+ * Configuration for keyboard shortcuts that trigger the DocSearch modal.
81+
+ * @see https://docsearch.algolia.com/docs/api/#keyboardshortcuts
82+
+ */
83+
+ keyboardShortcuts: z
84+
+ .object({
85+
+ /** Enable/disable Ctrl/Cmd+K shortcut. @default true */
86+
+ 'Ctrl/Cmd+K': z.boolean().optional(),
87+
+ /** Enable/disable / shortcut. @default true */
88+
+ '/': z.boolean().optional(),
89+
+ })
90+
+ .optional(),
91+
})
92+
.strict()
93+
.or(

‎patches/@docsearch+js+3.8.2.patch‎

Lines changed: 38 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/overrides/Sidebar.astro‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
2222
type="text"
2323
id="sidebar-search"
2424
placeholder="Search sidebar..."
25-
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-orange-500 dark:focus:border-orange-500 transition-colors duration-200"
25+
class="w-full px-3 py-2 pr-10 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-orange-500 dark:focus:border-orange-500 transition-colors duration-200"
2626
/>
27+
<div class="sidebar-search-icon"></div>
2728
</div>
2829

2930
<!-- No Results Message -->
@@ -255,6 +256,30 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
255256
}
256257
}
257258
});
259+
260+
document.addEventListener(
261+
"keydown",
262+
(keyboardEvent) => {
263+
const target = keyboardEvent.target;
264+
265+
const isInput =
266+
target instanceof EventTarget &&
267+
(("tagName" in target &&
268+
(target.tagName === "INPUT" ||
269+
target.tagName === "TEXTAREA" ||
270+
target.tagName === "SELECT")) ||
271+
("isContentEditable" in target && target.isContentEditable));
272+
273+
if (keyboardEvent.key === "/" && !isInput) {
274+
keyboardEvent.preventDefault();
275+
keyboardEvent.stopPropagation();
276+
searchInput.focus();
277+
}
278+
},
279+
{
280+
capture: true,
281+
},
282+
);
258283
}
259284

260285
// Initialize when DOM is loaded
@@ -269,6 +294,21 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
269294
</script>
270295

271296
<style is:global>
297+
.sidebar-search-icon {
298+
position: absolute;
299+
right: 12px;
300+
top: 50%;
301+
transform: translateY(-50%);
302+
width: 1em;
303+
height: 1em;
304+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
305+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
306+
-webkit-mask-size: 100%;
307+
mask-size: 100%;
308+
background-color: currentColor;
309+
pointer-events: none;
310+
}
311+
272312
:root {
273313
.sidebar-content {
274314
--sl-color-hairline-light: #cacaca !important;

‎src/content/docs/byoip/address-maps/setup.mdx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ sidebar:
66
label: Setup
77
---
88

9-
import { GlossaryTooltip, APIRequest } from "~/components";
9+
import { GlossaryTooltip, APIRequest, DashButton } from "~/components";
1010

1111
Consider the sections below to learn how to set up address maps.
1212

@@ -20,25 +20,29 @@ To avoid any errors if you have [static IPs](/byoip/concepts/static-ips/), Cloud
2020

2121
If you are using BYOIP instead, refer to the following steps:
2222

23-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
24-
2. Go to **IP Addresses** > **Address Maps**.
25-
3. Select **Create an address map**.
26-
4. Choose the scope of the address map.
27-
5. Add the zones and IP addresses that you want to map.
28-
6. Name your address map.
29-
7. Review the information and select **Save and Deploy**.
23+
1. In the Cloudflare dashboard, go to the **Address Maps** page.
24+
25+
<DashButton url="/?to=/:account/ip-addresses/proxy-ips" />
26+
27+
2. Select **Create an address map**.
28+
3. Choose the scope of the address map.
29+
4. Add the zones and IP addresses that you want to map.
30+
5. Name your address map.
31+
6. Review the information and select **Save and Deploy**.
3032

3133
:::note
3234
Creating an address map does not automatically change DNS configuration. DNS responses only begin to change when a zone or account is added to a map. Additionally, address maps that are not yet enabled will not take effect in DNS responses.
3335
:::
3436

3537
## Manage address maps
3638

37-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
38-
2. Go to **IP Addresses** > **Address Maps**.
39-
3. Go to your address map and select **Review**.
40-
4. Edit your address map.
41-
5. Review the information and select **Save**.
39+
1. In the Cloudflare dashboard, go to the **Address Maps** page.
40+
41+
<DashButton url="/?to=/:account/ip-addresses/proxy-ips" />
42+
43+
2. Go to your address map and select **Review**.
44+
3. Edit your address map.
45+
4. Review the information and select **Save**.
4246

4347
:::note
4448
You can also enable, disable, and delete address maps. This will likely change the IP addresses used for your zones.

‎src/content/docs/byoip/route-leak-detection.mdx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ sidebar:
66

77
---
88

9-
import { AvailableNotifications } from "~/components"
9+
import { AvailableNotifications, DashButton } from "~/components"
1010

1111
Route Leak Detection protects your routes on the Internet by notifying you when your traffic is routed somewhere it should not go, which could indicate a possible attack. Route Leak Detection also reduces the amount of time needed to mitigate leaks by providing you with timely notifications.
1212

@@ -18,8 +18,11 @@ Cloudflare detects route leaks by using several sources of routing data to creat
1818

1919
You must be a user who has brought your own IP address to Cloudflare, which includes Magic Transit, Spectrum, and WAF users. Only prefixes advertised by Cloudflare qualify for Route Leak Detection.
2020

21-
1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
22-
2. Select **Notifications** > **Add**.
21+
1. In the Cloudflare dashboard, go to the **Notifications** page.
22+
23+
<DashButton url="/?to=/:account/notifications" />
24+
25+
2. Select **Add**.
2326
3. Locate **Route Leak Detection** from the list > **Select**.
2427
4. Enter a name and description for the notification.
2528
5. Enter one or more email addresses to receive the notifications.

‎src/content/docs/byoip/service-bindings/cdn-and-spectrum.mdx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
TabItem,
1515
Tabs,
1616
GlossaryTooltip,
17+
DashButton,
1718
} from "~/components";
1819

1920
With [service bindings](/byoip/service-bindings/), CDN[^1] customers using BYOIP can take the same prefix they have onboarded to Cloudflare and use it to selectively route traffic on a per-IP address basis to [Spectrum](/spectrum/)[^2], or vice versa. This means:
@@ -98,13 +99,15 @@ If you need to map only specific subdomains (and not all proxied DNS records) to
9899
<Tabs syncKey="dashPlusAPI">
99100
<TabItem label="Dashboard" no-code="true">
100101

101-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
102-
2. Go to **IP Addresses** > **Address Maps**.
103-
3. Select **Create an address map**.
104-
4. Choose the scope of the address map.
105-
5. Add the zones and IP addresses that you want to map.
106-
6. Name your address map.
107-
7. Review the information and select **Save and Deploy**.
102+
1. In the Cloudflare dashboard, go to the **Address Maps** page.
103+
104+
<DashButton url="/?to=/:account/ip-addresses/proxy-ips" />
105+
106+
2. Select **Create an address map**.
107+
3. Choose the scope of the address map.
108+
4. Add the zones and IP addresses that you want to map.
109+
5. Name your address map.
110+
6. Review the information and select **Save and Deploy**.
108111

109112
</TabItem>
110113
<TabItem label="API" no-code="true">

‎src/content/docs/byoip/service-bindings/magic-transit-with-cdn.mdx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
GlossaryTooltip,
1515
APIRequest,
1616
Render,
17+
DashButton,
1718
} from "~/components";
1819

1920
[Magic Transit](/magic-transit/) customers using BYOIP can also benefit from the performance, reliability, and security that Cloudflare offers for HTTP-based applications. [Service bindings](/byoip/service-bindings/) allow BYOIP customers to selectively route traffic on a per-IP address basis to the CDN pipeline (which includes [Cache](/cache/), [Web Application Firewall (WAF)](/waf/), and more).
@@ -71,13 +72,15 @@ If you need to map only specific subdomains (and not all proxied DNS records) to
7172
<Tabs syncKey="dashPlusAPI">
7273
<TabItem label="Dashboard" no-code="true">
7374

74-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
75-
2. Go to **IP Addresses** > **Address Maps**.
76-
3. Select **Create an address map**.
77-
4. Choose the scope of the address map.
78-
5. Add the zones and IP addresses that you want to map.
79-
6. Name your address map.
80-
7. Review the information and select **Save and Deploy**.
75+
1. In the Cloudflare dashboard, go to the **Address Maps** page.
76+
77+
<DashButton url="/?to=/:account/ip-addresses/proxy-ips" />
78+
79+
2. Select **Create an address map**.
80+
3. Choose the scope of the address map.
81+
4. Add the zones and IP addresses that you want to map.
82+
5. Name your address map.
83+
6. Review the information and select **Save and Deploy**.
8184

8285
</TabItem>
8386
<TabItem label="API" no-code="true">

‎src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/security/waf-for-saas/managed-rulesets.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ head:
99

1010
---
1111

12+
import { DashButton } from "~/components";
13+
1214
If you are interested in [WAF for SaaS](/cloudflare-for-platforms/cloudflare-for-saas/security/waf-for-saas/) but unsure of where to start, Cloudflare recommends using WAF Managed Rules. The Cloudflare security team creates and manages a variety of rules designed to detect common attack vectors and protect applications from vulnerabilities. These rules are offered in [managed rulesets](/waf/managed-rules/), like Cloudflare Managed and OWASP, which can be deployed with different settings and sensitivity levels.
1315

1416
***
@@ -43,18 +45,16 @@ After the association is complete, the JSON blob is added to the defined custom
4345

4446
## 2. Deploy Rulesets
4547

46-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and navigate to your account.
48+
1. In the Cloudflare dashboard, go to the **WAF** page.
4749

48-
2. Select Account Home > **WAF**.
50+
<DashButton url="/?to=/:account/application-security/waf" />
4951

5052
:::note
51-
52-
5353
**WAF** at the account level will only be visible on Enterprise plans. If you do not see this option, contact your account manager.
54-
55-
5654
:::
5755

56+
2. Select **Managed rulesets**.
57+
5858
3. Select **Deploy a managed ruleset**.
5959

6060
4. Under **Field**, Select *Hostname*. Set the operator as *equals*. The complete expression should look like this, plus any logic you would like to add:

‎src/plugins/docsearch/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,8 @@ export default {
4343
},
4444
};
4545
},
46+
keyboardShortcuts: {
47+
"Ctrl/Cmd+K": true,
48+
"/": false,
49+
},
4650
} satisfies DocSearchClientOptions;

0 commit comments

Comments
 (0)