Feature/search #235
Feature/search #235
Conversation
Codecov Report
@@ Coverage Diff @@
## master #235 +/- ##
==========================================
+ Coverage 95.31% 95.35% +0.04%
==========================================
Files 31 31
Lines 320 323 +3
Branches 40 40
==========================================
+ Hits 305 308 +3
Misses 15 15
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
This is looking soooo great! Thanks for the work and collaboration @RIanDeLaCruz and @motleydev! 👏
package.json
Outdated
| "react-dom": "^15.5.4", | ||
| "react-instantsearch": "^4.0.7", |
There was a problem hiding this comment.
@RIanDeLaCruz Will need to comment on this.
There was a problem hiding this comment.
react-instantsearch can be removed already. I find it odd that it wasn't removed when I did yarn remove
There was a problem hiding this comment.
I had to do some manual merges with master and this branch so it's possible I fat-fingered it.
components/nav.js
Outdated
| }, | ||
| }) | ||
| const glamorousSearch = (props, {animations}) => ({ | ||
| ...animations.expansion('width'), |
There was a problem hiding this comment.
Don't worry about the ..., also, I don't think we'll need to use this anywhere else so I'd prefer to keep this out of theme. So why don't we make those as part of inputBase. In addition, we could also just inline that, I don't think it needs to be in a variable. Why don't we just do:
const SearchBox = glamorous.input(
'algolia_searchbox',
{ /* inline the styles object here */ }
)There was a problem hiding this comment.
Well, this library's functional style and ease of composing were the core features of the blog post I was thinking about, but ok. :) Done.
components/nav.js
Outdated
| paddingBottom: 4, | ||
| paddingLeft: 30, | ||
| paddingRight: 20, | ||
| backgroundImage: 'url(/static/images/search.svg)', |
There was a problem hiding this comment.
Instead of making this external, would it be possible to just import the svg directly? We have a babel plugin that will give us a react component when we import an svg file.
There was a problem hiding this comment.
We would need to restructure the search box first. It's currently just an input but to place inline graphical elements like that we'd need to do some kind of span > input foo and hope it doesn't break the live results function. Do you still want to do that?
There was a problem hiding this comment.
Pretty sure it should still be fine because docsearch just looks for the class name @motleydev
There was a problem hiding this comment.
Alright @kentcdodds - you can decide if it's still worth the server response optimization. :) I won't be able to have a go at that until this evening most likely.
components/nav.js
Outdated
| type: 'text', | ||
| pattern: '.*', | ||
| required: true, | ||
| placeholder: 'Search…', |
There was a problem hiding this comment.
We'll need this to be localized :) Put it in components/content/nav.md and then you can do: placeholder: content.search
|
Alright, requested changes are done except for the inline of svg - let me know! |
kentcdodds
force-pushed
the
feature/search
branch
from
9b6c46c
to
c602d9f
Compare
|
Ok, so I've made a few changes and cleaned up the commit history. Things are a little bit broken with the algolia config and that's because this was merged but I don't think it's been propogated yet. I think that I'll go ahead and merge this and hopefully it magically starts working when algolia reindexes things (tomorrow I'm guessing). |
kentcdodds
force-pushed
the
feature/search
branch
3 times, most recently
from
58808c7
to
a8e1207
Compare
kentcdodds
force-pushed
the
feature/search
branch
from
a8e1207
to
3a86c75
Compare
|
Thanks everyone! This was a great team effort!
|
|
+1 for cleaning up the merge history. This one got hairy. :) |
|
This usage of babel-plugin-preval is amazing! |
|
😊 |
What: Adding style touches to #219
Why: Because style makes everyone happy. And this feature rocks.
How: Added some new primitives to the GlobalStyles object for animation and the rest was modifying the styles/structure of the Search component.