Skip to content

Commit a42745c

Browse files
shadowcodexshadowcodex
committed
added blurb, updated components to use algolia search
1 parent afa75a0 commit a42745c

File tree

5 files changed

+132
-2
lines changed

5 files changed

+132
-2
lines changed

‎_data/components.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,4 +74,9 @@
7474
"permalink": "components/team-member-multi-profile-card/",
7575
"image": "imgs/team-card.png"
7676
},
77+
{
78+
"title": "Blurb",
79+
"permalink": "components/blurb",
80+
"image": "imgs/blurb.png"
81+
}
7782
]

‎components.html‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,27 @@
33
title: 'Components'
44
permalink: '/components/'
55
---
6+
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css"> -->
7+
<!-- <style>
8+
.ais-hits {
9+
mid-width: 100%;
10+
}
11+
.ais-hits--item {
12+
display: inline;
13+
}
14+
</style> -->
615
<h1>Components</h1>
716
{% assign componentCount = site.data.components.size %}
817
<p>The full library of the completed components.<br><strong>Total Components so far:</strong> <span class="text-danger">{{componentCount}}</span></p>
9-
<p></p>
18+
19+
<link rel="stylesheet" href="../css/font-awesome.min.css">
20+
<img src="{{site.baseurl}}/imgs/algolia-powered-by.svg" alt="powered by algolia">
21+
<div class="input-group">
22+
<span class="input-group-addon"><i class="fa fa-search" aria-hidden="true"></i></span>
23+
<input type="text" class="form-control" placeholder="search for component" id="search-input">
24+
</div>
1025
<br>
26+
<div id="hits">
1127
{% assign rows = site.data.components.size | divided_by: 6.0 | ceil %}
1228
{% for i in (1..rows) %}
1329
{% assign offset = forloop.index0 | times: 6 %}
@@ -24,8 +40,53 @@ <h1>Components</h1>
2440
{% endfor %}
2541
</div>
2642
{% endfor %}
43+
</div>
2744
<br><br>
2845
<p>Todo:</p>
2946
<p>To follow items on the todo list please look at the project list on github...</p>
3047
<a href="https://github.com/shadowcodex/codex-ui/projects/" class="btn btn-lg btn-primary">View Github Projects</a>
31-
<br><br>
48+
<br><br>
49+
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
50+
{% raw %}
51+
<script type="text/html" id="hit-template">
52+
<div class="col-6 col-sm-4 col-md-3 col-lg-3 col-xl-2">
53+
<a href="/codex-ui/{{permalink}}" class="card border-dark mb-3" style="text-decoration:none;">
54+
<img src="/codex-ui/{{image}}" alt="{{title}}" class="card-img-top">
55+
<div class="card-footer bg-dark text-white">
56+
{{title}}
57+
</div>
58+
</a>
59+
</div>
60+
</script>
61+
{% endraw %}
62+
<script>
63+
var client = algoliasearch("JALYH7QHOY", "1a318d659306a2e6a21d83ffd6fff9e2");
64+
var index = client.initIndex('bootstrap_components');
65+
66+
document.getElementById("search-input").addEventListener("keyup", function(event){
67+
index.search(document.getElementById("search-input").value, function(err, content){
68+
document.getElementById("hits").innerHTML = '';
69+
var hits = document.getElementById("hits");
70+
hits.innerHTML = '';
71+
var ultiText = '';
72+
for(var i = 0; i < content.hits.length; i++){
73+
var text = ''
74+
if(i==0) {
75+
text += '<div class="row">';
76+
} else if (i%6 == 0){
77+
text += '</div><div class="row">';
78+
}
79+
var data = content.hits[i];
80+
text += '<div class="col-6 col-sm-4 col-md-3 col-lg-3 col-xl-2">';
81+
text += '<a href="/codex-ui/'+ data.permalink +'" class="card border-dark mb-3" style="text-decoration:none;">';
82+
text += '<img src="/codex-ui/'+ data.image +'" alt="'+data.title+'" class="card-img-top">';
83+
text += '<div class="card-footer bg-dark text-white">' + data.title + '</div></a></div>';
84+
85+
ultiText += text;
86+
}
87+
ultiText += '</div>';
88+
hits.innerHTML = ultiText;
89+
});
90+
})
91+
92+
</script>

‎components/blurb.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: 'Blurb'
3+
description: 'A feature or details component. (horizontal blurb)'
4+
permalink: '/components/blurb/'
5+
layout: component
6+
---
7+
<p>Font Awesome Required for icons in form</p>
8+
<p>Code:</p>
9+
{% highlight html %}
10+
<link rel="stylesheet" href="../../css/font-awesome.min.css">
11+
{% endhighlight %}
12+
<hr>
13+
<br>
14+
<link rel="stylesheet" href="../../css/font-awesome.min.css">
15+
<div class="row justify-content-md-center">
16+
<div class="col-md-4 col-lg-4 col-xl-4">
17+
<!-- Start Blurb -->
18+
<div class="row">
19+
<div class="col-2">
20+
<i class="fa fa-check fa-2x mt-3" aria-hidden="true"></i>
21+
</div>
22+
<div class="col-10">
23+
<strong>A Catchy Title</strong><br>
24+
Phasellus ultrices sem faucibus, dapibus sem at, ornare quam.
25+
</div>
26+
</div>
27+
<!-- End Blurb -->
28+
</div>
29+
</div>
30+
<br>
31+
<p>Code:</p>
32+
{% highlight html %}
33+
<div class="row justify-content-md-center">
34+
<div class="col-md-4 col-lg-4 col-xl-4">
35+
<!-- Start Blurb -->
36+
<div class="row">
37+
<div class="col-2">
38+
<i class="fa fa-check fa-2x mt-3" aria-hidden="true"></i>
39+
</div>
40+
<div class="col-10">
41+
<strong>A Catchy Title</strong><br>
42+
Phasellus ultrices sem faucibus, dapibus sem at, ornare quam.
43+
</div>
44+
</div>
45+
<!-- End Blurb -->
46+
</div>
47+
</div>
48+
{% endhighlight %}
49+
<hr>
50+
<br>

‎imgs/algolia-powered-by.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎imgs/blurb.png‎

3.87 KB
Loading

0 commit comments

Comments
 (0)