Render different asciidoc files on same webpage - javascript

I have a lot of .asciidoc files (~50). Basically, I want to create a website that can show the content of all these files on the webpage.
Till now, everything that I found basically converts the .asciidoc file into an individual .html file. This means I'll have ~50 .html files which I don't really want to do.
Is there anyway so that I can have a single webpage and somehow insert the contents of the .asciidoc file in the backend? Like PHP?

Sure, this can be done, but not by asciidoctor itself. Take a look at the OpenDevise landing page. You can see they're loading the files through the Asciidoctor API. You could do the same thing with shelling out or using the JavaScript port (asciidoctorjs). The main idea is to have something else generating a scaffold or template and then calling out to asciidoctor somehow to get the content.

Related

Using webpack to display content in the html file from the js file

I'm new to webpack and I would like to display some content to the html file. I am also using firestore to store some data that I would like to show.
I have tried multiple ways that would work in a normal JS file and when i write the script in a separate JS file they display in the browser.
Could anyone give me any advice on where to start with this I've also tried whats written on the webpack site but that also didnt work.

Javascript - read all filenames and output to html with hyperlink

I have a limited hosting server. I want to read the filetree (all files and folders) and create a hyperlink to them on a basic html page.
For clarity, I'm using Keybase, am publicly sharing files, but want to list them on an index.html page, not use their site's "filetree"
https://keybase.pub/example_user (keybase filetree)
https://example_user.keybase.pub (the index.html file)
The html file is in the root directory and I want to display all the (pdf) files in /subdir (and their sub-directories)
This isn't a "real" webserver. I'm looking for something easy and simple like a FOR loop on load within html
Thanks.
What you are trying to do is known as "screen scraping". If you do some googling on the keywords "javascript screen scraping" you will find lots of information and examples.
Basically, You fire off an AJAX request to retrieve the content of a page, parse that content to obtain the data your looking for, and then display that data in your page.

How to link javascript in html

I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...

Is it a good idea to pack all pages into JSON arrays besides index?

This question is a bit of an odd one, but simply refers to a Single Page Application POV - Where one page is loaded then other pages are loaded from click events, refreshing, and other events as such.
And recently I got the idea to simply pack all pages besides / (root directory) as JSON, so when pulling data from another page it can be decoded in JSON using JSON.parse(page) (JS) then put onto the page, and if there's any problem simply send a 404 message back as an example.
This was a new idea I got while building my SPA, and was curious as to if it was worth all the effort to setting up and managing.
Example from localhost/home
{
"html" : "<h1>This is the home page</h1>"
}
Example from localhost/
// add libraries like jQuery, js files
// use php to load the content div that the new data will be placed
// add stylesheets
// etc...
Which would be retrieved from JS using a GET request, then parsed, look in the JSON array for html then place it in the correct content box.

How to get/read other website file structure

I want to know how I can read other websites file structure.
For example if the website is : www.test.com, I want to retrieve how many files they have on their server and which ones are html and which is css. I don't want to edit them or anything just count.
example:
root folder > index.html , about.html (2 html files)
root folder > scripts > main.js (1 javascript)
The folder names may vary so it should search entire structure.
I have tried google but I get results that want's to access the actual file content that I do not want.
I am using javascript.
This can't really be done.
You don't know that a file exists on some other server unless someone links to it. I have a picture of a giraffe on my site, but unless I tell you where it is you won't be able to find it (or count it).
That said, if you are using Node.js, you can use something like the crawler library to visit every public page of a site and open every link, then count the amount of files you see.

Categories

Resources