Accordion in header

Former-commit-id: a331539 [formerly 9507412] Former-commit-id: 5949e835ed8dd66a8cbbd8a970ffc0d1f0d09406 Former-commit-id: aadeb86
UtkarshVerma · Apr 11, 2018 · 4e2c3a1 · 4e2c3a1
1 parent f735152
commit 4e2c3a1
Show file tree

Hide file tree

Showing 13 changed files with 235 additions and 183 deletions.
diff --git a/README.md b/README.md
@@ -3,10 +3,11 @@
 ![Dream Plus Theme](https://github.com/UtkarshVerma/hugo-dream-plus/blob/master/images/original.png)
 This theme is an upgraded version of the [Dream Theme](https://github.com/g1eny0ung/hugo-theme-dream) by [Yue Yang](https://github.com/g1eny0ung) and contains tons of new features such as:
 
-* **Card** and **Post** views for the home page
+* "Card" and "Post" views for the home page
 * twemoji rendering
 * Table of contents for posts
 * Random image background
+* Disqus
 * Sidebar
 * Share card below posts
 * Device detection, that is whether the client device is a PC or phone.
@@ -19,8 +20,8 @@ This theme is an upgraded version of the [Dream Theme](https://github.com/g1eny0
 
 This theme can be used for two purposes:
 
-1. If you're making a site which links to other sites and your stuff all around the internet, then you can switch to **Card** view for that. I use this view for my home page here: [UtkarshVerma's Site](https://utkarshverma.me)
-2. If you're simply making a blog or another website with a bunch of posts, then switch to the **Post** view for that. I use this view for my blog: [UtkarshVerma's Blog](https://blog.utkarshverma.me)
+1. If you're making a site which links to other sites and your stuff all around the internet, then you can switch to card view for that. I use this view for my home page here: [UtkarshVerma's Site](https://utkarshverma.me)
+2. If you're simply making a blog or another website with a bunch of posts, then switch to the post view for that. I use this view for my blog: [UtkarshVerma's Blog](https://blog.utkarshverma.me)
 
 ## Installation
 The theme can be installed by running the following commands inside your **Hugo website** folder.
@@ -44,6 +45,7 @@ description = "Short description of the site"
 motto = "author's motto or short description"
 avatar = "<absolute path to avatar>"	//Leaving the avatar variable unset displays svg avatars
 ```
+
 After that, fill up the social variables at the end of the config file. This theme suports the following social sites: (The examples are given)
 
 * GitHub    - `github = "<username>"`
@@ -59,13 +61,14 @@ After that, fill up the social variables at the end of the config file. This the
 
 ### Toggling the views
 As stated earlier, this theme has two views, **Card view** and **Post view**. To define your desired view, modify the `contentType` variable as follows:
-* `contentType = "cards"    # Enables the card view.`   
-* `contentType = "post"     # Enables the post view.`
+```toml
+contentType = "cards"    # Enables the card view.   
+contentType = "post"     # Enables the post view.
+```
 
 One clear distinction between both the view is that **Card** view doesn't support posts, instead it redirects to the specified link, while **Post** view does.
 You may test them out yourselves by visiting my sites(stated above) which use them.
 Also, post/card creation is done differently for both the views. It is as follows:
-
 ```shell
 hugo new cards/example.md		//Card creation
 hugo new post/example.md		//Post creation
@@ -92,6 +95,13 @@ bgList = ["/images/bg1.jpeg", "/images/bg2.jpeg", "/images/bg3.jpeg"]
 ```
 You may also add blurring effect to the background image using `bgBlur`.
 
+### Disqus
+Disqus comment system may be used alongside this theme. It is enabled/disabled through the `disqusShortname` config variable. To **disable** Disqus comments, leave this config variable unset. To enable, simply enter your Disqus shortname as a string. For example,
+
+```toml
+disqusShortname = "disqusShortname = "UtkarshVermaBlog"
+``` 
+
 ###  Share card (Post view only)
 This card appears below your posts to allow sharing of your post on **Facebook** and **Twitter**. Enable/disable it through the `enableShareCard` variable by setting appropriate boolean values.
 

diff --git a/layouts/partials/author.html b/layouts/partials/author.html
@@ -0,0 +1,13 @@
+<section class="ui top attached center aligned inverted segment">
+	<div class="ui small circular image">
+		{{ if isset .Site.Params "avatar" }}
+		<img src="{{ .Site.Params.avatar }}">
+		{{ else }}
+		<img src="/img/avatar{{ index (shuffle (seq 1 4)) 0 }}.svg">
+		{{ end }}
+	</div>
+	<h3 class="ui header">
+		{{- .Site.Params.author -}}
+		<div class="sub header" style="color: white;">{{ $.Site.Params.motto }}</div>
+	</h3>
+</section>
diff --git a/layouts/partials/background.html b/layouts/partials/background.html
@@ -1,4 +1,9 @@
 <script type="text/javascript">
+	function setBackground(target, gradient) {
+		target.css({ background: gradient[0]})
+		target.css({ background: 'linear-gradient(to right, ' + connect(gradient) + ')'})
+	}
+
 	var dreamBodyBgSwitchIndex = 0
 	if(colorBG) {
 		var dreamBGGradients = [
@@ -35,8 +40,8 @@
 		}
 		else
 			bgImage = 'url(' + {{ .Site.Params.bgImage }} + ')'
-		console.log("Current background: " + bgImage.substring(bgImage.indexOf("bg"),bgImage.length -1) )
+		console.log('Current background: ' + bgImage.substring(bgImage.indexOf('bg'),bgImage.length -1) )
 		var target = document.getElementsByClassName('bg')[0]
-		target.setAttribute("style", "background-image:" + bgImage +" !important; filter:" + "blur(" + blurEff + "px)")
+		target.setAttribute('style', 'background-image:' + bgImage +' !important; filter:' + 'blur(' + blurEff + 'px)')
 	}	
 </script>
diff --git a/layouts/partials/categories.html b/layouts/partials/categories.html
@@ -0,0 +1,16 @@
+{{ range $name, $taxonomy := .Site.Taxonomies.categories }}	
+<div class="title" style="color: white; padding-bottom:0.2em;">
+	<i class="dropdown icon"></i>
+	<a href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}" style="color: white;" >{{ $name }}</a>     	
+</div>
+{{ range $taxonomy.Pages }}
+<div class="content">    		
+	<a class="item" href="{{ .Permalink }}">
+		<div>
+			<i class="cocktail icon"></i>
+			<p>{{ .LinkTitle }}</p>
+		</div>
+	</a>
+</div>
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/flip.html b/layouts/partials/flip.html
@@ -17,3 +17,29 @@
 		</section>
 	</div>
 </div>
+
+<script type="text/javascript">
+	$('.dream-flip-toggle').click(function () {
+		var target = $('.pusher')
+		if (dreamBodyBgSwitchIndex === 0) {
+    	if(colorBG)
+    	 	setBackground(dreamBody, dreamBodyBgSwitch[1])
+			dreamBodyBgSwitchIndex = 1
+			target.toggleClass('flip-it')
+			setTimeout( function () {
+				$('.front').css('display','none')
+				$('.back').css('display','block')
+			}, 300)
+	 	}
+    else {
+    	if(colorBG)
+    		setBackground(dreamBody, dreamBodyBgSwitch[0])
+     	dreamBodyBgSwitchIndex = 0     	
+     	target.toggleClass('flip-it')   
+     	setTimeout( function (){
+     		$('.front').css('display','block')
+				$('.back').css('display','none')
+			}, 300)			
+		}
+	})
+</script>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -0,0 +1,9 @@
+<section class="ui bottom attached center aligned inverted segment">
+	{{ if .Site.Params.siteStartYear }}
+	<p>© {{ if eq now.Year .Site.Params.siteStartYear }}{{ now.Year }}{{ else }}{{ .Site.Params.siteStartYear }} - {{ now.Year }}{{ end }} {{ .Site.Title }}</p>
+	{{ else }}
+	<p>© {{ now.Year }} {{ .Site.Title }}</p>
+	{{ end }}    
+	<p>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a> with <a href="https://github.com/UtkarshVerma/hugo-dream-plus" target="_blank">Dream Plus</a> theme.</p>
+</section>
+
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,64 +1,29 @@
-<section class="ui top attached center aligned inverted segment">
-	<div class="ui small circular image">
-		{{ if isset .Site.Params "avatar" }}
-		<img src="{{ .Site.Params.avatar }}">
-		{{ else }}
-		<img src="/img/avatar{{ index (shuffle (seq 1 4)) 0 }}.svg">
-		{{ end }}
-	</div>
-	<h3 class="ui header">
-		{{- .Site.Params.author -}}
-		<div class="sub header" style="color: white;">{{ $.Site.Params.motto }}</div>
-	</h3>
-	{{ if or (.Site.Params.enableCategories)  (.Site.Params.enableTags) }}
-	<a id="tag-category-pop" class="ui red right corner label">		
-		<i class="pointing down icon" title="{{ i18n "clickToPopTagsAndCategories" }}"></i>		
-	</a>
-	{{ end }}
-</section>
-
-{{ if .Site.Params.enableTags }}
-	{{ if .Site.Taxonomies.tags }}
-	<section class="ui attached center aligned inverted segment dream-tags">
-		{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
-		<a class="ui label" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}" title="{{ $name }}">{{ $name }}</a>
-		{{ end }}
-	</section>
-	{{ end }}
-{{ end }}
-
-{{ if .Site.Params.enableCategories }}
-	{{ if .Site.Taxonomies.categories }}
-	<section class="ui attached inverted segment dream-categories">
-		<div class="ui inverted accordion">
-			{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
-			<div class="title" style="text-align: initial;">
-				<i class="dropdown icon"></i>
-				<a href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}" class="item" style="color: white;">{{ $name }}</a>
-			</div>
-			<div class="content">
-				<div class="ui link inverted list">
-					{{ range $taxonomy.Pages }}
-					<div class="item" style="padding-left: 24px;">
-						<i class="cocktail icon"></i>
-						<div class="content">
-							<a href="{{ .Permalink }}" class="item">{{ .LinkTitle }}</a>
-						</div>
-					</div>
-					{{ end }}
-				</div>
+<div id="header" class="ui inverted segment">
+	<div class="ui inverted accordion">
+		{{ partial "author.html" . }}
+		<div class="title">
+			{{ if or (.Site.Params.enableCategories)  (.Site.Params.enableTags) }}
+			<div id="tag-category-pop" class="ui red right corner label">		
+				<i class="link pointing down icon" title="{{ i18n "clickToPopTagsAndCategories" }}"></i>		
 			</div>
 			{{ end }}
 		</div>
-	</section>
-	{{ end }}
-{{ end }}
-
-<section class="ui bottom attached center aligned inverted segment">
-	{{ if .Site.Params.siteStartYear }}
-	<p>© {{ if eq now.Year .Site.Params.siteStartYear }}{{ now.Year }}{{ else }}{{ .Site.Params.siteStartYear }} - {{ now.Year }}{{ end }} {{ .Site.Title }}</p>
-	{{ else }}
-	<p>© {{ now.Year }} {{ .Site.Title }}</p>
-	{{ end }}    
-	<p>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a> with <a href="https://github.com/UtkarshVerma/hugo-dream-plus" target="_blank">Dream Plus</a> theme.</p>
-</section>
+		<div id="tag-category" class="content active">
+			{{ if .Site.Params.enableTags }}
+			{{ if .Site.Taxonomies.tags }}
+			<section class="ui attached center aligned inverted segment dream-tags">
+				{{ partial "tags.html" . }}
+			</section>
+			{{ end }}
+			{{ end }}
+			{{ if .Site.Params.enableCategories }}
+			{{ if .Site.Taxonomies.categories }}
+			<section class="ui attached inverted segment dream-categories">
+				{{ partial "categories.html" . }}
+			</section>
+			{{ end }}
+			{{ end }}
+		</div>
+		{{ partial "footer.html" . }}
+	</div>
+</div>
diff --git a/layouts/partials/init.html b/layouts/partials/init.html
@@ -1,5 +1,5 @@
-<link rel="stylesheet" type="text/css" href="/css/semantic.min.css">
-<link rel="stylesheet" type="text/css" href="/css/site.css">
+<link rel="stylesheet" type="text/css" href="/css/semantic.min.css" />
+<link rel="stylesheet" type="text/css" href="/css/site.css" />
 {{ range $type, $val:= .Site.Params.customCSS }}
 	{{ if and ((gt (len $val) 0) (index $val "")) }}		 
 		<link rel="stylesheet" type="text/css" href="/{{ index $val }}">
@@ -23,4 +23,3 @@
 	var isMobile = ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
 	console.log("The client device is a "+(isMobile?"mobile":"PC")+".")
 </script>
-
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -1,53 +1,20 @@
-<div class="ui sidebar inverted vertical menu left" style="overflow: hidden !important; height: auto;">
-	<section class="ui top attached center aligned inverted segment">
-		<div class="ui small circular image">
-			{{ if isset .Site.Params "avatar" }}
-			<img src="{{ .Site.Params.avatar }}">
-			{{ else }}
-			<img src="/img/avatar{{ index (shuffle (seq 1 4)) 0 }}.svg">
-			{{ end }}
-		</div>
-	<h3 class="ui header">
-		{{- .Site.Params.author -}}
-		<div class="sub header" style="color: white;">{{ $.Site.Params.motto }}</div>
-	</h3>
-	</section>
-
+<div id="sidebar" class="ui sidebar inverted vertical menu left">
+	{{ partial "author.html" . }}
 	{{ if .Site.Params.enableTags }}
 	{{ if .Site.Taxonomies.tags }}
 	<section class="ui attached center aligned inverted segment sidebar-dream-tags">
-		{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
-		<a class="ui label" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}" title="{{ $name }}">{{ $name }}</a>
-		{{ end }}
+		{{ partial "tags.html" . }}
 	</section>
 	{{ end }}
 	{{ end }}
-
 	{{ if .Site.Params.enableCategories }}
 	{{ if .Site.Taxonomies.categories }}
 	<section class="ui attached inverted segment sidebar-dream-categories">
 		<div class="ui inverted accordion">
-			{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
-			<div class="title" style="color: white; padding-bottom:0.2em;">
-				<i class="dropdown icon"></i><a href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}" style="color: white;" >{{ $name }}</a>     	
-			</div>
-			{{ range $taxonomy.Pages }}
-			<div class="content" style="padding-left: 1em;">    		
-				<a class="item" href="{{ .Permalink }}" style="color: white; padding-bottom: 0.3em; padding-top: 0.3em;">{{ .LinkTitle }}</a>
-			</div>
-			{{ end }}
-     	{{ end }}
+			{{ partial "categories.html" . }}
 		</div>
 	</section>
 	{{ end }}
-	{{ end }}
-
-	<section class="ui bottom attached center aligned inverted segment">
-		{{ if .Site.Params.siteStartYear }}
-		<p>© {{ if eq now.Year .Site.Params.siteStartYear }}{{ now.Year }}{{ else }}{{ .Site.Params.siteStartYear }} - {{ now.Year }}{{ end }} {{ .Site.Title }}</p>
-		{{ else }}
-		<p>© {{ now.Year }} {{ .Site.Title }}</p>
-		{{ end }}    
-		<p>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a> with <a href="https://github.com/UtkarshVerma/hugo-dream-plus" target="_blank">Dream Plus</a> theme.</p>
-	</section>
+	{{ end }}	
+	{{ partial "footer.html" . }}
 </div>
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
@@ -0,0 +1,3 @@
+{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+<a class="ui label" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}" title="{{ $name }}">{{ $name }}</a>
+{{ end }}
diff --git a/layouts/partials/twemoji.html b/layouts/partials/twemoji.html
@@ -1,8 +1,8 @@
 <script src="/js/twemoji.min.js"></script>
 <script type="text/javascript">
 (function init(){
-	console.log("Twemoji up and making stuff colourful!");
-	twemoji.parse(document.getElementById("abt"));      
-	twemoji.parse(document.getElementById("twemoji"));                
+	console.log('Twemoji up and making stuff colourful!');
+	twemoji.parse(document.getElementById('abt'));      
+	twemoji.parse(document.getElementById('twemoji'));                
 })()
 </script>