dev works

assets/css/custom.css

@@ -465,6 +465,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: static;
 }
 
+.relative {
+  position: relative;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -525,6 +529,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 0.25rem;
 }
 
+.\!rounded-md {
+  border-radius: 0.375rem !important;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -545,10 +553,24 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: var(--color-primary-500);
 }
 
+.bg-primary-600 {
+  background-color: var(--color-primary-600);
+}
+
 .p-4 {
   padding: 1rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -561,6 +583,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   text-align: center;
 }
 
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -583,10 +609,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: var(--color-neutral-900);
 }
 
+.\!text-neutral {
+  color: var(--color-neutral) !important;
+}
+
+.\!no-underline {
+  -webkit-text-decoration-line: none !important;
+          text-decoration-line: none !important;
+}
+
+.hover\:\!bg-primary-500:hover {
+  background-color: var(--color-primary-500) !important;
+}
+
+.dark .dark\:bg-primary-800 {
+  background-color: var(--color-primary-800);
+}
+
 .dark .dark\:text-neutral {
   color: var(--color-neutral);
 }
 
+.dark .dark\:hover\:\!bg-primary-700:hover {
+  background-color: var(--color-primary-700) !important;
+}
+
 @media (min-width: 768px) {
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));

content/works.md

@@ -1,115 +1,5 @@
 ---
 title: "Okami101 Works! :tada:"
 description: "This is adr1enbe4udou1n works."
-showAuthor: false
-showDate: false
-showReadingTime: false
-type: "raw"
+type: "works"
 ---
-
-<h2 class="text-xl mb-8 pb-2 border-b-8 border-primary-500 inline-block">Realworld Conduit Apps</h2>
-
-<div class="prose dark:prose-light mb-8">
-    <p>
-        Main purpose of this projects is to have extensive API training on multiple backend languages or framework. It's following the very known <a href="https://github.com/gothinkster/realworld">Conduit project</a>.
-    </p>
-</div>
-
-<div class="grid md:grid-cols-2 gap-4">
-    <div class="rounded border-2 border-primary-500 p-4 text-center">
-        <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">ASP.NET Core Realworld</h3>
-        <div class="prose dark:prose-light">
-            <p>
-                Lorem
-            </p>
-        </div>
-        <div class="flex justify-center gap-4 mt-4">
-        {{< button href="https://github.com/adr1enbe4udou1n/aspnet-realworld-example-app" target="_blank" >}}
-            {{< icon "github" >}}
-        {{< /button >}}
-        {{< button href="https://aspnetrealworld.okami101.io/api" target="_blank" >}}
-            OpenAPI
-        {{< /button >}}
-        </div>
-    </div>
-    <div class="rounded border-2 border-primary-500 p-4 text-center">
-        <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">Spring Boot Realworld</h3>
-        <div class="prose dark:prose-light">
-            <p>
-                Lorem
-            </p>
-        </div>
-        <div class="flex justify-center gap-4 mt-4">
-        {{< button href="https://github.com/adr1enbe4udou1n/spring-boot-realworld-example-app" target="_blank" >}}
-            {{< icon "github" >}}
-        {{< /button >}}
-        {{< button href="https://springbootrealworld.okami101.io/api" target="_blank" >}}
-            OpenAPI
-        {{< /button >}}
-        </div>
-    </div>
-    <div class="rounded border-2 border-primary-500 p-4 text-center">
-        <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">NestJS Realworld</h3>
-        <div class="prose dark:prose-light">
-            <p>
-                Lorem
-            </p>
-        </div>
-        <div class="flex justify-center gap-4 mt-4">
-        {{< button href="https://github.com/adr1enbe4udou1n/nestjs-realworld-example-app" target="_blank" >}}
-            {{< icon "github" >}}
-        {{< /button >}}
-        {{< button href="https://nestjsrealworld.okami101.io/api" target="_blank" >}}
-            OpenAPI
-        {{< /button >}}
-        </div>
-    </div>
-    <div class="rounded border-2 border-primary-500 p-4 text-center">
-        <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">FastAPI Realworld</h3>
-        <div class="prose dark:prose-light">
-            <p>
-                Lorem
-            </p>
-        </div>
-        <div class="flex justify-center gap-4 mt-4">
-        {{< button href="https://github.com/adr1enbe4udou1n/fastapi-realworld-example-app" target="_blank" >}}
-            {{< icon "github" >}}
-        {{< /button >}}
-        {{< button href="https://fastapirealworld.okami101.io/api" target="_blank" >}}
-            OpenAPI
-        {{< /button >}}
-        </div>
-    </div>
-    <div class="rounded border-2 border-primary-500 p-4 text-center">
-        <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">Laravel Realworld</h3>
-        <div class="prose dark:prose-light">
-            <p>
-                Lorem
-            </p>
-        </div>
-        <div class="flex justify-center gap-4 mt-4">
-        {{< button href="https://github.com/adr1enbe4udou1n/laravel-realworld-example-app" target="_blank" >}}
-            {{< icon "github" >}}
-        {{< /button >}}
-        {{< button href="https://laravelrealworld.okami101.io/api" target="_blank" >}}
-            OpenAPI
-        {{< /button >}}
-        </div>
-    </div>
-    <div class="rounded border-2 border-primary-500 p-4 text-center">
-        <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">Symfony Realworld</h3>
-        <div class="prose dark:prose-light">
-            <p>
-                Lorem
-            </p>
-        </div>
-        <div class="flex justify-center gap-4 mt-4">
-        {{< button href="https://github.com/adr1enbe4udou1n/symfony-realworld-example-app" target="_blank" >}}
-            {{< icon "github" >}}
-        {{< /button >}}
-        {{< button href="https://symfonyrealworld.okami101.io/api" target="_blank" >}}
-            OpenAPI
-        {{< /button >}}
-        </div>
-    </div>
-</div>

