Add Algolia search

This commit is contained in:
Matthew Holt 2020-03-26 12:57:10 -06:00
parent 1d696eb4de
commit 208c48130d
No known key found for this signature in database
GPG key ID: 2A349DD577D586A5
7 changed files with 45 additions and 180 deletions

View file

@ -1,8 +1,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/resources/images/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Crimson+Text:400,800|Maven+Pro:400,700,900|Montserrat:400,700|PT+Mono&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,700|Maven+Pro:400,700,900|Montserrat:400,700|PT+Mono&display=swap">
<link rel="stylesheet" href="/resources/css/common.css">
<script src="/resources/js/common.js"></script>
<!-- General metatags -->
<meta name="author" content="Caddy Web Server">
@ -21,3 +22,7 @@
<meta name="twitter:description" value="Caddy is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go">
<meta name="twitter:image" content="https://caddyserver.com/resources/images/caddy-open-graph.jpg">
<meta name="twitter:url" value="https://caddyserver.com/">
<!-- Algolia -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

View file

@ -1,5 +1,6 @@
<!--TODO: add class="current" to the current link-->
<nav>
<input type="search" id="search" placeholder="🔍 Search...">
<a href="https://github.com/caddyserver/caddy/releases">Download</a>
<a href="/docs/">Documentation</a>
<a href="https://github.com/caddyserver/caddy">GitHub</a>

View file

@ -3,9 +3,9 @@
<head>
<title>Caddy 2 - The Ultimate Server with Automatic HTTPS</title>
{{include "/includes/head.html"}}
<link rel="stylesheet" href="/resources/css/home.css">
<meta property="og:title" content="Caddy 2 - The Ultimate Server with Automatic HTTPS">
<meta name="twitter:title" value="Caddy 2 - The Ultimate Server with Automatic HTTPS">
<link rel="stylesheet" href="/resources/css/home.css">
</head>
<body>
<div class="hero">

View file

@ -5,7 +5,7 @@
}
body {
font-family: Maven Pro, sans-serif;
font-family: Inter, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
tab-size: 4;
@ -62,7 +62,8 @@ header nav {
line-height: 40px;
}
header nav a {
header nav > a {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
@ -70,19 +71,33 @@ header nav a {
color: inherit;
}
header nav a:hover {
header nav > a:hover {
color: #ff3f2c;
}
header nav a.current {
header nav > a.current {
font-weight: bold;
}
/* Algolia search */
#search {
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, .2);
font-size: 14px;
padding: 8px;
background: none;
width: 150px;
max-width: 100%;
margin-right: 20px;
}
/* End Algolia search */
header nav .button {
margin: 0 0 0 10px;
padding-top: 2px;
padding-bottom: 2px;
}
}
.button {
border-radius: 2em;
@ -198,176 +213,3 @@ footer > div {
text-align: center;
}
}
/* font resources */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("/resources/fonts/Inter-Thin-BETA.woff2") format("woff2"),
url("/resources/fonts/Inter-Thin-BETA.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("/resources/fonts/Inter-ThinItalic-BETA.woff2") format("woff2"),
url("/resources/fonts/Inter-ThinItalic-BETA.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/resources/fonts/Inter-ExtraLight-BETA.woff2") format("woff2"),
url("/resources/fonts/Inter-ExtraLight-BETA.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("/resources/fonts/Inter-ExtraLightItalic-BETA.woff2") format("woff2"),
url("/resources/fonts/Inter-ExtraLightItalic-BETA.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/resources/fonts/Inter-Light-BETA.woff2") format("woff2"),
url("/resources/fonts/Inter-Light-BETA.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/resources/fonts/Inter-LightItalic-BETA.woff2") format("woff2"),
url("/resources/fonts/Inter-LightItalic-BETA.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/resources/fonts/Inter-Regular.woff2") format("woff2"),
url("/resources/fonts/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/resources/fonts/Inter-Italic.woff2") format("woff2"),
url("/resources/fonts/Inter-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/resources/fonts/Inter-Medium.woff2") format("woff2"),
url("/resources/fonts/Inter-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/resources/fonts/Inter-MediumItalic.woff2") format("woff2"),
url("/resources/fonts/Inter-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/resources/fonts/Inter-SemiBold.woff2") format("woff2"),
url("/resources/fonts/Inter-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/resources/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
url("/resources/fonts/Inter-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/resources/fonts/Inter-Bold.woff2") format("woff2"),
url("/resources/fonts/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/resources/fonts/Inter-BoldItalic.woff2") format("woff2"),
url("/resources/fonts/Inter-BoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/resources/fonts/Inter-ExtraBold.woff2") format("woff2"),
url("/resources/fonts/Inter-ExtraBold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/resources/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
url("/resources/fonts/Inter-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/resources/fonts/Inter-Black.woff2") format("woff2"),
url("/resources/fonts/Inter-Black.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("/resources/fonts/Inter-BlackItalic.woff2") format("woff2"),
url("/resources/fonts/Inter-BlackItalic.woff") format("woff");
}

View file

@ -1,3 +1,7 @@
body {
font-family: Maven Pro, sans-serif;
}
header {
border-bottom: 1px solid #f0f6f7;
padding: 10px 20px;

View file

@ -2,6 +2,10 @@ body {
font-family: 'Inter', sans-serif;
}
#search {
margin-top: 4px;
}
.hero {
background-image: url('/resources/images/bg-teal.jpg');
background-repeat: no-repeat;

View file

@ -0,0 +1,9 @@
document.addEventListener('DOMContentLoaded', function() {
// Algolia search
docsearch({
apiKey: '14275a785f6ebd31d162f9d2d8fc0125',
indexName: 'caddyserver',
inputSelector: '#search',
debug: true // Set debug to true if you want to inspect the dropdown
});
});