+
+ {% include 'components/sub-page-header.njk' %}
+
+
+
+
+
+
+
+ {% include 'components/search.njk' %}
+ Building your search results, one moment.
+
+
+
+
+
+{% block pageScript %}
+
+{% endblock %}
diff --git a/assets/css/abstracts/_mixins.scss b/assets/css/abstracts/_mixins.scss
index ad9285456..dde64d539 100644
--- a/assets/css/abstracts/_mixins.scss
+++ b/assets/css/abstracts/_mixins.scss
@@ -21,3 +21,11 @@
@mixin icon__embed() {
margin-right: 0.35rem;
}
+
+@mixin dark-mode-rule() {
+ @media (prefers-color-scheme: dark) {
+ :root:not([data-user-theme='light']) {
+ @content;
+ }
+ }
+}
diff --git a/assets/css/abstracts/_universal-selector.scss b/assets/css/abstracts/_universal-selector.scss
deleted file mode 100644
index d8209c8cb..000000000
--- a/assets/css/abstracts/_universal-selector.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-*::before {
- box-sizing: border-box;
-}
-
-*::after {
- box-sizing: border-box;
-}
diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss
index 28353d076..f48410b37 100644
--- a/assets/css/abstracts/_variables.scss
+++ b/assets/css/abstracts/_variables.scss
@@ -9,6 +9,7 @@ $colors: (
yellow: hsl(50, 100%, 50%),
dark-yellow: hsl(50, 100%, 20%),
pale-yellow: hsl(50, 100%, 86%),
+ very-blue: hsl(236, 100%, 58%),
black: hsl(0, 0%, 13%),
black-transparent: hsla(0, 0%, 13%, 85%),
white-transparent: hsl(0, 0%, 100%, 85%),
diff --git a/assets/css/base.scss b/assets/css/base.scss
index 7956537e9..14c256bcf 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -1,16 +1,16 @@
@charset 'UTF-8';
// 1. Configuration and helpers
-@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
- 'abstracts/universal-selector';
+@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins';
// 2. Vendors
// @import
// 'vendors/normalize';
// 3. Base stuff
-@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
- 'base/typography', './base/a', 'base/helpers', 'base/radio-buttons', 'base/code';
+@import 'base/custom-properties', 'base/fonts', 'base/universal-selector',
+ 'base/base', 'base/selection', 'base/typography', './base/a', 'base/input',
+ 'base/button', 'base/radio-buttons', 'base/helpers', 'base/code';
// 4. Layout-related sections
@import 'structures/header', 'structures/footer', 'structures/grid',
@@ -18,8 +18,9 @@
'./structures/definition-content', './structures/definition-navigation';
// 5. Components
-@import 'components/word', './components/box', 'components/lists', 'components/definitions',
- 'components/flag', 'components/alertbox';
+@import 'components/word', './components/box', 'components/lists',
+ 'components/definitions', 'components/flag', 'components/alertbox',
+ 'components/search';
// 6. Page-specific styles
@import './layouts/pages';
diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss
index 01b2ef026..f4abefe33 100644
--- a/assets/css/base/_base.scss
+++ b/assets/css/base/_base.scss
@@ -6,6 +6,10 @@ body {
font-size: pxToRem(20);
margin: 0;
padding: 2rem;
+
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
}
[hidden] {
diff --git a/assets/css/base/_button.scss b/assets/css/base/_button.scss
new file mode 100644
index 000000000..945f0e75c
--- /dev/null
+++ b/assets/css/base/_button.scss
@@ -0,0 +1,19 @@
+button {
+ appearance: none;
+ border: none;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ font-family: $ext-sans;
+ font-weight: bold;
+ padding: 0.5rem 0.75rem;
+
+ &.-main {
+ background: var(--clr-very-blue);
+ color: white;
+ }
+
+ &:focus {
+ outline: 0.125rem solid var(--clr-very-blue);
+ outline-offset: 0.125rem;
+ }
+}
diff --git a/assets/css/base/_custom-properties.scss b/assets/css/base/_custom-properties.scss
index 33acdc4ac..410054e16 100644
--- a/assets/css/base/_custom-properties.scss
+++ b/assets/css/base/_custom-properties.scss
@@ -56,10 +56,8 @@
--l-gap: 1rem;
}
-@media (prefers-color-scheme: dark) {
- :root:not([data-user-theme='light']) {
- @include color-scheme-dark();
- }
+@include dark-mode-rule {
+ @include color-scheme-dark();
}
:root[data-user-theme='dark'] {
diff --git a/assets/css/base/_input.scss b/assets/css/base/_input.scss
new file mode 100644
index 000000000..c50b8c1ab
--- /dev/null
+++ b/assets/css/base/_input.scss
@@ -0,0 +1,13 @@
+input[type='text'],
+input[type='search'] {
+ background: var(--clr-background);
+ border: 0.125rem solid var(--clr-foreground);
+ border-radius: 0.25rem;
+ color: inherit;
+ padding: 0.5rem 0.75rem;
+
+ &:focus {
+ border-color: var(--clr-very-blue);
+ outline: 2px solid var(--clr-very-blue);
+ }
+}
diff --git a/assets/css/base/_universal-selector.scss b/assets/css/base/_universal-selector.scss
index d8209c8cb..5d8c67025 100644
--- a/assets/css/base/_universal-selector.scss
+++ b/assets/css/base/_universal-selector.scss
@@ -1,5 +1,7 @@
* {
box-sizing: border-box;
+ font-family: inherit;
+ font-size: inherit;
}
*::before {
diff --git a/assets/css/components/_box.scss b/assets/css/components/_box.scss
index 2e27b1e5c..9a89f974e 100644
--- a/assets/css/components/_box.scss
+++ b/assets/css/components/_box.scss
@@ -17,10 +17,8 @@
a {
color: var(--clr-background);
- @media (prefers-color-scheme: dark) {
- :root:not([data-user-theme='light']) &:focus {
- background-color: var(--clr-pink);
- }
+ @include dark-mode-rule {
+ background-color: var(--clr-pink);
}
}
diff --git a/assets/css/components/_search.scss b/assets/css/components/_search.scss
new file mode 100644
index 000000000..555dc86b2
--- /dev/null
+++ b/assets/css/components/_search.scss
@@ -0,0 +1,20 @@
+.search__form {
+ background: transparent;
+ margin-bottom: 2rem;
+}
+
+.search__label {
+ display: block;
+}
+
+.search__actions {
+ display: flex;
+}
+
+.search__input {
+ margin-right: 0.5rem;
+}
+
+.search-results-list__list-item__highlight {
+ background: var(--clr-pale-yellow);
+}
diff --git a/functions/search.js b/functions/search.js
new file mode 100644
index 000000000..78076b6d9
--- /dev/null
+++ b/functions/search.js
@@ -0,0 +1,45 @@
+const lunr = require('lunr');
+const { default: axios } = require('axios');
+
+exports.handler = async function({ queryStringParameters }, _, callback) {
+ try {
+ if (!queryStringParameters) {
+ callback(new Error('missing query string parameter "q"'));
+ }
+
+ const { data: definitions } = await axios.get(
+ 'https://deploy-preview-213--selfdefined.netlify.app/search-data.json'
+ );
+
+ // create a map based on title for faster retrieval in search results
+ const definitionMap = definitions.reduce((map, definition) => {
+ map[definition.title] = definition;
+ return map;
+ }, {});
+
+ // create the full text search
+ const idx = lunr(function() {
+ this.ref('title');
+ this.field('title');
+ this.field('subterms');
+ this.field('content');
+
+ // load definitions into lunr index
+ for (const definition in definitions) {
+ this.add(definitions[definition]);
+ }
+ });
+
+ const matches = idx.search(queryStringParameters.q);
+ const results = matches.map((match) => definitionMap[match.ref]);
+
+ console.log(results)
+ callback(null, {
+ body: JSON.stringify(results),
+ statusCode: 200
+ });
+ } catch (error) {
+ console.log(error);
+ callback(error);
+ }
+};
diff --git a/netlify.toml b/netlify.toml
index d9c3b6f0d..0b5128343 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -11,6 +11,8 @@
# Default build command.
command = "npm run build"
+ functions = "functions/"
+
[[redirects]]
from = "/#ok-hand"
to = "/definitions/ok-hand/"
diff --git a/package-lock.json b/package-lock.json
index cb45e6afa..78a5c39a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2570,19 +2570,11 @@
"dev": true
},
"axios": {
- "version": "0.19.0",
- "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
- "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+ "version": "0.19.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+ "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
- "follow-redirects": "1.5.10",
- "is-buffer": "^2.0.2"
- },
- "dependencies": {
- "is-buffer": {
- "version": "2.0.4",
- "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
- "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
- }
+ "follow-redirects": "1.5.10"
}
},
"babel-plugin-dynamic-import-node": {
@@ -4878,6 +4870,34 @@
"pify": "^2.0.0",
"pinkie-promise": "^2.0.0",
"rimraf": "^2.2.8"
+ },
+ "dependencies": {
+ "array-union": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+ "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+ "requires": {
+ "array-uniq": "^1.0.1"
+ }
+ },
+ "arrify": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+ "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+ },
+ "globby": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
+ "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
+ "requires": {
+ "array-union": "^1.0.1",
+ "arrify": "^1.0.0",
+ "glob": "^7.0.3",
+ "object-assign": "^4.0.1",
+ "pify": "^2.0.0",
+ "pinkie-promise": "^2.0.0"
+ }
+ }
}
},
"delayed-stream": {
@@ -6822,34 +6842,6 @@
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
"dev": true
},
- "globby": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
- "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
- "requires": {
- "array-union": "^1.0.1",
- "arrify": "^1.0.0",
- "glob": "^7.0.3",
- "object-assign": "^4.0.1",
- "pify": "^2.0.0",
- "pinkie-promise": "^2.0.0"
- },
- "dependencies": {
- "array-union": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
- "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
- "requires": {
- "array-uniq": "^1.0.1"
- }
- },
- "arrify": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
- "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
- }
- }
- },
"globjoin": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
@@ -8666,6 +8658,20 @@
"yargs": "6.6.0"
},
"dependencies": {
+ "axios": {
+ "version": "0.19.0",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+ "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+ "requires": {
+ "follow-redirects": "1.5.10",
+ "is-buffer": "^2.0.2"
+ }
+ },
+ "is-buffer": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+ "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+ },
"yargs": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
@@ -8978,6 +8984,11 @@
"yallist": "^2.1.2"
}
},
+ "lunr": {
+ "version": "2.3.8",
+ "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.8.tgz",
+ "integrity": "sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg=="
+ },
"luxon": {
"version": "1.24.1",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.24.1.tgz",
@@ -12538,6 +12549,12 @@
"xtend": "^4.0.1"
}
},
+ "remove-markdown": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.3.0.tgz",
+ "integrity": "sha1-XktmdJOpNXlyjz1S7MHbnKUF3Jg=",
+ "dev": true
+ },
"remove-trailing-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
diff --git a/package.json b/package.json
index 57da579d2..c99bc3e69 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
"build": "concurrently npm:build:*",
"build:css": "parcel build assets/css/base.scss --out-dir dist/assets/css/",
"build:site": "eleventy",
- "create-definitions": "bin/create-definitions",
"lint": "concurrently npm:lint:*",
"lint:css": "stylelint \"assets/css/**/*.scss\" --fix",
"lint:js": "eslint \"**/*.js\" --fix",
@@ -19,9 +18,6 @@
"watch": "eleventy --watch",
"watch:css": "parcel watch assets/css/base.scss --out-dir dist/assets/css/"
},
- "bin": {
- "create-definitions": "bin/create-definitions"
- },
"repository": {
"type": "git",
"url": "git+https://github.com/tatianamac/selfdefined.git"
@@ -56,6 +52,8 @@
"dependencies": {
"@11ty/eleventy": "^0.11.0",
"@11ty/eleventy-plugin-rss": "^1.0.7",
+ "axios": "^0.19.2",
+ "lunr": "^2.3.8",
"markdown-it-anchor": "^5.3.0",
"markdown-it-prism": "^2.0.5"
},
@@ -73,6 +71,7 @@
"parcel-bundler": "^1.12.4",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
+ "remove-markdown": "^0.3.0",
"sass": "^1.26.7",
"slugify": "^1.4.0",
"stylelint": "^13.5.0",
@@ -83,4 +82,4 @@
"engines": {
"node": "12"
}
-}
\ No newline at end of file
+}