Something went wrong. Try again.
a new old personal site matmanna.dev
tailwind jekyll
Something went wrong. Try again.
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169{%- comment -%}Make this include generic: accepts `include.entry` (or falls back to `post`, `project`, or `item`).`kind` is inferred from `include.kind` or `entry.collection` when available. Icon and metadataadjust based on kind so the same template can render posts, projects, pages, etc.{%- endcomment -%}
{%- assign entry = include.entry | default: post | default: project | default: item -%}{%- assign kind_raw = include.kind | default: entry.collection | default: entry.type | default: 'post' -%}{%- assign kind = kind_raw | downcase -%}{%- assign card_image = entry.card_image | default: entry.image -%}{%- assign external_href = nil -%}{%- if entry.external and entry.external != true -%}{%- assign external_href = entry.external -%}{%- elsif entry.external == true and entry.external_url -%}{%- assign external_href = entry.external_url -%}{%- endif -%}{%- assign entry_href = external_href | default: entry.url | relative_url -%}{%- assign entry_target = '' -%}{%- assign entry_rel = '' -%}{%- if external_href -%}{%- assign entry_target = ' target="_blank"' -%}{%- assign entry_rel = ' rel="noopener noreferrer"' -%}{%- endif -%}
{%- assign icon_class = 'fa-solid fa-file-lines' -%}{%- if kind == 'post' or kind == 'posts' -%}{%- assign icon_class = 'fa-solid fa-feather-pointed' -%}{%- elsif kind == 'project' or kind == 'projects' -%}{%- assign icon_class = 'fa-solid fa-shapes' -%}{%- elsif kind == 'page' or kind == 'pages' -%}{%- assign icon_class = 'fa-solid fa-file' -%}{%- endif -%}
<li class="project-card rounded-md p-0 w-full flex flex-col gap-1 bg-primary-200 dark:bg-primary-950 outline-primary-200 dark:outline-primary-900 overflow-hidden"> <div class="project-card__layout flex flex-col sm:flex-row items-stretch gap-3 w-full px-3 py-2"> {%- if (kind == 'project' or kind == 'projects') and card_image -%} <div class="w-full h-36 min-w-0 self-center overflow-hidden rounded-md border-0 border-primary-500/40 md:w-36 md:h-24 md:min-w-36 lg:w-48 lg:h-36 lg:min-w-44"> <a href="{{ entry_href }}" class="no-underline block w-full h-full"{{ entry_target }}{{ entry_rel }}> <img src="{{ card_image | relative_url }}" alt="{{ entry.title }} image" class="w-full h-full object-cover border-0" loading="lazy"> </a> </div> {%- endif -%}
<div class="project-card__content flex flex-col gap-2 w-full min-w-0"> <div class="flex flex-row gap-2 w-full rounded-md items-center px-2 py-1.5 bg-primary-300 dark:bg-primary-800"> <h4 class="my-0 items-center text-md flex-1"> {% include icon.html name=icon_class class="w-4 h-4 mr-2 inline-block text-primary-800 dark:text-primary-600" %} <a href="{{ entry_href }}" class="no-external-icon"{{ entry_target }}{{ entry_rel }}>{{ entry.title }}</a> </h4>
{%- if kind == 'post' or kind == 'posts' -%} <p class="text-xs text-primary-500 my-0"> {{ entry.date | date: "%m-%d-%Y" }} </p> {%- elsif (kind == 'project' or kind == 'projects') and (entry.start_date or entry.end_date or entry.activity_percent) -%} <div class="flex flex-col items-end text-[11px] leading-tight text-primary-600 dark:text-primary-400 my-0"> <span> {%- if entry.start_date -%} {{ entry.start_date | date: "%b %Y" }} {%- endif -%} {%- if entry.end_date -%} - {{ entry.end_date | date: "%b %Y" }} {%- elsif entry.start_date -%} - now {%- endif -%} </span> </div> {%- endif -%} </div>
<div class="flex flex-col gap-2 text-sm"> <p class="my-0">{{ entry.description }}</p>
{%- if entry.tags and entry.tags.size > 0 -%} <div class="flex flex-row flex-wrap gap-2"> {% for tag in entry.tags %} <a href="/tag/{{ tag | downcase | replace: ' ', '-' }}/" class="no-underline no-external-icon"> <div class="bg-primary-300 text-primary-800 dark:bg-primary-900 dark:text-primary-200 py-1 items-center px-2 rounded-md flex flex-row gap-2 h-fit text-xs"> {% include icon.html name="fa-tag" class="w-3 h-3" %}{{ tag }} </div> </a> {% endfor %} </div> {%- endif -%}
{%- if kind == 'project' or kind == 'projects' -%} <div class="project-card__desktop-links flex flex-row flex-wrap gap-2 mt-1"> {%- if entry.links and entry.links.size > 0 -%} {% for link in entry.links %} <a href="{{ link.url }}" class="no-underline no-external-icon"> <div {% if link.icon and link.icon contains 'fa-trophy' %}data-trophy-link {% endif %}class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name=link.icon class="w-3 h-3" %}{{ link.title }} </div> </a> {% endfor %} {%- else -%} {%- if entry.live_demo -%} <a href="{{ entry.live_demo }}" class="no-underline no-external-icon"> <div class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name="fa-play" class="w-3 h-3" %}Live demo </div> </a> {%- elsif entry.demo -%} <a href="{{ entry.demo }}" class="no-underline no-external-icon"> <div class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name="fa-play" class="w-3 h-3" %}Live demo </div> </a> {%- elsif entry.website -%} <a href="{{ entry.website }}" class="no-underline no-external-icon"> <div class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name="fa-play" class="w-3 h-3" %}Live demo </div> </a> {%- endif -%}
{%- if entry.source_code -%} <a href="{{ entry.source_code }}" class="no-underline no-external-icon"> <div class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name="fa-brands fa-github" class="w-3 h-3" %}Source </div> </a> {%- elsif entry.source -%} <a href="{{ entry.source }}" class="no-underline no-external-icon"> <div class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name="fa-brands fa-github" class="w-3 h-3" %}Source </div> </a> {%- elsif entry.github -%} <a href="{{ entry.github }}" class="no-underline no-external-icon"> <div class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2"> {% include icon.html name="fa-brands fa-github" class="w-3 h-3" %}Source </div> </a> {%- endif -%} {%- endif -%} </div> {%- endif -%}
{%- if kind == 'post' or kind == 'posts' -%} <a href="{{ entry_href }}" class="text-primary-600 dark:text-primary-400 hover:underline mt-1 no-external-icon"{{ entry_target }}{{ entry_rel }}>Keep reading...</a> {%- elsif kind == 'project' or kind == 'projects' -%}
{%- else -%} <a href="{{ entry_href }}" class="text-primary-600 dark:text-primary-400 hover:underline mt-3 no-external-icon"{{ entry_target }}{{ entry_rel }}>Open</a> {%- endif -%} </div> </div> </div></li>