Skip to content

B
Blog
Commit d14d7581 by Sakilesh J
Options

markdown fetch added

parent f16c5e9a
Showing with 1538 additions and 383 deletions
app/api/route.ts 0 → 100644
// app/api/hello/route.js
import { getAllPosts } from '@/lib/posts';
import { NextResponse } from 'next/server';
export async function GET() {
const Data = getAllPosts();
return NextResponse.json({ Data });
}
app/blog/[id]/page.tsx
import Blog from "@/pages/blog";
interface blogSiteProps{
params: {
id: number;
}
}
const Blogsite:React.FC<blogSiteProps> = ({params}) => {
return ( <Blog id={Number(params.id)}/> );
const Blogsite: React.FC<blogSiteProps> = async({ params }) => {
return ( <Blog id={Number(params.id)} /> );
}
export default Blogsite;
\ No newline at end of file
app/layout.tsx
import '@/styles/globals.css';
import ThemeParent from '@/hooks/useTheme';
import Global from '@/layout/GlobalLayout';
import PaginationProvider from '@/hooks/usePagination';
import FilterComponent from '@/hooks/Filter';
import AppContext from '@/hooks/AppContext';
interface LayoutProps {
children: React.ReactNode;
}
......@@ -15,15 +13,11 @@ export default function RootLayout({ children }: LayoutProps) {
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<ThemeParent>
<PaginationProvider>
<FilterComponent>
<AppContext>
<Global>
{children}
</Global>
</FilterComponent>
</PaginationProvider>
</ThemeParent>
</AppContext>
</body>
</html>
);
......
components/Top-Level/blog-page/Blogpage.tsx
import { profileCardsItems } from "@/types/blog";
import Image from "next/image";
import React from "react";
import Markdown from "react-markdown";
interface BlogPageProps{
blogTitle: string;
authorDetails: Omit<profileCardsItems, 'authorImg'>;
categories: string[];
banner: {
import { profileCardsItems } from '@/types/blog';
import Image from 'next/image';
import React from 'react';
import Markdown from 'react-markdown';
interface Banner {
img: string;
width: number;
height: number;
};
}
interface BlogPageProps {
id: number;
title: string;
authorDetails: profileCardsItems;
categories: string[];
banner: Banner;
readingTime: number;
content: string;
category: string;
}
const BlogPage: React.FC<BlogPageProps> = ({ blogTitle, authorDetails,category,readingTime,banner,content,categories }) => {
const { date,author } = authorDetails;
const BlogPage: React.FC<BlogPageProps> = ({ title, authorDetails, category, readingTime, banner, content, categories }) => {
const date = new Date(authorDetails.date);
return (
<div className="max-w-[1200px] mx-auto mt-10 px-4">
<div className="lg:px-20">
<h3 className="text-[1.4em] sm:text-4xl md:text-5xl font-libre font-bold sm:font-semibold dark:text-white">{blogTitle}</h3>
<div className="my-5 *:text-textColor flex gap-4 flex-wrap items-center *:text-sm *:sm:text-md">
<p className="font-semibold capitalize dark:text-white">posted on <span className="font-bold text-gray-400 dark:text-white">{date?.toLocaleString('default', { month: 'short' })} {date.getDate()}, {date.getFullYear()}</span>
<h3 className="text-[1.4em] sm:text-4xl md:text-5xl font-libre font-bold sm:font-semibold dark:text-white">{title}</h3>
<div className="my-5 text-textColor flex gap-4 flex-wrap items-center text-sm sm:text-md">
{authorDetails && (
<>
<p className="font-semibold capitalize dark:text-white">
posted on <span className="font-bold text-gray-400 dark:text-white">{date.toLocaleString('default', { month: 'short' })} {date.getDate()}, {date.getFullYear()}</span>
</p>
<p className="font-semibold capitalize dark:text-white"> by <span className="font-bold text-gray-400 dark:text-white">{author}</span>
<p className="font-semibold capitalize dark:text-white">
by <span className="font-bold text-gray-400 dark:text-white">{authorDetails.author}</span>
</p>
<p className="font-semibold capitalize dark:text-white"> Published In <span className="font-bold text-gray-400 dark:text-white">{category}</span>
</>
)}
{category && (
<p className="font-semibold capitalize dark:text-white">
Published In <span className="font-bold text-gray-400 dark:text-white">{category}</span>
</p>
)}
{readingTime && (
<p className="font-bold text-gray-300 dark:text-white">
{readingTime} min read
</p>
)}
</div>
</div>
<Image src={banner.img} alt="*img" width={banner.width}
height={banner.height} className="rounded-xl w-full object-cover sm:h-[400px]"
/>
<div className="w-full mt-12 dark:bg-[#131617] rounded-md px-4 py-6 sm:px-8 ">
<div className=" prose-xl prose-h2:font-libre prose-h2:font-bold prose-h2:text-2xl sm:prose-h2:text-3xl prose-h2:sm:prose-h2:text-[1.4em] prose-p:text-[14px] prose-p:leading-6 sm:prose-p:text-lg dark:*:text-white rounded-lg prose-li:list-decimal dark:prose-p:text-gray-400 leading-snug prose-blockquote:px-[30px] prose-h4:m-0 prose-blockquote:py-[15px] prose-blockquote:border-l-2 prose-blockquote:border-primary prose-h4:font-libre prose-h4: prose-h4:text-[1.5em] dark:prose-li:text-gray-400 prose-li:text-[17px]">
{banner && (
<Image src={banner.img} alt="banner" width={banner.width} height={banner.height} className="rounded-xl w-full object-cover sm:h-[400px]" />
)}
<div className="w-full mt-12 dark:bg-[#131617] rounded-md px-4 py-6 sm:px-8">
<div className="prose-xl prose-h2:font-libre prose-h2:font-bold prose-h2:text-2xl sm:prose-h2:text-[1.4em] prose-p:text-[14px] prose-p:leading-6 sm:prose-p:text-lg dark:text-white rounded-lg prose-li:list-decimal dark:prose-p:text-gray-400 leading-snug prose-blockquote:px-[30px] prose-h4:m-0 prose-blockquote:py-[15px] prose-blockquote:border-l-2 prose-blockquote:border-primary prose-h4:font-libre prose-h4:text-[1.5em] dark:prose-li:text-gray-400 prose-li:text-[17px]">
<Markdown>
{content}
{content || ''}
</Markdown>
</div>
<ul className="dark:text-gray-400 prose-li:list-none mt-10 flex gap-3 items-center flex-wrap">
<li className="text-lg">Tags:</li>
{
categories.map((item: string) => (<li className="px-4 hover:bg-primary hover:text-white dark:hover:bg-primary cursor-pointer text-lg py-1 list-none dark:bg-[#2a2a2a] bg-secondary text-textColor dark:text-white w-min rounded-3xl" key={item}>
{categories && categories.map((item, index) => (
<li key={index} className="px-4 hover:bg-primary hover:text-white dark:hover:bg-primary cursor-pointer text-lg py-1 list-none dark:bg-[#2a2a2a] bg-secondary text-textColor dark:text-white w-max rounded-3xl">
{item}
</li>))
}
</li>
))}
</ul>
</div>
</div>
......
components/Top-Level/blog-page/blog-page.stories.tsx
......@@ -12,10 +12,11 @@ type Story = StoryObj<typeof meta>;
export const Blog_page: Story = {
args: {
blogTitle: "Create an Art that shows the beauty in everyone’s ideas of flaws.",
title: "Create an Art that shows the beauty in everyone’s ideas of flaws.",
authorDetails: {
author: "Charlotte mia",
date: new Date('2015-1-01'),
authorImg:''
},
category: 'fashion',
readingTime: 1,
......
components/Top-Level/pagination/pagination.tsx
......@@ -18,59 +18,96 @@ const Pagination: React.FC<PaginationProps> = ({ size, currentPage, onChange })
const renderPageButtons = () => {
const pages = [];
if (currentPage > 1) {
pages.push(
<Button key="prev" size="sm" onClick={() => onChange(currentPage - 1)}>
Previous
<Button
key="prev"
size="sm"
onClick={() => onChange(currentPage - 1)}
disabled={currentPage <= 1}
>
Prev
</Button>
);
}
if (currentPage > 2 && !isShow) {
if (currentPage > 2 && !isShow && size >5) {
pages.push(
<Button key="1" size="icon" onClick={() => onChange(1)}>
<Button
key="1"
size="icon"
onClick={() => onChange(1)}
>
1
</Button>,
<Button key="ellipsis-start" size="icon" onClick={handleEllipsisClick}>
<Button
key="ellipsis-start"
size="icon"
onClick={handleEllipsisClick}
>
...
</Button>
);
}
const startPage = isShow ? 1 : Math.max(currentPage, 1);
const endPage = isShow ? size : Math.min(currentPage + count, size);
let startPage = isShow ? 1 : Math.max(currentPage, 1);
let endPage = isShow ? size : Math.min(currentPage + count, size);
if (size <= 5) {
startPage = 1;
endPage = size;
}
for (let i = startPage; i <= endPage; i++) {
const isPrimary = currentPage === i;
pages.push(
<Button key={i} size="icon" isPrimary={isPrimary} onClick={() => onChange(i)}>
<Button
key={i}
size="icon"
isPrimary={isPrimary}
onClick={() => onChange(i)}
>
{i}
</Button>
);
}
if (!isShow && size - currentPage > count+1) {
if (!isShow && size - currentPage > count + 1 && size > 5) {
pages.push(
<Button key="ellipsis-end" size="icon" onClick={handleEllipsisClick}>
<Button
key="ellipsis-end"
size="icon"
onClick={handleEllipsisClick}
>
...
</Button>,
<Button key={size} size="icon" onClick={() => onChange(size)}>
<Button
key={size}
size="icon"
onClick={() => onChange(size)}
>
{size}
</Button>
);
}
if (currentPage < size) {
pages.push(
<Button key="next" size="sm" onClick={() => onChange(currentPage + 1)}>
<Button
key="next"
size="sm"
onClick={() => onChange(currentPage + 1)}
disabled={currentPage >= size}
>
Next
</Button>
);
}
return pages;
};
return <div className="flex gap-2 flex-wrap my-10">{renderPageButtons()}</div>;
return <div className="flex gap-2 flex-wrap my-10 justify-center items-center">{renderPageButtons()}</div>;
};
export default Pagination;
components/base/Button/Button.tsx
......@@ -16,7 +16,7 @@ export default function Button({ children, size, disabled, className, loading, h
'px-4 py-2 text-[18px]': size === 'sm',
'px-6 py-2 text-[22px]': size === 'md',
'px-4 py-2 text-[15px]':size ==='icon',
'bg-secondary hover:bg-none dark:hover:bg-none': disabled,
'bg-secondary hover:bg-none dark:hover:bg-black dark:bg-black': disabled,
'hover:bg-primary hover:text-white ease-in duration-100': !disabled,
'w-full': block,
'bg-white dark:bg-[#131617] dark:text-white':!isPrimary,
......
hooks/AppContext.tsx 0 → 100644
'use client';
import { pageData } from "@/utils/Data";
import axios from "axios";
import React, { useEffect } from "react";
import { createContext,useState } from "react";
type ContextType= {
theme: 'dark' | 'light'
ToggleTheme: () => void;
data:{
id: number;
blogTitle: string;
authorDetails: {
author: string;
date: Date;
authorImg: string;
};
category: string;
readingTime: number;
content: string;
categories: string[];
banner: {
img: string;
width: number;
height: number;
};
description: string;
}[],
handleFilter: (search: string) => void
start: number;
end: number;
size: number;
currentPage: number;
handleChangePage: (page: number) => void;
}
export const Context = createContext<ContextType>({
start: 1,
end: 1,
size: 1,
currentPage: 1,
handleChangePage: () => { },
data: pageData,
handleFilter: () => { },
theme: 'dark',
ToggleTheme:()=>{}
})
interface AppContextProps{
children: React.ReactNode
}
const AppContext = ({ children }: AppContextProps) => {
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const ToggleTheme = () => {
if (theme === 'light') setTheme('dark');
else if (theme === 'dark') setTheme('light');
}
const [currentPage, setcurrentPage] = useState(1);
const size = 6;
const [start, setstart] = useState(0);
const [end, setend] = useState(size);
const handleChangePage = (page: number) => {
setcurrentPage(page);
setstart((page - 1) * size);
setend(page * size);
}
const [filter, setFilter] = useState<any>([]);
const [pageData, setPageData] = useState<any>([]);
// Fetch data from API and set state
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get('http://localhost:3000/api/');
setPageData(res.data.Data);
setFilter(res.data.Data); // Set filter with fetched data
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
// Handle filtering of data based on search input
const handleFilter = (search:string) => {
if (search.trim() === "") {
setFilter(pageData);
} else {
setFilter(
pageData.filter((data:any) =>
data.blogTitle.toLowerCase().includes(search.toLowerCase())
)
);
}
};
return (<Context.Provider value={{
theme,
ToggleTheme,
data: filter,
handleFilter,
start,
end,
size,
currentPage,
handleChangePage,
}}>
{children}
</Context.Provider> );
}
export default AppContext;
\ No newline at end of file
hooks/Filter.tsx deleted 100644 → 0
'use client';
import { blog_data } from "@/utils/Blog_data";
import { useState,createContext } from "react";
type FilterContext = {
data:{
id: number;
img: string;
title: string;
description: string;
author: string;
authorImg: string;
date: Date;
}[],
handleFilter:(search:string)=>void
}
export const FilterContext = createContext<FilterContext>({
data: blog_data,
handleFilter:()=>{}
})
interface FilterComponentProps{
children: React.ReactNode;
}
const FilterComponent:React.FC<FilterComponentProps> = ({children}) => {
const [filter, setfilter] = useState(blog_data);
const handleFilter = (search: string) => {
if (search.trim() === "") {
setfilter(blog_data);
} else {
setfilter(blog_data.filter((data) => data.title.toLowerCase().includes(search.toLowerCase())));
}
}
return (<FilterContext.Provider value={{
data: filter,
handleFilter
}}>{children}</FilterContext.Provider> );
}
export default FilterComponent;
\ No newline at end of file
hooks/usePagination.tsx deleted 100644 → 0
'use client';
import React, { createContext, useState } from "react";
type paginationContextTypes = {
start: number;
end: number;
size: number;
currentPage: number;
handleChangePage: (page: number) => void;
}
interface usePaginationProps {
children: React.ReactNode;
}
export const paginationContext = createContext<paginationContextTypes>({
start: 1,
end: 1,
size: 1,
currentPage: 1,
handleChangePage: () => {},
});
const PaginationProvider:React.FC<usePaginationProps> = ({children}) => {
const [currentPage, setcurrentPage] = useState(1);
const size = 6;
const [start, setstart] = useState(0);
const [end, setend] = useState(size);
const handleChangePage = (page: number) => {
setcurrentPage(page);
setstart((page - 1) * size);
setend(page * size);
}
return (
<paginationContext.Provider value={{
start,
end,
size,
currentPage,
handleChangePage,
}}>
{children}
</paginationContext.Provider>
);
}
export default PaginationProvider;
\ No newline at end of file
hooks/useTheme.tsx deleted 100644 → 0
'use client';
import React, { createContext, useState } from "react";
interface useThemeProps{
children: React.ReactNode
}
type ThemeContextType = {
theme: 'dark' | 'light';
ToggleTheme: () => void;
};
// Create the context with a default value
export const ThemeContext = createContext<ThemeContextType | null>(null);
const ThemeParent: React.FC<useThemeProps> = ({ children }) => {
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const ToggleTheme = () => {
if (theme === 'light') setTheme('dark');
else if (theme === 'dark') setTheme('light');
}
return (
<ThemeContext.Provider value={{
theme,
ToggleTheme,
}} >
{children}
</ThemeContext.Provider>
)
}
export default ThemeParent
\ No newline at end of file
layout/GlobalLayout.tsx
'use client';
import Navigation from "@/components/layout/Navigation/Navigation";
import { FilterContext } from "@/hooks/Filter";
import { ThemeContext } from "@/hooks/useTheme";
import { Context } from "@/hooks/AppContext";
import React, { useContext } from "react";
interface GlobalLayoutProps{
children: React.ReactNode;
}
const Global:React.FC<GlobalLayoutProps> = ({children}) => {
const ThemeState = useContext(ThemeContext);
const FilterState = useContext(FilterContext);
const {theme,ToggleTheme,handleFilter} = useContext(Context);
return (
<div className={`${ThemeState?.theme} `}>
<div className={`${theme}`}>
<div className={`bg-light dark:bg-black min-h-screen`}>
<Navigation onSearch={FilterState.handleFilter}
onChangeTheme={ThemeState ? ThemeState?.ToggleTheme : () => { }} />
<Navigation onSearch={handleFilter}
onChangeTheme={ToggleTheme} />
{children}
</div>
</div>
......
lib/posts.ts 0 → 100644
import fs from "fs";
import matter from "gray-matter";
import path from "path";
const postsDirectory = path.join(process.cwd(), 'posts');
type PostTypes={
id: number;
blogTitle: string;
authorDetails: {
author: string;
date: Date;
authorImg: string;
};
category: string;
readingTime: number;
content: string;
categories: string[];
banner: {
img: string;
width: number;
height: number;
};
description: string;
}
export function getAllPosts():PostTypes[] {
const filenames = fs.readdirSync(postsDirectory);
const posts:any[] = filenames.map((filename) => {
const fullPath = path.join(postsDirectory, filename);
const fileContents = fs.readFileSync(fullPath, 'utf8');
const { data, content } = matter(fileContents);
return {
...data,
content,
};
});
return posts;
}
\ No newline at end of file
package-lock.json
......@@ -13,7 +13,10 @@
"@types/node": "^20.11.5",
"@types/react": "^18.2.48",
"autoprefixer": "^10.4.17",
"axios": "^1.7.2",
"classnames": "^2.5.1",
"fs": "^0.0.1-security",
"gray-matter": "^4.0.3",
"next": "^14.1.0",
"postcss": "^8.4.33",
"react": "^18.2.0",
......@@ -9901,7 +9904,6 @@
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
"dev": true,
"dependencies": {
"sprintf-js": "~1.0.2"
}
......@@ -10191,8 +10193,7 @@
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"dev": true
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
......@@ -10263,6 +10264,16 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axobject-query": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
......@@ -11480,7 +11491,6 @@
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dev": true,
"dependencies": {
"delayed-stream": "~1.0.0"
},
......@@ -12529,7 +12539,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"dev": true,
"engines": {
"node": ">=0.4.0"
}
......@@ -13839,7 +13848,6 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
"dev": true,
"bin": {
"esparse": "bin/esparse.js",
"esvalidate": "bin/esvalidate.js"
......@@ -14057,6 +14065,17 @@
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
},
"node_modules/extend-shallow": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
"dependencies": {
"is-extendable": "^0.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/external-editor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
......@@ -14489,6 +14508,25 @@
"node": ">=0.4.0"
}
},
"node_modules/follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
......@@ -14644,7 +14682,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dev": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
......@@ -14684,6 +14721,11 @@
"node": ">= 0.6"
}
},
"node_modules/fs": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
"integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
},
"node_modules/fs-constants": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
......@@ -15267,6 +15309,20 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"dev": true
},
"node_modules/gray-matter": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
"integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
"dependencies": {
"js-yaml": "^3.13.1",
"kind-of": "^6.0.2",
"section-matter": "^1.0.0",
"strip-bom-string": "^1.0.0"
},
"engines": {
"node": ">=6.0"
}
},
"node_modules/gunzip-maybe": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz",
......@@ -16177,6 +16233,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
......@@ -16795,7 +16859,6 @@
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
"dev": true,
"dependencies": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
......@@ -16967,7 +17030,6 @@
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
......@@ -18175,7 +18237,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
......@@ -18184,7 +18245,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
......@@ -19957,8 +20017,7 @@
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"dev": true
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/public-encrypt": {
"version": "4.0.3",
......@@ -21253,6 +21312,18 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/section-matter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
"integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
"dependencies": {
"extend-shallow": "^2.0.1",
"kind-of": "^6.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/semver": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
......@@ -21680,8 +21751,7 @@
"node_modules/sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
"dev": true
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
},
"node_modules/stackframe": {
"version": "1.3.4",
......@@ -22181,6 +22251,14 @@
"node": ">=8"
}
},
"node_modules/strip-bom-string": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
"integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/strip-final-newline": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
......
package.json
......@@ -16,7 +16,10 @@
"@types/node": "^20.11.5",
"@types/react": "^18.2.48",
"autoprefixer": "^10.4.17",
"axios": "^1.7.2",
"classnames": "^2.5.1",
"fs": "^0.0.1-security",
"gray-matter": "^4.0.3",
"next": "^14.1.0",
"postcss": "^8.4.33",
"react": "^18.2.0",
......
pages/Home.tsx
......@@ -2,16 +2,14 @@
import Heading from "@/components/base/Heading/Heading";
import BlogCard from "@/components/Top-Level/blog-card/BlogCard";
import Pagination from "@/components/Top-Level/pagination/pagination";
import { FilterContext } from "@/hooks/Filter";
import { paginationContext } from "@/hooks/usePagination";
import { Context } from "@/hooks/AppContext";
import { useRouter } from "next/navigation";
import { useContext, useEffect, useState } from "react";
const Home = () => {
const [isMounted, setisMounted] = useState(false)
const { size, currentPage, start, end, handleChangePage } = useContext(paginationContext);
const router = useRouter();
const {data} = useContext(FilterContext);
const {data, size, currentPage, start, end, handleChangePage } = useContext(Context);
useEffect(() => {
setisMounted(true);
}, [])
......@@ -19,8 +17,9 @@ const Home = () => {
if (!isMounted) {
return null
}
console.log(data)
return (
<div className="max-w-[1100px] mx-auto px-2 ">
<div className="max-w-[1100px] mx-auto px-4 ">
<Heading />
<div className="flex flex-wrap gap-6 w-full dark:bg-black mt-4">
{
......@@ -29,13 +28,21 @@ const Home = () => {
{data?.slice(start,end).map((data) => (
<div key={data.id} className="flex-grow sm:flex-grow-0 sm:w-[calc(50%-1rem)]
lg:w-[calc(33.33%-1rem)] *:sm:max-w-full *:h-full">
<BlogCard {...data} handleClick={() => {
<BlogCard {
...{
title: data.blogTitle,
img: data.banner.img,
...data.authorDetails,
date:new Date(data.authorDetails.date),
...data,
}
} handleClick={() => {
router.push(`/blog/${data.id}`)
}}/>
</div>
))}
</div>
<center className="w-full p-6 flex justify-center ">
<center className="w-full p-2 sm:p-4 md:p-6 flex justify-center ">
<Pagination size={Math.ceil(data
.length / size)} onChange={handleChangePage} currentPage={currentPage} />
</center>
......
pages/blog.tsx
import BlogPage from '@/components/Top-Level/blog-page/Blogpage'
import { pageData } from '@/utils/Data';
interface BlogProps{
id:number;
import BlogPage from '@/components/Top-Level/blog-page/Blogpage';
import axios from 'axios';
interface BlogProps {
id: number;
}
interface AuthorDetails {
author: string;
authorImg: string;
date: Date | string;
}
interface Banner {
img: string;
width: number;
height: number;
}
const Blog: React.FC<BlogProps> = ({ id }) => {
const data = pageData[id - 1];
return (
<BlogPage {...data} />
)
interface BlogDataItem {
id: number;
title: string;
authorDetails: AuthorDetails;
category: string;
readingTime: number;
categories: string[];
banner: Banner;
content: string;
}
interface BlogData {
Data: BlogDataItem[];
}
const Blog: React.FC<BlogProps> = async ({ id }) => {
const res = await axios.get<BlogData>('http://localhost:3000/api/');
const data = res.data.Data;
console.log(data)
const blogData = data.find(item => item.id === id);
if (!blogData) {
return <div>Blog post not found.</div>;
}
return <BlogPage {...blogData} />;
}
export default Blog
\ No newline at end of file
export default Blog;
posts/1.md 0 → 100644
---
id: 1
title: "How to get perfect start for beginning runners"
authorDetails:
author: "Alex Johnson"
date: "2018-05-21"
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "A comprehensive guide for beginning runners to get a perfect start."
categories: ["Art", "Inspiration"]
readingTime: 10
banner:
img: "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg"
width: 1920
height: 500
---
## Embrace the Unique: Turning Imperfections into Art
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
> #### For radiant skin, mix lemon juice with sugar. Gently scrub your face for a minute, then rinse off.
>
> — Jamie Oliver
Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.
## Embrace the Unique
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
1. Vestibulum id ligula porta felis euismod semper.
2. Nulla vitae elit libero, a pharetra augue.
3. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
4. Donec ullamcorper nulla non metus auctor fringilla.
## Aenean lacinia bibendum nulla
Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
posts/10.md 0 → 100644
---
id: 10
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
authorDetails:
author: "Laura Kim"
date: "2019-10-19"
authorImg: "https://images.pexels.com/photos/1674752/pexels-photo-1674752.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Exploring the concept of finding beauty and creativity in the imperfect aspects of crafting."
categories: ["Crafts", "Creativity"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2014/12/07/09/30/milky-way-559641_640.jpg"
width: 1920
height: 500
---
## Finding Art in the Imperfect
Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> #### For soft skin, mix coconut oil with sugar. Gently scrub your face for 5 minutes.
>
> — Vincent van Gogh
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
## Finding Art
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/11.md 0 → 100644
---
id: 11
blogTitle: "The Ultimate Guide to Adventure Travel"
authorDetails:
author: "Jane Smith"
date: "2021-01-15"
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 8
categories:
- "Architecture"
- "Modernism"
banner:
img: "https://cdn.pixabay.com/photo/2024/05/09/17/24/shih-tzu-8751508_640.jpg"
width: 1920
height: 500
description: "Discover the beauty and functionality of Brutalist architecture, where simplicity meets strength."
---
## The Beauty of Brutalism
Proin eget tortor risus. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
> #### Less is more.
>
> — Ludwig Mies van der Rohe
Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada.
## Functional Aesthetics
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla quis lorem ut libero malesuada feugiat.
3. Vivamus suscipit tortor eget felis porttitor volutpat.
4. Donec rutrum congue leo eget malesuada.
## The Modern Touch
Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit.
posts/12.md 0 → 100644
---
id: 12
blogTitle: "10 Must-Visit Destinations in Africa"
authorDetails:
author: "Alex Johnson"
date: "2021-05-10"
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 5
categories:
- "Architecture"
- "Innovation"
banner:
img: "https://cdn.pixabay.com/photo/2024/06/23/12/06/sparrow-8848051_640.jpg"
width: 1920
height: 500
description: "Explore the cutting-edge designs and sustainable solutions shaping the future of architecture."
---
## Futuristic Architecture: A Glimpse Ahead
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat.
> #### Form follows function.
>
> — Louis Sullivan
Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
## Innovative Designs
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat.
1. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## Sustainable Solutions
Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
posts/13.md 0 → 100644
---
id: 13
blogTitle: "Boost Your Productivity with These Office Hacks"
authorDetails:
author: "Emily Davis"
date: "2021-07-21"
authorImg: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 7
categories:
- "Architecture"
- "Sustainability"
banner:
img: "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg"
width: 1920
height: 500
description: "Learn about the innovative practices in green architecture that are paving the way to a sustainable future."
---
## Green Architecture: Building a Sustainable Future
Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
> #### The best way to predict the future is to design it.
>
> — Buckminster Fuller
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Eco-friendly Innovations
Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## The Future is Green
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/14.md 0 → 100644
---
id: 14
blogTitle: "Healthy Eating: 7 Delicious Salad Recipes"
authorDetails:
author: "Michael Lee"
date: "2021-08-30"
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 9
categories:
- "Architecture"
- "Engineering"
banner:
img: "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg"
width: 1920
height: 500
description: "Trace the history and future of skyscrapers, exploring their architectural marvels and engineering feats."
---
## The Evolution of Skyscrapers
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
> #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.
>
> — Le Corbusier
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Reaching New Heights
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## The Sky's the Limit
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
posts/15.md 0 → 100644
---
id: 15
blogTitle: "Top Hiking Trails for Beginners"
authorDetails:
author: "Sophia Martinez"
date: "2022-01-20"
authorImg: "https://images.pexels.com/photos/936117/pexels-photo-936117.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 5
categories:
- "Architecture"
- "Modernism"
banner:
img: "https://cdn.pixabay.com/photo/2019/11/23/16/07/garden-4647544_640.jpg"
width: 1920
height: 500
description: "Delve into modern architecture, exploring its innovative designs and timeless qualities."
---
## Exploring Modern Architecture
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
> #### Architecture should speak of its time and place, but yearn for timelessness.
>
> — Frank Gehry
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Innovations in Design
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## The Modern Touch
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/16.md 0 → 100644
---
id: 16
blogTitle: "Understanding Asynchronous JavaScript"
authorDetails:
author: "David Robinson"
date: "2022-03-05"
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 8
categories:
- "Architecture"
- "Society"
banner:
img: "https://cdn.pixabay.com/photo/2023/12/15/22/38/trees-8451483_640.jpg"
width: 1920
height: 500
description: "Explore how architecture shapes and influences society, creating spaces that foster community and social interaction."
---
## The Impact of Architecture on Society
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
> #### Architecture is the reaching out for the truth.
>
> — Louis Kahn
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Social Influence
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## Building Communities
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/17.md 0 → 100644
---
id: 17
blogTitle: "How to Start a Blog: A Step-by-Step Guide"
authorDetails:
author: "Mia Harris"
date: "2022-04-20"
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 6
categories:
- "Architecture"
- "Technology"
banner:
img: "https://cdn.pixabay.com/photo/2024/05/02/16/22/parrots-8735074_640.jpg"
width: 1920
height: 500
description: "Discover the rise of smart cities and how technology is transforming urban living and connectivity."
---
## The Rise of Smart Cities
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
> #### The mother art is architecture. Without an architecture of our own we have no soul of our own civilization.
>
> — Frank Lloyd Wright
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Urban Connectivity
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## The Future of Urban Living
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/18.md 0 → 100644
---
id: 18
blogTitle: "Remote Work: Tips for Staying Productive"
authorDetails:
author: "Isabella Walker"
date: "2022-05-15"
authorImg: "https://images.pexels.com/photos/712513/pexels-photo-712513.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 7
categories:
- "Architecture"
- "History"
banner:
img: "https://cdn.pixabay.com/photo/2024/04/18/14/04/vietnam-8704397_640.jpg"
width: 1920
height: 500
description: "Examine the lasting impact of classical architecture and its enduring influence on modern design."
---
## The Timelessness of Classical Architecture
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
> #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.
>
> — Le Corbusier
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Classical Influences
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## Enduring Designs
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/19.md 0 → 100644
---
id: 19
blogTitle: "Architectural Wonders Around the World"
authorDetails:
author: "Isabella Walker"
date: "2022-05-15"
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 7
categories:
- "Architecture"
- "History"
banner:
img: "https://cdn.pixabay.com/photo/2024/02/16/20/28/lighthouse-8578318_640.jpg"
width: 1920
height: 500
description: "Travel the world through its architectural wonders, exploring iconic structures and their historical significance."
---
## The Timelessness of Classical Architecture
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
> #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.
>
> — Le Corbusier
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Classical Influences
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## Enduring Designs
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/2.md 0 → 100644
---
id: 2
title: "Great tools to improve your personal blogging experience"
authorDetails:
author: "Michael Smith"
date: '2020-07-15'
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Discover tools to enhance your blogging experience and creativity."
categories: ["Design", "Beauty"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2023/08/15/15/48/swan-8192196_640.jpg"
width: 1920
height: 500
---
## Finding Beauty in Flaws: An Artistic Perspective
Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
> #### For glowing skin, blend cucumber with yogurt. Apply to your face and leave it on for 10 minutes.
>
> — Sofia Loren
Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
## Finding Beauty
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Maecenas faucibus mollis interdum
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/20.md 0 → 100644
---
id: 20
blogTitle: "The Future of Air Travel"
authorDetails:
author: "Matthew Taylor"
date: "2022-06-30"
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600"
category: "architecture"
readingTime: 6
categories:
- "Architecture"
- "Art"
banner:
img: "https://cdn.pixabay.com/photo/2024/02/18/15/22/swan-8581483_640.jpg"
width: 1920
height: 500
description: "Explore the convergence of architecture and art, where buildings become expressive works of visual art."
---
## The Intersection of Architecture and Art
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
> #### Architecture is a visual art, and the buildings speak for themselves.
>
> — Julia Morgan
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
## Blurring Boundaries
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
2. Nulla porttitor accumsan tincidunt.
3. Cras ultricies ligula sed magna dictum porta.
4. Vivamus suscipit tortor eget felis porttitor volutpat.
## Artistic Expressions
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
posts/3.md 0 → 100644
---
id: 3
title: "Great tools to improve your personal blogging experience"
authorDetails:
author: "Emily Davis"
date: '2019-11-03'
authorImg: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "An exploration of embracing imperfections in art and life."
categories: ["Lifestyle", "Inspiration"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2024/05/18/08/16/cat-8769861_640.jpg"
width: 1920
height: 500
---
## The Art of Imperfection: Celebrating Flaws
Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.
> #### For smooth skin, mash strawberries and mix with cream. Apply to your face for 5 minutes.
>
> — Audrey Hepburn
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
## The Art of Imperfection
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/4.md 0 → 100644
---
id: 4
title: "The technical setup when starting a personal blog"
authorDetails:
author: "Oliver Brown"
date: 2021-09-10
authorImg: "https://images.pexels.com/photos/1310522/pexels-photo-1310522.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "A guide to setting up a personal blog with a focus on photography."
categories: ["Photography", "Creativity"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2023/08/08/10/50/hot-wheels-8177051_640.jpg"
width: 1920
height: 500
---
## Art in Imperfection: A Creative Journey
Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> #### For hydrated skin, mix aloe vera gel with rose water. Apply it to your face and let it sit for 15 minutes.
>
> — Marilyn Monroe
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
## Art in Imperfection
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/5.md 0 → 100644
---
id: 5
title: "The technical setup when starting a personal blog"
authorDetails:
author: "Sophia Johnson"
date: "2023-03-17"
authorImg: "https://images.pexels.com/photos/1542085/pexels-photo-1542085.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Technical steps to starting a blog with a focus on creativity."
categories: ["Creative", "Inspiration"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2024/07/17/11/34/animal-8901326_960_720.jpg"
width: 1920
height: 500
---
## Imperfections in Art: A New Perspective
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.
Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.
> #### For refreshed skin, combine mint leaves with cucumber. Apply the mixture to your face and leave it for 10 minutes.
>
> — Grace Kelly
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
## Imperfections in Art
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/6.md 0 → 100644
---
id: 6
title: "The technical setup when starting a personal blog"
authorDetails:
author: "Sophia Johnson"
date: "2023-03-17"
authorImg: "https://images.pexels.com/photos/1542085/pexels-photo-1542085.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Technical steps to starting a blog with a focus on creativity."
categories: ["Creative", "Inspiration"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2024/07/17/11/34/animal-8901326_960_720.jpg"
width: 1920
height: 500
---
## Imperfections in Art: A New Perspective
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.
Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.
> #### For refreshed skin, combine mint leaves with cucumber. Apply the mixture to your face and leave it for 10 minutes.
>
> — Grace Kelly
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
## Imperfections in Art
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/7.md 0 → 100644
---
id: 7
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
authorDetails:
author: "John Green"
date: "2016-02-10"
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Exploring the charm and beauty found in the imperfections of artistic creations."
categories: ["Painting", "Inspiration"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2013/03/12/17/54/hurricane-92968_640.jpg"
width: 1920
height: 500
---
## The Beauty of Imperfection in Artistic Creations
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis, est vel euismod aliquet, felis quam fermentum dolor, in vulputate elit orci a eros.
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
> #### For smooth skin, mash banana and mix with honey. Apply to your face for 10 minutes.
>
> — Leonardo da Vinci
Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.
## The Beauty of Imperfection
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
1. Vestibulum id ligula porta felis euismod semper.
2. Nulla vitae elit libero, a pharetra augue.
3. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
4. Donec ullamcorper nulla non metus auctor fringilla.
## Aenean lacinia bibendum nulla
Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
posts/8.md 0 → 100644
---
id: 8
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
authorDetails:
author: "Anna Lee"
date: "2017-03-25"
authorImg: "https://images.pexels.com/photos/678783/pexels-photo-678783.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Delving into how flaws and imperfections can enhance the beauty and uniqueness of sculptural art."
categories: ["Sculpture", "Creativity"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_640.jpg"
width: 1920
height: 500
---
## Perfectly Imperfect: Art in Flaws
Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
> #### For clear skin, mix oatmeal with yogurt. Apply to your face for 15 minutes.
>
> — Pablo Picasso
Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
## Perfectly Imperfect
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
posts/9.md 0 → 100644
---
id: 9
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
authorDetails:
author: "David Clark"
date: "2018-08-14"
authorImg: "https://images.pexels.com/photos/1499327/pexels-photo-1499327.jpeg?auto=compress&cs=tinysrgb&w=600"
description: "Examining how literary works often embrace imperfections to create profound and relatable stories."
categories: ["Literature", "Art"]
readingTime: 5
banner:
img: "https://cdn.pixabay.com/photo/2023/08/01/08/21/waterfall-8162449_640.jpg"
width: 1920
height: 500
---
## The Essence of Flaws in Artistic Expression
Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.
> #### For a fresh look, mix avocado with olive oil. Apply to your face for 10 minutes.
>
> — William Shakespeare
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
## The Essence of Flaws
Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
2. Maecenas sed diam eget risus varius blandit.
3. Fusce dapibus, tellus ac cursus commodo.
4. Donec id elit non mi porta gravida at eget metus.
## Vestibulum id ligula porta felis euismod semper
Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
types/blog.ts
export interface profileCardsItems{
author: string;
authorImg: string;
date: Date;
date: Date | string;
}
\ No newline at end of file
utils/Data.ts
export const pageData =[{
"blogTitle": "Embrace the Unique: Turning Imperfections into Art",
export const pageData = [{
"id": 1,
"blogTitle": "How to get perfect start for beginning runners",
"authorDetails": {
"author": "Jane Doe",
"date": new Date('2018-05-21')
"date": new Date('2018-05-21'),
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "art",
"readingTime": 2,
......@@ -12,16 +14,19 @@ export const pageData =[{
"Inspiration"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg",
"img": "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg",
"width": 1920,
"height": 500
}
},
"description": "A comprehensive guide for beginning runners to get a perfect start."
},
{
"blogTitle": "Finding Beauty in Flaws: An Artistic Perspective",
"id": 2,
"blogTitle": "Great tools to improve your personal blogging experience",
"authorDetails": {
"author": "Michael Smith",
"date": new Date('2020-07-15')
"date": new Date('2020-07-15'),
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "design",
"readingTime": 3,
......@@ -31,16 +36,19 @@ export const pageData =[{
"Beauty"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2023/08/15/15/48/swan-8192196_640.jpg',
"img": 'https://cdn.pixabay.com/photo/2023/08/15/15/48/swan-8192196_640.jpg',
"width": 1920,
"height": 500
}
},
"description": "Discover tools to enhance your blogging experience and creativity."
},
{
"blogTitle": "The Art of Imperfection: Celebrating Flaws",
"id": 3,
"blogTitle": "Great tools to improve your personal blogging experience",
"authorDetails": {
"author": "Emily Davis",
"date": new Date('2019-11-03')
"date": new Date('2019-11-03'),
authorImg: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "lifestyle",
"readingTime": 4,
......@@ -50,16 +58,19 @@ export const pageData =[{
"Inspiration"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/18/08/16/cat-8769861_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/05/18/08/16/cat-8769861_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "An exploration of embracing imperfections in art and life."
},
{
"blogTitle": "Art in Imperfection: A Creative Journey",
"id": 4,
"blogTitle": "The technical setup when starting a personal blog",
"authorDetails": {
"author": "Oliver Brown",
"date": new Date('2021-09-10')
"date": new Date('2021-09-10'),
authorImg: "https://images.pexels.com/photos/1310522/pexels-photo-1310522.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "photography",
"readingTime": 5,
......@@ -69,34 +80,40 @@ export const pageData =[{
"Creativity"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/08/08/10/50/hot-wheels-8177051_640.jpg",
"img": "https://cdn.pixabay.com/photo/2023/08/08/10/50/hot-wheels-8177051_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "A guide to setting up a personal blog with a focus on photography."
},
{
"blogTitle": "Imperfections in Art: A New Perspective",
"id": 5,
"blogTitle": "The technical setup when starting a personal blog",
"authorDetails": {
"author": "Sophia Johnson",
"date": new Date('2023-03-17')
"date": new Date('2023-03-17'),
authorImg: "https://images.pexels.com/photos/1542085/pexels-photo-1542085.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "creative",
"readingTime": 6,
"content": "\n ## Imperfections in Art: A New Perspective\n\n Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.\n\n Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\n > #### For refreshed skin, combine mint leaves with cucumber. Apply the mixture to your face and leave it for 10 minutes.\n > \n > — Grace Kelly\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## Imperfections in Art\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"content": "\n ## Imperfections in Art: A New Perspective\n\n Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.\n\n Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\n > #### For refreshed skin, combine mint leaves with cucumber. Apply the mixture to your face and leave it for 10 minutes.\n > \n > — Grace Kelly\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## Imperfections in Art\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Creative",
"Art"
"Inspiration"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2020/04/22/12/06/adventure-5077760_960_720.jpg',
"img": "https://cdn.pixabay.com/photo/2024/07/17/11/34/animal-8901326_960_720.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Beauty of Imperfection in Artistic Creations",
},
"description": "Technical steps to starting a blog with a focus on creativity."
}, {
"id": 6,
"blogTitle": "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
"authorDetails": {
"author": "John Green",
"date": new Date('2016-02-10')
"date": new Date('2016-02-10'),
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "painting",
"readingTime": 2,
......@@ -106,16 +123,19 @@ export const pageData =[{
"Inspiration"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2013/03/12/17/54/hurricane-92968_640.jpg",
"img": "https://cdn.pixabay.com/photo/2013/03/12/17/54/hurricane-92968_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "Exploring the charm and beauty found in the imperfections of artistic creations."
},
{
"blogTitle": "Perfectly Imperfect: Art in Flaws",
"id": 7,
"blogTitle": "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
"authorDetails": {
"author": "Anna Lee",
"date": new Date('2017-03-25')
"date": new Date('2017-03-25'),
authorImg: "https://images.pexels.com/photos/678783/pexels-photo-678783.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "sculpture",
"readingTime": 3,
......@@ -125,16 +145,19 @@ export const pageData =[{
"Creativity"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "Delving into how flaws and imperfections can enhance the beauty and uniqueness of sculptural art."
},
{
"blogTitle": "The Essence of Flaws in Artistic Expression",
"id": 8,
"blogTitle": "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
"authorDetails": {
"author": "David Clark",
"date": new Date('2018-08-14')
"date": new Date('2018-08-14'),
authorImg: "https://images.pexels.com/photos/1499327/pexels-photo-1499327.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "literature",
"readingTime": 4,
......@@ -144,16 +167,19 @@ export const pageData =[{
"Art"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2023/08/01/08/21/waterfall-8162449_640.jpg',
"img": "https://cdn.pixabay.com/photo/2023/08/01/08/21/waterfall-8162449_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "Examining how literary works often embrace imperfections to create profound and relatable stories."
},
{
"blogTitle": "Finding Art in the Imperfect",
"id": 9,
"blogTitle": "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
"authorDetails": {
"author": "Laura Kim",
"date": new Date('2019-10-19')
"date": new Date('2019-10-19'),
authorImg: "https://images.pexels.com/photos/1674752/pexels-photo-1674752.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "crafts",
"readingTime": 5,
......@@ -163,16 +189,19 @@ export const pageData =[{
"Creativity"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2014/12/07/09/30/milky-way-559641_640.jpg",
"img": "https://cdn.pixabay.com/photo/2014/12/07/09/30/milky-way-559641_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "Exploring the concept of finding beauty and creativity in the imperfect aspects of crafting."
},
{
"blogTitle": "Embracing Flaws: The Art of Imperfection",
"id": 10,
"blogTitle": "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
"authorDetails": {
"author": "Henry Moore",
"date": new Date('2020-12-30')
"date": new Date('2020-12-30'),
authorImg: "https://images.pexels.com/photos/1898555/pexels-photo-1898555.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
......@@ -182,16 +211,19 @@ export const pageData =[{
"Design"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2024/05/24/17/14/travel-8785493_640.jpg',
"img": "https://cdn.pixabay.com/photo/2024/05/24/17/14/travel-8785493_640.jpg",
"width": 1920,
"height": 500
}
},
"description": "Understanding how the acceptance and incorporation of flaws can lead to innovative and unique architectural designs."
},
{
"blogTitle": "The Beauty of Brutalism",
"id": 11,
"blogTitle": "The Ultimate Guide to Adventure Travel",
"authorDetails": {
"author": "Jane Smith",
"date": new Date('2021-01-15')
"date": new Date('2021-01-15'),
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 8,
......@@ -201,16 +233,19 @@ export const pageData =[{
"Modernism"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/09/17/24/shih-tzu-8751508_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/05/09/17/24/shih-tzu-8751508_640.jpg",
"width": 1920,
"height": 500
}
}
,{
"blogTitle": "Futuristic Architecture: A Glimpse Ahead",
},
"description": "Discover the beauty and functionality of Brutalist architecture, where simplicity meets strength."
},
{
"id": 12,
"blogTitle": "10 Must-Visit Destinations in Africa",
"authorDetails": {
"author": "Alex Johnson",
"date": new Date('2021-05-10')
"date": new Date('2021-05-10'),
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 5,
......@@ -220,15 +255,19 @@ export const pageData =[{
"Innovation"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/06/23/12/06/sparrow-8848051_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/06/23/12/06/sparrow-8848051_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Green Architecture: Building a Sustainable Future",
},
"description": "Explore the cutting-edge designs and sustainable solutions shaping the future of architecture."
},
{
"id": 13,
"blogTitle": "Boost Your Productivity with These Office Hacks",
"authorDetails": {
"author": "Emily Davis",
"date": new Date('2021-07-21')
"date": new Date('2021-07-21'),
authorImg: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
......@@ -238,16 +277,19 @@ export const pageData =[{
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Evolution of Skyscrapers",
},
"description": "Learn about the innovative practices in green architecture that are paving the way to a sustainable future."
},
{
"id": 14,
"blogTitle": "Healthy Eating: 7 Delicious Salad Recipes",
"authorDetails": {
"author": "Michael Lee",
"date": new Date('2021-08-30')
"date": new Date('2021-08-30'),
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 9,
......@@ -257,34 +299,19 @@ export const pageData =[{
"Engineering"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2019/11/23/16/07/garden-4647544_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Exploring Modern Architecture",
"authorDetails": {
"author": "Sophia Martinez",
"date": new Date('2022-01-20')
"description": "Trace the history and future of skyscrapers, exploring their architectural marvels and engineering feats."
},
"category": "architecture",
"readingTime": 5,
"content": "\n ## Exploring Modern Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture should speak of its time and place, but yearn for timelessness.\n > \n > — Frank Gehry\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Innovations in Design\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Modern Touch\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Modernism"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/17/15/14/crows-8579540_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Exploring Modern Architecture",
{
"id": 15,
"blogTitle": "Top Hiking Trails for Beginners",
"authorDetails": {
"author": "Sophia Martinez",
"date": new Date('2022-01-20')
"date": new Date('2022-01-20'),
authorImg: "https://images.pexels.com/photos/936117/pexels-photo-936117.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 5,
......@@ -294,15 +321,18 @@ export const pageData =[{
"Modernism"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/12/15/22/38/trees-8451483_640.jpg",
"img": "https://cdn.pixabay.com/photo/2019/11/23/16/07/garden-4647544_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Impact of Architecture on Society",
},
"description": "Delve into modern architecture, exploring its innovative designs and timeless qualities."
},{
"id": 16,
"blogTitle": "Understanding Asynchronous JavaScript",
"authorDetails": {
"author": "David Robinson",
"date": new Date('2022-03-05')
"date": new Date('2022-03-05'),
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 8,
......@@ -312,16 +342,19 @@ export const pageData =[{
"Society"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/02/16/22/parrots-8735074_640.jpg",
"img": "https://cdn.pixabay.com/photo/2023/12/15/22/38/trees-8451483_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Rise of Smart Cities",
"description": "Explore how architecture shapes and influences society, creating spaces that foster community and social interaction."
},
{
"id": 17,
"blogTitle": "How to Start a Blog: A Step-by-Step Guide",
"authorDetails": {
"author": "Mia Harris",
"date": new Date('2022-04-20')
"date": new Date('2022-04-20'),
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
......@@ -331,15 +364,19 @@ export const pageData =[{
"Technology"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/04/18/14/04/vietnam-8704397_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/05/02/16/22/parrots-8735074_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Timelessness of Classical Architecture",
},
"description": "Discover the rise of smart cities and how technology is transforming urban living and connectivity."
},
{
"id": 18,
"blogTitle": "Remote Work: Tips for Staying Productive",
"authorDetails": {
"author": "Isabella Walker",
"date": new Date('2022-05-15')
"date": new Date('2022-05-15'),
authorImg: "https://images.pexels.com/photos/712513/pexels-photo-712513.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
......@@ -349,15 +386,19 @@ export const pageData =[{
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/16/20/28/lighthouse-8578318_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/04/18/14/04/vietnam-8704397_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Timelessness of Classical Architecture",
},
"description": "Examine the lasting impact of classical architecture and its enduring influence on modern design."
},
{
"id": 19,
"blogTitle": "Architectural Wonders Around the World",
"authorDetails": {
"author": "Isabella Walker",
"date": new Date('2022-05-15')
"date": new Date('2022-05-15'),
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
......@@ -367,15 +408,19 @@ export const pageData =[{
"History"
],
"banner": {
"img": "https://cdn.pixabay.com/photo/2014/12/16/21/10/capitol-570336_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/02/16/20/28/lighthouse-8578318_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Intersection of Architecture and Art",
},
"description": "Travel the world through its architectural wonders, exploring iconic structures and their historical significance."
},
{
"id": 20,
"blogTitle": "The Future of Air Travel",
"authorDetails": {
"author": "Matthew Taylor",
"date": new Date('2022-06-30')
"date": new Date('2022-06-30'),
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
......@@ -385,106 +430,127 @@ export const pageData =[{
"Art"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/18/15/22/swan-8581483_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/02/18/15/22/swan-8581483_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Preserving Architectural Heritage",
},
"description": "Explore the convergence of architecture and art, where buildings become expressive works of visual art."
},{
"id": 21,
"blogTitle": "Photography Tips for Beginners",
"authorDetails": {
"author": "Lucas Evans",
"date": new Date('2022-08-10')
"date": new Date('2022-08-10'),
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
"description": "An insightful guide to preserving architectural heritage through photography.",
"content": "\n ## Preserving Architectural Heritage\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the thoughtful making of space.\n > \n > — Louis Kahn\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Protecting History\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Heritage Conservation\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/03/28/15/59/life-8661191_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/03/28/15/59/life-8661191_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Future of Sustainable Architecture",
},
{
"id": 22,
"blogTitle": "DIY Home Decor Projects",
"authorDetails": {
"author": "Grace Anderson",
"date": new Date('2022-09-15')
"date": new Date('2022-09-15'),
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 8,
"description": "Discover innovative and eco-friendly home decor projects with a focus on sustainable architecture.",
"content": "\n ## The Future of Sustainable Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the will of an epoch translated into space.\n > \n > — Ludwig Mies van der Rohe\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Eco-friendly Innovations\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Green Building Practices\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/11/26/23/33/horse-8414400_640.jpg",
"img": "https://cdn.pixabay.com/photo/2023/11/26/23/33/horse-8414400_640.jpg",
"width": 1920,
"height": 500
}
},
},
{
"blogTitle": "Reviving Historic Buildings",
"id": 23,
"blogTitle": "Top 10 Books to Read This Summer",
"authorDetails": {
"author": "Liam Clark",
"date": new Date('2022-10-30')
"date": new Date('2022-10-30'),
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
"description": "Explore the best books for summer reading, with a special focus on reviving historic buildings.",
"content": "\n ## Reviving Historic Buildings\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### To provide meaningful architecture is not to parody history, but to articulate it.\n > \n > — Daniel Libeskind\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Breathing New Life\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Power of Adaptation\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/06/22/05/25/bear-8845470_640.jpg",
"img": "https://cdn.pixabay.com/photo/2024/06/22/05/25/bear-8845470_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Influence of Cultural Diversity on Architecture",
},
{
"id": 24,
"blogTitle": "A Guide to Urban Exploration",
"authorDetails": {
"author": "Sophia Lee",
"date": new Date('2023-05-20')
"date": new Date('2023-05-20'),
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 8,
"description": "An exploration of how cultural diversity influences modern architecture.",
"content": "\n ## The Influence of Cultural Diversity on Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture should speak of its time and place, but yearn for timelessness.\n > \n > — Frank Gehry\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Global Inspirations\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Celebrating Diversity\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Culture"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/03/29/16/13/labrador-retriever-7885882_640.jpg",
"img": "https://cdn.pixabay.com/photo/2023/03/29/16/13/labrador-retriever-7885882_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Challenges in Modern Urban Development",
},
{
"id": 25,
"blogTitle": "Mastering CSS Grid Layout",
"authorDetails": {
"author": "Daniel Brown",
"date": new Date('2023-06-15')
"date": new Date('2023-06-15'),
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
"description": "A comprehensive guide on modern urban development challenges and sustainable solutions.",
"content": "\n ## Challenges in Modern Urban Development\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the reaching out for the truth.\n > \n > — Louis Kahn\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Sustainable Solutions\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Balancing Growth\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Urban Development"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2013/10/30/21/03/chocolate-203276_640.jpg",
"img": "https://cdn.pixabay.com/photo/2013/10/30/21/03/chocolate-203276_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Resurgence of Brutalist Architecture",
}, {
id: 26,
"blogTitle": "Parenting Tips for New Moms and Dads",
"authorDetails": {
"author": "Olivia Martinez",
"date": new Date('2023-07-10')
"date": new Date('2023-07-10'),
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
......@@ -497,12 +563,15 @@ export const pageData =[{
img: "https://cdn.pixabay.com/photo/2024/04/13/11/29/muffins-8693748_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Exploring the Future of Smart Homes",
},
"description": "Discover the bold and elegant aspects of Brutalist architecture, characterized by its use of concrete and emphasis on functionality."
}, {
id: 27,
"blogTitle": "Gourmet Cooking at Home",
"authorDetails": {
"author": "Jacob Wilson",
"date": new Date('2023-08-25')
"date": new Date('2023-08-25'),
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 8,
......@@ -515,12 +584,15 @@ export const pageData =[{
img: "https://cdn.pixabay.com/photo/2023/07/04/17/13/mallow-8106680_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Architectural Marvels of the Ancient World",
},
"description": "Explore how technology is transforming smart homes, integrating automation for a seamless living experience."
}, {
id: 28,
"blogTitle": "Freelancing 101: How to Get Started",
"authorDetails": {
"author": "Sophie Roberts",
"date": new Date('2023-09-20')
"date": new Date('2023-09-20'),
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
......@@ -533,12 +605,15 @@ export const pageData =[{
img: "https://cdn.pixabay.com/photo/2024/06/21/15/18/road-8844555_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Architectural Marvels of the Ancient World",
},
"description": "A journey through the architectural wonders of the ancient world, showcasing the enduring legacy of historic structures."
}, {
id: 29,
"blogTitle": "Mindfulness and Meditation for Beginners",
"authorDetails": {
"author": "Sophie Roberts",
"date": new Date('2023-09-20')
"date": new Date('2023-09-20'),
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
......@@ -548,16 +623,18 @@ export const pageData =[{
"History"
],
"banner": {
"img": "https://cdn.pixabay.com/photo/2015/09/18/11/46/colosseum-948587_640.jpg",
img: "https://cdn.pixabay.com/photo/2014/10/24/15/08/heaven-501350_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Impact of Climate Change on Architecture",
"description": "A journey through the architectural wonders of the ancient world, showcasing the enduring legacy of historic structures."
}, {
id: 30,
"blogTitle": "Building Your First Website with HTML and CSS",
"authorDetails": {
"author": "Nathan Davis",
"date": new Date('2023-10-15')
"date": new Date('2023-10-15'),
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
......@@ -567,16 +644,19 @@ export const pageData =[{
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2014/10/24/15/08/heaven-501350_640.jpg",
img: "https://cdn.pixabay.com/photo/2024/02/17/08/27/bird-8578905_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Revival of Postmodern Architecture",
"description": "Examining the impact of climate change on architecture and the importance of sustainable practices in modern design."
}
,{
id: 31,
"blogTitle": "Balancing Work and Family Life",
"authorDetails": {
"author": "Isabella Wright",
"date": new Date('2023-11-12')
"date": new Date('2023-11-12'),
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 7,
......@@ -586,15 +666,18 @@ export const pageData =[{
"Design"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/17/08/27/bird-8578905_640.jpg",
img: "https://cdn.pixabay.com/photo/2024/03/19/16/46/key-west-8643631_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Influence of Nature in Contemporary Architecture",
},
"description": "Explore the revival of Postmodern architecture, highlighting its diverse and playful design elements that challenge traditional aesthetics."
}, {
id: 32,
"blogTitle": "Investing 101: A Beginner's Guide",
"authorDetails": {
"author": "Lucas Taylor",
"date": new Date('2023-12-08')
"date": new Date('2023-12-08'),
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 6,
......@@ -604,15 +687,18 @@ export const pageData =[{
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/03/19/16/46/key-west-8643631_640.jpg",
img: "https://cdn.pixabay.com/photo/2023/06/11/01/24/flowers-8055013_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Evolution of Skyscraper Design",
},
"description": "Discover how contemporary architecture incorporates natural elements and biophilic design principles to create harmonious and sustainable spaces."
}, {
id: 33,
"blogTitle": "Social Media Marketing Tips",
"authorDetails": {
"author": "Liam Johnson",
"date": new Date('2024-01-20')
"date": new Date('2024-01-20'),
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "architecture",
"readingTime": 8,
......@@ -622,9 +708,31 @@ export const pageData =[{
"Engineering"
],
"banner": {
"img": "https://cdn.pixabay.com/photo/2014/09/03/20/15/manhattan-435111_640.jpg",
img: "https://cdn.pixabay.com/photo/2023/12/08/05/41/cat-8436848_640.jpg",
"width": 1920,
"height": 500
}
},
},
"description": "Examine the evolution of skyscraper design and the engineering marvels that have shaped iconic structures throughout history."
}, {
id: 34,
"blogTitle": "Innovations in Urban Design",
"authorDetails": {
"author": "Sophia Martinez",
"date": new Date('2024-01-20'),
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
},
"category": "urban design",
"readingTime": 7,
"content": "\n ## Innovations in Urban Design\n\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n > #### Good architecture is not about the style. It is about creating something that resonates with people.\n > \n > — Frank Gehry\n\n Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.\n\n ## Transforming Cityscapes\n\n Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.\n\n 1. Vestibulum id ligula porta felis euismod semper.\n 2. Nulla vitae elit libero, a pharetra augue.\n 3. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.\n 4. Donec ullamcorper nulla non metus auctor fringilla.\n\n ## Sustainable Development\n\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Curabitur blandit tempus porttitor.",
"categories": [
"Urban Design",
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2017/08/01/02/10/dark-2562840_640.jpg",
"width": 1920,
"height": 500
},
"description": "Explore the latest innovations in urban design, focusing on transforming cityscapes and achieving sustainable development."
}
]
\ No newline at end of file
utils/blogs/01.md 0 → 100644
---
"categories": [
"Art",
"Inspiration"
]
"banner": {
"img": "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg"
"width": 1920
"height": 500
}
"blogTitle": "Embrace the Unique: Turning Imperfections into Art"
"authorDetails": {
"author": "Jane Doe"
"date": new Date('2018-05-21')
}
"category": "art"
"readingTime": 2
---
\n ## Embrace the Unique: Turning Imperfections into Art\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.\n\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n\n > #### For radiant skin, mix lemon juice with sugar. Gently scrub your face for a minute, then rinse off.\n > \n > — Jamie Oliver\n\n Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.\n\n ## Embrace the Unique\n\n Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\n 1. Vestibulum id ligula porta felis euismod semper.\n 2. Nulla vitae elit libero, a pharetra augue.\n 3. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.\n 4. Donec ullamcorper nulla non metus auctor fringilla.\n\n ## Aenean lacinia bibendum nulla\n\n Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment