How to embed html with references (js, css) in .md file? - javascript

I'm an absolute beginner working with Jekyll sites and have currently the following issue:
I want to embed a calendar into my index.md (start page). The index.md only contains the yaml frontmatter so far. The calendar consists of a html-file referencing various .js (script src) and .css (link href) and all the files are located in a folder "calendar".
I tried to embed the calendar with {%include calendar.html} and placed the file in the _includes folder. I also tried the include_reference but I haven't been successful with both options. The .js and .css files (referenced by the calendar.html) cannot be found. The path is wrong. Can anyone help me out?
Again: index.md with frontmatter is my starting page. The calendar.html is included in the _includes folder and the calendar.html references certain .js and .css which are located in a folder "calendar" (just below the main folder).
e.g. is referenced and full calendar.min.js is located in the calendar folder.

Related

How to host existing files in Docusarus?

Alongside Markdown files, I would like to host HTML files in Docusarus.
Also I want to make HTML file Searchable. If i reference the HTML in MD file. it's not searchable in the website.
Below is the folder structure of docs folder
- docs
-- folder1
--- test1.html
-- folder2
--- test2.html
-- folder3
--- test3.md
Could anyone help me with this?

Javascript not linking in pug

folder
-static
--images
-public
--js files
-views
--pug files
-css
-home.html
-other webpages
-app.js
base.pug is template where all files are included and later I had extended this for every page and included respective html files
home.pug is homepage pug template[pug template](https://i.stack.imgur.com/Xd41o.png)
I am using express and node js.
When I double click on home.html and open it then everything is fine but when I host it on localhost using node app.js then few images and slideshow do not come up.
When I double click on home.html and open it then everything is fine but when I host it on localhost using node app.js(in which I render pug files and in which I had included css, js and html files) then few images and slideshow do not come up. I guess that problem is with my pug file, most probably js files are not linking to it.app.js
The thing is that js file should be placed in static folder along with all images when I did that then with that path everything worked fine

AI2HTML - exporting images file inside created folder

I am struggling to understand how to export the generated images from this script to the folder where the html has been exported.
I have slightly edited the original script to get the output folder as the name of the .ai file, the html file is working fine and is placed inside this folder, but the images are exported outside this folder.
This is the edited script: https://js.do/code/403281
Thank you so much,

Adding Scripts to HTML files through JavaScript Electron

I'm trying to add scripts to HTML files dynamically using JavaScript (to save space - I've many HTML files each of which contains many scripts, so they would al be added simply by including one script file).
The question Append javascript to HTML fields using through javascript is not really what I was thinking about...
However, in the script file that adds scripts and other resources to the HTML file in question, the scripts do add the external files, but the scripts (those inserted dynamically) are not loaded.
Directory Structure
root
├ index.html
├ universal-scripts.js (adds scripts to .html files dynamically)
├ styling.css (included into .html files)
└ app-scripts
└ others.js (problem file)
universal-scripts.js
...
var others = document.createElement("script");
others.setAttribute("src", "app-scripts/others.js");
...
document.getElementsByTagName("head")[0].innerHTML = document.getElementsByTagName("head")[0].innerHTML + others.outerHTML;
The script is inserting the element but functions from others.js are not usable from within index.html.
Any help would be much appreciated. Thanks!
I'm using Electron if that means anything...
Probably the best way is to add the reference to the file in your package.js file since this is where all of the rest of your projects source file are referenced. Why load it latter when you can load it in your core.
Here is a Electron.js tutorial that talks about the package.js file.
Creating Your First Desktop App With HTML, JS and Electron]1
Here is a package.js interactive guide. package.js walk through

How to get the javascript file (JS) path which is stored in application bundle to html file which is there in document directory

I have one .js file named final.js which I copied as bundle resource I have a requirement like the html document which reads this js file should download at runtime and store it in documents directory. But the js file is not able to read by the html when I loaded it in webview, because of the path of .js file.
I tried with the solution like below, but not worked.
<script src ="./final.js"> </script>
And finally I tried to copy the hardcoded path of application bundle like below, now it worked. Finally I come to know that the path is not proper.
> <script src ="/Users/unknownUser/Library/Application Support/iPhone
> Simulator/7.0/Applications/025EF3B6-F2E6-4162-8921-839D7D98FF58/HTMLGetdataTestApp.app/final.js">
> </script>`
Can any one tell me that how a html file which is stored in documents directory can read a .js file which is stored in main bundle with the correct path instead of hardcoded like above.
The simple solution will be copying the final.js file to documents directory.
Copy the js file from bundle to the document directory (where the html page is located) and set the path as:
<script src ="final.js"> </script>

Categories

Resources