ABC Schema Package

Package providing JSON-LD schemas for SEO, optimized for tree shaking.

Usage

Import individual components (most optimized)

// Import individual SchemaRender components
import { HomeSchemaRender } from "abc-schema/home";
import { PracticeSchemaRender } from "abc-schema/practice";
import { AboutSchemaRender } from "abc-schema/about";

// Usage
<HomeSchemaRender url="/home" />
<PracticeSchemaRender
  title="Math Practice"
  url="/practice/math"
  description="Practice math problems"
  testName="SAT Math"
/>
<AboutSchemaRender
  description="About our platform"
  url="/about"
/>

Import all components

import {
  HomeSchemaRender,
  PracticeSchemaRender,
  AboutSchemaRender,
  ContactSchemaRender,
  PrivacySchemaRender,
} from "abc-schema/components";

Import schema data directly

// Import individual schemas
import { homeSchema } from "abc-schema/data";
import { practiceSchema } from "abc-schema/data";

// Or import multiple schemas at once
import {
  homeSchema,
  practiceSchema,
  aboutSchema,
  contactSchema,
  privacySchema,
} from "abc-schema/data";

Import everything from main index

import {
  // Components
  HomeSchemaRender,
  PracticeSchemaRender,
  AboutSchemaRender,
  ContactSchemaRender,
  PrivacySchemaRender,
  // Schema data
  homeSchema,
  practiceSchema,
  aboutSchema,
  contactSchema,
  privacySchema,
} from "abc-schema";

Available exports

Individual Components:

• abc-schema/home - HomeSchemaRender component
• abc-schema/practice - PracticeSchemaRender component (requires props: title, url, description, testName)
• abc-schema/about - AboutSchemaRender component (requires props: description)
• abc-schema/contact - ContactSchemaRender component
• abc-schema/privacy - PrivacySchemaRender component

Bulk Exports:

• abc-schema/components - All SchemaRender components
• abc-schema/data - All schema data functions/objects
• abc-schema - All components and schema data

Schema Data Available:

• aboutSchema(description) - Function to create AboutPage schema
• contactSchema - ContactPage schema object
• homeSchema - EducationalOrganization schema object
• practiceSchema(props) - Function to create Quiz schema
• privacySchema - WebPage schema object

Tree shaking usage examples

// Bundle only required component (most optimized)
import { HomeSchemaRender } from "abc-schema/home";
<HomeSchemaRender url="/home" />;

// Bundle only schema data
import { homeSchema } from "abc-schema/data";
const schema = homeSchema;

// Import multiple schema data at once
import { homeSchema, practiceSchema } from "abc-schema/data";

// Use schema data directly
const aboutData = aboutSchema("Our platform description");
const practiceData = practiceSchema({
  title: "Math Test",
  url: "/practice/math",
  description: "Practice math problems",
  testName: "SAT Math",
});

Development

Build

pnpm build

Package will build into separate files in the dist/ directory to support optimal tree shaking.

Testing

# Run all tests
pnpm test

# Run tests once
pnpm test:run

# Run tests with coverage
pnpm test:coverage

Package Structure

src/
├── components/
│   ├── AboutSchemaRender.tsx
│   ├── ContactSchemaRender.tsx
│   ├── HomeSchemaRender.tsx
│   ├── PracticeSchemaRender.tsx
│   ├── PrivacySchemaRender.tsx
│   └── index.ts
├── data/
│   ├── about.ts
│   ├── contact.ts
│   ├── home.ts
│   ├── practice.ts
│   ├── privacy.ts
│   └── index.ts
└── index.ts

Features

• ✅ Tree Shaking Optimized - Import only what you need
• ✅ TypeScript Support - Full type definitions
• ✅ React Components - Ready-to-use SchemaRender components
• ✅ JSON-LD Schema - Valid structured data for SEO
• ✅ 100% Test Coverage - Comprehensive test suite
• ✅ Zero Dependencies - Lightweight package
• ✅ Easy Prep Integration - Pre-configured for Easy Prep platform