word-games-theme 2.1.6 → 2.1.8

data/_includes/wordgames/howto/howto.html

@@ -0,0 +1,73 @@
+{%- if dataToShow.HOW_TO_CONTENT -%}
+<div class="container">
+    <div class="row">
+        <div class="col-lg-4 col-md-6 my-3">
+            <p class="howto mb-0">How to</p>
+        </div>
+    </div>
+</div>
+<section class="how-to-section mt-5">
+    <div class="container">
+        <div class="row pt-5 justify-content-center">
+            {%- if site.ezoicAds -%}
+            <div class="col-md-9 mx-auto">
+                <div class="row">
+                    {%- endif -%}
+                    <div class="col-md-6 order-0 ">
+                        {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
+                        <div class="how-to-video-wrapper">
+                            {% assign video_url = dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl %}
+                            {% assign video_id = "" %}
+                            {% if video_url contains "youtu.be/" %}
+                            {% assign parts = video_url | split: "/" %}
+                            {% assign video_id = parts[3] %}
+                            {% elsif video_url contains "youtube.com/watch" %}
+                            {% assign params = video_url | split: "?" | last | split: "&" %}
+                            {% for param in params %}
+                            {% if param contains "v=" %}
+                            {% assign video_id = param | split: "=" | last %}
+                            {% endif %}
+                            {% endfor %}
+                            {% endif %}
+                            {%- if site.ezoicAds -%}
+                            <iframe class="youtubeVideoPlayer mb-5" width="400" height="315"
+                                src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1" allowfullscreen>
+                            </iframe>
+                            {%- else -%}
+                            <iframe class="youtubeVideoPlayer mb-5" width="500" height="315"
+                                src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1" allowfullscreen>
+                            </iframe>
+                            {%- endif -%}
+
+                        </div>
+                        {%- else -%}
+                        <div class="how-to-img-wrapper ">
+                            <img width="100%" height="100%" class="how-to-leftimg" src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}"
+                                loading="lazy"
+                                alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
+                        </div>
+                        {%- endif -%}
+                    </div>
+                    <div class="col-md-6 order-1">
+                        <div class="how-to-right">
+                            <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
+                                page.value}}</h3>
+                            <ol class="how-to-list">
+                                {% for data in dataToShow.HOW_TO_CONTENT.steps %}
+                                <li id="step{{forloop.index}}" class="how-to-list-item">
+                                    <span>{{forloop.index}}.</span>{{data |
+                                    replace: "$variable",
+                                    page.value}}
+                                </li>
+                                {% endfor %}
+                            </ol>
+                        </div>
+                    </div>
+                    {%- if site.ezoicAds -%}
+                </div>
+            </div>
+            {%- endif -%}
+        </div>
+    </div>
+</section>
+{%- endif -%}

data/_includes/wordgames/infographics/infographics.html

