Generate posts list framework

.gitignore

@@ -3,6 +3,7 @@ backup.xml
 bower_components/
 node_modules/
 app/public/
+app/src/templates/post_list.html
 venv/
 .sass-cache/
 

Gruntfile.js

@@ -43,13 +43,21 @@ module.exports = function(grunt) {
                 files: ['**/*.{scss,sass}'],
                 tasks: ['compass:dev']
             },
-            jinja2: {
+            jinja: {
                 files: ['app/src/templates/**'],
-                tasks: ['jinja2:dev']
+                tasks: ['jinja:main']
             },
             copy: {
                 files: ['app/src/images/*', 'app/src/fonts/*'],
                 tasks: ['copy:main']
+            },
+            concat: {
+                files: ['app/src/js/*'],
+                tasks: ['concat:dev']
+            },
+            shell: {
+                files: ['app/src/templates/posts/**'],
+                tasks: ['shell:generate_post_list']
             }
         },
         compass: {
@@ -69,16 +77,16 @@ module.exports = function(grunt) {
                 }
             },
         },
-        jinja2: {
+        jinja: {
             main: {
                 options:{
-                    template_path: 'app/src/templates',
-                    context_path: 'app/src/templates/context'
+                    templateDirs: ['app/src/templates'],
+                    contextRoot: 'app/src/templates/context'
                 },
                 files: [{
                     expand: true,
                     cwd: 'app/src/templates',
-                    src: ['index.html', 'posts/*.html'],
+                    src: ['index.html', 'post_list.html', 'posts/*.html'],
                     dest: 'app/public',
                     ext: '.html'
                 }]
@@ -102,6 +110,33 @@ module.exports = function(grunt) {
                 ]
 
             }
+        },
+        concat: {
+            dev: {
+                src: [
+                    'bower_components/jquery/dist/jquery.js',
+                    'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
+                    'bower_components/holderjs/holder.js',
+                    '/app/src/js/*.js'
+                ],
+                dest: 'app/public/js/main.js'
+            },
+            prod: {
+                src: [
+                    'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
+                    'bower_components/jquery/dist/jquery.js',
+                    'app/src/js/*.js'
+                ],
+                dest: 'app/public/js/main.js'
+            }
+        },
+        shell: {
+            generate_post_list: {
+                options: {
+                    stdout: true
+                },
+                command: 'python generate_post_list.py'
+            }
         }
     });
 
@@ -110,12 +145,28 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-compass');
     grunt.loadNpmTasks('grunt-contrib-connect');
     grunt.loadNpmTasks('grunt-contrib-copy');
-    grunt.loadNpmTasks('grunt-jinja2');
+    grunt.loadNpmTasks('grunt-jinja');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-shell');
 
 
     // Default task(s).
-    grunt.registerTask('default', ['connect:livereload', 'compass:dev', 'jinja2', 'copy', 'watch']);
+    grunt.registerTask('default', [
+        'connect:livereload',
+        'compass:dev',
+        'concat:dev',
+        'shell:generate_post_list',
+        'jinja',
+        'copy',
+        'watch'
+    ]);
     // prod build
-    grunt.registerTask('prod', ['compass:prod', 'jinja2', 'copy']);
+    grunt.registerTask('prod', [
+        'compass:prod',
+        'shell:generate_post_list',
+        'jinja',
+        'concat:prod',
+        'copy'
+    ]);
 
 };

README.md

@@ -8,4 +8,11 @@ virtualenv venv
 . venv/bin/activate
 pip install -r requirements.txt
 grunt
-```
+```
+
+
+
+Package
+=======
+
+x

app/src/stylesheets/_variables.scss

@@ -0,0 +1,3 @@
+$primary-color: #FFA500;
+$secondary-color: #808080;
+$alt-color: #F5F1DE;

app/src/stylesheets/main.scss

@@ -1,3 +1,98 @@
 @import "variables";
-@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap-compass.scss";
-@import "../../../bower_components/fontawesome/scss/font-awesome.scss";
+@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
+@import "../../../bower_components/fontawesome/scss/font-awesome.scss";
+
+/* GLOBAL STYLES
+-------------------------------------------------- */
+
+body {
+  padding-top: 10%;
+  padding-bottom: 70px;
+  color: $secondary-color;
+  background-color: $primary-color;
+}
+
+
+/* NAVBAR
+-------------------------------------------------- */
+
+.navbar-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 20;
+
+  .container {
+    padding-right: 0;
+    padding-left: 0;
+    font-weight: bold;
+  }
+
+  .navbar {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+.navbar-wrapper .navbar .container {
+  width: auto;
+}
+
+
+/* CAROUSEL
+-------------------------------------------------- */
+
+.carousel {
+  height: 500px;
+  margin-bottom: 60px;
+
+  .item {
+    height: 500px;
+    background-color: #777;
+  }
+}
+
+.carousel-caption {
+  z-index: 10;
+}
+
+.fletxeta {
+  margin-top: 200%;
+}
+
+.carousel-inner > .item > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  height: 500px;
+}
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+  .navbar-wrapper {
+    margin-top: 20px;
+
+    .container {
+      padding-right: 15px;
+      padding-left: 15px;
+    }
+
+    .navbar {
+      padding-right: 0;
+      padding-left: 0;
+      border-radius: 4px;
+    }
+  }
+
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+}

