[BLOGS] Adding Social Card to Blogs

[himanshu-03]

Following up on the previously closed issue #108 regarding adding social card to all blogs, I would like to bring to your attention that while the previous issue addressed this issue for a paritcular blog, we need to add this social card to all our blogs in the website and that needs to be tackled comprehensively. This new issue is aimed at addressing all related problems to ensure a more holistic resolution.

---

Currently whenever a user opens the blogs page of the website, they are bombarded with all blogs open at the same time. This makes the user having to either deliberately scroll through all blogs to find the one they're interested in reading, or be smart and use the dedicated sidebar.

However a good blog page usually encompasses the following:

• A neat title
• A short summary of the blog (usually the first paragraph)
• A really fancy image
• A "Read more" tag to further read the blog in detail

To reduce the clutter on the blogs page and to overall have it look more appealing, we should opt to have a similar structure, which is seen in Docusaurus' own blog. To do so, the following tasks need to be completed:

• Convert all current blogs to .mdx format for the use of certain important HTML tags (this is required to be done in a later issue. This issue shall mainly focus on making changes to the configurations)
• Add to all index.mdx files, wherever applicable

When addressing the comprehensive set of issues outlined in this ticket, I encourage the team to refer to our previously submitted Pull Request #203 by @vish-rt (CTO | TCET Open Source) . This pull request contains relevant insights and potential solutions that could be valuable for tackling the problems mentioned here.

Note: On GitHub Pull Request Preview, the truncate tag would be highlighted in red, indicating error in the file's syntax. It is solely because GitHub does not use Docusaurus' config to run a compilation. However upon running npm run build, we have a build success, indicating no errors and a proper deployment.

[himanshu-03]

Upon completing the above steps, this is how every blogs on the Blog page would look like:

[ChinmayAlekar]

hey @vish-rt, can I work on this issue?

[SanidhayaAgarwal]

Hello @vish-rt,

I'm excited to participate in Hacktoberfest and contribute to this repository. Please consider me for this issue. I look forward to collaborating with the community.

Thank you!

[vish-rt]

hey @vish-rt, can I work on this issue?

Feel free to follow our External Workflow and create a pull request to the blogs branch. I recommend raising a Pull Request on or after October 1st as it would be considered for Hacktoberfest as well!
Connect with me on Discord if you face errors related to Algolia App ID.

@SanidhayaAgarwal recommend you to look out for other issues. You can also create your own and suggest features via issues!

[ChinmayAlekar]

Okay, thanks:)

[ChinmayAlekar]

Hello @vish-rt!
Can you please give me a clarity on this issue.

[vish-rt]

Hello @vish-rt! Can you please give me a clarity on this issue.

• Convert all current blogs to .mdx format.
• Add the relevant HTML tag explained in the previous issue. You can refer the Pull Request [FIX] Modified config to support read more tags and posts limitations #203 to see where exactly it should be added.

[ChinmayAlekar]

Thanks for the explanation😄