abdus/ascii-pwa
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate app to Alpine.js

Browse Source
This commit is contained in:
abdus committed 2026-10-10 11:07:10 +00:00
1 parent 766212f119
commit bc236db952
9 files changed
+269 -216
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+31 -29
View File
@@ -14,58 +14,60 @@
<script type="module" src="./app.js"></script>
</head>
<body>
<main>
<main x-data="asciiApp" x-cloak>
<header>
<a class="logo" href="./" aria-label="ascii homepage">
<a class="logo" href="./" :aria-label="t('homeLabel')">
<img src="./icons/ascii.svg" width="64" height="64" alt="">
<h1>ascii!</h1>
</a>
</header>
<form id="render-form">
<label for="text" data-i18n="textLabel">your text</label>
<textarea id="text" name="text" rows="2" maxlength="500" spellcheck="false">hello world</textarea>
<form id="render-form" @submit.prevent="draw()">
<label for="text" x-text="t('textLabel')">your text</label>
<textarea id="text" name="text" rows="2" maxlength="500" spellcheck="false" x-model="text"></textarea>
<div class="controls">
<label><span data-i18n="styleLabel">lettering</span>
<select id="style" name="font">
<option value="Standard">Standard</option>
<label><span x-text="t('styleLabel')">lettering</span>
<select id="style" name="font" x-model="font">
<template x-for="name in styles" :key="name">
<option :value="name" :selected="name === font" x-text="name"></option>
</template>
</select>
</label>
<div class="font-navigation">
<button id="prev-font" type="button" data-i18n="prev">prev</button>
<button id="next-font" type="button">next font: 3-D</button>
<button id="prev-font" type="button" @click="cycleFont(-1)" x-text="t('prev')">prev</button>
<button id="next-font" type="button" @click="cycleFont(1)" x-text="t('nextFont').replace('{name}', nextFont)"></button>
</div>
</div>
</form>
<div class="output-heading">
<p data-i18n="preview">your ASCII art</p>
<p x-text="t('preview')">your ASCII art</p>
<div class="actions">
<button id="copy" type="button" data-i18n="copy">copy</button>
<button id="download" type="button" data-i18n="download">download .txt</button>
<button id="share" type="button" data-i18n="share">copy link</button>
<button id="copy" type="button" @click="copy()" :disabled="!canCopy" x-text="t('copy')">copy</button>
<button id="download" type="button" @click="download()" :disabled="!canCopy" x-text="t('download')">download .txt</button>
<button id="share" type="button" @click="share()" x-text="t('share')">copy link</button>
</div>
</div>
<pre id="output" tabindex="0" aria-label="ASCII art"></pre>
<p class="note" data-i18n="glyphNote">Character support varies by font.</p>
<p id="status" role="status" aria-live="polite"></p>
<pre id="output" x-ref="output" tabindex="0" :aria-label="t('outputLabel')" :aria-busy="busy" x-text="ascii"></pre>
<p class="note" x-text="t('glyphNote')">Character support varies by font.</p>
<p id="status" role="status" aria-live="polite" x-text="statusKey ? t(statusKey) : ''"></p>
<footer>
<div class="preferences">
<label><span data-i18n="theme">appearance</span>
<select id="theme">
<option value="system" data-i18n="system">system</option>
<option value="dark" data-i18n="dark">dark</option>
<option value="light" data-i18n="light">light</option>
<label><span x-text="t('theme')">appearance</span>
<select id="theme" x-model="theme">
<option value="system" x-text="t('system')">system</option>
<option value="dark" x-text="t('dark')">dark</option>
<option value="light" x-text="t('light')">light</option>
</select>
</label>
<label><span data-i18n="language">language</span>
<select id="language"><option value="en">English</option><option value="tr">Türkçe</option></select>
<label><span x-text="t('language')">language</span>
<select id="language" x-model="language"><option value="en">English</option><option value="tr">Türkçe</option></select>
</label>
</div>
<div class="install-controls">
<button id="install" type="button" hidden data-i18n="install">install app</button>
<button id="update" type="button" hidden data-i18n="update">update app</button>
<details id="install-guide">
<summary data-i18n="install">install app</summary>
<p data-i18n="installGuide">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
<button id="install" type="button" x-show="installAvailable" @click="install()" x-text="t('install')">install app</button>
<button id="update" type="button" x-show="updateAvailable" @click="update()" x-text="t('update')">update app</button>
<details id="install-guide" x-show="!installed && !installAvailable">
<summary x-text="t('install')">install app</summary>
<p x-text="t('installGuide')">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
</details>
</div>
</footer>