├── .firebase └── hosting.cHVibGlj.cache ├── .firebaserc ├── .gitignore ├── README.md ├── firebase.json ├── gulpfile.js ├── package-lock.json ├── package.json └── public ├── 404.html ├── README.md ├── css └── index.css ├── fonts ├── Flaticon.eot ├── Flaticon.svg ├── Flaticon.ttf ├── Flaticon.woff ├── estrellallena.eot ├── estrellallena.svg ├── estrellallena.ttf ├── estrellallena.woff ├── googleicon.eot ├── googleicon.svg ├── googleicon.ttf ├── googleicon.woff ├── googleicon.woff2 ├── icomoon.eot ├── icomoon.svg ├── icomoon.ttf └── icomoon.woff ├── icons └── icon_new_post.png ├── imagenes ├── logo.png ├── usuario.png └── usuario_auth.png ├── index.html ├── js ├── auth │ ├── autenticacion.js │ └── authController.js ├── general.js ├── post │ ├── post.js │ └── postController.js └── util │ └── util.js ├── manifest.json ├── notificaciones-sw.js └── stylus └── index.styl /.firebase/hosting.cHVibGlj.cache: -------------------------------------------------------------------------------- 1 | 404.html,1542735192940,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa 2 | manifest.json,1542810349532,3df6c24a6cd9d5995ac65766afb25c3845e43e0271e10eef9e2021b01419a196 3 | notificaciones-sw.js,1542812866220,244a931065cf34428798eaccf696d38b85287206a67e9b7ca43d6b32b3f26625 4 | README.md,1542614942167,addaffeaeaac80169fa7483d872910fc831c8217cba114c1dd917e1901f0fe4e 5 | fonts/estrellallena.eot,1542614763904,41e0e09c7ca7f0888c2d3a51462809ea37065d8455f61495ac2412b47a6ab14e 6 | index.html,1542808029809,cc2ad8611c0bb792ac2124a750a5ce126d01a57ad6b470b8208266d661a0c46d 7 | fonts/estrellallena.svg,1542614763907,fc7da8f0b30118bdc86d1287875bdda79095a0c0dbfd924474b90a431debfd9d 8 | fonts/estrellallena.ttf,1542614763908,a8e5d07775df6e5f88019c57e3c784951e9dc3d204dec27f1904c2878ea779bb 9 | css/index.css,1542614763895,2956be200c3e48b0be1e64d6a7c1bafc51749e769896857456e0abcda3d0d3b1 10 | fonts/estrellallena.woff,1542614763910,804688760fa8840cc9b815345536641c33a2446740bdc4ab5adc5f543e091be5 11 | fonts/Flaticon.eot,1542614763897,7b176d14ae563ed05c56974f8d86d3320dff0c309d2e4abdb683f4402d141b92 12 | fonts/Flaticon.svg,1542614763899,22e03eae8b9d8d65780624dbc887963033514d1742c7029ac17b479c8acc86cb 13 | fonts/Flaticon.ttf,1542614763901,c656a962aadede83463e224b8034e507e03bfce0361caba5ce661e4f65fe8446 14 | fonts/Flaticon.woff,1542614763902,986f18c73941f7292c86fdbbcdb23c6a848e42f153a0f2fe6c7a20d8878d6f91 15 | fonts/googleicon.svg,1542614763913,1be3a3d13d0bf340b3b25240ca8b51b6a07b172e4f78827e3d066fdd0021cff3 16 | fonts/googleicon.eot,1542614763912,5f95599e64a289775d82f72cdec3533c8497fce1194b4079be99934763d78165 17 | fonts/googleicon.woff,1542614763917,9c4b3516ce9a54156c03ab7bb0eb1a5287879acc37d5e9fa2f1c36031152ee1f 18 | fonts/googleicon.woff2,1542614763919,369582e671efc1e547fdda772ddbff0a45a4c9e764466bae5713ec2f83138a76 19 | fonts/googleicon.ttf,1542614763915,b7cbbf41c7febb9cd8dac2a2f56d35e96594f8cdf83d628302e612a5bf9162ad 20 | fonts/icomoon.eot,1542614763920,296f343ba529aa41a2b3fad1fc513e136ba78e7a12144a4cf68d97c069001eba 21 | fonts/icomoon.svg,1542614763922,b0fcc34607f4a5036e3303b9c145ccef7f2d18efc07a0a44a050aa4281415d98 22 | fonts/icomoon.ttf,1542614763923,1ad6f97a97d35a047a642314672cd3a64db8f22915c24e7c2d4afc3ba9c0f7d0 23 | fonts/icomoon.woff,1542614763925,4941eb7c88bcb3f4855d30ea699af5a539d9c5f4090f2682bba9a4709ff8cd23 24 | icons/icon_new_post.png,1542614763927,5c997aaa9f7765052ac0da6f6f5e08ebea0af18c377cf1e07a2ef1f5cefe25ba 25 | js/general.js,1542813570766,13ca3573730e5513cf9600371d41bb69dd96cd06913bc7b024100c64cdb617d4 26 | js/auth/autenticacion.js,1542648228401,88c6a42a7585f7208f67ca431cb57f6c389e10daee635fd378d3f01ec8f08ded 27 | js/auth/authController.js,1542658904771,34bb78d78a7b61628b089e72ad6a89f390c6d81900906c24031c8888e13b2429 28 | js/config/ConfigFirebase.js,1542640478389,b42fa3fe6dcbe32af9eaba2d1431bc5ce796b2fb49eaa3f96be5acfe8a794043 29 | js/post/post.js,1542731426674,c340a1be1867df432fe588a8a4037de3892916dbac14f69afff5e69f90c59791 30 | js/post/postController.js,1542805216749,8654c1b0c9458c120096896bc3d39315b44aad98f503100b8a35977aa8238c03 31 | js/util/util.js,1542614763950,d089ea106a7c04c9208171386cd7a9b71049611fde1bf785bc428b38687dbd11 32 | stylus/index.styl,1542614763957,c3686d0d3b302991afb33279b2f750add981ed9843179f3d7ab74df484c11661 33 | imagenes/usuario.png,1542614763933,4a4cd1883ffbf93daf1d2a55efd909518b52e4096963f3836d218c792f6619ed 34 | imagenes/logo.png,1542614763931,6b5c72e5ec85c608e25d668bbf70f3a518cc5815aa804ab85f83cdd9a2eb2b14 35 | imagenes/usuario_auth.png,1542614763936,e968b98980430cd3296e5722b6c2497d45517021be52f9cdf7cb001b9ff7f09c 36 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "blogeekplatzi-4836b" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | ConfigFirebase.js 3 | dist 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Blogeek Videos 2 | Proyecto de referencia para el curso en Platzi de Firebase para la Web. 3 | - Recuerda crear un directorio config y dentro un archivo javascript con nombre ConfigFirebase el cual contiene las credenciales y demas info para usar firebase. 4 | - Existen ramas por clase, sin embargo en la rama master esta la versión final 5 | - Mira la versión final: https://blogeekplatzi.firebaseapp.com/ 6 | 7 | @jggomezt 8 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "public", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "redirects" : [ 10 | { 11 | "source": "/posts", 12 | "destination": "/", 13 | "type": 301 14 | } 15 | ], 16 | "rewrites":[ 17 | { 18 | "source": "/**", 19 | "destination": "/index.html" 20 | } 21 | ], 22 | "headers":[ 23 | { 24 | "source": "**/*.@(jpg|jpeg|gif|png)", 25 | "headers":[ 26 | { 27 | "key": "Cache-Control", 28 | "value": "max-age=7200" 29 | } 30 | ] 31 | } 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp') 2 | var stylus = require('gulp-stylus') 3 | var browserSync = require('browser-sync').create() 4 | var useref = require('gulp-useref') 5 | var gulpIf = require('gulp-if') 6 | var imagemin = require('gulp-imagemin') 7 | var cache = require('gulp-cache') 8 | var del = require('del') 9 | var runSequence = require('run-sequence') 10 | var htmlmin = require('gulp-htmlmin') 11 | var minifyCSS = require('gulp-minify-css') 12 | 13 | // Tareas para el desarrollo 14 | // Get one .styl file and render 15 | gulp.task('stylus', function () { 16 | return gulp 17 | .src('app/stylus/*.styl') 18 | .pipe(stylus()) 19 | .pipe(gulp.dest('app/css')) 20 | .pipe( 21 | browserSync.reload({ 22 | stream: true 23 | }) 24 | ) 25 | }) 26 | 27 | gulp.task('browserSync', () => { 28 | browserSync.init({ 29 | server: { 30 | baseDir: 'public', 31 | port: 4000 32 | } 33 | }) 34 | }) 35 | 36 | gulp.task('watch', ['browserSync', 'stylus'], () => { 37 | // gulp.watch('app/stylus/*.styl', ['stylus']); 38 | gulp.watch('public/*.html', browserSync.reload) 39 | gulp.watch('public/**/*.js', browserSync.reload) 40 | }) 41 | 42 | gulp.task('default', callback => { 43 | runSequence(['browserSync', 'watch'], callback) 44 | }) 45 | 46 | // 47 | 48 | // Tareas para el deploy 49 | 50 | gulp.task('useref', () => { 51 | return gulp 52 | .src('app/**/*.html') 53 | .pipe(useref()) 54 | .pipe(gulpIf('*.js', minify({ mangle: false }))) 55 | .pipe(gulpIf('*.css', minifyCSS())) 56 | .pipe(gulpIf('*.html', htmlmin({ collapseWhitespace: true }))) 57 | .pipe(gulp.dest('dist')) 58 | }) 59 | 60 | gulp.task('images', () => { 61 | return gulp 62 | .src('app/imagenes/**/*.+(png|jpg|gif|svg)') 63 | .pipe( 64 | cache( 65 | imagemin({ 66 | interlaced: true 67 | }) 68 | ) 69 | ) 70 | .pipe(gulp.dest('dist/imagenes')) 71 | }) 72 | 73 | gulp.task('fonts', () => { 74 | return gulp.src('app/fonts/**/*').pipe(gulp.dest('dist/fonts')) 75 | }) 76 | 77 | gulp.task('clean', () => { 78 | return del.sync('dist') 79 | }) 80 | 81 | gulp.task('build', callback => { 82 | runSequence('clean', 'stylus'[('useref', 'images', 'fonts')], callback) 83 | }) 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog-geek", 3 | "version": "1.0.0", 4 | "description": "Blog Geek", 5 | "main": "app/general.js", 6 | "scripts": { 7 | "test": "no test" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/jggomez/blogvideos-ucc.git" 12 | }, 13 | "keywords": [ 14 | "blog" 15 | ], 16 | "author": "Juan Guillermo Gómez", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/jggomez/blogvideos-ucc/issues" 20 | }, 21 | "homepage": "https://github.com/jggomez/blogvideos-ucc#readme", 22 | "devDependencies": { 23 | "browser-sync": "^2.18.8", 24 | "del": "^2.2.2", 25 | "gulp": "^3.9.1", 26 | "gulp-cache": "^0.4.6", 27 | "gulp-htmlmin": "^3.0.0", 28 | "gulp-imagemin": "^3.2.0", 29 | "gulp-minify": "0.0.15", 30 | "gulp-minify-css": "^1.2.4", 31 | "gulp-stylus": "^2.6.0", 32 | "gulp-useref": "^3.1.2", 33 | "run-sequence": "^1.2.2" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Not Found 7 | 8 | 23 | 24 | 25 |
26 |

