Merge branch 'blog-page' of MERMS/MermsWebsite2025 into master

This commit is contained in:
2025-01-06 22:18:58 +00:00
committed by Gogs
4 changed files with 267 additions and 278 deletions
@@ -0,0 +1,22 @@
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
function QueryClientContext({children}) {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 3,
// refetchOnMount: false,
staleTime: 3000
},
},
})
return (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
);
}
export default QueryClientContext;
+1
View File
@@ -11,6 +11,7 @@
"sass": "sass --watch public/assets/scss/main.scss:public/assets/css/main.css"
},
"dependencies": {
"@tanstack/react-query": "^5.62.16",
"eslint": "8.41.0",
"eslint-config-next": "13.4.3",
"next": "^13.5.8",
+4 -1
View File
@@ -10,6 +10,7 @@ import "/public/css/lunar.css"
import "/public/css/animate.css"
import "/public/css/merms.css"
import "/public/css/responsive.css"
import QueryClientContext from "../components/queryclientProvider/QueryClientContext"
function MyApp({ Component, pageProps }) {
@@ -24,7 +25,9 @@ function MyApp({ Component, pageProps }) {
{/* <SmoothScroll /> */}
{!loading ? (
// <ProductHome />
<Component {...pageProps} />
<QueryClientContext>
<Component {...pageProps} />
</QueryClientContext>
) : (
<Preloader />
)}
+240 -277
View File
@@ -1,33 +1,26 @@
//"use server"
import { useQuery } from "@tanstack/react-query";
import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import Link from "next/link"
import {useState, useEffect } from "react";
export default function Home() {
const [posts, setPosts] = useState(null)
useEffect(() => {
async function fetchPosts() {
const {data, isFetching, isError, error} = useQuery({
queryKey: ['blog'],
queryFn: async () => {
try {
const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
//http://localhost:8805/mermsblogdata/mermsemr'; // https://blogdata.chiefsoft.net/mermsblogdata/mermsemr
const res = await fetch(blog_url)
const data = await res.json()
setPosts(data)
console.log(data)
return data
}
catch(e){
console.log(e)
return(e)
}
}
fetchPosts().then(r => {
console.log(r)
})
}, [])
const firstBlogItem = posts?.payload?.blogdata[0];
console.log(firstBlogItem);
})
return (
<>
@@ -35,290 +28,261 @@ export default function Home() {
<div>
<section id="blog-page" className="pb-60 inner-page-hero blog-page-section">
<div className="container">
{/* WIDE BLOG POST */}
<div className="blog-post wide-post wow fadeInUp">
<div className="row d-flex align-items-center">
{/* BLOG POST IMAGE */}
<div className="col-md-6">
<div className="blog-post-img">
<img
className="img-fluid r-16"
src="https://blog.mermsemr.com/wp-content/uploads/2024/10/branding-practice.jpg"
alt="blog-post-image" />
</div>
</div>
{/* BLOG POST TEXT */}
<div className="col-md-6">
<div className="blog-post-txt">
<h3 className="s-38 w-700">
<Link href="https://blog.mermsemr.com/?p=55"> {firstBlogItem?.post_name}
</Link>
</h3>
{/* Text */}
<p>{firstBlogItem?.post_content.substring(0, 250)}
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-30">
<ul className="post-meta-list ico-10">
<li><p className="w-500">MERMS </p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p>{firstBlogItem?.post_date}</p></li>
</ul>
</div>
</div>
</div> {/* END BLOG POST TEXT */}
</div> {/* End row */}
</div> {/* END WIDE BLOG POST */}
{/* POSTS WRAPPER */}
<div className="posts-wrapper">
<div className="row">
{/* BLOG POST #1 */}
<div className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-1-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--red-400">Product News</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Aliqum mullam porta blandit: lacus and sapien
gravida
</Link>
</h6>
{/* Text */}
<p>Egestas luctus vitae augue and ipsum ultrice quisque in cursus lacus feugiat
congue diam ultrice laoreet sagittis
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">MermsEmr Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Apr 23, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #1 */}
{/* BLOG POST #2 */}
<div className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-2-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--green-400">Community</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Porttitor cursus fusce neque CEO egestas cursus
magna sapien and suscipit ipsum
</Link>
</h6>
{/* Text */}
<p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">By Miranda Green</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Apr 09, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #2 */}
{/* BLOG POST #3 */}
<div className="col-md-12 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-3-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--violet-400">Freelancer Tips</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Cubilia laoreet ipsum augue eget egestas Martex magna</Link>
</h6>
{/* Text */}
<p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat
egets congue ultrice sagittis laoreet
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">By Helen J.</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Apr 01, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #3 */}
</div>
</div> {/* END POSTS WRAPPER */}
{/* BLOG POSTS CATEGORY */}
<div className="row">
<div className="col">
<div className="posts-category ico-20 wow fadeInUp">
<h4 className="s-34 w-700">Latest News <span className="flaticon-next" /></h4>
</div>
{isFetching ?
<div className="">
<div className="">
<p className='text-mute text-center'>Loading...</p>
</div>
</div>
{/* POSTS WRAPPER */}
<div className="posts-wrapper">
<div className="row">
{/* BLOG POST #4 */}
<div className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
: isError ?
<div className="">
<div className="">
<p className='text-danger text-center'>{error.message}</p>
</div>
</div>
:
<>
{(data && data?.payload?.blogdata?.length > 0) ?
<>
{/* WIDE BLOG POST */}
<div className="blog-post wide-post wow fadeInUp">
<div className="row d-flex align-items-center">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-4-img.jpg" alt="blog-post-image" />
<div className="col-md-6">
<div className="blog-post-img">
<img
className="img-fluid r-16"
src={`${data?.payload?.image_url}/${data?.payload?.blogdata[0].meta_value}`}
alt="blog-post-image" />
</div>
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--pink-400">Tutorials</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Phasellus blandit justo undo aliquam vitae molestie
nunc sapien augue justo aliquet
</Link>
</h6>
{/* Text */}
<p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">By Miranda Green</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Mar 20, 2023</p></li>
</ul>
<div className="col-md-6">
<div className="blog-post-txt">
<h3 className="s-38 w-700">
<Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</Link>
</h3>
{/* Text */}
{/* <p>{data?.payload?.blogdata[0].post_content.substring(0, 250)}</p> */}
<p dangerouslySetInnerHTML={{ __html: data?.payload?.blogdata[0].post_content.length > 250 ? data?.payload?.blogdata[0].post_content.substring(0, 250) + ' ...' : data?.payload?.blogdata[0].post_content.substring(0, 250) }} />
{/* Post Meta */}
<div className="blog-post-meta mt-30">
<ul className="post-meta-list ico-10">
<li><p className="w-500">MERMS </p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p>{data?.payload?.blogdata[0]?.post_date}</p></li>
</ul>
</div>
</div>
</div> {/* END BLOG POST TEXT */}
</div> {/* End row */}
</div> {/* END WIDE BLOG POST */}
{/* POSTS WRAPPER */}
<div className="posts-wrapper">
<div className="row">
{/* BLOG POST #1 */}
{data?.payload?.blogdata.map((item, index)=>{
if(index > 0){
return (
<div key={item.id || index} className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img
className="img-fluid r-16"
src={`${data?.payload?.image_url}/${item.meta_value}`}
alt="blog-post-image"
/>
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
{/* <span className="post-tag color--red-400">Product News</span> */}
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href={item.guid}> {item.post_title}</Link>
</h6>
{/* Text */}
<p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">Merms</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">{item.post_date}</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div>
)
}
})}
{/* END BLOG POST #1 */}
</div>
</div> {/* END BLOG POST #4 */}
{/* BLOG POST #5 */}
<div className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-5-img.jpg" alt="blog-post-image" />
</div> {/* END POSTS WRAPPER */}
{/* BLOG POSTS CATEGORY */}
<div className="row">
<div className="col">
<div className="posts-category ico-20 wow fadeInUp">
<h4 className="s-34 w-700">Latest News <span className="flaticon-next" /></h4>
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--violet-400">Freelancer Tips</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Blandit justo phasellus undo aliquam diam molestie
vitae
</Link>
</h6>
{/* Text */}
<p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat
egets congue ultrice sagittis laoreet
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">MermsEmr Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Mar 13, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #5 */}
{/* BLOG POST #6 */}
<div className="col-md-12 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-6-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--blue-400">Extensions</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Cursus porttitor fusce neque CEO egestas cursus magna
sapien and ipsum suscipit
</Link>
</h6>
{/* Text */}
<p>Mullam ipsum aliqum vitae and blandit vitae tempor sapien and lipsum donec</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">MermsEmr Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Feb 23, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #6 */}
</div> {/* End row */}
</div> {/* END POSTS WRAPPER */}
{/* SQUARE BLOG POST */}
<div className="blog-post square-post">
<div className="row">
<div className="col">
{/* SQUARE BLOG POST WRAPPER */}
<div className="square-post-wrapper bg--black-400 block-shadow r-16 wow fadeInUp">
<div className="row d-flex align-items-center">
{/* BLOG POST TEXT */}
<div className="col-md-6 order-last order-md-2">
<div className="blog-post-txt color--white">
</div>
{/* POSTS WRAPPER */}
<div className="posts-wrapper">
<div className="row">
{/* BLOG POST #4 */}
<div className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-4-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--pink-400">Video Tutorials</span>
<span className="post-tag color--pink-400">Tutorials</span>
{/* Post Link */}
<h4 className="s-34 w-700 mb-20">
<Link href="/single-post">Lipsum sodales sapien Martex aliquet blandit
augue gravida posuere
<h6 className="s-20 w-700">
<Link href="/single-post">Phasellus blandit justo undo aliquam vitae molestie
nunc sapien augue justo aliquet
</Link>
</h4>
</h6>
{/* Text */}
<p>Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta
undo velna dolor libero risus aliquet tempus posuere vitae tempor
</p>
<p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
{/* Post Meta */}
<div className="blog-post-meta mt-30">
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="w-500">MermsEmr Team</p></li>
<li><p className="p-sm w-500">By Miranda Green</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p>Feb 12, 2023</p></li>
<li><p className="p-sm">Mar 20, 2023</p></li>
</ul>
</div>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
{/* BLOG POST IMAGE */}
<div className="col-md-6 order-first order-md-2">
<div className="blog-post-img video-preview">
{/* Play Icon */}
<VideoPopup style={1}/>
{/* Preview Image */}
<img className="img-fluid" src="/images/blog/post-10-img.jpg" alt="video-preview" />
</div> {/* END BLOG POST #4 */}
{/* BLOG POST #5 */}
<div className="col-md-6 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-5-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--violet-400">Freelancer Tips</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Blandit justo phasellus undo aliquam diam molestie
vitae
</Link>
</h6>
{/* Text */}
<p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat
egets congue ultrice sagittis laoreet
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">MermsEmr Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Mar 13, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* End row */}
</div> {/* END SQUARE BLOG POST WRAPPER */}
</div> {/* END BLOG POST #5 */}
{/* BLOG POST #6 */}
<div className="col-md-12 col-lg-4">
<div className="blog-post mb-40 wow fadeInUp clearfix">
{/* BLOG POST IMAGE */}
<div className="blog-post-img mb-35">
<img className="img-fluid r-16" src="/images/blog/post-6-img.jpg" alt="blog-post-image" />
</div>
{/* BLOG POST TEXT */}
<div className="blog-post-txt">
{/* Post Tag */}
<span className="post-tag color--blue-400">Extensions</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Cursus porttitor fusce neque CEO egestas cursus magna
sapien and ipsum suscipit
</Link>
</h6>
{/* Text */}
<p>Mullam ipsum aliqum vitae and blandit vitae tempor sapien and lipsum donec</p>
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">MermsEmr Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Feb 23, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #6 */}
</div> {/* End row */}
</div> {/* END POSTS WRAPPER */}
{/* SQUARE BLOG POST */}
<div className="blog-post square-post">
<div className="row">
<div className="col">
{/* SQUARE BLOG POST WRAPPER */}
<div className="square-post-wrapper bg--black-400 block-shadow r-16 wow fadeInUp">
<div className="row d-flex align-items-center">
{/* BLOG POST TEXT */}
<div className="col-md-6 order-last order-md-2">
<div className="blog-post-txt color--white">
{/* Post Tag */}
<span className="post-tag color--pink-400">Video Tutorials</span>
{/* Post Link */}
<h4 className="s-34 w-700 mb-20">
<Link href="/single-post">Lipsum sodales sapien Martex aliquet blandit
augue gravida posuere
</Link>
</h4>
{/* Text */}
<p>Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta
undo velna dolor libero risus aliquet tempus posuere vitae tempor
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-30">
<ul className="post-meta-list ico-10">
<li><p className="w-500">MermsEmr Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p>Feb 12, 2023</p></li>
</ul>
</div>
</div>
</div>
{/* BLOG POST IMAGE */}
<div className="col-md-6 order-first order-md-2">
<div className="blog-post-img video-preview">
{/* Play Icon */}
<VideoPopup style={1}/>
{/* Preview Image */}
<img className="img-fluid" src="/images/blog/post-10-img.jpg" alt="video-preview" />
</div>
</div>
</div> {/* End row */}
</div> {/* END SQUARE BLOG POST WRAPPER */}
</div>
</div> {/* End row */}
</div> {/* END SQUARE BLOG POST */}
</>
:
<div className="">
<div className="">
<p className='text-mute text-center'>No Blog Found!</p>
</div>
</div> {/* End row */}
</div> {/* END SQUARE BLOG POST */}
</div>
}
</>
}
</div> {/* End container */}
</section> {/* END BLOG POSTS LISTING */}
{/* PAGE PAGINATION
@@ -330,7 +294,6 @@ export default function Home() {
============================================= */}
</div>
</Layout>
</>
)