@@ -0,0 +1,131 @@
+<div class="container">
+    <div class="row">
+        <div class="col-lg-12 my-3">
+            <h3 class="text-center w-100 mb-5 infographics-title border-0"><b>Other useful information</b>
+            </h3>
+        </div>
+    </div>
+</div>
+
+<div class="inforgraphics_section">
+
+    <div class="wrapper">
+        <svg id="left" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+                <title>angle-left</title>
+                <path
+                    d="M7.28 23.28c-0.2 0-0.44-0.080-0.6-0.24l-6.44-6.44c-0.32-0.32-0.32-0.84 0-1.2l6.44-6.44c0.32-0.32 0.84-0.32 1.2 0 0.32 0.32 0.32 0.84 0 1.2l-5.8 5.84 5.84 5.84c0.32 0.32 0.32 0.84 0 1.2-0.16 0.16-0.44 0.24-0.64 0.24z">
+                </path>
+            </g>
+        </svg>
+        <div class="carousel">
+            <div class="carousel-inner">
+                {%- for item in dataToShow.infographics -%}
+                <div class="slide">
+                    <img loading="lazy" src="{{ item.image }}" alt="img" draggable="false">
+                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        <svg id="right" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+                <title>angle-right</title>
+                <path
+                    d="M0.88 23.28c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.2l5.76-5.84-5.8-5.84c-0.32-0.32-0.32-0.84 0-1.2 0.32-0.32 0.84-0.32 1.2 0l6.44 6.44c0.16 0.16 0.24 0.36 0.24 0.6s-0.080 0.44-0.24 0.6l-6.4 6.44c-0.2 0.16-0.4 0.24-0.6 0.24z">
+                </path>
+            </g>
+        </svg>
+    </div>
+</div>
+
+<script>
+    const carousel = document.querySelector(".carousel-inner"),
+        firstImg = carousel.querySelectorAll("img")[0],
+        arrowIcons = document.querySelectorAll(".wrapper svg")
+
+    const numImages = carousel.querySelectorAll("img").length;
+    const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
+
+    if (numImages > 3) {
+        arrowIcons[1].style.display = "block"
+    } else {
+        arrowIcons[0].style.display = "none";
+        arrowIcons[1].style.display = "none";
+    }
+
+    let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
+    const showHideIcons = () => {
+        let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+        arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+        arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
+    }
+
+    arrowIcons.forEach(icon => {
+        icon.addEventListener("click", () => {
+            let firstImgWidth = firstImg.clientWidth + 40;
+            const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+            carousel.scrollBy({
+                left: scrollAmount,
+                behavior: "smooth",
+            });
+            setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+        });
+    });
+
+    // const autoSlide = () => {
+    //   // if there is no image left to scroll then return from here
+    //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
+
+    //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
+    //   let firstImgWidth = firstImg.clientWidth + 14;
+    //   // getting difference value that needs to add or reduce from carousel left to take middle img center
+    //   let valDifference = firstImgWidth - positionDiff;
+
+    //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
+    //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+    //   }
+    //   // if user is scrolling to the left
+    //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+    // }
+
+    // const dragStart = (e) => {
+    //   // updatating global variables value on mouse down event
+    //   isDragStart = true;
+    //   prevPageX = e.pageX || e.touches[0].pageX;
+    //   prevScrollLeft = carousel.scrollLeft;
+    // }
+
+    // const dragging = (e) => {
+    //   // scrolling images/carousel to left according to mouse pointer
+    //   if (!isDragStart) return;
+    //   e.preventDefault();
+    //   isDragging = true;
+    //   carousel.classList.add("dragging");
+    //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+    //   carousel.scrollLeft = prevScrollLeft - positionDiff;
+    //   showHideIcons();
+    // }
+
+    // const dragStop = () => {
+    //   isDragStart = false;
+    //   carousel.classList.remove("dragging");
+
+    //   if (!isDragging) return;
+    //   isDragging = false;
+    //   autoSlide();
+    // }
+
+    // carousel.addEventListener("mousedown", dragStart);
+    // carousel.addEventListener("touchstart", dragStart);
+
+    // document.addEventListener("mousemove", dragging);
+    // carousel.addEventListener("touchmove", dragging);
+
+    // document.addEventListener("mouseup", dragStop);
+    // carousel.addEventListener("touchend", dragStop);
+</script>

data/_includes/wordgames/paginations/blog-pagination.html

@@ -0,0 +1,44 @@
+
+<!-- pagination -->
+<div class="bottompagination">
+    <div class="pointerup"><i class="fa fa-caret-up"></i></div>
+    <span class="navigation" role="navigation"></span>
+</div>
+{% if paginator.total_pages > 1 %}
+<div class="blog-pagination mt-5">
+    {% if paginator.previous_page %}
+    <a style="color: #00ab6b; font-weight: 900;"
+        href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
+    {% else %}
+    <span class="text-dark">
+        <svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.937875 10.9393C0.352089 11.5251 0.352089 12.4749 0.937875 13.0607L10.4838 22.6066C11.0696 23.1924 12.0194 23.1924 12.6051 22.6066C13.1909 22.0208 13.1909 21.0711 12.6051 20.4853L4.11986 12L12.6051 3.51472C13.1909 2.92893 13.1909 1.97919 12.6051 1.3934C12.0194 0.807612 11.0696 0.807612 10.4838 1.3934L0.937875 10.9393ZM4.99854 10.5H1.99854L1.99854 13.5H4.99854L4.99854 10.5Z" fill="#1E1E1E"/>
+        </svg>
+        &nbsp; &nbsp; Prev</span>
+    {% endif %}
+
+    {% for page in (1..paginator.total_pages) %}
+    {% if page == paginator.page %}
+    <span class="webjeda text-dark">{{ page }}</span>
+    {% elsif page == 1 %}
+    <a href="/blog" style="color: #00ab6b; font-weight: 900;">{{ page }}</a>
+    {% else %}
+    <a style="color: #00ab6b; font-weight: 900;"
+        href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page
+        }}</a>
+    {% endif %}
+    {% endfor %}
+
+    {% if paginator.next_page %}
+    <a style="color:#00ab6b; font-weight: 900;"
+        href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next
+        &nbsp; &nbsp;
+        <svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.0607 13.0607C13.6464 12.4749 13.6464 11.5251 13.0607 10.9393L3.51472 1.3934C2.92893 0.807611 1.97919 0.807611 1.3934 1.3934C0.807612 1.97918 0.807612 2.92893 1.3934 3.51472L9.87868 12L1.3934 20.4853C0.807611 21.0711 0.807611 22.0208 1.3934 22.6066C1.97918 23.1924 2.92893 23.1924 3.51472 22.6066L13.0607 13.0607ZM9 13.5L12 13.5L12 10.5L9 10.5L9 13.5Z" fill="#1E1E1E"/>
+            </svg>
+            </a>
+    {% else %}
+    <span class="text-dark">Next &raquo;</span>
+    {% endif %}
+</div>
+{% endif %}

