more visual compatibility with original casper

eueung · Jan 6, 2018 · dc592fb · dc592fb
1 parent 44aecad
commit dc592fb
Show file tree

Hide file tree

Showing 21 changed files with 515 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
 # Casper Two
 
-[Casper Two](https://github.com/eueung/hugo-casper-two) is a port of the [Casper](https://github.com/TryGhost/Casper), the default personal blogging theme for Ghost. While a legacy version (v1.x) has [already been ported](https://github.com/vjeantet/hugo-theme-casper) to Hugo years ago, it is incompatible with the recent 2.x version. So I ended up porting this new Casper version. It is currently functional, but not covered all page templates yet. They may be added in the future updates.
+[Casper Two](https://github.com/eueung/hugo-casper-two) is a port of the [Casper](https://github.com/TryGhost/Casper), the default personal blogging theme for Ghost. While a legacy version (v1.x) has [already been ported](https://github.com/vjeantet/hugo-theme-casper) to Hugo years ago, it is incompatible with the recent 2.x version. So I ended up porting this new Casper version. 
 
 ![Screenshot](https://raw.githubusercontent.com/eueung/hugo-casper-two/master/images/screenshot.png)
 
 ## Theme Demo
 
-- [Sample Site](//eueung.github.io/hugo-casper-two/)
+- [Sample Site](//eueung.github.io/hugo-casper-new/)
 
 ## Installation
 
 Inside the folder of your Hugo site run:
 
     $ cd themes
-    $ git clone https://github.com/eueung/hugo-casper-two.git casper-two
+    $ git clone https://github.com/eueung/hugo-casper-new.git casper-new
 
 For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
 
@@ -57,6 +57,9 @@ paginate        = 6
 
   pageNotFoundTitle = "404 - Page not found"
 
+  #casper or caspertwo
+  singleViewStyle = "casper"
+
 [permalinks]
   post = "/:slug/"
 
@@ -83,6 +86,7 @@ paginate        = 6
 
 Sample content structure is given in the `exampleSite` folder. Have fun!
 
+![Screenshot](https://raw.githubusercontent.com/eueung/hugo-casper-two/master/images/single.jpg)
 
 ## License
 

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -9,7 +9,7 @@ canonifyurls    = true
 [params]
   title       = "Hugo Casper Two"
   subtitle    = "Port of Casper 2.x for Hugo"
-  copyright   = "Released under the MIT license."
+  copyright   = "© 2018"
 
   cover       = "img/blog-cover.jpg"
   description = "Here is a description of your site."
@@ -35,6 +35,9 @@ canonifyurls    = true
 
   pageNotFoundTitle = "404 - Page not found"
 
+  #casper or caspertwo
+  singleViewStyle = "casper"
+
 [permalinks]
   post = "/post/:slug/"
 
@@ -49,8 +52,8 @@ canonifyurls    = true
   weight = 100
 
 [[menu.main]]
-  name = "Food"
-  url = "/categories/food/"
+  name = "Categories"
+  url = "/categories/"
   weight = 99
 
 [[menu.main]]

diff --git a/images/single.jpg b/images/single.jpg
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,13 +1,18 @@
 {{ partial "head" . }}
 
-<body class="home-template"><div class="site-wrapper"> 
-
-{{ partial "header" . }}
+{{if eq .Site.Params.singleViewStyle "casper"}}
+  <body class="error-template"><div class="site-wrapper">
+  {{ partial "header-sori-error" . }}
+{{else}}
+  <body class="home-template"><div class="site-wrapper"> 
+  {{ partial "header" . }}
+{{end}}
 
 <main id="site-main" class="site-main outer" role="main">
   <div class="inner">
-    <div class="post-feed">
-
+
+{{if ne .Site.Params.singleViewStyle "casper"}}
+<div class="post-feed">
 <article class="post-card post"> 
     <a class="post-card-image-link" href="{{ .Permalink }}">
       <div class="post-card-image" style="background-image: url({{$.Site.BaseURL}}defimg/{{ index (seq 7 | shuffle) 0 }}.jpg)"></div>
@@ -22,13 +27,29 @@ <h2 class="post-card-title">{{ .Site.Params.pageNotFoundTitle }}</h2>
       <section class="post-card-excerpt" style="padding: 0 25px;">
 
       </section>
-
     </div>
 </article>    
+</div>
+{{else}}
+  <section class="error-message">
+    <h1 class="error-code">404</h1>
+    <p class="error-description">{{ .Site.Params.pageNotFoundTitle }}</p>
+    <a class="error-link" href="{{"/"|absURL}}">Go to the front page →</a>
+  </section>
+{{end}}    
 
-    </div>
   </div>
 </main>
 
+{{if eq .Site.Params.singleViewStyle "casper"}}
+<aside class="outer">
+  <div class="inner">
+    <div class="post-feed">
+      {{ partial "post-list-term" . }}
+    </div>
+  </div>
+</aside>
+{{end}}
+
 {{ partial "footer" . }}
 </div>{{ partial "js" . }}</body></html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,11 +1,15 @@
 {{ partial "head" . }}
 
-<body class="ctsingle"><div class="site-wrapper"> 
+{{if ne .Site.Params.singleViewStyle "casper"}}<body class="ctsingle">
+{{else}}<body class="post-template">{{end}}
+  <div class="site-wrapper"> 
 
-{{ partial "header" . }}
+{{if ne .Site.Params.singleViewStyle "casper"}}{{ partial "header" . }}
+{{else}}{{ partial "header-sori" . }}{{end}}
 
 <main id="site-main" class="site-main outer" role="main">
   <div class="inner">
+    {{if ne .Site.Params.singleViewStyle "casper"}}
     <div class="post-feed">
       {{ partial "post-single" . }}
     </div>
@@ -19,9 +23,35 @@
           <a class="older-posts" href="{{ .PrevInSection.RelPermalink }}"><span class="hide">Previous Post</span> &rarr;</a>
       {{end}}
     </nav>
+
+    {{else}}
+      {{ partial "post-single-sori" . }}
+    {{end}}
+
     {{ partial "disqus" . }}
   </div>
 </main>
 
+{{if eq .Site.Params.singleViewStyle "casper"}}
+<aside class="read-next outer">
+  <div class="inner">
+    <div class="read-next-feed">      
+      {{ partial "readnext-random-sori" . }}
+      {{with .NextInSection}}
+      {{ partial "readnext-article-sori" . }}
+      {{end}}
+      {{with .PrevInSection}}
+      {{ partial "readnext-article-sori" . }}
+      {{end}}
+    </div>
+  </div>
+</aside>
+
+{{ partial "header-floating-sori" . }}
+{{end}}
+
 {{ partial "footer" . }}
-</div>{{ partial "js" . }}</body></html>
+</div>
+{{ partial "js" . }}
+{{if eq .Site.Params.singleViewStyle "casper"}}{{ partial "js-sori" . }}{{end}}
+</body></html>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -0,0 +1,30 @@
+{{ partial "head" . }}
+
+{{if eq .Site.Params.singleViewStyle "casper"}}
+  <body class="tag-template"><div class="site-wrapper">
+  {{ partial "header-sori-tag" . }}
+{{else}}
+  <body class="home-template"><div class="site-wrapper">
+  {{ partial "header" . }}
+{{end}}
+
+<main id="site-main" class="site-main outer" role="main">
+  <div class="inner">
+    <div class="post-feed">
+      {{ partial "post-list" . }}
+    </div>
+
+    <nav class="pagination" role="navigation">
+      {{if .Paginator.HasPrev}}
+          <a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
+      {{end}}
+      <span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
+      {{if .Paginator.HasNext}}
+          <a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
+      {{end}}
+    </nav>
+  </div>
+</main>
+
+{{ partial "footer" . }}
+</div>{{ partial "js" . }}</body></html>
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -0,0 +1,36 @@
+{{ partial "head" . }}
+
+{{if eq .Site.Params.singleViewStyle "casper"}}
+  <body class="tag-template"><div class="site-wrapper">
+  {{ partial "header-sori-term" . }}
+{{else}}
+  <body class="home-template"><div class="site-wrapper">
+  {{ partial "header" . }}
+{{end}}
+
+<main id="site-main" class="site-main outer" role="main">
+  <div class="inner">
+    {{if ne .Site.Params.singleViewStyle "casper"}}
+    <div class="post-feed">
+      {{ partial "post-list" . }}
+    </div>
+
+    <nav class="pagination" role="navigation">
+      {{if .Paginator.HasPrev}}
+          <a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
+      {{end}}
+      <span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
+      {{if .Paginator.HasNext}}
+          <a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
+      {{end}}
+    </nav>
+    {{else}}
+    <div class="post-feed">
+      {{ partial "post-list-term" . }}
+    </div>   
+    {{end}}
+  </div>
+</main>
+
+{{ partial "footer" . }}
+</div>{{ partial "js" . }}</body></html>
diff --git a/layouts/page/single.html b/layouts/page/single.html
@@ -1,14 +1,22 @@
 {{ partial "head" . }}
 
-<body class="ctsingle"><div class="site-wrapper"> 
+{{if ne .Site.Params.singleViewStyle "casper"}}<body class="ctsingle">
+{{else}}<body class="page-template">{{end}}
+<div class="site-wrapper"> 
+
+{{if ne .Site.Params.singleViewStyle "casper"}}{{ partial "header" . }}
+{{else}}{{ partial "header-sori" . }}{{end}}
 
-{{ partial "header" . }}
 
 <main id="site-main" class="site-main outer" role="main">
   <div class="inner">
+  	{{if ne .Site.Params.singleViewStyle "casper"}}
     <div class="post-feed">
       {{ partial "page-single" . }}
     </div>
+    {{else}}
+      {{ partial "page-single-sori" . }}
+    {{end}}
   </div>
 </main>
 

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,7 +1,7 @@
 <footer class="site-footer outer">
   <div class="site-footer-content inner">
     <section class="copyright" style="line-height: 1.3em;">
-      <a href="/">{{.Site.Params.orgName}}</a> &copy; 2017 <br>
+      <a href="/">{{.Site.Params.orgName}}</a> {{.Site.Params.copyright}} <br>
       <span style="font-size: 0.8em; color: #555;">Hugo port of <a href="https://github.com/TryGhost/Casper">Casper 2.1.7</a> by <a href="https://www.telematika.org">EM</a></span>
     </section>
     <nav class="site-footer-nav">

diff --git a/layouts/partials/header-floating-sori.html b/layouts/partials/header-floating-sori.html
@@ -0,0 +1,30 @@
+<div class="floating-header">
+  <div class="floating-header-logo">
+    <a href="{{"/" | absURL}}">
+      {{ if .Site.Params.logo }}<img src="{{ .Site.Params.logo  | absURL}}" alt="{{.Site.Title}}" />{{end}}
+      <span>{{.Site.Title}}</span>
+    </a>
+  </div>
+  <span class="floating-header-divider">&mdash;</span>
+  <div class="floating-header-title">{{.Title}}</div>
+  <div class="floating-header-share">
+    <div class="floating-header-share-label">Share this <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+     <path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"/></svg>
+    </div>
+
+    <a class="floating-header-share-tw" href="https://twitter.com/share?text={{.Title | safeHTML}}&amp;url={{.Permalink}}"
+          onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
+      </a>
+      <a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{.Permalink}}"
+          onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
+      </a>
+  </div>
+
+  <progress class="progress" value="0">
+    <div class="progress-container">
+      <span class="progress-bar"></span>
+    </div>
+  </progress>
+</div>
diff --git a/layouts/partials/header-sori-error.html b/layouts/partials/header-sori-error.html
@@ -0,0 +1,8 @@
+<header class="site-header outer no-cover">
+  <div class="inner">
+    <nav class="site-nav-center">
+      {{ if .Site.Params.logo }}
+      <a class="site-nav-logo" href="{{"/"|absURL}}"><img src="{{ .Site.Params.logo  | absURL}}" alt="{{ .Site.Params.Title }}" /></a>{{end}}
+    </nav>  
+  </div>
+</header>
diff --git a/layouts/partials/header-sori-tag.html b/layouts/partials/header-sori-tag.html
@@ -0,0 +1,42 @@
+<header class="site-header outer">
+  <div class="inner">
+    <nav class="site-nav">
+      <div class="site-nav-left">{{ if .Site.Params.logo }}
+        <a class="site-nav-logo" href="#"><img src="{{ .Site.Params.logo  | absURL}}" alt="{{ .Site.Params.Title }}" /></a>{{end}}
+
+        <ul class="nav" role="menu">
+        {{ $currentNode := . }}
+        {{with .Site.Menus.main}}
+        {{ range sort . "Weight" "desc"}}
+            <li class="{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .)}}nav-current{{end}}" role="menuitem">
+              <a href="{{.URL}}">{{.Name}}</a>
+            </li>
+        {{end}}{{end}}
+      </ul></div>
+
+      <div class="site-nav-right">
+        <div class="social-links">
+                    {{ if .Site.Params.fbName }}<a class="social-link social-link-fb" href="https://www.facebook.com/{{ .Site.Params.fbName }}" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg></a>{{end}}
+
+                    {{ if .Site.Params.twitterName }}<a class="social-link social-link-tw" href="https://twitter.com/{{ .Site.Params.twitterName }}" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg></a>{{end}}
+
+                    {{ if .Site.Params.githubName }}<a class="social-link" href="https://github.com/{{ .Site.Params.githubName }}" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>{{end}}
+        </div>  
+        {{ if .Site.Params.RSSLink}}
+        <a class="subscribe-button" href="{{.Site.Params.RSSLink }}">Subscribe</a> </div>
+        {{else}}
+        <a class="subscribe-button" href="{{if .IsNode}}{{.RSSLink}}{{else}}{{"index.xml" | absURL}}{{end}}">Subscribe</a>
+        {{end}}    
+      </div>
+
+    </nav>  
+
+    <div class="site-header-content">
+        <h1 class="site-title">{{.Title}}</h1>{{$.Scratch.Set "total" (len .Data.Pages)}}
+        <h2 class="site-description">
+                {{if ge ($.Scratch.Get "total") 2 }}A collection of {{$.Scratch.Get "total"}} posts
+                {{else}}{{$.Scratch.Get "total"}} post{{end}}
+        </h2>
+    </div>
+  </div>
+</header>