JS

package.json

@@ -17,5 +17,10 @@
         "sass": "^1.54.0",
         "tailwindcss": "^3.1.0",
         "vite": "^3.0.0"
+    },
+    "dependencies": {
+        "autosize": "^5.0.1",
+        "jquery": "^3.6.0",
+        "moment": "^2.29.4"
     }
 }

pnpm-lock.yaml

@@ -5,15 +5,23 @@ specifiers:
   '@tailwindcss/forms': ^0.5.2
   alpinejs: ^3.4.2
   autoprefixer: ^10.4.2
+  autosize: ^5.0.1
   axios: ^0.27
   bootstrap: ^5.2.0
+  jquery: ^3.6.0
   laravel-vite-plugin: ^0.5.0
   lodash: ^4.17.19
+  moment: ^2.29.4
   postcss: ^8.4.6
   sass: ^1.54.0
   tailwindcss: ^3.1.0
   vite: ^3.0.0
 
+dependencies:
+  autosize: 5.0.1
+  jquery: 3.6.0
+  moment: 2.29.4
+
 devDependencies:
   '@popperjs/core': 2.11.5
   '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.8
@@ -25,7 +33,7 @@ devDependencies:
   lodash: 4.17.20
   postcss: 8.4.14
   sass: 1.54.0
-  tailwindcss: 3.1.8
+  tailwindcss: 3.1.8_postcss@8.4.14
   vite: 3.0.4_sass@1.54.0
 
 packages:
@@ -61,7 +69,7 @@ packages:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.14
     dev: true
 
   /@vue/reactivity/3.1.5:
@@ -131,6 +139,10 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /autosize/5.0.1:
+    resolution: {integrity: sha512-UIWUlE4TOVPNNj2jjrU39wI4hEYbneUypEqcyRmRFIx5CC2gNdg3rQr+Zh7/3h6egbBvm33TDQjNQKtj9Tk1HA==}
+    dev: false
+
   /axios/0.27.2:
     resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
     dependencies:
@@ -570,6 +582,10 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /jquery/3.6.0:
+    resolution: {integrity: sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==}
+    dev: false
+
   /laravel-vite-plugin/0.5.2_vite@3.0.4:
     resolution: {integrity: sha512-6ufssMvfF3IK/t1hRiYApTB6MHnpIAEZxte+V89aOt5T4CP8OVCPY5qvFBGwddW+yoVEOH5lnojSAD5YzM5T1w==}
     engines: {node: '>=14'}
@@ -623,6 +639,10 @@ packages:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
     dev: true
 
+  /moment/2.29.4:
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
+    dev: false
+
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -806,10 +826,12 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /tailwindcss/3.1.8:
+  /tailwindcss/3.1.8_postcss@8.4.14:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3

resources/js/app.js

@@ -1,7 +1,32 @@
 import 'bootstrap';
+import 'moment';
+import jQuery from 'jquery';
+import 'autosize';
 
-import Alpine from 'alpinejs';
+/*import Alpine from 'alpinejs';
 
 window.Alpine = Alpine;
 
 Alpine.start();
+*/
+
+jQuery(document).on('ready', function($){
+    $('.date').each(function(){
+        if ($(this).text() != '')
+        {
+            var day = moment($(this).text());
+            $(this).text(day.fromNow()+", "+day.format('LL'));
+        }
+    });
+
+    if ($('#new_comment').length > 0) {
+        $('#new_comment').load($('#new_comment').data('url'), function(){
+            $('#new_comment').html($('#new_comment').html().replace(/-ID-/g, $('#new_comment').data('id')));
+            autosize($('textarea'));
+        });
+    }
+
+    if ($('#comments').length > 0) {
+        $('#comments').load($('#comments').data('url'));
+    }
+});

resources/views/single.blade.php

@@ -20,10 +20,14 @@
       <div property="text">{!! $content !!}</div>
       <div property="text">{!! $item['content'] !!}</div>
       <div class="comment_section">
+        @if (!empty($load_comments_action))
         <a name="comments"></a>
+        @endif
         {!! $tags !!}
+        @if (!empty($load_comments_action))
         <div id="comments" data-url="{!! $load_comments_action !!}"></div>
         <div id="new_comment" data-url="{!! $load_comment_form_action !!}"></div>
+        @endif
       </div>
     </div>
 @endsection

resources/views/view.hbs

@@ -1,3 +0,0 @@
-<div class="hyphenate">
-  {{{content}}}
-</div>