Blockquote and GraphQL Voyager improvements

CHANGELOG.md

@@ -20,6 +20,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - CI Check for changelog
+- Atom `blockquote` can have full width
+- Atom `blockquote` background pattern is optional
+- GraphQL Voyager can load a schema from a URL
 
 ## [0.1.6] - 2024-09-08
 

README.md

@@ -60,6 +60,33 @@ This repository contains the design system for the <a href="https://github.com/r
   Graphical editor for creating and editing flows
 </p>
 
+<h2 align="center">Develop</h2>
+
+```
+pnpm install
+pnpm run dev
+```
+
+<h2 align="center">Build Design System Website</h2>
+
+```
+pnpm install
+trunk build
+cp webcomponents/reactive-graph-design-*_bg.wasm public/reactive-graph-design_bg.wasm
+cp webcomponents/reactive-graph-design-*.js public/reactive-graph-design.js
+pnpm run fractal:build
+```
+
+<h2 align="center">Build Design System Library</h2>
+
+```
+pnpm install
+trunk build
+cp webcomponents/reactive-graph-design-*_bg.wasm public/reactive-graph-design_bg.wasm
+cp webcomponents/reactive-graph-design-*.js public/reactive-graph-design.js
+pnpm run fractal:build-library
+```
+
 <h2 align="center">Made with</h2>
 
 <center>

components/01-atoms/blockquote/blockquote.hbs

