Complete theme rework. v1.0.0

mehdisadeghi · Jan 5, 2018 · ee6fb1a · ee6fb1a
1 parent 38faf46
commit ee6fb1a
Show file tree

Hide file tree

Showing 18 changed files with 282 additions and 162 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    jekyll-theme-mehdix-rtl (0.2.4)
+    jekyll-theme-mehdix-rtl (1.0.0)
       jekyll (~> 3.3)
       jekyll-default-layout (~> 0.1)
       jekyll-hinduarabic (~> 0.1)

diff --git a/_config.yml b/_config.yml
@@ -35,7 +35,7 @@ collections:
   projects:
     output: true
 
-#comment_system: disqus # or disqus. Default is no comments.
+comment_system: static # or disqus. Default is no comments.
 #disqus_shortname: mehdix
 #google_analytics_id: UA-57282325-1
 feedburner_id: mehdixir
@@ -46,5 +46,6 @@ twitter:
 github:
   username: mehdisadeghi
   repository: mehdix.ir
-logo: assets/img/me.png
-lang: fa_IR
+# Footer logo will disappear if not set.
+#logo: assets/img/me.png
+lang: fa_IR
diff --git a/_data/comments/netlify.yml b/_data/comments/netlify.yml
@@ -0,0 +1,37 @@
+- bucket: !!binary |
+    Z0FBQUFBQmFUTGJHdGstMWlIaTdfNGZGdlhhSzdyRUJUdWRicmtnRU40RVVIMlVWZ0l2aXhFdUxo
+    X2M4cldjS0pyaHFVMFRSRTFHbzZTdGpqSTlmdGZCZWZoWE5QaktVXzROMmR4VDVHUEExeF9hSG5f
+    RWZiZTQ9
+  date: '2018-01-03T10:55:42.854Z'
+  email: 27b6f3ebc1535b4b11b1508ec7c7364c
+  message: من یه دامنه و هاست دارم که به هم متصل بودن، تصورم این بود که میشه مثل CloudFlare
+    این Netlify رو بین این دو قرار بدم، وارد Netlify شدم و دامنم رو به DNS Zone اضافه
+    کردم، چهار تا NameServer داد که دامنم روی اونا تنظیم کردم، بعد تو Netlify اومدم
+    توی قسمت DNS Records دو تا NameServer هاستم رو در قالب  NS وارد کردم، الان بعد
+    یه روز دامنم به هاست متصل نمیشه. نمیدونم ایراد کارم کجاست؟
+  name: روح اله
+  page_date: 2017-12-16 00:00:00 +0100
+  page_id: /netlify
+  page_title: فعالسازی HTTPS به کمک Netlify
+  page_uuid: df8977bd-9a2f-4ef7-9e9f-49459afefb71
+  website: ''
+- bucket: !!binary |
+    Z0FBQUFBQmFUUGxhcjd1bVNURlg1bUZaeFVZSnp5MWI0VXV3aWFaWUY1bERDNDFSTXlKVjJYa0hZ
+    ZnpXTjNzS0pOcU0yMlFUd05pYUVhMnk0czBEUU1FWmpZUlpiNFhOekhJcFdtaUQxNjZFeFQzQTlp
+    ZzU3S3M9
+  date: '2018-01-03T15:39:47.386Z'
+  email: 0371f5b900b484368f9e1717d7d965b1
+  message: "> تصورم این بود که میشه مثل CloudFlare این Netlify رو بین این دو قرار\
+    \ بدم\r\n\r\nنتلیفای سایت دیگه‌ای رو نمی‌تونه سرو کنه. همه چیز باید رو خودش باشه.\
+    \ مناسب سایتهای استاتیکه.\r\n\r\n> بعد تو Netlify اومدم توی قسمت DNS Records دو\
+    \ تا NameServer هاستم رو در قالب NS وارد کردم\r\n\r\nاین قسمت فقط به درد تعریف\
+    \ رکوردهای جدید می‌خوره. مثلا تعریف زیر دامنه برای ایمیل. نمی‌تونی هاستت خودت\
+    \ رو اینجا وارد کنی.\r\n\r\nکلا نمی‌تونی از نتلیفای برای اضافه کردن https به سرور\
+    \ یا هاست شخصی خودت استفاده کنی مگر اینکه استاتیک باشه و کاملا از روی نتلیفای\
+    \ سرو بشه. مطلب رو اصلاح می‌کنم که باعث سردرگمی نشه."
+  name: مهدی صادقی
+  page_date: 2017-12-16 00:00:00 +0100
+  page_id: /netlify
+  page_title: فعالسازی HTTPS به کمک Netlify
+  page_uuid: df8977bd-9a2f-4ef7-9e9f-49459afefb71
+  website: https://mehdix.ir
diff --git a/_includes/disqus_count.html b/_includes/disqus_count.html
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -2,7 +2,9 @@
 
   <div class="wrapper">
 
