add converter

link kept changing, so added my own

.github/workflows/deploy.yml

@@ -0,0 +1,70 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [master]
+
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          static_site_generator: sveltekit
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1

README.md

@@ -75,4 +75,4 @@ The component raises events to indicate when any transition is running:
 
 ## TailwindUI
 
-If you're converting from TailwindUI markup, you can use this [handy converter](https://kuba1meow.github.io/svelte-transition-converter/) to convert the comments into `<Transition>` markup and classes.
+If you're converting from TailwindUI markup, you can use this [handy converter](https://captaincodeman.github.io/svelte-transition/) to convert the comments into `<Transition>` markup and classes.

package.json

@@ -43,10 +43,11 @@
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.2.0",
+		"@sveltejs/adapter-static": "^3.0.2",
 		"@sveltejs/kit": "^2.5.7",
 		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
+		"@tailwindcss/forms": "^0.5.7",
 		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",
 		"publint": "^0.2.7",

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true

src/routes/+page.svelte

@@ -1,42 +1,55 @@
 <script lang="ts">
-	import Transition from '$lib/Transition.svelte'
+  let source = /* html */`  <!--
+    Modal panel, show/hide based on modal state.
 
-	let show = true
+    Entering: "ease-out duration-300"
+      From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      To: "opacity-100 translate-y-0 sm:scale-100"
+    Leaving: "ease-in duration-200"
+      From: "opacity-100 translate-y-0 sm:scale-100"
+      To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+  -->`;
+  const regex = /\<!--\s+(?<description>.*)\s+Entering:\s?(?<enter>.*)\s+From:\s?(?<enterFrom>.*)\s+To:\s?(?<enterTo>.*)\s+Leaving:\s?(?<leave>.*)\s+From:\s?(?<leaveFrom>.*)\s+To:\s?(?<leaveTo>.*)\s+--\>/mi;
 
