From a97434887633657122af2e7ecac902a1f730f5ea Mon Sep 17 00:00:00 2001 From: sandipkumarbhuyan Date: Sun, 8 Jul 2018 11:58:54 +0530 Subject: [PATCH] Add twig global variables for algolia configuration and implement searching functionality through one classification --- ansible/roles/web/templates/parameters.yml.j2 | 3 +- ansible/secrets.dist/dev-vagrant.secrets.yml | 1 + .../secrets.dist/production-aws.secrets.yml | 1 + ansible/secrets.dist/staging-aws.secrets.yml | 1 + doc/src/devenv/tipsandtricks.rst | 6 +- site/app/config/config.yml | 3 + site/app/config/parameters.yml.dist | 1 + .../views/Default/project_search.html.twig | 91 ++++++++++--------- .../Resources/views/Project/view.html.twig | 2 +- .../Resources/views/Default/home.html.twig | 6 +- site/web/assets/css/librecores.css | 11 ++- site/web/assets/js/search.js | 13 ++- 12 files changed, 80 insertions(+), 59 deletions(-) diff --git a/ansible/roles/web/templates/parameters.yml.j2 b/ansible/roles/web/templates/parameters.yml.j2 index 3a20f57b..82ff54f6 100644 --- a/ansible/roles/web/templates/parameters.yml.j2 +++ b/ansible/roles/web/templates/parameters.yml.j2 @@ -48,4 +48,5 @@ parameters: # Algolia Configuration env(ALGOLIA_APP_ID): '{{ site_algolia_app_id }}' - env(ALGOLIA_API_KEY): '{{ site_algolia_api_key }}' \ No newline at end of file + env(ALGOLIA_API_KEY): '{{ site_algolia_api_key }}' + ALGOLIA_SEARCH_KEY: '{{ site_algolia_search_key }}' \ No newline at end of file diff --git a/ansible/secrets.dist/dev-vagrant.secrets.yml b/ansible/secrets.dist/dev-vagrant.secrets.yml index 1274f612..d102539d 100644 --- a/ansible/secrets.dist/dev-vagrant.secrets.yml +++ b/ansible/secrets.dist/dev-vagrant.secrets.yml @@ -18,3 +18,4 @@ site_smtp_password: 'INSERT_SMTP_PASSWORD_HERE' # Algolia site_algolia_app_id: 'INSERT_ALGOLIA_APP_ID_HERE' site_algolia_api_key: 'INSERT_ALGOLIA_API_KEY_HERE' +site_algolia_search_key: 'INSERT_ALGOLIA_SEARCH_KEY_HERE' diff --git a/ansible/secrets.dist/production-aws.secrets.yml b/ansible/secrets.dist/production-aws.secrets.yml index 2c43af01..da4aef8d 100644 --- a/ansible/secrets.dist/production-aws.secrets.yml +++ b/ansible/secrets.dist/production-aws.secrets.yml @@ -51,3 +51,4 @@ site_smtp_password: 'INSERT_SMTP_PASSWORD_HERE' # Algolia site_algolia_app_id: 'INSERT_ALGOLIA_APP_ID_HERE' site_algolia_api_key: 'INSERT_ALGOLIA_API_KEY_HERE' +site_algolia_search_key: 'INSERT_ALGOLIA_SEARCH_KEY_HERE' diff --git a/ansible/secrets.dist/staging-aws.secrets.yml b/ansible/secrets.dist/staging-aws.secrets.yml index 8625fcf9..89262dac 100644 --- a/ansible/secrets.dist/staging-aws.secrets.yml +++ b/ansible/secrets.dist/staging-aws.secrets.yml @@ -51,3 +51,4 @@ site_smtp_password: 'INSERT_SMTP_PASSWORD_HERE' # Algolia site_algolia_app_id: 'INSERT_ALGOLIA_APP_ID_HERE' site_algolia_api_key: 'INSERT_ALGOLIA_API_KEY_HERE' +site_algolia_search_key: 'INSERT_ALGOLIA_SEARCH_KEY_HERE' diff --git a/doc/src/devenv/tipsandtricks.rst b/doc/src/devenv/tipsandtricks.rst index f2277aca..010798c9 100644 --- a/doc/src/devenv/tipsandtricks.rst +++ b/doc/src/devenv/tipsandtricks.rst @@ -113,9 +113,9 @@ Check the coding style of PHP code Algolia indices configuration ----------------------------- -To configure Algolia in the development environment you need to specify the Application ID (site_algolia_app_id) -and the Admin API Key (site_algolia_api_key) in the ansible/secrets/dev-vagrant.secrets.yml file. -Clear and import the search settings from algolia +To configure Algolia in the development environment you need to specify the Application ID (site_algolia_app_id), +Search-Only API Key (site_algolia_search_key) and the Admin API Key (site_algolia_api_key) in the +ansible/secrets/dev-vagrant.secrets.yml file. Clear and import the search settings from algolia Clear indices ------------- diff --git a/site/app/config/config.yml b/site/app/config/config.yml index f468bf10..02703131 100644 --- a/site/app/config/config.yml +++ b/site/app/config/config.yml @@ -48,6 +48,9 @@ twig: form_themes: - 'bootstrap_3_layout.html.twig' - 'LibrecoresProjectRepoBundle:Form:fields.html.twig' + globals: + algolia_app_id: "%env(ALGOLIA_APP_ID)%" + algolia_search_key: "%ALGOLIA_SEARCH_KEY%" # Assetic Configuration assetic: diff --git a/site/app/config/parameters.yml.dist b/site/app/config/parameters.yml.dist index 02894b1c..0a403bbf 100644 --- a/site/app/config/parameters.yml.dist +++ b/site/app/config/parameters.yml.dist @@ -51,3 +51,4 @@ parameters: # Algolia Configuration env(ALGOLIA_APP_ID): ~ env(ALGOLIA_API_KEY): ~ + ALGOLIA_SEARCH_KEY: ~ diff --git a/site/src/Librecores/ProjectRepoBundle/Resources/views/Default/project_search.html.twig b/site/src/Librecores/ProjectRepoBundle/Resources/views/Default/project_search.html.twig index fd25122d..3e7f39d7 100644 --- a/site/src/Librecores/ProjectRepoBundle/Resources/views/Default/project_search.html.twig +++ b/site/src/Librecores/ProjectRepoBundle/Resources/views/Default/project_search.html.twig @@ -1,7 +1,7 @@ {% extends 'layout.html.twig' %} {% block title %} -LibreCores Search + LibreCores Search {% endblock %} {% block pagepath %}Home » LibreCores Search{% endblock %} @@ -9,54 +9,55 @@ LibreCores Search {% block stylesheets %} {{ parent() }} {% stylesheets filter="cssrewrite" - "assets/css/instantsearch.min.css" - %} - + "assets/css/instantsearch.min.css" %} + {% endstylesheets %} {% endblock %} {% block content %} -
-
-
-
-

