Getting rid of sass + adding <base href + adding image-process-thumb + styling mg-tag-filters + adding support for lang: tags

This commit is contained in:
Lucas Cimon
2017-08-15 01:39:41 +02:00
parent 8d5d7491bc
commit a3b1d218ad
15 changed files with 112 additions and 444 deletions

View File

@@ -16,50 +16,54 @@
<!--[if gt IE 8]><!--> <html lang="{{ DEFAULT_LANG }}" class="no-js" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Blog"> <!--<![endif]-->
{% endif %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{{ SITENAME }}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% block description %}{{ DESCRIPTION }}{% endblock %}">
{% if FAVICON %}<link rel="shortcut icon" href="{{ SITEURL }}/{{ FAVICON }}" type="{{ FAVICON_TYPE|default('image/x-icon') }}">{% endif %}
<meta name="author" content="{{ AUTHOR }}">
<meta name="copyright" content="{{ AUTHOR }}">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@{{ TWITTER_USERNAME }}" />
<meta property="og:site_name" content="{{ SITENAME }}" />
{% block seo %}
<meta property="og:title" content="{{ SITENAME }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ SITEURL }}" />
<meta name="twitter:url" content="{{ SITEURL }}" />
<meta itemprop="name" content="{{ SITENAME }}" />
<meta itemprop="url" content="{{ SITEURL }}"/>
{% if DESCRIPTION %}
<meta property="og:description" content="{{ DESCRIPTION }}" />
<meta name="twitter:description" content="{{ DESCRIPTION }}" />
<meta itemprop="description" content="{{ DESCRIPTION }}" />
{% endif %}
{% if META_IMAGE %}
<meta property="og:image" content="{{ META_IMAGE }}" />
<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" />
<meta name="twitter:image" content="{{ META_IMAGE }}" />
<meta itemprop="image" content="{{ META_IMAGE }}" />
{% endif %}
{% endblock %}
<link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed"/>
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4.min.css' rel='stylesheet' type='text/css'>
{% if not DISABLE_SEARCH %}
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4-search.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/tipuesearch.css">
{% endif %}
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized-highlight.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="{{ SITEURL }}">
<title>{% block title %}{{ SITENAME }}{% endblock %}</title>
<meta name="description" content="{% block description %}{{ DESCRIPTION }}{% endblock %}">
{% if FAVICON %}<link rel="shortcut icon" href="{{ SITEURL }}/{{ FAVICON }}" type="{{ FAVICON_TYPE|default('image/x-icon') }}">{% endif %}
<link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed"/>
<meta name="author" content="{{ AUTHOR }}">
<meta name="copyright" content="{{ AUTHOR }}">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@{{ TWITTER_USERNAME }}" />
<meta property="og:site_name" content="{{ SITENAME }}" />
{% block seo %}
<meta property="og:title" content="{{ SITENAME }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ SITEURL }}" />
<meta name="twitter:url" content="{{ SITEURL }}" />
<meta itemprop="name" content="{{ SITENAME }}" />
<meta itemprop="url" content="{{ SITEURL }}"/>
{% if DESCRIPTION %}
<meta property="og:description" content="{{ DESCRIPTION }}" />
<meta name="twitter:description" content="{{ DESCRIPTION }}" />
<meta itemprop="description" content="{{ DESCRIPTION }}" />
{% endif %}
{% if META_IMAGE %}
<meta property="og:image" content="{{ META_IMAGE }}" />
<meta property="og:image:type" content="{{ META_IMAGE_TYPE }}" />
<meta name="twitter:image" content="{{ META_IMAGE }}" />
<meta itemprop="image" content="{{ META_IMAGE }}" />
{% endif %}
{% endblock %}
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4.min.css' rel='stylesheet' type='text/css'>
{% if not DISABLE_SEARCH %}
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4-search.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/tipuesearch.css">
{% endif %}
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized-highlight.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header class="mg-header uk-navbar uk-navbar-attached">
@@ -249,6 +253,7 @@
<script src="{{ SITEURL }}/theme/js/html5shiv-3.7.2.min.js"></script>
<script src="{{ SITEURL }}/theme/js/jquery-1.10.2.min.js"></script>
<script src="{{ SITEURL }}/theme/js/uikit-2.27.4.min.js"></script>
{% if not DISABLE_SEARCH %}
<script src="{{ SITEURL }}/theme/js/uikit-2.27.4-search.min.js"></script>
<script src="{{ SITEURL }}/theme/js/tipuesearch_set.js"></script>
@@ -257,12 +262,14 @@
{% include 'js/enable-search.js' %}
</script>
{% endif %}
{% if SHARE %}
<script src="{{ SITEURL }}/theme/js/jquery.sticky-kit.js"></script>
<script>
{% include 'js/social.js' %}
</script>
{% endif %}
{% if MG_FILTER_TAGS %}
<script>
{% include 'js/filter-tags.js' %}

