<div dir="ltr">Hi,<div><br></div><div>For what it's worth, we recently converted the yt website into a generated static site. It was based on boostrap before, but we upgraded it. Repository is here:</div><div><br></div><div><a href="https://bitbucket.org/yt_analysis/website">https://bitbucket.org/yt_analysis/website</a><br></div><div><br></div><div>It's set up to auto-build and deploy. The auto-generation is used to list contributors, gallery, etc, and it uses JInja2 for templating. Jinja2 is required for Jupyter Notebooks, so we didn't see it as a problem to mandate it for viewing locally.</div><div><br></div><div>-Matt</div></div><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Sep 20, 2016 at 10:37 AM, Frank Loeffler <span dir="ltr"><<a href="mailto:knarf@cct.lsu.edu" target="_blank">knarf@cct.lsu.edu</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Hi,<br>
<br>
Our website needs an update. This can usually mean two things, and in our case it means both: content update/refresh and/or web technology update.<br>
<br>
This email and discussion should only be about the latter: which web technology to use. This email also got quite long. If you don't feel like reading through all this, please at least skip to the last paragraph and read that.<br>
<br>
<br>
What do we have now?<br>
<br>
Status quo is hand-written html with usage of php on every site, but mostly only for includes. There are exceptions, but there are only a few, and they can always be treated special.<br>
<br>
Why should we change the current setup?<br>
<br>
1) The usage of php makes it necessary to use a local web server to view the pages before committing. While this isn't usually a big problem, because installing a small php-capable webserver is easy, it is a hurdle we rather shouldn't have when we want people to contribute to the pages.<br>
<br>
2) The web layout doesn't look particularly nice on tablets, or even phones. While that was fine when the site was created, this should be addressed nowadays.<br>
<br>
What could we do instead?<br>
<br>
There might be more than these two issues (please speak up if you have more), but in the following, I will go only go into these two;<br>
separately because they don't really depend on each other in any way.<br>
<br>
1) php<br>
We use php mainly to include common snippets, like headers and/or footers. php does this server-side, but because this requires a server to view the pages, we would have to use something else. There are only two possibilities. Either we do includes client-side, or we do them before the server sends out the pages: developer-side.<br>
<br>
Client-side the only available option is java-script, as that is the only 'active' component that is widely available client-side.<br>
<br>
Developer-side would mean that every web-developer would need to process includes after each change to the web pages, and would hand the result over to the web server. This can be automated, such that after each change to the repository a script (on the webserver) runs this step and creates the then static web pages. Requiring compilation on the developer-side would mean to require that every developer would need to install the tools needed for this, a situation we tried to avoid in the first place (local webserver). It would also mean to commit generated files into the web-repository, which in general is a bad idea. On the other hand, automating this step on the server would mean that the web sites couldn't be viewed locally again without installing the necessary tools.<br>
<br>
I would welcome something else than javascript that would work client-side, so we wouldn't depend on it being enabled. However, I am not aware of anything in that direction, so I see it as the best of the alternatives that we have.<br>
<br>
2) layout<br>
The problem here is that it is difficult to create pages that look good both on large (desktop) and small screens (phones), especially if you think about plain html pages. The "usual" (as in often-used) solution is to change the layout of the page slightly depending on the size of the screen. Html doesn't allow for this, so again we arrive at javascript. There are probably tons of frameworks that implement common elements for so-called "responsive" web pages. Don't hesitate to throw in others, but I'll go on show-casing one I did play with.<br>
<br>
That one is called "Bootstrap". I am not saying it is the best, but it is one that seems to be widely used, open source, actively developed, and has tons of documentation. So I went ahead and used it to create a (not quite mock-up anymore) page for Chemora: <a href="https://chemoracode.cct.lsu.edu/" rel="noreferrer" target="_blank">https://chemoracode.cct.lsu.ed<wbr>u/</a><br>
Note that this isn't mean to be a final "product", but it shows the basic feature of a menu. That menu is a simple top-navigation bar if inside a window that is wide enough to show it. If the windows size gets too small (you can try that yourself by just resizing your desktop window), this bar gets replaced by a pop-up menu. Feel free to look at the source code. You won't find a lot of scripting inside the actual pages. Most of that is hidden in files that are included, and most of that is inside the bootstrap library itself (that you don't really need to look at at all).<br>
<br>
How to get involved?<br>
<br>
I will have a student at LSU go through the pages and "improve" them, creating a "preview" first for everyone to look at. However, apart from a more "modern" page, one prime objective is to make it really, really easy to edit those pages, for every developer. Please share your opinion about how to edit/compose our web pages. How would *you* like to edit and view them?<span class="HOEnZb"><font color="#888888"><br>
<br>
Frank<br>
<br>
</font></span><br>______________________________<wbr>_________________<br>
Users mailing list<br>
<a href="mailto:Users@einsteintoolkit.org">Users@einsteintoolkit.org</a><br>
<a href="http://lists.einsteintoolkit.org/mailman/listinfo/users" rel="noreferrer" target="_blank">http://lists.einsteintoolkit.<wbr>org/mailman/listinfo/users</a><br>
<br></blockquote></div><br></div>