404

27 |

Page Not Found

28 |

The specified file was not found on this website. Please check the URL for mistakes and try again.

29 |

Why am I seeing this?

30 |

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /public/README.md: -------------------------------------------------------------------------------- 1 | # Blogeek Videos 2 | Proyecto de referencia para el curso en Platzi de Firebase para la Web. 3 | - Recuerda crear un directorio config y dentro un archivo javascript con nombre ConfigFirebase el cual contiene las credenciales y demas info para usar firebase. 4 | 5 | @jggomezt 6 | -------------------------------------------------------------------------------- /public/css/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Flaticon"; 3 | src: url("../fonts/Flaticon.eot"); 4 | src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/Flaticon.woff") format("woff"), url("../fonts/Flaticon.ttf") format("truetype"), url("../fonts/Flaticon.svg#Flaticon") format("svg"); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 9 | @font-face { 10 | font-family: "Flaticon"; 11 | src: url("../fonts/Flaticon.svg#Flaticon") format("svg"); 12 | } 13 | } 14 | [class^="flaticon-"]:before, 15 | [class*=" flaticon-"]:before, 16 | [class^="flaticon-"]:after, 17 | [class*=" flaticon-"]:after { 18 | font-family: Flaticon; 19 | font-size: 20px; 20 | font-style: normal; 21 | margin-left: 20px; 22 | } 23 | @font-face { 24 | font-family: 'icono_estrellita_vacia'; 25 | src: url("../fonts/icomoon.eot?n253df"); 26 | src: url("../fonts/icomoon.eot?n253df#iefix") format('embedded-opentype'), url("../fonts/icomoon.ttf?n253df") format('truetype'), url("../fonts/icomoon.woff?n253df") format('woff'), url("../fonts/icomoon.svg?n253df#icomoon") format('svg'); 27 | font-weight: normal; 28 | font-style: normal; 29 | } 30 | @font-face { 31 | font-family: 'icono_estrellita_llena'; 32 | src: url("../fonts/estrellallena.eot?az4rfq"); 33 | src: url("../fonts/estrellallena.eot?az4rfq#iefix") format('embedded-opentype'), url("../fonts/estrellallena.ttf?az4rfq") format('truetype'), url("../fonts/estrellallena.woff?az4rfq") format('woff'), url("../fonts/estrellallena.svg?az4rfq#icomoon") format('svg'); 34 | font-weight: normal; 35 | font-style: normal; 36 | } 37 | @font-face { 38 | font-family: 'googleicon'; 39 | src: url("../fonts/googleicon.eot?9927647"); 40 | src: url("../fonts/googleicon.eot?9927647#iefix") format('embedded-opentype'), url("../fonts/googleicon.woff?9927647") format('woff'), url("../fonts/googleicon.ttf?9927647") format('truetype'), url("../fonts/googleicon.svg?9927647#googleicon") format('svg'); 41 | font-weight: normal; 42 | font-style: normal; 43 | } 44 | .btnPpal { 45 | background: #7acc2d !important; 46 | font-family: 'Montserrat', sans-serif; 47 | font-weight: bold; 48 | transition: 0.5s; 49 | } 50 | .btnPpal:hover { 51 | background: #7acc2d; 52 | color: #fff; 53 | font-size: 17px; 54 | } 55 | body { 56 | font-family: 'Allerta', sans-serif; 57 | } 58 | .headerppal { 59 | background: #126798; 60 | overflow: hidden; 61 | box-shadow: 0 8px 10px rgba(0,0,0,0.5); 62 | padding-bottom: 30px; 63 | text-align: center; 64 | } 65 | .headerppal .titulo { 66 | color: #fff; 67 | font-size: 40px; 68 | font-family: 'Montserrat', sans-serif; 69 | margin-top: 30px; 70 | margin-bottom: 0; 71 | } 72 | .headerppal .titulo-a { 73 | color: #fff; 74 | font-size: 20px; 75 | padding-top: 5px; 76 | padding-bottom: 15px; 77 | } 78 | .headerppal .header-logotipo { 79 | margin-right: 5em; 80 | margin-left: 50px; 81 | margin-top: 20px; 82 | } 83 | .headerppal .header-logotipo img { 84 | border-right-style: solid; 85 | border-width: 2px; 86 | border-color: #fff; 87 | border-radius: 60%; 88 | height: 140px; 89 | padding: 20px; 90 | width: 140px; 91 | transition: 0.6s; 92 | } 93 | .headerppal .header-logotipo img:hover { 94 | transform: scale(1.2); 95 | } 96 | .headerppal .header-avatar { 97 | display: none; 98 | float: right; 99 | margin-top: -200px; 100 | margin-right: 50px; 101 | } 102 | .headerppal .header-avatar img { 103 | border-radius: 60%; 104 | height: 80px; 105 | width: 80px; 106 | transition: 0.6s; 107 | transform: translateY(100px); 108 | } 109 | .menu { 110 | background: #219cca; 111 | border-left: 10px solid #fff; 112 | box-shadow: 0 8px 10px rgba(0,0,0,0.5); 113 | } 114 | .menu ul { 115 | margin: 0px; 116 | } 117 | .menu ul li { 118 | display: block; 119 | line-height: 40px; 120 | transition: 0.6s; 121 | } 122 | .menu ul li:hover { 123 | background: #126798; 124 | } 125 | .menu ul li a { 126 | color: #fff; 127 | text-decoration: none; 128 | padding: 0 1em; 129 | transition: 0.6s; 130 | } 131 | .menu ul li a:hover { 132 | font-size: 17px; 133 | } 134 | .footer { 135 | height: 100%; 136 | background: #126798; 137 | margin: 0px; 138 | } 139 | .footer .contenedor-footer { 140 | display: flex; 141 | flex-direction: column-reverse; 142 | justify-content: space-around; 143 | } 144 | .footer .contenedor-footer .formulario-contactenos { 145 | display: flex; 146 | flex-direction: column; 147 | margin-left: 20px; 148 | } 149 | .footer .contenedor-footer .formulario-contactenos .form-col1, 150 | .footer .contenedor-footer .formulario-contactenos .form-col2 { 151 | margin-right: 30px; 152 | color: #fff; 153 | display: flex; 154 | flex-direction: column; 155 | label 156 | } 157 | .footer .contenedor-footer .formulario-contactenos .form-col1 input, 158 | .footer .contenedor-footer .formulario-contactenos .form-col2 input { 159 | margin-bottom: 10px; 160 | } 161 | .footer .contenedor-footer .formulario-contactenos .form-col1 label { 162 | color: #fff; 163 | } 164 | .footer .contenedor-footer .formulario-contactenos .form-col1 { 165 | margin-top: 10px; 166 | margin-bottom: 10px; 167 | } 168 | .footer .contenedor-footer .formulario-contactenos .form-col1 .tipos-comentarios { 169 | display: flex; 170 | flex-direction: column; 171 | } 172 | .footer .contenedor-footer .formulario-contactenos .form-col1 .tipos-comentarios label { 173 | font-size: 13px; 174 | } 175 | .footer .contenedor-footer .formulario-contactenos .form-col2 { 176 | align-items: flex-start; 177 | } 178 | .footer .contenedor-footer .formulario-contactenos .form-col2 label { 179 | color: #fff; 180 | margin-bottom: 1em; 181 | } 182 | .footer .contenedor-footer .formulario-contactenos .form-col2 textarea { 183 | margin-bottom: 10px; 184 | height: 110px; 185 | } 186 | .footer .contenedor-footer .redesSociales .realizadopor { 187 | padding-top: 30px; 188 | } 189 | .footer .contenedor-footer .redesSociales .realizadoclase { 190 | padding-bottom: 30px; 191 | } 192 | .footer .contenedor-footer .redesSociales p { 193 | color: #fff; 194 | text-align: center; 195 | margin: 10px; 196 | } 197 | .footer .contenedor-footer .redesSociales .logos-redes { 198 | text-align: center; 199 | } 200 | .footer .contenedor-footer .redesSociales .logos-redes a { 201 | text-decoration: none; 202 | } 203 | .footer .contenedor-footer .redesSociales .logos-redes .logo-facebook:before { 204 | color: #7acc2d; 205 | content: "\f101"; 206 | font-size: 30px; 207 | font-family: "Flaticon"; 208 | } 209 | .footer .contenedor-footer .redesSociales .logos-redes .logo-twitter:before { 210 | color: #7acc2d; 211 | content: "\f102"; 212 | font-size: 30px; 213 | font-family: "Flaticon"; 214 | } 215 | .footer .contenedor-footer .redesSociales .logos-redes .logo-github:before { 216 | color: #7acc2d; 217 | content: "\f100"; 218 | font-size: 30px; 219 | font-family: "Flaticon"; 220 | } 221 | .posts { 222 | padding: 0.8em; 223 | margin: 0px; 224 | text-align: center; 225 | } 226 | .posts .post { 227 | background: #fff; 228 | border: 1px solid #000; 229 | box-shadow: 10px 9px 25px -1px rgba(0,0,0,0.75); 230 | display: block; 231 | margin-bottom: 1.5em; 232 | margin-right: 1.5em; 233 | width: 100%; 234 | } 235 | .posts .post .post-calificacion { 236 | text-align: center; 237 | padding: 0.5em; 238 | } 239 | .posts .post .post-calificacion .post-estrellita-vacia { 240 | text-decoration: none; 241 | } 242 | .posts .post .post-calificacion .post-estrellita-vacia:before { 243 | color: #7acc2d; 244 | content: "\e9d7"; 245 | font-family: "icono_estrellita_vacia"; 246 | } 247 | .posts .post .post-calificacion .post-estrellita-llena { 248 | text-decoration: none; 249 | } 250 | .posts .post .post-calificacion .post-estrellita-llena:before { 251 | color: #7acc2d; 252 | content: "\e9d9"; 253 | font-family: "icono_estrellita_llena"; 254 | } 255 | .posts .post .post-titulo { 256 | text-align: center; 257 | background: #eee; 258 | font-family: 'Montserrat', sans-serif; 259 | padding: 0.5em; 260 | } 261 | .posts .post .post-titulo h5 { 262 | font-weight: bold; 263 | } 264 | .posts .post .post-video { 265 | text-align: center; 266 | padding: 0 0.5em; 267 | } 268 | .posts .post .post-video iframe { 269 | width: 100%; 270 | height: 300px; 271 | } 272 | .posts .post .post-video .post-imagen-video { 273 | width: 100%; 274 | height: 300px; 275 | } 276 | .posts .post .post-descripcion { 277 | text-align: center; 278 | background: #eee; 279 | font-family: 'Allerta', sans-serif; 280 | padding: 0.5em; 281 | font-size: 17px; 282 | } 283 | .posts .post .post-videolink { 284 | text-align: center; 285 | background: #126798; 286 | color: #fff; 287 | font-family: 'Allerta', sans-serif; 288 | padding: 0.5em; 289 | font-size: 17px; 290 | } 291 | .posts .post .post-videolink a { 292 | color: #fff; 293 | text-decoration: underline; 294 | } 295 | .posts .post .post-footer { 296 | background: #126798; 297 | color: #fff; 298 | font-size: 17px; 299 | padding-bottom: 0.5em; 300 | padding-top: 1em; 301 | padding-left: 0.5em; 302 | text-align: left; 303 | width: 100%; 304 | } 305 | .modal-registro { 306 | width: 80% !important; 307 | } 308 | .registro-bienvenida { 309 | text-align: center; 310 | width: 100%; 311 | } 312 | .registro-bienvenida h4 { 313 | color: #126798; 314 | font-size: 1.5em; 315 | font-family: 'Montserrat', sans-serif; 316 | font-weight: bold; 317 | margin-bottom: 0.5em; 318 | } 319 | .registro-bienvenida .registro-bienvenida-texto { 320 | margin-bottom: 1em; 321 | font-size: 1em; 322 | text-align: left; 323 | } 324 | .registro-bienvenida span { 325 | color: #7acc2d; 326 | font-size: 1.2em; 327 | font-weight: bold; 328 | } 329 | .registro-formulario { 330 | border-left: 0.3em solid #126798; 331 | } 332 | .registro-formulario div { 333 | margin: 0; 334 | } 335 | .registro-formulario label { 336 | color: #126798; 337 | font-size: 1em; 338 | } 339 | .registro-formulario a { 340 | margin-top: 2em; 341 | text-align: center; 342 | width: 80% !important; 343 | } 344 | .registro-formulario .div-btnInicioSesion { 345 | text-align: center; 346 | } 347 | .registro-formulario .div-btnInicioSesion a { 348 | background: #126798 !important; 349 | } 350 | .registro-formulario .lbl-ingresar-redes { 351 | color: #126798; 352 | font-weight: bold; 353 | padding-top: 1em; 354 | text-align: center; 355 | } 356 | .registro-formulario .registro-iconos-redes { 357 | background: #fff !important; 358 | text-align: center; 359 | } 360 | .registro-formulario .registro-iconos-redes .logo-facebook:before { 361 | color: #7acc2d; 362 | content: "\f101"; 363 | font-size: 40px; 364 | font-family: "Flaticon"; 365 | } 366 | .registro-formulario .registro-iconos-redes .logo-google { 367 | margin-left: 1em; 368 | } 369 | .registro-formulario .registro-iconos-redes .logo-google:before { 370 | color: #7acc2d; 371 | content: "\f2b3"; 372 | font-size: 45px; 373 | font-family: "googleicon"; 374 | } 375 | .registro-formulario .registro-iconos-redes .logo-twitter { 376 | margin-left: 1em; 377 | } 378 | .registro-formulario .registro-iconos-redes .logo-twitter:before { 379 | color: #7acc2d; 380 | content: "\f102"; 381 | font-size: 40px; 382 | font-family: "Flaticon"; 383 | } 384 | .div-btnRegistrarse { 385 | text-align: center; 386 | margin-top: 2em; 387 | margin-bottom: 0em; 388 | } 389 | .div-btnRegistrarse a { 390 | background: #126798 !important; 391 | } 392 | .titulo-posts { 393 | color: #126798; 394 | font-weight: bold; 395 | text-align: center; 396 | } 397 | #btnUploadFile { 398 | background: #126798 !important; 399 | font-family: 'Montserrat', sans-serif; 400 | font-weight: bold; 401 | transition: 0.5s; 402 | margin-bottom: 1em; 403 | margin-top: 1em; 404 | } 405 | @media screen and (min-width: 768px) { 406 | .headerppal { 407 | text-align: left; 408 | } 409 | .headerppal .header-logotipo { 410 | float: left; 411 | } 412 | .headerppal .header-avatar { 413 | display: inline-block; 414 | } 415 | .menu ul { 416 | height: 40px; 417 | } 418 | .menu ul li { 419 | display: inline-block; 420 | } 421 | .posts .post { 422 | display: inline-block; 423 | margin-top: 25px; 424 | width: 47%; 425 | } 426 | .posts .post .post-descripcion { 427 | height: 120px; 428 | } 429 | .footer .contenedor-footer { 430 | display: flex; 431 | flex-direction: row; 432 | justify-content: space-around; 433 | } 434 | .footer .contenedor-footer .formulario-contactenos { 435 | display: flex; 436 | flex-direction: row; 437 | margin-top: 30px; 438 | } 439 | .footer .contenedor-footer .formulario-contactenos .form-col1 { 440 | margin-top: 0; 441 | margin-bottom: 0; 442 | } 443 | .footer .contenedor-footer .formulario-contactenos .form-col1 .tipos-comentarios { 444 | display: flex; 445 | flex-direction: row; 446 | } 447 | .footer .contenedor-footer .redesSociales { 448 | margin-top: 40px; 449 | margin-bottom: 45px; 450 | padding-right: 3em; 451 | border-right: 3px solid #fff; 452 | } 453 | .registro-bienvenida { 454 | text-align: left; 455 | } 456 | .registro-bienvenida h4 { 457 | margin-bottom: 1em; 458 | font-size: 2em; 459 | } 460 | .registro-bienvenida .registro-bienvenida-texto { 461 | margin-bottom: 2em; 462 | font-size: 1.5em; 463 | } 464 | .registro-bienvenida span { 465 | font-size: 1.5em; 466 | } 467 | .modal-registro { 468 | width: 70% !important; 469 | } 470 | } 471 | -------------------------------------------------------------------------------- /public/fonts/Flaticon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/Flaticon.eot -------------------------------------------------------------------------------- /public/fonts/Flaticon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by FontForge 20160405 at Mon Mar 27 15:42:17 2017 9 | By Apache 10 | Copyright (c) 2017, Apache 11 | 12 | 13 | 14 | 27 | 28 | 30 | 33 | 48 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /public/fonts/Flaticon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/Flaticon.ttf -------------------------------------------------------------------------------- /public/fonts/Flaticon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/Flaticon.woff -------------------------------------------------------------------------------- /public/fonts/estrellallena.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/estrellallena.eot -------------------------------------------------------------------------------- /public/fonts/estrellallena.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/fonts/estrellallena.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/estrellallena.ttf -------------------------------------------------------------------------------- /public/fonts/estrellallena.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/estrellallena.woff -------------------------------------------------------------------------------- /public/fonts/googleicon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/googleicon.eot -------------------------------------------------------------------------------- /public/fonts/googleicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Copyright (C) 2018 by original authors @ fontello.com 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/fonts/googleicon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/googleicon.ttf -------------------------------------------------------------------------------- /public/fonts/googleicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/googleicon.woff -------------------------------------------------------------------------------- /public/fonts/googleicon.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/googleicon.woff2 -------------------------------------------------------------------------------- /public/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/icomoon.eot -------------------------------------------------------------------------------- /public/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/icomoon.ttf -------------------------------------------------------------------------------- /public/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/fonts/icomoon.woff -------------------------------------------------------------------------------- /public/icons/icon_new_post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/icons/icon_new_post.png -------------------------------------------------------------------------------- /public/imagenes/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/imagenes/logo.png -------------------------------------------------------------------------------- /public/imagenes/usuario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/imagenes/usuario.png -------------------------------------------------------------------------------- /public/imagenes/usuario_auth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jggomez/blogeek-platzi/6a3a4ba2114b01e50f7293d9122ef17adc0e6af0/public/imagenes/usuario_auth.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | VideoBlog Geek 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | Blog Logotipo 23 |
24 |

