studiocms 0.1.0-beta.10

package/dist/lib/webVitals/dashboard-grid-items/CoreVitals.astro

@@ -0,0 +1,66 @@
+---
+import { getWebVitals } from 'studiocms-dashboard:web-vitals';
+import { TabItem, Tabs } from 'studiocms:ui/components';
+import { CoreWebVitals } from '../consts.js';
+import SummaryCard from './SummaryCard.astro';
+
+const webVitals = await getWebVitals();
+
+const twentyFourHourSummary = CoreWebVitals.map((metric) => ({
+	metric,
+	summary: webVitals.twentyFourHours.summary[metric],
+}));
+
+const sevenDaySummary = CoreWebVitals.map((metric) => ({
+	metric,
+	summary: webVitals.sevenDays.summary[metric],
+}));
+
+const thirtyDaySummary = CoreWebVitals.map((metric) => ({
+	metric,
+	summary: webVitals.thirtyDays.summary[metric],
+}));
+
+const summaries = CoreWebVitals.map((metric) => ({
+	metric,
+	summary: webVitals.summary[metric],
+}));
+---
+<Tabs variant={'starlight'}>
+    <TabItem label='24 Hours'>
+        <div class="flex-wrap">
+            {twentyFourHourSummary.map(({ metric, summary }) => (
+                <SummaryCard {metric} {summary} />
+            ))}
+        </div>
+    </TabItem>
+    <TabItem label='7 Days'>
+        <div class="flex-wrap">
+            {sevenDaySummary.map(({ metric, summary }) => (
+                <SummaryCard {metric} {summary} />
+            ))}
+        </div>
+    </TabItem>
+    <TabItem label='30 Days'>
+        <div class="flex-wrap">
+            {thirtyDaySummary.map(({ metric, summary }) => (
+                <SummaryCard {metric} {summary} />
+            ))}
+        </div>
+    </TabItem>
+    <TabItem label='All Time'>
+        <div class="flex-wrap">
+            {summaries.map(({ metric, summary }) => (
+                <SummaryCard {metric} {summary} />
+            ))}
+        </div>
+    </TabItem>
+</Tabs>
+
+<style>
+    .flex-wrap {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: .5rem;
+    }
+</style>

package/dist/lib/webVitals/dashboard-grid-items/MetricCard.astro

@@ -0,0 +1,24 @@
+---
+import './metric.css';
+import { type HeroIconName, Icon } from 'studiocms:ui/components';
+import { WEB_VITALS_METRIC_LABELS } from '../consts.js';
+import type { WebVitalsMetricType, WebVitalsRating } from '../schemas.js';
+import { ratingCardClasses, ratingIcons, ratingText } from './shared.js';
+
+interface Props {
+	metric: WebVitalsMetricType;
+	rating?: WebVitalsRating;
+}
+
+const { metric, rating } = Astro.props;
+const IconName: HeroIconName = rating ? ratingIcons[rating] : 'information-circle';
+const iconColor = rating ? ratingText[rating] : '';
+const cardColors = rating ? ratingCardClasses[rating] : 'border-gray bg-light-gray';
+---
+<article class={`metric-card ${cardColors}`}>
+    <h4 class="metric-title">
+        <span class={`icon ${iconColor}`}><Icon name={IconName} height={24} width={24} /></span>
+        {WEB_VITALS_METRIC_LABELS[metric]} ({metric})
+    </h4>
+    <slot />
+</article>

package/dist/lib/webVitals/dashboard-grid-items/SummaryCard.astro