View File

@@ -3,9 +3,12 @@
{% block content_title %}{% endblock %}
{% block header_extra %}
{% if MG_LANG_FILTER_TAGS %}
<button class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)({{ MG_LANG_FILTER_TAGS|tojson }})'>lang</button>
{% endif %}
{% if MG_FILTER_TAGS %}
{% for filter_tag in MG_FILTER_TAGS %}
<button class="mg-tag-filter" onclick="toggleTagFilter('{{ filter_tag }}')">{{ filter_tag.replace('lang:', '') }}</button>
<button class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')">{{ filter_tag.replace('lang:', '') }}</button>
{% endfor %}
{% endif %}
{% endblock %}

View File

@@ -6,19 +6,49 @@
* */
window.tagFilters = {}
function indexOf(array, predicate) {
for (var i = 0; i < array.length; i++) if (predicate(array[i])) return array[i];
}
function startsWith(searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
function toggleTagFilter(tag) {
var filterState = window.tagFilters[tag]
if (filterState === true) {
this.classList.remove('mg-tag-filter-enabled');
filterState = false;
this.classList.add('mg-tag-filter-disabled');
} else if (filterState === false) {
this.classList.remove('mg-tag-filter-disabled');
filterState = undefined;
} else {
filterState = true;
this.classList.add('mg-tag-filter-enabled');
}
window.tagFilters[tag] = filterState;
updateArticlesVisibility();
}
function toggleLangTagFilter(langs) {
var lang = this.textContent;
if (lang === 'lang') {
lang = langs[0];
window.tagFilters['lang:'+lang] = true;
} else {
window.tagFilters['lang:'+lang] = undefined;
lang = langs[langs.indexOf(lang) + 1];
if (typeof lang === 'undefined') {
lang = 'lang'
} else {
window.tagFilters['lang:'+lang] = true;
}
}
this.textContent = lang;
updateArticlesVisibility();
}
function updateArticlesVisibility() {
var anyTrueFilter = Object.keys(window.tagFilters).some(function (tagFilter) {
return !!window.tagFilters[tagFilter];
@@ -38,9 +68,9 @@ function updateArticlesVisibility() {
}
if (shouldDisplay) {
article.classList.remove('uk-hidden');
article.classList.remove('mg-faded');
} else {
article.classList.add('uk-hidden');
article.classList.add('mg-faded');
}
});
}

View File

@@ -1,8 +1,8 @@
<article class="uk-article" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost"
<article class="uk-article mg-fadeable" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost"
data-tags='{{ article.tags|map(attribute='name')|list|tojson }}'>
<div class="mg-article-short">
{% if article.featured_image %}
<img class="mg-article-image" src="{{ article.featured_image }}" alt="">
<img class="mg-article-image image-process-thumb" src="{{ article.featured_image }}" alt="">
{% endif %}
<div class="mg-article-content">
<a href="{{ SITEURL }}/{{ article.url }}" class="uk-link-muted"><h1 class="uk-article-title" itemprop="name">{{ article.title|e }}</h1></a>

View File

@@ -1,16 +1,14 @@
{
"pages": [
{% set len = (articles + pages)| length %}
{% set comma = joiner(',') %}
{% for item in articles + pages %}
{{comma()}}
{
"title": "{{item.title|striptags|e}}",
"text":"{{item.content|striptags|e}}",
"tags": "{{item.category}}",
"tags": "{{item.tags}}",
"loc": "{{ SITEURL }}/{{item.url}}"
}{% if loop.index < len %},
{% else %}
{% endif %}
}
{% endfor %}
]
}