html template without using php or rails ect - html

I am looking for a way to code html templates without using any "backend" languages like php or ruby/rails.
using JS could work but i have issues with my current javascript when i add nodes after the DOM is loaded.
the solution that would be ideal is if there is a preprocessor of some kind that i can compile into finished html.. something similar to SCSS but for html
just so i'm clear and i have enough content for stackoverflow..
i want partial.folders content to compile into index.html
partial.folder
menu.html
root.html
footer.html
|
|
V
index.html

Depends on "when" you want to parse the templates.
1) At runtime: you could try to use https://github.com/janl/mustache.js - javascript Logic-less templates
2) At build time: I would suggest using nodejs+Grunt (http://gruntjs.com/) + grunt-preprocess (grunt plugin)

I found an answer to my own question. a program called codekit worked exactly how i wanted it to. thanks for the help! http://incident57.com/codekit/

Related

Angular app, how to add html & css in the app component?

VScode error screenshotI generated a new component(bmi calc) in my angular app, then downloaded a html/css template of bmi calculator functionality and pasted the html and css content of the template into the bmicalc.component.html & bmicalc.component.css file in my app, but the app is not running?
This is my error(the image of my error)
As code given in your github files , below is working piece of code. I just updated your code.
You can check the updated code here on StackBlitz(Working) -
You can check demo here
Note : =I have just updated your code to make it work only as you got
those Uncaught error of compute function. Not sure about correct
calculation so you need to look on that part.
Just few suggestions
Add code snippet when you ask this type of question
Use appropriate names to variable, Avoid use i, ii, fv, kv type of variables.
.ts file is there to write presentation logic whatever you want to apply on the form.
Your code should be well-formatted. Clean html.
Avoid using inline css, Use .css file for it.

How to export Apiary Blueprint as PDF, stand-alone HTML or similar "deliverable"?

We need to export our Apiary Blueprint for task assignment purposes as a self containing "deliverable" like PDF or ZIP or similar. I'm aware of the feature request and the discussion below. Is it possible to "hack" something better than the poor html exporter? Maybe by injecting some css style into the page with chrome? Has somebody found a "good-enough" solution?
Ján Sáreník mentioned aglio, you can make it work locally by the following steps.
Save your API definition markdown (e.g. myfile.md)
Install aglio npm install aglio -g
Start aglio server aglio -i myfile.md -s
Open localhost:3000 and download the HTML file
Hack the HTML by commenting out the <div id="localFile" ...>...</div> warning
Hack the HTML by replacing http://localhost:3000/ with empty string everywhere
Aaand it's done.
You can use https://github.com/danielgtaylor/aglio to render API Blueprint into static HTML files which can be zipped (or maybe also PDF-exported, but I haven't tried).

How to parse a Razor template with partials from a custom folder?

I have two cshtml-files in the same subfolder of Views. One of the templates is meant to include the other template. I tried to accomplish that as follows:
Main template:
<html>
<head></head>
<body>
#Html.Partial("~/Views/Pdfs/Header");
</body>
</html>
The error I get is
Unable to compile template. The name 'Html' does not exist in current context.
What am I supposed to do additionally?
As commented by Erik there is no Html in RazorEngine (see the linked answer), however you can use #Include("mytemplate") instead.
If you want to be compatible with the #Html.Partial() syntax for some reason you can extend the RazorEngine syntax like this.
Basically what you want to do is provide your own class inheriting from TemplateBase<T> (or ITemplate to be exact) and then set it either via configuration or the #Inherit MyBaseClass<MyModel> syntax. In this case you could just call the Include method from your Partial method within the Html helper class.
Been annoyed by this for a long time. Wrote all the infrastructure classes to just get this working like you'd expect in MVC, without all the MVC burden:
var razor = RazorHelper.O;
var html = razor.RenderFromMvc(#"Views\RazorEngine\TestEmail.cshtml", vm);
https://github.com/b9chris/RazorEngineComplete

Include html pages with Google Closure

I'm working with Google Closure. I'm trying to include some html files in another one. Just like A.html import B.html and C.html, but actually, I don't get how to do that.
Can anyone could give some orientation please?
Thx in advance.
As far as I know you cant "include" html pages like that. The options you got is:
1: use ajax to fetch content
http://docs.closure-library.googlecode.com/git/closure_goog_net_xhrio.js.html
http://www.googleclosure.com/google-closure-ajax/
2: Google closure templates
https://developers.google.com/closure/templates/?csw=1
3: Use a serverside language like php to include your file.
http://www.php.net/manual/en/function.include-once.php
I really don't understand.
1) Have you HTML in JS and u don't know how to join it?
try goog.dom.appendChild(parent, child)
2) You don't know how to get it into JS?
You have to send it from server, or If I were in your shoes... use soy templates

Common Header / Footer with static HTML

Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.
There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.
JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here
Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.
The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>
You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.
you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.
The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.
HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.
You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.