Merge pull request #16 from ayushjain01/main

Modify contribute guidelines - Add image instructions

README.md

@@ -5,22 +5,18 @@ To run -
 
 ```bash
 git clone https://github.com/tankala/learn-pip-trends.git
-bundle instal
+bundle install
 bundle exec jekyll serve
 ```
-
 To contribute -
 
-- [Fork this repository](https://github.com/tankala/learn-pip-trends/fork){:target="_blank"}
+Thank you for your interest in contributing an article to learn-pip-trends! We welcome well-written and insightful articles that cover topics related to the latest trends and updates in the world of Python packaging and distribution using pip.
+
+Before submitting your article, we kindly ask you to read and follow our [contributing guidelines](./contributing.md) to ensure a smooth and efficient review process.
+
+- [Fork this repository](https://github.com/tankala/learn-pip-trends/fork)
 - Create a new branch: `git checkout -b your-branch-name`
-- Add yourself as an author in ```_data\authors.yml``` in the following format:
-```yml
-shortname:
-  picture: # replace with avatar 
-  name: # full name
-  twitter: # twitter handle
-```
-- Create an article `(.md)` and store it in the respective folder following the article structure, including the following front matter:
+- Create an article `(.md)` and store it in the respective folder(```_gettingstarted``` for getting started articles, ```_samplecode``` for sample codes) following the article structure, including the following front matter:
 ```markdown
 ---
 layout: article
@@ -36,12 +32,15 @@ article_header: <Optional - Modify content as per requirement>
         gradient: 'linear-gradient(135deg, #ffffff, #000000)'
         src: <image path>
 date: <Repalce with date of publication>
-author : <Replace with author shortname added in _data\authors.yml>
+author: 
+    picture: <Optional - Replace with author avatar>
+    name: <Replace with author name>
+    twitter: <Replace with author twitter handle>
 ---
 ```
-- Commit your changes: git commit -m "Brief description of your changes"
-- Push your branch: git push origin your-branch-name
-- Create a pull request.
-
+  Please visit [this link](./images.md) for detailed guidance on the various types of images used with an article and instructions on their creation. 
+- Commit your changes: ```git commit -m "Brief description of your changes"```
+- Push your branch: ```git push origin your-branch-name```
+- Submit a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
 
 **Please ensure that the front matter is included as specified above when contributing an article. You can refer to previous articles and their respective front matter for examples. Thank you for your contributions!**

_includes/article-info.html

@@ -1,4 +1,10 @@
-{%- assign _author = site.data.authors[include.article.author] | default: site.author -%}
+{%- if site.data.authors[include.article.author] -%}
+  {%- assign _author = site.data.authors[include.article.author] -%}
+{%- elsif include.article.author -%}
+  {%- assign _author = include.article.author -%}
+{%- else -%}
+  {%- assign _author = site.author -%}
+{%- endif -%}
 
 {%- if include.html != false -%}
 
@@ -57,7 +63,11 @@
       {%- if _show_author or _show_date or _pageview -%}
         <ul class="right-col menu">
           {%- if _show_author  -%}
-            <li><i class="fas fa-user"></i> <span>{{ _author.name }}</span></li>
+            {%- if _author.picture -%}
+              <li><img src="{{ _author.picture }}"> <span>{{ _author.name }}</span></li>
+            {%- else -%}
+              <li><i class="fas fa-user"></i> <span>{{ _author.name }}</span></li>
+            {%- endif -%}
           {%- endif -%}
 
           {%- if _show_date -%}

_sass/components/_article-info.scss

@@ -10,16 +10,26 @@
   .right-col {
     float: right;
     margin-left: map-get($button, padding-x-sm);
+
     @include media-breakpoint-down(md) {
       float: none;
     }
+
     & > li {
       &:not(:last-child) {
         @include split-line(right, default, $text-color-l);
         padding-right: map-get($spacers, 2);
         margin-right: map-get($spacers, 2);
         line-height: map-get($base, line-height-xs);
       }
+
+      img {
+        display: inline-block; 
+        width: 15px; 
+        height: 15px; 
+        vertical-align: middle; 
+        margin-right: 5px; 
+      }
     }
   }
 }

contribute.md

@@ -11,14 +11,7 @@ Before submitting your article, we kindly ask you to read and follow our [contri
 
 - [Fork this repository](https://github.com/tankala/learn-pip-trends/fork){:target="_blank"}
 - Create a new branch: `git checkout -b your-branch-name`
-- Add yourself as an author in ```_data\authors.yml``` in the following format:
-```yml
-shortname:
-  picture: # replace with avatar 
-  name: # full name
-  twitter: # twitter handle
-```
-- Create an article `(.md)` and store it in the respective folder following the article structure, including the following front matter:
+- Create an article `(.md)` and store it in the respective folder(```_gettingstarted``` for getting started articles, ```_samplecode``` for sample codes) following the article structure, including the following front matter:
 ```markdown
 ---
 layout: article
@@ -34,12 +27,15 @@ article_header: <Optional - Modify content as per requirement>
         gradient: 'linear-gradient(135deg, #ffffff, #000000)'
         src: <image path>
 date: <Repalce with date of publication>
-author : <Replace with author shortname added in _data\authors.yml>
+author: 
+    picture: <Optional - Replace with author avatar>
+    name: <Replace with author name>
+    twitter: <Replace with author twitter handle>
 ---
 ```
-- Commit your changes: git commit -m "Brief description of your changes"
-- Push your branch: git push origin your-branch-name
-- Create a pull request.
-
+  Please visit [this link](./images) for detailed guidance on the various types of images used with an article and instructions on their creation. 
+- Commit your changes: ```git commit -m "Brief description of your changes"```
+- Push your branch: ```git push origin your-branch-name```
+- Submit a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
 
 **Please ensure that the front matter is included as specified above when contributing an article. You can refer to previous articles and their respective front matter for examples. Thank you for your contributions!**

images.md

@@ -0,0 +1,48 @@
+---
+layout: article
+title: Article Image Guide
+description: Detailed guidance on the various types of images used with an article and instructions on their creation. 
+image: https://learn.piptrends.com/assets/images/general/contribute-cover.png
+---
+There are four main images that you'll need to create for an article. The front matter for these is -
+```markdown
+---
+image: <Optional - Replace with image path, this path has to be a complete url>
+cover: <Optional - Replace with cover path, this path can be relative>
+article_header: <Optional - Modify content as per requirement>
+    background_image:
+        gradient: 'linear-gradient(135deg, #ffffff, #000000)'
+        src: <image path>
+author:
+    picture: <Optional - Replace with author avatar>
+---
+```
+The key tags are ```image```, ```cover```, ```background_image``` under ```article_header```, and ```picture``` under ```author```.
+Each tag serves a different purpose. 
+- ```image``` - This tag represents the preview image that will be visible when the article is shared on social media. Here's an example of this image. This image is solely for preview purposes and isn't part of the article content.
+
+    **Dimensions - 1200x630 px**
+
+     Note: The image path should always be an absolute URL.
+<center> <img src = "./assets/images/article-images/preview-image.png" alt = "preview image"> </center>
+
+
+- ```cover``` - This tag represents the icon image that will be displayed on the homepage along with the article title and description.
+
+    **Dimensions - 800x800 px**
+
+<center> <img src = "./assets/images/article-images/article-cover.png" alt = "article cover image"> </center>
+
+- ```background_image``` -  This tag represents the image appearing as the header background for every article. You can also add a gradient instead of an image(preferred).
+
+    **Dimensions - 2100x1600 px**
+
+<center> <img src = "./assets/images/article-images/article-header.png" alt = "article header image"> </center>
+
+- ```picture``` -  This tag represents the avatar appearing along with the author name for an article.
+
+    **Dimensions - 150x150 px**
+
+<center> <img src = "./assets/images/article-images/article-author-avatar.png" alt = "article author avatar"> </center>
+As a standard design practice at [learn.piptrends.com](index.html), the ```image```, and the ```cover``` share the same background gradient as with the ```gradient``` tag under the ```background_image```.
+