-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (83 loc) · 2.85 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
<head>
<title>C.R.A.B</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" />
<style>
body {
background: linear-gradient(bisque, sandybrown);
color: darksalmon;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.5;
}
.header {
font-family: 'Lobster Two', cursive;
}
.container {
max-width: 960px;
background-color: rgba(255,255,255,.8);
padding: 20px;
overflow: auto;
border-radius: 20px;
}
.crab__logo {
margin: 0 auto;
display: block;
}
a {
background: darksalmon;
color: #FFF;
padding: 20px 50px;
display: inline-block;
border-radius: 10px;
text-decoration: none;
margin: 0 auto;
text-align: center;
}
code {
border: 1px solid darksalmon;
background: bisque;
padding: 5px;
border-radius: 5px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<header class="crab__hero">
<img alt="CRAB logo" src="/CRAB-logo.png" width="250" class="crab__logo"/>
<h1 class="header">Create React App for Beaker</h1>
<p>If you want to create sites in Beaker and want to be using React then C.R.A.B has got you sorted.</p>
<p>Fork this site and follow the instructions below to get started:</p>
</header>
<section class="crab__instructions">
<ol>
<li>Fork this site</li>
<li>Give it a name etc</li>
<li>Go to the Site using a terminal</li>
<li> Run the following commands
<dl>
<dt><code>yarn</code></dt>
<dd>This will install all the dependencies needed.</dd>
<dt><code>yarn build</code></dt>
<dd>This will run the yarn build command</dd>
<dt><code>yarn dev</code></dt>
<dd>This will watch the build folder and rebuild when changes are detected</dd>
</dl>
</li>
<li>Change Folder in the library – Set the <code>build</code> folder as the root.</li>
<li>Do your thing! – Make changes to the code under 'src' and you'll see it change live in Beaker</li>
</ol>
</section>
<div class="crab__help">
<h1 class="header">Want to make this better?</h1>
<p>This is a simple starter for CRA and Beaker. I want to make it more automated but for now there's those steps up there. If you want to help then feel free to fork the repo on Github and make things better!</p>
<a href="http://github.com/damien-mcmahon/create-react-app-beaker">Github</a>
</div>
</div>
</div>
</body>
</html>