Skip to content

Commit

Permalink
Updates to initial site (#144)
Browse files Browse the repository at this point in the history
* Add firebase caching rules

* add native lazy-loading for images

* Add preloads and async CSS optimizations

* Fix SVG logo - typography needed flattening

* Fix Firefox rendering issue for main logo
  • Loading branch information
addyosmani authored Dec 1, 2019
1 parent 468b4ec commit 3f796f6
Show file tree
Hide file tree
Showing 10 changed files with 149 additions and 54 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 57 additions & 1 deletion site/firebase.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,62 @@
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{
"source": "/service-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
},
{
"source": "**/*.@(js)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
},
{
"source": "**/*.@(css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
},
{
"source": "**/*.@(eot|otf|ttf|ttc|woff)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "**/*.@(jpg|jpeg|gif|png|svg)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=300"
}
]
}
]
}
}
}
2 changes: 1 addition & 1 deletion site/src/_includes/components/trusted-by.njk
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% for trustedByLogo in site.trustedByLogos %}
<a class="flex-grid__item text-center" href="{{ trustedByLogo.websiteUrl }}" target="_blank" rel="noopener noreferrer">
{# TODO: responsive sizing like "used-with" logos #}
<img src="/assets/images/quicklink-used-logos/{{ trustedByLogo.logoFileName }}" style="max-width: 92px" alt="{{ trustedByLogo.companyName }}">
<img loading="lazy" src="/assets/images/quicklink-used-logos/{{ trustedByLogo.logoFileName }}" style="max-width: 92px" alt="{{ trustedByLogo.companyName }}">
<span class="text-center"><strong>{{ trustedByLogo.companyName }}</strong></span>
</a>
{% endfor %}
Expand Down
8 changes: 4 additions & 4 deletions site/src/_includes/layouts/base.njk
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@
quicklink.listen();
});
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script defer src="https://buttons.github.io/buttons.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-153597376-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon' });
gtag('config', 'UA-153597376-1');
</script>

Expand Down
41 changes: 37 additions & 4 deletions site/src/_includes/layouts/head.njk
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:description" content="{{ description }}">
<meta name="og:description" content="{{ description }}">
<meta name="twitter:image" content="/~https://camo.githubusercontent.com/d9e978c30d6e62fa13b4aea5af2560eebb67e20f/68747470733a2f2f692e696d6775722e636f6d2f4e56525a4c48762e706e67">
<meta name="og:image" content="/~https://camo.githubusercontent.com/d9e978c30d6e62fa13b4aea5af2560eebb67e20f/68747470733a2f2f692e696d6775722e636f6d2f4e56525a4c48762e706e67">
<meta name="twitter:image"
content="/~https://camo.githubusercontent.com/d9e978c30d6e62fa13b4aea5af2560eebb67e20f/68747470733a2f2f692e696d6775722e636f6d2f4e56525a4c48762e706e67">
<meta name="og:image"
content="/~https://camo.githubusercontent.com/d9e978c30d6e62fa13b4aea5af2560eebb67e20f/68747470733a2f2f692e696d6775722e636f6d2f4e56525a4c48762e706e67">
<meta name="og:url" content="https://getquick.link">
<meta name="og:type" content="website">
<meta charset="UTF-8">
Expand All @@ -21,11 +23,42 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="preload" href="{{ '/styles/main.css' | url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ '/styles/footer.css' | url }}" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ '/styles/github-markdown.min.css' | url }}" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ '/styles/solarized-dark.min.css' | url }}" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="{{ '/styles/main.css' | url }}">
<link rel="stylesheet" href="{{ '/styles/footer.css' | url }}">
<link rel="stylesheet" href="{{ '/styles/copy-snippet.css' | url }}">
<link rel="stylesheet" href="{{ '/styles/github-markdown.css' | url }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
{# TODO: opt for theme and tweak the background color by avoiding github markdown #}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/solarized-dark.min.css">
<noscript>
<link rel="stylesheet" href="{{ '/styles/github-markdown.min.css' | url }}"></noscript>
<noscript>
<link rel="stylesheet" href="{{ '/styles/solarized-dark.min.css' | url }}"></noscript>
<script>
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
(function (w) {
"use strict"; if (!w.loadCSS) { w.loadCSS = function () { } }
var rp = loadCSS.relpreload = {}; rp.support = (function () {
var ret; try { ret = w.document.createElement("link").relList.supports("preload") } catch (e) { ret = !1 }
return function () { return ret }
})(); rp.bindMediaToggle = function (link) {
var finalMedia = link.media || "all"; function enableStylesheet() {
if (link.addEventListener) { link.removeEventListener("load", enableStylesheet) } else if (link.attachEvent) { link.detachEvent("onload", enableStylesheet) }
link.setAttribute("onload", null); link.media = finalMedia
}
if (link.addEventListener) { link.addEventListener("load", enableStylesheet) } else if (link.attachEvent) { link.attachEvent("onload", enableStylesheet) }
setTimeout(function () { link.rel = "stylesheet"; link.media = "only x" }); setTimeout(enableStylesheet, 3000)
}; rp.poly = function () {
if (rp.support()) { return }
var links = w.document.getElementsByTagName("link"); for (var i = 0; i < links.length; i++) { var link = links[i]; if (link.rel === "preload" && link.getAttribute("as") === "style" && !link.getAttribute("data-loadcss")) { link.setAttribute("data-loadcss", !0); rp.bindMediaToggle(link) } }
}; if (!rp.support()) { rp.poly(); var run = w.setInterval(rp.poly, 500); if (w.addEventListener) { w.addEventListener("load", function () { rp.poly(); w.clearInterval(run) }) } else if (w.attachEvent) { w.attachEvent("onload", function () { rp.poly(); w.clearInterval(run) }) } }
if (typeof exports !== "undefined") { exports.loadCSS = loadCSS }
else { w.loadCSS = loadCSS }
}(typeof global !== "undefined" ? global : this))
</script>
</head>
2 changes: 1 addition & 1 deletion site/src/assets/images/logos/quicklink.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 44 additions & 42 deletions site/src/script.js
Original file line number Diff line number Diff line change
@@ -1,53 +1,55 @@
function initGoToTopBtn() {
const goTopBtn = document.querySelector('.back-to-top');

function trackScroll() {
const scrolled = window.pageYOffset;
const threshold = 400;

if (scrolled > threshold) {
goTopBtn.classList.remove('hidden');
}
if (scrolled < threshold) {
goTopBtn.classList.add('hidden');
window.addEventListener('load', () => {
function initGoToTopBtn() {
const goTopBtn = document.querySelector('.back-to-top');

function trackScroll() {
const scrolled = window.pageYOffset;
const threshold = 400;

if (scrolled > threshold) {
goTopBtn.classList.remove('hidden');
}
if (scrolled < threshold) {
goTopBtn.classList.add('hidden');
}
}
}

function scrollToTop() {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
function scrollToTop() {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
}
}

function backToTop() {
if (window.pageYOffset > 0) {
scrollToTop();
function backToTop() {
if (window.pageYOffset > 0) {
scrollToTop();
}
}
}

window.addEventListener('scroll', trackScroll, { passive: true });
goTopBtn.addEventListener('click', backToTop);
};
window.addEventListener('scroll', trackScroll, { passive: true });
goTopBtn.addEventListener('click', backToTop);
};

initGoToTopBtn();
initGoToTopBtn();

const clipboard = new ClipboardJS('#copy-snippet-button');
clipboard.on('success', function (e) {
console.info('[clipboard success] Action:', e.action);
console.info('[clipboard success] Text:', e.text);
console.info('[clipboard success] Trigger:', e.trigger);
const clipboard = new ClipboardJS('#copy-snippet-button');
clipboard.on('success', function (e) {
console.info('[clipboard success] Action:', e.action);
console.info('[clipboard success] Text:', e.text);
console.info('[clipboard success] Trigger:', e.trigger);

e.clearSelection();
e.trigger.blur();
const notifyCopiedSnippet = document.querySelector(".notify-copied-snippet");
notifyCopiedSnippet.classList.add("notify-copied-snippet--displayed");
});
e.clearSelection();
e.trigger.blur();
const notifyCopiedSnippet = document.querySelector(".notify-copied-snippet");
notifyCopiedSnippet.classList.add("notify-copied-snippet--displayed");
});

clipboard.on('error', function (e) {
console.error('[clipboard error] Action:', e.action);
console.error('[clipboard error] Trigger:', e.trigger);
});
clipboard.on('error', function (e) {
console.error('[clipboard error] Action:', e.action);
console.error('[clipboard error] Trigger:', e.trigger);
});

hljs.initHighlightingOnLoad();
hljs.initHighlightingOnLoad();
});
Loading

0 comments on commit 3f796f6

Please sign in to comment.