Added new feature to allow user to display individual repositories in their Projects pages

[KingHowler]

New Feature

The user can now display individual GitHub repositories in their Project Page

The theme changes according to the site theme

Light Mode

Dark Mode

[KingHowler]

@george-gca kindly review this one too

[KingHowler]

@george-gca, I am having trouble with scaling the card automatically for each device size.

What are you doing to make these cards scale automatically?

[george-gca]

What are you doing to make these cards scale automatically?

Nothing special really. You can check the classes used here

al-folio/_pages/repositories.md

Line 42 in b30b3f4

<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">

About this feature, not sure it would be a nice addition. I think this is more useful as a shared idea on how to achieve this rather than adding it to the repository.

For example, what if the user wants to change the position where the repository card is displayed? Maybe in the end of the page, or in the middle between some paragraphs, after properly introducing the problem it is trying to solve? What if there is more than one repository linked to the project that the user wants to display? This adds too much variables and personal preferences that I think are out of the scope of the template as a basis for personal customization.

[KingHowler]

Yeah I figured out the scaling issue and the how to add multiple repositories while maintaining the standard design of the website.
That only leaves the issue with the user wanting to display in the end. I've got an easy solution for that as well

The user simply needs to add the following code to wherever he wants to display the repo.

      <div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
          {% include repository/repo.liquid repository=Username1/Repo1 %}
          {% include repository/repo.liquid repository=Username2/Repo2 %}
      </div>

Using the predefined classes helps ensures every repo is processed in the same way.

[KingHowler]

@george-gca, how does it seem now?

[george-gca]

I don't think this is too much of a burden for a user to add in their page, so I don't believe it should be added to the template. Like you said, simply by adding this to a page

<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
  {% include repository/repo.liquid repository=Username1/Repo1 %}
  {% include repository/repo.liquid repository=Username2/Repo2 %}
</div>

solves this. And this can be added straight to the project itself, it doesn't need to be in _layouts/page.liquid, which is a layout shared by other pages. By adding this directly into the project gives the user the freedom to specify where exactly it wants the card to be shown, instead of being limited by the position defined in the layout.

[KingHowler]

Then I should remove the changes to the liquid file and modify the CUSTOMIZING.md accordingly, is that what you mean @george-gca?

[KingHowler]

So that the user know how to add repository cards anywhere

[george-gca]

No, I think this PR doesn't need to be merged.

I don't believe this is a common issue for a lot of users, since no one have asked for this before. And if a user wants to add the repository card to one of their pages other than the repository one, then they can simply look for how this is done in the repository page and replicate it elsewhere, or search for how to do it in our repo, which will lead to this PR with this information.

[KingHowler]

👍