Comments (10)
b) Dynamic generation - something like what https://github.com/mukyu/NeaterPage has - config.js file & adding elements to DOM in runtime.
I think this is nicer, because doesn't require user to "recompile" page. But it would require some code rewriting.
I would prefer this method. Recompiling the site would seem to require python. While most linux distributions are shipped with python out of the box, windows is not and would require manual installation. Its not difficult but inconvenient. Sudocracker seems to have done something along those lines in his fork
I also plan on making script which would automatically download sites' favicons (and optionally turn them gray using ImageMagick). I don't see a way to do that dynamically, so it would also require recompiling.
I'm not sure this would deliver acceptable results as the search icons aren't simply turned gray. The background is turned gray while the font is white. If we take the github favicon as an example, the now transparent part would have to be gray while the now black part would be white.
It would probably be easier to provide a default search icon for cases where a specific icon hasn't been made yet.
Also introduction of light theme doubled most of the files. I think it would be nice to also genericize styles, so users could painlessly change colors and mascots.
I plan on separating color settings into different css files to reduce redundancy. This would result in the following files:
- general.css
- dark.css
- light.css
Mascots remain a problem. Originally I had them defined in the stylesheet. Javascript would read the stylesheet and select a random mascot class. Unfortunately chromes javascript can't read stylesheets if the protocol is file://
. Thats why I had to abandon this approach.
from homepage.
Ok, so here's a proof-of-concept of dynamic generation:
https://github.com/Xender/homepage/tree/MESS-SUBJECT-TO-REBASE-dynamic-templating-poc
Code is dirty. Styles are borked, because I forgot to rebase {camelCase to snake_case_prefix_ for replaceable classes} patch. But it works.
Will clean it up the day after tomorrow. ^ ^
from homepage.
Ok, dynamic generation done properly.
https://github.com/Xender/homepage/tree/OLD/dynamic-templating
I've used Mustache.js after all, because I didn't find any feasible way to directly build DOM.
Mustache templates embedded in HTML as <script>
with custom MIME.
Nuked style titles - as far as I understand, general.css should be persistent anyway - see https://developer.mozilla.org/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets.
Decided to include theme style from script (by adding <link>
to DOM), so it can also be persistent (only one will be loaded). I see this conflicts with approach you've taken in your master - d3aab1a
I think that's it for dynamic generation, now I'd focus on fetching favicons.
Please let me know whether I should make Pull Requests of my changes (as they are or after some editing), or should the repos stay forked.
from homepage.
I'm considering merging it but its not working properly in chrome. $.getScript(theme_dir+"/mascots.js");
throws the following error:
XMLHttpRequest cannot load file:///C:/Users/XXX/Desktop/homepage-dynamic-templating/homepage-dynamic-templating/themes/dark/mascots.js?_=1400262298959. Received an invalid response. Origin 'null' is therefore not allowed access.
Everything else works after removing this bit and everything related to mascots.
from homepage.
Yeah, my friend has same problem. Looks like Webkit-related (same on Luakit).
Tried to work around it by appending <script src=...>
to DOM (BUGFIX-chromium-getscript branch), but it's still the same. And it makes me wonder - it looks like Webkit is generating those requests on its own. Borked implementation of Same-Origin-Policy? ;_;
Anyway, will look for workaround.
from homepage.
Sounds like CORS issue, you cannot use XHR from the file:/// protocol hence why others use python to run a local server and bypass CORS alltogether.
from homepage.
@mouseroot - I didn't wanted to include Python as a dependency. But if I were to, then I'd just make script which generates HTML file without the dynamic config reading nor including additional Javascript in runtime using jQuery, so no CORS.
(Now a bit outdated) proof-od-concept static templating is here: https://github.com/Xender/homepage/tree/static-templating-OLD
I think I may return to this approach.
from homepage.
I do agree that a project like this doesn't really need a dependency like python. a small work around could be jsonp assuming you could host your files on a remote server (perhaps github pages?)
that linked approach looks like it would be the most "user" friendly assuming your users are on linux (I myself am proudly on win7) so while it wont work out of the box its a lot easier then assuming your end user will just run a server
from homepage.
I don't want to complicate this stuff too much. My guess is most people will just use this repository as a reference for some html/css/javascript stuff anyway.
But I wouldn't mind putting a link to your ( @Xender ) repository into the readme if you added a simple description of how to get your stuff running (preferably on both linux and windows).
from homepage.
Hi, I'm not dead yet ^ ^.
So I've returned to this project and tried to look at the whole picture.
I've made a roadmap for my fork. What you said about keeping this repo simple is totally logical.
Having said that, I've made some refactoring not related to templating, only to themes. I hope all those changes keep things simple enough - it's mainly shifting files around into some hopefully logical structure.
I've made a PR - #4
I'd be thankful for a link in Readme, but first I'd like to refresh/refactor the generator and implement it also as a webapp.
from homepage.
Related Issues (2)
- CRLF line endings. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from homepage.