Skip to content

Commit

Permalink
Major, initial alpha version - Merge pull request #2 from GormFrank/dev
Browse files Browse the repository at this point in the history
Initial upload with build script
duboisp authored Apr 11, 2024
2 parents d8bb185 + 214bb60 commit 57a26cb
Showing 14 changed files with 3,240 additions and 0 deletions.
37 changes: 37 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"env": {
"browser": true,
"es6": true,
"node": true,
"jquery": true
},
"globals": {
"JSON": true
},
"rules": {
"indent": ["error", "tab", { "outerIIFEBody": 0 }],
"eqeqeq": [2, "allow-null"],
"no-eq-null": 2,
"no-unused-expressions": [2, { "allowTernary": true }],
"wrap-iife": [
2,
"any"
],
"no-unused-vars": [2, { "varsIgnorePattern": "wet_boew_"}],
"camelcase": 0,
"max-len": [
2,
500
],
"no-irregular-whitespace": 2,
"no-nested-ternary": 0,
"linebreak-style": 0
}
}
30 changes: 30 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
name: Continous integration

on:
pull_request:

jobs:
integration-check:

runs-on: ubuntu-latest

environment: github-ci

strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v2

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}

- name: Install global dependencies
run: |
npm i -g grunt-cli
npm ci
- name: Build distribution files (dist)
run: grunt
26 changes: 26 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -6,6 +6,8 @@ yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
*.orig
*.tmp

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
@@ -128,3 +130,27 @@ dist
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

# Artifacts
lib/
dist/*

# OS generated files #
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ethumbs.db
Thumbs.db

# IDEs
nbproject/*
.c9revisions/*
*.sublime-project
*.sublime-workspace
.pydevproject
.idea/
/.project
.settings
.vscode/*
100 changes: 100 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

clean: {
dist: ['dist']
},

copy: {
main: {
expand: true,
flatten: true,
src: 'src/headless.esm.js',
dest: 'dist/',
},
},

uglify: {
options: {
banner: '/*!\n * Canada.ca Search UI Connector / Connecteur IU de Recherche pour Canada.ca\n' +
' * @license https://github.com/ServiceCanada/search-ui/?tab=MIT-1-ov-file\n' +
' * v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n*/'
},

dist: {
files: {
'dist/connector.min.js': ['src/connector.js']
}
}
},

cssmin: {
dist: {
files: {
'dist/connector.min.css': ['src/connector.css']
}
}
},

usebanner: {
taskName: {
options: {
position: 'top',
banner: '/*!\n * Canada.ca Search UI Connector / Connecteur IU de Recherche pour Canada.ca\n' +
' * @license https://github.com/ServiceCanada/search-ui/?tab=MIT-1-ov-file\n' +
' * v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n*/',
linebreak: true
},
files: {
src: [ 'dist/connector.min.css' ]
}
}
},

htmllint: {
all: {
src: ['*.html']
},

options: {
"attr-name-style": "dash",
"attr-quote-style": false,
"id-class-style": "dash",
"indent-style": "tabs",
"indent-width": 4,
"line-end-style": "lf",
"attr-no-unsafe-char": false
}
},

jshint: {
all: {
options: {
esversion: 11,
'-W067': true // To ignore Unorthodox function invocation
},
src: ['Gruntfile.js', 'src/connector.js']
}
},

eslint: {
options: {
overrideConfigFile: ".eslintrc.json",
quiet: true
},
target: ['Gruntfile.js', 'src/connector.js']
}
});

grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-banner');
grunt.loadNpmTasks('grunt-htmllint');
grunt.loadNpmTasks('grunt-eslint');

grunt.registerTask('default', ['clean', 'htmllint', 'jshint', 'eslint', 'copy', 'uglify', 'cssmin', 'usebanner']);
};
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,16 @@
# search-ui
Search user interface with headless

## Getting started

1. run: npm install -g grunt-cli
2. run: npm install
3. run: grunt (build script; tasks to lint, test & minify content in "dist")
4. To test web pages: Push to GitHub and run your GitHub Pages
5. To Deploy: Take the content of the "dist" folder and put it on a server