-    <img id="footer-gravatar" src="{{ 'assets/img/me.png' | absolute_url }}" alt="">
+    {% if site.config.log %}
+      <img id="footer-gravatar" src="{{ 'assets/img/me.png' | absolute_url }}" alt="">
+    {% endif %}
 
     <p id="footer-description">{{ site.long_description }}</p>
 
@@ -41,14 +43,14 @@
           <a href="mailto:{{ site.email }}">
             <span class="username social-media-text">تماس</span></a></li>
       {% endif %}
-      <li id="atom">
-        <span class="icon"><a href="https://validator.w3.org/feed/check.cgi?url={{ '' | absolute_url | append:'feed.xml'}}"><img src={{ "assets/img/valid-atom.png" | absolute_url }} alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a></span>
-      </li>
     </ul>
 
+  <div id="footer-extra">
+    {% include license.html %}
+    <a id="atom" href="https://validator.w3.org/feed/check.cgi?url={{ '' | absolute_url | append:'feed.xml'}}"><img src={{ "assets/img/valid-atom.png" | absolute_url }} alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>
   </div>
 
-  {% include license.html %}
+  </div>
 
   <small id="build-time">Site generated on {{ site.time | date_to_rfc822 }}</small>
 

diff --git a/_includes/license.html b/_includes/license.html
@@ -1,6 +1,7 @@
-<div id="license"><small>
-  <a id="license-link" rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.fa"><img alt="مجوز کریتیو کامنز" style="border-width:0" src="{{'assets/img/creativecommons80x15.png' | absolute_url}}" /></a>
+<small id="license">
+  <i class="fab fa-creative-commons"></i>
   مطالب این وبلاگ تحت مجوز
-  <a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.fa"> 
-کریتیو کامنز اتریبیوشن ۴.۰ اینترنشنال </a>قرار دارد.
-</small></div>
+  <a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.fa">
+    کریتیو کامنز اتریبیوشن ۴.۰ اینترنشنال
+  </a>قرار دارد.
+</small>
diff --git a/_includes/static_comments.html b/_includes/static_comments.html
@@ -5,7 +5,7 @@
   {% assign comments = site.data.comments[key] %}
   {% if comments %}
   <div id="comments">
-    <h4>کامنت‌دونی</h4>
+    <h4 id="comments-header">نظرات خوانندگان</h4>
     {% for comment in comments %}
       <article>
         <div class="comment-image-wrapper">
@@ -48,7 +48,7 @@ <h4>کامنت‌دونی</h4>
       <input id="website" type="url" name="website">
     </label>
     <div style="text-align:left">
-      <button type="submit">ارسال</button>
+      <button type="submit" class="button">ارسال</button>
     </div>
   </form>
 

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -1,27 +1,40 @@
 ---
 layout: default
 ---
+<h1 class="post-list-header">مقالات</h1>
 <ul class="post-list">
   {% for post in paginator.posts %}
     <li class="post-list-item">
-      <span class="meta date">{{ post.date | jdate: "%A %d %b %Y" | habify }}</span>
+      <!--span class="meta date">{{ post.date | jdate: "%A %d %b %Y" | habify }}</span-->
       <h2><a href="{{ post.url | absolute_url }}">{{ post.title }}</a></h2>
       {{ post.content | strip_html | truncatewords: 35 }}
     </li>
   {% endfor %}
-</ul>
 
-<nav class="pagination">
-  {% if paginator.previous_page %}
-  <a href="{{ paginator.previous_page_path | absolute_url }}" class="pagination--pager" title="{{ page.previous.title }}">قبلی </a>
-  {% else %}
-  <a href="#" class="pagination--pager disabled"">قبلی </a>
-  {% endif %}
 
-  {% if paginator.next_page %}
-  <a href="{{ paginator.next_page_path | absolute_url }}" class="pagination--pager" title="{{ page.next.title }}">بعدی</a>
-  {% else %}
-  <a href="#" class="pagination--pager disabled"">بعدی</a>
-  {% endif %}
-</nav>
+{% if paginator.total_pages > 1 %}
+
+  <nav class="a-pagination">
+    {% if paginator.previous_page %}
 
