Easier way to display content from GraphCMS to your website about project_graphql_blog HOT 17 OPEN

There is even easier way to display content from GraphCMS to your website:
Step 1.

npm i @graphcms/rich-text-react-renderer

Step 2. In PostDetails.js
Add:

and

THAT IS IT!

from project_graphql_blog.

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

I made the above the changes like removing getContentFragment fn and all Now I dont understand where can i use the reverse method for post to get display

in the services.js, with getPosts function, follow me:

From this:

const result = await request(graphqlAPI, query);

return result.postsConnection.edges;

To this:

const result = await request(graphqlAPI, query);

return result.postsConnection.edges.reverse();

Try it bro!

from project_graphql_blog.

Hey, thanks for posting. Do you by any chance know how I can style my post content when using the html parser?

from project_graphql_blog.

Hey, thanks for posting. Do you by any chance know how I can style my post content when using the html parser?

uhhhh... maybe you have to style in the content while you're editing, which is Rich Text in graphcms, that's the only way to style html parser. I will try to find a better way to make this project perfectly. So wait for me!

from project_graphql_blog.

Hey just a comment, if you want to upload to producion, in order to avoid the "Eslint Error" you can delete "return".

import React from 'react';
import parse from 'html-react-parser';
import moment from 'moment';

const PostDetail = ({ post }) => (
  <>
    <div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
      <div className="relative overflow-hidden shadow-md mb-6">
        <img src={post.featuredImage.url} alt="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
      </div>
      <div className="px-4 lg:px-0">
        <div className="flex items-center mb-8 w-full">
          <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
            <img
              alt={post.author.name}
              height="30px"
              width="30px"
              className="align-middle rounded-full"
              src={post.author.photo.url}
            />
            <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
          </div>
          <div className="font-medium text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span className="align-middle">{moment(post.createdAt).format('MMM DD, YYYY')}</span>
          </div>
        </div>
        <h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
        {parse(post.content.html)}
      </div>
    </div>
  </>
);

export default PostDetail;

from project_graphql_blog.

Hey just a comment, if you want to upload to producion, in order to avoid the "Eslint Error" you can delete "return".

import React from 'react';
import parse from 'html-react-parser';
import moment from 'moment';

const PostDetail = ({ post }) => (
  <>
    <div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
      <div className="relative overflow-hidden shadow-md mb-6">
        <img src={post.featuredImage.url} alt="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
      </div>
      <div className="px-4 lg:px-0">
        <div className="flex items-center mb-8 w-full">
          <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
            <img
              alt={post.author.name}
              height="30px"
              width="30px"
              className="align-middle rounded-full"
              src={post.author.photo.url}
            />
            <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
          </div>
          <div className="font-medium text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span className="align-middle">{moment(post.createdAt).format('MMM DD, YYYY')}</span>
          </div>
        </div>
        <h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
        {parse(post.content.html)}
      </div>
    </div>
  </>
);

export default PostDetail;

this is insane

from project_graphql_blog.

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

from project_graphql_blog.

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

from project_graphql_blog.

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

can you describe a little bit like in which componet from javascript mastery github files?

from project_graphql_blog.

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

I made the above the changes like removing getContentFragment fn and all Now I dont understand where can i use the reverse method for post to get display

from project_graphql_blog.

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

import React from "react";
import moment from "moment";
import parse from "html-react-parser";

const PostDetail = ({ post }) => {
return (
<>
{/* //fn for getting our blog content as original it is like bold words, tags and etc
// const getContentFragment = (index, text, obj, type) => {
// let modifiedText = text;

// if (obj) {
// if (obj.bold) {
// modifiedText = ({text});
// }

// if (obj.italic) {
// modifiedText = ({text});
// }

// if (obj.underline) {
// modifiedText = ({text});
// }
// }

// switch (type) {
// case 'heading-three':
// return

{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}

{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}

{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}

  <div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
    {/* img div */}
    <div className="relative overflow-hidden shadow-md mb-6">
      <img
        src={post.featuredImage.url}
        alt={post.title}
        className="object-top h-full w-full rounded-t-lg"
      />
    </div>

    <div className="px-4 lg:px-0">
      <div className="flex items-center mb-8 w-full">
        <div className="flex items-center  mb-4 lg:mb-0 w-full lg:w-auto mr-8">
          <img
            alt={post.author.name}
            height="30px"
            width="30px"
            className="align-middle rounded-full"
            src={post.author.photo.url}
          />
          <p className="inline align-middle text-gray-700 ml-2 text-lg">
            {post.author.name}
          </p>
        </div>
        {/* date div */}
        <div className="font-medium text-gray-700">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 inline mr-2 text-pink-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
            />
          </svg>
          <span>{moment(post.createdAt).format("MMM DD, YYYY")}</span>
        </div>
      </div>

      {/* title */}
      <h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
      {/* {console.log(post.content.raw)} */}

      {/* {post.content.raw.children.map((typeObj, index) =>{
const children = typeObj.children.map((item, itemIndex) => getContentFragment(itemIndex , item.text , item) );

return getContentFragment(index ,children , typeObj , typeObj.type)

}) } */}
{parse(post.content.html)}


</>
);
};

export default PostDetail;

from project_graphql_blog.

It Worked Thankyou Buddy! Love from India❤️

from project_graphql_blog.

It Worked Thankyou Buddy! Love from India❤️

You're welcome bro from India, this is Kiet from Vietnam! ❤️

from project_graphql_blog.

Hi people. I'm working with this tutorial to do my own blog. Do you have any idea how I can implement a pagination? I'm stuck :/

from project_graphql_blog.

Hi people. I'm working with this tutorial to do my own blog. Do you have any idea how I can implement a pagination? I'm stuck :/

it's not difficult as you think, use some algorithms here

from project_graphql_blog.

Hi people. I'm working with this tutorial to do my own blog. Do you have any idea how I can implement a pagination? I'm stuck :/

it's not difficult as you think, use some algorithms here

I'm on the way to do it, but I don't know how to correctly do this and I'm stuck at this point:

This is my index.js in the services file (I've put commentaries for all the changes I did just for the getPosts query):

http://image.noelshack.com/fichiers/2022/20/5/1653047398-index-services.jpg

And this is my main index.js:

http://image.noelshack.com/fichiers/2022/20/5/1653047428-index-main.jpg

And I'm lost for next step: What am I forgetting? How my state "skip" can be properly updated in my services index.js?

from project_graphql_blog.

@adityabhattad2021
I cannot solve my issue. I have even tried to use "renderers" but no matter what no bullet points or numbers show up in my content. The content all renders with this method but the bullet points or the numbers do not.
<RichText content = {post.content.raw.children} renderers={{ ol: ({ children }) => <ol>{children}</ol>, ul: ({ children }) => <ul>{children}</ul>, li: ({ children }) => <li>{children}</li>, }} />

from project_graphql_blog.