Migrate minimal landpage

Pages/Components/Icons/_BirdIcon.cshtml

@@ -0,0 +1,11 @@
+@{
+    var size = ViewData["size"];
+    var fill = ViewData["fill"];
+}
+
+<svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="@size" height="@size" fill="@fill"
+    viewBox="0 0 256 256" style="--darkreader-inline-fill: #000000;" data-darkreader-inline-fill="">
+    <path
+        d="M176,72a16,16,0,1,1-16-16A16,16,0,0,1,176,72Zm68,8a12,12,0,0,1-5.34,10L220,102.42V120A108.12,108.12,0,0,1,112,228H24A20,20,0,0,1,8.41,195.5l.15-.18L92,95.18V76.89C92,41.28,120.57,12.17,155.69,12H156a63.94,63.94,0,0,1,60.58,43.29L238.66,70A12,12,0,0,1,244,80Zm-33.63,0-10.69-7.13a12,12,0,0,1-5-7A40,40,0,0,0,156,36h-.19c-21.95.11-39.8,18.45-39.8,40.89V99.52a12,12,0,0,1-2.79,7.69L32.57,204H53.05l69.74-83.68a12,12,0,1,1,18.43,15.36L84.29,204H112a84.09,84.09,0,0,0,84-84V96a12,12,0,0,1,5.35-10Z">
+    </path>
+</svg>

Pages/Components/Icons/_GlassIcon.cshtml

@@ -0,0 +1,12 @@
+@{
+    var size = ViewData["size"];
+    var fill = ViewData["fill"];
+}
+
+
+<svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="@size" height="@size" fill="@fill"
+    viewBox="0 0 256 256">
+    <path
+        d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z">
+    </path>
+</svg>

Pages/Components/_Badge.cshtml

@@ -0,0 +1,7 @@
+@{
+    var text = ViewData["text"];
+}
+
+<button class="inline-block mr-2 py-1 px-2 text-xs rounded-full hover:underline bg-[#082f49] cursor-pointer">
+    @text
+</button>

Pages/Components/_InlineDefinition.cshtml

@@ -0,0 +1,4 @@
+<div class="py-2 mx-2">
+    <span class="font-bold pr-2">Polola</span>
+    <span class="opacity-75">Otra palabra para decir enamorado/a</span>
+</div>

Pages/Components/_Navbar.cshtml

@@ -0,0 +1,43 @@
+<nav class="fixed z-50 bottom-0 left-0 w-full h-14">
+    <div id="search-results"
+        class="hidden absolute bottom-14 w-full bg-c-bg text-c-on-bg text-white border-t-4 border-l-4 border-r-4 border-c-primary rounded-tr-md rounded-tl-md">
+        @Html.Partial("./_InlineDefinition.cshtml")
+        @Html.Partial("./_InlineDefinition.cshtml")
+        @Html.Partial("./_InlineDefinition.cshtml")
+    </div>
+    <div class="grid grid-cols-[3.5rem_auto_3.5rem] bg-c-primary">
+        <div class="table">
+            <a href="/" class="table-cell align-middle h-14 text-center">
+                @Html.Partial("./Icons/_BirdIcon.cshtml", new ViewDataDictionary(ViewData) {
+                    {"size", 36}, {"fill", "white"}
+                })
+            </a>
+        </div>
+        <div class="relative">
+            <svg class="absolute z-10 -left-[15px] top-[9px] scale-x-50" fill="white" width="20" height="20"
+                viewBox="0 0 50 50">
+                <path
+                    d="M 57.29217,4.9844012 V 56.568575 C 44.512514,39.388798 29.429048,35.264265 12.536889,30.729102 29.111034,27.220159 45.273777,21.221938 57.29217,4.9844012 Z">
+                </path>
+            </svg>
+            <input 
+                _="on keyup debounced at 300ms
+                set :x to my.value.length
+                if :x > 0
+                    remove .hidden from #search-results
+                else
+                    add .hidden to #search-results
+                end
+                "
+                type="text" placeholder="Buscá una palabra"
+                class="w-full py-2 px-1 rounded-md my-2 bg-white text-black" />
+        </div>
+        <div class="table">
+            <button class="table-cell align-middle h-14 text-center w-full">
+                @Html.Partial("./Icons/_GlassIcon.cshtml", new ViewDataDictionary(ViewData) {
+                    {"size", 36}, {"fill", "white"}
+                })
+            </button>
+        </div>
+    </div>
+</nav>

Pages/Index.cshtml