app/src/templates/base.html

@@ -1,10 +1,62 @@
 <!DOCTYPE html>
 <html>
-<head lang="en">
+<head lang="cat">
     <meta charset="UTF-8">
-    <title></title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="{{ homepage }}images/favicon.ico">
+
+    <title>Catux</title>
+
+
+    <link rel="stylesheet" type="text/css" href="{{ homepage }}css/main.css">
 </head>
 <body>
+    <div class="navbar-wrapper">
+        <div class="container">
+
+            <nav class="navbar navbar-inverse navbar-static-top">
+                <div class="container">
+                    <div class="navbar-header">
+                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                            <span class="sr-only">Toggle navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </button>
+                        <a href="{{ homepage }}"><img src="holder.js/240x60"></a>
+                    </div>
+                    <div id="navbar" class="navbar-collapse collapse">
+                        <ul class="nav navbar-nav">
+                            <li><a href="{{ homepage }}post_list.html">Blog</a></li>
+                            <li><a href="{{ homepage }}fotos">Fotos</a></li>
+                            <li><a href="{{ homepage }}traduccio">Traducció</a></li>
+                            <li><a href="{{ homepage }}planet">Món (Planet)</a></li>
+                            <li><a href="{{ homepage }}llistes">Llistes de correu</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div> <!-- /.navbar-wrapper -->
+
+    <div class="container">
+        {% block content %}
+        {% endblock %}
+    </div> <!-- /.container -->
+
+    <div class="container">
+        <footer class="catux-footer">
+            <p>
+                Tot el contingut de Catux està subjecte sota la nova versió de la llicència de
+                <a href="http://creativecommons.org/licenses/by/2.5/es/deed.ca">Creative Commons</a>
+            </p>
+        </footer>
+    </div>
+
+    <script src="{{ homepage }}js/main.js"></script>
 
 </body>
 </html>

app/src/templates/context/_all.json

@@ -0,0 +1,3 @@
+{
+  "homepage": "http://localhost:9000/"
+}

app/src/templates/index.html

@@ -1,10 +1,56 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-</head>
-<body>
-
-</body>
-</html>
+{% extends 'base.html' %}
+
+{% block content %}
+    <div id="homepage-carousel" class="carousel slide" data-ride="carousel">
+        <!-- Indicators -->
+        <ol class="carousel-indicators">
+            <li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>
+            <li data-target="#homepage-carousel" data-slide-to="1"></li>
+            <li data-target="#homepage-carousel" data-slide-to="2"></li>
+        </ol>
+
+        <!-- Wrapper for slide -->
+        <div class="carousel-inner" role="listbox">
+            <div class="item active">
+                <img class="first-slide" src="{{ homepage }}/images/Slider1.jpg">
+                <div class="container">
+                    <div class="carousel-caption">
+                        <h1>Traduccions</h1>
+                        <p>Pupita se calle ustée pecador a peich. Me cago en tus muelas te va a hasé pupitaa por la gloria de mi madre. </p>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <img class="second-slide" src="{{ homepage }}/images/Slider2.jpg">
+                <div class="container">
+                    <div class="carousel-caption">
+                        <h1>Catux-USB</h1>
+                        <p>Mamaar se calle ustée se calle ustée se calle ustée te voy a borrar el cerito. </p>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <img class="third-slide" src="{{ homepage }}/images/Slider3.jpg">
+                <div class="container">
+                    <div class="carousel-caption">
+                        <h1>Llistes</h1>
+                        <p>Lorem fistrum ahorarr por la gloria de mi madre me cago en tus muelas fistro. </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Carousel controls -->
+        <a class="left carousel-control" href="#homepage-carousel" role="button" data-slide="prev">
+            <i class="fletxeta fa fa-chevron-left" aria-hidden="true"></i>
+            <span class="sr-only">Prèvia</span>
+        </a>
+
+        <a class="right carousel-control" href="#homepage-carousel" role="button" data-slide="next">
+            <i class="fletxeta fa fa-chevron-right" aria-hidden="true"></i>
+            <span class="sr-only">Següent</span>
+        </a>
+
+    </div> <!-- ./carousel -->
+
+{% endblock %}