From 156c24378386693f06a1046a6a8122024a60e1a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20H=E1=BB=93ng=20Qu=C3=A2n?= Date: Mon, 3 Jun 2024 09:18:35 +0700 Subject: [PATCH] Upgrade to Alpine v3 --- api/_public/main.js | 13 +++++++++---- api/_public/uno.css | 14 ++++---------- api/templates/index.jinja | 6 ++---- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/api/_public/main.js b/api/_public/main.js index 0a84cd7..678ac3d 100644 --- a/api/_public/main.js +++ b/api/_public/main.js @@ -1,9 +1,11 @@ import ky from 'https://unpkg.com/ky' +import Alpine from 'https://esm.sh/alpinejs@3.14.0' import 'https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js' import 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/shell.min.js' -window.app = function() { - return { + +document.addEventListener('alpine:init', () => { + Alpine.data('app', () => ({ curl: '', httpie: '', errors: [], @@ -15,5 +17,8 @@ window.app = function() { colorizeHttpie() { return hljs.highlight(this.httpie, { language: 'shell' }).value } - } -} + })) +}) + +window.Alpine = Alpine +Alpine.start() diff --git a/api/_public/uno.css b/api/_public/uno.css index abf5fcb..000672d 100644 --- a/api/_public/uno.css +++ b/api/_public/uno.css @@ -34,7 +34,6 @@ .w-5{width:1.25rem;} .w-full{width:100%;} .flex{display:flex;} -.flex-1{flex:1 1 0%;} .grow{flex-grow:1;} .flex-col{flex-direction:column;} .cursor-pointer{cursor:pointer;} @@ -44,33 +43,28 @@ .gap-1{gap:0.25rem;} .space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));} .overflow-hidden{overflow:hidden;} -.rounded-md{border-radius:0.375rem;} +.dark .dark\:focus\:border-0:focus{border-width:0px;} +.focus\:border-0:focus{border-width:0px;} .rounded-t{border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;} .bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity));} -.bg-indigo-600{--un-bg-opacity:1;background-color:rgb(79 70 229 / var(--un-bg-opacity));} -.hover\:bg-indigo-700:hover{--un-bg-opacity:1;background-color:rgb(67 56 202 / var(--un-bg-opacity));} .from-gray-700{--un-gradient-from-position:0%;--un-gradient-from:rgb(55 65 81 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(55 65 81 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .to-gray-800{--un-gradient-to-position:100%;--un-gradient-to:rgb(31 41 55 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} .bg-gradient-to-b{--un-gradient-shape:to bottom;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} .p-1{padding:0.25rem;} .p-2{padding:0.5rem;} .px-2{padding-left:0.5rem;padding-right:0.5rem;} -.px-4{padding-left:1rem;padding-right:1rem;} -.py-2{padding-top:0.5rem;padding-bottom:0.5rem;} .pb-2{padding-bottom:0.5rem;} .text-center{text-align:center;} -.text-base{font-size:1rem;line-height:1.5rem;} .text-sm{font-size:0.875rem;line-height:1.25rem;} .text-gray-300{--un-text-opacity:1;color:rgb(209 213 219 / var(--un-text-opacity));} .text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity));} .text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} -.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));} .hover\:text-red-400:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));} .font-bold{font-weight:700;} -.font-medium{font-weight:500;} .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;} .shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} -.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.dark .dark\:focus\:ring-0:focus{--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.focus\:ring-0:focus{--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} @media (min-width: 640px){ .sm\:space-x-4>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));} .sm\:space-y-0>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0px * var(--un-space-y-reverse));} diff --git a/api/templates/index.jinja b/api/templates/index.jinja index eb9ecb1..45252cc 100644 --- a/api/templates/index.jinja +++ b/api/templates/index.jinja @@ -24,7 +24,7 @@

Let's convert from cURL to HTTPie

-
+
@@ -63,7 +63,7 @@

Author: Nguyễn Hồng Quân
Tool to demonstrate CurliPie ability. - This online tool is built with MatchCSS, UnoCSS, AlpineJS and FastAPI.
+ This online tool is built with MatchaCSS, UnoCSS, AlpineJS and FastAPI.
Logo is from nicepng.com. Icon is from Freepik.

@@ -72,8 +72,6 @@ - - {% if TRACKING %}