<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My blog</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="highlight.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
  <style>
    iframe {
      display: none;
    }
    pre {
      overflow-x: auto;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
  </style>
  
</head>
<body>
  <!-- change to your iframe link here -->
  <iframe 
    src="https://arpilmyroomim.neocities.org/embed/index.html?userId=a436c8"
    frameborder="none">
  </iframe>
  <!--change to your iframe link here -->
  <div>
  <h2> lipsum blipsum title ispsum</h2>
  </div>
  <div class = "text">
  <hr>
  <div class = "textstuff">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco yes you should write here </p>
  </div>
    <hr>
  </div>
  <div id="postcontainer">Loading...
  </div>
  

  <div class = "footer">
  <a style="margin: 0" href="#" onclick="openAskBox()">askbox</a>
  <p style ="margin: 0"> <a href= "https://tilde.club/~april/bloggable/">Bloggable</a> by <a href = "https://tilde.club/~april/">april</a></p>
  </div>
  
  
<div id="askModal" class="modal">
  <div class="modal-content">
  <div class = "titlebar">
    <span style = "position: relative; top: -9px;">Ask Box</span>
    <span class="close" onclick="closeAskBox()">&times;</span>
  </div>

    <form id="askForm">
      <input type="text" name="username" placeholder="Username" required>
      <br><br>
      <textarea name="message" placeholder="Message" required></textarea>
      <br><br>
      <button type="submit">Send</button>
    </form>
  </div>
</div>


<script>
  function getPostFromURL() {
    const params = new URLSearchParams(window.location.search);
    return params.get("post");
  }

  window.addEventListener("message", (event) => {
    if (event.origin !== "https://arpilmyroomim.neocities.org") return;

    if (event.data && event.data.type === "POSTS_DATA") {
      const posts = event.data.posts;

      const sortedPosts = [...posts].sort((a, b) => {
        const aPinned = a.tags?.includes("pinned");
        const bPinned = b.tags?.includes("pinned");

        if (aPinned && !bPinned) return -1;
        if (!aPinned && bPinned) return 1;

        return new Date(b.postDate) - new Date(a.postDate);
      });

      const selectedPost = getPostFromURL();

      if (selectedPost) {
        displaySinglePost(sortedPosts, selectedPost);
      } else {
        displayPostList(sortedPosts);
      }
    }
  });

  function displayPostList(posts) {
    const container = document.getElementById("postcontainer");
  
    container.innerHTML = posts.map(post => {
      const isPinned = post.tags?.includes("pinned");
  
      const label = isPinned
        ? "Pinned post"
        : (post.postDate
            ? new Date(post.postDate).toLocaleDateString("en-GB", {
                day: "2-digit",
                month: "short",
                year: "numeric"
              })
            : "");
  
      return `
        <div class="post-link">
          <span class="date">${label}</span>
          —
          <a href="?post=${encodeURIComponent(post.title)}">
            ${post.title}
          </a>
        </div>
      `;
    }).join("");
  }
  
  
  function displaySinglePost(posts, title) {
    const container = document.getElementById("postcontainer");

    const post = posts.find(p => p.title === title);

    if (!post) {
      container.textContent = "Post not found";
      return;
    }

    container.innerHTML = `
      <div class="post">
        <h2>${post.title}</h2>

        <div class="content">
          ${post.htmlContent || ""}
        </div>

        <div class="date">
          ${post.postDate ? new Date(post.postDate).toLocaleString() : ""}
        </div>

        <div class="tags">
          ${formatTags(post.tags)}
        </div>

        <br>
        <a href="?">← Index</a>
      </div>
    `;
  }

  function formatTags(tags) {
    if (!tags) return "";

    if (Array.isArray(tags)) {
      return tags.join(", ");
    }

    if (typeof tags === "string") {
      return tags;
    }

    return "";
  }
  
  
  function openAskBox() {
      document.getElementById("askModal").style.display = "block";
  }

  function closeAskBox() {
      document.getElementById("askModal").style.display = "none";
  }

  // close when clicking outside the box
  window.onclick = function(event) {
    const modal = document.getElementById("askModal");
    if (event.target === modal) {
      modal.style.display = "none";
    }
  }
  
  
const form = document.getElementById("askForm");

form.addEventListener("submit", function (e) {
  e.preventDefault(); // stop page reload

  const username = form.username.value.trim() || "anon";
  const message = form.message.value.trim();

  if (!message) return;

  const iframe = document.querySelector("iframe");

  if (!iframe) {
    console.error("No iframe found");
    return;
  }

  iframe.contentWindow.postMessage(
    {
      type: "ASK_FUNCTION",
      payload: {
        username,
        message
      }
    },
    "*"
  );

  // optional UX reset
  form.message.value = "";
});
  
</script>
</body>
</html>

