Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add search functionality for docs #21

Merged
merged 19 commits into from Mar 17, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+601 −29
Diff settings

Always

Just for now

@@ -20,6 +20,33 @@

<nav class="col-lg site-navigation">
<ul id="navigation" class="site-navigation__links">
<li class="site-search">
<form
class="site-search__form"
action="{{ url(pages['Search']) }}"
method="get"
>
<label for="global-search" class="site-search__label">
<img
src="{{ url('/assets/images/magnifying-glass.svg') }}"
alt="Search icon"
class="site-search__icon"
aria-hidden="true"
>
<span class="sr-only">Search Site</span>
</label>

<input
type="text"
name="query"
id="global-search"
class="site-search__input"
autocomplete="off"
placeholder="Search terms..."
>
</form>
</li>

{% for link in data.navigation.links %}
{%- set url = link.url[0] == '/' ? url(link.url) : link.url -%}
<li>
@@ -12,6 +12,23 @@
<div class="position-sticky position-top-1 scrollable-sidebar">
{% block aside %}{% endblock %}

{% if not this.disableSearch %}
<div class="c-search-widget border-t pt-2 my-3 hide-xs show-lg">
<form action="{{ url(pages['Search']) }}" method="get">
<label for="search-form" class="strong">
Search Docs
</label>
<input
type="text"
name="query"
id="search-form"
class="c-form__input w-100"
autocomplete="off"
>
</form>
</div>
{% endif %}

{% if this.navigation.prev %}
{% set target = pages[this.navigation.prev] %}

@@ -1,7 +1,7 @@
{% extends '_layouts/base.html.twig' %}

