Sitewide Contexts
Sitewide Contexts can be used to make rendering decisions in templates.
Be mindful that detail and other pages are cached by default on the CDN. If you make a Server-Side-Rendering decision based on a context, then it could be cached for all users. In order to render bot or personalized content, either Cache Bypass rules must be set up in the CDN or the context must only be used in Client-Side-Rendering code. Warning - never cache bot or personalized content!
Composability
Video - Designing for composability in Qwik
Video outline
- useContext vs. props in Qwik
- component reuse
- composability (atomic design)
- in site - [atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
- in other sites - [atomic design](https://qwik.dev/docs/advanced/containers/)
- component testing techniques
- encapsulation makes testing easier
- props - straightforward
- dependency injection - harder to understand
- scope determines the best way to access state
- separation of concerns - limit scope to minimum level
- sitewide environment (affects all components)
- useContext
- useLocation
- css Themes, etc.
- component environment
- props + useStore for encapsulation of data
- component DOM properties are also an underused option to store local state
Sitewide Contexts
useDev
{
"isDev": false,
"performance": {},
"timeStamp": 1775257937737
} useRender
{
"isBrandOrigin": false,
"isCsr": false,
"isDev": false,
"isFragment": false,
"isLib": true,
"isMinWidth0Rem": false,
"isMinWidth48Rem": false,
"isMinWidth64Rem": true,
"isProd": true,
"isSsr": false,
"route": {
"urlMatch": {
"include": "/docs/.+"
},
"error": {
"type": 404,
"errorPageUrl": "/docs/errors/search/404"
},
"routeType": "notFoundSearch",
"analyticsId": "unknown"
},
"isMobileUa": false,
"isTabletUa": false,
"isBotUa": true
} useReq
{
"headers": {
"accept": "*/*",
"accept-encoding": "gzip, br",
"cf-connecting-ip": "216.73.216.219",
"cf-ipcountry": "US",
"cf-ray": "9e6bc1dedb4e8043",
"cf-visitor": "{\"scheme\":\"https\"}",
"connection": "Keep-Alive",
"host": "swedish-site.pages.dev",
"user-agent": "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)",
"x-forwarded-proto": "https",
"x-real-ip": "216.73.216.219"
},
"url": "https://swedish-site.pages.dev/docs/contexts?config=piedmont",
"cf": {
"httpProtocol": "HTTP/2",
"clientAcceptEncoding": "gzip, deflate, br",
"requestPriority": "weight=16;exclusive=0;group=0;group-weight=0",
"edgeRequestKeepAliveStatus": 1,
"requestHeaderNames": {},
"clientTcpRtt": 1,
"clientQuicRtt": 0,
"colo": "CMH",
"asn": 16509,
"asOrganization": "Anthropic, PBC",
"country": "US",
"isEUCountry": false,
"city": "Columbus",
"continent": "NA",
"region": "Ohio",
"regionCode": "OH",
"timezone": "America/New_York",
"longitude": "-82.99879",
"latitude": "39.96118",
"postalCode": "43215",
"metroCode": "535",
"tlsVersion": "TLSv1.3",
"tlsCipher": "AEAD-AES256-GCM-SHA384",
"tlsClientRandom": "HWxzzMpgkpNUkU6EHB6DIuUY7MztgyCv83Gsqe/arjU=",
"tlsClientCiphersSha1": "WUS9+h7TjVkF9aEouGuCEMjGQGA=",
"tlsClientExtensionsSha1": "EVdOnGct77RV1uM1abGp4q55nAs=",
"tlsClientExtensionsSha1Le": "UqmomHkpGavgrZk4ETmfpf34q0A=",
"tlsExportedAuthenticator": {
"clientHandshake": "33729958c6a7919db435509608a1dc1d01577eb973ca7ee2a9947bec8e8a27c364c4f87139f5d0fc60820e0622b6000a",
"serverHandshake": "ff1564b6c6ddc153322a9678dfe0c3e5e62f1c2531db88fe08df22e4448d1a58562a9e80072fae0f5c2f687fd0ac724b",
"clientFinished": "9eab299e5c0fe37a4bb70cdeaceff2320d4150fda5fc0addc55d48db4fa109a0d9e9958f6d2b6e2becbfe9b8e10cae06",
"serverFinished": "091ec418b11c295449cc6e1b5303c55002f0eb74d9169f788fd4347c365db041d58c9fef6d225c10dea96015ebb8e0ed"
},
"tlsClientHelloLength": "258",
"tlsClientAuth": {
"certPresented": "0",
"certVerified": "NONE",
"certRevoked": "0",
"certIssuerDN": "",
"certSubjectDN": "",
"certIssuerDNRFC2253": "",
"certSubjectDNRFC2253": "",
"certIssuerDNLegacy": "",
"certSubjectDNLegacy": "",
"certSerial": "",
"certIssuerSerial": "",
"certSKI": "",
"certIssuerSKI": "",
"certFingerprintSHA1": "",
"certFingerprintSHA256": "",
"certNotBefore": "",
"certNotAfter": "",
"certRFC9440": "",
"certRFC9440TooLarge": false,
"certChainRFC9440": "",
"certChainRFC9440TooLarge": false
},
"verifiedBotCategory": "",
"edgeL4": {
"deliveryRate": 2310638
},
"pagesHostName": "swedish-site.pages.dev",
"botManagement": {
"corporateProxy": false,
"verifiedBot": false,
"jsDetection": {
"passed": false
},
"staticResource": false,
"detectionIds": {},
"score": 99
}
}
} useConfig
{
"api": {
"careNavPromoCategories": true,
"careSaytApi": "https://carenav-sayt.azurewebsites.net/CareSAYT",
"careSenseFacetsEnabled": false,
"fastPagesProdOrigin": "https://www.care.piedmont.org",
"omniCareNavSearchPath": "/api/carenav/category-results",
"omniCategoryPath": "/api/carenav/care-category-listing",
"omni500timeout": 10000,
"omniLocationCategoryPath": "/api/carenav/locations-categories",
"omniDataPath": "/api/OmniData",
"omniOrigin": "https://womphealthapi.azurewebsites.net",
"omniSearchFacetPath": "/api/OmniSearchFacets",
"omniSearchPath": "/api/OmniSearch",
"omniVersion": "1.0.0",
"omniVersionMajor": 1,
"omniVersionMinor": 0,
"omniVersionPatch": 0
},
"brand": "piedmont",
"booking": {
"locationVersion": "v2",
"clinicianVersion": "v3",
"proxyV3origin": "https://api.care.piedmont.org",
"clinicianApiV3": "/api",
"clinicianApi": "https://dexcareapi-piedmont.ampify.care/v3/providers/",
"clinicianApiV5": "/api/provider/timeslot/",
"clinicianScheduling": "https://scheduling.care.piedmont.org/provider",
"proxyV5origin": "https://api.care.piedmont.org",
"slotSearchApiKey": "c652b8f6-936f-4169-946f-2206bcd8a73d",
"slotSearchV5": "/v5/slots/search",
"careOptionApiKey": "womp-0ecd0b9c-cd90-434b-932e-7da04d1895f2",
"careOptionOrigin": "https://api.care.piedmont.org/v1/availability/slots",
"departmentOrigin": "https://api.care.piedmont.org/v1/departments/",
"locationTimeslotOrigin": "/api/location/timeslot/",
"retailScheduling": "https://scheduling.care.piedmont.org/retail/",
"aggregateVisitType": [
{
"visitTypeKey": "QuickCareVideoVisit117941",
"clinicType": "Retail"
}
],
"displayReturnVisitTypes": false,
"displayNewVisitTypes": true,
"useReasonForVisit": true,
"virtualVisitUrl": "/virtual-care",
"clinicianApiMs": "https://api.care.piedmont.org/v3/providers/",
"cacheDepartmentData": true,
"locationBookingData": "https://dexcareapi-piedmont.ampify.care/v1/departments/",
"locationBookingTimeslots": "https://dexcareapi-piedmont.ampify.care/v1/departments",
"locationScheduling": "https://scheduling.care.piedmont.org/retail"
},
"carecoreVersion": "v3.5.0",
"configOverrideParam": true,
"cssTheme": {
"--brand-color-primary-light": "225, 141, 51",
"--brand-color-primary": "193, 78, 45",
"--brand-color-primary-dark": "193, 78, 45",
"--brand-color-secondary-light": "225, 141, 51",
"--brand-color-secondary": "225, 141, 51",
"--brand-color-secondary-dark": "193, 78, 45",
"--brand-color-tertiary-light": "65, 146, 72",
"--brand-color-tertiary": "65, 146, 72",
"--brand-color-tertiary-dark": "65, 146, 72",
"--brand-color-quaternary-light": "100, 170, 250",
"--brand-color-quaternary": "100, 170, 250",
"--brand-color-quaternary-dark": "100, 170, 250",
"--brand-color-neutral-0": "0, 0, 0",
"--brand-color-neutral-10": "54, 54, 54",
"--brand-color-neutral-20": "72, 70, 76",
"--brand-color-neutral-30": "83, 83, 83",
"--brand-color-neutral-40": "178, 178, 178",
"--brand-color-neutral-50": "201, 201, 201",
"--brand-color-neutral-60": "203, 203, 203",
"--brand-color-neutral-70": "229, 231, 235",
"--brand-color-neutral-80": "236, 236, 236",
"--brand-color-neutral-90": "243, 243, 243",
"--brand-color-neutral-95": "252, 252, 252",
"--brand-color-neutral-99": "255, 251, 254",
"--brand-color-neutral-100": "255, 255, 255",
"--brand-color-link": "0, 83, 155",
"--brand-color-success": "65, 146, 72",
"--brand-color-warning": "255, 0, 0",
"--brand-color-rating-stars": "225, 141, 51",
"--brand-color-header": "54, 54, 54",
"--brand-button-border-radius": "0.25rem",
"--brand-button-border-width": "1px",
"--brand-input-border-radius": "0.25rem",
"--brand-input-open-border-radius": "20px",
"--brand-input-border-width": "1px",
"--brand-select-border-radius": "0.25rem",
"--brand-select-border-width": "1px",
"--brand-checkbox-border-radius": "2px",
"--brand-checkbox-border-width": "2px",
"--brand-panel-border-radius": "0px",
"--brand-font-family-body": "Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
"--brand-font-family-body2": "Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
"--brand-font-family-display": "Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
},
"displayDistance": true,
"dexPrefsMaxAge": "2592000",
"env": "prod",
"head": {
"links": [
{
"rel": "shortcut icon",
"href": "/piedmont/favicon.ico"
},
{
"rel": "preload",
"href": "/piedmont/fonts/roboto-300-normal.woff2",
"as": "font",
"type": "font/woff2",
"crossorigin": ""
},
{
"rel": "preload",
"href": "/piedmont/fonts/roboto-400-normal.woff2",
"as": "font",
"type": "font/woff2",
"crossorigin": ""
},
{
"rel": "preload",
"href": "/piedmont/fonts/roboto-500-normal.woff2",
"as": "font",
"type": "font/woff2",
"crossorigin": ""
},
{
"rel": "preload",
"href": "/piedmont/fonts/roboto-700-normal.woff2",
"as": "font",
"type": "font/woff2",
"crossorigin": ""
}
],
"meta": [
{
"name": "robots",
"content": "noindex, nofollow"
}
],
"styles": [
{
"style": "
@font-face {
font-family: \"Roboto\";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/piedmont/fonts/roboto-300-normal.woff2') format(\"woff2\");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: \"Roboto\";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('/piedmont/fonts/roboto-300-italic.woff2') format(\"woff2\");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: \"Roboto\";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/piedmont/fonts/roboto-400-normal.woff2') format(\"woff2\");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: \"Roboto\";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/piedmont/fonts/roboto-400-italic.woff2') format(\"woff2\");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: \"Roboto\";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/piedmont/fonts/roboto-500-normal.woff2') format(\"woff2\");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/piedmont/fonts/roboto-700-normal.woff2') format(\"woff2\");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: \"Roboto\";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('/piedmont/fonts/roboto-700-italic.woff2') format(\"woff2\");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
"
}
]
},
"images": {
"department": {
"transformations": "width=480,fit=cover",
"height": "160",
"sources": [
{
"media": "(min-width: 1024px)",
"transformations": "width=1024,fit=cover"
},
{
"media": "(min-width: 768px)",
"transformations": "width=768,fit=cover"
}
],
"styles": "departmentHeroImg aspect-video block h-36 w-full object-cover rounded-md min-[400px]:h-60 lg:w-[828px]",
"width": "auto"
},
"clinician": {
"transformations": "width=300,fit=cover",
"height": "200",
"placeholder": "https://womphealthwp.ampify.care/7910/Placeholder.png",
"styles": "clinicianHeroImg aspect-square w-[200px] max-w-none rounded-xl border border-solid",
"width": "200"
},
"useImageOptimizer": true
},
"map": {
"defaultLatLng": {
"lat": 33.80441,
"lng": -84.41425
},
"defaultLocation": "Atlanta, GA",
"defaultMarker": {
"markerType": "svg",
"elementString": "
<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"52\" viewBox=\"0 0 50 70\" fill=\"#c84b26\">
<path d='M23.0164 65.9543L23.1657 66.1684H23.1916C24.6865 68.0042 27.5944 67.9503 28.9836 65.9543C32.3385 61.1395 35.2121 57.0864 37.6687 53.6214C42.127 47.3332 45.2122 42.9818 47.309 39.5289C48.9416 36.8407 49.9943 34.6678 50.6355 32.5227C51.2779 30.3736 51.5 28.277 51.5 25.7506C51.5 11.7942 40.0847 0.5 26 0.5C11.9153 0.5 0.5 11.7942 0.5 25.7506C0.5 28.277 0.72208 30.3736 1.36449 32.5227C2.00572 34.6678 3.05844 36.8407 4.69097 39.5289C6.78784 42.9817 9.87301 47.3332 14.3312 53.6213C16.7879 57.0864 19.6615 61.1395 23.0164 65.9543ZM35.9133 25.7506C35.9133 31.1591 31.4753 35.5601 26 35.5601C20.5247 35.5601 16.0867 31.1591 16.0867 25.7506C16.0867 20.3421 20.5247 15.9412 26 15.9412C31.4753 15.9412 35.9133 20.3421 35.9133 25.7506Z' />
</svg>",
"fillColor": "#c84b26",
"strokeColor": "#cccccc"
},
"geoStorageName": "location",
"defaultCity": "Atlanta",
"defaultPostal": "30318",
"defaultRegion": "GA",
"defaultTimezone": "America/New_York",
"threshold": 50
},
"reviews": {
"useAlternateReviewsApi": true,
"alternateReviewsApi": "https://ratings.md/api/v1/widget/profiles"
},
"routes": {
"all": {
"scripts": [
{
"element": {
"cmp": "script",
"attr": {
"defer": true,
"src": "https://static.cloudflareinsights.com/beacon.min.js",
"data-cf-beacon": "{\"token\":\"922af61282d747d8b26c7f71fc0c4675\"}"
}
},
"insertTiming": "bodyEnd",
"key": "cloudflareCWVScript"
},
{
"element": {
"cmp": "script",
"attr": {
"type": "text/partytown"
},
"children": [
"(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://phi-protect-demo.azurewebsites.net/demo/(d3d3Lmdvb2dsZXRhZ21hbmFnZXIuY29t)/(Z3RtLmpz)?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5JDBLMZ8');"
]
},
"insertTiming": "endHead",
"key": "GTMScript"
},
{
"element": {
"cmp": "script",
"attr": {
"type": "application/json",
"id": "dcAnalyticsConfig"
},
"children": [
"{
\"adobe\": {
\"organizationId\": \"82961DB664F112A10A495E58@AdobeOrg\",
\"datastreamId\": \"aeabc636-4562-4c75-8fc0-78ed65038907\"
},
\"google\": {
\"dataLayerName\": \"dataLayer\"
},
\"isDebugEnabled\": false,
\"appType\": \"bfcache\"
}"
]
},
"insertTiming": "endHead",
"key": "dcAnalyticsConfig"
},
{
"element": {
"cmp": "script",
"attr": {
"async": true,
"src": "/api/proxy/https://dex-analytics.pages.dev/analytics.js"
}
},
"insertTiming": "endHead",
"key": "dexcareAnalyticsScript"
}
]
},
"docs": {
"headers": {
"Cache-Control": null
},
"urlMatch": {
"include": "^/(docs)?/?$"
},
"redirectAction": {
"action": "redirect",
"path": "/docs"
}
},
"docsNoStore": {
"headers": {
"Cache-Control": null
}
},
"fragmentSAYT": {
"headers": {
"Cache-Control": null,
"Cdn-Cache-Control": "max-age=604800, stale-if-error=86400"
}
},
"home": {
"headers": {
"Cache-Control": null,
"Cdn-Cache-Control": "max-age=43200, stale-if-error=86400"
},
"urlMatch": {
"include": "^(/docs/theme-\\d/)?/care-nav/?$"
},
"redirectAction": {
"action": "redirect",
"path": "/care-nav"
}
},
"location": {
"headers": {
"Cache-Control": null,
"Cdn-Cache-Control": "max-age=604800, stale-if-error=86400"
},
"urlMatch": {
"include": "^/(docs/theme-\\d/)?locations/[^/]+/[^/]+/[0-9]+/?$|^/(docs/theme-\\d/)?locations/[0-9]+/?$|^/(docs/theme-\\d/)?locations/[^/]+/[^/]+/?$"
},
"redirectAction": {
"action": "omniSearch",
"searchKey": "url",
"params": {
"locations": "true",
"providers": "false"
}
}
},
"clinician": {
"headers": {
"Cache-Control": null,
"Cdn-Cache-Control": "max-age=604800, stale-if-error=86400"
},
"urlMatch": {
"include": "^/(docs/theme-\\d/)?provider/[^/]+/[0-9]+/?$"
},
"search404Reg": "/provider/([^/]+)/[0-9]+/?$",
"redirectAction": {
"action": "omniSearch",
"searchKey": "profileUrls",
"params": {
"locations": "false",
"providers": "true"
}
},
"useSimilarClinicians": true
},
"searchCareCategory": {
"headers": {
"Cache-Control": null
}
},
"searchLocation": {
"headers": {
"Cache-Control": null
},
"urlMatch": {
"include": "^/(docs/theme-\\d/)?locations/?$"
},
"redirectAction": {
"action": "redirect",
"path": "/locations"
}
},
"searchClinician": {
"headers": {
"Cache-Control": null
},
"urlMatch": {
"include": "^/(docs/theme-\\d/)?providers/?$"
},
"redirectAction": {
"action": "redirect",
"path": "/providers"
}
},
"virtual": {
"headers": {
"Cache-Control": null,
"Cdn-Cache-Control": "max-age=604800, stale-if-error=86400"
}
},
"notFound": {
"urlMatch": {
"include": ".+",
"exclude": "/docs"
},
"error": {
"type": 404,
"errorPageUrl": "/errors/404"
}
},
"notFoundSearch": {
"urlMatch": {
"include": "/docs/.+"
},
"error": {
"type": 404,
"errorPageUrl": "/docs/errors/search/404"
}
}
},
"searchFacets": {
"acceptingNewPatientDisplay": true,
"videoVisit": true
},
"usePartyTown": true,
"isConfigActive": true
}