Skip to content

Commit 5c32f87

Browse files
author
Nick Balestra
committed
first draft for the landing-page component
1 parent 0331ad2 commit 5c32f87

File tree

9 files changed

+225
-25
lines changed

9 files changed

+225
-25
lines changed

‎components/landing-page/css/styles.css

Lines changed: 114 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
/* shared */
22
body {
33
font-family: 'Source Sans Pro', sans-serif;
4+
font-size: 21px;
45
margin:0px 0px;
56
-webkit-font-smoothing: antialiased;
7+
color: #333333;
68
}
79

810
/* heading */
@@ -11,7 +13,7 @@ body {
1113
position:relative;
1214
border-bottom: 6px solid #AA79FF;
1315
text-align:center;
14-
margin-bottom: 120px;
16+
margin-bottom: 130px;
1517
}
1618

1719
#hero img {
@@ -20,20 +22,20 @@ body {
2022
margin-left: -143px;
2123
}
2224

23-
.header {
25+
#hero header {
2426
padding-top: 120px;
2527
padding-bottom: 290px;
2628
width:100%;
2729
color:#fff;
2830
}
2931

30-
.header h1 {
32+
#hero header h1 {
3133
font-family: SourceSansPro-SemiBold;
3234
font-size: 80px;
3335
margin: 0;
3436
}
3537

