Skip to content

Commit

Permalink
Added the sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@aschaeffer
aschaeffer committed May 3, 2024
1 parent 40a0d0f commit d71734c
Show file tree
Hide file tree
Showing 3 changed files with 277 additions and 14 deletions.
241 changes: 227 additions & 14 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,235 @@
<title>Reactive Graph</title>
</head>
<body>
<main class="container">
<section class="rg-emphasis-box malachite">
<h3>Reactive Graph</h3>
<p class="intro">Reactive Graph is a reactive runtime based on a graph database.</p>
<p>Coming soon</p>
<main class="content">
<div class="center-grid">
<img src="../node_modules/@reactive-graph/design/build/logo/colorful/reactive-graph-mexican-celestial-malachite.svg" alt="Reactive Graph" style="display:block; margin-block: auto; width: 300px;" />
</div>

<article class="feature rg-article center-grid">
<h1 class="rg-article-title">Reactive Graph</h1>
<p class="rg-article-intro">Reactive Graph is a reactive runtime based on a graph database.</p>
</article>

<section class="full rg-intro rg-intro--malachite">
<div class="content">
<h2 class="subtitle">What is this?</h2>
<h1 class="title">Features</h1>
</div>
</section>

<article class="rg-article">
<ul>
<li>Graph Database</li>
<li>Document Store</li>
<li>Flow Control Runtime</li>
<li>Webserver</li>
<li>Pluggable and extensible</li>
<li>Fast, secure and small</li>
</ul>
</article>

<section class="full rg-intro rg-intro--selective-yellow">
<div class="content">
<h2 class="subtitle">What is it for?</h2>
<h1 class="title">Use Cases</h1>
</div>
</section>

<article class="rg-article">
<ul>
<li>Game Entity Component System (ECS) - especially for Inexor</li>
<li>Smart Home and Internet of Things</li>
<li>Data Conversion Tools</li>
<li>Flow Control System for card size computers and embedded devices</li>
<li>Desktop Automation</li>
<li>Content Management System</li>
<li>Knowledge Graphs and Knowledge Processing</li>
</ul>
</article>


<section class="full rg-intro rg-intro--malachite">
<div class="content">
<h2 class="subtitle">Lesson 1</h2>

<h1 class="title">What is a graph?</h1>
</div>
</section>

<section class="full rg-intro rg-intro--selective-yellow">
<div class="content">
<h2 class="subtitle">Lesson 2</h2>

<h1 class="title">Type System</h1>
</div>
</section>

<section class="full rg-intro rg-intro--celestial-blue">
<div class="content">
<h2 class="subtitle">Lesson 3</h2>

<h1 class="title">Instances</h1>
</div>
</section>

<section class="full rg-intro rg-intro--mexican-pink">
<div class="content">
<h2 class="subtitle">Lesson 4</h2>

<h1 class="title">Reactive Properties</h1>
</div>
</section>

<section class="full rg-intro rg-intro--chartreuse">
<div class="content">
<h2 class="subtitle">Installation</h2>

<h1 class="title">Getting Started</h1>
</div>
</section>

<section class="full rg-intro rg-intro--malachite">
<div class="content">
<h2 class="subtitle">Use case #1</h2>

<h1 class="title">Data Flow Processing</h1>
</div>
</section>

<section class="full rg-intro rg-intro--selective-yellow">
<div class="content">
<h2 class="subtitle">Use case #2</h2>

<h1 class="title">Image Processing</h1>
</div>
</section>

<section class="full rg-intro rg-intro--celestial-blue">
<div class="content">
<h2 class="subtitle">Use case #3</h2>

<h1 class="title">Text Processing</h1>
</div>
</section>

<section class="full rg-intro rg-intro--mexican-pink">
<div class="content">
<h2 class="subtitle">Use case #4</h2>

<h1 class="title">Content Management</h1>
</div>
</section>

<section class="full rg-intro rg-intro--chartreuse">
<div class="content">
<h2 class="subtitle">Use case #5</h2>

<h1 class="title">Internet of Things</h1>
</div>
</section>

