[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93576":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":9,"createdAt":9,"pushedAt":9,"updatedAt":21,"readmeContent":22,"aiSummary":9,"trendingCount":16,"starSnapshotCount":16,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},93576,"Ontology-Playground","microsoft\u002FOntology-Playground","microsoft","Free, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF\u002FXML, and share interactive diagrams. Zero backend, fully static.",null,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FOntology-Playground","TypeScript",1650,225,14,4,0,116,82.06,false,"main","2026-07-23 04:02:10","# Ontology Playground (Preview) ☕\n\n> Note: This project was developed with AI-assisted coding.\n\n**[Try it live → microsoft.github.io\u002FOntology-Playground](https:\u002F\u002Fmicrosoft.github.io\u002FOntology-Playground\u002F)**\n\n[![Ontology Playground screenshot](public\u002Fog-image.png)](https:\u002F\u002Fmicrosoft.github.io\u002FOntology-Playground\u002F)\n\nA free, open-source web application for learning about ontologies and\n**Microsoft Fabric IQ**. Explore pre-built ontologies, design your own in a\nvisual editor, export as RDF\u002FXML, and share interactive diagrams — all from a\nfully static site with zero backend dependencies.\n\n![Microsoft Fabric](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMicrosoft-Fabric-0078D4?style=flat-square&logo=microsoft)\n![React](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-19-61DAFB?style=flat-square&logo=react)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-5-3178C6?style=flat-square&logo=typescript)\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-green?style=flat-square)\n\n## Features\n\n### Interactive Graph Exploration\n\nCytoscape.js-powered graph that renders any ontology as an interactive\nnode-and-edge diagram. Pan, zoom, click nodes to inspect properties, and use\nthe live search bar to filter entities and relationships.\n\n### Ontology Catalogue\n\nA curated library of official and community-contributed ontologies spanning six\ndomains (Retail, E-Commerce, Healthcare, Finance, Manufacturing, Education).\nBrowse by category, search by name or tags, load any ontology with one click,\nand view its RDF source. Every ontology has a shareable deep link\n(`\u002F#\u002Fcatalogue\u002Fofficial\u002Fcosmic-coffee`).\n\n### Visual Ontology Designer\n\nA full-screen, split-pane editor for creating ontologies from scratch or\nediting existing ones. Add entity types with icons, colors, and typed\nproperties; define relationships with cardinalities; see a live graph preview\nthat updates as you work. Includes undo\u002Fredo (50 levels), real-time validation,\nand export to RDF\u002FXML or JSON.\n\n### RDF Import & Export\n\nFull round-trip support for RDF\u002FXML (OWL classes, datatype properties, object\nproperties with cardinalities). Import `.rdf` \u002F `.owl` files, export in the\nexact format Microsoft Fabric IQ expects, and verify fidelity with automated\nround-trip tests.\n\n### One-Click Catalogue PR\n\nSign in with GitHub (device flow) and submit your ontology to the community\ncatalogue directly from the designer — the app forks the repo, creates a\nbranch, commits the RDF + metadata, and opens a pull request automatically.\n\n### Embeddable Widget\n\nA self-contained JavaScript file (`ontology-embed.js`) that renders an\ninteractive ontology viewer on any web page with a single `\u003Cscript>` tag.\nSupports dark\u002Flight themes, multiple loading methods (catalogue ID, URL,\ninline base64), and click-to-inspect. See the\n[Embedding Guide](docs\u002Fembed-guide.md) for details.\n\n### Ontology School\n\nA structured learning hub (`\u002F#\u002Flearn`) with **9 courses** spanning conceptual\nlearning paths and hands-on labs:\n\n- **Ontology Fundamentals** — 6 articles covering core concepts (What is an\n  Ontology? → RDF\u002FOWL → Fabric IQ → Build Your First → Design Patterns →\n  Contributing)\n- **7 Domain Learning Paths** — Fourth Coffee, E-Commerce, Finance, Healthcare,\n  Manufacturing, University, and HR System. Each path has 4 progressive articles\n  that build an ontology step-by-step, with live embedded graphs showing new\n  entities at each stage.\n- **IQ Lab: Retail Supply Chain** — A 7-step hands-on lab that builds a 15-entity\n  ontology from scratch (3 → 15 entities across 6 progressive catalogue entries).\n\nEvery article supports **presentation mode** (slides split at `##` headings)\nand includes **interactive quizzes** with instant feedback. Ontology embeds\nload live graphs from the catalogue with optional diff highlighting.\n\n### Quest System\n\nFive progressive quests that guide users through ontology concepts with\nmulti-step instructions, hints, progress bars, and achievement badges.\n\n### Natural Language Query Playground\n\nType natural language questions (\"Which customers placed orders?\") and see how\nthey map to ontology entities and relationships — a preview of Fabric IQ's\nNL2Ontology capability.\n\n### Command Palette & Keyboard Shortcuts\n\nPress `⌘K` \u002F `Ctrl+K` anywhere to open a searchable command palette. Jump\nto the Catalogue, Designer, Ontology School, Import\u002FExport, Help, and more without\nleaving the keyboard. Press `?` for quick help access. Arrow keys + Enter to\nnavigate the palette.\n\n### Starter Templates\n\nThe designer offers five domain templates (Retail, Healthcare, Finance, IoT,\nEducation) so new users never face a blank page. Each template creates 3\nentities with properties and 2 relationships, ready to customise.\n\n### Interactive Onboarding Tour\n\nFirst-time visitors get a 5-step guided tour with a spotlight overlay that\nhighlights the Header, Graph, Quests, Inspector, and Designer in sequence.\nDismissable with a \"don't show again\" option persisted to `localStorage`.\n\n### Deep Linking & URL Routing\n\nClient-side hash routing with shareable URLs for every page:\n\n| Route | Page |\n|-------|------|\n| `\u002F#\u002F` | Home (default ontology) |\n| `\u002F#\u002Fcatalogue` | Ontology gallery |\n| `\u002F#\u002Fcatalogue\u002F\u003Csource>\u002F\u003Cslug>` | Specific ontology (e.g. `\u002F#\u002Fcatalogue\u002Fofficial\u002Fcosmic-coffee`) |\n| `\u002F#\u002Fdesigner` | Visual designer |\n| `\u002F#\u002Fdesigner\u002F\u003Csource>\u002F\u003Cslug>` | Designer with catalogue ontology (e.g. `\u002F#\u002Fdesigner\u002Fofficial\u002Fcosmic-coffee`) |\n| `\u002F#\u002Flearn` | Ontology School — course catalogue |\n| `\u002F#\u002Flearn\u002F\u003Ccourse>` | Course detail — article list |\n| `\u002F#\u002Flearn\u002F\u003Ccourse>\u002F\u003Carticle>` | Article view (with presentation mode) |\n\n## Official Ontologies\n\n| Domain | Ontology | Entities | Relationships |\n|--------|----------|----------|---------------|\n| Retail | Fourth Coffee | 6 | 7 |\n| E-Commerce | Online Retail | 5 | 6 |\n| Healthcare | Clinical System | 5 | 6 |\n| Finance | Banking & Finance | 5 | 6 |\n| Manufacturing | Industry 4.0 | 5 | 5 |\n| Education | University System | 5 | 6 |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- npm 9+\n\n### Installation\n\n```bash\ncd Ontology-Playground\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nVisit http:\u002F\u002Flocalhost:5173\n\n### Production Build\n\n```bash\nnpm run build\n```\n\nThe build pipeline compiles the catalogue, compiles learning content markdown,\ntype-checks, bundles the app, and builds the embed widget. Output is in\n`build\u002F`.\n\n### Running Tests\n\n```bash\nnpm test            # single run\nnpm run test:watch  # watch mode\n```\n\n## Deployment\n\n### Azure Static Web Apps (primary)\n\nThe repo ships with a GitHub Actions workflow that deploys to Azure SWA on every\npush to `main`.\n\n1. Create a Static Web App in the Azure Portal\n2. Connect to your GitHub repository\n3. Copy the deployment token and add it as the GitHub secret\n   `AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_PLANT_0BB1D2910`\n4. Push to `main` — the workflow at\n   `.github\u002Fworkflows\u002Fazure-static-web-apps-green-plant-0bb1d2910.yml` handles\n   the rest\n5. PR preview environments are created automatically for pull requests\n\n### GitHub Pages (for forks)\n\nA separate workflow deploys to GitHub Pages, ideal for forks:\n\n1. Fork this repo\n2. Go to **Settings → Pages → Source** and select **GitHub Actions**\n3. Push to `main` — the workflow at `.github\u002Fworkflows\u002Fdeploy-ghpages.yml`\n   builds and deploys to `https:\u002F\u002F\u003Cusername>.github.io\u002F\u003Crepo-name>\u002F`\n\nThe `VITE_BASE_PATH` env var is set automatically to `\u002F\u003Crepo-name>\u002F` during the\nGitHub Pages build so asset paths resolve correctly.\n\n### Environment Variables\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `VITE_ENABLE_AI_BUILDER` | `false` | Enable the Azure OpenAI ontology builder |\n| `VITE_ENABLE_LEGACY_FORMATS` | `false` | Enable JSON\u002FYAML\u002FCSV import\u002Fexport formats |\n| `VITE_BASE_PATH` | `\u002F` | Base path for the app (set automatically for GitHub Pages) |\n| `VITE_GITHUB_CLIENT_ID` | *(empty)* | GitHub OAuth App client ID for one-click catalogue PRs ([setup guide](docs\u002Fgithub-oauth-setup.md)) |\n| `VITE_GITHUB_OAUTH_BASE` | *(empty)* | External OAuth proxy URL for GitHub Pages deployments (e.g. Cloudflare Worker URL) |\n\n## Project Structure\n\n```\nOntology-Playground\u002F\n├── src\u002F\n│   ├── components\u002F       # React components (graph, designer, modals, learn page)\n│   ├── data\u002F             # Ontology model, query engine, quest definitions\n│   ├── lib\u002F              # Router, RDF parser\u002Fserializer, catalogue helpers\n│   ├── store\u002F            # Zustand stores (app state, designer state)\n│   ├── styles\u002F           # CSS (Microsoft Fluent-inspired dark\u002Flight themes)\n│   └── types\u002F            # TypeScript type definitions\n├── catalogue\u002F            # Official + community ontology RDF files\n├── content\u002Flearn\u002F        # Course directories with markdown articles, quizzes, and metadata\n├── scripts\u002F              # Build-time compilers (catalogue, learning content)\n├── api\u002F                  # Azure Functions backend (optional, for AI builder)\n├── docs\u002F                 # Guides and documentation\n├── public\u002F               # Static assets (compiled catalogue.json, learn.json)\n└── .github\u002Fworkflows\u002F    # CI\u002FCD (Azure SWA + GitHub Pages)\n```\n\n## Documentation\n\nThe table below lists the main end-user and contributor guides. Internal planning notes (for example, `docs\u002FTODO-*.md`) are intentionally not part of the published documentation set.\n\n| Guide | Description |\n|-------|-------------|\n| [Ontology Authoring Guide](docs\u002Fauthoring-guide.md) | How to create ontologies that work well in the Playground — field-by-field reference, best practices, and a step-by-step walkthrough |\n| [Contribute an Ontology: From Design to GitHub](docs\u002Fcontributing-ontology-from-design-to-github.md) | End-to-end contributor workflow: design, RDF export, metadata, local validation, and pull request |\n| [Playground Feature Demo Guide](docs\u002Fplayground-features-demo-guide.md) | Step-by-step demo script to showcase key Playground capabilities and connect them to Fabric IQ and Real-Time Intelligence |\n| [Ontology School Demo Guide](docs\u002Fontology-school-demo-guide.md) | Step-by-step live demo plan for courses, embeds, quizzes, presentation mode, and learning workflow |\n| [Embedding Guide](docs\u002Fembed-guide.md) | How to embed interactive ontology widgets on any web page |\n| [GitHub OAuth Setup](docs\u002Fgithub-oauth-setup.md) | How to configure GitHub OAuth for one-click catalogue PRs |\n| [Embed Security](docs\u002Fembed-security.md) | Security model for the embeddable widget |\n| [Learning Content Guide](docs\u002Flearn-content-guide.md) | How to author courses, articles, quizzes, and ontology embeds for the Ontology School |\n| [Ontology School Review Workflow](docs\u002Fontology-school-review-workflow.md) | Human review and approval flow for school lesson content |\n| [Theme Authoring Guide](docs\u002Ftheme-authoring-guide.md) | How to plug a new color theme into the Playground — token contract, the appStore + CSS steps, and contrast gotchas |\n\n## AI Agent Quickstart\n\nThis repository includes Copilot customization files so agents can reliably:\n\n- import customer RDF\u002FOWL into catalogue-ready format\n- generate progressive Ontology School modules\n- route lesson content through human review workflows\n\nIncluded assets:\n\n- Skills:\n   - `.github\u002Fskills\u002Fontology-catalog-import\u002F` — import external\u002Fcustomer RDF\u002FOWL into catalogue format\n   - `.github\u002Fskills\u002Fontology-school-path-generator\u002F` — generate progressive Ontology School modules\n   - `.github\u002Fskills\u002Fcommunity-ontology-contribution\u002F` — add a contributor ontology under `catalogue\u002Fcommunity\u002F` with the correct directory structure, metadata, and validation\n   - `.github\u002Fskills\u002Fname-generator\u002F` — generate person names for examples, demos, quests, tests, and sample data from the approved CSV fixture\n- RDF intake instruction:\n   - `.github\u002Finstructions\u002Frdf-intake.instructions.md`\n- Reusable prompts:\n   - `.github\u002Fprompts\u002Fimport-rdf-to-catalog.prompt.md`\n   - `.github\u002Fprompts\u002Fgenerate-ontology-school-module.prompt.md`\n\nRecommended validation before merge:\n\n```bash\nnpm run qa:tutorial-content\nnpm run build\n```\n\n## Technologies\n\n- **React 19** + TypeScript 5\n- **Cytoscape.js** — Graph visualization (fcose layout)\n- **Zustand** — State management\n- **Vite** — Build tool\n- **Framer Motion** — Animations\n- **Lucide Icons** — Icon library\n- **marked** — Markdown compilation (build-time)\n\n## Learn More\n\n- [Microsoft Fabric IQ Ontology Documentation](https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Ffabric\u002Fiq\u002Fontology\u002Foverview)\n- [Azure Static Web Apps](https:\u002F\u002Fdocs.microsoft.com\u002Fazure\u002Fstatic-web-apps\u002F)\n\n## License\n\nMIT\n\n## Trademark Notice\n\nTrademarks This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.",2,"2026-07-21 02:30:05","trending"]