84 lines
3.1 KiB
HTML
84 lines
3.1 KiB
HTML
---
|
|
layout: default
|
|
---
|
|
|
|
<article class="prose max-w-none">
|
|
<header class="mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-2">{{ page.title }}</h1>
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
|
|
<span class="mx-2">•</span>
|
|
<span>{{ page.author }}</span>
|
|
{% if page.categories %}
|
|
<span class="mx-2">•</span>
|
|
<div class="flex space-x-2">
|
|
{% for category in page.categories %}
|
|
<a href="{{ '/categories/' | append: category | relative_url }}" class="text-blue-600 hover:text-blue-800">
|
|
{{ category }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
{% if page.image %}
|
|
<div class="mb-8">
|
|
<img src="{{ page.image | relative_url }}" alt="{{ page.title }}" class="rounded-lg shadow-lg">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
|
|
<div class="md:col-span-2">
|
|
<div class="content">
|
|
{{ content }}
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-1">
|
|
<div class="bg-gray-50 p-6 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4">Project Details</h3>
|
|
{% if page.components %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Components</h4>
|
|
<ul class="text-sm">
|
|
{% for component in page.components %}
|
|
<li class="mb-1">{{ component }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% if page.difficulty %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Difficulty</h4>
|
|
<p class="text-sm">{{ page.difficulty }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if page.cost %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Estimated Cost</h4>
|
|
<p class="text-sm">{{ page.cost }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if page.github %}
|
|
<div>
|
|
<a href="{{ page.github }}" class="text-blue-600 hover:text-blue-800 text-sm" target="_blank" rel="noopener">
|
|
View on GitHub →
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if page.tags %}
|
|
<footer class="mt-8 pt-4 border-t border-gray-200">
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for tag in page.tags %}
|
|
<a href="{{ '/tags/' | append: tag | relative_url }}" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200">
|
|
#{{ tag }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</footer>
|
|
{% endif %}
|
|
</article> |