Docsearch added

This commit is contained in:
Lucas Bonomi 2017-11-06 16:37:08 +01:00
parent a77d879db6
commit 661aee1e5f
6 changed files with 13818 additions and 16 deletions

13771
docs/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,15 @@
.algolia-autocomplete {
width: 100%;
.ds-dataset-1 {
.algolia-docsearch-suggestion--text {
.algolia-docsearch-suggestion--highlight {
box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8)
}
}
.algolia-docsearch-suggestion--highlight {
color: #44a8b3;
background: rgba(68, 168, 179, .1)
}
}
}

View file

@ -18,6 +18,8 @@ ul {
@apply .list-reset;
}
@import "sidebar";
@import "docsearch";
@import "prism";
@import "markdown";

View file

@ -0,0 +1,3 @@
#sidebar {
top: 11.8em
}

View file

@ -5,25 +5,25 @@
@section('body')
<div class="min-h-screen">
<div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll scrolling-touch bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
<div class="border-b border-smoke flex-none px-8 py-6">
<div class="mb-4">
<div class="hidden md:flex md:justify-center">
<a href="/" class="flex justify-center">
<svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
</a>
</div>
<p class="text-center">
<a href="https://github.com/tailwindcss/tailwindcss" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
</p>
<div class="border-b border-smoke flex-none px-8 py-6 w-14/5 md:w-full md:max-w-xs fixed border-smoke bg-smoke-light border-r-2 z-50">
<div class="mb-4">
<div class="hidden md:flex md:justify-center">
<a href="/" class="flex justify-center">
<svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
</a>
</div>
<div class="relative opacity-75">
<input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full cursor-not-allowed" type="text" placeholder="Search coming soon!" disabled>
<div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
<svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
</div>
<p class="text-center">
<a href="https://github.com/tailwindcss/tailwindcss" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
</p>
</div>
<div class="relative">
<input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full opacity-75" type="text" placeholder="Search the docs" id="searchbox">
<div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center opacity-75">
<svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
</div>
</div>
</div>
<div id="sidebar" class="hidden z-40 fixed pin-y pin-l overflow-y-scroll scrolling-touch bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
<div class="p-8 flex-1 overflow-y-scroll">
<nav id="nav" class="text-base overflow-y-scroll">
<div class="mb-8">

View file

@ -18,12 +18,23 @@
@import url("https://use.typekit.net/iqy1okj.css");
</style>
<link rel="stylesheet" href="{{ mix('/css/main.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="{{ mix('/js/nav.js') }}"></script>
</head>
<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
@yield('body')
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
// appId: 'FMDGKF8GP7',
apiKey: '3df93446658cd9c4e314d4c02a052188',
indexName: 'tailwindcss',
inputSelector: '#searchbox',
debug: true // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}