fix(*): profile widget description overflow & add a gitalk option

includes/specs/comment.spec.js

@@ -58,6 +58,12 @@ const GitmentGitalkSpec = {
             [type]: 'string',
             [required]: true
         }
+    },
+    distraction_free_mode: {
+        [type]: 'boolean',
+        [doc]: 'Facebook-like distraction free mode',
+        [defaultValue]: false,
+        [requires]: comment => comment.type === 'gitalk'
     }
 };
 

layout/comment/gitalk.ejs

@@ -15,7 +15,8 @@
         id: '<%= md5(page.path) %>',
         repo: '<%= get_config('comment.repo') %>',
         owner: '<%= get_config('comment.owner') %>',
-        admin: <%- JSON.stringify(get_config('comment.admin'))%>
+        admin: <%- JSON.stringify(get_config('comment.admin'))%>,
+        distractionFreeMode: <%= get_config('comment.distraction_free_mode', false) %>
     })
     gitalk.render('comment-container')
 </script>

layout/comment/gitment.ejs

@@ -10,7 +10,7 @@
 <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
 <script>
 	var gitment = new Gitment({
-		id: '<%= page.path %>',
+		id: '<%= md5(page.path) %>',
 		owner: '<%= get_config('comment.owner') %>',
 		repo: '<%= get_config('comment.repo') %>',
 		oauth: {

layout/widget/profile.ejs

@@ -12,7 +12,7 @@
 <div class="card widget">
     <div class="card-content">
         <nav class="level">
-            <div class="level-item has-text-centered">
+            <div class="level-item has-text-centered" style="flex-shrink: 1">
                 <div>
                     <% if (get_config_from_obj(widget, 'avatar_rounded')) { %>
                         <figure class="image is-128x128 has-mb-6">