## Versioning API

Each new verion of this project is defined based on an evaluaton of the impacts of changes against any formerly up-to-date Search UI implementation. The scope constitutes of all files within the "dist" folder (distribution files), which are JavaScript scripts and CSS styles.

Search UI follows [Semantic Versioning 2.0.0](https://semver.org/)
10 changes: 10 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
remote_theme: wet-boew/gcweb-jekyll
title: Search UI for Canada.ca Search

#
# Page front matter defaults
defaults:
- scope:
path: "" # Ensure it's applied to all pages
values:
layout: default
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: Search user interface (UI) with Headless
---

<p class="lead">This is a demo site for the Search UI.</p>

<h2 id="test">Testing</h2>

<ul>
<li><a href="test/srb-en.html">Sample basic search page</a></li>
<!--<li><a href="test/src-en.html">Sample contextual search page</a></li>-->
<li><a href="test/srb-fr.html" hreflang="fr" lang="fr">Exemple de page de résultats de la recherche (base)</a></li>
<!--<li><a href="test/src-fr.html" hreflang="fr" lang="fr">Exemple de page de résultats de la recherche (contextuelle)</a></li>-->
</ul>
1,915 changes: 1,915 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "search-ui",
"version": "1.0.0-alpha",
"description": "Canada.ca Search UI with Headless",
"main": "index.html",
"repository": {
"type": "git",
"url": "git+https://github.com/ServiceCanada/search-ui.git"
},
"keywords": [
"Search",
"UI",
"Canada-ca"
],
"author": "ServiceCanada",
"license": "(MIT AND Apache-2.0)",
"homepage": "https://servicecanada.github.io/search-ui/",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-banner": "^0.6.0",
"grunt-contrib-clean": "^2.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^5.0.0",
"grunt-contrib-jshint": "^3.2.0",
"grunt-contrib-uglify": "^5.2.2",
"grunt-eslint": "^24.3.0",
"grunt-htmllint": "^0.3.0"
}
}
96 changes: 96 additions & 0 deletions src/connector.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*
* Search UI: Styles for Query suggestion List "combobox", TO BE eventually replaced by GCWeb reference implementation codebase
*/
.rough-experimental.query-suggestions {
background-color: white;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
cursor: pointer;
left: 0px;
list-style-type: none;
padding: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 60;
}
.rough-experimental.query-suggestions li {
padding: 5px 10px;
}
.rough-experimental.query-suggestions li:hover {
background-color: #ddd;
}

/*
* Render heading level 2 the same size as the heading level 4
* To be replaced by out-of-the-box GCWeb
*/
.page-type-search h2 {
font-size: 1.1em;
}

/*
* Add top margin to alert
* To be replaced by out-of-the-box GCWeb
*/
.page-type-search .alert {
margin-top: 30px;
}

.page-type-search .did-you-mean {
font-weight: 600;
margin-left: 15px;
}

/*
* Pagination styles
* To be replaced by out-of-the-box GCWeb
*/
.pager>li>button, .pagination>li>button {
cursor: pointer;
display: inline-block;
margin-bottom: 0.5em;
padding: 10px 16px;
}
.pagination>li>button {
background-color: #eaebed;
border: 1px solid #dcdee1;
color: #335075;
float: left;
line-height: 1.4375;
margin-left: -1px;
padding: 10px 14px;
position: relative;
text-decoration: none;
}
.pagination>li:first-child>button {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}
.pager>li.active>button, .pagination>li.active>button {
cursor: default;
}
.pagination>.active>button, .pagination>.active>button:focus, .pagination>.active>button:hover {
background-color: #2572b4;
border-color: #2572b4;
color: #fff;
cursor: default;
z-index: 3;
}
.pagination>li>.previous-page-button:before, .pagination>li>.next-page-button:after {
font-family: "Glyphicons Halflings";
font-weight: 400;
line-height: 1em;
position: relative;
top: .1em;
}
.pagination>li>.previous-page-button:before {
content: "\e091";
margin-right: .5em;
}
.pagination>li>.next-page-button:after {
content: "\e092";
margin-left: .5em;
}
821 changes: 821 additions & 0 deletions src/connector.js