@@ -4,11 +4,20 @@
     ViewData["Title"] = "Home page";
 }
 
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about 
-        <a class="text-blue-600 underline" href="https://learn.microsoft.com/aspnet/core">
-            building Web apps with ASP.NET Core
-        </a>.
-    </p>
+@Html.Partial("/Pages/Components/_Navbar.cshtml")
+
+<div class="container">
+    <div class="bg-accent text-accent-content py-2 m-1 rounded-md text-center font-bold text-lg">
+        Jerguero
+    </div>
+    <div class="text-center p-2">
+        <a class="py-1 px-2 rounded bg-c-primary text-c-on-primary hover:underline" href="/new">
+            Agregá una nueva definición
+        </a>
+    </div>
+    @Html.Partial("./_Post.cshtml")
+    @Html.Partial("./_Post.cshtml")
+    @Html.Partial("./_Post.cshtml")
+    @Html.Partial("./_Post.cshtml")
+    <div class="w-full h-16"></div>
 </div>

Pages/Shared/_Layout.cshtml

@@ -1,13 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
 
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - csharp</title>
+    <title>@ViewData["Title"] - Jerguero</title>
     <link rel="stylesheet" href="~/css/tailwind-output.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/csharp.styles.css" asp-append-version="true" />
+
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap"
+        rel="stylesheet" />
+
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@@phosphor-icons/web@2.0.3/src/regular/style.css" />
+
+    <script defer src="https://unpkg.com/hyperscript.org@0.9.12"></script>
 </head>
 
 <body>

Pages/_Post.cshtml

@@ -0,0 +1,40 @@
+<article class="bg-c-bg-2 shadow-md my-2 rounded-md py-2 px-4">
+    <div class="card-body">
+        <div class="grid grid-cols-[auto_4rem]">
+            <a href="#" class="text-c-primary text-2xl font-black hover:underline pt-2 pb-2">
+                <h2 class="card-title">
+                    Pedro pedro pedro
+                </h2>
+            </a>
+            <div class="flex justify-end items-center text-right text-xl">
+                <span title="Utilizado en Argentina">🇦🇷</span>
+            </div>
+        </div>
+        <div class="pb-2">
+            @Html.Partial("./Components/_Badge.cshtml", new ViewDataDictionary(ViewData) {
+                {"text", "Amor"}
+            })
+            @Html.Partial("./Components/_Badge.cshtml", new ViewDataDictionary(ViewData) {
+                {"text", "Relaciones"}
+            })
+        </div>
+        <p>
+            Pedro pe
+        </p>
+        <br />
+        <div class="grid grid-cols-[auto_3.25rem]">
+            <div class="opacity-70 text-xs">
+                <a href="#" class="inline-block underline font-serif font-semibold">
+                    Pablito
+                </a>
+                ·
+                <span>05/12/2022</span>
+            </div>
+            <div class="text-lg text-right">
+                <i class="ph ph-thumbs-down hover:underline cursor-pointer"></i>
+                &nbsp;
+                <i class="ph ph-thumbs-up hover:underline cursor-pointer"></i>
+            </div>
+        </div>
+    </div>
+</article>

csharp.csproj

@@ -6,4 +6,8 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="8.0.4" />
+  </ItemGroup>
+
 </Project>

tailwind.config.js

@@ -1,9 +1,45 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ["./Pages/**/*.cshtml"],
-    theme: {
-        extend: {},
+    corePlugins: {
+        container: false
     },
-    plugins: [],
+    theme: {
+        extend: {
+            fontFamily: {
+                'serif': ["serif"],
+            },
+            colors: {
+                "c-primary": "var(--c-primary)",
+                "c-on-primary": "var(--c-on-primary)",
+                "c-bg": "var(--c-bg)",
+                "c-bg-2": "var(--c-bg-2)",
+                "c-on-bg": "var(--c-on-bg)",
+                "c-primary": "var(--c-primary)",
+            },
+        },
+    },
+    plugins: [
+        function ({ addComponents }) {
+            addComponents({
+                '.container': {
+                    maxWidth: '95%',
+                    margin: "auto",
+                    '@screen sm': {
+                        maxWidth: '640px',
+                    },
+                    '@screen md': {
+                        maxWidth: '768px',
+                    },
+                    '@screen lg': {
+                        maxWidth: '1024px',
+                    },
+                    '@screen xl': {
+                        maxWidth: '1280px',
+                    },
+                }
+            })
+        }
+    ],
 }
 

wwwroot/css/tailwind-input.css

@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --c-primary: #0ea5e9;
+    --c-on-primary: white;
+
+
+}
+
+:root {
+    --c-bg: #ecfeff;
+    --c-on-bg: black;
+
+    --c-bg-2: white;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --c-bg: #0a0a0a;
+        --c-on-bg: white;
+
+        --c-bg-2: #0f1c25;
+    }
+}
+
+html {
+    background-color: var(--c-bg);
+    color: var(--c-on-bg);
+    font-family: "Radio Canada Big", sans-serif;
+    font-optical-sizing: auto;
+}
+
+/* htmx: data-loading extension */
+[data-loading] {
+  display: none;
+}