Grunt module to inject HTML templates - html

Recently started using Grunt as a build tool for a web app I'm hobbyist developing. I have a series of HTML files (to be used as templates), in a single folder, that I'd like injected at a particular point in the main HTML file.
Ideally, I could also wrap each file in a tag, but having to manually include this in the template files themselves is acceptable.
Is there an existing Grunt module to perform this?
EDIT: I may have worded my problem poorly before. Essentially, I have a single HTML file where the app will run (Single page app, business simulation game). In a separate folder, I have a series of HTML templates. Each of these template represents a dialog, or custom info page, something of that nature. As the app is developed, more and more templates will be in this folder.
Rather than manually including each one in my page, I'd like a way to automate injecting them that I can manage through Grunt.

I may be late to answer this question, but for anyone that end up here, I found this grunt-plugins, maybe they help you too:
grunt-replace.
grunt-html-build.
grunt-processhtml.

Related

How to embed Go HTML templates into code?

I have a set of templates as files, like base.html, login.html, profile.html, header.html and so on. They are structured in folders.
It's fine to have them as separate files during development but when I deploy the app, I'd like to have them all embedded as strings or parsed and compiled templates ready to use from the code as usual.
How should I better make these templates as Go code? So that I don't have to have a templates folder in production, but everything in the single executable file?
With Go 1.16 there would be official "embed" package and the following would be possible (is possible if you read this after February 2021):
//go:embed "mytemplate.tmpl"
var myTemplate string
This code embeds mytemplate.html at compile time and it becomes available as a string (or as []byte or as a FileSystem, if you wish). No 3rd-party tools or libraries needed.
The most simple solution is to embed templates in string literal inside Go source code.
There is a tool that can help, see go-bindata.
I used go generate in some of previous projects for this type of operation, see blog post on go generate command for introduction.
As of the Go 1.16 release, there is the //go:embed comment directive.
This allows you to directly embed files in your binary.
Link for draft design of the go:embed comment directive
Link for the Github issue for go embed with some updates
In addition to go-bindata which was already mentioned, there is go-bindata-assetfs which you can use to serve static files from a webserver. It's good for Javascript, CSS, etc.

How do I configure a Web Application project for working with html pages without .Net code?

