Display metaphore content into a website

[mkubdev]

We need to define a strategy to clarify the collection directories.

[darkterminal]

What type of framework you will used to build a static website based on markdown?

• If we will use jekyll as static site generator i prefer using Jekyll + Just The Docs Theme like my framework documentations.
• if we will build from scratch, use mdx and need to learn more about it 😄

[mkubdev]

To be honest, i experienced a bit MDX. But using Just The Docs sound a good start imo..

[darkterminal]

Jekyll also use FrontMatter in each generated markdown by github-actions

[mkubdev]

I didn't know that! So only used to MDX.

[darkterminal]

I need to re-structured our metaphor directories:

Directory Level 1

├── assets
├── docs
├── README.md
├── metaphor.png
├── LICENSE
├── LOGO.md
├── _config-dev.yml
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _stories
├── _layouts
├── _sass
└── _site

Explaination Of Directory Level 1

This directories below is a jekyll directory structure with Gemfile that install just-the-docs theme

├── _config-dev.yml <-- for local development
├── _config.yml <-- for production deployment
├── Gemfile
├── Gemfile.lock
├── index.md
├── _metaphors <-- this our metaphor collections
├── _layouts
├── _sass
└── _site

This directories below is a navigation permalinks that displayed in sidebar navigation for each metaphor categories. Each file is represent a page, and each page list all metaphors from metaphors collections direcotry

docs
├── css.md
├── java.md
├── javascript.md
├── maths.md
├── php.md
├── physics.md
├── python.md
├── ruby.md
├── rust.md
└── zig.md

And the last things in directory level 1 is assets folder that contains our web assets

├── assets

Directory Level 2

_layouts
└── post.html <-- custom single post layout
_stories <-- contains metaphor from our punk in each categories
├── css
│   └── index.html <-- each index.html keep directory is not empty
├── java
│   └── index.html
├── javascript
│   ├── 2023-02-24-javascript-metaphor.md <-- sample metaphor that generate from github action when issue is closed
│   └── index.html
├── maths
│   └── index.html
├── php
│   └── index.html
├── physics
│   └── index.html
├── python
│   └── index.html
├── ruby
│   └── index.html
├── rust
│   └── index.html
└── zig
    └── index.html
_sass
└── custom
    └── custom.scss <-- our custom stylesheets

How to each metaphor have Frontmatter format?
That's the fundamental things! each issues that closed by repository admin/moderator/reviewers will generate page in markdown file with this format:

---
layout: post
title: <title-from-issue-metaphor-name>
author: <username-of-issue-creator>
created_at: <issue-timestamp>
language: <issue-label>
---

So.. in my opinion, What if we use the issue template as a form to create posts for the website. We can create individual forms for each language category with metaphor and language-label widths. So when an issue is closed by the admin/moderator/reviewers, each issue will be converted to a page according to that label.

I can't implement our Github Action right now because it needs a special format and agreement to be able to run websites from this repository.

[mkubdev]

This is highly detailed, sounds good for me!

So I will open a PR with the new repository folder structure according to this comment. Then you should be able to merge the GitHub Actions.

[darkterminal]

Wait for while... am working on!

[mkubdev]

Sure, alright! 🙏🏻

[darkterminal]

This step is done! But we don't yet deploy to production.

[darkterminal]

Now metaphor website is live! with comment section on the bottom of each content story.