Customizing Your Blog Post Sidebar on Wix Blog using Corvid

This imports the multiple API's

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

This loads the page code

const likesWeight = 0.2
const viewsWeight = 0.8
const trendingPostsToShow = 3
const trendingCategoriesToShow = 5

$w.onReady(function () {
 // TODO: write your page related code here...

    wixLocation.onChange((res) => {
        $w("#input5").value = null;
        freshState()
    })
    freshState()

});

Get the post items

function freshState(parameter) {
    $w("#post1").getPost().then(async (res) => {
 if (res) {
            loadInfo(res)
            categories()
            popularposts(res._id)
            tags(res._id)
            $w("#post1").expand()
            $w("#statebox9").expand()
        } else {
            $w("#noshowStrip").expand()
            $w("#statebox9, #columnStrip1, #post1").collapse()
        }
    })
}

Then find the popularpost based on the parameters above.

async function popularposts(parameter) {
 await wixData.query("Blog/Posts").ne("_id", parameter).find()
        .then((res) => {
 if (res.items.length > 0) {
 let trendingPosts = res.items.map(post => {
                    post.trendingStrength = (post.viewCount * viewsWeight) + (post.likeCount * likesWeight)
 return post
                })
                trendingPosts.sort((a, b) => {
 return b.trendingStrength - a.trendingStrength
                })
                trendingPosts = trendingPosts.slice(0, trendingPostsToShow)
                $w("#popularPostRepeater").data = trendingPosts //results.items.slice(0, trendingPostsToShow) //
                $w("#popularBox").expand()
            } else {
                $w("#popularBox").collapse()
            }
        })
}

Then put the information into the repeater to display by using an on ready function.

export async function popularPostRepeater_itemReady($item, itemData, index) {
 // Add your code for this event here: 
 let defaultImage = $w("#popularImage").src;

    $item("#popularImage").src = await (itemData.coverImage) ? itemData.coverImage : defaultImage;

    $item("#popularImage").alt = await (itemData.title.length > 50) ? itemData.title.slice(0, 47) + "..." : itemData.title;

    $item("#popularImage").tooltip = await (itemData.title.length > 50) ? itemData.title.slice(0, 47) + "..." : itemData.title;

    $item("#popularTitle").text = await (itemData.title.length > 50) ? itemData.title.slice(0, 47) + "..." : itemData.title;

    $item("#popularDateLikes").text = await (itemData.lastPublishedDate) ? (await timeAgo(itemData.lastPublishedDate, true).toString() + ((itemData.likeCount) ? " / " + itemData.likeCount + " Likes" : "")) : ((itemData.likeCount) ? itemData.likeCount : "");

    $item("#container2").onClick((event) => {
        wixLocation.to(itemData["postPageUrl"])
    })
}

Get the tags information via the tags function. Then place them into the selection tags element.

async function tags(parameter) {
 await wixData.query("Blog/Posts").eq("_id", parameter).find()
        .then(async results => {
 //console.log(results)
 if (results.items.length > 0) {

 let tagList = results.items.map(tager => {
 //console.log(tager)
                    tager.postTags = getTags(tager)
 return tager
                })
                $w("#postTags").options = await tagList[0]["postTags"];
                $w("#tagBox").expand()
            } else {
                $w("#tagBox").collapse()
            }
        })
}

Use the getTags to return all of the tags information into a format that can be put into the selection tags options field.

function getTags(tager) {
 let postTags = []
 //console.log(tager)
 for (var i = 0; i < tager.hashtags.length; i++) {
        postTags.push({ "label": tager.hashtags[i], "value": tager.hashtags[i] })
    }
 return postTags
}

Have Fun!