Skip to content

Commit

Permalink
ok sloved
Browse files Browse the repository at this point in the history
  • Loading branch information
@darshanbajgain
darshanbajgain committed Oct 9, 2023
1 parent 18d9609 commit f6e1fcb
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 78 deletions.
48 changes: 48 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@
"dependencies": {
"markdown-it": "^13.0.2",
"markdown-parser-react": "^1.1.2",
"prop-type": "^0.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-markdown": "^9.0.0",
"react-router-dom": "^6.16.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
Expand Down
93 changes: 16 additions & 77 deletions src/components/BlogContent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom';
import ReactMarkdown from 'react-markdown';



const BlogContent = ({ blogsData }) => {

console.log(blogsData);
Expand All @@ -12,104 +11,44 @@ const BlogContent = ({ blogsData }) => {
if (blog) {
let arr = blogsData.data.filter(blog => blog.id == id)
blog = arr[0];
console.log(blog.attributes.blogContent);
}
else {
blog = {};
}



{ /*const blog = {
"id": 1,
'title': 'Blog 1',
'desc': "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
'coverImg': 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/876c22100707927.5f0ec9851cb08.png',
'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
'author': 'Darshan Bajgain',
'date': 'October 5, 2023',
'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
// Define custom styles for ReactMarkdown components
const customComponents = {
p: ({ node, ...props }) => <p style={{ color: 'white' }} {...props} />,
h1: ({ node, ...props }) => <h1 style={{ color: 'white' }} {...props} />,
// Add more elements as needed
};
*/}
{/*
const blogitems = [
{
"id": 1,
'title': 'Blog 1',
'desc': 'lorep ipsum random text higlights',
'coverImg': 'https://i.ytimg.com/vi/kFARYsqwlJI/maxresdefault.jpg',
'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
'author': 'Darshan Bajgain',
'date': 'October 5, 2023',
'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
},
{
"id": 2,
'title': 'How to wrtie a blog in modern way',
'desc': 'lorep ipsum random text higlights',
'coverImg': 'https://img.freepik.com/free-vector/blog-concept-illustration-idea-posting-sharing-following_613284-2970.jpg?w=1380&t=st=1695738861~exp=1695739461~hmac=e80be39b6e02cbc5f8d54b37ebc26609ebaa86d7654ce67d1460cd1d66375c7f',
'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
'author': 'Darshan Bajgain',
'date': 'October 5, 2023',
'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
},
{
"id": 3,
'title': 'Creating this blog using React, Tailwind and Strapi CMS',
'desc': 'lorep ipsum random text higlights',
'coverImg': 'https://miro.medium.com/v2/resize:fit:1400/1*y5d-je-3BZUrgg0Hxf7CyA.png',
'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
'author': 'Darshan Bajgain',
'date': 'October 5, 2023',
'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
},
{
"id": 4,
'title': 'How to install JDK in Linux Mint Cinnamon',
'desc': 'lorep ipsum random text higlights',
'coverImg': 'https://i.ytimg.com/vi/kFARYsqwlJI/maxresdefault.jpg',
'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
'author': 'Darshan Bajgain',
'date': 'October 5, 2023',
'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
},
]
*/}





return (
<div className="w-full py-16 px-8 relative bg-gray-800">
<div className='max-w-[1340px] mx-auto pt-24'>
<div className="flex flex-col items-center">
<h1 className="md:text-4xl text-2xl text-white font-bold mb-4 p-2">{blog.attributes.blogTitle}</h1>
<div className="max-w-full md:max-w-2xl">
<h1 className="md:text-4xl text-2xl text-white font-bold mb-4 pt-4">{blog.attributes.blogTitle}</h1>
<div className="max-w-full md:max-w-2xl pt-8">
<img className='w-full h-auto mb-4' src={`http://localhost:1337${blog.attributes.coverImg.data.attributes.url}`} alt={blog.attributes.blogTitle} />
</div>
<div className="pt-4 lg:px-12 text-white">
<div className="pt-10">

<ReactMarkdown className='line-break'>
<ReactMarkdown className="prose max-w-full lg:px-24 prose-headings:text-white prose-p:text-white">

{blog.attributes.blogContent}


</ReactMarkdown>

<div className="flex flex-col items-center max-w-[400px] mx-auto py-6 bg-slate-800 rounded-2xl mt-8">
<div className="flex flex-col items-center max-w-[400px] mx-auto py-6 bg-slate-800 rounded-2xl mt-16">
<img
className="w-16 h-16 rounded-full mb-2"
src={`http://localhost:1337${blog.attributes.authorProfileImg.data.attributes.url}`}
alt={blog.attributes.author}
/>
<p className="text-gray-400 py-2">Written by:</p>
<div className="text-gray-400">{blog.attributes.author}</div>
<div className="text-gray-400 mt-2">{blog.attributes.date}</div>
<p className="text-gray-300 py-2">Written by:</p>
<div className="text-gray-300">{blog.attributes.author}</div>
<div className="text-gray-300 mt-2">{blog.attributes.date}</div>
</div>
</div>
</div>
Expand Down
17 changes: 16 additions & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,19 @@ export default {
fontFamily: {
poppins: ["Poppins", "sans-serif"],
},
typography: {
// Customize the prose class styles
prose: {
color: '#ffff', // Set the text color to white
},
// You can also customize specific elements within prose
'h1': {
color: '#FFA500', // Set the color for h1 headings
},
'p': {
color: '#CCCCCC', // Set the color for paragraphs
},
},
},
screens: {
xs: "480px",
Expand All @@ -25,5 +38,7 @@ export default {
xl: "1700px",
},
},
plugins: [],
plugins: [
require('@tailwindcss/typography'),
],
}

0 comments on commit f6e1fcb

Please sign in to comment.