diff --git a/src/components/mermaid.js b/src/components/mermaid.js
deleted file mode 100644
index 90a2777..0000000
--- a/src/components/mermaid.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import mermaid from "mermaid";
-
-mermaid.initialize({
- "theme": "base",
- "themeVariables": {
- "primaryColor": "#61dafb",
- "primaryTextColor": "#282c34",
- "primaryBorderColor": "#61dafb",
- }
-});
-
-export function Mermaid({chart}) {
- mermaid.contentLoaded();
- return
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`,
- csharp: `
- namespace Org.Example.Sla;
-using AccordProject.Concerto;
-[System.Text.Json.Serialization.JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))]
-public enum ServiceType {
- GOLD,
- SILVER,
- BRONZE,
-}
-[System.Text.Json.Serialization.JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))]
-public enum ServiceLevel {
- BASIC,
- STANDARD,
- PREMIUM,
-}
-[AccordProject.Concerto.Type(Namespace = "org.example.sla", Version = "0.0.2", Name = "Service")]
-[System.Text.Json.Serialization.JsonConverter(typeof(AccordProject.Concerto.ConcertoConverterFactorySystem))]
-public class Service : Concept {
- [System.Text.Json.Serialization.JsonPropertyName("$class")]
- public override string _Class { get; } = "org.example.sla@0.0.2.Service";
- [System.Text.Json.Serialization.JsonPropertyName("serviceType")]
- public ServiceType ServiceType { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("serviceLevel")]
- public ServiceLevel ServiceLevel { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("price")]
- public float Price { get; set; }
-}
-[AccordProject.Concerto.Type(Namespace = "org.example.sla", Version = "0.0.2", Name = "Organization")]
-[System.Text.Json.Serialization.JsonConverter(typeof(AccordProject.Concerto.ConcertoConverterFactorySystem))]
-public class Organization : Concept {
- [System.Text.Json.Serialization.JsonPropertyName("$class")]
- public override string _Class { get; } = "org.example.sla@0.0.2.Organization";
- [System.Text.Json.Serialization.JsonPropertyName("name")]
- public string Name { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("address")]
- public string Address { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("contactName")]
- public string ContactName { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("contactEmail")]
- public string ContactEmail { get; set; }
-}
-[AccordProject.Concerto.Type(Namespace = "org.example.sla", Version = "0.0.2", Name = "ServiceLevelAgreement")]
-[System.Text.Json.Serialization.JsonConverter(typeof(AccordProject.Concerto.ConcertoConverterFactorySystem))]
-public class ServiceLevelAgreement : Concept {
- [System.Text.Json.Serialization.JsonPropertyName("$class")]
- public override string _Class { get; } = "org.example.sla@0.0.2.ServiceLevelAgreement";
- [System.Text.Json.Serialization.JsonPropertyName("customer")]
- public Organization Customer { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("provider")]
- public Organization Provider { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("service")]
- public Service Service { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("startDate")]
- public System.DateTime StartDate { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("endDate")]
- public System.DateTime EndDate { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("penaltyPercentage")]
- public float PenaltyPercentage { get; set; }
- [System.Text.Json.Serialization.JsonPropertyName("autoRenewal")]
- public bool AutoRenewal { get; set; }
-}
-
- `,
- go: `
- package org_example_sla_0_0_2
- import "time"
- import "concerto_1_0_0";
-
- type ServiceType int
- const (
- GOLD ServiceType = 1 + iota
- SILVER
- BRONZE
- )
- type ServiceLevel int
- const (
- BASIC ServiceLevel = 1 + iota
- STANDARD
- PREMIUM
- )
- type Service struct {
- concerto_1_0_0.Concept
- ServiceType ServiceType \`json:"serviceType"\`
- ServiceLevel ServiceLevel \`json:"serviceLevel"\`
- Price float64 \`json:"price"\`
- }
- type Organization struct {
- concerto_1_0_0.Concept
- Name string \`json:"name"\`
- Address string \`json:"address"\`
- ContactName string \`json:"contactName"\`
- ContactEmail string \`json:"contactEmail"\`
- }
- type ServiceLevelAgreement struct {
- concerto_1_0_0.Concept
- Customer Organization \`json:"customer"\`
- Provider Organization \`json:"provider"\`
- Service Service \`json:"service"\`
- StartDate time.Time \`json:"startDate"\`
- EndDate time.Time \`json:"endDate"\`
- PenaltyPercentage float64 \`json:"penaltyPercentage"\`
- AutoRenewal bool \`json:"autoRenewal"\`
- }
- `,
- protobuf: `
-ssyntax = "proto3";
-
-package org.example.sla.v0_0_2;
-
-import "google/protobuf/timestamp.proto";
-
-enum ServiceType {
- ServiceType_BRONZE = 0;
- ServiceType_GOLD = 1;
- ServiceType_SILVER = 2;
-}
-
-enum ServiceLevel {
- ServiceLevel_BASIC = 0;
- ServiceLevel_PREMIUM = 1;
- ServiceLevel_STANDARD = 2;
-}
-
-message Service {
- double price = 1;
- ServiceLevel serviceLevel = 2;
- ServiceType serviceType = 3;
-}
-
-message Organization {
- string address = 1;
- string contactEmail = 2;
- string contactName = 3;
- string name = 4;
-}
-
-message ServiceLevelAgreement {
- bool autoRenewal = 1;
- Organization customer = 2;
- google.protobuf.Timestamp endDate = 3;
- double penaltyPercentage = 4;
- Organization provider = 5;
- Service service = 6;
- google.protobuf.Timestamp startDate = 7;
-}
-
-`,
-};
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 4dc67a9..e26235b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -157,6 +157,158 @@
}
}
+/* Path Chooser */
+
+.PathChooser {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.PathCard {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ padding: 1.25rem 1.25rem 1.4rem;
+ border-radius: 12px;
+ background-color: rgba(255, 255, 255, 0.06);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ text-decoration: none !important;
+ transition: transform 0.15s ease-out, border-color 0.15s ease-out,
+ background-color 0.15s ease-out;
+}
+
+.PathCard:hover {
+ transform: translateY(-3px);
+ border-color: var(--brand);
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.PathCard.featured {
+ background-color: var(--brand);
+ border-color: var(--brand);
+}
+
+.PathCard.featured:hover {
+ background-color: #7ce3fc;
+}
+
+.PathCard-badge {
+ position: absolute;
+ top: 0.75rem;
+ right: 0.85rem;
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--dark);
+ opacity: 0.7;
+}
+
+.PathCard-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin: 0.25rem 0 0.5rem;
+ color: var(--tintColor);
+}
+
+.PathCard-description {
+ font-size: 0.95rem;
+ line-height: 1.4;
+ margin: 0;
+ color: rgba(255, 255, 255, 0.75);
+}
+
+.PathCard.featured .PathCard-title,
+.PathCard.featured .PathCard-description {
+ color: var(--dark);
+}
+
+@media only screen and (max-width: 996px) {
+ .PathChooser {
+ grid-template-columns: repeat(2, 1fr);
+ max-width: 640px;
+ }
+}
+
+@media only screen and (max-width: 560px) {
+ .PathChooser {
+ grid-template-columns: 1fr;
+ max-width: 420px;
+ }
+}
+
+/* Playground Section */
+
+.Playground .content {
+ max-width: 1000px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.Playground .Heading {
+ text-align: center;
+}
+
+.Playground-lead {
+ max-width: 720px;
+ margin: 0 auto 2rem;
+ font-size: 1.1rem;
+ line-height: 1.5;
+}
+
+.Playground-window {
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
+ border: 1px solid var(--ifm-table-border-color);
+ background-color: var(--dark);
+}
+
+.Playground-chrome {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.55rem 0.9rem;
+ background-color: var(--deepdark);
+}
+
+.Playground-dots {
+ flex: 0 0 auto;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: #ff5f56;
+ box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
+ margin-right: 28px;
+}
+
+.Playground-url {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.55);
+ font-family: var(--ifm-font-family-monospace);
+}
+
+.Playground-frame {
+ display: block;
+ width: 100%;
+ height: 600px;
+ border: 0;
+ background-color: white;
+}
+
+.Playground-cta {
+ margin-top: 2rem;
+}
+
+@media only screen and (max-width: 760px) {
+ .Playground-frame {
+ height: 460px;
+ }
+}
+
/* Header Hero */
.HeaderHero {
@@ -174,7 +326,6 @@
margin: -10px auto 0;
}
-.HeaderHero .socialLinks .twitter-follow-button,
.HeaderHero .socialLinks .github-button {
margin-right: 1rem;
}
@@ -342,56 +493,10 @@
/* Cross Platform */
-.CrossPlatform {
- overflow: hidden;
-}
-
-@media only screen and (max-width: 960px) {
- .CrossPlatform .column.last {
- max-height: 300px;
- overflow-y: auto ;
- }
- .CrossPlatform .column.last::-webkit-scrollbar {
- width: 7px;
-}
-
-}
-
-@media only screen and (min-width: 481px) and (max-width: 960px) {
- .CrossPlatform .column.last {
- width: 66.7%;
- margin: 0 auto;
- }
- .CrossPlatform .column.last::-webkit-scrollbar {
- width: 7px;
-}
-
-}
-
-@media only screen and (min-width: 961px) {
- .CrossPlatform {
- max-height: 800px;
- }
-
- .CrossPlatform .column.last {
- max-height: 800px;
- overflow-y: auto;
-
- }
-
- .CrossPlatform .column.last::-webkit-scrollbar {
- width: 7px;
-}
-
- /* Correct for whitespace in the image of phones */
- .CrossPlatform .column.left {
- margin-top: -25px;
- }
-
- .CrossPlatform .prism-code {
- margin-top: -25px;
- overflow-y: auto;
- }
+.CrossPlatform .content {
+ max-width: 760px;
+ margin: 0 auto;
+ text-align: center;
}
/* Schemas for People */
@@ -491,6 +596,13 @@
font-size: 17px;
}
+.GetStarted .GetStarted-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ align-items: center;
+}
+
.GetStarted .terminal {
display: flex;
flex-direction: column;
@@ -542,39 +654,6 @@
}
}
-/* Twitter Follow Button */
-
-.twitter-follow-button {
- display: inline-block;
- position: relative;
- height: 28px;
- box-sizing: border-box;
- padding: 1px 10px 1px 9px;
- background-color: #1b95e0;
- color: #fff;
- border-radius: 4px;
- font-weight: 400;
- cursor: pointer;
- font-size: 13px;
- line-height: 26px;
-}
-
-.twitter-follow-button :hover {
- color: #fff;
- background-color: #0c7abf;
-}
-
-.twitter-follow-button .icon {
- position: relative;
- display: inline-block;
- top: 4px;
- height: 18px;
- width: 18px;
- margin-right: 4px;
- background: transparent 0 0 no-repeat;
- background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
-}
-
.navbar__title{
font-weight: 600;
font-size: 1.2rem;
{chart}
;
-}
\ No newline at end of file
diff --git a/src/components/samples.js b/src/components/samples.js
deleted file mode 100644
index ef9ef1a..0000000
--- a/src/components/samples.js
+++ /dev/null
@@ -1,433 +0,0 @@
-export default {
- mermaidUml: `
- classDiagram
-class ServiceType {
-<< enumeration>>
-+ GOLD
-+ SILVER
-+ BRONZE
-}
-
-class ServiceLevel {
-<< enumeration>>
-+ BASIC
-+ STANDARD
-+ PREMIUM
-}
-
-class Service {
-<< concept>>
-+ ServiceType serviceType
-+ ServiceLevel serviceLevel
-+ Double price
-}
-
-Service "1" *-- "1" ServiceType
-Service "1" *-- "1" ServiceLevel
-class Organization {
-<< concept>>
-+ String name
-+ String address
-+ String contactName
-+ String contactEmail
-}
-
-class ServiceLevelAgreement {
-<< concept>>
-+ Organization customer
-+ Organization provider
-+ Service service
-+ DateTime startDate
-+ DateTime endDate
-+ Double penaltyPercentage
-+ Boolean autoRenewal
-}
-
-ServiceLevelAgreement "1" *-- "1" Organization
-ServiceLevelAgreement "1" *-- "1" Organization
-ServiceLevelAgreement "1" *-- "1" Service
-
- `,
- typescript: `
- // imports
- import {IConcept} from './concerto@1.0.0';
-
- // interfaces
- export enum ServiceType {
- GOLD = 'GOLD',
- SILVER = 'SILVER',
- BRONZE = 'BRONZE',
- }
-
- export enum ServiceLevel {
- BASIC = 'BASIC',
- STANDARD = 'STANDARD',
- PREMIUM = 'PREMIUM',
- }
-
- export interface IService extends IConcept {
- serviceType: ServiceType;
- serviceLevel: ServiceLevel;
- price: number;
- }
-
- export interface IOrganization extends IConcept {
- name: string;
- address: string;
- contactName: string;
- contactEmail: string;
- }
-
- export interface IServiceLevelAgreement extends IConcept {
- customer: IOrganization;
- provider: IOrganization;
- service: IService;
- startDate: Date;
- endDate: Date;
- penaltyPercentage: number;
- autoRenewal: boolean;
- }`,
- jsonSchema: `
- {
- "$schema": "http://json-schema.org/draft-07/schema#",
- "definitions": {
- "org.example.sla@0.0.2.ServiceType": {
- "title": "ServiceType",
- "description": "An instance of org.example.sla@0.0.2.ServiceType",
- "enum": [
- "GOLD",
- "SILVER",
- "BRONZE"
- ]
- },
- "org.example.sla@0.0.2.ServiceLevel": {
- "title": "ServiceLevel",
- "description": "An instance of org.example.sla@0.0.2.ServiceLevel",
- "enum": [
- "BASIC",
- "STANDARD",
- "PREMIUM"
- ]
- },
- "org.example.sla@0.0.2.Service": {
- "title": "Service",
- "description": "An instance of org.example.sla@0.0.2.Service",
- "type": "object",
- "properties": {
- "$class": {
- "type": "string",
- "default": "org.example.sla@0.0.2.Service",
- "pattern": "^org\\.example\\.sla@0\\.0\\.2\\.Service$",
- "description": "The class identifier for org.example.sla@0.0.2.Service"
- },
- "serviceType": {
- "$ref": "#/definitions/org.example.sla@0.0.2.ServiceType"
- },
- "serviceLevel": {
- "$ref": "#/definitions/org.example.sla@0.0.2.ServiceLevel"
- },
- "price": {
- "type": "number"
- }
- },
- "required": [
- "$class",
- "serviceType",
- "serviceLevel",
- "price"
- ]
- },
- "org.example.sla@0.0.2.Organization": {
- "title": "Organization",
- "description": "An instance of org.example.sla@0.0.2.Organization",
- "type": "object",
- "properties": {
- "$class": {
- "type": "string",
- "default": "org.example.sla@0.0.2.Organization",
- "pattern": "^org\\.example\\.sla@0\\.0\\.2\\.Organization$",
- "description": "The class identifier for org.example.sla@0.0.2.Organization"
- },
- "name": {
- "type": "string"
- },
- "address": {
- "type": "string"
- },
- "contactName": {
- "type": "string"
- },
- "contactEmail": {
- "type": "string"
- }
- },
- "required": [
- "$class",
- "name",
- "address",
- "contactName",
- "contactEmail"
- ]
- },
- "org.example.sla@0.0.2.ServiceLevelAgreement": {
- "title": "ServiceLevelAgreement",
- "description": "An instance of org.example.sla@0.0.2.ServiceLevelAgreement",
- "type": "object",
- "properties": {
- "$class": {
- "type": "string",
- "default": "org.example.sla@0.0.2.ServiceLevelAgreement",
- "pattern": "^org\\.example\\.sla@0\\.0\\.2\\.ServiceLevelAgreement$",
- "description": "The class identifier for org.example.sla@0.0.2.ServiceLevelAgreement"
- },
- "customer": {
- "$ref": "#/definitions/org.example.sla@0.0.2.Organization"
- },
- "provider": {
- "$ref": "#/definitions/org.example.sla@0.0.2.Organization"
- },
- "service": {
- "$ref": "#/definitions/org.example.sla@0.0.2.Service"
- },
- "startDate": {
- "format": "date-time",
- "type": "string"
- },
- "endDate": {
- "format": "date-time",
- "type": "string"
- },
- "penaltyPercentage": {
- "type": "number"
- },
- "autoRenewal": {
- "type": "boolean"
- }
- },
- "required": [
- "$class",
- "customer",
- "provider",
- "service",
- "startDate",
- "endDate",
- "penaltyPercentage",
- "autoRenewal"
- ]
- }
- }
- }
- `,
- xmlSchema: `
-
-