GatsbyJS: Search based on markdown files - javascript

👋
Can anyone provide some hints how to solve the following problem with GatsbyJS:
I have a page, which is listing all the markdown files of the project, via this GraphQL query:
query ListQuery {
allMarkdownRemark(sort: {fields: frontmatter___date, order: DESC}) {
edges {
node {
id
html
frontmatter {
date(formatString: "DD.MM.YY")
docs
path
tag
title
}
}
}
}
}
If I'm right, it's not possible to set a dynamic filter which is binded to the search input field.
Later on I found this: https://www.gatsbyjs.org/docs/adding-search-with-js-search/
I thought js-search could be the solution, but then I need a big .json file. The problem: It's more comfortable to work with markdown files. So this doesn't look like the right solution either. 😞
I am thankful for help!

Quote from the docs
Before we go through the steps needed for adding client side search to
your Gatsby website, you should be familiar with the basics of Gatsby
Markdown and GraphQL are used during build phase, during creating your static site.
During run phase, during client search you don't have access GraphQL/Markdown. They are not exist during user interaction with your site.
So for client search, you should create need a big .json file. If you will follow the doc, it will not be problem for you.

Looks like I'm very late to answer this question, but it might be somewhat helpful for others looking for it.
Before adding search to gatsbyjs web app you should have some idea how gatsby builds the app. You can check it in the docs.
To add search you first need to create an index of all the markdown files. For creating an Index you can do it manually or can use search engines like aloglia, elastic search or lunr.js. If you want everything easy to manage you can go with aloglia which has a cap for free searches. If you want to go without spending any money you can go with lunrjs .
What these search engines will do is that they will create a data layer above the graphql data layer which can be used during the run time. You can then create node which can be used to query the posts in the app.This blogpost explains setting up search in gatsby with details.

Related

Compiling Latex with Javascript

I am working on a webapp(written with react-js) that generates a Latex code which contains information to give to the user. My goal is to let the user download the PDF file directly from my application.
I first tried using this library: texlive.js, that seemed to work but really it's impossible to recompile(their "Makefile" is not meant to handle new packages) if you try to add new packages(only some basic ones work).
So I thought about using the overleaf APIs but they don't let you obtain the pdf without sending the user to their website.
Any advice to make one of them work or any other way to achieve my goal?
You can install your package in texlive.js without using MakeFile
Sorry I am not expert in answering but here is how i made it work
I wanted to implement exam paper generation using javascript
Required Package/Class : exam
I created "\texlive.js\texlive\texmf-dist\tex\latex\exam\exam.cls"
Added this to
"\texlive.js\texlive\texmf-dist\ls-R"
./tex/latex/exam:
exam.cls
And Then \texlive.js\texlive.lst
/texmf-dist/tex/latex/exam/.
And
/texmf-dist/tex/latex/exam/exam.cls
I've recently found this project:
https://github.com/SwiftLaTeX/SwiftLaTeX
I've tested it with a few documents and it seems to work. It downloads the needed packages from the web, see available packages: https://www.ctan.org/. I haven't gone deeper into passing images to the engine but it should be possible. See the official demo: https://www.swiftlatex.com/#demo
Here is the official guide with the download link for the already compiled wasm files and with the js bindings: https://www.swiftlatex.com/#install

Getting data from Dark Sky API using handlebars, issue with routing

I have an issue regarding the script which helps me get the data from Dark Sky API.
I am developing the app in node.js using handlebars.
I am trying to get just some specific data from the forecast script, send it to app.js script which does the page routing and then to add it to forecast.hbs page.
Unfortunately, I am really stuck on this.
I have attached the photo with the code.
What I want to do is to get just some specific weather data, so, later on, I can use them one by one in the HTML code.
I have somehow to add them in the callback(right side), then in the middle, where the forecast routing is, then I think I need to replace forecastData with something else like..more variables and add those in the rendering part?
For example, I would like to take the icon variable, which contains the code that I need to add in the hbs page.
I want to do some binding by replacing Skycons.RAIN with Skycons.{{icon}}, where the icon should be in the middle file, like forecast: forecastData.
If I'm using {{forecast}}, I can show all the data that is on the right side, more exactly the variable weatherDetails, which contains the other variables.
How can I take advantage of binding and use it for the icon, for example?
Can somebody give advice, please?
I am really confused...
Kind regards, Gabriel
Why don't add an additional parameter to the callback function and then add it to the handlebars data object? Then you should have access to it in the template.
Btw are you using nodemon with docker? I'm also stuck with a problem, where nodemon isn't updating the container when the files are changed.

How to import rows from .xlsx and write them in specific places in .docx using Electron?

Intro
Hi, I was looking for answer in the whole Internet (in some way I kind of feel that I know every question in Stack Overflow), but the answers were never appropriate to what I'm looking for. I was trying to avoid posting question here, but situation forced me to do this.
Sorry if the answer is simpler than I think.
I'm in the middle of building my first app in Electron using JavaScript. I think that I should describe it in few words, so flam:ngoâ„¢ (which is projects name) should work like this:
User will upload two files:
file with tables (like XLSX or DOC)
file with data and blank spaces (which will be used as a template)
App will import from tables.
Now app should let user choose which rows he's interested in and where in uploaded file he wants them to be placed.
flam:ngo save document in PDF (or DOC).
Clue
Right now I need solutions just for myself and in little simpler form. For now I need flam:ngo just to work with one specify XLSX and with one DOC template, but I stuck. I know which rows in document I will always need, but I don't know what should I write to specify in JS's code that I need exactly this ones (like hey, app, pick only this one, this one and maybe this one) while JS is reading file and I don't know how to create new DOC (or PDF) file, how to write data in specified blank spaces and then at the end: how to save it in direction which I should choose for every time I'm using an app - everything in one, maybe two, processes.
Ending
Could you, please, help me: for now I have implemented file uploader which is importing file in XLSX and which is saving it as CSV, XML oraz HTML. What should I do to keep moving forward?
I really appreciate your help!
PS. For better explanation:
For now this should look like this:
1. "template.docx" is uploaded in the core
2. user uploads .xlsx
3. app reads tables and select rows chosen in code
4. app puts data from chosen rows in specify places
5. app saves file > new life of the app :)
Ok, so it's been a while and app has been already written by me. Maybe this will help someone in the future:
Solution
Packages that helps me with this issue was:
js-xlsx which converts my file to simple HTML file, where cells from my XLSX template file have always the same ID (which was important for me to work with document templates).
officegen which helps me write brand new document based on earlier prepared template.
Rest of it was just Vanilla JS.

