Merge branch 'fixErrors' into dev

assets/highlight/dracula.css

@@ -0,0 +1,81 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/dracula/highlightjs
+ *
+ * Copyright 2016-present, All rights reserved
+ *
+ * Code licensed under the MIT license
+ *
+ * @author Denis Ciccale <dciccale@gmail.com>
+ * @author Zeno Rocha <hi@zenorocha.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282a36;
+}
+
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link {
+  color: #8be9fd;
+}
+
+.hljs-keyword {
+  color: #ff79c6;
+}
+
+.hljs,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-meta-keyword {
+  font-style: italic;
+  color: #50fa7b;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-name,
+.hljs-type,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f1fa8c;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: #6272a4;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-literal,
+.hljs-number {
+  color: #bd93f9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

assets/scripts/article/article.js

@@ -15,6 +15,10 @@
 * junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
 */
 
+// ---------------------- Init the hightlight functionality ------------------
+hljs.highlightAll();
+
+// ---------------------- Animation heart ------------------
 const post = document.querySelector('.post__copy');
 const heart = document.querySelector('.icon');
 
@@ -25,3 +29,21 @@ post.addEventListener("click", () => {
         heart.classList.remove("beat");
     }, 1200);
 });
+
+// ---------------------- Fix images for the content post ------------------
+const imagesPost = document.querySelectorAll('.post__copy img');
+
+// Get the media query
+const mediaQuery = window.matchMedia('(min-width: 768px)');
+mediaQuery.addEventListener('change',handleDeviceChange);
+
+//handle the event when changes the size and get the media query 
+function handleDeviceChange(e){
+    imagesPost.forEach(image => {
+        image.parentElement.classList.toggle('post__container-img')    
+    });
+}
+
+// execute for the fisrt time when the page load and apply the changes
+handleDeviceChange();
+

assets/styles/pages/article/article-desktop.css

@@ -103,9 +103,19 @@ header:hover {
     width: initial;
 } */
 
+/* Estilos generales para el contenido del articulo */
+
+.post__copy img {
+    width: 50%;
+}
+
+/* Estilos para el codigo incrustado */
+.post__copy pre code {
+    font-size: 1.2rem;
+}
 
 
-
+/* Estilos para la seccion de popular posts */
 .popular-posts {
     width: 100%;
     background-color: initial;

assets/styles/pages/article/article.css

@@ -260,6 +260,7 @@ header::before {
 .post__copy h4,
 .post__copy h5,
 .post__copy h6 {
+    margin: 0;
     margin-top: 2.2rem;
 }
 
@@ -293,6 +294,12 @@ header::before {
     height: 100%;
     object-fit: cover;
 }
+
+/* Acomodar las imagenes en medio, se agrega esta clasea al contenedor de la imagen desde JS */
+.post__container-img {
+    text-align: center;
+}
+
 /* Estilos para los enlaces */
 .post__copy a {
     color: var(--color-black);
@@ -314,6 +321,33 @@ header::before {
   display: inline;
 }
 
+/* Estilos para el codigo incrustado */
+.hljs {
+    background: transparent;
+}
+
+.post__copy pre {
+    padding: 20px;
+    background-color: #383A59;
+    color: white;
+}
+
+.post__copy pre[data-lang]::before { 
+    content: attr(data-lang); 
+    display: block; 
+}
+
+.post__copy pre code {
+    max-width: 100%;
+    min-width: 100px;
+    padding: 0;
+    display: block;
+    white-space: pre;
+    overflow-x: auto;
+    font-size: 0.8rem;
+    -webkit-overflow-scrolling: touch;
+}
+
 /* Estilos de la sección de otros post para mostrar */
 
 .popular-posts {

views/pages/article.php

@@ -37,13 +37,14 @@
 <!-- Archivos de javascript a cargar -->
 <?php $scripts = array(
     'home.js',
-    'article/article.js',
 ) ?>
 
 <!-- HTML head -->
+<link rel="stylesheet" href="/assets/highlight/dracula.css">
 <?php require_once 'views/components/head.php' ?>
 <?php require_once 'views/components/messages.php' ?>
 
+
 <!-- HTML body -->
 <header>
     <!-- Imagen de fondo dl post -->
@@ -83,6 +84,11 @@
     </aside>
 
     <article class="post__copy">
+        <pre>
+            <code>
+                const hi = 2;
+            </code>
+        </pre>
         <?= $article['body'] ?>
     </article>
 </section>
@@ -159,3 +165,5 @@
 </section>
 
 <?php require_once 'views/components/footer.php' ?>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js" defer></script>
+<script src="/assets/scripts/article/article.js" defer></script>