Improved search, fonts loaded locally and al tags displayed in posts

This commit is contained in:
Eduardo Gomez 2020-07-26 19:12:23 +02:00
parent 3108ad1334
commit 6b0bd0b44e
31 changed files with 95 additions and 52 deletions

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
.m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem;font-weight:600}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}
.m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}

View file

@ -1 +1 @@
.l-fullscreen{display:flex;align-items:center;justify-content:center;height:100vh}.l-fullscreen__content{text-align:center;padding:0 20px}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}}@media only screen and (min-width:48rem){.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-back{display:flex;align-items:center;position:absolute;top:20px;left:20px;color:var(--titles-color);letter-spacing:.2px;font-size:.875rem;font-weight:600;cursor:pointer;z-index:2}@media only screen and (min-width:48rem){.m-back{top:40px;letter-spacing:.3px;font-size:1rem}}.m-back span{color:inherit;display:inline-block}.rtl .m-back span:first-of-type{order:2}.m-back__icon{font-size:.75rem;margin-right:10px}@media only screen and (min-width:48rem){.m-back__icon{font-size:.875rem}}.rtl .m-back__icon{order:1}.m-subscribe-section{padding:50px 0;background-color:var(--secondary-subtle-color)}@media only screen and (min-width:48rem){.m-subscribe-section{padding:80px 0}}@media only screen and (min-width:48rem){.m-subscribe-section__content{display:flex;align-items:center;justify-content:space-between}}.m-subscribe-section__text{text-align:center;margin-bottom:30px}@media only screen and (min-width:48rem){.m-subscribe-section__text{flex:1;text-align:left;padding-right:75px;margin-bottom:0}}@media only screen and (min-width:48rem){.rtl .m-subscribe-section__text{text-align:right;padding-right:0;padding-left:75px}}.m-subscribe-section__title{color:var(--titles-color);letter-spacing:.3px;line-height:1.3;font-size:1.25rem;font-weight:600;margin:0 0 20px}@media only screen and (min-width:48rem){.m-subscribe-section__title{letter-spacing:.3px;font-size:1.5rem;margin-bottom:15px}}.m-subscribe-section__description{letter-spacing:.2px;line-height:1.4}@media only screen and (min-width:48rem){.m-subscribe-section__description{font-size:1.125rem}}@media only screen and (min-width:48rem){.m-subscribe-section__form{width:300px;margin:0 auto}}.m-subscribe-section__container.loading .m-button{pointer-events:none}.m-subscribe-section__container.success .m-subscribe__success{display:block}.m-subscribe-section__container.success .m-subscribe__error,.m-subscribe-section__container.success .m-subscribe__form,.m-subscribe-section__container.success .m-subscribe__invalid{display:none}.m-subscribe-section__container.error .m-subscribe__error,.m-subscribe-section__container.invalid .m-subscribe__invalid{display:block}.m-subscribe-section__container.error .m-subscribe__form{margin-bottom:20px}.m-subscribe-section__container .m-subscribe__error,.m-subscribe-section__container .m-subscribe__invalid,.m-subscribe-section__container .m-subscribe__success{display:none}.m-subscribe__success_icon{display:block;width:64px;height:64px;margin:0 auto 25px}.m-subscribe__error{text-align:center}
.l-fullscreen{display:flex;align-items:center;justify-content:center;height:100vh}.l-fullscreen__content{text-align:center;padding:0 20px}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}}@media only screen and (min-width:48rem){.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-back{display:flex;align-items:center;position:absolute;top:20px;left:20px;color:var(--titles-color);letter-spacing:.2px;font-size:.875rem;cursor:pointer;z-index:2}@media only screen and (min-width:48rem){.m-back{top:40px;letter-spacing:.3px;font-size:1rem}}.m-back span{color:inherit;display:inline-block}.rtl .m-back span:first-of-type{order:2}.m-back__icon{font-size:.75rem;margin-right:10px}@media only screen and (min-width:48rem){.m-back__icon{font-size:.875rem}}.rtl .m-back__icon{order:1}.m-subscribe-section{padding:50px 0;background-color:var(--secondary-subtle-color)}@media only screen and (min-width:48rem){.m-subscribe-section{padding:80px 0}}@media only screen and (min-width:48rem){.m-subscribe-section__content{display:flex;align-items:center;justify-content:space-between}}.m-subscribe-section__text{text-align:center;margin-bottom:30px}@media only screen and (min-width:48rem){.m-subscribe-section__text{flex:1;text-align:left;padding-right:75px;margin-bottom:0}}@media only screen and (min-width:48rem){.rtl .m-subscribe-section__text{text-align:right;padding-right:0;padding-left:75px}}.m-subscribe-section__title{color:var(--titles-color);letter-spacing:.3px;line-height:1.3;font-size:1.25rem;font-weight:600;margin:0 0 20px}@media only screen and (min-width:48rem){.m-subscribe-section__title{letter-spacing:.3px;font-size:1.5rem;margin-bottom:15px}}.m-subscribe-section__description{letter-spacing:.2px;line-height:1.4}@media only screen and (min-width:48rem){.m-subscribe-section__description{font-size:1.125rem}}@media only screen and (min-width:48rem){.m-subscribe-section__form{width:300px;margin:0 auto}}.m-subscribe-section__container.loading .m-button{pointer-events:none}.m-subscribe-section__container.success .m-subscribe__success{display:block}.m-subscribe-section__container.success .m-subscribe__error,.m-subscribe-section__container.success .m-subscribe__form,.m-subscribe-section__container.success .m-subscribe__invalid{display:none}.m-subscribe-section__container.error .m-subscribe__error,.m-subscribe-section__container.invalid .m-subscribe__invalid{display:block}.m-subscribe-section__container.error .m-subscribe__form{margin-bottom:20px}.m-subscribe-section__container .m-subscribe__error,.m-subscribe-section__container .m-subscribe__invalid,.m-subscribe-section__container .m-subscribe__success{display:none}.m-subscribe__success_icon{display:block;width:64px;height:64px;margin:0 auto 25px}.m-subscribe__error{text-align:center}

View file

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

View file

@ -45,10 +45,4 @@
<td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
<td><a href="/assets/js/post.js">post.js</a></td>
</tr>
<tr>
<td><a href="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">webfont.js</a></td>
<td><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache-2.0</a></td>
<td><a href="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">webfont.js</a></td>
</tr>
</table>

File diff suppressed because one or more lines are too long

View file

@ -12,8 +12,8 @@
{{!-- Preload assets --}}
<link rel="preload" href="{{asset "css/app.css"}}" as="style" />
<link rel="preload" href="{{asset "js/vendor/content-api.min.js"}}" as="script" />
<link rel="preload" href="{{asset "js/manifest.js"}}" as="script" />
<link rel="preload" href="{{asset "js/vendor/content-api.min.js"}}" as="script" />
<link rel="preload" href="{{asset "js/vendor.js"}}" as="script" />
<link rel="preload" href="{{asset "js/app.js"}}" as="script" />
<link rel="preconnect" href="https://polyfill.io">
@ -24,17 +24,52 @@
{{!-- Styles & Scripts --}}
<style>
/* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */
/* These font-faces are here to make fonts work if the Ghost instance is installed in a subdirectory */
/* source-sans-pro-regular - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
url("{{asset 'fonts/source-sans-pro/source-sans-pro-v13-latin-regular.woff2'}}") format('woff2'),
url("{{asset 'fonts/source-sans-pro/source-sans-pro-v13-latin-regular.woff'}}") format('woff');
}
/* source-sans-pro-600 - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
url("{{asset 'fonts/source-sans-pro/source-sans-pro-v13-latin-600.woff2'}}") format('woff2'),
url("{{asset 'fonts/source-sans-pro/source-sans-pro-v13-latin-600.woff'}}") format('woff');
}
/* source-sans-pro-700 - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url("{{asset 'fonts/source-sans-pro/source-sans-pro-v13-latin-700.woff2'}}") format('woff2'),
url("{{asset 'fonts/source-sans-pro/source-sans-pro-v13-latin-700.woff'}}") format('woff');
}
/* iconmoon */
@font-face {
font-family: 'icomoon';
src: url("{{asset 'fonts/icomoon.eot?vukg2s'}}");
src: url("{{asset 'fonts/icomoon.eot?vukg2s#iefix'}}") format('embedded-opentype'),
url("{{asset 'fonts/icomoon.ttf?vukg2s'}}") format('truetype'),
url("{{asset 'fonts/icomoon.woff?vukg2s'}}") format('woff'),
url("{{asset 'fonts/icomoon.svg?vukg2s#icomoon'}}") format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
src: url("{{asset 'fonts/icomoon/icomoon.eot?vukg2s'}}");
src: url("{{asset 'fonts/icomoon/icomoon.eot?vukg2s#iefix'}}") format('embedded-opentype'),
url("{{asset 'fonts/icomoon/icomoon.ttf?vukg2s'}}") format('truetype'),
url("{{asset 'fonts/icomoon/icomoon.woff?vukg2s'}}") format('woff'),
url("{{asset 'fonts/icomoon/icomoon.svg?vukg2s#icomoon'}}") format('svg');
}
</style>
@ -56,22 +91,6 @@
const ghostHost = "{{@site.url}}"
// @license-end
</script>
{{!-- This script loads the Google font asynchronously --}}
<script>
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
WebFontConfig = {
google: { families: ['Source+Sans+Pro:400,600,700&display=swap'] }
};
(function (d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
// @license-end
</script>
</head>
<body class="{{body_class}}">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
@ -88,8 +107,8 @@
{{!-- Common scripts shared between pages --}}
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script>
<script defer src="{{asset "js/vendor/content-api.min.js"}}"></script>
<script defer src="{{asset "js/manifest.js"}}"></script>
<script defer src="{{asset "js/vendor/content-api.min.js"}}"></script>
<script defer src="{{asset "js/vendor.js"}}"></script>
<script defer src="{{asset "js/app.js"}}"></script>

View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg"
},
"version": "0.7.7"
"version": "0.8.0"
}

View file

@ -67,6 +67,19 @@ into the {body} of the default.hbs template --}}
</div>
</div>
{{content}}
{{!-- List of tags --}}
{{#if tags}}
<section class="m-tags in-post">
<h3 class="m-submenu-title">{{t "Tags"}}</h3>
<ul>
{{#foreach tags}}
<li>
<a href="{{url}}" title="{{name}}">{{name}}</a>
</li>
{{/foreach}}
</ul>
</section>
{{/if}}
</div>
</div>
</div>

View file

@ -80,20 +80,19 @@ $(document).ready(() => {
const allPosts = []
const fuseOptions = {
shouldSort: true,
threshold: 0.6,
location: 0,
distance: 100,
ignoreLocation: true,
findAllMatches: true,
minMatchCharLength: 1,
keys: ['title', 'custom_excerpt', 'html']
includeScore: true,
minMatchCharLength: 2,
keys: ['title', 'custom_excerpt']
}
api.posts.browse({
limit: 'all',
fields: 'id, title, url, published_at, custom_excerpt, html'
fields: 'id, title, url, published_at, custom_excerpt'
})
.then((posts) => {
for (var i = 0, len = posts.length; i < len; i++) {
for (let i = 0, len = posts.length; i < len; i++) {
allPosts.push(posts[i])
}
@ -189,7 +188,11 @@ $(document).ready(() => {
let htmlString = ''
if (results.length > 0) {
for (var i = 0, len = results.length; i < len; i++) {
for (let i = 0, len = results.length; i < len; i++) {
if (results[i].score > 0.5) {
continue
}
htmlString += `
<article class="m-result">\
<a href="${results[i].item.url}" class="m-result__link">\
@ -237,6 +240,12 @@ $(document).ready(() => {
}
})
$(document).keyup((e) => {
if (e.key === 'Escape' && $search.hasClass('opened')) {
$closeSearch.click()
}
})
if (currentSavedTheme) {
$('html').attr('data-theme', currentSavedTheme)

View file

@ -3,8 +3,8 @@
@import "common/variables";
@import "common/themes";
@import "common/helpers";
@import "common/global";
@import "common/icons";
@import "common/global";
@import "layouts/wrapper";
@import "layouts/content";

View file

@ -250,12 +250,8 @@
letter-spacing: 0.4px;
line-height: 1.3;
font-size: 1.250rem;
font-weight: 400;
font-weight: 600;
margin: 0;
@include respond-to('medium') {
font-weight: 600;
}
}
.m-article-card__excerpt {

View file

@ -189,7 +189,6 @@
color: $white;
letter-spacing: 0.2px;
font-size: 0.875rem;
font-weight: 600;
span:nth-child(2) {
padding: 0 10px;

View file

@ -1,4 +1,17 @@
.m-tags {
&.in-post {
padding-top: 25px;
ul {
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
}
}
ul {
display: flex;
flex-wrap: wrap;

View file

@ -7,7 +7,6 @@
color: var(--titles-color);
letter-spacing: 0.2px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
z-index: 2;

View file

@ -34,7 +34,8 @@ mix.js('js/helpers.js', 'js/')
.options({
processCssUrls: false
})
.copy('sass/fonts/icomoon/*.*', '../assets/fonts/')
.copy('sass/fonts/icomoon/*.*', '../assets/fonts/icomoon/')
.copy('sass/fonts/source-sans-pro/*.*', '../assets/fonts/source-sans-pro/')
.copy('js/vendor/content-api.min.js', '../assets/js/vendor/')
.browserSync({
proxy: "localhost:2368",