{% block content_root %}
<main class="container background-dark s-documentation">
<main class="container background-dark {% if not this.disableDocScope %}s-documentation{% endif %}">
<div class="py-3 px-md-3">
{% block content %}{% endblock %}
</div>
@@ -20,6 +20,7 @@ permalink: /credits/
- [Book by Deemak Daksina](https://thenounproject.com/icon/1230262/) from the Noun Project - CC-BY 3.0 US License
- [FAQ by ProSymbols](https://thenounproject.com/icon/790491/) from the Noun Project - CC-BY 3.0 US License
- [chat icon](https://thenounproject.com/icon/888687/) from the Starter Icons Collection from the Noun Project - Public Domain
- [Magnifying Glass](https://thenounproject.com/icon/888719/) from the Starter Icons Collection from the Noun Project - Public Domain
- [Apple by zidney](https://thenounproject.com/term/apple/1426926/) from the Noun Project - CC-BY 3.0 US License
- [Windows Logo](https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg) - Public Domain
- Operating system logos are copyright and/or trademark their respective owners.
@@ -29,6 +30,7 @@ permalink: /credits/
- [PhotoSwipe](http://photoswipe.com/) by Dmitry Semenov - MIT License (with one exception: "Do not create a public WordPress plugin based on it")
- [Plyr](https://github.com/selz/plyr) - MIT License
- [getOS function](https://stackoverflow.com/a/38241481) by [Vladyslav Turak](https://stackoverflow.com/users/4815056/vladyslav-turak) - CC BY-SA 3.0 Unported
- [FlexSearch](https://github.com/nextapps-de/flexsearch/) - Apache License 2.0

## CSS/SCSS

@@ -0,0 +1,53 @@
---
permalink: /search/
disableDocScope: true
title: Search
---

{% extends '_layouts/page.html.twig' %}

{% block content %}
<h1>Search</h1>

<noscript>
<div class="c-alert c-alert--error">
<p class="c-alert__title">
<strong>JavaScript Required</strong>
</p>
<p>Oops. This page requires you have JavaScript enabled.</p>
</div>
</noscript>

<div class="show-js">
<form action="{{ url(this) }}" method="get">
<label for="search-field" class="sr-only">
Enter the terms you wish to search for
</label>
<input
type="text"
name="query"
id="search-field"
class="c-form__input w-100"
autocomplete="off"
>
</form>
</div>

<div id="search-results"></div>

<template id="search-result">
<article class="c-search-result">
<p class="c-search-result__title">
<a href=""></a>
</p>
<p class="c-search-result__permalink"></p>
<p class="c-search-result__description"></p>
</article>
</template>
{% endblock %}

{% block scripts %}
<script src="{{ url(pages['Search Index']) }}"></script>
<script src="{{ url('/assets/js/flexsearch.min.js') }}"></script>
<script src="{{ url('/assets/js/search.js') }}"></script>
{% endblock %}
@@ -0,0 +1,19 @@
---
title: Search Index
permalink: /search/index.js
---

const SearchIndex = [
{% set uid = 0 %}
{% for collection in site.collections %}
{% for item in collections[collection.name] %}
{
id: {{ uid }},
title: '{{ item.title }}',
content: "{{ item.content | striptags | replace({'\n': ' '}) | escape('js') }}",
permalink: '{{ url(item) }}'
},
{%- set uid = uid + 1 -%}
{% endfor %}
{% endfor %}
];
@@ -115,3 +115,36 @@
@mixin text-muted($important: false) {
opacity: 0.7 if($important, !important, null);
}

///
/// Make text accessible to screen readers but invisible to sighted users.
///
/// @access public
///
@mixin sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

///
/// Make an element visible when its in focus.
///
/// @access public
///
@mixin sr-only-focusable() {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
}
@@ -0,0 +1,51 @@
.c-alert {
@include padding(x, 3);
@include padding(y, 2);

border: 2px solid rgba(#fff, 0.3);
border-radius: $border-radius;

p:last-child {
margin-bottom: 0;
}
}

.c-alert__title {
@include margin(b, 2);

&::before {
@include margin(r, 2);
}
}

.c-alert--error {
background-color: rgba(187, 0, 0, 0.7);

.c-alert__title::before {
content: '\2715';
}
}

.c-alert--warning {
background-color: rgba(187, 137, 0, 0.7);

.c-alert__title::before {
content: '\26A0';
}
}

.c-alert--success {
background-color: rgba(18, 98, 0, 0.7);

.c-alert__title::before {
content: '\2713';
}
}

.c-alert--info {
background-color: rgba(0, 134, 187, 0.7);

.c-alert__title::before {
content: '\2139'
}
}
@@ -0,0 +1,9 @@
.c-form__input {
@include padding(x, 2);
@include padding(y, 1);

background-color: $color-primary;
border: $border-default;
border-radius: $border-radius;
color: $color-text-primary;
}
@@ -0,0 +1,29 @@
.c-search-result {
@include margin(y, 3);

border-bottom: $border-default;

&:last-of-type {
border-bottom: none;
}

span {
font-weight: bold;
}
}

.c-search-result__title {
font-size: map-get($font-sizes, h4);
margin-bottom: 0;
}

.c-search-result__permalink {
@include text-muted();

font-size: map-get($font-sizes, small);
margin-bottom: 0;
}

.c-search-result__description {
@include margin(t, 3);
}
@@ -10,7 +10,8 @@ $_default-nav-breakpoint: 'lg';
}

&[aria-expanded='true'] ~ nav .site-navigation__links {
display: block;
display: -ms-flexbox;
display: flex;
}
}

@@ -19,33 +20,35 @@ $_default-nav-breakpoint: 'lg';
}

.site-navigation__links {
display: -ms-flexbox;
display: flex;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;

@include respond-down($_default-nav-breakpoint) {
margin-top: 15px;
-ms-flex-direction: column;
flex-direction: column;
text-align: left;
}

@include respond-up($_default-nav-breakpoint) {
display: block !important;
display: flex !important;
}

li {
@include respond-down($_default-nav-breakpoint) {
border-top: $border-default;
&:nth-child(n+2) {
border-top: $border-default;
}
}

@include respond-up($_default-nav-breakpoint) {
display: inline-block;
font-size: 1.1em;
margin-left: 15px;
}

&:first-child {
margin-left: 0;
}
}

a {
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.