-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (91 loc) · 5.39 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
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Availability-widget by campgroundbooking</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="pages/stylesheets/normalize.css" media="screen">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="pages/stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="pages/stylesheets/github-light.css" media="screen">
<script src="dist/campgroundbooking-widget.js"></script>
<style>
.page-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: visible;
}
.container {
display: flex;
flex-wrap: wrap;
margin: -1rem;
}
campgroundbooking-widget {
flex: 0 1 200px;
margin: 1rem;
}
</style>
</head>
<body>
<section class="page-header">
<h1 class="project-name">Availability-widget</h1>
<h2 class="project-tagline">Webcomponent based widget for CampgroundBooking.com availablity</h2>
<a href="https://github.com/campgroundbooking/availability-widget" class="btn">View on GitHub</a>
<a href="https://github.com/campgroundbooking/availability-widget/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/campgroundbooking/availability-widget/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="campgroundbooking-availability-widget" class="anchor" href="#campgroundbooking-availability-widget" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>CampgroundBooking Availability Widget</h1>
<p>Widget to check the availability of a campsite/campground through CampgroundBooking.com.</p>
<h2>
<a id="installation" class="anchor" href="#installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installation</h2>
<div class="highlight highlight-source-shell"><pre>npm i @campgroundbooking/availability-widget</pre></div>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage</h2>
<div class="highlight highlight-text-html-basic"><pre><!DOCTYPE html>
<<span class="pl-ent">html</span> <span class="pl-e">lang</span>=<span class="pl-s"><span class="pl-pds">"</span>en<span class="pl-pds">"</span></span>>
<<span class="pl-ent">head</span>>
<<span class="pl-ent">meta</span> <span class="pl-e">charset</span>=<span class="pl-s"><span class="pl-pds">"</span>UTF-8<span class="pl-pds">"</span></span>>
<<span class="pl-ent">title</span>>CampgroundBooking availability</<span class="pl-ent">title</span>>
<span class="pl-s1"> <<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>campgroundbooking-widget.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>></span>
</<span class="pl-ent">head</span>>
<<span class="pl-ent">body</span>>
<<span class="pl-ent">campgroundbooking</span><span class="pl-e">-widget</span> <span class="pl-e">theme</span>=<span class="pl-s"><span class="pl-pds">"</span>blue<span class="pl-pds">"</span></span>></<span class="pl-ent">campgroundbooking</span><span class="pl-e">-widget</span>>
</<span class="pl-ent">body</span>>
</<span class="pl-ent">html</span>></pre></div>
<h3>
<a id="options" class="anchor" href="#options" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Options</h3>
<ul>
<li>
<em>theme</em> - A theme to load (e.g. green, red, blue, gold)</li>
<li>
<em>client-id</em> - Your campground booking client id</li>
<li>
<em>campground</em> - The id of the campground to check</li>
<li>
<em>site</em> (optional) - The id of a site to check, if no site given checks the whole campground</li>
<li>
<em>server</em> (optional) - The campground booking server to connect to (default <a href="https://app.campgorundbooking.com">https://app.campgorundbooking.com</a>)</li>
</ul>
<h2>Demo</h2>
<div class="page-container">
<div class="container">
<campgroundbooking-widget></campgroundbooking-widget>
<campgroundbooking-widget theme="blue"></campgroundbooking-widget>
<campgroundbooking-widget theme="red"></campgroundbooking-widget>
<campgroundbooking-widget theme="green"></campgroundbooking-widget>
<campgroundbooking-widget theme="gold"></campgroundbooking-widget>
</div>
</div>
<h2>
<a id="license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h2>
<p>MIT</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/campgroundbooking/availability-widget">Availability-widget</a> is maintained by <a href="https://github.com/campgroundbooking">campgroundbooking</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>