[blog]: How to add blog post to OSCSA blog

[RealRichi3]

Description

Add documentation on Quarto setup, installation guide, and creating blogposts.

Fixes #44

Changes proposed

• [x] Add documentation on how to setup quarto locally
• [x] Add installation guide
• [x] Add steps to write new blog posts using quarto

[netlify[bot]]

✅ Deploy Preview for oscsa-en-blog ready!

Name	Link
🔨 Latest commit	effbfc206e2fa7df570a6b5a100d206e5e15619d
🔍 Latest deploy log	https://app.netlify.com/sites/oscsa-en-blog/deploys/63a609eb91f15200085b423f
😎 Deploy Preview	https://deploy-preview-46--oscsa-en-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[RealRichi3]

@sandygudie this is a draft request for the documentation on how to create a blog post, I have added the installation guide and relevant links.

It's not complete yet

[RealRichi3]

@sandygudie @BatoolMM please review

[RealRichi3]

@BatoolMM i tried to add a label, but I don't have the required access

[BatoolMM]

This looks wonderful, thank you so much 😊. I will add a few comments after our meeting today!

[RealRichi3]

Thanks @BatoolMM

[RealRichi3]

@sandygudie @BatoolMM please review, i have added the requested changes

[RealRichi3]

I'd like to add better images

[sandygudie]

@RealRichi3 @BatoolMM images updated Please review

[BatoolMM]

Thank you both, it looks amazing, but some of the images isn't showing in the preview!

[sandygudie]

Thank you both, it looks amazing, but some of the images isn't showing in the preview!

Ohkay, I see it too, I will look into it

[RealRichi3]

Looks good @sandygudie, but some images aren't displaying

[RealRichi3]

The images works now @BatoolMM @RealRichi3 please review

@RealRichi3 there are too many images in the folder, please filter out the ones you don't need

done.

[RealRichi3]

@sandygudie @BatoolMM, does everything look okay now?

[sandygudie]

The images works now @BatoolMM @RealRichi3 please review

@RealRichi3 there are too many images in the folder, please filter out the ones you don't need

Welldone @RealRichi3

[BatoolMM]

@alswajiab would you mind to review it, please?

[RealRichi3]

Thanks, @RealRichi3, I suggest adding a table of contents to the post to make it more readable.

Alright @alswajiab

[RealRichi3]

Thanks, @RealRichi3, I suggest adding a table of contents to the post to make it more readable.

@alswajiab there's already something like a table of content on the right side of the blog post, is that okay, or should I do something bigger?

[BatoolMM]

@RealRichi3 The CI isn't passing!

[BatoolMM]

@all-contributors please add @RealRichi3 for blog posts

[allcontributors[bot]]

@BatoolMM

I've put up a pull request to add @RealRichi3! :tada:

[BatoolMM]

@all-contributors please add @alswajiab for review

[allcontributors[bot]]

@BatoolMM

I've put up a pull request to add @alswajiab! :tada:

[RealRichi3]

@RealRichi3 The CI isn't passing!

Ohh, i think you just fixed it

[RealRichi3]

Few comments:

• I fixed the CI, make sure the CI is passing.
• There are multiple images added but not used, can you remove them.
• Add alternative tags to the images to make them accessible for screenreader.
• Add one of the following image as thumbnail

@BatoolMM for the CI please how did you fix it, the issue comes up from time to time

[RealRichi3]

For the thumbnail, should i use just one of the images, or all of them

[BatoolMM]

For the thumbnail, should i use just one of the images, or all of them

Just one, feel free to choose any one!

[BatoolMM]

Few comments:

• I fixed the CI, make sure the CI is passing.
• There are multiple images added but not used, can you remove them.
• Add alternative tags to the images to make them accessible for screenreader.
• Add one of the following image as thumbnail

@BatoolMM for the CI please how did you fix it, the issue comes up from time to time

You have to look at the log file of the build o find out what the error is. It's usually something to do with YAML not lining.

[RealRichi3]

usually

Oh, alright then

[the-label-bot[bot]]

The Label Bot has predicted the following:	Category	Value	Confidence	Applied Label
Kind	documentation	0.970	:heavy_check_mark:
Size	L	0.936	:heavy_check_mark:

[RealRichi3]

