Link preview working.

src/wiki/forms.py

@@ -234,6 +234,9 @@ class EditForm(forms.Form, SpamProtectionMixin):
     title = forms.CharField(
         label=_("Title"),
     )
+    # preview_text = forms.CharField(
+    #     label=_("Preview Text"),
+    # )
     content = forms.CharField(
         label=_("Contents"), required=False
     )  # @UndefinedVariable
@@ -390,6 +393,9 @@ class CreateForm(forms.Form, SpamProtectionMixin):
         ),
         max_length=models.URLPath.SLUG_MAX_LENGTH,
     )
+    # preview_text = forms.CharField(
+    #     label=_("Preview Text"),
+    # )
     content = forms.CharField(
         label=_("Contents"), required=False, widget=getEditor().get_widget()
     )  # @UndefinedVariable

src/wiki/models/article.py

@@ -415,6 +415,17 @@ class ArticleRevision(BaseRevisionMixin, models.Model):
         ),
     )
 
+    # preview_text = models.CharField(
+    #     max_length=1024,
+    #     verbose_name=_("preview text"),
+    #     null=False,
+    #     blank=False,
+    #     default="",
+    #     help_text=(
+    #         "Please fill out the preview text."
+    #     )
+    # )
+
     # TODO:
     # Allow a revision to redirect to another *article*. This
     # way, we can have redirects and still maintain old content.

src/wiki/static/wiki/js/previewlink.js

@@ -0,0 +1,53 @@
+/**
+ * Creates a link preview of a specific div from the target URL when a link is hovered.
+ * @param {string} linkSelector - CSS selector for the links to preview.
+ * @param {string} divSelector - CSS selector for the div to extract from the target page.
+ */
+
+function setupLinkPreview(linkSelector, divSelector) {
+  const preview = document.createElement('div');
+  preview.style.position = 'absolute';
+  preview.style.border = '1px solid #ccc';
+  preview.style.width = '400px';
+  preview.style.height = '300px';
+  preview.style.overflow = 'auto';
+  preview.style.zIndex = '9999';
+  preview.style.display = 'none';
+  preview.style.backgroundColor = '#fff';
+  preview.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
+  preview.style.padding = '10px';
+  document.body.appendChild(preview);
+  const links = document.querySelectorAll(linkSelector);
+  links.forEach(link => {
+    link.addEventListener('mouseover', async (e) => {
+      try {
+        const response = await fetch(link.href);
+        const html = await response.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const targetDiv = doc.querySelector(divSelector);
+        if (targetDiv) {
+          preview.innerHTML = targetDiv.innerHTML;
+          preview.style.display = 'block';
+          preview.style.left = `${e.pageX + 10}px`;
+          preview.style.top = `${e.pageY + 10}px`;
+        } else {
+          preview.innerHTML = '<p>Target div not found.</p>';
+          preview.style.display = 'block';
+        }
+      } catch (error) {
+        preview.innerHTML = '<p>Failed to load preview.</p>';
+        preview.style.display = 'block';
+      }
+    });
+
+    link.addEventListener('mouseout', () => {
+      preview.style.display = 'none';
+      preview.innerHTML = '';
+    });
+  });
+}
+
+// Example usage:
+// Call this function after the DOM is loaded.
+// setupLinkPreview('a.external-link', '#target-div');

src/wiki/templates/wiki/article.html

@@ -1,6 +1,5 @@
 {% extends "wiki/base.html" %}
-{% load wiki_tags i18n sekizai_tags %}
-
+{% load wiki_tags i18n sekizai_tags static %}
 
 {% block wiki_pagetitle %}{{ article.current_revision.title }}{% endblock %}
 
@@ -9,7 +8,7 @@
 {% endblock %}
 
 {% block wiki_contents %}
-
+  <!-- article.html -->
   <div id="article-container">
    <nav id="article-menu" class="navbar navbar-expand-md nav-pills">
     <ul class="navbar-nav w-75">

src/wiki/templates/wiki/base_site.html

@@ -121,6 +121,8 @@
       <!-- Reserved for breadcrumbs -->
       {% block wiki_breadcrumbs %}{% endblock %}
 
+<!--  base_site.html    -->
+
       <!-- Main page contents go here -->
       {% block wiki_contents %}{% endblock %}
 
@@ -146,6 +148,10 @@
     <script src="{% static "wiki/bootstrap/js/bootstrap.bundle.min.js" %}"></script>
 
     <script src="{% static "wiki/js/respond.min.js" %}"></script>
+    <script src="{% static "wiki/js/previewlink.js" %}"></script>
+    <script>
+        window.addEventListener("DOMContentLoaded", setupLinkPreview('a.internal-link', '.wiki-article'), false);
+    </script>
     {% render_block "js" %}
 
   </body>

src/wiki/templates/wiki/view.html

@@ -1,7 +1,7 @@
 {% extends "wiki/article.html" %}
 {% load wiki_tags i18n sekizai_tags %}
 
-
+<!-- view.html -->
 {% block wiki_contents_tab %}
 
   {% wiki_render article %}

src/wiki_main/settings.py

@@ -27,6 +27,8 @@ DEBUG = True
 
 ALLOWED_HOSTS = []
 
+# NOTE: allow frame links for the same base url
+X_FRAME_OPTIONS = 'SAMEORIGIN'
 
 # Application definition