- const { appId, appKey, serverURLs } = theme.valine

script(pjax).
    (async () => {
        document.querySelector('#comments-page').textContent = `#{__("loading")}`
        const emojiReg = /:[a-z0-9_\u4e00-\u9fa5]+:/g
        let cache = utils.saveToLocal.get('valine-recent-comments')
        if (cache) {
            setHtml(document.querySelector('#comments-page'), cache)
            return
        }
        let ls = []
        if (typeof md5 === "undefined") await utils.getScript('!{url_for(theme.cdn.blueimp_md5)}')
        await fetch('!{serverURLs}/1.1/classes/Comment?limit=8&order=-createdAt', {
            method: "GET",
            headers: {
                "X-LC-Id": '!{appId}',
                "X-LC-Key": '!{appKey}',
                "Content-Type": "application/json"
            }
        }).then(async res => res.json()).then(async results => {
            for (const i of results.results) {
                let title = ''
                if (i.url) {
                    await fetch(i.url).then(res => res.text()).then(html => {
                        const parser = new DOMParser()
                        const doc = parser.parseFromString(html, 'text/html')
                        title = doc.querySelector('title').innerText
                    }).catch(() => {
                        title = i.url
                    })
                }
                if (title.indexOf('|') > 0) {
                    title = title.split('|')[0]
                }
                ls.push({
                    title: title,
                    url: i.url,
                    nick: i.nick,
                    avatar: '!{avatar}' + '/avatar/' + md5(i.mail.trim().toLowerCase()),
                    time: i.createdAt,
                    content: formatContent(i.comment)
                })
            }
            setHtml(document.querySelector('#comments-page'), ls)
            utils.saveToLocal.set('valine-recent-comments', ls, !{cache})
        })

        function setHtml(el, data) {
            el.innerHTML = data.map(i => `
                        <div class="comment-card" title="${i.title}" onclick="pjax.loadUrl('${i.url}')">
                            <div class="comment-info">
                                <img src="${i.avatar}" class="nolazyload" alt="${i.nick}">
                                <div>
                                    <span class="comment-user">${i.nick}</span>
                                </div>
                                <time class="comment-time" datetime="${i.time}"></time>
                            </div>
                            <div class="comment-content">${i.content}</div>
                            <div class="comment-title">
                            <i class="solitude st-chat-fill"></i>
                            ${i.title}</div>
                        </div>
                    `).join('')
            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
            else {
                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
            }
        }

        function formatContent(content) {
            content = content.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
            content = content.replace(/!\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.image")}]')
            content = content.replace(/\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.link")}]')
            content = content.replace(/```.*?```/g, '[!{__("console.newest_comment.code")}]')
            return content
        }
    })()