Search

-
-
-
- - + +
+
+
+

Search

+
+
+
+ + +
+ +
- - -
-
-
- {# sidebar for search refinements #} - -
-
-
-
- +
+
+ {# sidebar for search refinements #} + +
+
+
+
+ +
-
- + {# Templates for instant search #} {# User Template #} @@ -87,7 +88,7 @@ LibreCores Search
{{{ _highlightResult.tagName.value }}}
{{#_highlightResult.classifications}} - {{{ value }}} + {{{ value }}} {{/_highlightResult.classifications}}
@@ -119,19 +120,19 @@ LibreCores Search {% endblock %} {% block pagejs %} -{# do not use autofocus attribute to work around FF bug 712130 (FOUC) #} + {# do not use autofocus attribute to work around FF bug 712130 (FOUC) #} -$(function() { + $(function() { searchFunctions(); options = { - appId: 'ENTER_APPLICATION_ID', - apiKey: 'ENTER_APPLICATION_KEY', - indexName: '{{ searchType }}', - searchParameters: { - hitsPerPage: 10, + appId: '{{ algolia_app_id }}', + apiKey: '{{ algolia_search_key }}', + indexName: '{{ searchType }}', + searchParameters: { + hitsPerPage: 10, }, } // Algolia instantsearch configuration - algoliaInstantSearch(options, '{{searchType}}'); -}); + algoliaInstantSearch(options, '{{ searchType }}'); + }); {% endblock %} diff --git a/site/src/Librecores/ProjectRepoBundle/Resources/views/Project/view.html.twig b/site/src/Librecores/ProjectRepoBundle/Resources/views/Project/view.html.twig index 788078a1..9754b088 100644 --- a/site/src/Librecores/ProjectRepoBundle/Resources/views/Project/view.html.twig +++ b/site/src/Librecores/ProjectRepoBundle/Resources/views/Project/view.html.twig @@ -60,7 +60,7 @@
{% if classifications %} {% for classification in classifications %} - {{ classification.getClassification() }} + {{ classification.getClassification() }} {% endfor %} {% endif %}
diff --git a/site/src/Librecores/SiteBundle/Resources/views/Default/home.html.twig b/site/src/Librecores/SiteBundle/Resources/views/Default/home.html.twig index d7ab2554..6eb49db8 100644 --- a/site/src/Librecores/SiteBundle/Resources/views/Default/home.html.twig +++ b/site/src/Librecores/SiteBundle/Resources/views/Default/home.html.twig @@ -238,7 +238,11 @@ {% block pagejs %} {# do not use autofocus attribute to work around FF bug 712130 (FOUC) #} $(function() { + algoliaConfig = { + applicationId: '{{ algolia_app_id }}', + searchKey: '{{ algolia_search_key }}' + } $("#search-form-input").focus(); - algoliaAutocomplete(); + algoliaAutocomplete(algoliaConfig); }); {% endblock %} diff --git a/site/web/assets/css/librecores.css b/site/web/assets/css/librecores.css index fdc3ad36..ec914fee 100644 --- a/site/web/assets/css/librecores.css +++ b/site/web/assets/css/librecores.css @@ -745,7 +745,7 @@ a.classifiation-tag:hover { background: none; } -#search-input input { +.ais-search-box .ais-search-box--input { height: 35px; padding: 6px 25px; font-size: 15px; @@ -755,15 +755,16 @@ a.classifiation-tag:hover { background-image: none; border: 1px solid #ccc; border-radius: 4px; + } -#search-input input, #search-input input:focus { +.ais-search-box--input input:focus { transition: border-color .3s ease-in; outline: 0; } -#search-input input:focus { +.ais-search-box--input input:focus { border-color: #3fb0ac; } -#search-input input::-webkit-input-placeholder, #search-input input:-moz-placeholder, #search-input input:-moz-placeholder, #search-input input:-ms-input-placeholder { +.ais-search-box--input input::-webkit-input-placeholder, #search-input input:-moz-placeholder, #search-input input:-moz-placeholder, #search-input input:-ms-input-placeholder { font-weight: 100; color: #999; } @@ -781,7 +782,9 @@ a.classifiation-tag:hover { font-style: normal; background-color: rgba(58, 150, 207, 0.1); } +.ais-search-box { +} #stats .ais-stats--time { font-size: 0.8em; color: #999; diff --git a/site/web/assets/js/search.js b/site/web/assets/js/search.js index 1c4aa436..be54396a 100644 --- a/site/web/assets/js/search.js +++ b/site/web/assets/js/search.js @@ -1,11 +1,11 @@ -function algoliaAutocomplete() { - var client = algoliasearch('ENTER_APPLICATION_ID', 'ENTER_APPLICATION_KEY') +function algoliaAutocomplete(algoliaConfig) { + var client = algoliasearch(algoliaConfig.applicationId, algoliaConfig.searchKey) var projects = client.initIndex('projects'); var classifications = client.initIndex('classifications'); var organization = client.initIndex('organization'); var user = client.initIndex('user'); - autocomplete('#search-form-input', {debug:true}, [ + autocomplete('#search-form-input', {} ,[ { source: autocomplete.sources.hits(projects, { hitsPerPage: 5 }), displayKey: 'name', @@ -36,8 +36,10 @@ function algoliaAutocomplete() { templates: { header: '
Users
', suggestion: function(suggestion) { + var name = suggestion._highlightResult.name == null ? + suggestion._highlightResult.username.value : suggestion._highlightResult.name.value; return '' + - suggestion._highlightResult.name.value + ' ' + name + ' ' + suggestion._highlightResult.username.value + ''; } } @@ -141,6 +143,9 @@ function getTemplate(templateName) { } function getTimeDiff(item) { + if(item.dateLastActivityOccurred === null) { + return 0 + ' days before'; + } var time = item.dateLastActivityOccurred.date; var date = new Date(time); var today = new Date();