Skip to content

Commit

Permalink
Upgrade to Alpine v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@hongquan
hongquan committed Jun 3, 2024
1 parent 6086bf2 commit 156c243
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 18 deletions.
13 changes: 9 additions & 4 deletions api/_public/main.js
View file
Original file line number Diff line number Diff line change
@@ -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: [],
Expand All @@ -15,5 +17,8 @@ window.app = function() {
colorizeHttpie() {
return hljs.highlight(this.httpie, { language: 'shell' }).value
}
}
}
}))
})

window.Alpine = Alpine
Alpine.start()
14 changes: 4 additions & 10 deletions api/_public/uno.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
Expand All @@ -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));}
Expand Down
6 changes: 2 additions & 4 deletions api/templates/index.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<h1 class=''>Let's convert from <a href='https://curl.haxx.se'>cURL</a> to <a href='https://httpie.org' class='text-purple-600'>HTTPie</a></h1>
</div>
</header>
<main x-data='app()'>
<main x-data='app'>
<form method='POST' x-on:submit.prevent='onSubmit' class='flex flex-col md:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4'>
<div class='grow'>
<textarea name='curl' class='font-mono' x-model='curl'></textarea>
Expand Down Expand Up @@ -63,7 +63,7 @@
<p>
Author: <a href='https://quan.hoabinh.vn'>Nguyễn Hồng Quân</a><br/>
Tool to demonstrate <a href='https://pypi.org/project/curlipie/'>CurliPie</a> ability.
This online tool is built with <a href='https://matcha.mizu.sh'>MatchCSS</a>, <a href='https://unocss.dev/'>UnoCSS</a>, <a href='https://github.com/alpinejs/alpine'>AlpineJS</a> and <a href='https://fastapi.tiangolo.com/'>FastAPI</a>.<br/>
This online tool is built with <a href='https://matcha.mizu.sh'>MatchaCSS</a>, <a href='https://unocss.dev/'>UnoCSS</a>, <a href='https://github.com/alpinejs/alpine'>AlpineJS</a> and <a href='https://fastapi.tiangolo.com/'>FastAPI</a>.<br/>
Logo is from <a href='www.nicepng.com'>nicepng.com</a>.
Icon is from <a href='www.freepik.com'>Freepik</a>.
</p>
Expand All @@ -72,8 +72,6 @@
<script type='modulepreload' src='https://unpkg.com/ky'></script>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js'></script>
<script type='module' src="{{ url_for('static', path='main.js?v=2') }}"></script>
<script type='module' src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js'></script>
<script nomodule src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js' defer></script>

{% if TRACKING %}
<!-- Matomo -->
Expand Down

0 comments on commit 156c243

Please sign in to comment.