I'm trying to embed a local asciinema session in html. here is my directory layout:
$ tree
.
├── asciinema
│ └── demo.cast
├── css
│ └── asciinema-player.css
├── index.html
├── js
│ └── asciinema-player.js
└── makefile
And here is my html file, just like it says in here:
$ cat index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/asciinema-player.css" />
</head>
<body>
ABCDE
<asciinema-player src="/asciinema/demo.cast"></asciinema-player>
<script src="/js/asciinema-player.js"></script>
</body>
</html>
When I drag-and-drop this file to Mozilla, it only shows ABCDE
The main problem is that you're trying to run a script that uses XMLHttpRequest as a local HTML file in your browser. If you open your browser console, you'll see that it gives an error trying to find the files in all your src/href tags. You could fix that by removing the starting / from every src/href and the player would load, but then you'd run into problems with CORS when the script tries to load your cast file.
The solution would be to use an HTTP server to host your cast files, so you could reference them directly by their full server path, like http://localhost:3000/asciinema/demo.cast. Or you could just use an external URL for a cast file, providing the external website has no CORS enabled. Example:
<asciinema-player src="https://asciinema.org/a/28307.cast"></asciinema-player>
Now which HTTP server you choose is on you, there are many many really simple servers made in every programming language possible. If you're familiar with Node/JavaScript, then http-server would do. If you're familiar with Python then simplehttpserver would also do. Try whichever one you're comfortable with.
Another "solution" is to disable CORS in your browser. But then you're just risking yourself and that's also just a cheap hack.
TL;DR: you can't load local cast files within local HTML files because of CORS. You need to host your casts on a local or external HTTP server.
There is a workaround, though, if you really want to have it all local on your PC. And that is by embedding the asciicast file into the HTML page by inlining it into the src attribute. You can do that by converting the demo.cast file, which is a JSON file, into a single Base64 encoded line.
Convert the demo.cast file with base64 -w 0 demo.cast. You will need to capture that output somehow so you can then paste it into the HTML file. For example pipe it into a text file, or directly append it at the end of the HTML file and then work the rest of the HTML around it.
Then write your asciinema-player line like so:
<asciinema-player src="data:application/json;base64,BASE_64_ENCODED_STRING_HERE" />
For example:
<asciinema-player src="data:application/json;base64,eyJ2ZXJzaW9uIjogMiwgIndpZHRoIjogMTQwL" />
Related
tl;dr
My understanding is that php -S localhost:1234 -t some-dir serves the page some-dir/index.html at localhost:1234, expecting that CSS and JavaScript (and other files) that the page requires are in some-dir/., not in some-dir/../..
How can I start a server that serves some-dir/index.html and looks for the required files in some-dir/../..
Long version
I have a directory structure like this:
index.html
css
├── some.css
├── style.css
└── sheets.css
docs
├── index.html
└── a lot of other stuff.html
js
├── some.js
├── javascript.js
└── files.js
And obviously anything referred to from within the main index.html is referred via a path containing no ../.
On the other hand, docs/index.html is automatically generated by KSS, a library for documenting CSS modules, and given it position in the tree, when it refers to the very same files as the main index.html, it does so by prepending ../ to the paths. For instance, if the main index.html has
<script type="text/javascript" src="js/some-script.js"></script>
docs/index.html has
<script src="../js/some-script.js"></script>
Now, for the purpose of debugging JavaScript code launched upon user interactions with docs/index.html, I start the server like this
php -S localhost:1234 -t docs
because docs is the directory where the index.html is, that I want the server to present; but the problem is that the server looks for the files (referenced by the HTML) in the wrong directory, kind of like it strips off ../, so I get errors like the following:
GET http://localhost:1234/css/main.css net::ERR_ABORTED 404 (Not Found) section-containers.html:12
GET http://localhost:1234/js/swipeable-container.js net::ERR_ABORTED 404 (Not Found) section-containers.html:412
How can I serve an index.html which uses scripts and stylesheets (are they all together called assets?) from a parent directory?
I got an EAR file, I try to deploy and It deploys fine, without error. The problem is the following:
All the ccs files, images, files, etc are using absolute paths in the HTML files, (the HTML files are being generated through an external program so change to relative paths is not an option), so the styles are not being loaded, the links to other pages don't work, etc.
An example to clarity:
I have the ear deployed in "localhost:8080/app, the index.html file loads but inside the file, I try to use the link to the page2.html, and the path is localhost:8080/page2.html instead "localhost:8080/app/page2.html".
The browser says "the page cannot be loaded"
How can I fix this without change the paths to relative? I have the context root of application.xml with "app" and the welcome file of web.xml inside the war file with "index.html".
the structure is the following:
file.ear
meta-inf
file.war
web-inf
index.html
css folder
pageX.html
I beg for help.
Thanks in advance.
First you need to know understand, how file system works in web.
<link rel="stylesheet" href="slick.css"> // file present in same folder
<link rel="stylesheet" href="css/slick-theme.css"> // file present in css folder of current folder
<link rel="stylesheet" href="/css/slick-theme.css"> // file present in the css folder at the root directory of the current web
<link rel="stylesheet" href="../slick-theme.css"> // file present at one level up the current folder
Since all your files path starts with /, server tries to find it relative to the root directory.
All you need is to deploy your app as root app without any context-root.
This will require 2 things:
1)
<context-root>/</context-root>
2) configuration change at server level, remove default content mapping, try to find
<location name="/" handler="welcome-content"/>
(may vary in your jboss version) and comment it.
Attaching screenshot of your working app:
PS: Delete your EAR from repo or make it private
Deploy your app as ROOT.war
You might also need to tweak your server config to allow this if you keep seeing the server welcome page
If you can't bind the app to / and you can't change the file paths referenced in the app, then the only option would be to use a proxy infront of the sever, something like nginx, so you make the requests to the proxy and it passes the request on to http://appserver/app/
using Localhost, my HTML/CSS/JQuery stack website works perfectly fine, however, when uploading to a server, things break. Specifically, the src paths from within the JavaScript files. After being uploaded, the index HTML can find the appropriate JS files through the script tags. However, from things go wrong from within those JS files that are linked...
Keeping things big picture, I have JS files that use paths to certain imgs, or other files. And those JS files are stored from within folders. So you have
.
├── index.html
|
├── js
│ └── components
│ └── functions.js
└── img
└── circle.jpg
In index.html, functions.js is called. From within functions.js I have a path to a circle.jpg for example. On localhost the path is "../../img/circle.jpg" because it treats components folder as the current working directory (cwd) "you are in components folder working in the functions.js file, now go out and into img folder"
However, on the server, cwd is the root folder. I guess that is because function.js is called from index.html and because index.html is in the root so it says "to get to circle.jpg you have to go "img/circle.jpg"
WHY? This doesn't make sense, to have it work on the server I now have to change all my file paths from within the JS files. This apparently isn't an issue on the src paths in the HTML, because it recognizes the tags and runs the Javascript. It breaks when trying to find the imgs based on the paths you give them. And it can't find the images in the JS based on those paths because of the above reasons. Instead of changing all the paths in the javascript how can I fix the imminent issue of the server treating the paths differently than the local version?
Add a <base href=""> tag in the head section of index.html
<head>
<base href="/">
<!-- other head items -->
</head>
If your index.html is the root path of the domain (like http://someurl.com/index.html), above should work. Or if the index.html is in a subfolder, provide the subfolder path as the href value. like,
<base href="/subfolder/">
I've installed Jetty using homebrew on osx. Jetty is in the usual folder:
/usr/local/Cellar/jetty/9.4.5.v20170502
However, we are not going to use this for anything related to Java. It's just our requirement that the web server we will have in production is Websphere. Our code is pure html and some JS. Only static files. All the tutorials on the web require modifying XML files and setting up complex folder structures for java apps. We do not need any of this. All we want is to put html/js files in some specific place.
Is there an easy way to do this? Do we have to create a start.jar for this simple task? How do we create a WAR package via Maven or something else? Would appreciate any simple pointer to getting this dev environment set up. Thank you!
It seems you might be overthinking this a bit. start.jar is merely the JAR file that starts up the sever. You can easily host static content out of Jetty. I am unsure of your specific requirements, but for the sake of an example, I will just assume you have a simple webapp with a page and some resources. Your implementation might look like this.
Inside the Jetty 9.4.5.v20170502 directory - Also called Jetty_Home (you can learn about Jetty_Home vs Jetty_Base here), you'll find the following directories:
bin demo-base etc lib logs modules resources webapps
These are the standard of truth and should not be modified (though demo-base can be removed entirely if desired). You will want to create your own Jetty_Base directory to host your content out of, let's call it stackoverflow for this example. It is worth noting that a Jetty_Base can exist anywhere, I am just keeping it here for ease of this example.
Inside the stackoverflow directory you'll find nothing to start with, so we will need to enable some modules to populate our Jetty_Base. Now, I have no idea what all you plan to do with this webserver, so I will keep it minimal - enough to host the content. From inside this directory run:
> java -jar ../start.jar --create-startd
MKDIR : ${jetty.base}/start.d
INFO : Base directory was modified
This will create a start.d directory for all of our module files to live in, which makes modifying and configuring things a breeze (though for the sake of this example everything will be left default). Now we need to add the modules which will enable the functionality on the server. You can view a whole list of available modules by running:
> java -jar ../start.jar --list-modules
I am not going to paste the whole list here but instead enable the following:
> java -jar ../start.jar --add-to-start=server,client,deploy,http,webapp,jsp
INFO : webapp initialized in ${jetty.base}/start.d/webapp.ini
INFO : server initialized in ${jetty.base}/start.d/server.ini
INFO : security transitively enabled
INFO : apache-jsp transitively enabled
INFO : servlet transitively enabled
INFO : jsp initialized in ${jetty.base}/start.d/jsp.ini
INFO : jndi transitively enabled
INFO : client initialized in ${jetty.base}/start.d/client.ini
INFO : http initialized in ${jetty.base}/start.d/http.ini
INFO : annotations transitively enabled
INFO : plus transitively enabled
INFO : deploy initialized in ${jetty.base}/start.d/deploy.ini
MKDIR : ${jetty.base}/webapps
INFO : Base directory was modified
This will enable all the modules I defined (server,client,deploy,http,webapp,jsp) as well as any dependencies required for them to operate and any required folders (such as webapps).
Now, I created a very small webapp named example. I've gone ahead and moved it into the webapps directory inside our stackoverflow Jetty_Base:
> tree
.
├── start.d
│ ├── client.ini
│ ├── deploy.ini
│ ├── http.ini
│ ├── jsp.ini
│ ├── server.ini
│ └── webapp.ini
└── webapps
├── example
│ ├── images
│ │ ├── jetty-header.jpg
│ │ └── webtide_logo.jpg
│ ├── index.html
│ └── jetty.css
└── example.xml
I have a context xml file I created for this webapp named example.xml, which is only serving static content, and it is very simple:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE Configure PUBLIC "-//Jetty//Configure//EN" "http://www.eclipse.org/jetty/configure_9_3.dtd">
<Configure id="exampleApp" class="org.eclipse.jetty.webapp.WebAppContext">
<Set name="contextPath">/example</Set>
<Set name="war"><Property name="jetty.webapps" default="."/>/example</Set>
</Configure>
This configures the webapp so that when I run the server I can navigate to, in this case, localhost:8080/example and see my content. Now all I have to do is run my server. From inside the stackoverflow directory:
java -jar ../start.jar
2017-06-08 10:36:32.300:INFO::main: Logging initialized #427ms to org.eclipse.jetty.util.log.StdErrLog
2017-06-08 10:36:32.477:INFO:oejs.Server:main: jetty-9.4.5.v20170502
2017-06-08 10:36:32.494:INFO:oejdp.ScanningAppProvider:main: Deployment monitor [file:///Users/example/installs/repository/jetty-distribution-9.4.5.v20170502/stackoverflow/webapps/] at interval 1
2017-06-08 10:36:32.633:INFO:oeja.AnnotationConfiguration:main: Scanning elapsed time=26ms
2017-06-08 10:36:32.668:INFO:oejs.session:main: DefaultSessionIdManager workerName=node0
2017-06-08 10:36:32.668:INFO:oejs.session:main: No SessionScavenger set, using defaults
2017-06-08 10:36:32.669:INFO:oejs.session:main: Scavenging every 600000ms
2017-06-08 10:36:32.692:INFO:oejsh.ContextHandler:main: Started o.e.j.w.WebAppContext#6e06451e{/example,file:///Users/example/installs/repository/jetty-distribution-9.4.5.v20170502/stackoverflow/webapps/example/,AVAILABLE}{/example}
2017-06-08 10:36:32.713:INFO:oejs.AbstractConnector:main: Started ServerConnector#21a947fe{HTTP/1.1,[http/1.1]}{0.0.0.0:8080}
2017-06-08 10:36:32.714:INFO:oejs.Server:main: Started #840ms
And now you have a server up and running and content being served. I hope this helps. It can seem overwhelming at first, but it isn't so bad once your get your hands dirty. I recommend reading up more at the official documentation.
I am trying to reference a file located in the parent folder using d3.csv and I am not able to find the correct syntax.
My folder structure is as follows:
root
└── js
├── data.csv
└── myGraph.js
Inside the js folder I have myGraph.js. In this file I have the following piece of code:
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
If I place my data.csv inside the js folder everything works fine. However, if I move the data.csv file up in the root folder
root
├── data.csv
└── js
└── myGraph.js
and change the code to this then it stops working:
d3.csv("/../data.csv", function(error, data)
I have also tried:
d3.csv("../data.csv", function(error, data)
Does anyone know what I am doing wrong and what the correct syntax is? Many thanks.
Robert - There are a couple of things to work through to get this to work:
1) Due to browser security models, you cannot directly reference/load files on your local machine from the browser by directly specifying either an absolute or relative path to files in your local directories. You have to use a local webserver to serve up your files and make them accessible to the browser (or you upload them somewhere where you have a URL which you can specify in the d3.csv call... but that would be tedious).
2) Usually, you can run basic HTTP servers in the directory that contains your .js and .html files. For example, if you have Python 3 installed system wide, you can start an HTTP server in a directory from the commandline using python -m http.server. Then you can access your site at http://localhost:8000 Unfortunately, this basic server only serves files within the directory it is launched in and doesn't allow for relative path references to other files outside the directory it was launched in. To achieve this, you would need to run a more capable/flexible local webserver that can be setup to allow relative path based referencing of files across a bunch of folders.
It is a bit tedious, but it makes sense why browsers are designed to not allow direct access to local files.