@@ -0,0 +1,56 @@
+---
+import './metric.css';
+import { Icon } from 'studiocms:ui/components';
+import type { WebVitalsMetricType } from '../schemas.js';
+import type { WebVitalsMetricSummary } from '../types.js';
+import MetricCard from './MetricCard.astro';
+import { barSegments, ratingText, webVitalsMetricFormatters } from './shared.js';
+
+interface Props {
+	metric: WebVitalsMetricType;
+	summary?: WebVitalsMetricSummary | undefined;
+}
+
+const { metric, summary } = Astro.props;
+
+let message: string | undefined;
+
+if (!summary || !summary.percentiles.p75) {
+	message = 'Not enough data yet';
+}
+
+const { p75 } = summary?.percentiles || {};
+
+const { rating, value } = p75 || {};
+
+const format =
+	webVitalsMetricFormatters[metric as keyof typeof webVitalsMetricFormatters] || ((v) => v);
+---
+<MetricCard metric={metric} rating={rating}>
+    {message ? (
+        <p class="no-data-text">{message}</p>
+    ) : (
+        <>
+            <p class="metric-value" class:list={[rating && ratingText[rating]]}>{format(value!)}</p>
+            <div class="distribution-container">
+                {/* p75 marker */}
+                <span aria-hidden="true" class="p75-marker" class:list={[rating && ratingText[rating]]}>
+                    <span class="marker-text">p75</span>
+                    <Icon name="chevron-down-16-solid" width={16} height={16} />
+                </span>
+                {/* Distribution bar */}
+                <p class="distribution-bar">
+                    <span class="sr-only">Distribution:</span>
+                    {summary && Object.entries(summary.histogram).map(([rating, density]) =>
+                        density ? (
+                            <span
+                                class:list={[barSegments[rating as "good" | "needs-improvement" | "poor"]]}
+                                style={`width: ${density * 100}%;`}
+                            ></span>
+                        ) : null
+                    )}
+                </p>
+            </div>
+        </>
+    )}
+</MetricCard>

package/dist/lib/webVitals/dashboard-grid-items/metric.css

