Commit 01dfc14d authored by Jonathan Hickford's avatar Jonathan Hickford

Demo 404 page

parent a963aa52
const { DateTime } = require('luxon'); const { DateTime } = require("luxon");
const _ = require('lodash'); const _ = require("lodash");
const Path = require('path'); const Path = require("path");
module.exports = function(config) { module.exports = function(config) {
// Add in tags, filters useful for Visual Framework installs // Add in tags, filters useful for Visual Framework installs
// (fractal's render tag, codeblock, markdown, etc) // (fractal's render tag, codeblock, markdown, etc)
// and common configuration // and common configuration
...@@ -77,14 +76,15 @@ module.exports = function(config) { ...@@ -77,14 +76,15 @@ module.exports = function(config) {
output: "build", output: "build",
data: "_data" data: "_data"
}, },
templateFormats : [ templateFormats: [
"njk", "md", // note that .md files will also be parsed with njk processor "njk",
"css", "js" // passthrough file copying for static assets "md", // note that .md files will also be parsed with njk processor
"css",
"js" // passthrough file copying for static assets
], ],
htmlTemplateEngine : ["njk", "md"], htmlTemplateEngine: ["njk", "md"],
markdownTemplateEngine : "njk", markdownTemplateEngine: "njk",
passthroughFileCopy: true, passthroughFileCopy: true
pathPrefix: "/ebi-eleventy-boilerplate/" // if your site is deployed to a sub-url, otherwise comment out // pathPrefix: "/ebi-eleventy-boilerplate/" // if your site is deployed to a sub-url, otherwise comment out
}; };
}; };
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"author": "Ken Hawkins <ken.hawkins@embl.de> (https://www.embl.de/aboutus/communication_outreach/)", "author": "Ken Hawkins <ken.hawkins@embl.de> (https://www.embl.de/aboutus/communication_outreach/)",
"main": "gulpfile.js", "main": "gulpfile.js",
"vfConfig": { "vfConfig": {
"vfName": "VF Boilerplate for Eleventy", "vfName": "404",
"vfNamespace": "vfeleventy-", "vfNamespace": "vfeleventy-",
"vfComponentPath": "./src/components", "vfComponentPath": "./src/components",
"vfBuildDestination": "./build", "vfBuildDestination": "./build",
......
// Some various reusable configuration // Some various reusable configuration
module.exports = { module.exports = {
siteInformation: { siteInformation: {
title: "Eleventy for the VF 1.3 + 2.0", title: "404 Page not found",
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.', short_description:
url: "https://ebiwd.github.io/ebi-eleventy-boilerplate/", "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", author: "Visual Framework system",
email: "ken.hawkins@embl.de", email: "ken.hawkins@embl.de"
} }
}; };
<!--
<div class="vf-body"> <div class="vf-body">
<div class="vf-grid"> <div class="vf-grid">
<div class="vf-body--text"> <div class="vf-body--text">
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
</div> </div>
</div> </div>
</div> </div>
-->
<footer> <footer>
<div id="global-footer" class="global-footer"> <div id="global-footer" class="global-footer">
......
...@@ -71,14 +71,15 @@ ...@@ -71,14 +71,15 @@
<div id="content"> <div id="content">
<div data-sticky-container> <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"> <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"> <div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-12" id="local-title"> <div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">EBI Framework</a></h1> <h1><a href="../../" title="Back to [service-name] homepage">EBI Framework</a></h1>
</div> </div>
<!-- /local-title -->
<!-- local-nav -->
<nav > <nav >
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational"> <ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="../../">Overview</a></li> <li><a href="../../">Overview</a></li>
...@@ -86,13 +87,15 @@ ...@@ -86,13 +87,15 @@
<li><a href="#">Support <i class="icon icon-generic" data-icon="x"></i></a></li> <li><a href="#">Support <i class="icon icon-generic" data-icon="x"></i></a></li>
</ul> </ul>
</nav> </nav>
<!-- /local-nav -->
</div> </div>
</header> </header
-->
</div> </div>
<!-- Suggested layout containers --> <!-- Suggested layout containers -->
<section id="main-content-area" class="row" role="main"> <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 --> <!-- 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"> <nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs columns"> <ul class="breadcrumbs columns">
<li><a href="../../">EBI Framework</a></li> <li><a href="../../">EBI Framework</a></li>
...@@ -102,6 +105,7 @@ ...@@ -102,6 +105,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
-->
<div class="columns"> <div class="columns">
<div class="vf-grid"> <div class="vf-grid">
......
...@@ -8,7 +8,7 @@ templateEngineOverride: njk, md ...@@ -8,7 +8,7 @@ templateEngineOverride: njk, md
{% render '@vf-intro', {"vf_intro_phase": "alpha", "vf_intro_heading": siteConfig.siteInformation.title, {% render '@vf-intro', {"vf_intro_phase": "alpha", "vf_intro_heading": siteConfig.siteInformation.title,
"vf_intro_lede": siteConfig.siteInformation.short_description, "vf_intro_lede": siteConfig.siteInformation.short_description,
"vf_intro_text": [ "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 ...@@ -17,72 +17,79 @@ templateEngineOverride: njk, md
<!-- empty --> <!-- empty -->
</div> </div>
<div class="vf-content"> <div class="vf-content">
{% markdown %}
<div class="row">
## Quickstart <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">
npm init @visual-framework/vf-eleventy your-new-site-name ebi-eleventy-boilerplate <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;">
This will install a new [`ebi-eleventy-boilerplate`](https://github.com/visual-framework/ebi-eleventy-boilerplate/) to a folder named `your-new-site-name`. <option value="allebi">All</option>
<optgroup label="Science search">
Then follow the onscreen prompts and links below to develop and configure. <option value="genomes">Genomes &amp; metagenomes</option>
<option value="nucleotideSequences">Nucleotide sequences</option>
## Longer install? <option value="proteinSequences">Protein sequences</option>
<option value="smallMolecules">Small molecules</option>
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). <option value="geneExpression">Gene expression</option>
<option value="diseases">Diseases</option>
{% endmarkdown %} <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> </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> </div>
</section> </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