@BatoolMM i tried to add the alt image tags, but they text keeps showing, is there a way to hide it?, I checked online I think the only way is to use CSS to hide the text, but this defeats the whole purpose of adding the alt texts

[BatoolMM]

@RealRichi3 The ey to add alt tags in Markdown is using this syntax ![alt](img.png). You can read more here. Let me know if it's still not clear. I also added the Quarto VS Code extension into gitpod of this repo in case it can help you!

[RealRichi3]

@BatoolMM thanks, i just saw the correct way to do it, ![](elephant.png){fig-alt="A drawing of an elephant."}

[RealRichi3]

@BatoolMM do you prefer if the alt text if visible under each image? or should I leave it just the way it is?

[BatoolMM]

https://deploy-preview-46--oscsa-en-blog.netlify.app

Thank you for pointing this out, Markdown use this syntax ![alt](img.png) but Quarto uses ![caption](img.png){alt}. Alternative tags should always be invisible and only accessed by the screen reader.

[RealRichi3]

https://deploy-preview-46--oscsa-en-blog.netlify.app

Thank you for pointing this out, Markdown use this syntax ![alt](img.png) but Quarto uses ![caption](img.png){alt}. Alternative tags should always be invisible and only accessed by the screen reader.

Alright, thanks @BatoolMM, I'll work on the thumbnails next

[RealRichi3]

@BatoolMM, i tried to add the thumbnail, but I didn't really see any clear guide, here's what I tried

1. I tried to embed meta tags for the thumbnail, just like it's done in HTML documents, so I set the embed-resources: true I thought this will work but it keeps showing the code, instead of adding the thumbnail

This is the YAML and the HTML code I tried

  ---
  title: "All you need to create a blog post in the Open Science Community Saudi Arabia using Quarto?"
  author: 
      name: "Richie Moluno, Goodnews Sandy"
  date: "2022-12-08"
  categories: 
      - "blog"
      - "quarto"
      - "outreachy"
  description: "This is a step-by-step guide on how to create your first a blog post without any coding."
  licence: "CC BY"
  type: "post"
  format: 
    html:
      embed-resources: true
      df-print: paged
      toc: true
      toc-depth: 5
      toc-location: left
      toc-title: "On this page"
  image: "./quarto-logo.jpg"
  thumbnail: "./thumbnail.png"
  citation: 
      url: https://oscsa.netlify.app/posts/how-to-add-a-blog-post/
  site-url: https://oscsa.netlify.app/posts/how-to-add-a-blog-post/
  ---

  ![](./quarto-logo.jpg){fig-align="center" fig-caption="Quarto logo"}

  ```html
  <meta property=’og:image’ content='./thumbnail.png'/>
  <meta property='og:image:width' content='1200' />
  <meta property='og:image:height' content='627' />
  <meta property="og:type" content='article'/>

![image](https://user-images.githubusercontent.com/76791916/208526973-7fe328f0-ec36-4f25-8746-bf8f13a46b9b.png)

2. For the second approach, in the YAML I just set thumbnail to the image path, none worked

[BatoolMM]

@RealRichi3 did you just try to set image: "thumbnail.jpg"? `

[RealRichi3]

@RealRichi3 did you just try to set image: "thumbnail.jpg"? `

I tried thumbnail: ./thumbnail.png

[BatoolMM]

Thank you @RealRichi3 for changing the thumbnail, I was looking at the preview - and there're a few things changed in the main blog website. Would you be able to have a look at it?

[RealRichi3]

Alright @BatoolMM I'll check it out

[sandygudie]

Hi @RealRichi3 the image is missing ,

[sandygudie]

I noticed the deployed preview for the home site was off so I made a push(fix the missing image) from my end to see if that would fix it. it works now

[RealRichi3]

I noticed the deployed preview for the home site was off so I made a push(fix the missing image) from my end to see if that would fix it. it works now

Thanks @sandygudie

[BatoolMM]

@all-contributors please add @sandygudie for blog, docs

[allcontributors[bot]]

@BatoolMM

I've put up a pull request to add @sandygudie! :tada:

[BatoolMM]

@all-contributors please add @RealRichi3 for blog, docs

[allcontributors[bot]]

@BatoolMM

I've put up a pull request to add @RealRichi3! :tada:

[RealRichi3]

Thanks @BatoolMM