fixed testimonial slider issue, now using date-fns for dateFormat, update sortFunctions

This commit is contained in:
somrat sorkar
2023-05-09 16:27:56 +06:00
parent 3f2572b7d2
commit a555fd28f5
6 changed files with 22 additions and 26 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "astroplate",
"version": "1.1.0",
"version": "1.1.1",
"description": "Astro and Tailwindcss boilerplate",
"author": "zeon.studio",
"license": "MIT",
+1 -1
View File
@@ -1,5 +1,4 @@
---
import { Image } from "@astrojs/image/components";
import BlogCard from "@/components/BlogCard.astro";
import Share from "@/components/Share.astro";
import config from "@/config/config.json";
@@ -8,6 +7,7 @@ import { getSinglePage } from "@/lib/contentParser.astro";
import dateFormat from "@/lib/utils/dateFormat";
import similerItems from "@/lib/utils/similarItems";
import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
import { Image } from "@astrojs/image/components";
import {
FaRegClock,
FaRegFolder,
+11 -4
View File
@@ -1,6 +1,6 @@
---
import { Image } from "@astrojs/image/components";
import { markdownify } from "@/lib/utils/textConverter";
import { Image } from "@astrojs/image/components";
const { testimonial } = Astro.props;
---
@@ -39,9 +39,10 @@ const { testimonial } = Astro.props;
/>
</svg>
</div>
<blockquote class="mt-8">
{markdownify(item.content)}
</blockquote>
<blockquote
class="mt-8"
set:html={markdownify(item.content)}
/>
<div class="mt-11 flex items-center">
<div class="text-dark dark:text-white">
<Image
@@ -86,6 +87,12 @@ const { testimonial } = Astro.props;
modules: [Pagination, Autoplay],
spaceBetween: 24,
loop: true,
loopedSlides: 2,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".testimonial-slider-pagination",
type: "bullets",
+3 -14
View File
@@ -1,18 +1,7 @@
const dateFormat = (datetime: string | Date) => {
const dateTime = new Date(datetime);
import { formatInTimeZone } from "date-fns-tz";
const date = dateTime.toLocaleDateString([], {
year: "numeric",
month: "long",
day: "numeric",
});
const time = dateTime.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
});
return date;
const dateFormat = (date:Date | string, format:string = "dd MMM, yyyy") => {
return formatInTimeZone(date, "America/New_York", format);
};
export default dateFormat;
+2 -2
View File
@@ -2,8 +2,8 @@
export const sortByDate = (array: any[]) => {
const sortedArray = array.sort(
(a:any, b:any) =>
new Date(b.data.date && b.data.date) -
new Date(a.data.date && a.data.date)
new Date(b.data.date && b.data.date).valueOf() -
new Date(a.data.date && a.data.date).valueOf()
);
return sortedArray;
};
+4 -4
View File
@@ -160,15 +160,15 @@
@apply prose-img:max-w-full prose-img:rounded;
@apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
@apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-text;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
@apply prose-blockquote:border-l-[10px] prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
@apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
@apply prose-code:px-1 prose-code:text-primary prose-code:dark:text-darkmode-primary;
@apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
@apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
@apply prose-li:text-text prose-li:dark:text-darkmode-text;
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
@apply prose-table:before:rounded-[inherit] prose-table:before:content-[""] prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:border prose-table:before:dark:border-darkmode-border;
@apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
@apply prose-th:py-[18px] prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:text-dark prose-th:dark:text-darkmode-text;
@apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
@apply prose-td:py-[18px] prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:dark:text-darkmode-text;
}