parent
1abc086b29
commit
00895abe0c
@ -0,0 +1 @@
|
|||||||
|
{{> article_briefly article=article }}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{{> navbar }}
|
||||||
|
|
||||||
|
<main class="bg-white dark:bg-gray-800 py-4 grow">
|
||||||
|
<h1 class="mb-4 text-5xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center">Articles</h1>
|
||||||
|
|
||||||
|
{{#each articles as |article|}}
|
||||||
|
{{> article_briefly article=article }}
|
||||||
|
{{/each}}
|
||||||
|
</main>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Blog</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
|
||||||
|
{{{body}}}
|
||||||
|
|
||||||
|
{{> footer }}
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<section x-data="{ showArticle: false }">
|
||||||
|
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
|
||||||
|
<div class="mx-auto max-w-screen-sm">
|
||||||
|
<h2 class="mb-1 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{ article.title }}</h2>
|
||||||
|
<p class="mb-3 text-base text-gray-500 dark:text-gray-400"><time pubdate datetime="2022-02-08" title="February 8th, 2022">Feb. 8, 2022 {{ article.created }}</time></p>
|
||||||
|
|
||||||
|
<p x-show="!showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ article.content }} </p>
|
||||||
|
<p x-show="showArticle" class="mb-4 font-light text-gray-500 lg:mb-8 sm:text-xl dark:text-gray-400"> {{ article.content }} </p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<a x-on:click="showArticle = !showArticle" x-text="showArticle ? 'Show less' : 'Show more...'" class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<hr class="w-48 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-10 dark:bg-gray-700">
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<footer class="p-4 bg-gray-50 md:p-8 lg:p-10 dark:bg-gray-900 mt-auto">
|
||||||
|
<div class="mx-auto max-w-screen-xl text-center">
|
||||||
|
<ul class="flex flex-wrap justify-center items-center mb-6 text-gray-900 dark:text-white">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="mr-4 hover:underline md:mr-6 ">Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about" class="mr-4 hover:underline md:mr-6 ">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">Copyright © 2024 Kostiantyn Klochko. All Rights Reserved.</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<nav class="bg-gray-50 border-gray-200 dark:bg-gray-900">
|
||||||
|
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||||
|
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||||
|
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Blog</span>
|
||||||
|
</a>
|
||||||
|
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
||||||
|
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
Loading…
Reference in new issue