-	function resetIsShowing() {
-		show = false
-		setTimeout(() => (show = true), 500)
+	function removeEmptyLines(value: string) {
+		return value.split('\n').filter(line => line !== '  ').join('\n')
 	}
+
+  $: groups = source.match(regex)?.groups
+	$: result = groups ? removeEmptyLines(`<Transition {show}
+  enter=${groups.enter}
+  enterFrom=${groups.enterFrom}
+  enterTo=${groups.enterTo}
+  ${groups.leave !== groups.enter ? `leave=${groups.leave}` : ''}
+  ${groups.leaveFrom !== groups.enterTo ? `leaveFrom=${groups.leaveFrom}` : ''}
+  ${groups.leaveTo !== groups.enterFrom ? `leaveTo=${groups.leaveTo}` : ''}
+>
+</Transition>`) : ''
 </script>
 
-<div class="p-16 relative flex flex-col items-center justify-center m-8 rounded-xl overflow-hidden bg-gradient-to-r from-pink-500 to-rose-500">
-	<div class="w-32 h-32">
-		<Transition
-			{show}
-			appear
-			enter="duration-[400ms]"
-			enterFrom="opacity-0 rotate-[-120deg] scale-50"
-			enterTo="opacity-100 rotate-0 scale-100"
-			leave="duration-200 transition ease-in-out"
-			leaveFrom="opacity-100 rotate-0 scale-100"
-			leaveTo="opacity-0 scale-95"
-		>
-			<div class="w-full h-full bg-white rounded-md shadow-lg"></div>
-		</Transition>
+<main class="m-4">
+	<h1 class="font-bold text-3xl text-gray-700 tracking-tighter">Svelte-Transition</h1>
+	<p class="mt-2 text-gray-700">A Svelte component to transition elements via CSS classes</p>
+	<p class="mt-2 text-gray-700">
+		Examples:
+		<a class="ml-1 text-blue-600 hover:underline" href="examples/basic">Basic</a>
+		<a class="ml-1 text-blue-600 hover:underline" href="examples/nested">Nested</a>
+	</p>
+	<h2 class="mt-8 font-bold text-xl text-gray-700 tracking-tighter">Convert TailwindUI Comments</h2>
+
+	<div class="mt-4 max-w-2xl">
+		<label for="source" class="block text-sm font-medium leading-6 text-gray-900">Source comment:</label>
+		<div class="mt-2">
+			<textarea rows="10" name="source" id="source" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 font-mono text-sm leading-5" bind:value={source}></textarea>
+		</div>
 	</div>
-	<button
-		on:click={resetIsShowing}
-		disabled={!show}
-		class="flex items-center px-3 py-2 mt-8 text-sm font-medium text-white transition transform bg-black rounded-full active:bg-opacity-40 hover:scale-105 hover:bg-opacity-30 focus:outline-none bg-opacity-20"
-	>
-		<svg viewBox="0 0 20 20" fill="none" class="w-5 h-5 opacity-70">
-			<path
-				d="M14.9497 14.9498C12.2161 17.6835 7.78392 17.6835 5.05025 14.9498C2.31658 12.2162 2.31658 7.784 5.05025 5.05033C7.78392 2.31666 12.2161 2.31666 14.9497 5.05033C15.5333 5.63385 15.9922 6.29475 16.3266 7M16.9497 2L17 7H16.3266M12 7L16.3266 7"
-				stroke="currentColor"
-				stroke-width="1.5"
-			/>
-		</svg>
 
-		<span class="ml-3">Click to transition</span>
-	</button>
-</div>
+	{#if groups}
+	<div class="mt-4 max-w-2xl">
+		<label for="source" class="block text-sm font-medium leading-6 text-gray-900">Svelte Transition:</label>
+		<div class="mt-2">
+			<pre class="rounded-md border px-4 py-1.5 text-gray-900 font-mono text-sm leading-5 bg-gray-50">{result}</pre>
+		</div>
+	</div>
+	{/if}
+</main>

src/routes/examples/basic/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Transition from '$lib/Transition.svelte'
+
+	let show = true
+
+	function resetIsShowing() {
+		show = false
+		setTimeout(() => (show = true), 500)
+	}
+</script>
+
+<div class="p-16 relative flex flex-col items-center justify-center m-8 rounded-xl overflow-hidden bg-gradient-to-r from-pink-500 to-rose-500">
+	<div class="w-32 h-32">
+		<Transition
+			{show}
+			appear
+			enter="duration-[400ms]"
+			enterFrom="opacity-0 rotate-[-120deg] scale-50"
+			enterTo="opacity-100 rotate-0 scale-100"
+			leave="duration-200 transition ease-in-out"
+			leaveFrom="opacity-100 rotate-0 scale-100"
+			leaveTo="opacity-0 scale-95"
+		>
+			<div class="w-full h-full bg-white rounded-md shadow-lg"></div>
+		</Transition>
+	</div>
+	<button
+		on:click={resetIsShowing}
+		disabled={!show}
+		class="flex items-center px-3 py-2 mt-8 text-sm font-medium text-white transition transform bg-black rounded-full active:bg-opacity-40 hover:scale-105 hover:bg-opacity-30 focus:outline-none bg-opacity-20"
+	>
+		<svg viewBox="0 0 20 20" fill="none" class="w-5 h-5 opacity-70">
+			<path
+				d="M14.9497 14.9498C12.2161 17.6835 7.78392 17.6835 5.05025 14.9498C2.31658 12.2162 2.31658 7.784 5.05025 5.05033C7.78392 2.31666 12.2161 2.31666 14.9497 5.05033C15.5333 5.63385 15.9922 6.29475 16.3266 7M16.9497 2L17 7H16.3266M12 7L16.3266 7"
+				stroke="currentColor"
+				stroke-width="1.5"
+			/>
+		</svg>
+
+		<span class="ml-3">Click to transition</span>
+	</button>
+</div>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-auto"
+import adapter from '@sveltejs/adapter-static'
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -12,4 +12,4 @@ const config = {
 	},
 }
 
-export default config;
+export default config

tailwind.config.cjs

@@ -1,11 +1,11 @@
 const config = {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
 
-  theme: {
-    extend: {},
-  },
+	theme: {
+		extend: {},
+	},
 
-  plugins: [],
-};
+	plugins: [require('@tailwindcss/forms')],
+}
 
 module.exports = config;