Add search page

src/_includes/css/custom.css

@@ -60,6 +60,17 @@ input[type="range"].oi-slider-control:focus::-moz-range-thumb{ outline: 4px soli
 .credit svg { position:relative;top:2px; }
 .embed { display: block; text-align: center; font-size:0.8em; color: #555; margin-bottom: 1rem; } 
 
+#filter { position: relative; }
+#filter label { position: absolute; line-height:0; left: 0.5em; top: 50%; transform: translate3d(0,-50%,0); }
+#filter input[type=text] { padding-left: 1.75em; width: 100%; font-size: 1rem; line-height: 2rem; }
+#pages { list-style: none; margin: 0; margin-top: 2em; }
+#pages li { margin-bottom: 1rem; }
+#pages li:last-child { margin-bottom: 0; }
+#pages li a { display: block; text-decoration: none; padding: 1rem; }
+#pages li a:focus, #pages li a:hover { background: black; color: white; }
+#pages li a svg { margin-right:0.5rem; }
+#pages li .page-title { font-size: 1.2em; font-weight: bold; font-family: Poppins; line-height: 1rem; }
+#pages li .page-title { margin-bottom: 0.5rem; }
 
 @media only screen and (max-width: 1080px) {
 	.grid-list { grid-template-columns: repeat(2,1fr); grid-gap: 0.25em; }

src/_includes/partials/header.njk

@@ -10,6 +10,7 @@
 					<li><a href="/" {% if url | match("^/$") %} class="b6-bg"{% endif %}>Home</a></li>
 					<li><a href="/about"{% if url | match("^/about/?$") %} class="b6-bg"{% endif %}>About</a></li>
 					<li><a href="/themes"{% if url | match("^/themes/?") %} class="b6-bg"{% endif %}>Themes</a></li>
+					<li><a href="/search"{% if url | match("^/search/?") %} class="b6-bg"{% endif %}>Search</a></li>
 				</ul>
 			</nav>
 		</div>

src/search.njk

@@ -0,0 +1,107 @@
+---
+title: Search
+---
+
+
+{% set data = search.data("themes/") %}
+
+<div id="filter" style="display:none">
+	<label for="filter-input"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg></label>
+	<input type="text" placeholder="Search for a hex cartogram" id="filter-input" />
+</div>
+<noscript><p>Here is a list of hex cartograms you can view...</p></noscript>
+
+<ul id="pages">
+  {% for page in search.pages("theme_page theme!=undefined !draft created!=undefined", "order created=desc") %}
+  <li data-theme="{{ page.theme }}" data-keywords="{{ page.keywords }}"><a href="{{ page.url }}" class="{{ data.themes[page.theme].class | safe }}"><div class="page-title">{{ data.themes[page.theme].icon | safe }}{{ page.title }}</div><div class="description">{{ page.description }}</div></a></li>
+  {% endfor %}
+</ul>
+
+<script>
+function ListItem(li){
+	this.el = li;
+	this.dom = true;
+	this.title = (li.querySelector('.page-title') ? li.querySelector('.page-title').innerHTML : "");
+	this.link = li.querySelector('a').getAttribute('href');
+	this.description = (li.querySelector('.description') ? li.querySelector('.description').innerHTML : "");
+	this.keywords = li.getAttribute('data-keywords')||"";
+	this.theme = li.getAttribute('data-theme')||"";
+	if(li.querySelector('.keywords')) li.querySelector('.keywords').style.display = "none";
+	this.show = function(el){
+		el.appendChild(this.el);
+		this.dom = true;
+	}
+	this.hide = function(){
+		if(this.dom) this.el.remove()
+		this.dom = false;
+	}
+	this.rank = function(val){
+		var words = val.split(/ /);
+		var r = 0,v,re,rw,ok = true;
+		for(var i = 0; i < words.length; i++){
+			v = words[i];
+			rw = 0;
+			re = new RegExp("(\W|^)"+v, "i");
+			if(this.title.toLowerCase().indexOf(v) == 0) rw += 3;			// Title starts with search
+			if(this.title.toLowerCase().indexOf(v) > 0) rw += 1;			// Title contains search
+			if(this.description.toLowerCase().match(re)) rw += 1.5;			// Description contains value at start of a word
+			if(this.description.toLowerCase().indexOf(v) >= 0) rw += 0.5;	// Description contains search
+			if(this.keywords.toLowerCase().indexOf(v) >= 0) rw += 2;		// Keywords contains search
+			if(this.theme.toLowerCase().indexOf(v) >= 0) rw += 2;			// Theme contains search
+			if(rw == 0) ok = false;
+			r += rw;
+		}
+		return (ok ? r : 0);
+	}
+	return this;
+}
+// Make the filter box
+function FilterList(el,ul){
+
+	var filter,label,li,list,i,a,val;
+
+	el.style.display = "";
+
+	filter = el.querySelector('input[type=text]');
+
+	// Get the list items
+	li = ul.querySelectorAll("li");
+	list = new Array(li.length);
+	for(i = 0; i < li.length; i++) list[i] = new ListItem(li[i]);
+
+	var _obj = this;
+	// Listen for keypresses and then update what is visible in the list
+	filter.addEventListener('keyup',function(e){
+		_obj.filter(filter.value.toLowerCase());
+	});
+	
+	this.filter = function(val){
+		var tmp = [],ok,i,title,desc,keyw;
+		
+		if(!val){
+			for(i = 0; i < list.length; i++) list[i].hide();
+		}else{
+			for(i = 0 ; i < list.length; i++) tmp.push({'rank':list[i].rank(val),'li':list[i]});
+			tmp = sortBy(tmp,'rank','title');
+			for(i = 0; i < tmp.length; i++){
+				if(tmp[i].rank > 0) tmp[i].li.show(ul)
+				else tmp[i].li.hide();
+			}
+		}
+	};
+
+	// Set search to the contents of the search box
+	this.filter(filter.value);
+
+	return this;
+}
+
+// Sort the data
+function sortBy(arr,i,j,reverse){
+	return arr.sort(function (a, b) {
+		return (a[i] < b[i] ? 1 : (a[i] > b[i] ? -1 : (j && a[j] < b[j] ? -1 : 1)))*(reverse ? -1 : 1);
+	});
+}
+FilterList(document.getElementById('filter'),document.getElementById('pages'));
+
+</script>

src/themes/economy/covid-grants.njk

@@ -5,6 +5,7 @@ created: 2023-08-10T23:46
 updated: 2023-08-10T23:46
 description: |
   Data on the coronavirus (COVID-19) business grant schemes.
+keywords: [covid,grant,business]
 viz:
   - width: 600
     hexjson: hexjson.constituencies

src/themes/economy/house-prices.njk

@@ -4,7 +4,7 @@ theme: economy
 created: 2023-08-10T20:05
 updated: 2023-08-10T20:05
 description: |
-  Constituency-level data on house prices.
+  Constituency-level data on house prices. The house price figures used are the median price paid for properties over the twelve months to the date shown.
 viz:
   - width: 600
     test: true

src/themes/economy/unemployment.njk

@@ -5,6 +5,7 @@ created: 2023-08-10T23:45
 updated: 2024-04-02T21:40
 description: |
   Constituency-level data on people claiming unemployment benefits.
+keywords: [unemployed,claimant,jobseeker]
 config:
   width: 600
   hexjson: hexjson.constituencies

src/themes/economy/wages.njk

@@ -5,6 +5,7 @@ created: 2023-08-10T20:35
 updated: 2024-04-02T22:20
 description: |
   Constituency-level data on wages.
+keywords: [wages,median,pay]
 config:
   width: 600
   hexjson: hexjson.constituencies

src/themes/energy/fuel-poverty.njk

@@ -5,6 +5,7 @@ created: 2023-10-05T14:38
 updated: 2023-10-05T14:38
 description: |
   Fuel poverty in England is measured using the Low Income Low Energy Efficiency (LILEE) indicator.
+keywords: [fuel,poverty,heat,home,prices]
 config:
   ref:
     width: 600

src/themes/energy/households-off-gas-grid.njk

@@ -5,6 +5,7 @@ created: 2023-10-05T14:38
 updated: 2023-10-05T14:38
 description: |
   Estimates of households that are off the gas grid (England, Scotland, and Wales)
+keywords: [gas,grid,home,mains]
 config:
   ref:
     width: 600

src/themes/environment/green-belt/index.njk

@@ -4,6 +4,7 @@ theme: environment
 created: 2024-01-16T09:21
 updated: 2024-01-16T09:21
 description: Fraction of each constituency that constitutes green belt.
+keywords: [green belt,hectares,urban]
 ---
 
 <p>The government states that the <a href="https://www.gov.uk/government/publications/national-planning-policy-framework--2">"fundamental aim" of the green belt</a> "is to prevent urban sprawl by keeping land permanently open" around urban areas. England had around 16,384 km&sup2; (or 6,326 square miles) of green belt land at the end of March 2023, covering 12.6% of England's land area. The green belt is clustered around 15 urban cores; the largest are London (5,085 km&sup2;), Merseyside and Greater Manchester (2,477 km&sup2;) and South and West Yorkshire (including Sheffield, Leeds and Bradford, 2,465 km&sup2;).</p>

src/themes/environment/storm-overflows/index.njk

@@ -5,6 +5,7 @@ created: 2023-08-22T17:44
 updated: 2024-03-27T19:05
 description: |
   Constituency-level data on sewage overflows.
+keywords: [water,storm,overflow,spill,sewage]
 ---
 
 <p>The Water and Sewerage Companies provide data to the Environment Agency each year as part of their regulatory Annual Return, to fulfil their permitted conditions to discharge from these storm overflows under the Environmental Permitting Regulations. We took the OS Grid Reference for every storm overflow event reported in the Environment Agency's <a href="https://environment.data.gov.uk/dataset/21e15f12-0df8-4bfc-b763-45226c16a8ac">Event Duration Monitoring datasets</a> (2022 and 2023) and found the corresponding Parliamentary constituency to create the visualisations for <a href="#spills">total number of spills</a> and <a href="#duration">total duration in hours</a>.</p>

src/themes/health/disability.njk

@@ -5,6 +5,7 @@ created: 2023-08-16T15:37
 updated: 2023-08-16T15:37
 description: |
   Disability as measured in the 2021 census at constituency-level (England & Wales).
+keywords: [disability,health,covid]
 config:
   ref:
     width: 600

src/themes/society/child-poverty.njk

@@ -4,7 +4,8 @@ theme: society
 created: 2023-08-24T15:59
 updated: 2023-08-24T15:59
 description: |
-  Child poverty by constituency (UK).
+  Constituency-level data on child poverty in the UK (2021/2).
+keywords: [relative,absolute,poverty,children,HMRC,inequality]
 ---
 
 <p>This page provides constituency-level data on child poverty in the UK (2021/2). Use the slider to switch between relative and absolute poverty.</p>

src/themes/society/education-attainment.njk

@@ -4,7 +4,8 @@ theme: society
 created: 2023-10-24T18:40
 updated: 2023-10-24T18:40
 description: |
-  Education attainment by constituency (England).
+  Educational attainment in state-funded schools in England. There are breakdowns of GCSE A*-C, KS4 Attainment 8 and KS2 Attainment.
+keywords: [education,attainment,schools,GCSE,KS4,KS2,english,maths,standard]
 ---
 
 <p>This page provides <a href="https://commonslibrary.parliament.uk/constituency-data-educational-attainment/">constituency-level data on educational attainment in state-funded schools in England</a>. There are breakdowns of <a href="#gcse-a-c">GCSE A*-C</a>, <a href="#ks4-attainment8">KS4 Attainment 8</a> and <a href="#ks2">KS2 Attainment</a>.</p>

src/themes/society/electorate.njk

@@ -4,7 +4,8 @@ theme: society
 created: 2023-08-16T20:06
 updated: 2023-08-16T20:06
 description: |
-  Electorate by constituency (UK).
+  Electorate by constituency (UK) for both the new and existing constituencies
+keywords: [electorate,people]
 ---
 
 <h2>2023 Constituencies</h2>

src/themes/society/eu-referendum.njk

@@ -5,6 +5,7 @@ created: 2023-08-16T12:46
 updated: 2023-08-16T12:46
 description: |
   Estimates of constituency-level voting for the 2016 EU Referendum (GB).
+keywords: [EU,Referendum,estimates]
 config:
   ref:
     width: 600

src/themes/society/heritage-at-risk/index.njk

@@ -4,7 +4,8 @@ theme: society
 created: 2024-03-28T11:42
 updated: 2024-03-28T11:42
 description: |
-  Constituency-level data on heritage at risk.
+  Historic England's Heritage at Risk (HAR) programme helps to understand the overall state of England's historic sites. It identifies those sites that are most at risk of being lost as a result of neglect, decay or inappropriate development. We've taken the 2023 version of Historic England's Heritage at Risk register and summed up all entries by constituency. We have views for all entries, archaeology, building or structure, conservation area, and place of worship.
+keywords: [history,historic,archaeology,building,structure,conservation,area,worship,place-of-worship]
 ---
 
 <p>Historic England's Heritage at Risk (HAR) programme helps to understand the overall state of England's historic sites. It identifies those sites that are most at risk of being lost as a result of neglect, decay or inappropriate development. We've taken the <a href="https://historicengland.org.uk/images-books/publications/har-2023-registers/">2023 version</a> of Historic England's <a href="https://historicengland.org.uk/advice/heritage-at-risk/search-register/">Heritage at Risk register</a> and summed up all entries by constituency. We have views for <a href="#all">all entries</a>, <a href="#archaeology">archaeology</a>, <a href="#building-or-structure">building or structure</a>, <a href="#conservation-area">conservation area</a>, and <a href="#place-of-worship">place of worship</a>.</p>

src/themes/society/imd.njk

@@ -3,7 +3,8 @@ title: Indicies of Multiple Deprivation (UK)
 theme: society
 created: 2023-10-24T10:15
 description: |
-  Composite IMD scores by MySociety (UK).
+  Composite indices of multiple-deprivation scores by MySociety (UK).
+keywords: [IMD]
 ---
 
 <p>This page provides constituency-level data on composite IMD scores (2020). See the <a href="#notes">notes below</a>.</p>

src/themes/society/population.njk

@@ -5,6 +5,7 @@ created: 2023-09-13T13:32
 updated: 2023-09-13T13:32
 description: |
   Population by constituency (UK).
+keywords: [population,people,age,breakdown]
 ---
 
 

src/themes/society/school-allocations.njk

@@ -5,6 +5,7 @@ created: 2023-10-24T17:10
 updated: 2023-10-24T17:10
 description: |
   School funding by constituency (England).
+keywords: [school,funding,allocations,per pupil]
 ---
 
 <p>This page provides <a href="https://commonslibrary.parliament.uk/constituency-data-schools-funding/">constituency-level data on school funding for mainstream state-funded schools in England</a>. Use the slider to change years.</p>

src/themes/society/sexuality.njk

@@ -5,6 +5,7 @@ created: 2023-10-10T21:00
 updated: 2023-10-10T21:00
 description: |
   This dataset provides Census 2021 estimates that classify usual residents aged 16 years and over in England and Wales by sexual orientation. The estimates are as at Census Day, 21 March 2021.
+keywords: [straight,heterosexual,gay,lesbian,bisexual,sexual,orientations]
 ---
 
 <p>This dataset provides Census 2021 estimates that classify usual residents aged 16 years and over in England and Wales by sexual orientation. The estimates are as at Census Day, 21 March 2021.</p>

src/themes/transport/active-travel.njk

@@ -4,7 +4,8 @@ theme: transport
 created: 2023-09-13T18:51
 updated: 2023-09-13T18:51
 description: |
-  Walking and cycling (England).
+  Walking and cycling (England) based on the National Travel Survey and Active Lives Survey.
+keywords: [walking,cycling,active,travel,cycle,adults]
 ---
 
 <p>Data and statistics about <a href="#walk">walking</a> and <a href="#cycle">cycling</a>, based on the National Travel Survey and Active Lives Survey.</p>

src/themes/transport/bus-service-changes.njk

@@ -4,7 +4,8 @@ theme: transport
 created: 2023-11-29T21:45
 updated: 2023-11-29T21:45
 description: |
-  This dataset shows how bus services have changed from 2010 to 2023.
+  This dataset was created by Friends of the Earth and the University of Leeds and shows how bus services have changed from 2010 to 2023.
+keywords: [bus,services,public,GTFS,transit]
 ---
 
 <p>This dataset was created by Friends of the Earth and the University of Leeds and involved a huge and complex analysis of all available local and national timetable data in England and Wales from 2010 to 2023. It has shown that while London has had an almost constant level of bus provision, many other parts of the country have seen declines of more than two-thirds. Read <a href="https://policy.friendsoftheearth.uk/insight/how-britains-bus-services-have-drastically-declined">the full report from Friends of the Earth</a>. The data are presented for the new constituencies that will be used for the expected general election in 2024.</p>

src/themes/transport/distance-travelled-to-work.njk

@@ -5,6 +5,7 @@ created: 2023-10-10T20:58
 updated: 2023-10-10T20:58
 description: |
   This dataset provides Census 2021 estimates that classify usual residents aged 16 years and over in employment the week before the census in England and Wales by the distance they travelled to work.
+keywords: [distance,work,employment,km]
 ---
 
 <p>This dataset provides Census 2021 estimates that classify usual residents aged 16 years and over in employment the week before the census in England and Wales by the distance they travelled to work. The estimates are as at Census Day, 21 March 2021. This visualisation only shows those who travel to work. It does not include those who work at home, in no fixed place, outside the UK, or on an offshore installation.</p>

src/themes/transport/ev-charging-points.njk

@@ -5,14 +5,13 @@ created: 2023-08-31T16:40
 updated: 2023-08-31T16:40
 description: |
   Electric vehicle charging points by constituency (UK).
+keywords: [EV,home,workplace,public,National Chargepoint Registry,sockets,charging,emissions,OZEV]
 ---
 
 <p>This page aims to present data on electric vehicle (EV) charging for <a href="#home">home</a>, <a href="#work">workplace</a>, <a href="#public">public</a> (ONS/ZapMap and <a href="#ncr">National Chargepoint Registry</a>), and <a href="#combined">combined</a> charging sockets/devices/connections.</p>
 
 <h2>Combined charging availability{% comp 'anchor', { 'ref': 'combined'} %}{% endcomp %}</h2>
-<p>
-    To present an idea of the full picture we combine the number of <a href="#home">home</a>, <a href="#work">workplace</a>, <a href="#public">public</a> charging sockets/devices/connections (see <a href="#notes">notes</a> below).</p>
-</p>
+<p>To present an idea of the full picture we combine the number of <a href="#home">home</a>, <a href="#work">workplace</a>, <a href="#public">public</a> charging sockets/devices/connections (see <a href="#notes">notes</a> below).</p>
 
 {% comp 'wrapper', {
 	"component": comp.oi.map.hex_cartogram,

src/themes/transport/road-traffic-accidents.njk

@@ -5,6 +5,7 @@ created: 2023-08-15T17:52
 updated: 2023-08-15T17:52
 description: |
   Constituency-level data on road accidents in England, Scotland and Wales.
+keywords: [accident,fatal,serious,police,car]
 config:
   all:
     width: 600