jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-27 03:07:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename Jekyll components collection to integrations

Browse Source
This commit is contained in:
Franck Nijhof 2019-09-29 22:03:21 +02:00
parent 57c6dec6c2
commit 611115e1ea
No known key found for this signature in database
GPG Key ID: D62583BA8AB11CA3
2 changed files with 217 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -63,7 +63,7 @@ titlecase: true # Converts page and post titles to titlecase
# page_asides: # page_asides:
collections: collections:
components: integrations:
output: true output: true
cookbook: cookbook:
output: true output: true

397
source/integrations/index.html
View File

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