Skip to content

Commit

Permalink
Add Algolia DocSearch (#253)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DeMoorJasper @devongovett
DeMoorJasper authored and devongovett committed Oct 7, 2018
1 parent 50012b7 commit 41f3563
Show file tree
Hide file tree
Showing 12 changed files with 211 additions and 31 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Expand Up @@ -5,3 +5,4 @@ yarn.lock
.DS_Store
yarn-error.log
package-lock.json
tmp
28 changes: 28 additions & 0 deletions src/assets/style.css
View file
Expand Up @@ -86,6 +86,34 @@ header .links a:hover {
padding:1em;
}

.search-input {
display: inline-block;
padding: 2px 8px;
width: 90px;
border: none;
border-radius: 50px;
font-family: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: inherit;
margin: 0 20px;
transition: all 250ms;
background: rgba(255, 255, 255, 0);
color: #E7DACB;
}

.search-input::placeholder {
color: #E7DACB;
}

.search-input:hover {
background: rgba(255, 255, 255, 0.1);
}

.search-input:focus {
width: 200px;
background: rgba(255, 255, 255, 0.2);
outline: none;
}

nav {
width: 250px;
font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
Expand Down
20 changes: 18 additions & 2 deletions src/i18n/en/layout/page.html
View file
Expand Up @@ -10,12 +10,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'en';

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
<header>
Expand All @@ -24,6 +27,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="Search..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org" selected>English</option>
Expand Down Expand Up @@ -68,12 +72,24 @@ <h3>Advanced</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down
20 changes: 18 additions & 2 deletions src/i18n/es/layout/page.html
View file
Expand Up @@ -10,12 +10,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'es';

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
<header>
Expand All @@ -24,6 +27,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="Buscar..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org">English</option>
Expand Down Expand Up @@ -64,12 +68,24 @@ <h3>Advanced</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down
20 changes: 18 additions & 2 deletions src/i18n/fr/layout/page.html
View file
Expand Up @@ -10,12 +10,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'fr';

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
<header>
Expand All @@ -24,6 +27,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="Chercher..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org">English</option>
Expand Down Expand Up @@ -68,12 +72,24 @@ <h3>Avancée</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down
20 changes: 18 additions & 2 deletions src/i18n/it/layout/page.html
View file
Expand Up @@ -10,12 +10,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'it';

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
<header>
Expand All @@ -24,6 +27,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="Ricerca..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org">English</option>
Expand Down Expand Up @@ -66,12 +70,24 @@ <h3>Avanzate</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down
22 changes: 19 additions & 3 deletions src/i18n/ko/layout/page.html
View file
Expand Up @@ -11,12 +11,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'ko';

window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>

<body>
Expand All @@ -26,6 +29,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="수색..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org">English</option>
Expand Down Expand Up @@ -94,12 +98,24 @@ <h3>Advanced</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down
20 changes: 18 additions & 2 deletions src/i18n/pl/layout/page.html
View file
Expand Up @@ -10,12 +10,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'pl';

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
<header>
Expand All @@ -24,6 +27,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="Szukaj..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org">English</option>
Expand Down Expand Up @@ -64,12 +68,24 @@ <h3>Advanced</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down
20 changes: 18 additions & 2 deletions src/i18n/pt/layout/page.html
View file
Expand Up @@ -10,12 +10,15 @@
<link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
<script>
<script type="text/javascript">
var LANGUAGE = 'pt';

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110647385-1');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
<header>
Expand All @@ -24,6 +27,7 @@
<img class="type" src="assets/logo.svg" alt="Parcel">
</a>
<div class="links">
<input type="text" id="search-input" class="search-input" placeholder="Pesquisa..." />
<form class="languages">
<select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
<option class="en" value="https://en.parceljs.org">English</option>
Expand Down Expand Up @@ -67,12 +71,24 @@ <h3>Avançado</h3>
{{~> content}}
</main>
</div>
<script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
(function () {
var pathname = window.location.pathname.substr(1);
var activeLink = document.querySelector('a[href="' + pathname + '"]');

activeLink.classList.add('selected');

docsearch({
apiKey: '8b6be780425a72d1a1683abea2636778',
indexName: 'parceljs',
inputSelector: '#search-input',
algoliaOptions: {
'facetFilters': [
`lang:${LANGUAGE}`
]
}
});
})();
</script>
</body>
Expand Down

1 comment on commit 41f3563

@vercel
Copy link

@vercel vercel bot commented on 41f3563 Oct 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully aliased the URL https://website-nbpmiloarq.now.sh to the following aliases.

Please sign in to comment.