Use jQuery to allow users to like/unlike posts with dynamic updates

- Only the pages that need jQuery and the likes.js script will load it

templates/layouts/base.html

@@ -9,6 +9,25 @@
             <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/js/all.min.js"
                     integrity="sha512-YUwFoN1yaVzHxZ1cLsNYJzVt1opqtVLKgBQ+wDj+JyfvOkH66ck1fleCm8eyJG9O1HpKIf86HrgTXkWDyHy9HA=="
                     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            {% if use_jquery %}
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
+                        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
+                        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+                <script>
+                    let csrf_token = "{{ csrf_token() }}";
+
+                    $.ajaxSetup({
+                        beforeSend: function (xhr, settings) {
+                            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
+                                xhr.setRequestHeader("X-CSRFToken", csrf_token);
+                            }
+                        }
+                    });
+                </script>
+                {% if use_likes %}
+                    <script src="{{ url_for('static', filename='likes.js') }}"></script>
+                {% endif %}
+            {% endif %}
             <link rel="preload" href="{{ url_for('static', filename='roadrunner_header.png') }}" as="image">
         {% endblock %}
     </head>