+      <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"><i class="fas fa-forward"></i></a>
+    {% endif %}
+
+    {% for page in (1..paginator.total_pages) %}
+      {% if page == paginator.page %}
+        <span class="is-active">{{ page | habify}}</span>
+      {% elsif page == 1 %}
+        <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page | habify }}</a>
+      {% else %}
+        <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page | habify }}</a>
+      {% endif %}
+    {% endfor %}
+
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}"><i class="fas fa-backward"></i></a>
+    {% endif %}
+  </nav>
+
+{% endif %}
+
+</ul>
diff --git a/_layouts/minimal.html b/_layouts/minimal.html
@@ -5,10 +5,10 @@ <h1 class="page-heading">❖ &nbsp; همه‌ی نوشته‌ها</h1>
 <ul class="post-list-mini">
   {% for post in site.posts %}
     <li class="post-list-item">
-      <span class="list-meta-col date">
-        {{ post.date | jdate: "%A %d %b %Y" | habify }}
+      <span class="list-meta-col">
+        {{ post.date | jdate: "%d %b %Y" | habify }}
       </span>
-      <span>
+      <span class="list-line">
         <a href="{{ post.url  | absolute_url }}">{{ post.title }}</a>
       </span>
     </li>

diff --git a/_posts/2017-12-16-netlify.md b/_posts/2017-12-16-netlify.md
@@ -0,0 +1,38 @@
+---
+title: فعالسازی HTTPS به کمک Netlify
+layout: post
+uuid: df8977bd-9a2f-4ef7-9e9f-49459afefb71
+category: راهنما
+tags: امنیت https cdn ssl
+---
+
+از امروز این وبسایت علاوه بر HTTP از طریق [HTTPS][تی‌تی‌پی‌اس] هم در دسترس است. در این مطلب شرح می‌دهم چطور اینکار را انجام دادم.
+
+قبل از اینکه شیرجه بزنیم داخل راهنما، یک توضیح کوچک راجع به HTTPS بدهم. هر سایت می‌تواند به صورت HTTP یا HTTPS سرو شود. وقتی اطلاعات با HTTP سرو می‌شود هر کامپیوتری بین کامپیوتر یا موبایل ما و سایت مقصد هم لینک را می‌بیند و هم محتوا را، شامل عکس، رمز، متن و مانند اینها. از اینها گذشته می‌تواند آنرا تغییر بدهد، مثل کاری که چند وقت پیش ایرانسل انجام می‌داد و در صفحاتی که با HTTP سرو می‌شدند تبلیغات نمایش می‌داد. اما اگر وبسایتی با HTTPS سرو بشود محتوا بین کامپیوتر ما و سرور مقصد رمز می‌شود و قابل فهم نیست. امکان تغییر اطلاعات هم نیست چون مرورگر خطا می‌دهد. البته مهم است که از مرورگر سالم و دست‌نخورده استفاده کنیم، چرا که مرورگر لیست گواهینامه‌هایی که می‌تواند به آنها اعتماد کند در دل خودش دارد. تنها چیزی که کامپیوترهای بین راه در این حالت می‌بینند نام دامنه است. آنها حتی رشته‌ای که بعد از نامه دامنه می‌آیند را نخواهند دید. مثلا با مراجعه به [https://mehdix.ir/bookmarker.html][بوکمارکر] سرورهای بین راه فقط https://mehdix.ir را می‌بینند و باقی غیرقابل فهم است. قبلا در مورد [گواهینامه][گواهینامه] نوشته‌ام.
+
+وبسایت من استاتیک است یعنی سروری از خودش ندارد و از Github سرو می‌شود. گیت‌هاب برای دامین‌های شخصی فعالسازی HTTPS را پشتیبانی نمی‌کند. برای اینکه بدون استفاده از سرور مجزا بتوان HTTPS را فعال کرد تنها یک راه وجود دارد، باید از یک CDN استفاده کرد. CDN اختصار Content Delivery Network است. با بکارگیری CDN وبسایت از طریق شبکه بزرگی از سرورهایی که در قاره‌های مختلف پراکنده‌اند سرو می‌شود. معمولا برای سرو کردن عکس‌ها و فایل‌های استاتیک از این تکنیک استفاده می‌شود، هدف اصلی هم کاهش ترافیک سرور اصلی و افزایش سرعت دسترسی به وبسایت است.
+
+از جایی که CDN مثل یک پر‌اکسی عمل می‌کند ما می‌توانیم به کمک آن HTTPS را برای وبسایتمان فعال کنیم. معروفترین CDN‌ای که اینکار را انجام می‌دهد CloudFlare است ولی متاسفانه به دامین‌های `.ir` خدمات نمی‌دهد. شرکت دیگری که خدمات مشابه و بسیار برنامه‌نویس‌پسند! ارائه می‌دهد نامش [Netlify][نتلیفای] است که یک استارت‌اپ تازه‌تاسیس در سانفرانسیسکوست. من با کمک این سرویس HTTPS را برای وبسایتم فعال کردم.
+
+چیزی که باعث حیرت من شد کیفیت بسیار بالا و راحتی بسیار زیاد کار با Netlify بود. از طرفی برای دامین‌های ایران هم محدودیت ندارد. (ولی شاید در آینده با گسترش شرکت به فکر محدود کردن بیفتند) به طور خلاصه خدمات زیر را در پلن رایگانشان ارائه می‌کنند:
+
+1. بیلد و دیپلوی کردن ریپازیتوری از روی گیت‌هاب
+2. مدیریت دامنه جداگانه برای هر مخزن نرم‌افزاری (می‌شود یک وبسایت به هر مخزن منسوب کرد.)
+3. فعالسازی HTTPS از طریق صدور گواهینامه Let's Encrypt
+4. افزایش سرعت لود با استفاده از  CDN این شرکت
+5. بهینه‌سازی و فشرده‌سازی فایلهای وبسایت 
+6. مدیریت فرم‌های HTML و ارسال محتوا از طریق WebHook
+7. امکان انجام Split Testing روی ترافیک (گروهی از کاربران دیزاین دیگری می‌بینند)
+8. امکان افزودن مدیریت کاربران به سایتهای استاتیک
+
+و البته خیلی امکانات دیگر که در وبسایتشان توضیح داده‌اند. 
+
+مراحل فعالسازی هم بسیار ساده بود. من ابتدا یک اکانت ساختم و بعد به شکل اتوماتیک مخزن گیت‌هابی که محتوای سایتم روی آن است را انتخاب کردم. از جایی که خودشان بیلد جکیل را ساپورت می‌کردند نیازی به افزودن فایل کانفیگ مجزا هم نبود. فقط از جایی که بیلد صحیح سایت من به نسخه جدیدتری از روبی نسبت به نسخه دیفالت بیلدسرور آنها نیاز داشت یک فایل `.ruby-version` به مخزن اضافه کردم. از سوی دیگر آدرسهای سرور دامنه‌ای که اختصارا برای هر مخزن تولید می‌شود را در وبسایت ایرنیک وارد کردم تا دامنه mehdix.ir توسط Netlify هدایت بشود.
+
+در مجموع خیلی راضی هستم و در پروژه‌های بیشتری از Netlify استفاده خواهم کرد.
+
+
+[نتلیفای]: http://netlify.com/
+[تی‌تی‌پی‌اس]: https://mehdix.ir
+[بوکمارکر]: /bookmarker.html
+[گواهینامه]: /free-https-for-all.html
diff --git a/_posts/2018-01-03-dummy.md b/_posts/2018-01-03-dummy.md
@@ -1,5 +1,5 @@
 ---
-title: عنوانی بس طولانی و به غیت مشکل‌ساز که مانده‌ایم با آن چه کنیم!
+title: عنوانی بس طولانی و به غایت مشکل‌ساز که مانده‌ایم با آن چه کنیم!
 tags: ذن zen
 uuid: 0b64d07f-6c08-475b-a509-463df5458040
 category: ذن

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -39,12 +39,13 @@ ul, ol, dl, figure,
 }
 
 h1, h2:not(.footer-heading), h3, h4, h5, h6 {
+    margin-top: 2.1rem;
     color: darken($header-color, 20%);
-    margin-bottom: unset;
 }
 
 h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
+    color: $header-color;
 }
 
 img {
@@ -61,10 +62,6 @@ figcaption {
     font-size: $small-font-size;
 }
 
-ul, ol {
-    margin-left: $spacing-unit;
-}
-
 ul {
     list-style-type: square;
 }
@@ -81,7 +78,8 @@ li {
 }
 
 a {
-    color: darken($brand-color, 20%);
+    //color: darken($brand-color, 20%);
+    color: $header-color;
     text-decoration: none;
 }
 
@@ -94,10 +92,10 @@ blockquote {
     line-height: 1.45;
     color: $grey-color;
     margin: 0;
-    background-color: lighten($brand-color, 55%);
+    //background-color: lighten($brand-color, 55%);
 
     >  p {
-        border-right: 4px solid $brand-color;
+        border-right: 4px solid lighten($brand-color, 30%);
         padding: $spacing-unit / 2;
     }
 }