content/works/realworlds.md

@@ -0,0 +1,3 @@
+Main purpose of this projects is to have personal extensive API training on multiple backend languages or framework. It's following the very known [Conduit project](https://github.com/gothinkster/realworld), a `Medium` clone.
+
+All of these apps are 100% compatible by the official [OpenAPI Spec](https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints). All can be tested with [last Postman collection of Conduit](https://github.com/gothinkster/realworld/tree/main/api). Each project are fully tested and follows best practices for linting, formatting, with static analyzers for non strongly typed languages.

data/realworld.yaml

@@ -0,0 +1,27 @@
+title: Realworld Conduit Apps
+description: realworlds
+
+projects:
+  - title: ASP.NET Core Realworld
+    type: aspnet
+    repo: adr1enbe4udou1n/aspnetcore-realworld-example-app
+
+  - title: Spring Boot Realworld
+    type: springboot
+    repo: adr1enbe4udou1n/spring-boot-realworld-example-app
+
+  - title: Laravel Realworld
+    type: laravel
+    repo: adr1enbe4udou1n/laravel-realworld-example-app
+
+  - title: Symfony Realworld
+    type: symfony
+    repo: adr1enbe4udou1n/symfony-realworld-example-app
+
+  - title: NestJS Realworld
+    type: nestjs
+    repo: adr1enbe4udou1n/nestjs-realworld-example-app
+
+  - title: FastAPI Realworld
+    type: fastapi
+    repo: adr1enbe4udou1n/fastapi-realworld-example-app

layouts/raw/single.html

@@ -1,12 +0,0 @@
-{{ define "main" }}
-<article>
-    <header>
-        <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral mb-12">
-            {{ .Title | emojify }}
-        </h1>
-    </header>
-    <section>
-        {{ .Content | emojify }}
-    </section>
-</article>
-{{ end }}

layouts/works/single.html

@@ -0,0 +1,42 @@
+{{ define "main" }}
+<article>
+    <header>
+        <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral mb-12">
+            {{ .Title | emojify }}
+        </h1>
+    </header>
+    {{ .Content | emojify }}
+    <section>
+        <h2 class="text-xl mb-8 pb-2 border-b-8 border-primary-500 inline-block">
+            {{ .Site.Data.realworld.title }}
+        </h2>
+
+        <div class="prose dark:prose-light mb-8">
+            {{ readFile (print "/content/works/" .Site.Data.realworld.description ".md") | markdownify }}
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-4">
+            {{ range $.Site.Data.realworld.projects }}
+            <div class="rounded border-2 border-primary-500 p-4 text-center">
+                <h3 class="mb-4 pb-1 font-bold border-b-2 border-primary-500 inline-block">
+                    {{ .title }}
+                </h3>
+                <div class="prose dark:prose-light">
+                    {{ readFile (print "/content/works/" .type ".md") | markdownify }}
+                </div>
+                <div class="flex justify-center gap-4 mt-4">
+                    <a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+                        href="https://github.com/{{ .repo }}" target="_blank" role="button">
+                        {{ partial "icon.html" "github" }}
+                    </a>
+                    <a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+                        href="https://{{ .type }}realworld.okami101.io/api" target="_blank" role="button">
+                        OpenAPI
+                    </a>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </section>
+</article>
+{{ end }}