data/_includes/wordgames/paginations/post-pagination.html

@@ -0,0 +1,24 @@
+<div class="post-links">
+    <div class="bottompagination">
+        <div class="pointerup"><i class="fa fa-caret-up"></i></div>
+        <span class="navigation" role="navigation">
+            <div class="pagination">
+                {% if page.previous.url %}
+                <a class="ml-1 mr-5  pageUrl" href="{{page.previous.url}}">
+                    <svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0.937875 10.9393C0.352089 11.5251 0.352089 12.4749 0.937875 13.0607L10.4838 22.6066C11.0696 23.1924 12.0194 23.1924 12.6051 22.6066C13.1909 22.0208 13.1909 21.0711 12.6051 20.4853L4.11986 12L12.6051 3.51472C13.1909 2.92893 13.1909 1.97919 12.6051 1.3934C12.0194 0.807612 11.0696 0.807612 10.4838 1.3934L0.937875 10.9393ZM4.99854 10.5H1.99854L1.99854 13.5H4.99854L4.99854 10.5Z" fill="#1E1E1E"/>
+                        </svg>
+                        &nbsp; &nbsp;
+                         Prev</a>
+                {% endif %}
+                {% if page.next.url %}
+                <a class="ml-1 mr-1 pageUrl" href="{{page.next.url}}"> Next  &nbsp; &nbsp;
+                    <svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M13.0607 13.0607C13.6464 12.4749 13.6464 11.5251 13.0607 10.9393L3.51472 1.3934C2.92893 0.807611 1.97919 0.807611 1.3934 1.3934C0.807612 1.97918 0.807612 2.92893 1.3934 3.51472L9.87868 12L1.3934 20.4853C0.807611 21.0711 0.807611 22.0208 1.3934 22.6066C1.97918 23.1924 2.92893 23.1924 3.51472 22.6066L13.0607 13.0607ZM9 13.5L12 13.5L12 10.5L9 10.5L9 13.5Z" fill="#1E1E1E"/>
+                        </svg>
+                        </a></a>
+                {% endif %}
+            </div>
+        </span>
+    </div>
+</div>

data/_includes/wordgames/rating/rating.html

