I have a simple PHP application branded to one company and it contains a few pages. The php pages are then compiled to static HTML using a Gulp plugin and the HTML files are then deployed to a production server.
I'm now looking to create a variation of this compiled application with new branding. It will just involve changing some of the colours and logo. Ideally I want to use the same codebase so I'm not duplicating code and work effort but just using conditions to replace the logo and stylesheet for each company. Each application should compile in to separate folders to be deployed.
Does anyone have any suggestions on how I can achieve this? Handlebars JS or some other templating tool perhaps?
If the application is written in PHP, I recommend Twig.
Extensible, easy-to-use and powerful.
Can be installed with composer :)
I think you are looking for something like very simple pipeline. I would recommend you to just write some shell script (or modify existing php script) with arguments (logo path, output directory) to make existing engine produce different output to different directory.
ok, I edited the post, to show the idea.
I was thinking about something like the following:
<?php
$logo = $argv[1]; //take commandline arguments
$name = $argv[2];
$dir = $argv[3];
mkdir($dir);
$path = $dir.'/template.html';
$template = '<img src="'.$logo.'" alt="logo"><h1>This is '.$name.' site</h1>'; //here you could run your templating engine with some names and paths replaced with variables
file_put_contents($path, $template);
Then, you can run this proof of concept script from your commandline like so php createTemplates.php company1.jpg company1 company1 and you will get template.html with company1.jpg logo and company1 headline in company1 folder.
I have no idea how does your templating engine work or how advanced it is, but for the simple use (few html pages) it should be enough.
Related
If a directory on a webserver doesn't have any html files (e.g. index.html), then when you navigate to that url, typically you just see a list of the files in that directory (unless .htaccess was changed to prevent this). Is it possible to get a list of these files in javascript?
you can do it with a get_files function
var files;
function getFilesInFolder(folderServerRelativeUrl) {
var context = SP.ClientContext.get_current();
var web = context.get_web();
var folder = web.getFolderByServerRelativeUrl(folderServerRelativeUrl);
files = folder.get_files();
context.load(files);
context.executeQueryAsync(Function.createDelegate(this, this.OnSuccess), Function.createDelegate(this, this.OnFailure));
}
Any time you write code to display something on the web, you are using a server-side language. HTML is a server-side language, but has extremely limited programming capabilities - can't read the server file system, cannot loop, etc.
So, to do what you are asking you need a server-side language. Either PHP or node.js or Python etc. Almost all webhosts already include PHP, but you can now find some (a2, webhostpython) with the other two. There are TONS of tutorials online for doing what you want with PHP. Tons.
So, to be clear, if you want to code your server-side in javascript, you need to have node.js installed on that server. To use PHP, it's almost certainly already there.
PHP files are identical to HTML files, except they end in .php instead of .html, which allows them to process PHP code between the <?php and ?> tags. Generally, PHP files are either pure PHP-only, OR they are a mix of HTML and PHP, with the PHP code included on the page between these tags.
Here is a basic tutorial to give you an idea how it would work:
https://daveismyname.blog/creating-an-image-gallery-from-a-folder-of-images-automatically
What you can do is create an endpoint that would point out all the files that you need to display and make an API call to the endpoint using JS
I was trying to convince a fellow co-worker into using Mustache/Hogan in the front-end of a project and I proposed the following:
Having a templates.js file, which could roughly look like this:
var tpl_alert = '<div class="alert">{{msg}}</div>';
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>';
...
Then, we would include templates.js and use the corresponding tpl in the Mustache/Hogan.js rendering.
My proposal was turned down, since we're hardcoding html templates into js variables.
Is this really that bad? Which are other alternatives to this?
To answer your question, putting your templates in javascript variables inside a static JavaScript file makes it difficult to maintain your templates. You need to worry about string escaping whenever you want to make a simple change. And 1 syntax error will crash your app.
However, putting all your templates in a single JavaScript file is the fastest way to load your templates.
Your alternatives are:
Storing your templates in seperate files and generating the static template.js file as a prebuild step.
Loading your html template files async through AJAX into javascript variables.
Using a library like Require.js that will load your templates asynchronously as needed into variables.
My preferred way of doing this is to create a separate template file that can be loaded dynamically in development and baked into pure js for production.
Specifically I use eco templates (I wouldn't recommend them unless you're familiar with coffee script) and Stitch for node.js. Stitch supports custom engines tied to file extensions, so when it finds an eco file in my project directory it compiles it into a Javascript function. I can now include that function in any other part of my application using the stitch provided require function using the original path of the eco file. So if the template resided in src/views/listItem.eco I would run var listItemView = require('views/listItem'); to fetch it and use it like this
var html = listItemView({item: items[i]});
$someElement.html(html);
You could use require.js instead of stitch if course, or any other similar framework.
I use asp.net mvc & going to build javascript files at application startup depending on site configuration.
I am going to have some javascript file templates that will be populated with appropriate constants and put into /scripts folder.
Please, suggest me the best way to do that. I want to have something like:
application_startup()
{
string populatedFile = Html.RenderPartial("/scripts/script.template.js");
write populatedFile into /scripts folder...
}
Thank you in advance !
I'd look at putting the logic in ASHX handler rather than Global.asax, then reference the ASHX as a script reference in your Site Master.
With regards to the actual logic. I'd be pulling your templates using a reader and creating the final script with a String Builder.
If the configuration is not going to change that much, make sure you are caching your output.
This is a fairly simple problem, I'm just not sure exactly how to approach it.
A friend of mine has an open directory on his webserver, and he asked me to make a simple webpage for him which would just display all of the file names, rather than the dates/file sizes/etc. The page would also update when a new file is added into the directory.
So, I guess I'm just looking to be pointed in the right direction on this one. My first guess was just to throw a simple HTML/Javascript page together which would extract all of the file names from the directory with Javascript, then display them on the webpage while linking to the file. Or am I going able this all wrong?
Thanks,
aqzman
JavaScript is a client-side language and really has no way of enumerating files and directories on a web server, without the aid of a server-side script anyway. You need to look into server-side scripting languages such as Python, PHP, and ASP.NET (Windows Server only), to name a few.
These languages are processed on the server and make changes to (or even create from scratch) a page before it is sent to the client/browser.
You could use Apache's built-in directory listing feature. With javascript this can't really be done (exception: there's a pattern within the filenames that would let you send HEAD requests to see if files exist - see this site where I had to use this technique).
You can do this pretty easily with PHP -
$files = scandir($_GET['dir']);
foreach ($files as $file) {
if (is_dir($_GET['dir']))
echo ''.$file.'<br />';
else
echo ''.$file.'<br />';
}
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.