Algolia #239

suprith-hub · 2024-05-23T19:15:45Z

I tried fuse search and it was successful, please check if this works,
IF yes next will be:
searchbar positioning
Implement same for vocabulary page and dialect page
Customize fuseOptions much better

jviotti · 2024-05-24T09:17:57Z

layouts/_default/index.json

What is this file? We shouldn't be committing generated files in this project. You can get Hugo to generate a JSON file automatically from the site content

Yeah, I saw that auto generation didn't work for me so I copied the information manually. Let me try it again to auto-generate

jviotti · 2024-05-24T09:18:27Z

config/_default/config.toml

@@ -13,3 +13,4 @@ jsonschema = 'https://json-schema.org'
  [markup.highlight]
    lineNos = false
    noClasses = false
+


Empty line?

So, .toml files shouldn't have empty lines in the end?? I and any config file?.. I'll change it,

I don't think any file format as a requirement of an empty line at the end that I'm aware of

jviotti · 2024-05-24T09:19:25Z

assets/main.scss

@@ -146,3 +146,16 @@ details:not([open]) summary i {
  @extend .d-inline-block;
  transform: rotate(-90deg); 
 }
+
+/* Customizing the search button color */
+.btn-outline-success {


You should never override Bootstrap classes. Bootstrap provides a way to override main colors through SCSS variables and also supports plenty of helpers to customize colors, border colors, etc of arbitrary elements.

jviotti · 2024-05-24T09:20:56Z

assets/main.js

@@ -5,3 +5,68 @@ import Tooltip from './vendor/bootstrap/js/src/tooltip.js';
 for (const element of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
  new Tooltip(element);
 }
+
+// Fuse search options
+var fuseOptions = {


var is an old and no longer used JavaScript construct. You should use const or let

jviotti · 2024-05-24T09:22:51Z

layouts/partials/navigation.html

+
+    <form class="d-flex justify-self-end" id="search-form">
+      <input class="form-control me-2" type="search" name="q" id="search-query" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success" type="submit">Search</button>


Probably no need to have a submit button, as it is not a form you would be submitting anyway. Ideally we just have the search input and we search as the user types?

" Search as the user inputs" means we will keep redirecting as user inputs or keep changing suggestions like in JSON Schema website as user inputs ?? 1 or 2?

No redirection. Exactly like in the JSON Schema official website: we dynamically change the dropdown with the search results

Okay, that means the dropdown has to be displayed dynamically, and stop so that user can chose... I don't know how it works with Fuse. In JSON Schema.org they use React library from Algolia itself to have that functionality.
Are there any suggestions..? That how dynamic search and listing can be done in UI

You should be able to doing with plain JavaScript + Bootstrap. i.e. load a Bootstrap dropdown upon search results. Or if you can create a JavaScript function that gives you the search results given a search term as an array I can help doing the UI

jviotti · 2024-05-24T09:22:57Z

layouts/partials/navigation.html

+      <button class="btn btn-outline-success" type="submit">Search</button>
+    </form>
+
+    <div class="navbar-nav d-flex ">


Suggested change

<div class="navbar-nav d-flex ">

<div class="navbar-nav d-flex">

jviotti

I left a few comments have various comments about the JavaScript part, but it doesn't seem to work for me at all. I don't see anything if I type on the search bar or submit, as if nothing happens at all. Does it work for you?

suprith-hub · 2024-05-24T10:32:45Z

I left a few comments have various comments about the JavaScript part, but it doesn't seem to work for me at all. I don't see anything if I type on the search bar or submit, as if nothing happens at all. Does it work for you?

This is the recording of the working : it redirects directly, ..

search-bar.mp4

jviotti · 2024-05-26T19:49:55Z

I don't get the dropdown at all. What browser are you using? Maybe try other ones?

Untitled.mov

suprith-hub · 2024-05-26T20:36:38Z

I don't get the dropdown at all. What browser are you using? Maybe try other ones?

Untitled.mov

That dropdown isn't code defined, yeah its because of the browser - Chrome browser.

I don't get the dropdown at all. What browser are you using? Maybe try other ones?

Untitled.mov

That dropdown is a browser behavior. Right now it works only if the search button is clicked. Let's implement listing functionality too..

suprith-hub · 2024-05-27T19:29:28Z

@jviotti I have made the major changes, styling and html should be polished.
Currently(functionality):

I have made it such that it clears everything on clicking outside, maybe we can give top suggestions
listing out top 10 results.
Change suggestions on these?

jviotti · 2024-05-28T08:52:17Z

Seems to be shaping up but still doesn't work for me. It cannot find the JSON index file

Also, can you resolve the git conflicts?

….com into algolia

suprith-hub · 2024-05-28T15:45:29Z

@jviotti autogeneration is happening now, can you check for the funtionality.. then we can go ahead with UI then code correction
The interesting thing was - json files having that kind format/content was valid which was confusing

jviotti · 2024-06-03T14:33:14Z

Woah! Super cool already! One small UI suggestion: when displaying a keyword, can you also showcase what dialect and vocabulary they belong to?

jviotti · 2024-06-03T14:34:11Z

Can you extract the parts of this PR that generate the JSON index as a separate PR? I think we can get that merged now while we focus on polishing the rest

jviotti · 2024-06-03T14:34:57Z

layouts/_default/baseof.html

-    <script defer src="{{ $js.Permalink }}"></script>
+    <script async src="{{ $js.Permalink }}"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.6.2/fuse.min.js" integrity="sha512-Nqw1tH3mpavka9cQCc5zWWEZNfIPdOYyQFjlV1NvflEtQ0/XI6ZQ+H/D3YgJdqSUJlMLAPRj/oXlaHCFbFCjoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


Can we pull these dependencies using NPM on package.json?

suprith-hub · 2024-06-03T19:48:41Z

Woah! Super cool already! One small UI suggestion: when displaying a keyword, can you also showcase what dialect and vocabulary they belong to?

Okay.. I got the reason for it . For the UI shall I include both of them in right as a smaller size text ? I may have to override bootstrap I guess

jviotti · 2024-06-03T20:49:34Z

Not sure about the style. Give it your best shot while changing the least amount of possible in Bootstrap and then I'll help!

suprith-hub · 2024-06-04T16:20:12Z

@jviotti I have made the changes, I have updated package.json too, should I have another PR for index.json... 100%?

jviotti · 2024-06-04T20:12:01Z

Yeah, let's do a separate PR. A sequence of smaller PRs is always better than 1 bigger PR! At least we have the JSON part out of the way, and we focus on the rest.

suprith-hub added 2 commits May 23, 2024 17:27

Draft commit

6f7ce68

Search bar with Fuse search

3395400

jviotti reviewed May 24, 2024

View reviewed changes

jviotti requested changes May 24, 2024

View reviewed changes

Added dropdown in the search and made items clickable

8f11022

suprith-hub added 3 commits May 28, 2024 16:34

Merge branch 'main' into algolia

53b9eaf

Added index json data file autogeneration

8643641

Merge branch 'algolia' of https://github.com/Era-cell/learnjsonschema…

f4ca251

….com into algolia

jviotti reviewed Jun 3, 2024

View reviewed changes

Added dialect and vocabulary in search results

9ca37da

Updated package lock file too

c419b3c

Merge branch 'main' into algolia

e1e10f2

suprith-hub closed this Jul 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Algolia #239

Algolia #239

suprith-hub commented May 23, 2024

jviotti May 24, 2024

suprith-hub May 24, 2024

jviotti May 24, 2024

suprith-hub May 24, 2024

jviotti May 26, 2024

jviotti May 24, 2024

jviotti May 24, 2024

jviotti May 24, 2024

suprith-hub May 24, 2024

jviotti May 26, 2024

suprith-hub May 26, 2024

jviotti May 26, 2024

jviotti May 24, 2024

jviotti left a comment

suprith-hub commented May 24, 2024

jviotti commented May 26, 2024

suprith-hub commented May 26, 2024

suprith-hub commented May 27, 2024

jviotti commented May 28, 2024

suprith-hub commented May 28, 2024 •

edited

Loading

jviotti commented Jun 3, 2024

jviotti commented Jun 3, 2024

jviotti Jun 3, 2024

suprith-hub commented Jun 3, 2024

jviotti commented Jun 3, 2024

suprith-hub commented Jun 4, 2024

jviotti commented Jun 4, 2024

	<div class="navbar-nav d-flex ">
	<div class="navbar-nav d-flex">

Algolia #239

Algolia #239

Conversation

suprith-hub commented May 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jviotti left a comment

Choose a reason for hiding this comment

suprith-hub commented May 24, 2024

jviotti commented May 26, 2024

suprith-hub commented May 26, 2024

suprith-hub commented May 27, 2024

jviotti commented May 28, 2024

suprith-hub commented May 28, 2024 • edited Loading

jviotti commented Jun 3, 2024

jviotti commented Jun 3, 2024

Choose a reason for hiding this comment

suprith-hub commented Jun 3, 2024

jviotti commented Jun 3, 2024

suprith-hub commented Jun 4, 2024

jviotti commented Jun 4, 2024

suprith-hub commented May 28, 2024 •

edited

Loading