Skip to content
Cloudflare Docs

Resources by selector

ResourcesBySelector is used 18 times on 16 pages.

Pages which use ResourcesBySelector

Pages

Partials

    The ResourcesBySelector component allows you to pull in documentation resources based on the pcx_content_type, tags and products frontmatter properties.

    Component

    Filter resources...

    103 Early Hints

    Allow a client to request static assets while waiting for the HTML response.

    A/B testing with same-URL direct access

    Set up an A/B test by controlling what response is served based on cookies. This version supports passing the request through to test and control on the origin, bypassing random assignment.

    Accessing the Cloudflare Object

    Access custom Cloudflare properties and control how Cloudflare features are applied to every request.

    Aggregate requests

    Send two GET request to two urls and aggregates the responses into one response.

    Alter headers

    Example of how to add, change, or delete headers sent in a request or returned in a response.

    Auth with headers

    Allow or deny a request based on a known pre-shared key in a header. This is not meant to replace the WebCrypto API.

    HTTP Basic Authentication

    Shows how to restrict access using the HTTP Basic schema.

    Block on TLS

    Inspects the incoming request's TLS version and blocks if under TLSv1.2.

    Bulk origin override

    Resolve requests to your domain to a set of proxy third-party origin URLs.

    Bulk redirects

    Redirect requests to certain URLs based on a mapped object to the request's URL.

    Using the Cache API

    Use the Cache API to store responses in Cloudflare's cache.

    Cache POST requests

    Cache POST requests using the Cache API.

    Cache Tags using Workers

    Send Additional Cache Tags using Workers

    Cache using fetch

    Determine how to cache a resource by setting TTLs, custom cache keys, and cache headers in a fetch request.

    Conditional response

    Return a response based on the incoming request's URL, HTTP method, User Agent, IP address, ASN or device type.

    CORS header proxy

    Add the necessary CORS headers to a third party API response.

    Country code redirect

    Redirect a response based on the country code in the header of a visitor.

    Setting Cron Triggers

    Set a Cron Trigger for your Worker.

    Debugging logs

    Send debugging information in an errored response to a logging service.

    Data loss prevention

    Protect sensitive data to prevent data loss, and send alerts to a webhooks server in the event of a data breach.

    Cookie parsing

    Given the cookie name, get the value of a cookie. You can also use cookies for A/B testing.

    Fetch HTML

    Send a request to a remote server, read HTML from the response, and serve that HTML.

    Fetch JSON

    Send a GET request and read in JSON from the response. Use to fetch external data.

    Geolocation: Weather application

    Fetch weather data from an API using the user's geolocation data.

    Geolocation: Custom Styling

    Personalize website styling based on localized user time.

    Geolocation: Hello World

    Get all geolocation data fields and display them in HTML.

    Hot-link protection

    Block other websites from linking to your content. This is useful for protecting images.

    Custom Domain with Images

    Set up custom domain for Images using a Worker or serve images using a prefix path and Cloudflare registered domain.

    Logging headers to console

    Examine the contents of a Headers object by logging to console with a Map.

    Modify request property

    Create a modified request with edited properties based off of an incoming request.

    Modify response

    Fetch and modify response properties which are immutable by creating a copy first.

    Multiple Cron Triggers

    Set multiple Cron Triggers on three different schedules.

    Stream OpenAI API Responses

    Use the OpenAI v4 SDK to stream responses from OpenAI.

    Post JSON

    Send a POST request with JSON data. Use to share data with external servers.

    Using timingSafeEqual

    Protect against timing attacks by safely comparing values using `timingSafeEqual`.

    Read POST

    Serve an HTML form, then read POST requests. Use also to read JSON or POST data from an incoming request.

    Redirect

    Redirect requests from one URL to another or from one set of URLs to another set.

    Respond with another site

    Respond to the Worker request with the response from another website (example.com in this example).

    Return small HTML page

    Deliver an HTML page from an HTML string directly inside the Worker script.

    Return JSON

    Return JSON directly from a Worker script, useful for building APIs and middleware.

    Rewrite links

    Rewrite URL links in HTML using the HTMLRewriter. This is useful for JAMstack websites.

    Set security headers

    Set common security headers (X-XSS-Protection, X-Frame-Options, X-Content-Type-Options, Permissions-Policy, Referrer-Policy, Strict-Transport-Security, Content-Security-Policy).

    Sign requests

    Verify a signed request using the HMAC and SHA-256 algorithms or return a 403.

    Turnstile with Workers

    Inject [Turnstile](/turnstile/) implicitly into HTML elements using the HTMLRewriter runtime API.

    Using the WebSockets API

    Use the WebSockets API to communicate in real time with your Cloudflare Workers.
     
    import { ResourcesBySelector } from "~/components";
    

    <ResourcesBySelector
      directory="workers/examples/"
      types={["example"]}
      filterables={["languages", "tags"]}
    />

    Inputs

    • directory string

      The directory to search for resources in, relative to src/content/docs/. For example, for Workers tutorials, directory="workers/tutorials/".

    • filterables string[]

      An array of frontmatter properties to show in the frontend filter dropdown. For example, filterables={["languages", "tags"]} will allow users to filter based on each pages languages and tags frontmatter.

    • types string[]

      An array of pcx_content_type values to filter which content gets pulled into the component. For example, types={["example"]}.

    • tags string[] optional

      An array of tags values to filter which content gets pulled into the component. For example, tags={["AI"]}.

      To see a list of the available tags, and which pages are associated with them, refer to this list.

    • products string[] optional

      An array of products values to filter which content gets pulled into the component. For example, products={["D1"]}.