@@ -1,4 +1,35 @@
-<blockquote {{#if modifier}}class="{{modifier}}"{{/if}}>
+<div style="padding: var(--size-4);">
+  <h1 class="mexican-pink">
+    Blockquote
+    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
+  </h1>
+  <hr>
+  <h2 class="celestial-blue">Standard</h2>
+
+  <blockquote {{#if modifier}}class="{{modifier}}"{{/if}}>
     <p>{{text}}</p>
     <cite>{{citation}}</cite>
-</blockquote>
+  </blockquote>
+
+  <h2 class="celestial-blue">Full Width</h2>
+
+  <blockquote class="{{#if modifier}}{{modifier}}{{/if}} full-width">
+    <p>{{text}}</p>
+    <cite>{{citation}}</cite>
+  </blockquote>
+
+  <h2 class="celestial-blue">Background Pattern</h2>
+
+  <blockquote class="{{#if modifier}}{{modifier}}{{/if}} background-pattern">
+    <p>{{text}}</p>
+    <cite>{{citation}}</cite>
+  </blockquote>
+
+  <h2 class="celestial-blue">Full Width and Background Pattern</h2>
+
+  <blockquote class="{{#if modifier}}{{modifier}}{{/if}} full-width background-pattern">
+    <p>{{text}}</p>
+    <cite>{{citation}}</cite>
+  </blockquote>
+
+</div>

components/01-atoms/graphql-voyager/_preview.hbs

@@ -8,6 +8,7 @@
   <link rel="icon" type="image/png" href="{{ path '/favicon/favicon.png' }}">
   <link rel="stylesheet" href="{{ path '/css/reactive-graph.css' }}">
   <script src="{{ path '/js/graphql-voyager/voyager.standalone.js' }}"></script>
+  <script src="{{ path '/js/graphql-voyager/graphql.bundle.js' }}"></script>
   <title>Preview</title>
   <link rel="preload" href="{{ path '/reactive-graph-design_bg.wasm' }}" crossorigin="anonymous" as="fetch" type="application/wasm">
   <link rel="modulepreload" href="{{ path '/reactive-graph-design.js' }}" crossorigin="anonymous">

components/01-atoms/graphql-voyager/graphql-voyager.hbs

@@ -7,6 +7,7 @@
     <div class="graphql-voyager-wrapper celestial-blue"
          data-endpoint="http://localhost:31415/graphql"
          data-hide-docs="false"
-         data-hide-settings="true"></div>
+         data-hide-settings="true"
+         data-schema="/schema/reactive-graph.graphql"></div>
   </div>
 </div>

docs/01-index.md

@@ -15,62 +15,44 @@ status: alpha
   </p>
 </article>
 
-<section class="rg-emphasis-box">
-  <h3>Atomic Design</h3>
-  <p class="intro">Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.</p>
-  <p>
-    All components defined are categorized following the
-    <a href="http://atomicdesign.bradfrost.com/table-of-contents/">atomic design principles by Brad Frost</a>.
-  </p>
-</section>
+### Atomic Design
 
-<section class="rg-emphasis-box">
-  <h3>Web Components</h3>
-  <p class="intro">
-    Web Components is a suite of different technologies allowing you to create reusable custom elements — with their
-    functionality encapsulated away from the rest of your code — and utilize them in your web apps.
-  </p>
-  <p>
-    <strong>Interoperability:</strong> The design system is reusable and work across different JavaScript frameworks or
-    vanilla JavaScript projects.
-  </p>
-  <p>
-    <strong>Different Tech Stacks:</strong> The design system need to be shared across projects with diverse tech
-    stacks.
-  </p>
-  <p>
-    <strong>Micro Frontends:</strong> The design system serves as a neutral interface between different parts of a
-    micro frontend architecture.
-  </p>
-</section>
-
-<section class="rg-emphasis-box">
-  <h3>Design System Fundamentals</h3>
-  <p class="intro">
-    The fundamentals define the <a href="/docs/fundamentals/palette">color palette</a>,
-    the <a href="/docs/fundamentals/fonts">fonts</a>, the <a href="/docs/fundamentals/logo">logo</a>,
-    the <a href="/docs/fundamentals/icons">icon sets</a>, the sets of <a href="/docs/fundamentals/pattern">patterns</a>
-    and <a href="/docs/fundamentals/gradients">gradients</a>.</p>
-  <p></p>
-</section>
-
-<section class="rg-emphasis-box">
-  <h3>Graph Representation</h3>
-  <p class="intro">
-    The section about the graph representation defines how the
-    <a href="/docs/graph-representation/type-system">type system</a> of the graph can be visualized. This means
-    how look components, entity types and relation types. Furthermore, it also defines the appearance of
-    <a href="/docs/graph-representation/instance-system">instances</a> (entity instances and relation instances).
-  </p>
-  <p></p>
-</section>
-
-<section class="rg-emphasis-box">
-  <h3>Flow Node Representation</h3>
-  <p class="intro">
-    The section about the flow node representation defines how the control flows can be visualized. This includes
-    the visualization of <a href="/docs/flow-node-representation/flow-node">flow nodes</a> and their property sockets
-    and the <a href="/docs/flow-node-representation/connector">connectors</a> which enables the data flow.
-  </p>
-  <p></p>
-</section>
+Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical
+manner.
+
+All components defined are categorized following the
+<a href="http://atomicdesign.bradfrost.com/table-of-contents/">atomic design principles by Brad Frost</a>.
+
+### Web Components
+
+Web Components is a suite of different technologies allowing you to create reusable custom elements — with their
+functionality encapsulated away from the rest of your code — and utilize them in your web apps.
+
+<strong>Interoperability:</strong> The design system is reusable and work across different JavaScript frameworks or
+vanilla JavaScript projects.
+
+<strong>Different Tech Stacks:</strong> The design system need to be shared across projects with diverse tech
+stacks.
+
+<strong>Micro Frontends:</strong> The design system serves as a neutral interface between different parts of a
+micro frontend architecture.
+
+### Design System Fundamentals
+
+The fundamentals define the <a href="/docs/fundamentals/palette">color palette</a>,
+the <a href="/docs/fundamentals/fonts">fonts</a>, the <a href="/docs/fundamentals/logo">logo</a>,
+the <a href="/docs/fundamentals/icons">icon sets</a>, the sets of <a href="/docs/fundamentals/pattern">patterns</a>
+and <a href="/docs/fundamentals/gradients">gradients</a>.</p>
+
+### Graph Representation
+
+The section about the graph representation defines how the
+<a href="/docs/graph-representation/type-system">type system</a> of the graph can be visualized. This means
+how look components, entity types and relation types. Furthermore, it also defines the appearance of
+<a href="/docs/graph-representation/instance-system">instances</a> (entity instances and relation instances).
+
+### Flow Node Representation
+
+The section about the flow node representation defines how the control flows can be visualized. This includes
+the visualization of <a href="/docs/flow-node-representation/flow-node">flow nodes</a> and their property sockets
+and the <a href="/docs/flow-node-representation/connector">connectors</a> which enables the data flow.