diff --git a/packages/spec-dashboard/package.json b/packages/spec-dashboard/package.json index a30b08eab7a..392439fd8d7 100644 --- a/packages/spec-dashboard/package.json +++ b/packages/spec-dashboard/package.json @@ -36,7 +36,6 @@ }, "homepage": "https://github.com/microsoft/typespec#readme", "dependencies": { - "@emotion/react": "^11.14.0", "@fluentui/react-components": "~9.73.1", "@fluentui/react-icons": "^2.0.292", "@typespec/spec-coverage-sdk": "workspace:^", diff --git a/packages/spec-dashboard/src/components/coverage-overview.module.css b/packages/spec-dashboard/src/components/coverage-overview.module.css new file mode 100644 index 00000000000..f13209fca63 --- /dev/null +++ b/packages/spec-dashboard/src/components/coverage-overview.module.css @@ -0,0 +1,38 @@ +.section { + margin-bottom: 32px; + padding: 20px 24px; + background-color: var(--colorNeutralBackground2); + border-radius: var(--borderRadiusXLarge); + border: 1px solid var(--colorNeutralStroke2); +} + +.heading { + display: block; + margin-bottom: 16px; + color: var(--colorNeutralForeground1); +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 16px; +} + +.card { + background-color: var(--colorNeutralBackground1); + padding: 16px 16px 20px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-height: 100px; +} + +.card-name { + color: var(--colorNeutralForeground2); + min-height: calc(var(--lineHeightBase300)); + display: flex; + align-items: center; + text-align: center; +} diff --git a/packages/spec-dashboard/src/components/coverage-overview.tsx b/packages/spec-dashboard/src/components/coverage-overview.tsx index cdcd6b5de75..cd1f7c3b819 100644 --- a/packages/spec-dashboard/src/components/coverage-overview.tsx +++ b/packages/spec-dashboard/src/components/coverage-overview.tsx @@ -1,7 +1,8 @@ -import { Card, Text, tokens } from "@fluentui/react-components"; +import { Card, Text } from "@fluentui/react-components"; import { FunctionComponent, useMemo } from "react"; import { CoverageSummary } from "../apis.js"; import { GroupRatioColors, GroupRatios } from "../constants.js"; +import style from "./coverage-overview.module.css"; interface EmitterOverview { name: string; @@ -103,34 +104,11 @@ export const CoverageOverview: FunctionComponent = ({ } return ( -
- +
+ Coverage Overview -
+
{emitterOverviews.map((emitter) => ( ))} @@ -148,33 +126,11 @@ const EmitterOverviewCard: FunctionComponent = ({ emit const percentage = Math.floor(emitter.coverageRatio * 100); return ( - - + + {emitter.displayName} - + {percentage}% diff --git a/packages/spec-dashboard/src/components/dashboard-table.module.css b/packages/spec-dashboard/src/components/dashboard-table.module.css new file mode 100644 index 00000000000..b877add88c2 --- /dev/null +++ b/packages/spec-dashboard/src/components/dashboard-table.module.css @@ -0,0 +1,83 @@ +.table { + border-collapse: collapse; +} + +.table tr:nth-of-type(2n) { + background-color: var(--colorNeutralBackground3); +} + +.table td, +.table th { + border: 1px solid var(--colorNeutralStroke3); + height: 32px; +} + +.table th { + padding: 6px 13px; + background-color: var(--colorNeutralBackground1); +} + +.scenario-status-cell { + padding: 0; + width: 120px; +} + +.header-cell { + padding: 0 !important; +} + +.header-grid { + display: grid; + height: 100%; + grid-template-rows: auto 26px 32px; + grid-template-columns: 1fr 1fr; + border-bottom: 2px solid var(--colorNeutralStroke3); + grid-template-areas: + "name name" + "gen-version spec-version" + "status status"; +} + +.header-name { + grid-area: name; + border-bottom: 1px solid var(--colorNeutralStroke3); + padding: 5px; + text-align: center; + cursor: pointer; +} + +.header-name:hover { + background: var(--colorNeutralStroke3); +} + +.version { + font-size: 9pt; + font-weight: normal; + color: var(--colorNeutralForeground2); + padding: 5px; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + width: 60px; + overflow: hidden; +} + +.gen-version { + grid-area: gen-version; + border-right: 1px solid var(--colorNeutralStroke3); +} + +.spec-version { + grid-area: spec-version; +} + +.header-status { + grid-area: status; + border-top: 1px solid var(--colorNeutralStroke3); + height: 32px; +} + +.version-icon { + margin-right: 5px; + flex: 0 0 auto; +} diff --git a/packages/spec-dashboard/src/components/dashboard-table.tsx b/packages/spec-dashboard/src/components/dashboard-table.tsx index fc06aef8bdc..d511d7facc9 100644 --- a/packages/spec-dashboard/src/components/dashboard-table.tsx +++ b/packages/spec-dashboard/src/components/dashboard-table.tsx @@ -1,11 +1,10 @@ -import { css } from "@emotion/react"; -import { Popover, PopoverSurface, PopoverTrigger, tokens } from "@fluentui/react-components"; +import { mergeClasses, Popover, PopoverSurface, PopoverTrigger } from "@fluentui/react-components"; import { CodeBlock16Filled, Print16Filled } from "@fluentui/react-icons"; import { ScenarioManifest } from "@typespec/spec-coverage-sdk"; import { FunctionComponent, useCallback, useMemo, useState } from "react"; import { CoverageSummary, GeneratorCoverageSuiteReport } from "../apis.js"; -import { Colors } from "../constants.js"; import { getCompletedRatio } from "../utils/coverage-utils.js"; +import style from "./dashboard-table.module.css"; import { GeneratorInformation } from "./generator-information.js"; import { ScenarioGroupRatioStatusBox } from "./scenario-group-status.js"; import { ScenarioStatusBox } from "./scenario-status.js"; @@ -81,7 +80,7 @@ export const DashboardTable: FunctionComponent = ({ }); return ( - +
= ({ {languages.map((lang) => ( - ); }; -const TableStyles = css({ - borderCollapse: "collapse", - "& tr:nth-of-type(2n)": { - backgroundColor: tokens.colorNeutralBackground3, - }, - "& td, & th": { - border: `1px solid ${Colors.borderDefault}`, - height: "32px", - }, - "& th": { - padding: "6px 13px", - backgroundColor: tokens.colorNeutralBackground1, - }, -}); - -const ScenarioStatusCellStyles = css({ - padding: 0, - width: 120, -}); export interface GeneratorHeaderCellProps { status: number; @@ -211,34 +191,9 @@ export const GeneratorHeaderCell: FunctionComponent = displayName, }) => { return ( - + - diff --git a/packages/spec-dashboard/src/components/scenario-group-status.module.css b/packages/spec-dashboard/src/components/scenario-group-status.module.css new file mode 100644 index 00000000000..79b3a0a202c --- /dev/null +++ b/packages/spec-dashboard/src/components/scenario-group-status.module.css @@ -0,0 +1,8 @@ +.ratio-box { + height: 100%; + width: 100%; + display: flex; + color: var(--colorNeutralForegroundOnBrand); + align-items: center; + justify-content: center; +} diff --git a/packages/spec-dashboard/src/components/scenario-group-status.tsx b/packages/spec-dashboard/src/components/scenario-group-status.tsx index af3d5bf41ca..dc8b37253c3 100644 --- a/packages/spec-dashboard/src/components/scenario-group-status.tsx +++ b/packages/spec-dashboard/src/components/scenario-group-status.tsx @@ -1,7 +1,6 @@ -import { SerializedStyles, css } from "@emotion/react"; -import { tokens } from "@fluentui/react-components"; import { FunctionComponent } from "react"; import { GroupRatioColors, GroupRatios } from "../constants.js"; +import style from "./scenario-group-status.module.css"; export interface ScenarioGroupStatusRatioBoxProps { readonly ratio: number; @@ -10,36 +9,17 @@ export interface ScenarioGroupStatusRatioBoxProps { export const ScenarioGroupRatioStatusBox: FunctionComponent = ({ ratio, }) => { - let css = groupRatioStyles.bad; + let backgroundColor = GroupRatioColors.bad; for (const [key, expectedRatio] of Object.entries(GroupRatios)) { if (ratio >= expectedRatio) { - css = groupRatioStyles[key as keyof typeof GroupRatios]; + backgroundColor = GroupRatioColors[key as keyof typeof GroupRatios]; break; } } return ( -
+
{Math.floor(ratio * 100)}%
); }; - -const groupRatioStyles: Record = Object.fromEntries( - Object.entries(GroupRatioColors).map(([key, value]) => { - return [key, css({ backgroundColor: value })]; - }), -) as any; diff --git a/packages/spec-dashboard/src/components/scenario-status.module.css b/packages/spec-dashboard/src/components/scenario-status.module.css new file mode 100644 index 00000000000..88a064a842e --- /dev/null +++ b/packages/spec-dashboard/src/components/scenario-status.module.css @@ -0,0 +1,32 @@ +.status-box { + height: 100%; + width: 100%; + color: var(--colorNeutralForegroundOnBrand); + display: flex; + align-items: center; + justify-content: center; +} + +.pass { + background-color: #5e9732; +} + +.fail { + background-color: #ef3e36; +} + +.not-supported { + background-color: var(--colorNeutralStroke3); +} + +.not-applicable { + background-color: var(--colorNeutralStroke3); +} + +.not-implemented { + background-color: #ef3e36; +} + +.not-reported { + background-color: #ef3e36; +} diff --git a/packages/spec-dashboard/src/components/scenario-status.tsx b/packages/spec-dashboard/src/components/scenario-status.tsx index 757d3f9aeda..2b4aab06e24 100644 --- a/packages/spec-dashboard/src/components/scenario-status.tsx +++ b/packages/spec-dashboard/src/components/scenario-status.tsx @@ -1,5 +1,4 @@ -import { css } from "@emotion/react"; -import { tokens } from "@fluentui/react-components"; +import { mergeClasses } from "@fluentui/react-components"; import { Checkmark20Filled, ErrorCircle20Filled, @@ -9,7 +8,7 @@ import { } from "@fluentui/react-icons"; import { ScenarioStatus } from "@typespec/spec-coverage-sdk"; import { FunctionComponent } from "react"; -import { ScenarioStatusColors } from "../constants.js"; +import style from "./scenario-status.module.css"; export interface ScenarioStatusBoxProps { readonly status: ScenarioStatus | undefined; @@ -35,45 +34,27 @@ export const ScenarioStatusBox: FunctionComponent = ({ s } }; -const ScenarioStatusBoxStyles = css({ - height: "100%", - width: "100%", - color: tokens.colorNeutralForegroundOnBrand, - display: "flex", - alignItems: "center", - justifyContent: "center", -}); - export const PassStatus = () => ( -
+
); export const FailStatus = () => ( -
+
); export const NotSupportedStatus = () => ( -
+
); export const NotApplicableStatus = () => (
@@ -82,17 +63,14 @@ export const NotApplicableStatus = () => ( export const NotImplementedStatus = () => (
); export const NotReportedStatus = () => ( -
+
); diff --git a/packages/spec-dashboard/src/components/tier-filter.tsx b/packages/spec-dashboard/src/components/tier-filter.tsx index 539aa0188ab..44c83f786bd 100644 --- a/packages/spec-dashboard/src/components/tier-filter.tsx +++ b/packages/spec-dashboard/src/components/tier-filter.tsx @@ -1,5 +1,6 @@ import { Tab, TabList } from "@fluentui/react-components"; import { FunctionComponent } from "react"; +import style from "./dashboard.module.css"; export interface TierFilterProps { allTiers?: string[]; selectedTier?: string; @@ -19,7 +20,7 @@ export const TierFilterTabs: FunctionComponent = ({ } return ( -
+
{ diff --git a/packages/spec-dashboard/src/components/tree-table/row-label-cell.module.css b/packages/spec-dashboard/src/components/tree-table/row-label-cell.module.css new file mode 100644 index 00000000000..3dd6e2ebc45 --- /dev/null +++ b/packages/spec-dashboard/src/components/tree-table/row-label-cell.module.css @@ -0,0 +1,22 @@ +.cell { + min-width: 260px; + padding: 0 5px; +} + +.cell-expandable { + cursor: pointer; +} + +.content { + display: flex; + align-items: center; +} + +.caret { + transition: transform 0.2s linear; +} + +.label { + margin-left: 10px; + flex: 1; +} diff --git a/packages/spec-dashboard/src/components/tree-table/row-label-cell.tsx b/packages/spec-dashboard/src/components/tree-table/row-label-cell.tsx index 53141f3e5e2..8ddbd93404e 100644 --- a/packages/spec-dashboard/src/components/tree-table/row-label-cell.tsx +++ b/packages/spec-dashboard/src/components/tree-table/row-label-cell.tsx @@ -1,5 +1,6 @@ import { Button, + mergeClasses, Popover, PopoverSurface, PopoverTrigger, @@ -15,6 +16,7 @@ import { import { ScenarioData, ScenarioManifest } from "@typespec/spec-coverage-sdk"; import { FunctionComponent, useMemo } from "react"; import ReactMarkdown from "react-markdown"; +import style from "./row-label-cell.module.css"; import { ManifestTreeNode, TreeTableRow } from "./types.js"; export interface RowLabelCellProps { @@ -34,32 +36,13 @@ export const RowLabelCell: FunctionComponent = ({ row, manife const rowLabel = getLabelForRow(row); return (
+ {scenarioData ? ( = ({
-
-
+
+
+
{displayName ?? report?.generatorMetadata?.name ?? language}
@@ -250,38 +205,20 @@ export const GeneratorHeaderCell: FunctionComponent =
- + {report?.generatorMetadata?.version ?? "?"}
- + {report?.scenariosMetadata?.version ?? "?"}
-
+
@@ -289,18 +226,6 @@ export const GeneratorHeaderCell: FunctionComponent = ); }; -const versionStyles = css({ - fontSize: "9pt", - fontWeight: "normal", - color: Colors.lightText, - padding: 5, - textOverflow: "ellipsis", - whiteSpace: "nowrap", - display: "flex", - width: 60, - overflow: "hidden", -}); - function createTree(manifest: ScenarioManifest): ManifestTreeNode { const root: ManifestTreeNode = { name: "", fullName: "", children: {} }; diff --git a/packages/spec-dashboard/src/components/dashboard.module.css b/packages/spec-dashboard/src/components/dashboard.module.css new file mode 100644 index 00000000000..0078383db0e --- /dev/null +++ b/packages/spec-dashboard/src/components/dashboard.module.css @@ -0,0 +1,24 @@ +.summary-table { + margin: 5px; +} + +.specs-card { + margin: 5px; + flex: 0; +} + +.specs-row { + display: flex; +} + +.spacer { + height: 30px; +} + +.card { + width: 500px; +} + +.tier-filter { + margin-bottom: 20px; +} diff --git a/packages/spec-dashboard/src/components/dashboard.tsx b/packages/spec-dashboard/src/components/dashboard.tsx index b1daa51c938..62f15ff51a6 100644 --- a/packages/spec-dashboard/src/components/dashboard.tsx +++ b/packages/spec-dashboard/src/components/dashboard.tsx @@ -5,6 +5,7 @@ import { useTierFiltering } from "../hooks/use-tier-filtering.js"; import { TierConfig } from "../utils/tier-filtering-utils.js"; import { CoverageOverview } from "./coverage-overview.js"; import { DashboardTable } from "./dashboard-table.js"; +import style from "./dashboard.module.css"; import { InfoEntry, InfoReport } from "./info-table.js"; import { TierFilterTabs } from "./tier-filter.js"; @@ -34,7 +35,7 @@ export const Dashboard: FunctionComponent = ({ const summaryTables = filteredSummaries .filter((s) => !selectedTier || s.manifest.scenarios.length > 0) .map((coverageSummary, i) => ( -
+
= ({ )); const specsCardTable = coverageSummaries.map((coverageSummary, i) => ( -
+
)); @@ -61,8 +62,8 @@ export const Dashboard: FunctionComponent = ({ emitterDisplayNames={emitterDisplayNames} /> )} -
{specsCardTable}
-
+
{specsCardTable}
+
{summaryTables}
); @@ -76,7 +77,7 @@ const CadlRanchSpecsCard: FunctionComponent<{ const packageName = coverageSummary.manifest.packageName; return ( - + {heading}} /> [] }) => { return ( @@ -22,7 +23,7 @@ export const InfoEntry: FunctionComponent = ({ valueTitle, }) => { return ( -
+ {value}
-
-
- {caret} -
-
- {rowLabel} -
-
+
+
{caret}
+
{rowLabel}
+
{row.item.scenario && } {row.item.scenario && manifest.sourceUrl && ( diff --git a/packages/spec-dashboard/tsconfig.json b/packages/spec-dashboard/tsconfig.json index 08cb48ddb89..b83e151521e 100644 --- a/packages/spec-dashboard/tsconfig.json +++ b/packages/spec-dashboard/tsconfig.json @@ -6,9 +6,8 @@ "skipLibCheck": true, "noEmit": true, "jsx": "react-jsx", - "jsxImportSource": "@emotion/react", "lib": ["DOM", "ES2022"], - "types": ["vite/client", "@emotion/react"] + "types": ["vite/client"] }, "include": ["src"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 955abc38ea5..99e5c06ef65 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1964,9 +1964,6 @@ importers: packages/spec-dashboard: dependencies: - '@emotion/react': - specifier: ^11.14.0 - version: 11.14.0(@types/react@19.2.14)(react@19.2.4) '@fluentui/react-components': specifier: ~9.73.1 version: 9.73.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(scheduler@0.27.0) @@ -3484,47 +3481,9 @@ packages: '@emnapi/runtime@1.8.1': resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==} - '@emotion/babel-plugin@11.13.5': - resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==} - - '@emotion/cache@11.14.0': - resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==} - '@emotion/hash@0.9.2': resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} - '@emotion/memoize@0.9.0': - resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} - - '@emotion/react@11.14.0': - resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==} - peerDependencies: - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - - '@emotion/serialize@1.3.3': - resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==} - - '@emotion/sheet@1.4.0': - resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} - - '@emotion/unitless@0.10.0': - resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==} - - '@emotion/use-insertion-effect-with-fallbacks@1.2.0': - resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==} - peerDependencies: - react: '>=16.8.0' - - '@emotion/utils@1.4.2': - resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==} - - '@emotion/weak-memoize@0.4.0': - resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==} - '@epic-web/invariant@1.0.0': resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==} @@ -6362,9 +6321,6 @@ packages: '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} - '@types/parse-json@4.0.2': - resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} - '@types/plist@3.0.5': resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==} @@ -7256,10 +7212,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - babel-plugin-macros@3.1.0: - resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} - engines: {node: '>=10', npm: '>=6'} - bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -7845,9 +7797,6 @@ packages: resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==} engines: {node: '>= 0.6'} - convert-source-map@1.9.0: - resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} - convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} @@ -7886,10 +7835,6 @@ packages: cose-base@2.2.0: resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==} - cosmiconfig@7.1.0: - resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} - engines: {node: '>=10'} - cosmiconfig@9.0.0: resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==} engines: {node: '>=14'} @@ -8911,9 +8856,6 @@ packages: resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==} engines: {node: '>=4.0.0'} - find-root@1.1.0: - resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} - find-up-simple@1.0.1: resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==} engines: {node: '>=18'} @@ -9321,9 +9263,6 @@ packages: hmac-drbg@1.0.1: resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==} - hoist-non-react-statics@3.3.2: - resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} - hosted-git-info@4.1.0: resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==} engines: {node: '>=10'} @@ -11493,9 +11432,6 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - react-is@16.13.1: - resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -12091,10 +12027,6 @@ packages: source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} - source-map@0.5.7: - resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} - engines: {node: '>=0.10.0'} - source-map@0.6.1: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} @@ -12312,9 +12244,6 @@ packages: style-to-object@1.0.14: resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==} - stylis@4.2.0: - resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} - stylis@4.3.6: resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==} @@ -13540,10 +13469,6 @@ packages: resolution: {integrity: sha512-9F3myNmJzUN/679jycdMxqtydPSDRAarSj3wPiF7pchEPnO9Dg07Oc+gIYLqXR4L+g+FSEVXXv2+mr54StLFOg==} hasBin: true - yaml@1.10.2: - resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} - engines: {node: '>= 6'} - yaml@2.7.1: resolution: {integrity: sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==} engines: {node: '>= 14'} @@ -14746,70 +14671,8 @@ snapshots: tslib: 2.8.1 optional: true - '@emotion/babel-plugin@11.13.5': - dependencies: - '@babel/helper-module-imports': 7.28.6 - '@babel/runtime': 7.28.6 - '@emotion/hash': 0.9.2 - '@emotion/memoize': 0.9.0 - '@emotion/serialize': 1.3.3 - babel-plugin-macros: 3.1.0 - convert-source-map: 1.9.0 - escape-string-regexp: 4.0.0 - find-root: 1.1.0 - source-map: 0.5.7 - stylis: 4.2.0 - transitivePeerDependencies: - - supports-color - - '@emotion/cache@11.14.0': - dependencies: - '@emotion/memoize': 0.9.0 - '@emotion/sheet': 1.4.0 - '@emotion/utils': 1.4.2 - '@emotion/weak-memoize': 0.4.0 - stylis: 4.2.0 - '@emotion/hash@0.9.2': {} - '@emotion/memoize@0.9.0': {} - - '@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4)': - dependencies: - '@babel/runtime': 7.28.6 - '@emotion/babel-plugin': 11.13.5 - '@emotion/cache': 11.14.0 - '@emotion/serialize': 1.3.3 - '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.4) - '@emotion/utils': 1.4.2 - '@emotion/weak-memoize': 0.4.0 - hoist-non-react-statics: 3.3.2 - react: 19.2.4 - optionalDependencies: - '@types/react': 19.2.14 - transitivePeerDependencies: - - supports-color - - '@emotion/serialize@1.3.3': - dependencies: - '@emotion/hash': 0.9.2 - '@emotion/memoize': 0.9.0 - '@emotion/unitless': 0.10.0 - '@emotion/utils': 1.4.2 - csstype: 3.2.3 - - '@emotion/sheet@1.4.0': {} - - '@emotion/unitless@0.10.0': {} - - '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.4)': - dependencies: - react: 19.2.4 - - '@emotion/utils@1.4.2': {} - - '@emotion/weak-memoize@0.4.0': {} - '@epic-web/invariant@1.0.0': {} '@esbuild/aix-ppc64@0.25.12': @@ -18767,8 +18630,6 @@ snapshots: '@types/normalize-package-data@2.4.4': {} - '@types/parse-json@4.0.2': {} - '@types/plist@3.0.5': dependencies: '@types/node': 25.3.0 @@ -20135,12 +19996,6 @@ snapshots: dependencies: '@babel/core': 7.29.0 - babel-plugin-macros@3.1.0: - dependencies: - '@babel/runtime': 7.28.6 - cosmiconfig: 7.1.0 - resolve: 1.22.11 - bail@2.0.2: {} balanced-match@1.0.2: {} @@ -20773,8 +20628,6 @@ snapshots: content-type@1.0.5: {} - convert-source-map@1.9.0: {} - convert-source-map@2.0.0: {} convert-to-spaces@1.0.2: {} @@ -20806,14 +20659,6 @@ snapshots: dependencies: layout-base: 2.0.1 - cosmiconfig@7.1.0: - dependencies: - '@types/parse-json': 4.0.2 - import-fresh: 3.3.1 - parse-json: 5.2.0 - path-type: 4.0.0 - yaml: 1.10.2 - cosmiconfig@9.0.0(typescript@5.9.3): dependencies: env-paths: 2.2.1 @@ -22152,8 +21997,6 @@ snapshots: dependencies: array-back: 3.1.0 - find-root@1.1.0: {} - find-up-simple@1.0.1: {} find-up@3.0.0: @@ -22757,10 +22600,6 @@ snapshots: minimalistic-assert: 1.0.1 minimalistic-crypto-utils: 1.0.1 - hoist-non-react-statics@3.3.2: - dependencies: - react-is: 16.13.1 - hosted-git-info@4.1.0: dependencies: lru-cache: 6.0.0 @@ -25412,8 +25251,6 @@ snapshots: react: 19.2.4 react-dom: 19.2.4(react@19.2.4) - react-is@16.13.1: {} - react-is@17.0.2: {} react-markdown@10.1.0(@types/react@19.2.14)(react@19.2.4): @@ -26243,8 +26080,6 @@ snapshots: buffer-from: 1.1.2 source-map: 0.6.1 - source-map@0.5.7: {} - source-map@0.6.1: {} source-map@0.7.6: {} @@ -26479,8 +26314,6 @@ snapshots: dependencies: inline-style-parser: 0.2.7 - stylis@4.2.0: {} - stylis@4.3.6: {} suf-log@2.5.3: @@ -27650,8 +27483,6 @@ snapshots: vscode-uri: 3.1.0 yaml: 2.7.1 - yaml@1.10.2: {} - yaml@2.7.1: {} yaml@2.8.2: {} diff --git a/website/src/pages/can-i-use/http.astro b/website/src/pages/can-i-use/http.astro index ac53e455c05..c47da04b534 100644 --- a/website/src/pages/can-i-use/http.astro +++ b/website/src/pages/can-i-use/http.astro @@ -5,6 +5,7 @@ import { DashboardFromAzureStorage, type CoverageFromAzureStorageOptions, } from "@typespec/spec-dashboard"; +import "@typespec/spec-dashboard/style.css"; const options: CoverageFromAzureStorageOptions = { storageAccountName: "typespec",