Add native comments support. Close zutrinken#231

thehenrime · Sep 19, 2022 · 147c9de · 147c9de
1 parent 0cf985e
commit 147c9de
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -15,11 +15,10 @@ Maintaining this project takes a lot of time. You can [buy me a drink](https://p
 * Theme options
 * Responsive layout
 * Light and Dark Mode
-* Search & Popular Tags
+* Search support
 * Post reading progress
 * Code highlight including line numbers
-* Disqus support
-* Member menu buttons
+* Comments and Disqus (Theme option)
 * Ghost accent color
 
 ## 🌍 Localization
@@ -56,11 +55,6 @@ Maintaining this project takes a lot of time. You can [buy me a drink](https://p
 | `ja` | 🇯🇵 | Japanese | 🟩 | [emperorjoker](https://github.com/emperorjoker) |
 | `fa` | | Farsi | 🟩 | [ItsAminZamani](https://github.com/ItsAminZamani) |
 
-## Show subscribe / account button in navigation
-
-1. Go to `partials/navigation-meta.hbs`.
-2. Remove comments on line `24`and `34`.
-
 ## 🔠 Setup custom google fonts
 
 1. Go to [fonts.google.com](https://fonts.google.com/) and choose a font.
@@ -78,18 +72,6 @@ Maintaining this project takes a lot of time. You can [buy me a drink](https://p
 </style>
 ````
 
-## 🔍 Setup search
-
-1. Go to __Integrations__.  
-2. Choose __Add custom integration__, name it `Search` and choose __Create__. Copy the generated Content API Key.  
-3. Go to __Code injection__.  
-4. Add this to __Site Header__:  
-````html
-<script>
-  var gh_search_key = 'API_KEY';
-  var gh_search_migration = 'v2';
-</script>
-````
 ## ⚙️ Development
 
 Install [Grunt](https://gruntjs.com/getting-started/):

diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "attila",
   "description": "Ghost Theme",
   "demo": "https://attila.peteramende.de",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "engines": {
     "ghost": ">=5.0.0"
   },

diff --git a/post.hbs b/post.hbs
@@ -80,11 +80,17 @@
 
 			</section>
 
-
+			{{#if @custom.disqus_shortname}}
 			<section class="post-comments">
-				<a id="show-disqus" class="post-comments-activate">{{t "Show Comments"}}</a>
 			   <div id="disqus_thread"></div>
 			</section>
+			{{/if}}
+
+			{{#if comments}}
+			<section class="post-comments">
+				{{comments}}
+			</section>
+			{{/if}}
 
       {{#if @labs.subscribers}}
       <section class="post-subscribe">
@@ -181,19 +187,17 @@
 	  });
 
 		{{#if @custom.disqus_shortname}}
-			$('.post-comments').css({
-				'display': 'block'
-			});
 			var disqus = '{{@custom.disqus_shortname}}';
-	    $('#show-disqus').on('click', function() {
+	    function launchDisqus() {
 	      $.ajax({
 	        type: "GET",
 	        url: "//" + disqus + ".disqus.com/embed.js",
 	        dataType: "script",
 	        cache: true
 	      });
 	      $(this).parent().addClass('activated');
-	    });
+	    }
+			launchDisqus();
 		{{/if}}
   });
 </script>

diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -2047,45 +2047,24 @@ textarea {
    Post Comments
    ========================================================================== */
 .post-comments {
-	display: none;
 	position: relative;
 	padding: 4rem;
 	text-align: center;
+	background: var(--color-background-secondary);
+	border: 1px solid var(--color-background-contrast);
 	border-top: 1px solid var(--color-background-contrast);
 	border-bottom: 1px solid var(--color-background-contrast);
 	box-sizing: border-box;
 
-	&.activated {
-		background: var(--color-background-secondary);
-		border: 1px solid var(--color-background-contrast);
-	}
-}
-
-.post-comments-activate {
-	display: inline-block;
-	height: 4rem;
-	margin: 2rem 0;
-	padding: 0 2rem;
-	border: 1px solid var(--color-background-contrast);
-	font-weight: 500;
-	font-size: 1.6em;
-	line-height: 4rem;
-	color: var(--color-content-secondary);
-	text-align: center;
-	cursor: pointer;
-	transition: all ease 0.2s;
-	border-radius: 2em;
-
-	&:focus,
-	&:hover {
-		color: var(--color-content-main);
-		border-color: var(--ghost-accent-color);
+	@media only screen and (max-width: $breakpoint-medium) {
+		padding-left: 0;
+		padding-right: 0;
+		background: transparent;
+		border-left: 0;
+		border-right: 0;
 	}
 }
 
-.activated .post-comments-activate {
-	display: none;
-}
 /* ==========================================================================
    Post Subscribe
    ========================================================================== */