@@ -0,0 +1,124 @@
+{%- if page.tool -%}
+{%- assign tool = page.tool -%}
+{%- assign data = site.data.rating.rating.tools -%}
+<div class="rating-tool">
+  <div class="container">
+    <div class="row text-center">
+      <div class="col-md-12">
+        <img id="rating-img" loading='lazy' src="/assets/images/rating.webp" alt="rating-img">
+        <div class="rating-text">Rate this tool</div>
+        <div class="rating-stars">
+
+
+          <svg class="rating-star" width="56" height="53" viewBox="0 0 56 53" fill="gray"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
+          </svg>
+          <svg class="rating-star" width="56" height="53" viewBox="0 0 56 53" fill="gray"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
+          </svg> <svg class="rating-star" width="56" height="53" viewBox="0 0 56 53" fill="gray"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
+          </svg> <svg class="rating-star" width="56" height="53" viewBox="0 0 56 53" fill="gray"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
+          </svg> <svg class="rating-star" width="56" height="53" viewBox="0 0 56 53" fill="gray"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z" />
+          </svg>
+          <!-- <i class="bi bi-star-fill rating-star"></i>
+        <i class="bi bi-star-fill  rating-star"></i>
+        <i class="bi bi-star-fill rating-star"></i>
+        <i class="bi bi-star-fill rating-star"></i>
+        <i class="bi bi-star-fill rating-star"></i> -->
+
+        </div>
+        <div class="rating-value mt-5 ml-2">
+          {%- for item in data -%}
+          {%- if item.name ==tool -%}
+          {%- assign rating = item.rating -%}
+          {%- assign votes = item.votes -%}
+          {%- endif -%}
+          {%- endfor -%}
+          <span class="rating"> <strong id='rating'>{{rating}}</strong><span>/5</span> </span>
+          &nbsp; <span class="total-ratings" id='count'>{{votes}} </span> votes
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const ratingValue = document.getElementById('rating')
+  const count = document.getElementById('count')
+  const setRating = async (rating) => {
+    const name = '{{site.name}}'
+    const tool = '{{page.tool}}'
+    const data = { website: name, feature: tool, rating: rating };
+    fetch('https://ratingapi-main.netlify.app/.netlify/functions/api/v1/rating/add', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+      .then(response => response.json())
+      .then(data => {
+        ratingValue.innerText = data.rating
+        count.innerText = data.count
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+  }
+  const tool = '{{page.tool}}'
+  const fetchRating = async () => {
+
+    const data = await fetch(`https://ratingapi-main.netlify.app/.netlify/functions/api/v1/${tool}/rating`).then(res => res.json())
+    ratingValue.innerText = data.rating
+    count.innerText = data.votes
+  }
+  let ratingImg = document.querySelector('#rating-img');
+  ratingImg.addEventListener('load', (event) => {
+    fetchRating()
+  });
+  const ratingNode = document.getElementsByClassName('rating-star')
+  let ratedValue = localStorage.getItem(`${tool}rating`)
+  if (ratedValue) {
+    Array.from(ratingNode).slice(0, ratedValue).map(item => {
+      item.style.fill = '#FFB21D'
+    })
+  }
+
+  Array.from(ratingNode).map(item => item.addEventListener('click', () => {
+    console.log(item);
+    const tool = '{{page.tool}}'
+    if (!localStorage.getItem(`${tool}rating`)) {
+      function indexInClass(node) {
+        var className = node.className;
+        var num = 0;
+        for (var i = 0; i < ratingNode.length; i++) {
+          if (ratingNode[i] === node) {
+            return num;
+          }
+          num++;
+        }
+        return -1;
+      }
+      const index = indexInClass(item)
+      Array.from(ratingNode).slice(0, index + 1).map(item => {
+        item.style.fill = '#FFB21D'
+      })
+      setRating(index + 1)
+      localStorage.setItem(`${tool}rating`, index + 1)
+    }
+  }))
+</script>
+
+{%- endif -%}

data/_includes/wordgames/rating/structureddata.html

@@ -0,0 +1,53 @@
+{% assign dataArr = site.data.[page.folderName][lang][file] %}
+{% assign dataToShow = dataArr %}
+{% assign description = dataToShow.META | replace:"$variable", page.value | default: site.description %}
+{%- assign tool = page.tool -%}
+{%- assign data = site.data.rating.rating.tools -%}
+{%- for item in data -%}
+{%- if item.name ==tool -%}
+{%- assign name = item.name -%}
+{%- assign rating = item.rating -%}
+{%- assign votes = item.votes -%}
+{%- endif -%}
+{%- endfor -%}
+<script type="application/ld+json">
+  {
+    "@context": "http://schema.org",
+    "@type": "WebApplication",
+    "operatingSystem":"All - Windows/Mac/iOS/Linux/Android",
+    "applicationCategory":"UtilitiesApplication",
+    "name": "{{name}}",
+    "url":"{{site.url | append:  page.url}}",
+    "image":"{{site.siteurl}}{{site.logo}}",
+    "aggregateRating": {
+      "@type": "AggregateRating", 
+      "worstRating":"1",
+      "bestRating":"5",	
+      "ratingValue":
+      {%- if rating -%}
+      {%- if rating=='NaN' -%}
+      "5"
+    {%- else -%}
+    "{{rating}}"
+    {%- endif -%}
+      {%- else -%}
+        "5"
+      {%- endif -%},
+      "ratingCount": {%- if votes -%}
+      {%- if votes== 0 -%}
+      "1"
+    {%- else -%}
+    "{{votes}}" 
+    {%- endif -%}
+      {%- else -%}
+       "1"
+      {%- endif -%}
+       
+    },
+    "offers": {
+      "@type": "Offer",
+      "price": "0.00",
+      "priceCurrency": "USD"
+    }
+  }
+</script>

data/_includes/wordgames/recent-posts/recent-posts.html

@@ -0,0 +1,104 @@
+<div class="container">
+    <div class="relatedPosts">
+
+
+        <div class="row">
+            <div class="col-lg-4 p-0 col-md-6 my-3">
+                {%- if site.posts.size>0 -%}
+                <h2 class="related_post_heading">Recent Posts</h2>
+                {%- endif -%}
+            </div>
+        </div>
+
+
+
+
+        <div class="row">
+            {%- if site.ezoicAds -%}
+            <div class="col-md-9 mx-auto">
+                <div class="row">
+                    {% assign posts = site.posts | where_exp:"post","post.url != page.url" %}
+                    {% for post in posts limit: 6%}
+                    {%- include /authors/authors.html -%}
+                    <div class="col-md-6 mb-4 card-group">
+                        <div class="card h-100">
+                            <!-- <a href="{{ post.url }}">
+                                <img src="{{ post.image }}" class="card-img-top" height="100%" width="100%"
+                                    loading="lazy" alt="{{post.title}}">
+                            </a> -->
+                            <div class="card-body">
+                                <a href="{{ post.url }}" class="anchor_link">
+                                    <h4 class="card-title mb-4">{{ post.title }}
+                                    </h4>
+                                    <p class="post-desc"> {{post.description}}</p>
+                                </a>
+                            </div>
+                            <div class="card-footer bg-white">
+                                <div class="wrapfooter">
+                                    {% if post.author %}
+                                    <span class="meta-footer-thumb">
+                                        <img class="author-thumb" loading="lazy" height="35px" width="35px"
+                                            src="{{image}}" alt="{{ authorName }}">
+                                    </span>
+                                    {% endif %}
+                                    <span class="author-meta">
+                                        <span class="post-name">
+                                            <a target="_blank" href="/blog">{{authorName}}</a>
+                                        </span><br>
+                                        <span class="post-date">{{post.date | date_to_string }}</span>
+                                    </span>
+                                    <!-- <p class="post-read-more">
+                                <a class="text-dark" href="{{ post.url }}"
+                                    aria-label="Read more about blog post">Read</a>
+                            </p> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            {%- else -%}
+            {% assign posts = site.posts | where_exp:"post","post.url != page.url" %}
+            {% for post in posts limit: 6%}
+            {%- include /authors/authors.html -%}
+            <div class="col-lg-4 col-md-6 mb-5 card-group">
+                <div class="recent-post-card card h-100">
+                    <!-- <a href="{{ post.url }}">
+                        <img src="{{ post.image }}" class="card-img-top" height="100%" width="100%" loading="lazy"
+                            alt="{{post.title}}">
+                    </a> -->
+                    <div class="card-body">
+                        <a href="{{ post.url }}" class="anchor_link">
+                            <h4 class="card-title mb-4">{{ post.title }}
+                            </h4>
+                            <p class="post-desc"> {{post.description}}</p>
+                        </a>
+                    </div>
+                    <div class="card-footer bg-white">
+                        <div class="wrapfooter">
+                            {% if post.author %}
+                            <span class="meta-footer-thumb">
+                                <img class="author-thumb" loading="lazy" height="35px" width="35px" src="{{image}}"
+                                    alt="{{ authorName }}">
+                            </span>
+                            {% endif %}
+                            <span class="author-meta">
+                                <span class="post-name">
+                                    <a target="_blank" href="/blog">{{authorName}}</a>
+                                </span><br>
+                                <span class="post-date">{{post.date | date_to_string }}</span>
+                            </span>
+                            <!-- <p class="post-read-more">
+                                <a class="text-dark" href="{{ post.url }}"
+                                    aria-label="Read more about blog post">Read</a>
+                            </p> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+            {%- endif -%}
+        </div>
+    </div>
+</div>