<section class="full rg-intro rg-intro--malachite">
<div class="content">
<h2 class="subtitle">Use case #6</h2>

<h1 class="title">Knowledge Management</h1>
</div>
</section>

<section class="full rg-intro rg-intro--selective-yellow">
<div class="content">
<h2 class="subtitle">Use case #7</h2>

<h1 class="title">Game Development</h1>
</div>
</section>

</main>

<footer class="rg-footer">
<nav class="rg-footer-content">
<section class="rg-footer-section rg-footer-primary-logo">
<h4 class="rg-footer-heading">
<a href="https://reactive-graph.io/">
<img src="../node_modules/@reactive-graph/design/build/logo/full/reactive-graph-full-black-white.svg" alt="Reactive Graph" />
</a>
</h4>
</section>
<section class="rg-footer-section">
<h5 class="rg-footer-heading">
Reactive Graph
</h5>
<ul class="rg-footer-list">
<li>
<a href="https://reactive-graph.io/">reactive-graph.io</a>
</li>
<li>
<a href="https://reactive-graph.io/releases/">Download</a>
</li>
</ul>
</section>
<section class="rg-footer-section">
<h5 class="rg-footer-heading">
Development
</h5>
<ul class="rg-footer-list">
<li>
<a href="https://github.com/reactive-graph/reactive-graph">GitHub</a>
</li>
<li>
<a href="https://docs.reactive-graph.io/">API Documentation</a>
</li>
<li>
<a href="https://docs.reactive-graph.io/">Reference Documentation</a>
</li>
</ul>
</section>
<section class="rg-footer-section">
<h5 class="rg-footer-heading">
Inexor Game
</h5>
<ul class="rg-footer-list">
<li>
<a href="https://inexor.org">inexor.org</a>
</li>
<li>
<a href="https://github.com/inexorgame/inexor-rgf-plugins-game">Inexor Game on GitHub</a>
</li>
</ul>
</section>
<section class="rg-emphasis-box mexican-pink">
<h3>Tags</h3>
<p>
<rg-tag ty="component">Component</rg-tag>
<rg-tag ty="entity-type">Entity Type</rg-tag>
<rg-tag ty="relation-type">Relation Type</rg-tag>
</p>
<section class="rg-footer-section">
<h5 class="rg-footer-heading">
Graph CMS
</h5>
<ul class="rg-footer-list">
<li>
<a href="https://graph-cms.io/">graph-cms.io</a>
</li>
<li>
<a href="https://github.com/graph-cms/graph-cms">Graph CMS on GitHub</a>
</li>
</ul>
</section>
</main>
<script type="module">
<section class="rg-footer-section">
<h5 class="rg-footer-heading">
Smearor
</h5>
<ul class="rg-footer-list">
<li>
<a href="https://smearor.io/">smearor.io</a>
</li>
<li>
<a href="https://github.com/smearor/smearor">Smearor onGitHub</a>
</li>
</ul>
</section>
</nav>
</footer>



<script type="module">
import init, * as bindings from "../node_modules/@reactive-graph/design/build/reactive-graph-design.js";
import fileName from 'url:../node_modules/@reactive-graph/design/build/reactive-graph-design_bg.wasm';
init(fileName)
Expand Down
2 changes: 2 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
import "../node_modules/@reactive-graph/design/build/css/reactive-graph.css";
import "./base.css"
import "./layout.css"
48 changes: 48 additions & 0 deletions src/layout.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.container {
width: min(100% - 2rem, 50rem);
margin-inline: auto;
}


.content {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--content: min(50ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--feature: minmax(0, 5rem);

display: grid;
grid-template-columns:
[full-start] var(--full)
[feature-start] var(--feature)
[popout-start] var(--popout)
[content-start] var(--content) [content-end]
var(--popout) [popout-end]
var(--feature) [feature-end]
var(--full) [full-end];
}

.content > * {
grid-column: content;
}

.popout {
grid-column: popout;
}

.feature {
grid-column: feature;
}

.full {
grid-column: full;
}

.center-grid {
display: grid;
place-items: center;
}

.content {
margin-block: var(--gap);
}

0 comments on commit d71734c

Please sign in to comment.