new page 404 whit card post and new style for related post

godofredoninja · Jan 20, 2018 · a6834dd · a6834dd
1 parent d1f2eb9
commit a6834dd
Show file tree

Hide file tree

Showing 22 changed files with 6,125 additions and 5,951 deletions.
diff --git a/assets/fonts/simply.eot b/assets/fonts/simply.eot
diff --git a/assets/fonts/simply.svg b/assets/fonts/simply.svg
diff --git a/assets/fonts/simply.ttf b/assets/fonts/simply.ttf
diff --git a/assets/fonts/simply.woff b/assets/fonts/simply.woff
diff --git a/assets/scripts/amp.js b/assets/scripts/amp.js
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
diff --git a/error.hbs b/error.hbs
@@ -1,27 +1,51 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-        <title>Page not found - {{meta_title}}</title>
-
-        <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />
-        <link rel="stylesheet" type="text/css" href="{{asset "styles/main.css"}}" />
-    </head>
-    <body>
-        <div class="errorPage u-relative">
-            <div class="errorPage-title">
-                <a class="errorPage-link u-relative u-fontSize22 u-contentTitle u-block" href="{{@blog.url}}">{{@blog.title}}</a>
-            </div>
-            <div class="errorPage-wrap u-textAlignCenter">
-                <div id="emoji" class="errorPage-emoji" style="font-size: 150px;">(>_<)</div>
-                <div class="errorPage-text">Unfortunately, this page doesn't exist</div>
+<html lang="{{lang}}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <title>Page not found</title>
+
+    <link rel="stylesheet" type="text/css" href="{{asset "styles/main.css"}}" />
+</head>
+<body class="u-backgroundWhite">
+
+    {{!-- Header Content --}}
+    {{>"header"}}
+
+    <main class="u-paddingBottom30 u-paddingTop30">
+        {{!-- Content Emojis --}}
+        <section class="errorPage u-lineHeight1">
+            <div class="errorPage-wrap u-marginAuto u-maxWidth1000 u-textAlignCenter">
+                <div id="emoji" class="errorPage-emoji" style="font-size:100px">(>_<)</div>
+                <div class="errorPage-text">{{t "Unfortunately, this page doesn't exist"}}</div>
             </div>