@@ -0,0 +1,103 @@
+.metric-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-lg);
+  gap: 1rem;
+  border: 1px solid hsl(var(--border));
+  padding: 1rem;
+  background-color: hsl(var(--background-step-1));
+  p {
+    margin: 0;
+  }
+  h4 {
+    margin: 0;
+  }
+}
+.metric-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: bold;
+}
+.icon {
+  flex-shrink: 0;
+  height: 24px;
+}
+.border-gray {
+  border-color: hsl(var(--border));
+}
+.bg-light-gray {
+  background-color: hsl(var(--background-step-1));
+}
+.no-data-text {
+  margin: auto;
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: hsl(var(--text-muted));
+}
+.metric-value {
+  font-size: 1.875rem;
+  font-weight: 400;
+  line-height: 1;
+}
+.distribution-container {
+  position: relative;
+}
+.p75-marker {
+  position: absolute;
+  left: 50%;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-100%);
+}
+.marker-text {
+  height: .8rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+.distribution-bar {
+  display: flex;
+  height: 1rem;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+}
+.good {
+  background-color: hsl(var(--success-base));
+}
+.needs-improvement {
+  background-color: hsl(var(--warning-base));
+}
+.poor {
+  background-color: hsl(var(--danger-base));
+}
+.text-green-600 {
+  color: hsl(var(--success-base));
+}
+.text-yellow-600 {
+  color: hsl(var(--warning-base));
+}
+.text-red-600 {
+  color: hsl(var(--danger-base));
+}
+.border-green-600 {
+  border-color: hsl(var(--success-base));
+}
+.bg-green-100 {
+  background-color: hsl(var(--success-flat));
+}
+.border-yellow-600 {
+  border-color: hsl(var(--warning-base));
+}
+.bg-yellow-100 {
+  background-color: hsl(var(--warning-flat));
+}
+.border-red-600 {
+  border-color: hsl(var(--danger-base));
+}
+.bg-red-100 {
+  background-color: hsl(var(--danger-flat));
+}

package/dist/lib/webVitals/dashboard-grid-items/shared.d.ts

@@ -0,0 +1,29 @@
+import type { HeroIconName } from 'studiocms:ui/components';
+export declare const ratingIcons: {
+    good: HeroIconName;
+    'needs-improvement': HeroIconName;
+    poor: HeroIconName;
+};
+export declare const ratingText: {
+    good: string;
+    'needs-improvement': string;
+    poor: string;
+};
+export declare const ratingCardClasses: {
+    good: string;
+    'needs-improvement': string;
+    poor: string;
+};
+export declare const webVitalsMetricFormatters: {
+    CLS: (v: number) => string;
+    FCP: (v: number) => string;
+    FID: (v: number) => string;
+    LCP: (v: number) => string;
+    TTFB: (v: number) => string;
+    INP: (v: number) => string;
+};
+export declare const barSegments: {
+    good: string;
+    'needs-improvement': string;
+    poor: string;
+};

package/dist/lib/webVitals/dashboard-grid-items/shared.js

@@ -0,0 +1,35 @@
+const ratingIcons = {
+  good: "check-circle",
+  "needs-improvement": "exclamation-circle",
+  poor: "x-circle"
+};
+const ratingText = {
+  good: "text-green-600",
+  "needs-improvement": "text-yellow-600",
+  poor: "text-red-600"
+};
+const ratingCardClasses = {
+  good: "border-green-600 bg-green-100",
+  "needs-improvement": "border-yellow-600 bg-yellow-100",
+  poor: "border-red-600 bg-red-100"
+};
+const webVitalsMetricFormatters = {
+  CLS: (v) => v.toFixed(0),
+  FCP: (v) => v.toFixed(0),
+  FID: (v) => v.toFixed(0),
+  LCP: (v) => `${Math.floor(Math.round(v * 100) / 100)} ms`,
+  TTFB: (v) => v.toFixed(0),
+  INP: (v) => `${v.toFixed(0)} ms`
+};
+const barSegments = {
+  good: "good",
+  "needs-improvement": "needs-improvement",
+  poor: "poor"
+};
+export {
+  barSegments,
+  ratingCardClasses,
+  ratingIcons,
+  ratingText,
+  webVitalsMetricFormatters
+};

package/dist/lib/webVitals/pages/analytics/body.astro

@@ -0,0 +1,186 @@
+---
+import { Card, TabItem, Tabs } from 'studiocms:ui/components';
+import { CoreWebVitals } from '../../consts.js';
+import SummaryCard from '../../dashboard-grid-items/SummaryCard.astro';
+import { buildPageRouteDataObject } from '../../utils/buildPageRouteDataObject';
+import { getWebVitals } from '../../webVital.js';
+
+const { summary: coreVitalSummary, routeSummary, raw: rawVitals } = await getWebVitals();
+
+const summaries = CoreWebVitals.map((metric) => ({
+	metric,
+	summary: coreVitalSummary[metric],
+}));
+
+const {
+	perRouteData: analyticData,
+	last24HoursData: analytics24Hours,
+	last30DaysData: analytics30Days,
+	last7DaysData: analytics7Days,
+} = buildPageRouteDataObject(rawVitals);
+
+const ratingText = {
+	good: 'Good',
+	'needs-improvement': 'Needs Improvement',
+	poor: 'Poor',
+};
+---
+<div class="analytics-container">
+
+    <Tabs variant='starlight' syncKey='analytics'>
+        <TabItem label="Core Web Vitals">
+            <div class="flex-column">
+                <Card fullWidth>
+                    <div slot="header"><span>Core Web Vitals Summaries</span></div>
+                    <div class="flex-wrap">
+                        {summaries.map(({ metric, summary }) => (
+                            <SummaryCard {metric} {summary} />
+                        ))}
+                    </div>
+                </Card>
+            
+                <Card fullWidth>
+                    <div slot="header"><span>Core Web Vitals by Route</span></div>
+                    <div>
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Route</th> <th>Passing?</th> <th>LCP</th> <th>INP</th> <th>CLS</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {routeSummary.map(({ route, metrics, passingCoreWebVitals }) => (
+                                    <tr>
+                                        <td>{route}</td>
+                                        <td><span class:list={[passingCoreWebVitals ? 'good' : 'needs-improvement']}>{passingCoreWebVitals ? 'Yes' : 'No'}</span></td>
+                                        <td><span class:list={[metrics.LCP.rating]}>{ratingText[metrics.LCP.rating]}</span></td>
+                                        <td><span class:list={[metrics.INP.rating]}>{ratingText[metrics.INP.rating]}</span></td>
+                                        <td><span class:list={[metrics.CLS.rating]}>{ratingText[metrics.CLS.rating]}</span></td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </Card>
+            </div>
+        </TabItem>
+        <TabItem label="Analytics">
+            <Card fullWidth>
+                <div slot="header"><span>Analytics</span></div>
+                <div>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Page Path</th> 
+                                <th>Views (24 Hours)</th>
+                                <th>Views (7 Days)</th>
+                                <th>Views (30 Days)</th>
+                                <th>Views (All Time)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {analyticData.map(({ pagePathname, analyticData: { pageViews } }) => (
+                                <tr>
+                                    <td>{pagePathname}</td>
+                                    <td>{analytics24Hours.find((data) => data.pagePathname === pagePathname)?.analyticData.pageViews}</td>
+                                    <td>{analytics7Days.find((data) => data.pagePathname === pagePathname)?.analyticData.pageViews}</td>
+                                    <td>{analytics30Days.find((data) => data.pagePathname === pagePathname)?.analyticData.pageViews}</td>
+                                    <td>{pageViews}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </Card>
+        </TabItem>
+    </Tabs>
+
+</div>
+
+<style>
+    .analytics-container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .flex-wrap {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: .5rem;
+        margin-bottom: 1rem;
+    }
+
+    .flex-column {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .flex-column-center {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        align-items: center;
+    }
+
+    .flex-row {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    th {
+        text-align: left;
+        padding: .5rem;
+        border-bottom: 1px solid hsl(var(--border));
+    }
+
+    td {
+        padding: .5rem;
+        border-bottom: 1px solid hsl(var(--border));
+        background-color: inherit;
+
+        span {
+            background-color: inherit;
+        }
+    }
+
+    span.good {
+        color: hsl(var(--success-base));
+    }
+
+    span.needs-improvement {
+        color: hsl(var(--warning-base)); 
+    }
+
+    span.poor {
+        color: hsl(var(--danger-base));
+    }
+
+    tr {
+        border-bottom: 1px solid hsl(var(--border));
+    }
+
+
+    tr:last-child {
+        border-bottom: none;
+    }
+
+    tbody tr:nth-child(odd) {
+        background-color: hsl(var(--background-base));
+    }
+
+    tbody tr:nth-child(even) {
+        background-color: hsl(var(--background-step-1));
+    }
+
+
+</style>

package/dist/lib/webVitals/pages/analytics/header.astro

@@ -0,0 +1,42 @@
+---
+---
+<header class="page-header">
+    <div class="page-title-container">
+      <h1 class="page-title">Analytics & Web Vital Metrics</h1>
+    </div>
+    <div class="page-actions-container">
+      <slot />
+    </div>
+  </header>
+  <style>
+  .page-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    width: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  
+    & .page-title-container {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+      width: fit-content;
+  
+      & .page-title {
+        display: block;
+        width: fit-content;
+        margin: 0;
+      }
+    }
+  
+    & .page-actions-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 1rem;
+    }
+  }
+  </style>

package/dist/lib/webVitals/schemas.d.ts

@@ -0,0 +1,78 @@
+import { z } from 'astro/zod';
+/**
+ * Enum schema for Web Vitals rating.
+ *
+ * This schema defines the possible ratings for Web Vitals:
+ * - 'good': Indicates that the web vitals are performing well.
+ * - 'needs-improvement': Indicates that the web vitals need improvement.
+ * - 'poor': Indicates that the web vitals are performing poorly.
+ */
+export declare const WebVitalsRatingSchema: z.ZodEnum<["good", "needs-improvement", "poor"]>;
+/**
+ * Type representing the inferred type of the WebVitalsRatingSchema.
+ * This type is generated using the `z.infer` utility from the `zod` library.
+ */
+export type WebVitalsRating = z.infer<typeof WebVitalsRatingSchema>;
+/**
+ * Enum schema for Core Web Vitals metric types.
+ *
+ * This schema defines the allowed values for Core Web Vitals metrics:
+ * - `CLS`: Cumulative Layout Shift
+ * - `INP`: Interaction to Next Paint
+ * - `LCP`: Largest Contentful Paint
+ *
+ * These metrics are used to measure the performance and user experience of web pages.
+ */
+export declare const CoreWebVitalsMetricTypeSchema: z.ZodEnum<["CLS", "INP", "LCP"]>;
+/**
+ * Type definition for Core Web Vitals metrics.
+ *
+ * This type is inferred from the `CoreWebVitalsMetricTypeSchema` schema using Zod.
+ * It represents the structure of the core web vitals metrics used in the application.
+ *
+ */
+export type CoreWebVitalsMetricType = z.infer<typeof CoreWebVitalsMetricTypeSchema>;
+/**
+ * Schema for Web Vitals Metric Types.
+ *
+ * This schema combines the `CoreWebVitalsMetricTypeSchema` with an enumeration
+ * of additional metric types: 'FCP', 'FID', and 'TTFB'.
+ *
+ * - `FCP`: First Contentful Paint
+ * - `FID`: First Input Delay
+ * - `TTFB`: Time to First Byte
+ */
+export declare const WebVitalsMetricTypeSchema: z.ZodUnion<[z.ZodEnum<["CLS", "INP", "LCP"]>, z.ZodEnum<["FCP", "FID", "TTFB"]>]>;
+/**
+ * Represents the type for Web Vitals metrics.
+ *
+ * This type is inferred from the `WebVitalsMetricTypeSchema` using Zod's `infer` utility.
+ * It is used to ensure that the metrics conform to the schema defined for Web Vitals.
+ *
+ * @see WebVitalsMetricTypeSchema
+ */
+export type WebVitalsMetricType = z.infer<typeof WebVitalsMetricTypeSchema>;
+/**
+ * Schema for summarizing route metrics.
+ *
+ * This schema defines a tuple with the following elements:
+ * 1. Route path (string)
+ * 2. Core web vitals metric type (CoreWebVitalsMetricTypeSchema)
+ * 3. Web vitals rating (WebVitalsRatingSchema)
+ * 4. Value (number, must be greater than or equal to 0)
+ * 5. Sample size (number)
+ */
+export declare const RouteSummaryRowSchema: z.ZodTuple<[z.ZodString, z.ZodEnum<["CLS", "INP", "LCP"]>, z.ZodEnum<["good", "needs-improvement", "poor"]>, z.ZodNumber, z.ZodNumber], null>;
+/**
+ * Schema for a summary row of web vitals metrics.
+ *
+ * The tuple consists of:
+ * - `WebVitalsMetricTypeSchema`: The type of web vitals metric.
+ * - `WebVitalsRatingSchema`: The rating of the web vitals metric.
+ * - `value`: A number representing the value of the metric, must be greater than or equal to 0.
+ * - `density`: A number representing the density of the metric, must be greater than or equal to 0.
+ * - `rating end`: A boolean indicating the end of the rating, derived from a union of 0 and 1.
+ * - `percentile`: A number representing the percentile of the metric, or null.
+ * - `sample size`: A number representing the sample size.
+ */
+export declare const MetricSummaryRowSchema: z.ZodTuple<[z.ZodUnion<[z.ZodEnum<["CLS", "INP", "LCP"]>, z.ZodEnum<["FCP", "FID", "TTFB"]>]>, z.ZodEnum<["good", "needs-improvement", "poor"]>, z.ZodNumber, z.ZodNumber, z.ZodEffects<z.ZodUnion<[z.ZodLiteral<0>, z.ZodLiteral<1>]>, boolean, 0 | 1>, z.ZodUnion<[z.ZodNumber, z.ZodNull]>, z.ZodNumber], null>;

package/dist/lib/webVitals/schemas.js

@@ -0,0 +1,37 @@
+import { z } from "astro/zod";
+const WebVitalsRatingSchema = z.enum(["good", "needs-improvement", "poor"]);
+const CoreWebVitalsMetricTypeSchema = z.enum(["CLS", "INP", "LCP"]);
+const WebVitalsMetricTypeSchema = CoreWebVitalsMetricTypeSchema.or(
+  z.enum(["FCP", "FID", "TTFB"])
+);
+const RouteSummaryRowSchema = z.tuple([
+  // route path
+  z.string(),
+  CoreWebVitalsMetricTypeSchema,
+  WebVitalsRatingSchema,
+  // value
+  z.number().gte(0),
+  // sample size
+  z.number()
+]);
+const MetricSummaryRowSchema = z.tuple([
+  WebVitalsMetricTypeSchema,
+  WebVitalsRatingSchema,
+  // value
+  z.number().gte(0),
+  // density
+  z.number().gte(0),
+  // rating end
+  z.union([z.literal(0), z.literal(1)]).transform(Boolean),
+  // percentile
+  z.number().or(z.null()),
+  // sample size
+  z.number()
+]);
+export {
+  CoreWebVitalsMetricTypeSchema,
+  MetricSummaryRowSchema,
+  RouteSummaryRowSchema,
+  WebVitalsMetricTypeSchema,
+  WebVitalsRatingSchema
+};