36-
.header h2 {
38+
#hero header h2 {
3739
font-size: 40px;
3840
font-weight: 300;
3941
margin: 0;
@@ -63,7 +65,113 @@ nav {
6365
color: #ffffff;
6466
}
6567

68+
.secondary {
69+
margin-left: 0;
70+
background: #7C53AA;
71+
color: #ffffff;
72+
}
73+
74+
a {
75+
color: #7555a7;
76+
}
77+
6678
/* content */
67-
#content, #footer {
68-
padding: 0 20px;
79+
#content {
80+
padding: 0 40px;
81+
max-width: 700px;
82+
margin-left: auto;
83+
margin-right: auto;
84+
}
85+
86+
article header h1 {
87+
font-size: 32px;
88+
font-weight: 600;
89+
}
90+
91+
article p {
92+
font-size: 21px;
93+
}
94+
95+
article img {
96+
width: 100%;
97+
}
98+
99+
hr {
100+
margin: 100px 0;
101+
border: 0;
102+
height: 0;
103+
border-top: 2px solid #AA79FF;
104+
}
105+
106+
.hr {
107+
margin: 100px 0;
108+
width: 100%;
109+
height: 1px;
110+
border-top: 2px solid #AA79FF;
111+
text-align: center;
112+
}
113+
114+
.hr img {
115+
position: absolute;
116+
margin-left: -20px;
117+
margin-top: -36px;
118+
}
119+
120+
.hr.footer {
121+
margin: 100px 0 0 0;
122+
width: 100%;
123+
height: 100px;
124+
background: linear-gradient(135deg, #7555a7 0%, #cb9fea 100%);
125+
border-top: 6px solid #AA79FF;
126+
text-align: center;
69127
}
128+
129+
.block {
130+
overflow: hidden;
131+
padding: 1rem 0;
132+
margin: 20px 0 0px 0;
133+
border-bottom: 1px dashed #ededed;
134+
}
135+
.block img {
136+
max-width: 120px;
137+
float: left;
138+
margin: 0 2rem 0 0;
139+
}
140+
.block h2 {
141+
font-weight: 600;
142+
font-size: 24px;
143+
margin: 0 0 0.5rem 0;
144+
}
145+
.block > div {
146+
padding-left: calc(140px + 1rem);
147+
}
148+
149+
.block p {
150+
font-size: 18px;
151+
}
152+
153+
.block.img-right img {
154+
float: right;
155+
margin: 0 0 0 2rem;
156+
}
157+
158+
.block.img-right > div {
159+
padding-right: calc(140px + 1rem);
160+
padding-left: 0;
161+
}
162+
163+
article h3 {
164+
font-weight: 600;
165+
font-size: 24px;
166+
}
167+
168+
pre {
169+
background: #f6f8fa;
170+
border-radius: 3px;
171+
padding: 20px;
172+
white-space: pre-wrap;
173+
}
174+
175+
li {
176+
text-decoration: none;
177+
}

‎components/landing-page/img/cli.png

5.62 KB
Loading

‎components/landing-page/img/clients.png

12.4 KB
Loading

‎components/landing-page/img/components.png

13.9 KB
Loading

‎components/landing-page/img/cube-small.png

3.19 KB
Loading

‎components/landing-page/img/registry.png

37.4 KB
Loading

‎components/landing-page/img/template-system.png

5.12 KB
Loading

‎components/landing-page/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "landing-page",
33
"description": "",
4-
"version": "1.0.4",
4+
"version": "1.0.5",
55
"oc": {
66
"files": {
77
"data": "server.js",

‎components/landing-page/template.hbs

Lines changed: 110 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,114 @@
11
<link rel="stylesheet" href="{{staticPath}}css/styles.css">
22

3-
<div id="wrapper">
4-
<div id="hero">
5-
<div class="header">
6-
<h1>OpenComponents</h1>
7-
<h2>Painless micro frontends delivery</h2>
8-
<nav>
9-
<a class="button" href="https://github.com/opentable/oc">GitHub</a>
10-
<a class="button" href="https://github.com/opentable/oc/wiki">Documentation</a>
11-
<a class="button" href="https://gitter.im/opentable/oc">Ask the team</a>
12-
</nav>
13-
</div>
14-
<img class="logo" src="{{staticPath}}img/opencomponents-logo.png" />
15-
</div>
16-
<div id="content">
17-
Content here
3+
<div id="hero">
4+
<header>
5+
<h1>OpenComponents</h1>
6+
<h2>Painless micro frontends delivery</h2>
7+
<nav>
8+
<a class="button" href="https://github.com/opentable/oc">GitHub</a>
9+
<a class="button" href="https://github.com/opentable/oc/wiki">Documentation</a>
10+
<a class="button" href="https://gitter.im/opentable/oc">Ask the team</a>
11+
</nav>
12+
</header>
13+
<img class="logo" src="{{staticPath}}img/opencomponents-logo.png" />
14+
</div>
15+
16+
<section id="content">
17+
<article>
18+
<header>
19+
<h1>Building web applications together, faster.</h1>
20+
</header>
21+
<p>While microservice architectures allowed teams to scale delivery of independently deployable services, most frontend layers are still run as monoluthic applications. Similar to server-side applications, frontend layers often grows into large monoliths that are difficult to mantain and evolve</p>
22+
<p>The idea behind <a href="https://www.thoughtworks.com/radar/techniques/micro-frontends" target="_blank">micro frontends</a> is to enable multiple teams to seamless work together by fostering end-to-end onwership of indipendently developed, tested and deployed features.</p>
23+
<p>Think about UI as the composition of features which are maintained by independent teams. These teams could be cross functional allowing them to develop such features end-to-end, from database to user interface and indipendently deploy them.</p>
24+
</article>
25+
26+
<div class="hr">
27+
<img src="{{staticPath}}img/cube-small.png" />
1828
</div>
19-
<div id="footer">
20-
Footer here
29+
30+
<article>
31+
<header>
32+
<h1>The OpenComponents framework</h1>
33+
</header>
34+
<p>OpenComponents is an opensource, "batteries included" micro frontends framework. Born at OpenTable in 2014, it matured over the years into a battle tested solution currently used to deliver micro frontends at scale by fast growing companies around the world.</p>
35+
<div class="block">
36+
<img src="{{staticPath}}img/components.png" />
37+
<div>
38+
<h2>Components</h2>
39+
<p>Small, immutable, units of universal code mainly consisting of html, javascript and css. They can optionally contain some logic, allowing a server-side node.js application to compose a model that is used to render the view. After rendering they are pieces of pure html to be injected in any html page. <a href="https://github.com/opentable/oc/wiki#components-management" target="_blank">Learn more</a></p>
40+
</div>
41+
</div>
42+
<div class="block img-right">
43+
<img src="{{staticPath}}img/template-system.png" />
44+
<div>
45+
<h2>Template system</h2>
46+
<p>OC is unopionated about components and their underlying client-side JavaScript stack. The template system allows for support of any client-side technology, hiding away all the configuration complexity while avoiding specific UI framework lock-in. <a href="https://github.com/opentable/oc/wiki/The-template-system" target="_blank">Learn more</a></p>
47+
</div>
48+
</div>
49+
<div class="block">
50+
<img src="{{staticPath}}img/registry.png" />
51+
<div>
52+
<h2>Registry</h2>
53+
<p>The registry provide a rest API to consume, retrieve, and publish components to a library. When components depend on static resources (such as images, css files, etc.) these are stored, during packaging and publishing, in a publicly-exposed part of the library that serves as cdn. <a href="https://github.com/opentable/oc/wiki/Registry" target="_blank">Learn more</a></p>
54+
</div>
55+
</div>
56+
<div class="block img-right">
57+
<img src="{{staticPath}}img/cli.png" />
58+
<div>
59+
<h2>CLI</h2>
60+
<p>The CLI tool allows developers to create, develop, and test components locally. It also allow to publish components to live registry. <a href="https://github.com/opentable/oc/wiki/Cli" target="_blank">Learn more</a></p>
61+
</div>
62+
</div>
63+
<div class="block">
64+
<img src="{{staticPath}}img/clients.png" />
65+
<div>
66+
<h2>Client libraries</h2>
67+
<p>Multiple libraries are available, allowing to consume components on different environment and platforms. Depending on the library, client are normally able to consume both unrendered components and rendered components. <a href="https://github.com/opencomponents/oc-client-node#oc-client" target="_blank">Learn more</a></p>
68+
</div>
69+
</div>
70+
</article>
71+
72+
<div class="hr">
73+
<img src="{{staticPath}}img/cube-small.png" />
2174
</div>
22-
</div>
75+
76+
<article>
77+
<header>
78+
<h1>Get started with OpenComponents</h1>
79+
</header>
80+
<p>Before starting make sure you have:<br />
81+
<ul>
82+
<li>An account on <a href="https://signup.heroku.com/" target="_blank">Heroku</a></li>
83+
<li>An <a href="https://aws.amazon.com/s3" target="_blank">S3</a> bucket on AWS</li>
84+
</ul>
85+
</p>
86+
<h3>#1 - Deploy the registry to Heroku</h3>
87+
<p>
88+
<a class="button secondary" href="https://heroku.com/deploy?template=https://github.com/opencomponents/starter-kit" target="_blank">Click to deploy to Heroku</a> - deploy your OpenComponents registry
89+
</p>
90+
<h3>#2 - Build your first component</h3>
91+
<p>Install the OpenComponents CLI</p>
92+
<pre>$ npm install -g oc</pre>
93+
<p>Create your first component</p>
94+
<pre>$ oc init my-first-component</pre>
95+
<p>Develop/test locally by starting a local dev registry</p>
96+
<pre>$ oc dev . 3030</pre>
97+
<p>Your component will be available at:</p>
98+
<ul>
99+
<li>endpoint: <a href="http://localhost:3030/my-first-component" target="_blank">http://localhost:3030/my-first-component</a></li>
100+
<li>info: <a href="http://localhost:3030/my-first-component/~info" target="_blank">http://localhost:3030/my-first-component/~info</a></li>
101+
<li>fullPreview: <a href="http://localhost:3030/my-first-component/~preview" target="_blank">http://localhost:3030/my-first-component/~preview</a></li>
102+
</ul>
103+
<h3>#3 Publish the component to the registry</h3>
104+
<p>Add the registry using the CLI</p>
105+
<pre>$ oc registry add http://my-registry.on.herokuapp.com/</pre>
106+
<p>Publish your component</p>
107+
<pre>$ oc publish my-first-component --username=YOURVALUEHERE --password=YOURVALUEHERE</pre>
108+
<p>Your component is now published: <a href="http://my-registry.on.herokuapp.com/my-first-component" target="_blank">http://my-registry.on.herokuapp.com/my-first-component</a></p>
109+
</article>
110+
</section>
111+
112+
<div class="hr footer">
113+
<img src="{{staticPath}}img/cube-small.png" />
114+
</div>

0 commit comments

Comments
 (0)