-        </div>
-        <script type="text/javascript">
-            var emoji = ['(·.·)', '(>_<)', '(^-^*)', '(≥o≤)', '(˚Δ˚)', '(·_·)', '(;-;)']
-            var emojiRandom = emoji[Math.floor(Math.random()*emoji.length)];
-            document.getElementById('emoji').innerHTML = emojiRandom;
-        </script>
-    </body>
+        </section>
+
+        {{!-- Articles style Card --}}
+        {{#get "posts" limit="6" include="tags" as |recents| }}
+            {{> "card-post" widgetTitle=(t "Posts") cardPosts=recents }}
+        {{/get}}
+    </main>
+
+    {{!-- Search box --}}
+    {{>"search"}}
+
+    {{!-- Scripts --}}
+    {{ghost_foot}}
+
+    <script type="text/javascript">
+        var emoji = ['(·.·)', '(>_<)', '(^-^*)', '(≥o≤)', '(˚Δ˚)', '(·_·)', '(;-;)']
+        var emojiRandom = emoji[Math.floor(Math.random()*emoji.length)];
+        document.getElementById('emoji').innerHTML = emojiRandom;
+    </script>
+
+    {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+
+    {{!-- The main JavaScript --}}
+    <script type="text/javascript" src="{{asset "scripts/main.js"}}"></script>
+
+    {{!--  Font Source sans Pro && roboto mono --}}
+    <script type="text/javascript">WebFontConfig ={google:{families:['Roboto+Mono:400','Source+Sans+Pro:300,400,600,700']}};(function(){var wf=document.createElement('script');wf.src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';wf.type='text/javascript';wf.async='true';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(wf,s);})();</script>
+</body>
 </html>
diff --git a/locales/en.json b/locales/en.json
@@ -37,5 +37,6 @@
     "Tag Cloud": "Tag Cloud",
     "Follow": "Follow",
     "Sign up for my newsletter!": "Sign up for my newsletter!",
-    "Related Articles": "Related Articles"
+    "Related Articles": "Related Articles",
+    "Unfortunately, this page doesn't exist": "Unfortunately, this page doesn't exist"
 }
diff --git a/locales/es.json b/locales/es.json
@@ -37,5 +37,6 @@
     "Tag Cloud": "Etiquetas",
     "Follow": "Seguir",
     "Sign up for my newsletter!": "¡Inscríbete a mi boletín de noticias!",
-    "Related Articles": "Artículos Relacionados"
+    "Related Articles": "Artículos Relacionados",
+    "Unfortunately, this page doesn't exist": "Lamentablemente, esta página no existe"
 }
diff --git a/partials/article-actions.hbs b/partials/article-actions.hbs
@@ -15,10 +15,10 @@
             {{/prev_post}}
 
             {{!-- Share Count Book --}}
-            <div class="share-box u-textAlignCenter u-hide-before-lg" style="margin-right: 15px;">
+            {{!-- <div class="share-box u-textAlignCenter u-hide-before-lg" style="margin-right: 15px;">
                 <span class="share-count u-block u-fontWeightBold u-contentTitle u-lineHeight1" data-url="{{url absolute="true"}}">0</span>
                 <span class="share-label u-block u-textColorNormal u-contentTitle u-fontSize13 u-lineHeight1 u-textUppercase">{{t "shares"}}</span>
-            </div>
+            </div> --}}
 
             <a href="#post-comments" class="button button--large button--chromeless button--dark u-fontSizeLarge scroll-id">
                 <i class="i-comments"></i>

diff --git a/partials/article-related.hbs b/partials/article-related.hbs
diff --git a/partials/article.hbs b/partials/article.hbs
@@ -40,8 +40,11 @@
 </article>
 {{/post}}
 
-{{!-- post relative --}}
-{{> "article-related"}}
+{{!-- Article related --}}
+{{#get "posts" limit="6" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
+    {{> "card-post" widgetTitle=(t "Article Related") cardPosts=related }}
+{{/get}}
+
 
 {{#post}}
     {{!-- post Commets --}}

diff --git a/partials/card-post.hbs b/partials/card-post.hbs
@@ -0,0 +1,53 @@
+<section class="cardPost u-backgroundWhite u-paddingTop30 u-paddingBottom20 u-overflowHidden">
+    <div class="u-marginAuto u-maxWidth1000">
+        <div class="row">
+
+        {{#foreach cardPosts}}
+            <article class="col s12 m6 l4 simply-tracking" data-event-category="Article" data-event-action="Related Posts" data-event-label="{{url absolute="true"}}" data-event-non-interaction="1">
+                <div class="u-card u-padding0">
+
+                    {{!-- Featured image cover --}}
+                    {{#if feature_image}}
+                    <div class="cardPost-image u-relative u-overflowHidden u-sizeFullWidth">
+                        <a href="{{url}}" class="cardPost-image--link u-block u-absolute0">
+                            <span class="u-absolute0 u-backgroundSizeCover u-backgroundColorGrayLight story-image-lazy" data-original="{{feature_image}}"></span>
+                        </a>
+                    </div>
+                    {{/if}}
+
+                    <div class="cardPost-body u-padding15 u-flexColumn" style="{{#unless feature_image}}height:100%;width:100%{{else}}height:135px {{/unless}}">
+
+                        <div class="u-flex1">
+                            {{!-- Primary tag --}}
+                            {{#primary_tag}}
+                                <a href="{{url}}" class="u-block postMetaInline u-lineHeight1 link--underline u-fontSize15 u-fontWeightSemibold" style="padding-bottom:7px">{{name}}</a>
+                            {{/primary_tag}}
+
+
+                            <a href="{{url}}" class="u-block">
+                                {{!-- title --}}
+                                <h2 class="cardPost-title u-contentTitle u-fontSize22 u-fontWeightBold u-overflowHidden u-paddingBottom2">{{title}}</h2>
+
+                                {{!-- excerpt --}}
+                                {{#unless feature_image}}
+                                <div class="u-textColorNormal" style="margin-top:7px"> {{excerpt words="20"}} </div>
+                                {{/unless}}
+                            </a>
+
+                        </div>
+
+                        {{!-- Date time and reading time --}}
+                        <div class="u-flex0 u-flexCenter u-fontSize14 postMetaInline u-paddingTop10">
+                            <time class="datetime" datetime="{{date format=" YYYY-MM-DD "}}">{{date published_at format="MMM DD"}}</time>
+                            <span class="points u-fontWeightBold" style="margin:0 5px;">·</span>
+                            <span class="readingTime">{{reading_time seconds=(t "< 1 min read") minute=(t "1 min read") minutes=(t "% min read")}}</span></1>
+                        </div>
+
+                    </div>
+                </div>
+            </article>
+        {{/foreach}}
+
+        </div>
+    </div>
+</section>