Mikro/src/components/popUpBox.astro

---

---

<div id="popup" class="popup-article">
    <div class="popup-article-content">
        <h3 id="title" class="popup-article-title"></h3>
        <div id="content"></div>
        <p class="popup-article-excerpt"></p>
    </div>

    <script>
        import { isOpen, content, type popupContent } from "@utils/popupStore";

        import sanitizeHtml from "sanitize-html";

        content.subscribe((content: popupContent) => {
            document.getElementById("title")!.textContent = content.title;

            document.getElementById("content")!.innerHTML = sanitizeHtml(
                content.html,
                {
                    allowedClasses: {
                        "*": ["*"],
                    },

                    transformTags: {
                        header: function (tagName, attribs) {
                            return {
                                tagName: "details",
                                attribs: {
                                    name: "Header",
                                    class: "dropdown-header",
                                },
                            };
                        },
                        nav: function (tagName, attribs) {
                            return {
                                tagName: "details",
                                attribs: {
                                    name: "Header",
                                    class: "dropdown-header",
                                },
                            };
                        },

                        footer: function (tagName, attribs) {
                            return {
                                tagName: "details",
                                attribs: {
                                    class: "dropdown-footer",
                                },
                            };
                        },
                    },

                    allowedTags: sanitizeHtml.defaults.allowedTags.concat([
                        "details",
                        "summary",
                    ]),
                },
            );
        });

        isOpen.subscribe((open: boolean) => {
            if (open) {
                document.getElementById("popup")!.style.display = "flex";
                document.getElementById("popup")?.scroll(0, 0);
            } else {
                const popup = document.getElementById("popup")!;
                popup.style.animation = "collapseToLine 0.5s ease-out";
                setTimeout(() => {
                    popup.style.display = "none";
                    popup.style.animation = "";
                }, 450);
            }
        });
    </script>
</div>

<style>
    #popup * {
        font-size: 16px;
    }

    @keyframes expandFromLine {
        from {
            transform: translateX(-50%) scaleY(0);
            opacity: 0;
        }
        to {
            transform: translateX(-50%) scaleY(1);
            opacity: 1;
        }
    }

    @keyframes collapseToLine {
        from {
            transform: translateX(-50%) scaleY(1);
            opacity: 1;
        }
        to {
            transform: translateX(-50%) scaleY(0);
            opacity: 0;
        }
    }

    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }
        100% {
            background-position: 1000px 0;
        }
    }

    .popup-article {
        display: none;
        position: fixed;

        gap: 1rem;
        padding: 20px;
        left: 50%;
        transform: translateX(-50%) scaleY(1);
        background: black;
        border: 2px solid #ccc;
        border-radius: 5px;
        transition: border-color 0.3s ease;
        animation: expandFromLine 0.5s ease-out;
        transform-origin: center;
        width: 70%;

        max-height: 90%;

        margin: 1rem auto;
        overflow: scroll;
        word-wrap: break-word;
        z-index: 100000;
    }

    .popup-article:hover {
        border-color: #999;
    }

    .popup-article-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .popup-article-title {
        margin: 0 0 10px 0;
        font-size: 28px !important;
        font-weight: 600;
        color: white;

        text-overflow: ellipsis;
        word-wrap: break-word;
    }

    .popup-article-excerpt {
        margin: 0;
        color: white;
        font-size: 16px;
        line-height: 1.6;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }

    .dropdown-header,
    .dropdown-footer {
        margin: 1rem 0;
        border: 1px solid #444;
        border-radius: 4px;
        background: #1a1a1a;
    }

    .dropdown-summary {
        padding: 0.5rem 1rem;
        cursor: pointer;
        user-select: none;
        font-weight: 600;
        color: #888;
        list-style: none;
    }

    .dropdown-summary:hover {
        color: #aaa;
        background: #222;
    }

    .dropdown-summary::marker {
        content: "";
    }

    .dropdown-summary::before {
        content: "▶ ";
        display: inline-block;
        transition: transform 0.2s;
    }

    details[open] .dropdown-summary::before {
        transform: rotate(90deg);
    }
</style>