VideoBlog Geek

25 |

Encuentra los Videos mas poderosos de los geeks

26 | Iniciar Sesión 27 |
28 | Avatar 29 |
30 |
31 | 39 |

Posts de la Comunidad

40 |
41 |
42 | 96 | 97 | 98 | 137 | 138 | 139 | 174 | 175 | 176 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /public/js/auth/autenticacion.js: -------------------------------------------------------------------------------- 1 | class Autenticacion { 2 | autEmailPass (email, password) { 3 | firebase.auth().signInWithEmailAndPassword(email, password).then(result => { 4 | if (result.user.emailVerified) { 5 | $('#avatar').attr('src', 'imagenes/usuario_auth.png') 6 | Materialize.toast(`Bienvenido ${result.user.displayName}`, 5000) 7 | } else { 8 | firebase.auth().signOut() 9 | Materialize.toast( 10 | `Por favor realiza la verificación de la cuenta`, 11 | 5000 12 | ) 13 | } 14 | }) 15 | 16 | $('.modal').modal('close') 17 | } 18 | 19 | crearCuentaEmailPass (email, password, nombres) { 20 | firebase 21 | .auth() 22 | .createUserWithEmailAndPassword(email, password) 23 | .then(result => { 24 | result.user.updateProfile({ 25 | displayName: nombres 26 | }) 27 | 28 | const configuracion = { 29 | url: 'https://blogeekplatzi-4836b.firebaseapp.com/' 30 | } 31 | 32 | result.user.sendEmailVerification(configuracion).catch(error => { 33 | console.error(error) 34 | Materialize.toast(error.message, 4000) 35 | }) 36 | 37 | firebase.auth().signOut() 38 | 39 | Materialize.toast( 40 | `Bienvenido ${nombres}, debes realizar el proceso de verificación`, 41 | 4000 42 | ) 43 | 44 | $('.modal').modal('close') 45 | }) 46 | .catch(error => { 47 | console.error(error) 48 | Materialize.toast(error.message, 4000) 49 | }) 50 | } 51 | 52 | authCuentaGoogle () { 53 | const provider = new firebase.auth.GoogleAuthProvider() 54 | 55 | firebase.auth().signInWithPopup(provider).then(result => { 56 | $('#avatar').attr('src', result.user.photoURL) 57 | $('.modal').modal('close') 58 | Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000) 59 | }) 60 | .catch(error =>{ 61 | console.error(error) 62 | Materialize.toast(`Error al autenticarse con google: ${error} `, 4000) 63 | }) 64 | } 65 | 66 | authCuentaFacebook () { 67 | const provider = new firebase.auth.FacebookAuthProvider(); 68 | 69 | firebase.auth().signInWithPopup(provider).then(result => { 70 | $('#avatar').attr('src', result.user.photoURL) 71 | $('.modal').modal('close') 72 | Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000) 73 | }) 74 | .catch(error =>{ 75 | console.error(error) 76 | Materialize.toast(`Error al autenticarse con facebook: ${error} `, 4000) 77 | }) 78 | } 79 | 80 | authTwitter () { 81 | // TODO: Crear auth con twitter 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /public/js/auth/authController.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | const objAuth = new Autenticacion() 3 | 4 | $('#btnRegistroEmail').click(() => { 5 | const nombres = $('#nombreContactoReg').val() 6 | const email = $('#emailContactoReg').val() 7 | const password = $('#passwordReg').val() 8 | auth.crearCuentaEmailPass(email, password, nombres) 9 | }) 10 | 11 | $('#btnInicioEmail').click(() => { 12 | const email = $('#emailSesion').val() 13 | const password = $('#passwordSesion').val() 14 | auth.autEmailPass(email, password) 15 | }) 16 | 17 | $('#authGoogle').click(() => objAuth.authCuentaGoogle()) 18 | 19 | $('#authFB').click(() => objAuth.authCuentaFacebook()) 20 | 21 | // $("#authTwitter").click(() => objAuth.authCuentaFacebook()); 22 | 23 | $('#btnRegistrarse').click(() => { 24 | $('#modalSesion').modal('close') 25 | $('#modalRegistro').modal('open') 26 | }) 27 | 28 | $('#btnIniciarSesion').click(() => { 29 | $('#modalRegistro').modal('close') 30 | $('#modalSesion').modal('open') 31 | }) 32 | }) 33 | -------------------------------------------------------------------------------- /public/js/general.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | $('.tooltipped').tooltip({ delay: 50 }) 3 | $('.modal').modal() 4 | 5 | firebase.initializeApp(varConfig) 6 | 7 | // Se registra el service worker 8 | navigator.serviceWorker 9 | .register('notificaciones-sw.js') 10 | .then(registro => { 11 | console.log('service worker registrado') 12 | firebase.messaging().useServiceWorker(registro) 13 | }) 14 | .catch(error => { 15 | console.error(`Error al registrar el service worker => ${error}`) 16 | }) 17 | 18 | const messaging = firebase.messaging() 19 | 20 | // Registrar credenciales web 21 | messaging.usePublicVapidKey( 22 | 'BNXFobbKFCs-uAVxoPSqtgtm9GrVypZwx9n2PdS6GCqynO48xgPL0vUhX5hd9xgawFTRFzvfyYe0tt8f_IcL_-w' 23 | ) 24 | 25 | // Solicitar permisos para las notificaciones 26 | messaging 27 | .requestPermission() 28 | .then(() => { 29 | console.log('permiso otorgado') 30 | return messaging.getToken() 31 | }) 32 | .then(token => { 33 | console.log('token') 34 | console.log(token) 35 | const db = firebase.firestore() 36 | db.settings({ timestampsInSnapshots: true }) 37 | db 38 | .collection('tokens') 39 | .doc(token) 40 | .set({ 41 | token: token 42 | }) 43 | .catch(error => { 44 | console.error(`Error al insertar el token en la BD => ${error}`) 45 | }) 46 | }) 47 | .catch(error => { 48 | console.error(`Permiso no otorgado => ${error}`) 49 | }) 50 | 51 | // Obtener el token cuando se refresca 52 | messaging.onTokenRefresh(() => { 53 | messaging.getToken().then(token => { 54 | console.log('token se ha renovado') 55 | const db = firebase.firestore() 56 | db.settings({ timestampsInSnapshots: true }) 57 | db 58 | .collection('tokens') 59 | .doc(token) 60 | .set({ 61 | token: token 62 | }) 63 | .catch(error => { 64 | console.error(`Error al insertar el token en la BD => ${error}`) 65 | }) 66 | }) 67 | }) 68 | 69 | // Recibir las notificaciones cuando el usuario esta foreground 70 | messaging.onMessage(payload => { 71 | console.log('mensaje en foreground') 72 | Materialize.toast( 73 | `Ya tenemos un nuevo post. Revísalo, se llama ${payload.data.titulo}`, 74 | 6000 75 | ) 76 | }) 77 | 78 | const post = new Post() 79 | post.consultarTodosPost() 80 | 81 | // Firebase observador del cambio de estado de auth 82 | firebase.auth().onAuthStateChanged(user => { 83 | if (user) { 84 | $('#btnInicioSesion').text('Salir') 85 | if (user.photoURL) { 86 | $('#avatar').attr('src', user.photoURL) 87 | } else { 88 | $('#avatar').attr('src', 'imagenes/usuario_auth.png') 89 | } 90 | } else { 91 | $('#btnInicioSesion').text('Iniciar Sesión') 92 | $('#avatar').attr('src', 'imagenes/usuario.png') 93 | } 94 | }) 95 | 96 | // Evento boton inicio sesion 97 | $('#btnInicioSesion').click(() => { 98 | const user = firebase.auth().currentUser 99 | if (user) { 100 | $('#btnInicioSesion').text('Iniciar Sesión') 101 | return firebase 102 | .auth() 103 | .signOut() 104 | .then(() => { 105 | $('#avatar').attr('src', 'imagenes/usuario.png') 106 | Materialize.toast(`SignOut Correcto`, 4000) 107 | }) 108 | .catch(error => { 109 | Materialize.toast(`Error al realizar SignOut => ${error}`, 4000) 110 | }) 111 | } 112 | 113 | $('#emailSesion').val('') 114 | $('#passwordSesion').val('') 115 | $('#modalSesion').modal('open') 116 | }) 117 | 118 | $('#avatar').click(() => { 119 | firebase 120 | .auth() 121 | .signOut() 122 | .then(() => { 123 | $('#avatar').attr('src', 'imagenes/usuario.png') 124 | Materialize.toast(`SignOut correcto`, 4000) 125 | }) 126 | .catch(error => { 127 | Materialize.toast(`Error al realizar SignOut ${error}`, 4000) 128 | }) 129 | }) 130 | 131 | $('#btnTodoPost').click(() => { 132 | $('#tituloPost').text('Posts de la Comunidad') 133 | const post = new Post() 134 | post.consultarTodosPost() 135 | }) 136 | 137 | $('#btnMisPost').click(() => { 138 | const user = firebase.auth().currentUser 139 | if (user) { 140 | const post = new Post() 141 | post.consultarPostxUsuario(user.email) 142 | $('#tituloPost').text('Mis Posts') 143 | } else { 144 | Materialize.toast(`Debes estar autenticado para ver tus posts`, 4000) 145 | } 146 | }) 147 | }) 148 | -------------------------------------------------------------------------------- /public/js/post/post.js: -------------------------------------------------------------------------------- 1 | class Post { 2 | constructor () { 3 | this.db = firebase.firestore() 4 | const settings = { timestampsInSnapshots: true } 5 | this.db.settings(settings) 6 | } 7 | 8 | crearPost (uid, emailUser, titulo, descripcion, imagenLink, videoLink) { 9 | return this.db 10 | .collection('posts') 11 | .add({ 12 | uid: uid, 13 | autor: emailUser, 14 | titulo: titulo, 15 | descripcion: descripcion, 16 | imagenLink: imagenLink, 17 | videoLink: videoLink, 18 | fecha: firebase.firestore.FieldValue.serverTimestamp() 19 | }) 20 | .then(refDoc => { 21 | console.log(`Id del post => ${refDoc.id}`) 22 | }) 23 | .catch(error => { 24 | console.error(`Error creando el post => ${error}`) 25 | }) 26 | } 27 | 28 | consultarTodosPost () { 29 | this.db 30 | .collection('posts') 31 | .orderBy('fecha', 'asc') 32 | .orderBy('titulo', 'asc') 33 | .onSnapshot(querySnapshot => { 34 | $('#posts').empty() 35 | if (querySnapshot.empty) { 36 | $('#posts').append(this.obtenerTemplatePostVacio()) 37 | } else { 38 | querySnapshot.forEach(post => { 39 | let postHtml = this.obtenerPostTemplate( 40 | post.data().autor, 41 | post.data().titulo, 42 | post.data().descripcion, 43 | post.data().videoLink, 44 | post.data().imagenLink, 45 | Utilidad.obtenerFecha(post.data().fecha.toDate()) 46 | ) 47 | $('#posts').append(postHtml) 48 | }) 49 | } 50 | }) 51 | } 52 | 53 | consultarPostxUsuario (emailUser) { 54 | this.db 55 | .collection('posts') 56 | .orderBy('fecha', 'asc') 57 | .orderBy('titulo', 'asc') 58 | .where('autor', '==', emailUser) 59 | .onSnapshot(querySnapshot => { 60 | $('#posts').empty() 61 | if (querySnapshot.empty) { 62 | $('#posts').append(this.obtenerTemplatePostVacio()) 63 | } else { 64 | querySnapshot.forEach(post => { 65 | let postHtml = this.obtenerPostTemplate( 66 | post.data().autor, 67 | post.data().titulo, 68 | post.data().descripcion, 69 | post.data().videoLink, 70 | post.data().imagenLink, 71 | Utilidad.obtenerFecha(post.data().fecha.toDate()) 72 | ) 73 | $('#posts').append(postHtml) 74 | }) 75 | } 76 | }) 77 | } 78 | 79 | subirImagenPost (file, uid) { 80 | const refStorage = firebase.storage().ref(`imgsPosts/${uid}/${file.name}`) 81 | const task = refStorage.put(file) 82 | 83 | task.on( 84 | 'state_changed', 85 | snapshot => { 86 | const porcentaje = snapshot.bytesTransferred / snapshot.totalBytes * 100 87 | $('.determinate').attr('style', `width: ${porcentaje}%`) 88 | }, 89 | err => { 90 | Materialize.toast(`Error subiendo archivo = > ${err.message}`, 4000) 91 | }, 92 | () => { 93 | task.snapshot.ref 94 | .getDownloadURL() 95 | .then(url => { 96 | console.log(url) 97 | sessionStorage.setItem('imgNewPost', url) 98 | }) 99 | .catch(err => { 100 | Materialize.toast(`Error obteniendo downloadURL = > ${err}`, 4000) 101 | }) 102 | } 103 | ) 104 | } 105 | 106 | obtenerTemplatePostVacio () { 107 | return `
108 |
109 |
Crea el primer Post a la comunidad
110 |
111 |
112 | 113 | 114 | 115 | 116 | 117 |
118 |
119 | 121 | 122 |
123 |
124 | Video 125 |
126 |
127 |

Crea el primer Post a la comunidad

128 |
129 |
130 |
131 |
` 132 | } 133 | 134 | obtenerPostTemplate ( 135 | autor, 136 | titulo, 137 | descripcion, 138 | videoLink, 139 | imagenLink, 140 | fecha 141 | ) { 142 | if (imagenLink) { 143 | return `
144 |
145 |
${titulo}
146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 |
154 |
155 | Imagen Video 157 |
158 |
159 | Ver Video 160 |
161 |
162 |

${descripcion}

163 |
164 |
165 |
166 |
167 | Fecha: ${fecha} 168 |
169 |
170 | Autor: ${autor} 171 |
172 |
173 |
174 |
` 175 | } 176 | 177 | return `
178 |
179 |
${titulo}
180 |
181 |
182 | 183 | 184 | 185 | 186 | 187 |
188 |
189 | 191 | 192 |
193 |
194 | Video 195 |
196 |
197 |

${descripcion}

198 |
199 |
200 |
201 |
202 | Fecha: ${fecha} 203 |
204 |
205 | Autor: ${autor} 206 |
207 |
208 |
209 |
` 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /public/js/post/postController.js: -------------------------------------------------------------------------------- 1 | $(() => { 2 | $('#btnModalPost').click(() => { 3 | $('#tituloNewPost').val('') 4 | $('#descripcionNewPost').val('') 5 | $('#linkVideoNewPost').val('') 6 | $('#btnUploadFile').val('') 7 | $('.determinate').attr('style', `width: 0%`) 8 | sessionStorage.setItem('imgNewPost', null) 9 | 10 | const user = firebase.auth().currentUser 11 | 12 | if (user == null) { 13 | Materialize.toast(`Para crear el post debes estar autenticado`, 4000) 14 | return 15 | } 16 | 17 | $('#modalPost').modal('open') 18 | }) 19 | 20 | $('#btnRegistroPost').click(() => { 21 | const post = new Post() 22 | const user = firebase.auth().currentUser 23 | 24 | if (user == null) { 25 | Materialize.toast(`Para crear el post debes estar autenticado`, 4000) 26 | return 27 | } 28 | 29 | const titulo = $('#tituloNewPost').val() 30 | const descripcion = $('#descripcionNewPost').val() 31 | const videoLink = $('#linkVideoNewPost').val() 32 | const imagenLink = sessionStorage.getItem('imgNewPost') == 'null' 33 | ? null 34 | : sessionStorage.getItem('imgNewPost') 35 | 36 | post 37 | .crearPost( 38 | user.uid, 39 | user.email, 40 | titulo, 41 | descripcion, 42 | imagenLink, 43 | videoLink 44 | ) 45 | .then(resp => { 46 | Materialize.toast(`Post creado correctamente`, 4000) 47 | $('.modal').modal('close') 48 | }) 49 | .catch(err => { 50 | Materialize.toast(`Error => ${err}`, 4000) 51 | }) 52 | }) 53 | 54 | $('#btnUploadFile').on('change', e => { 55 | const file = e.target.files[0] 56 | const user = firebase.auth().currentUser 57 | const post = new Post() 58 | post.subirImagenPost(file, user.uid) 59 | }) 60 | }) 61 | -------------------------------------------------------------------------------- /public/js/util/util.js: -------------------------------------------------------------------------------- 1 | class Utilidad { 2 | static obtenerFecha (timeStamp) { 3 | const d = new Date(timeStamp) 4 | let month = '' + (d.getMonth() + 1) 5 | let day = '' + d.getDate() 6 | let year = d.getFullYear() 7 | 8 | if (month.length < 2) month = '0' + month 9 | if (day.length < 2) day = '0' + day 10 | 11 | return [day, month, year].join('/') 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "gcm_sender_id": "103953800507" 3 | } -------------------------------------------------------------------------------- /public/notificaciones-sw.js: -------------------------------------------------------------------------------- 1 | importScripts('https://www.gstatic.com/firebasejs/5.5.8/firebase-app.js') 2 | importScripts('https://www.gstatic.com/firebasejs/5.5.8/firebase-messaging.js') 3 | 4 | firebase.initializeApp({ 5 | projectId: 'blogeekplatzi-4836b', 6 | messagingSenderId: '359502061382' 7 | }) 8 | 9 | const messaging = firebase.messaging() 10 | 11 | // Función que se ejecuta en background para recibir las notificaciones 12 | messaging.setBackgroundMessageHandler(payload => { 13 | const tituloNotificacion = 'Ya tenemos un nuevo post' 14 | const opcionesNotificacion = { 15 | body: payload.data.titulo, 16 | icon: 'icons/icon_new_post.png', 17 | click_action: 'https://blogeekplatzi-4836b.firebaseapp.com/' 18 | } 19 | 20 | return self.registration.showNotification( 21 | tituloNotificacion, 22 | opcionesNotificacion 23 | ) 24 | }) 25 | -------------------------------------------------------------------------------- /public/stylus/index.styl: -------------------------------------------------------------------------------- 1 | colorPrimario = #126798 2 | colorBlanco = #FFFFFF 3 | colorAzulAguaMarina = #219cca 4 | colorAccent = #7acc2d 5 | colorGris = #eeeeee 6 | 7 | @font-face { 8 | font-family: "Flaticon"; 9 | src: url("../fonts/Flaticon.eot"); 10 | src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), 11 | url("../fonts/Flaticon.woff") format("woff"), 12 | url("../fonts/Flaticon.ttf") format("truetype"), 13 | url("../fonts/Flaticon.svg#Flaticon") format("svg"); 14 | font-weight: normal; 15 | font-style: normal; 16 | } 17 | 18 | @media screen and (-webkit-min-device-pixel-ratio:0) { 19 | @font-face { 20 | font-family: "Flaticon"; 21 | src: url("../fonts/Flaticon.svg#Flaticon") format("svg"); 22 | } 23 | } 24 | 25 | [class^="flaticon-"]:before, [class*=" flaticon-"]:before, 26 | [class^="flaticon-"]:after, [class*=" flaticon-"]:after { 27 | font-family: Flaticon; 28 | font-size: 20px; 29 | font-style: normal; 30 | margin-left: 20px; 31 | } 32 | 33 | @font-face { 34 | font-family: 'icono_estrellita_vacia'; 35 | src: url('../fonts/icomoon.eot?n253df'); 36 | src: url('../fonts/icomoon.eot?n253df#iefix') format('embedded-opentype'), 37 | url('../fonts/icomoon.ttf?n253df') format('truetype'), 38 | url('../fonts/icomoon.woff?n253df') format('woff'), 39 | url('../fonts/icomoon.svg?n253df#icomoon') format('svg'); 40 | font-weight: normal; 41 | font-style: normal; 42 | } 43 | 44 | @font-face { 45 | font-family: 'icono_estrellita_llena'; 46 | src: url('../fonts/estrellallena.eot?az4rfq'); 47 | src: url('../fonts/estrellallena.eot?az4rfq#iefix') format('embedded-opentype'), 48 | url('../fonts/estrellallena.ttf?az4rfq') format('truetype'), 49 | url('../fonts/estrellallena.woff?az4rfq') format('woff'), 50 | url('../fonts/estrellallena.svg?az4rfq#icomoon') format('svg'); 51 | font-weight: normal; 52 | font-style: normal; 53 | } 54 | 55 | @font-face { 56 | font-family: 'googleicon'; 57 | src: url('../fonts/googleicon.eot?9927647'); 58 | src: url('../fonts/googleicon.eot?9927647#iefix') format('embedded-opentype'), 59 | url('../fonts/googleicon.woff?9927647') format('woff'), 60 | url('../fonts/googleicon.ttf?9927647') format('truetype'), 61 | url('../fonts/googleicon.svg?9927647#googleicon') format('svg'); 62 | font-weight: normal; 63 | font-style: normal; 64 | } 65 | 66 | 67 | .btnPpal 68 | 69 | background colorAccent !important 70 | font-family 'Montserrat', sans-serif 71 | font-weight bold 72 | transition .5s 73 | 74 | &:hover 75 | background colorAccent 76 | color white 77 | font-size 17px 78 | 79 | body 80 | font-family: 'Allerta', sans-serif; 81 | 82 | .headerppal 83 | background colorPrimario 84 | overflow hidden 85 | box-shadow 0 8px 10px rgba(0,0,0,0.5) 86 | padding-bottom 30px 87 | text-align center 88 | 89 | .titulo 90 | color colorBlanco 91 | font-size 40px 92 | font-family 'Montserrat', sans-serif 93 | margin-top 30px 94 | margin-bottom 0 95 | 96 | .titulo-a 97 | color colorBlanco 98 | font-size 20px 99 | padding-top 5px 100 | padding-bottom 15px 101 | 102 | .header-logotipo 103 | margin-right 5em 104 | margin-left 50px 105 | margin-top 20px 106 | 107 | img 108 | border-right-style solid 109 | border-width 2px 110 | border-color white 111 | border-radius 60% 112 | height 140px 113 | padding 20px 114 | width 140px 115 | transition .6s 116 | 117 | &:hover 118 | transform scale(1.2) 119 | 120 | .header-avatar 121 | display none 122 | float right 123 | margin-top -200px 124 | margin-right 50px 125 | 126 | img 127 | border-radius 60% 128 | height 80px 129 | width 80px 130 | transition .6s 131 | transform translateY(100px) 132 | 133 | .menu 134 | background colorAzulAguaMarina 135 | border-left 10px solid white 136 | box-shadow 0 8px 10px rgba(0,0,0,0.5) 137 | 138 | ul 139 | margin 0px 140 | 141 | li 142 | display block 143 | line-height 40px 144 | transition .6s 145 | 146 | &:hover 147 | background colorPrimario 148 | 149 | a 150 | color colorBlanco 151 | text-decoration none 152 | padding 0 1em 153 | transition .6s 154 | 155 | &:hover 156 | font-size 17px 157 | 158 | .footer 159 | 160 | height 100% 161 | background colorPrimario 162 | margin 0px 163 | 164 | .contenedor-footer 165 | display flex 166 | flex-direction column-reverse 167 | justify-content space-around 168 | 169 | .formulario-contactenos 170 | display flex 171 | flex-direction column 172 | margin-left 20px 173 | 174 | .form-col1 175 | .form-col2 176 | margin-right 30px 177 | color white 178 | display flex 179 | flex-direction column 180 | 181 | label 182 | input 183 | margin-bottom 10px 184 | 185 | .form-col1 186 | 187 | label 188 | color white 189 | 190 | .form-col1 191 | margin-top 10px 192 | margin-bottom 10px 193 | 194 | .tipos-comentarios 195 | display flex 196 | flex-direction column 197 | 198 | label 199 | font-size 13px 200 | 201 | .form-col2 202 | align-items flex-start 203 | 204 | label 205 | color white 206 | margin-bottom 1em 207 | 208 | textarea 209 | margin-bottom 10px 210 | height 110px 211 | 212 | .redesSociales 213 | 214 | .realizadopor 215 | padding-top 30px 216 | 217 | .realizadoclase 218 | padding-bottom 30px 219 | 220 | p 221 | color colorBlanco 222 | text-align center 223 | margin 10px 224 | 225 | .logos-redes 226 | 227 | text-align center 228 | 229 | a 230 | text-decoration none 231 | 232 | .logo-facebook 233 | 234 | &:before 235 | 236 | color colorAccent 237 | content: "\f101" 238 | font-size 30px 239 | font-family "Flaticon" 240 | 241 | .logo-twitter 242 | 243 | &:before 244 | color colorAccent 245 | content: "\f102" 246 | font-size 30px 247 | font-family "Flaticon" 248 | 249 | .logo-github 250 | 251 | &:before 252 | color colorAccent 253 | content: "\f100" 254 | font-size 30px 255 | font-family "Flaticon" 256 | 257 | .posts 258 | 259 | padding 0.8em 260 | margin 0px 261 | text-align center 262 | 263 | .post 264 | 265 | background colorBlanco 266 | border 1px solid black 267 | box-shadow 10px 9px 25px -1px rgba(0,0,0,0.75) 268 | display block 269 | margin-bottom 1.5em 270 | margin-right 1.5em 271 | width 100% 272 | 273 | .post-calificacion 274 | text-align center 275 | padding 0.5em 276 | 277 | .post-estrellita-vacia 278 | 279 | text-decoration none 280 | 281 | &:before 282 | color colorAccent 283 | content: "\e9d7" 284 | font-family "icono_estrellita_vacia" 285 | 286 | .post-estrellita-llena 287 | 288 | text-decoration none 289 | 290 | &:before 291 | color colorAccent 292 | content: "\e9d9" 293 | font-family "icono_estrellita_llena" 294 | 295 | .post-titulo 296 | text-align center 297 | background colorGris 298 | font-family 'Montserrat', sans-serif 299 | padding 0.5em 300 | 301 | h5 302 | font-weight bold 303 | 304 | .post-video 305 | text-align center 306 | padding 0 0.5em 307 | 308 | iframe 309 | width 100% 310 | height 300px 311 | 312 | .post-imagen-video 313 | width 100% 314 | height 300px 315 | 316 | .post-descripcion 317 | text-align center 318 | background colorGris 319 | font-family: 'Allerta', sans-serif; 320 | padding 0.5em 321 | font-size 17px 322 | 323 | .post-videolink 324 | text-align center 325 | background colorPrimario 326 | color colorBlanco 327 | font-family 'Allerta', sans-serif 328 | padding 0.5em 329 | font-size 17px 330 | 331 | a 332 | color colorBlanco 333 | text-decoration underline 334 | 335 | .post-footer 336 | background colorPrimario 337 | color colorBlanco 338 | font-size 17px 339 | padding-bottom 0.5em 340 | padding-top 1em 341 | padding-left 0.5em 342 | text-align left 343 | width 100% 344 | 345 | .modal-registro 346 | width 80% !important 347 | 348 | .registro-bienvenida 349 | text-align center 350 | width 100% 351 | 352 | h4 353 | color colorPrimario 354 | font-size 1.5em 355 | font-family 'Montserrat', sans-serif 356 | font-weight bold 357 | margin-bottom 0.5em 358 | 359 | .registro-bienvenida-texto 360 | margin-bottom 1em 361 | font-size 1em 362 | text-align left 363 | 364 | span 365 | color colorAccent 366 | font-size 1.2em 367 | font-weight bold 368 | 369 | .registro-formulario 370 | 371 | border-left 0.3em solid colorPrimario 372 | 373 | div 374 | margin 0 375 | 376 | label 377 | color colorPrimario 378 | font-size 1em 379 | 380 | a 381 | margin-top 2em 382 | text-align center 383 | width 80% !important 384 | 385 | .div-btnInicioSesion 386 | text-align center 387 | 388 | a 389 | background colorPrimario !important 390 | 391 | .lbl-ingresar-redes 392 | color colorPrimario 393 | font-weight bold 394 | padding-top 1em 395 | text-align center 396 | 397 | .registro-iconos-redes 398 | 399 | background colorBlanco !important 400 | 401 | text-align center 402 | 403 | .logo-facebook 404 | 405 | &:before 406 | 407 | color colorAccent 408 | content: "\f101" 409 | font-size 40px 410 | font-family "Flaticon" 411 | 412 | .logo-google 413 | 414 | margin-left 1em 415 | 416 | &:before 417 | 418 | color colorAccent 419 | content: "\f2b3" 420 | font-size 45px 421 | font-family "googleicon" 422 | 423 | .logo-twitter 424 | 425 | margin-left 1em 426 | 427 | &:before 428 | color colorAccent 429 | content: "\f102" 430 | font-size 40px 431 | font-family "Flaticon" 432 | 433 | .div-btnRegistrarse 434 | text-align center 435 | margin-top 2em 436 | margin-bottom 0em 437 | 438 | a 439 | background colorPrimario !important 440 | 441 | .titulo-posts 442 | color colorPrimario 443 | font-weight bold 444 | text-align center 445 | 446 | #btnUploadFile 447 | background colorPrimario !important 448 | font-family 'Montserrat', sans-serif 449 | font-weight bold 450 | transition .5s 451 | margin-bottom 1em 452 | margin-top 1em 453 | 454 | @media screen and (min-width: 768px) 455 | 456 | .headerppal 457 | text-align left 458 | 459 | .header-logotipo 460 | float left 461 | 462 | .header-avatar 463 | display inline-block 464 | 465 | .menu 466 | 467 | ul 468 | height 40px 469 | 470 | li 471 | display inline-block 472 | 473 | .posts 474 | .post 475 | display inline-block 476 | margin-top 25px 477 | width 47% 478 | 479 | .post-descripcion 480 | height 120px 481 | 482 | .footer 483 | 484 | .contenedor-footer 485 | display flex 486 | flex-direction row 487 | justify-content space-around 488 | 489 | .formulario-contactenos 490 | display flex 491 | flex-direction row 492 | margin-top 30px 493 | 494 | .form-col1 495 | margin-top 0 496 | margin-bottom 0 497 | 498 | .tipos-comentarios 499 | display flex 500 | flex-direction row 501 | 502 | .redesSociales 503 | margin-top 40px 504 | margin-bottom 45px 505 | padding-right 3em 506 | border-right 3px solid white 507 | 508 | 509 | .registro-bienvenida 510 | text-align left 511 | 512 | h4 513 | margin-bottom 1em 514 | font-size 2em 515 | 516 | .registro-bienvenida-texto 517 | margin-bottom 2em 518 | font-size 1.5em 519 | 520 | span 521 | font-size 1.5em 522 | 523 | .modal-registro 524 | width 70% !important --------------------------------------------------------------------------------