Ella-homepage

A Jekyll + Vue3.js solution.

How it Works

1. write in Markdown
2. Kramdown engine converts contents to HTML
3. Jekyll hook plugin parses HTML tags to customized ones
4. Vue3 implements the customized tags

Components/Tags Implemented in Vue3

https://kramdown.gettalong.org/quickref.html

Note that tags not implemented might be influenced by the styles from cdn

nerfies

• Paragraphs: CustomP <p></p>
• Headers
  • CustomH2 <h2></h2>
  • CustomH3 <h3></h3>
• Blockquotes: CustomBlockquote <blockquote></blockquote>
• Code Blocks: CustomPreCode <pre><code></code></pre>
• Horizontal Rules: CustomHr <hr>
• Lists
  • Unordered List: CustomUl <ul></ul>
  • Ordered List: CustomOl <ol></ol>
• Definition Lists: CustomDl <dl></dl>
• Tables: CustomTable <table>
• Links: Not Planned (already wrapped by <p></p>)
• Images: Not Planned (already wrapped by <p></p>)
• Extras
  • AuthorList
  • LinkList
  • MyTitle
  • NavBar

Many Thanks to:

• https://github.com/yaoyao-liu/minimal-light
• https://github.com/nerfies/nerfies.github.io
• https://chatgpt.com