Is there any way to comment in or better organize a bower.json file?

I have a very large project with numerous bower dependencies. In many cases it is unclear whether these dependencies are even still in use within the application or if the version specified was chosen for a reason. Ideally, I would like to be able to put a comment for each dependency to state for which part of the application it is required, so as functionality in the application is removed, we can also remove unnecessary packages from the bower_components. Something like:
// videojs plug-in for adding navigable waveforms; used by the video component
"videojs-wavesurfer": "^1.2.2"
Unfortunately, json doesn't support commenting, but are there any possible solutions for annotating or better organizing a bower.json file to make it more understandable?
You cannot put comments in a JSON file. JSON is for data and nothing else.
If you would like to document your dependencies, consider adding a section to your README file that contains all of the information relevant to dependencies.
The classic approach to commenting JSON files is to add fake entries, which hopefully will be ignored by the consumer, such as:
"video-wavesurfer-comment":
"videojs plug-in for adding navigable waveforms; used by the video component"
For longer comments, use arrays:
"video-wavesurfer-comment": [
"videojs plug-in for adding navigable waveforms; used by the video component",
"Remove this for the non-video version."
]
Of course, you'll have to put these somewhere where someone won't try to parse them. For instance, they could not go WITHIN "dependencies":.

Combine PHP file and page - Wordpress

I am just wrapping up a long term project I have done for a company, but I am really stuck at this point.
I have a cool little page here: http://hagen-etc.com/test/buy/
It is basically showing all their retailers in the right hand side div while you can narrow down the results with the different options on the left side (Javascript based).
Everything works just fine, but I have run into a problem. The thing is, the person I am developing the site for has absolutely zero knowledge about programming and website managment etc, and therefore I need a smart way for her to change it.
I have simplified the procedures several other places on the website using shortcodes with Visual Composer and Shortcoder-plugin.
The problem here is, The Javascript is in footer.php while the actual content is on a Page in the dashboard. How do I make a smart solution so she can easily manage this in a blink of an eye? You can take a look at the source code in the link above if you would like to.
Would love to get some help on this because I am having a hard time figuring out a solution. Maybe a plugin can even do this?
The different areas, countries, cities and retailers are written in HTML in the Page while reas, countries, cities and retailers are written in Javascript in the footer.php. I know I can move the Javascript over to the Page, but the problem is, she would still have to change both the Javascript and the HTML.
I would like it to work with Shortcodes in a structure like this:
[countryopen]
[areaopen]
[cityopen]
[retailer][retailer]
[cityclose]
[areaclose]
[countryclose]
How would I go about this? The HTML would be in the top of the file while the Javascript would be in the bottom. I cannot really change both things with just one shortcode. How would I do this or is there even a better solution?
So essentially you are trying to allow this person to manage locations? You can use Advanced Custom Fields for WordPress and/or custom posts types for WordPress.
I would use a combination. Create a new custom post type in your functions.php and then, after installing the ACF plugin, create Location, Area, City, and Retailer fields and assign them to the new post type.
Similarly, in the index "Page" that you are working in now, you can create a query to dump any of these Locations onto the page.
I hope this helps. Let me know if I missed the point here, the question is still a little unclear.
UPDATE: There are many great tutorials that will walk you through creating a custom post type in your WordPress theme. WPBeginner and Smashing Magazine do a really good job of bringing you through this step-by-step. It will be very helpful for you to know how to do this and to understand this as a basic part of WordPress's Model-View-Controller system, here you are creating new views for your users to interact with.
After creating your new custom post type, which will seem like any other post/page in the Edit view, you can use the ACF plugin to easily add new fields to this new custom post type:
In the second section called "Location" you can define what type of posts these fields should be appended to. You would make these inputs says:
Post Type is equal to [Your New Post Type]
Your new post type being "Locations" or "Retailers" or however you want to phrase that. Now, when you check out the Edit view of a new custom post type, you can see these new fields appended to the bottom. Lastly, you may want to remove any field that you wouldn't want your web manager adding information into like WordPress' native Description or Excerpt inputs. You can do this by adding a few lines to your functions.php after you have created the post type:
add_action('init', 'remove_editor_from_retailer');
function remove_editor_from_retailer() {
remove_post_type_support( 'retailer', 'editor' );
}
Granted that "Retailer" is the name of your custom post type.
You can't have a user updating data in a javascript file.
So what you need to do is split the data off from the functionality.
To do this, put a script tag in one of your Wordpress template files, and output the area, country etc. data there as a Javascript variable.
You can manage and fetch this data using any Wordpress method of your choice. Anything that allows the user to update data in the admin area which you can then output in your plugin will work. So a plugin, a shortcode on some specific post, etc. are possibilities.
Then, in your existing Javascript file, remove your hardcoded data and instead pull it from that variable.

Categories