feat: Add structured data audit features including JSON-LD and Schema…

src/view/frontend/web/css/toolbar.css

@@ -14,6 +14,7 @@
 @import url("toolbar/_menu.css");
 @import url("toolbar/_groups.css");
 @import url("toolbar/_findings.css");
+@import url("toolbar/_jsonld-viewer.css");
 @import url("toolbar/_highlights.css");
 @import url("toolbar/_feedback.css");
 @import url("toolbar/_animations.css");

src/view/frontend/web/css/toolbar/_groups.css

@@ -102,6 +102,11 @@
   background: rgba(20, 184, 166, 0.1);
 }
 
+.mageforge-toolbar-tab-btn[data-tab="structured-data"].mageforge-tab-active {
+  color: var(--mageforge-group-color-structured-data);
+  background: rgba(217, 70, 239, 0.1);
+}
+
 /* Left-edge indicator bar on active tab */
 
 .mageforge-toolbar-tab-btn.mageforge-tab-active::before {
@@ -144,6 +149,10 @@
   color: var(--mageforge-group-color-seo);
 }
 
+.mageforge-toolbar-tab-btn[data-tab="structured-data"] .mageforge-tab-icon {
+  color: var(--mageforge-group-color-structured-data);
+}
+
 .mageforge-tab-label {
   display: block;
   white-space: normal;
@@ -578,3 +587,8 @@
   .mageforge-toolbar-menu-icon {
   color: var(--mageforge-group-color-seo);
 }
+
+.mageforge-toolbar-menu-item[data-group-key="structured-data"]
+  .mageforge-toolbar-menu-icon {
+  color: var(--mageforge-group-color-structured-data);
+}

src/view/frontend/web/css/toolbar/_jsonld-viewer.css

@@ -0,0 +1,287 @@
+/**
+ * MageForge Toolbar – JSON-LD Viewer styles
+ *
+ * @package OpenForgeProject\MageForge
+ * @license GPL-3.0
+ */
+
+.mageforge-jsonld-viewer-open {
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.mageforge-jsonld-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mageforge-border-color);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.mageforge-jsonld-count {
+  color: var(--mageforge-text-secondary, rgba(148, 163, 184, 0.8));
+}
+
+.mageforge-jsonld-errors {
+  color: var(--mageforge-color-red);
+  background: var(--mageforge-color-red-alpha-15);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.mageforge-jsonld-warnings {
+  color: var(--mageforge-color-amber);
+  background: var(--mageforge-color-amber-alpha-15);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.mageforge-jsonld-empty {
+  padding: 12px;
+  margin: 0;
+  font-size: 11px;
+  color: var(--mageforge-color-amber);
+  font-style: italic;
+}
+
+.mageforge-jsonld-block {
+  border-bottom: 1px solid var(--mageforge-border-color);
+}
+
+.mageforge-jsonld-block:last-child {
+  border-bottom: none;
+}
+
+.mageforge-jsonld-block--error .mageforge-jsonld-block-header {
+  color: var(--mageforge-color-red);
+}
+
+.mageforge-jsonld-block--warning .mageforge-jsonld-block-header {
+  color: var(--mageforge-color-amber);
+}
+
+/* Validation badge in block header */
+.mageforge-jsonld-val-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1.5;
+  vertical-align: middle;
+}
+
+.mageforge-jsonld-val-badge--error {
+  background: var(--mageforge-color-red-alpha-15);
+  color: var(--mageforge-color-red);
+  border: 1px solid var(--mageforge-color-red-alpha-35);
+}
+
+.mageforge-jsonld-val-badge--warning {
+  background: var(--mageforge-color-amber-alpha-15);
+  color: var(--mageforge-color-amber);
+  border: 1px solid var(--mageforge-color-amber-alpha-35);
+}
+
+/* Validation issues list */
+.mageforge-jsonld-issues {
+  list-style: none;
+  margin: 0 0 8px;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mageforge-jsonld-issue {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.mageforge-jsonld-issue svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.mageforge-jsonld-issue--error {
+  color: var(--mageforge-color-red);
+}
+
+.mageforge-jsonld-issue--warning {
+  color: var(--mageforge-color-amber);
+}
+
+.mageforge-jsonld-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--mageforge-text-primary, rgba(248, 250, 252, 0.9));
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--mageforge-font-family);
+  transition: background 0.15s ease;
+}
+
+.mageforge-jsonld-block-header:hover {
+  background: var(--mageforge-surface-glass-hover);
+}
+
+.mageforge-jsonld-block-type {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.mageforge-jsonld-chevron {
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: transform 0.2s ease;
+}
+
+.mageforge-jsonld-chevron--open {
+  transform: rotate(180deg);
+  opacity: 0.9;
+}
+
+.mageforge-jsonld-block-content {
+  padding: 0 12px 10px;
+  position: relative;
+}
+
+.mageforge-jsonld-parse-error {
+  margin: 4px 0 0;
+  padding: 6px 8px;
+  background: var(--mageforge-color-red-alpha-15);
+  border: 1px solid var(--mageforge-color-red-alpha-35);
+  border-radius: 4px;
+  font-size: 10px;
+  color: var(--mageforge-color-red);
+  word-break: break-word;
+}
+
+.mageforge-jsonld-pre {
+  margin: 0;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--mageforge-border-color);
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 260px;
+  font-size: 10px;
+  line-height: 1.6;
+}
+
+.mageforge-jsonld-pre code {
+  font-family:
+    "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New",
+    monospace;
+  color: var(--mageforge-text-primary, rgba(248, 250, 252, 0.9));
+  white-space: pre;
+}
+
+.mageforge-jsonld-copy-btn {
+  display: block;
+  margin-top: 6px;
+  padding: 3px 10px;
+  background: var(--mageforge-surface-glass);
+  border: 1px solid var(--mageforge-border-glass);
+  border-radius: 4px;
+  color: var(--mageforge-color-slate-400);
+  font-size: 10px;
+  font-family: var(--mageforge-font-family);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.mageforge-jsonld-copy-btn:hover {
+  background: var(--mageforge-surface-glass-hover);
+  color: var(--mageforge-color-white);
+}
+
+/* ── Schema.org Viewer ──────────────────────────────────────────────────── */
+
+.mageforge-schema-badge {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  background: var(--mageforge-color-fuchsia-alpha-15);
+  color: var(--mageforge-color-fuchsia-light);
+  border: 1px solid var(--mageforge-color-fuchsia-alpha-30);
+  line-height: 1.5;
+}
+
+.mageforge-schema-badge--rdfa {
+  background: rgba(251, 146, 60, 0.15);
+  color: var(--mageforge-color-orange);
+  border-color: rgba(251, 146, 60, 0.3);
+}
+
+.mageforge-schema-type-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0 6px;
+  border-bottom: 1px solid var(--mageforge-border-color);
+  margin-bottom: 4px;
+}
+
+.mageforge-schema-type-link {
+  font-size: 10px;
+  color: var(--mageforge-color-fuchsia-light);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.mageforge-schema-type-link:hover {
+  text-decoration: underline;
+}
+
+.mageforge-schema-props {
+  margin: 4px 0 0;
+  display: grid;
+  grid-template-columns: minmax(80px, max-content) 1fr;
+  gap: 2px 10px;
+  align-items: baseline;
+}
+
+.mageforge-schema-prop-name {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--mageforge-color-fuchsia-light);
+  white-space: nowrap;
+  padding: 2px 0;
+}
+
+.mageforge-schema-prop-value {
+  font-size: 10px;
+  color: var(--mageforge-text-primary, rgba(248, 250, 252, 0.9));
+  word-break: break-word;
+  padding: 2px 0;
+  margin: 0;
+}
+
+.mageforge-schema-prop-nested {
+  color: var(--mageforge-color-slate-400);
+  font-style: italic;
+}

src/view/frontend/web/css/toolbar/_variables.css

@@ -38,6 +38,11 @@
   --mageforge-group-color-html-quality: var(--mageforge-color-blue);
   --mageforge-group-color-performance: var(--mageforge-color-orange);
   --mageforge-group-color-seo: #14b8a6;
+  --mageforge-group-color-structured-data: #d946ef;
+  --mageforge-color-fuchsia: #d946ef;
+  --mageforge-color-fuchsia-alpha-15: rgba(217, 70, 239, 0.15);
+  --mageforge-color-fuchsia-alpha-30: rgba(217, 70, 239, 0.3);
+  --mageforge-color-fuchsia-light: #e879f9;
 
   /* Backgrounds */
   --mageforge-bg-dark: rgba(15, 23, 42, 0.98);

src/view/frontend/web/js/toolbar/audits/index.js

@@ -38,7 +38,9 @@ import renderBlockingScripts from "./render-blocking-scripts.js";
 import seoDuplicateMeta from "./seo-duplicate-meta.js";
 import seoHeadingHierarchy from "./seo-heading-hierarchy.js";
 import seoMissingCanonical from "./seo-missing-canonical.js";
-import seoMissingJsonLd from "./seo-missing-json-ld.js";
+import structuredMissingJsonLd from "./seo-missing-json-ld.js";
+import structuredJsonLdViewer from "./seo-json-ld-viewer.js";
+import schemaOrgViewer from "./schema-org-viewer.js";
 import seoMissingLang from "./seo-missing-lang.js";
 import seoMissingMetaDescription from "./seo-missing-meta-description.js";
 import seoMissingTitle from "./seo-missing-title.js";
@@ -50,6 +52,7 @@ import unsafeBlankTarget from "./unsafe-blank-target.js";
 /** @type {AuditGroup[]} */
 export const auditGroups = [
   { key: "seo", label: "SEO" },
+  { key: "structured-data", label: "Structured Data" },
   { key: "performance", label: "Performance" },
   { key: "html-quality", label: "HTML Quality" },
   { key: "wcag", label: "Accessibility" },
@@ -79,6 +82,8 @@ export const audits = [
   { ...seoMissingCanonical, group: "seo" },
   { ...seoMissingLang, group: "seo" },
   { ...seoHeadingHierarchy, group: "seo" },
-  { ...seoMissingJsonLd, group: "seo" },
   { ...seoDuplicateMeta, group: "seo" },
+  { ...structuredMissingJsonLd, group: "structured-data" },
+  { ...structuredJsonLdViewer, group: "structured-data" },
+  { ...schemaOrgViewer, group: "structured-data" },
 ];