Large diffs are not rendered by default.

60 changes: 60 additions & 0 deletions src/headless.esm.js

Large diffs are not rendered by default.

44 changes: 44 additions & 0 deletions test/srb-en.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
title: Basic search Page for Governement of Canada using Headless
description: Demo page for the Canada.ca Search UI Basic
lang: en
altLangPage: srb-fr.html
nositesearch: true
pageclass: page-type-search
pageType: recherche
share: false
deptfeature: false
dateModified: 2024-03-14
stylesheets:
- href: "../src/connector.css"
---

<!--FORM-->
<form method="GET" action="#wb-land" class="mrgn-tp-sm">
<div class="input-group mrgn-tp-lg">
<label class="wb-inv" for="sch-inp-ac">Search Government of Canada websites</label>
<input id="sch-inp-ac" class="form-control" value="" name="q" autocomplete="off" spellcheck="false" type="search" data-fusion-query="safe" aria-describedby="gc-pi">
<span class="input-group-btn">
<button class="btn btn-primary btn-small" type="submit"> <span class="glyphicon-search glyphicon" aria-hidden="true"></span> <span class="wb-inv">Search</span> </button>
</span>
</div>
<p id="gc-pi" class="mrgn-tp-md">Don’t include personal information (telephone, email, SIN, financial, medical, or work details).</p>
</form>

<!--RESULTS-->
<div data-gc-search='{
"searchHub": "canada-gouv-public-websites",
"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
"accessToken":"XYZ"
}'></div>
<p class="text-center small"><a href="https://www.canada.ca/en/sr/srb/sra.html">Perform an advanced search</a></p>

<!--DEMO-EXPECTATIONS-->
<h2>Expected output for the result section</h2>
<details>
<summary>Output for Results section</summary>
[To be completed, see Connector.js for reference until then]
</details>

<!--SCRIPT-->
<script type="module" src="../src/connector.js"></script>
44 changes: 44 additions & 0 deletions test/srb-fr.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
title: Résultats de la recherche (base) pour le gouvernement du Canada avec Headless
description: Page démo pour l'interface utilisateur de recherche Canada.ca (base)
lang: fr
altLangPage: srb-en.html
nositesearch: true
pageclass: page-type-search
pageType: recherche
share: false
deptfeature: false
dateModified: 2024-03-14
stylesheets:
- href: "../src/connector.css"
---

<!--FORM-->
<form method="GET" action="#wb-land" class="mrgn-tp-sm">
<div class="input-group mrgn-tp-lg">
<label class="wb-inv" for="sch-inp-ac">Rechercher les sites web du Gouvernment du Canada</label>
<input id="sch-inp-ac" class="form-control" value="" name="q" autocomplete="off" spellcheck="false" type="search" data-fusion-query="safe" aria-describedby="gc-pi">
<span class="input-group-btn">
<button class="btn btn-primary btn-small" type="submit"> <span class="glyphicon-search glyphicon" aria-hidden="true"></span> <span class="wb-inv">Rechercher</span> </button>
</span>
</div>
<p id="gc-pi" class="mrgn-tp-md">N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).</p>
</form>

<!--RESULTS-->
<div data-gc-search='{
"searchHub": "canada-gouv-public-websites",
"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
"accessToken":"XYZ"
}'></div>
<p class="text-center small"><a href="https://www.canada.ca/fr/sr/srb/sra.html">Effectuer une recherche avancée</a></p>

<!--DEMO-EXPECTATIONS-->
<h2>Section Résultats attendu pour la section de résultats</h2>
<details>
<summary>Section Résultats générée</summary>
[À compléter, voir Connector.js comme référence pour l'instant]
</details>

<!--SCRIPT-->
<script type="module" src="../src/connector.js"></script>

0 comments on commit 57a26cb

Please sign in to comment.