mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-23 17:27:19 +00:00
Rename Jekyll components collection to integrations
This commit is contained in:
parent
57c6dec6c2
commit
611115e1ea
@ -63,7 +63,7 @@ titlecase: true # Converts page and post titles to titlecase
|
||||
# page_asides:
|
||||
|
||||
collections:
|
||||
components:
|
||||
integrations:
|
||||
output: true
|
||||
cookbook:
|
||||
output: true
|
||||
|
@ -10,22 +10,22 @@ regenerate: false
|
||||
|
||||
{%- comment -%}Can't use where to count nil because of https://github.com/jekyll/jekyll/issues/6038{%- endcomment -%}
|
||||
{%- assign tot = 0 -%}
|
||||
{%- for comp in site.components -%}
|
||||
{%- if comp.ha_category -%}
|
||||
{%- if comp.ha_category.first -%}
|
||||
{%- assign tot = tot | plus: comp.ha_category.size -%}
|
||||
{%- else -%}
|
||||
{%- assign tot = tot | plus: 1 -%}
|
||||
{%- endif -%}
|
||||
{%- endif %}
|
||||
{%- for comp in site.integrations -%}
|
||||
{%- if comp.ha_category -%}
|
||||
{%- if comp.ha_category.first -%}
|
||||
{%- assign tot = tot | plus: comp.ha_category.size -%}
|
||||
{%- else -%}
|
||||
{%- assign tot = tot | plus: 1 -%}
|
||||
{%- endif -%}
|
||||
{%- endif %}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- assign components = site.components | sort: 'title' -%}
|
||||
{%- assign components_by_version = site.components | group_components_by_release -%}
|
||||
{%- assign components = site.integrations | sort: 'title' -%}
|
||||
{%- assign components_by_version = site.integrations | group_components_by_release -%}
|
||||
{%- assign categories = components | map: 'ha_category' | join: ',' | join: ',' | split: ',' | uniq | sort -%}
|
||||
|
||||
<p class='note'>
|
||||
Support for these integrations is provided by the Home Assistant community.
|
||||
Support for these integrations is provided by the Home Assistant community.
|
||||
</p>
|
||||
<div class="grid">
|
||||
<div class="grid__item one-sixth lap-one-whole palm-one-whole">
|
||||
@ -34,21 +34,22 @@ Support for these integrations is provided by the Home Assistant community.
|
||||
<a href='#all' class="btn">All ({{tot}})</a>
|
||||
<a href='#featured' class="btn featured">Featured</a>
|
||||
<div class="version_select">Added in: <select name="versions">
|
||||
<option value="#"></option>
|
||||
{%- for group in components_by_version -%}
|
||||
<option value="#"></option>
|
||||
{%- for group in components_by_version -%}
|
||||
<optgroup label="{{ group.label }} ({{group.new_components_count}})">
|
||||
{%- for version in group.versions -%}
|
||||
<option value="#version/{{ version.label }}">{{ version.label }} ({{ version.new_components_count }})</option>
|
||||
<option value="#version/{{ version.label }}">{{ version.label }} ({{ version.new_components_count }})
|
||||
</option>
|
||||
{%- endfor -%}
|
||||
</optgroup>
|
||||
{%- endfor -%}
|
||||
</select></div>
|
||||
{%- for category in categories -%}
|
||||
{%- assign components_count = components | where: 'ha_category', category | size -%}
|
||||
{%- if category and category != 'Other' and components_count != 0 -%}
|
||||
<a href='#{{ category | slugify }}' class="btn">{{ category }} ({{ components_count }})</a>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</select></div>
|
||||
{%- for category in categories -%}
|
||||
{%- assign components_count = components | where: 'ha_category', category | size -%}
|
||||
{%- if category and category != 'Other' and components_count != 0 -%}
|
||||
<a href='#{{ category | slugify }}' class="btn">{{ category }} ({{ components_count }})</a>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
|
||||
<a href='#other' class="btn">Other ({{ components | where: 'ha_category', 'Other' | size }})</a>
|
||||
</div>
|
||||
@ -69,7 +70,7 @@ Support for these integrations is provided by the Home Assistant community.
|
||||
|
||||
{% raw %}
|
||||
<script id="component-template" type="text/x-custom-template">
|
||||
{{#components}}
|
||||
{{#components}}
|
||||
<a href="{{url}}" class="option-card">
|
||||
<div class="img-container">{{{image}}}</div>
|
||||
<div class='title'>{{title}}</div>
|
||||
@ -83,201 +84,233 @@ Support for these integrations is provided by the Home Assistant community.
|
||||
{% endraw %}
|
||||
|
||||
<script type="text/javascript">
|
||||
// This object contains all components we have
|
||||
var allComponents = [
|
||||
{%- for component in components -%}
|
||||
{%- if component.ha_category -%}
|
||||
{%- assign sliced_version = component.ha_release | split: '.' -%}
|
||||
{%- assign minor_version = sliced_version[1]|plus: 0 -%}
|
||||
{%- assign major_version = sliced_version[0]|plus: 0 -%}
|
||||
{%- assign featured_first = true -%}
|
||||
{%- for ha_category in component.ha_category -%}
|
||||
{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{ha_category | slugify}}", featured: {% if component.featured and featured_first %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
|
||||
{%- assign featured_first = false -%}
|
||||
{%- endfor -%}
|
||||
{% endif -%}
|
||||
{%- endfor -%}
|
||||
false
|
||||
];
|
||||
allComponents.pop(); // remove placeholder element at the end
|
||||
// This object contains all components we have
|
||||
var allComponents = [{
|
||||
% -
|
||||
for component in components - %
|
||||
} {
|
||||
% -
|
||||
if component.ha_category - %
|
||||
} {
|
||||
% -assign sliced_version = component.ha_release | split: '.' - %
|
||||
} {
|
||||
% -assign minor_version = sliced_version[1] | plus: 0 - %
|
||||
} {
|
||||
% -assign major_version = sliced_version[0] | plus: 0 - %
|
||||
} {
|
||||
% -assign featured_first = true - %
|
||||
} {
|
||||
% -
|
||||
for ha_category in component.ha_category - %
|
||||
} {
|
||||
url: "{{ component.url }}",
|
||||
title: "{{component.title}}",
|
||||
cat: "{{ha_category | slugify}}",
|
||||
featured: {
|
||||
%
|
||||
if component.featured and featured_first %
|
||||
}
|
||||
true {
|
||||
%
|
||||
else %
|
||||
}
|
||||
false {
|
||||
% endif %
|
||||
},
|
||||
v: "{{major_version}}.{{minor_version}}",
|
||||
logo: "{{component.logo}}"
|
||||
},
|
||||
{
|
||||
% -assign featured_first = false - %
|
||||
} {
|
||||
% -endfor - %
|
||||
} {
|
||||
% endif - %
|
||||
} {
|
||||
% -endfor - %
|
||||
}
|
||||
false
|
||||
];
|
||||
allComponents.pop(); // remove placeholder element at the end
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var template = $('#component-template').html();
|
||||
Mustache.parse(template); // make future calls to render faster
|
||||
(function () {
|
||||
var template = $('#component-template').html();
|
||||
Mustache.parse(template); // make future calls to render faster
|
||||
|
||||
function init() {
|
||||
// do the lowerCase transformation once
|
||||
for (i=0; i < (allComponents.length); i++) {
|
||||
allComponents[i].titleLC = allComponents[i].title.toLowerCase();
|
||||
allComponents[i].catLC = allComponents[i].cat.toLowerCase();
|
||||
}
|
||||
|
||||
// sort the components alphabetically
|
||||
allComponents.sort(function(a, b){
|
||||
return a.titleLC.localeCompare(b.titleLC);
|
||||
});
|
||||
|
||||
if (location.hash !== '' && location.hash.indexOf('#search/') === 0) {
|
||||
// set default value in search from URL
|
||||
jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8));
|
||||
}
|
||||
|
||||
// add focus to the search field - even on IE
|
||||
setTimeout(function () {
|
||||
jQuery('.component-search input').focus();
|
||||
}, 1);
|
||||
}
|
||||
init();
|
||||
|
||||
/**
|
||||
* filter all components, based on the location's hash and render them into the component box
|
||||
*/
|
||||
function applyFilter() {
|
||||
var logoLazyLoad = new LazyLoad({
|
||||
elements_selector: ".option-card img"
|
||||
});
|
||||
var rendered, i, filter, search;
|
||||
var hash = location.hash || '';
|
||||
var data = {
|
||||
components: [],
|
||||
image: function () {
|
||||
if (this.logo === '') {
|
||||
return '';
|
||||
} else {
|
||||
return '<img data-src="/images/supported_brands/' + this.logo + '">';
|
||||
}
|
||||
function init() {
|
||||
// do the lowerCase transformation once
|
||||
for (i = 0; i < (allComponents.length); i++) {
|
||||
allComponents[i].titleLC = allComponents[i].title.toLowerCase();
|
||||
allComponents[i].catLC = allComponents[i].cat.toLowerCase();
|
||||
}
|
||||
};
|
||||
|
||||
// fade-out css effect on the old elements. This is actually not visible on fast browsers
|
||||
$('#componentContainer').addClass('remove-items');
|
||||
// sort the components alphabetically
|
||||
allComponents.sort(function (a, b) {
|
||||
return a.titleLC.localeCompare(b.titleLC);
|
||||
});
|
||||
|
||||
if (hash.indexOf('#search/') === -1) {
|
||||
// reset search box when not searching
|
||||
jQuery('.component-search input').val(null);
|
||||
if (location.hash !== '' && location.hash.indexOf('#search/') === 0) {
|
||||
// set default value in search from URL
|
||||
jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8));
|
||||
}
|
||||
|
||||
// add focus to the search field - even on IE
|
||||
setTimeout(function () {
|
||||
jQuery('.component-search input').focus();
|
||||
}, 1);
|
||||
}
|
||||
init();
|
||||
|
||||
if (hash === '#all') {
|
||||
// shortcut: no need to filter
|
||||
data.components = allComponents;
|
||||
} else {
|
||||
if (hash.indexOf('#search/') === 0) {
|
||||
// search through title and category
|
||||
search = decodeURIComponent(hash).substring(8).toLowerCase();
|
||||
filter = function(comp) {
|
||||
return (comp.titleLC.indexOf(search) !== -1) ||
|
||||
(comp.catLC.indexOf(search) !== -1);
|
||||
};
|
||||
/**
|
||||
* filter all components, based on the location's hash and render them into the component box
|
||||
*/
|
||||
function applyFilter() {
|
||||
var logoLazyLoad = new LazyLoad({
|
||||
elements_selector: ".option-card img"
|
||||
});
|
||||
var rendered, i, filter, search;
|
||||
var hash = location.hash || '';
|
||||
var data = {
|
||||
components: [],
|
||||
image: function () {
|
||||
if (this.logo === '') {
|
||||
return '';
|
||||
} else {
|
||||
return '<img data-src="/images/supported_brands/' + this.logo + '">';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
} else if(hash === '#featured' || hash === '') {
|
||||
// only show those with featured = true
|
||||
filter = function(comp) {
|
||||
return comp.featured;
|
||||
};
|
||||
// fade-out css effect on the old elements. This is actually not visible on fast browsers
|
||||
$('#componentContainer').addClass('remove-items');
|
||||
|
||||
} else if(hash.indexOf('#version/') === 0) {
|
||||
// compare against a version
|
||||
search = decodeURIComponent(hash).substring(9).toLowerCase();
|
||||
filter = function(comp) {
|
||||
// compare version string against version js
|
||||
return comp.v === search;
|
||||
};
|
||||
if (hash.indexOf('#search/') === -1) {
|
||||
// reset search box when not searching
|
||||
jQuery('.component-search input').val(null);
|
||||
}
|
||||
|
||||
if (hash === '#all') {
|
||||
// shortcut: no need to filter
|
||||
data.components = allComponents;
|
||||
} else {
|
||||
// regular filter categories
|
||||
search = hash.substring(1);
|
||||
filter = function(comp) {
|
||||
return comp.catLC === search;
|
||||
};
|
||||
}
|
||||
if (hash.indexOf('#search/') === 0) {
|
||||
// search through title and category
|
||||
search = decodeURIComponent(hash).substring(8).toLowerCase();
|
||||
filter = function (comp) {
|
||||
return (comp.titleLC.indexOf(search) !== -1) ||
|
||||
(comp.catLC.indexOf(search) !== -1);
|
||||
};
|
||||
|
||||
// filter all components using the filter function
|
||||
for (i=0; i < (allComponents.length); i++) {
|
||||
if (filter(allComponents[i])) {
|
||||
data.components.push(allComponents[i]);
|
||||
} else if (hash === '#featured' || hash === '') {
|
||||
// only show those with featured = true
|
||||
filter = function (comp) {
|
||||
return comp.featured;
|
||||
};
|
||||
|
||||
} else if (hash.indexOf('#version/') === 0) {
|
||||
// compare against a version
|
||||
search = decodeURIComponent(hash).substring(9).toLowerCase();
|
||||
filter = function (comp) {
|
||||
// compare version string against version js
|
||||
return comp.v === search;
|
||||
};
|
||||
|
||||
} else {
|
||||
// regular filter categories
|
||||
search = hash.substring(1);
|
||||
filter = function (comp) {
|
||||
return comp.catLC === search;
|
||||
};
|
||||
}
|
||||
|
||||
// filter all components using the filter function
|
||||
for (i = 0; i < (allComponents.length); i++) {
|
||||
if (filter(allComponents[i])) {
|
||||
data.components.push(allComponents[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rendered = Mustache.render(template, data);
|
||||
|
||||
// remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
|
||||
$('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
|
||||
logoLazyLoad.update();
|
||||
}
|
||||
|
||||
rendered = Mustache.render(template, data);
|
||||
|
||||
// remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
|
||||
$('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
|
||||
logoLazyLoad.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* update the browser location hash. This enables users to use the browser-history
|
||||
*/
|
||||
function updateHash(newHash) {
|
||||
if ('pushState' in history) {
|
||||
history.pushState('', '', newHash);
|
||||
} else {
|
||||
location.hash = newHash;
|
||||
/**
|
||||
* update the browser location hash. This enables users to use the browser-history
|
||||
*/
|
||||
function updateHash(newHash) {
|
||||
if ('pushState' in history) {
|
||||
history.pushState('', '', newHash);
|
||||
} else {
|
||||
location.hash = newHash;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update view by filter selection
|
||||
jQuery('.filter-button-group a').click(function() {
|
||||
updateHash(this.getAttribute('href'));
|
||||
applyFilter();
|
||||
// update view by filter selection
|
||||
jQuery('.filter-button-group a').click(function () {
|
||||
updateHash(this.getAttribute('href'));
|
||||
applyFilter();
|
||||
|
||||
return false;
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// update view on select change
|
||||
jQuery('select').change(function() {
|
||||
updateHash(this.value);
|
||||
applyFilter();
|
||||
// update view on select change
|
||||
jQuery('select').change(function () {
|
||||
updateHash(this.value);
|
||||
applyFilter();
|
||||
|
||||
return false;
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* Simple debounce implementation, based on http://davidwalsh.name/javascript-debounce-function
|
||||
*/
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
/**
|
||||
* Simple debounce implementation, based on http://davidwalsh.name/javascript-debounce-function
|
||||
*/
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function () {
|
||||
var context = this,
|
||||
args = arguments;
|
||||
var later = function () {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// update view by search text
|
||||
$('.component-search input').keyup(debounce(function() {
|
||||
var text = $(this).val();
|
||||
// sanitize input
|
||||
text = text.replace(/[(\?|\&\{\}\(\))]/gi, '').trim();
|
||||
if (typeof text === "string" && text.length !== 0) {
|
||||
// update view by search text
|
||||
$('.component-search input').keyup(debounce(function () {
|
||||
var text = $(this).val();
|
||||
// sanitize input
|
||||
text = text.replace(/[(\?|\&\{\}\(\))]/gi, '').trim();
|
||||
if (typeof text === "string" && text.length !== 0) {
|
||||
updateHash('#search/' + text);
|
||||
applyFilter();
|
||||
}
|
||||
}, 500));
|
||||
}
|
||||
}, 500));
|
||||
|
||||
window.addEventListener('hashchange', applyFilter);
|
||||
applyFilter();
|
||||
})();
|
||||
window.addEventListener('hashchange', applyFilter);
|
||||
applyFilter();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<noscript>
|
||||
<ul>
|
||||
{%- for component in components -%}
|
||||
{%- for component in components -%}
|
||||
{%- if component.ha_category -%}
|
||||
<li><a href='{{ component.url }}'>{{ component.title }}</a></li>
|
||||
<li><a href='{{ component.url }}'>{{ component.title }}</a></li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</noscript>
|
||||
</noscript>
|
Loading…
x
Reference in New Issue
Block a user