Building a site

How to make a project with Visual Framework components.

beta This component version is ready to be used but is still in active development.

Search Client Side github location npm version

This uses Lunr.js to perform a client-side search of a site's content.


Usage

This approach is recommended only for sites with a limited number of pages (around 500 or fewer), otherwise the client side search index can become many megabytes in size.

If your site is in a subdirectory or has other requirements, you specify any required prefix to your search URL with data-vf-search-client-side-destination-prefix="https://myprefix".

Warning: Early alpha, lot's of "to do"s

This is an early alpha. More customisation options need to be added, such as:

Supplying a search index

This consumes a .js file with a searchIndex object of pages, a la:

let searchIndex = {
  "pages": [
    {"id":"0", "title": "Page title", "text": "Body text of page goes here", "tags": "", "url": "/index.html"},
    ...
  ]
};

To make this index, you can utilise the ability of vf-extension to generate a search index.

  1. Making an index

To generate that JS file, if you're using a vf-eleventy based site, you may also want to make use of the vf-extensions's gulp-build-search-index.js:

require('./node_modules/\@visual-framework/vf-extensions/utils/gulp-build-search-index.js')(gulp, path, buildDestionation);

  1. Dependencies

If you use that JS you'll also need some npm dependencies:

yarn add strip-js striptags node-html-parser

  1. Tell gulp to make the index

And you should build that search index after updating your html pages, a la:

  // build search index after search page is compiled
  gulp.watch(['./build/search/index.html'], gulp.parallel('vf-build-search-index'));

  // And for your `build` task
  gulp.task('build', gulp.series(
    ...
    'eleventy:build',
    'vf-build-search-index',
    ...
  ));

  // And for your `dev` task
  gulp.task('dev', gulp.series(
    ...
    'eleventy:build',
    'vf-build-search-index',
    ...
  ));

Using search

Loading...
HTML
<form action="/vf-core/components/vf-search-client-side/" method="GET" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
  <div class="vf-sidebar__inner">
    <div class="vf-form__item | vf-search__item">
      <label class="vf-form__label vf-u-sr-only | vf-search__label" for="search_query"></label>
      <input type="search" id="search" placeholder="Enter a search query" name="search_query" class="vf-search__input | vf-form__input" data-vf-search-client-side-input data-vf-search-client-side-destination-prefix="">
    </div><button type="submit" class="vf-search__button | vf-button vf-button--primary">
      <span class="vf-button__text">Search</span>

      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140">
        <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
          <path d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z" fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
        </g>
      </svg>
    </button>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.js"></script>
<script src="/search_index.js"></script>
<div class="vf-search-client-side vf-grid | vf-content">
  <div class="results-container" data-vf-search-client-side-results>
    Loading...
  </div>
</div>

<script type="text/javascript">
  window.onload = function() {
    vfSearchClientSide();
  };
</script>
              
Installation info

This repository is distributed with npm. After installing npm, you can install vf-search-client-side with this command.

$ yarn add --dev @visual-framework/vf-search-client-side

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-search-client-side/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-search-client-side

Find an issue on this page? Propose a change or discuss it.