Include standalone HTML page in sphinx document - html

For most of my project's documentation I prefer a standard sphinx layout. However for the landing page I would prefer to use custom HTML/CSS/JS without any of the layout, TOC, or sidebars of the normal sphinx site. Is there a way to include a raw HTML standalone page in a sphinx-generated website in a way that completely disregards the normal layout of the rest of the site?
As a counter example I know that I can include raw HTML bits into a page using the following (see also this question)
.. raw:: html
:file: myfile-html
However this just embeds a file within the normal layout. I would like to have a completely standalone HTML page.

I just ran into this problem myself, and the way I solved it was to simply include the html file in my source/_static folder, then refer to it with a relative link.
So if source/_static/my_standalone.htm is the path where I have my non-generated HTML file, and the .rst file where I want to type my link is at source/otherfolder/index.rst, I write it like this in my rst:
Link to my non-Sphinx HTML file
===============================
To get to my standalone, non-generated HTML file,
just `click here <../_static/my_standalone.html>`_ now!

Related

How to load different parts of a web-page from different html files

I am making a local website where I have a number of pages with a lot of common code for header, navigation bar and footer.
I was wondering if there was a way I could use to store the header, footer and other such codes as independent html files, and then simply link them in the code for the new page.
You can use server-side includes for using an HTML file into another one. For that, you'll have to make a few changes in your server configuration as well. I'll show you an example of Apache.
Change configuration as mentioned in https://www.linuxtopia.org/HowToGuides/apache_ssi.html
Include the below code in your html file and replace "included.html" with your section html filename
<!--#include file="included.html" -->
Check more on : https://en.wikipedia.org/wiki/Server_Side_Includes

Can I bundle partial HTML and linked CSS into one file using node.js

I work on a project where I only have access to the text editor in CMS, so I create HTML files on local and copy the piece of HTML(content area), CSS and scripts to the CMS editor, is there a way I can use maybe node.js and set up something that can build a file with merged CSS and HTML(content are only) every time I make a change to CSS or HTML.
grunt-processhtml was the answer, I was able to combine CSS, chunk of HTML and JS into one file using this.

Is there a way to export a page with CSS/images/etc using relative paths?

I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.

Masterpage concept for plain HTML

I got a realtive big project for what I have many plain HTML pages. All the pages have the same template, but when I change one value in the template I have to change all the other pages manually.
Is there a way to do it like less for CSS or CoffeeScript for JS?
Lg Knerd
If all you have are plain HTML pages you could use SSI although it is a bit dated and youll need to be running this on a web server like Apache.
http://en.wikipedia.org/wiki/Server_Side_Includes
Personally I would use php so I could just include the files with the php include function

Inserting an html page into a block in drupal 7

I have an HTML file I wish to insert into a block in Drupal-7. My problem is that this file accesses JavaScript scripts and images on a folder outside of drupal, how can I make this work?
Thanks
As far as I know, drupal html pages can access external javascript and image files with no problems. If you turn the URLs in the HTML document into absolute paths, it should just work. Make sure you select "full HTML" as the format for the page.