Skip to content

GitLab

4
404
Commit 01dfc14d authored by Jonathan Hickford's avatar Jonathan Hickford
Browse files
Options

Demo 404 page

parent a963aa52
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 88 deletions
eleventy.js
View file @ 01dfc14d
const { DateTime } = require('luxon');
const _ = require('lodash');
const Path = require('path');
const { DateTime } = require("luxon");
const _ = require("lodash");
const Path = require("path");
module.exports = function(config) {
// Add in tags, filters useful for Visual Framework installs
// (fractal's render tag, codeblock, markdown, etc)
// and common configuration
......@@ -77,14 +76,15 @@ module.exports = function(config) {
output: "build",
data: "_data"
},
templateFormats : [
"njk", "md", // note that .md files will also be parsed with njk processor
"css", "js" // passthrough file copying for static assets
templateFormats: [
"njk",
"md", // note that .md files will also be parsed with njk processor
"css",
"js" // passthrough file copying for static assets
],
htmlTemplateEngine : ["njk", "md"],
markdownTemplateEngine : "njk",
passthroughFileCopy: true,
pathPrefix: "/ebi-eleventy-boilerplate/" // if your site is deployed to a sub-url, otherwise comment out
htmlTemplateEngine: ["njk", "md"],
markdownTemplateEngine: "njk",
passthroughFileCopy: true
// pathPrefix: "/ebi-eleventy-boilerplate/" // if your site is deployed to a sub-url, otherwise comment out
};
};
package.json
View file @ 01dfc14d
......@@ -10,7 +10,7 @@
"author": "Ken Hawkins <ken.hawkins@embl.de> (https://www.embl.de/aboutus/communication_outreach/)",
"main": "gulpfile.js",
"vfConfig": {
"vfName": "VF Boilerplate for Eleventy",
"vfName": "404",
"vfNamespace": "vfeleventy-",
"vfComponentPath": "./src/components",
"vfBuildDestination": "./build",
......
src/site/_data/siteConfig.js
View file @ 01dfc14d
// Some various reusable configuration
module.exports = {
siteInformation: {
title: "Eleventy for the VF 1.3 + 2.0",
short_description: 'This allows using the <a class="vf-link" href="https://www.11ty.io">11ty</a> static site generator with direct access to <a class="vf-link" href="https://github.com/visual-framework/vf-core">Visual Framework 2.0</a> and 1.3 code.',
url: "https://ebiwd.github.io/ebi-eleventy-boilerplate/",
title: "404 Page not found",
short_description:
"We're sorry — we can't find the page or file you asked for.",
url: "https://www.ebi.ac.uk/404",
author: "Visual Framework system",
email: "ken.hawkins@embl.de",
email: "ken.hawkins@embl.de"
}
};
src/site/_includes/footer.njk
View file @ 01dfc14d
<!--
<div class="vf-body">
<div class="vf-grid">
<div class="vf-body--text">
......@@ -17,6 +18,7 @@
</div>
</div>
</div>
-->
<footer>
<div id="global-footer" class="global-footer">
......
src/site/_includes/layouts/base.njk
View file @ 01dfc14d
......@@ -71,14 +71,15 @@
<div id="content">
<div data-sticky-container>
<!--
<header id="masthead" class="masthead" data-sticky data-sticky-on="large" data-top-anchor="content:top" data-btm-anchor="content:bottom">
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">EBI Framework</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
<nav >
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="../../">Overview</a></li>
......@@ -86,13 +87,15 @@
<li><a href="#">Support <i class="icon icon-generic" data-icon="x"></i></a></li>
</ul>
</nav>
<!-- /local-nav -->
</div>
</header>
</header
-->
</div>
<!-- Suggested layout containers -->
<section id="main-content-area" class="row" role="main">
<!-- Your menu structure should make a breadcrumb redundant, but if a breadcrump is needed uncomment the below -->
<!--
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs columns">
<li><a href="../../">EBI Framework</a></li>
......@@ -102,6 +105,7 @@
</li>
</ul>
</nav>
-->
<div class="columns">
<div class="vf-grid">
......
src/site/index.njk
View file @ 01dfc14d
......@@ -8,7 +8,7 @@ templateEngineOverride: njk, md
{% render '@vf-intro', {"vf_intro_phase": "alpha", "vf_intro_heading": siteConfig.siteInformation.title,
"vf_intro_lede": siteConfig.siteInformation.short_description,
"vf_intro_text": [
"☝️ that also means dynamic building of just the CSS and JS you need."
"It may have been removed, had its name changed, or be temporarily unavailable.<br/></br/>If this problem persists, please <a href='https://www.ebi.ac.uk/support/error'>contact our support team</a>, and let them know about this error."
]
} %}
......@@ -17,72 +17,79 @@ templateEngineOverride: njk, md
<!-- empty -->
</div>
<div class="vf-content">
{% markdown %}
## Quickstart
```
npm init @visual-framework/vf-eleventy your-new-site-name ebi-eleventy-boilerplate
```
This will install a new [`ebi-eleventy-boilerplate`](https://github.com/visual-framework/ebi-eleventy-boilerplate/) to a folder named `your-new-site-name`.
Then follow the onscreen prompts and links below to develop and configure.
## Longer install?
The above too easy or have questions? [Read this guide](https://github.com/visual-framework/vf-eleventy#1-creating-a-new-project-powered-by-vf-eleventy).
{% endmarkdown %}
<div class="row">
<div class="columns small-12 large-12 medium-12">
<span class="label show-for-small-only white-color">EBI Search</span>
<p class="show-for-medium">Try searching EMBL-EBI for what you were looking for.</p>
<form id="ebi_search" action="/ebisearch/search.ebi" data-abide="" novalidate="" data-e="guqhmd-e">
<fieldset>
<div class="margin-bottom-none small-collapse">
<div class="columns small-2 margin-bottom-small search-options-wrapper">
<select name="db" id="db" tabindex="1" class="margin-bottom-none" style="opacity: .8;">
<option value="allebi">All</option>
<optgroup label="Science search">
<option value="genomes">Genomes &amp; metagenomes</option>
<option value="nucleotideSequences">Nucleotide sequences</option>
<option value="proteinSequences">Protein sequences</option>
<option value="smallMolecules">Small molecules</option>
<option value="geneExpression">Gene expression</option>
<option value="diseases">Diseases</option>
<option value="molecularInteractions">Molecular interactions</option>
<option value="reactionsPathways">Reactions &amp; pathways</option>
<option value="proteinFamilies">Protein families</option>
<option value="literature">Literature</option>
<option value="ontologies">Samples &amp; ontologies</option>
</optgroup>
<optgroup label="Search web content">
<option value="ebiweb_people">EMBL-EBI People</option>
<option value="ebiweb">EMBL-EBI web</option>
<!-- <option value="ebiweb">EMBL web</option> -->
</optgroup>
</select>
</div>
<div class="columns small-8 margin-bottom-none search-text-wrapper">
<input id="query" class="margin-bottom-none" title="EBI Search" tabindex="2" type="text" name="query" value="" size="35" maxlength="2048" placeholder="Find a gene, protein or chemical" required="">
<span class="form-error margin-top-small">
You need to enter a search query.
</span>
</div>
<div class="columns small-2 margin-bottom-none">
<input id="search_submit" class="button icon icon-functional margin-bottom-none" tabindex="3" type="submit" name="submit1" value="1" style="line-height:.9">
</div>
<!-- <input id="allebi" type="hidden" name="db" value="allebi" checked="checked" /> -->
<input type="hidden" name="requestFrom" value="ebi_index">
</div>
</fieldset>
<fieldset>
<div id="example" class="medium-push-2 medium-10 columns small">
Example searches: <a href="/ebisearch/search.ebi?db=allebi&amp;requestFrom=ebi_index&amp;query=blast">blast</a> <a href="/ebisearch/search.ebi?db=allebi&amp;query=keratin&amp;requestFrom=ebi_index">keratin</a> <a href="/ebisearch/search.ebi?db=allebi&amp;query=bfl1&amp;requestFrom=ebi_index">bfl1</a>
</div>
</fieldset>
</form>
</div>
</div>
</section>
<section class="vf-intro | embl-grid embl-grid--has-centered-content">
<div>
<!-- empty -->
</div>
<div class="vf-content">
## What you get
- the Eleventy static site generator
- access to the Visual Framework component system
### Component installation
To add a component you can use npm/Yarn or install it manually.
In either case you'll need to re-run `gulp dev` to ensure the component is fully loaded.
- installation: `yarn add @visual-framework/vf-logo`
- updating: `yarn upgrade-interactive --latest`
### Manual installation for customisation
1. Download a pattern
2. Copy it to `./src/components/vf-component-name`
### Add your own local component
You can add a custom VF-compatible component to `./src/components` and use it in
your site.
- `gulp vf-component`
You'll find a `vf-sample` component there, we've used it below:
<div class="vf-box">
{% verbatim %}
Code: {% render "@vf-sample", {text: "with some text"} %}
{% endverbatim %}
Returns: {% render "@vf-sample", {text: "with some text"} %}
</div>
</div>
</section>
<script type="text/javascript">
document.onreadystatechange=function(){
jQuery(function() {
var container = $('#ebi_search');
if (container.length) {
var search = (document.location.pathname + document.location.search)
.replace(/%\d\d/g, ' ')
.replace(/[^a-zA-Z0-9]/g, ' ')
.replace(/(html|php|js|css)/g,'')
.replace(/\s+/g, ' ')
.trim()
.replace(' s', '');
jQuery('#query')
.val(search);
}
});
};
</script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment