-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
32 lines (32 loc) · 3.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React DOM Components Test</title>
<meta name="description" content="A page for testing">
<link rel="stylesheet" href="sample/dist/css/styles.css"/>
</head>
<body>
<img src="sample/dist/img/rdc-icon.png" alt="React DOM Components" class="image" id="logo"/>
<img src="sample/dist/img/rdc-title.svg" alt="React DOM Components" class="image" id="title"/>
<h1 class="hide-all">React DOM Components</h1>
<h2 id="sub-title">Build data models for React Components using server-side DOM.</h2>
<a href="https://github.com/auniverseaway/react-dom-components" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="container">
<hr/>
<rdc-section data-title="Problem">
<p>Often times, using Node to render DOM server-side is not feasible. This could be due to technology, infrastructure, or even cache reasons. In these situations, one is left with either not using React or ignoring the initial server-side DOM. Both options have significant downsides.</p>
</rdc-section>
<rdc-section data-title="Solution">
<p>React DOM Components are a technology agnostic way to get DOM properties and pass them in to React Components. By doing so, the initial render of a page can still be server-side (Java, .NET, PHP, etc.), but React can take over and provide the many features it does.</p>
</rdc-section>
<hr/>
<h3 class="full-width">How They Work</h3>
<img class="full-width" src="sample/dist/img/rdc-works.svg" alt="React DOM Components" class="how-they-work"/>
<hr/>
</div>
<script src="sample/dist/libs/nodelist-foreach.min.js" type="text/javascript"></script>
<script src="sample/dist/libs/custom-elements.min.js" type="text/javascript"></script>
<script src="sample/dist/index.js" type="text/javascript"></script>
</body>
</html>