-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
158 lines (147 loc) · 11.2 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
---
title: Home
layout: default
---
<div class="row my-5">
<div class="col-4 mx-auto text-center">
<!--<div class="alert alert-info alert-dismissible fade show d-inline-block w-75 alert-full-width" role="alert">
<p>There are new opportunities to learn and teach CollectionBuilder! Check out the <a href="{{ '/funded-opportunities/' | relative_url }}" class="font-weight-bold" style="color:#0c5460;">CollectionBuilder Incentives Program</a>.</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>-->
<div class="mt-4"> <a href="{{ '/' | relative_url }}"><img style="max-height:220px;" class="my-2 img-fluid" src="{{ '/images/logo/cb-logo-solid-vgold-transparent.png' | relative_url }}" alt="stylized CollectionBuilder logo"> </a></div>
</div>
<div class="col-md-7 my-4 py-4 pr-5">
<h2 class="font-italic"><strong>CollectionBuilder</strong> is an open source framework for creating digital collection and exhibit websites that are driven by metadata and powered by modern static web technology.</h2>
</div>
<div class="col-12">
<div class="mt-5 text-center"><a href="tutorials.html" class="btn btn-lg btn-primary m-3 p-3">Learn How it Works</a><a href="#templates" class="btn btn-lg btn-warning m-3 p-3">Choose a Template to Start a Project</a>
<a class="btn btn-lg btn-success m-3 p-3" href="https://collectionbuilder.github.io/cb-examples/" target="_blank">See Examples</a></div>
</div>
</div>
<div class="row py-5 bg-secondary text-white my-0 ">
<div class="col-md-7 col-12 text-center">
<img class="img-fluid w-75" src="{{ '/images/metadata.png' | relative_url }}" alt="a spreadsheet with metadata in rows">
</div>
<div class="col-md-3 col-12 pt-3 text-left">
<p class="display-4 my-4 h1">You do the Metadata.</p>
<p class="h5">Use your own spreadsheet and add <a class="text-warning" href="https://collectionbuilder.github.io/cb-docs/docs/metadata/">a few required fields</a>. </p>
</div>
</div>
<div class="row bg-dark text-white pt-5">
<div class="col-md-12 pt-3 text-left ">
<h2 class="display-4 d-none d-md-block my-3 ml-md-5">CollectionBuilder makes it <em>work</em>.</h2>
<h2 class="d-md-none my-3 ml-md-4">CollectionBuilder makes it <em>work</em>.</h2>
<p class="h5 ml-md-5">Upload your metadata and let CollectionBuilder use it to make: </p>
</div>
</div>
<div class="row bg-dark text-white mt-0 pb-5">
<div class="pl-md-5 offset-md-1 col-md-3 text-left mt-4 order-md-first">
<ul class="h5 pl-md-4 ml-md-3 list-group">
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="0" class="active">Maps</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="1">Timelines</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="2">Browse and Search Features</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="3">Tag Clouds</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="4">Data Outputs</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="5">Infographic Overview</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="6">Featured Images</li>
<li class="list-group-item bg-dark text-center border-secondary"><a href="#" class="text-warning" data-target="#carouselExampleIndicators" data-slide-to="7">TimelineJS & other options</li>
</ul>
</div>
<div class="col-md-8 pt-3 order-first order-md-last">
<div id="carouselExampleIndicators" class="carousel slide p-4 mt-0 mx-auto text-center" data-ride="carousel" data-interval="false" >
<ol class="carousel-indicators mt-5">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/home/map.jpg" alt="screenshot of a web map">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Interactive Maps Using Leaflet</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/timeline-postcards.png" alt="screenshot of a timeline of images">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Auto-generated Timeline</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/browse.png" alt="screenshot of search results in page">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Metadata driven browse and search</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/tagcloud.png" alt="screenshot of a word cloud example">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Auto Generated Tag Clouds</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/data.png" alt="screenshot of buttons to download data files">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Collections AS Data</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/bento.png" alt="screenshot of homepage layout">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Generated Overview on Home Page</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/home-image.png" alt="screenshot of large feature image layout">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Large Featured Images</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home/timelinejs.png" alt="screenshot of timelinejs">
<div class="carousel-caption d-none d-md-block">
<p class="h5 bg-dark mt-4 py-2" style="margin:0 -25%">Additional customization options such as TimelineJS</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-secondary" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-dark" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-secondary" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="row mt-4 ">
<div class="col-12 my-4">
<h2 class="m-3 font-italic text-center display-3" id="templates">Templates</h2>
<p class="h3 ml-4 text-center">Choose a template then use our <a href="https://collectionbuilder.github.io/cb-docs/" target="_blank">Documentation</a> and <a href="{{ '/tutorials.html' | relative_url }}">Tutorials</a> to build your site step-by-step.</p>
<p class="ml-4 mt-3 text-center h4">And check out <a href="https://collectionbuilder.github.io/cb-examples/" target="_blank">example projects from users around the world</a> to see each template in use! </p>
</div>
</div>
{% include templates.html %}
<div class="row mt-4 py-5 bg-secondary text-white text-center">
<div class="col-12 pt-4">
<h1 class="text-center">
A<br>
<a href="https://lib-static.github.io/" target="_blank" rel="noopener" title="lib-STATIC">
<img src="{{ '/images/lib-static-underline.png' | relative_url }}" id="lib-static-lobster" class="img-fluid mt-3" alt="Lib-Static logo">
</a><br>
Production
</h1>
</div>
<div class="col-md-6 offset-md-3 p-4 text-left pb-5">
<p >At its heart, CollectionBuilder is a set of Jekyll projects or templates designed following the <a href="https://lib-static.github.io/" style="text-decoration: underline;" class="text-white font-weight-bold">Lib-Static</a> development methodology which aims to lower the barriers for development and deployment of digital collections, while upholding the unique values and perspectives of <a href="https://en.wikipedia.org/wiki/GLAM_(industry_sector)" style="text-decoration: underline;" class="text-white font-weight-bold">GLAM institutions</a>.</p>
<p >CollectionBuilder prioritizes pragmatic, sustainable, and simplified approaches to infrastructure to ensure the tool is 'do-able' and approachable for digital knowledge workers in libraries and museums, empowering them to take control of their web systems. An experiment in 'minimal computing', CollectionBuilder provides a depth of learning opportunities and development possibilities, allowing users to take complete ownership over the project and make their work open to the world.</p>
</div>
</div>