We have a few html pages in one of our solutions that are meant to be extremely simple, client side only, pure html+javascript pages that access our web api. The api itself is in a web application project in the same solution.
We are now using a web site project to contain those files, but it is getting harder and harder to manage that project, since it's information is placed on the solution, and most of it's aspects cannot be controlled like they can on a msbuild project file.
I'd like to migrate those html files to a web application project, but I'm struggling to make it as basic as possible. For instance, I do not want to generate any dlls on the project. It should be in the solution just to provide access to the files and to enable us to control what goes to the _PublishedWebsites folder on the build by setting the build action on the files. We need this because there are some miscellaneous files in the project that should not be published.
I tried creating an empty web application and removing most things from it, by editing the csproj file. I managed to delete all references and the whole Properties special folder (along with the AssemblyInfo.cs file), but when I run the build command, I still see a dll created along with the obj and bin folders. Then, I tried faking the build target on the csproj file, like this:
<Target Name="Build" />
Now when the project is built, no dll/pdb is created, but the obj and bin folders are still there. Next, I tried setting the outputpath property to the current directory, like this:
<OutputPath>.</OutputPath>
But even then, the obj folder is still created.
EDIT:
I just found another common msbuild property that controls where the files inside the obj folder are placed. After placing this in my csproj file:
<IntermediateOutputPath>.</IntermediateOutputPath>
I now get no folders generated on build, which is nice.
There is a small problem now though (and I'm not sure how and where exactly this process happens) when I open the solution or reload the project in Visual Studio. Even though the project is not being built at this time, some files are still generated:
I feel the current approach is enough for my requirements, yet I'd really like to know if there is a more elegant way to achieve that. Thus, the question holds: Is there a way to make the web application project work as if there was no code file in it, effectively disabling output generation (bin and obj folders, and the dll/xml/pdb outputs)?

SquareSpace how to view local template?

I am currently developing a customized template of SquareSpace and I am not sure how to view the changes i have done locally? Also are there any resources out there to help me alter the templates, the documentation on the site isnt great?
Being able to develop and then display rendered squarespace (SS) templates in a local development environment (or "offline") seems to be an oft requested feature.
It's not straightforward so far as I can tell. To quote
The short answer is no. There is not currently a way to develop locally.
However, once we get site data exports working it should be a simple matter to setup a lightweight node js script to get local development running.
(source), similar answers
According to the SS docs, the templating engine is JSON Template, the styling is done by LESS and all of the data for a website is stored as JSON. The data for any page of an SS website can be viewed by appending ?format=json-pretty to the URL of the page (or &format=json-pretty if the URL already has a query string appended to it).
Here's an example of how to use the javascript version of JSON Template to render a template (view its source).
So it should be possible to set-up a local devenv. The solution would have to combine the use of the aforementioned components along with a way to combine a set of templates for any given page (e.g. combine sites.region and collections/blog.list for a blog index page). You could probably even hack together an html page along the lines of the aforementioned JSON Template example without the ability to combine templates if you just wanted to develop within a single template.

Publish a new post on Octopress from another computer

I am currently exploring Octopress. One question popped up during the course of my work - is there an easy way to publish a post from a random computer/device. I mean - if I do this via rake new_post['title'] I must have the whole thing set up on the machine I am doing it from - Ruby, gems etc.. Is there an easier way - like create a markdown document and than just send it to the Github repository?
I think there is no way to do that.
Since octopress is based on Jekyll, every page is rendered as follows:
Render Liquid
Convert if a converter exists for that extname(e.g. .markdown)
Render layout(s) recursively.
That is to say, for such a static website, it's unable to show a markdown document directly.
On the other hand, if what we send to repo is not a markdown file which must be converted to html to be showed, but a html directly, it's also not possible to make the site work normally.
Since not only the post page itself should be generated, but also many related parts such as index page, categories and so on.
In one word, octopress is static, we need generation before deployment.
Reference:Allow markdown to not be compiled to html

What is the best way to add a Dart hello world into my existing Node.js website?

I have been reading tutorials and guides concerning this but have not found a straight forward answer to this.
I currently have an existing website running on a node.js platform, locally on my computer.
Goal: Now I want to try and write a simple hello world in Dart, export it to plain JavaScript and see it work in my existing website.
Reading the documents, I read that I should create a new "Web Application" and to create some sample code up and running, I check the "Generate sample content" box.
And my project is now created in Dart Editor:
I can run the sample in Dartium, see it work, etc.
But the problem is that I have now a .html file in the Dart-project, while I have a real .html file for my existing node website in a totally different path. I don't want that. I want to try and use the existing .html instead, since.. thats my real website.
But when trying to create a new Dartium launcher, I can only refer to .html files within my Dart-project:
So my big question is; How do actually start using Dart with my existing developed website?
How do I create that bridge?
On the second image above in your original question, there is an option just below the HTML file, called URL - is this what you're looking for? You can set that to any arbitrary URL.
You'd also need to copy the helloworld.dart file into your node.js server path, and copy the bits inside the <body> tag into your existing HTML page. You'll also need to copy the packages\browser\dart.js file somewhere to your node.js server, too.
If you wanted to run the JS version, you'd also need to use the editor menu option to Generate JavaScript and copy the .js files into your node.js server path.
The script tag that refers to dart.js automatically detects if the browser supports Dart natively, and will either load the .dart version of your app, or the .dart.js version of your app (from the same folder location).
So what you're likely after is something like:
c:/nodejs_server_root
/existingIndex.html // containing the two script tags from helloworld.html
// and other tags referred to in helloworld.dart
/helloworld.dart
/dart.js
/helloworld.dart.js
And in the "URL" path in the launch configuration, you'd put something like http://localhost:<port>/existingIndex.html
https://pub.dartlang.org/packages/dev_compiler can compile Dart to Node.js modules with the --modules=node option.
See also https://github.com/dart-lang/dev_compiler/issues/291#issuecomment-176687849