Fix code according to suggestions

src/tools/docker-run-to-docker-compose-converter/composerize.d.ts

@@ -1,4 +1,4 @@
 declare module 'composerize' {
-  const composerize: function;
+  const composerize: (arg: string) => string;
   export default composerize;
 }

src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue

@@ -0,0 +1,39 @@
+<template>
+  <n-card>
+    <n-form-item label="Your docker run command:">
+      <n-input
+        v-model:value="dockerRun"
+        style="font-family: monospace"
+        type="textarea"
+        placeholder="Your docker run command to convert..."
+        rows="3"
+      />
+    </n-form-item>
+
+    <n-divider />
+
+    <textarea-copyable :value="dockerCompose" language="yaml" />
+    <br />
+    <br />
+    <n-space justify="center">
+      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { textToBase64 } from '@/utils/base64';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+import composerize from 'composerize';
+
+const dockerRun = ref(
+  'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
+);
+const dockerCompose = computed(() => withDefaultOnError(() => composerize(dockerRun.value), ''));
+const dockerComposeBase64 = computed(() => 'data:application/yaml;base64,' + textToBase64(dockerCompose.value));
+const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, filename: 'docker-compose.yml' });
+</script>

src/tools/docker-run-to-docker-compose-converter/index.ts

@@ -0,0 +1,11 @@
+import { BrandDocker } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Docker run to Docker compose converter',
+  path: '/docker-run-to-docker-compose-converter',
+  description: 'Turns docker run commands into docker-compose files!',
+  keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
+  component: () => import('./docker-run-to-docker-compose-converter.vue'),
+  icon: BrandDocker,
+});

src/tools/docker-to-docker-compose/docker-to-docker-compose.vue

@@ -1,64 +0,0 @@
-<template>
-  <n-card>
-    <n-input
-      v-model:value="dockerRun"
-      style="font-family: monospace"
-      type="textarea"
-      placeholder="Your docker run command to convert..."
-      rows="3"
-    />
-
-    <n-divider />
-
-    <n-input
-      style="font-family: monospace"
-      :value="dockerCompose"
-      type="textarea"
-      placeholder="Converted to docker-compose file"
-      :autosize="{ minRows: 1 }"
-      readonly
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-    />
-    <br />
-    <br />
-    <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
-      <n-button :disabled="dockerCompose === ''" secondary @click="downloadFile()"> Download file </n-button>
-    </n-space>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { useCopy } from '@/composable/copy';
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
-import { textToBase64 } from '@/utils/base64';
-import { computed, ref, watch } from 'vue';
-import composerize from 'composerize';
-
-const dockerRun = ref(
-  'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
-);
-const dockerCompose = ref('');
-const dockerComposeBase64 = computed(() => 'data:application/yaml;base64,' + textToBase64(dockerCompose.value));
-const { copy } = useCopy({ source: dockerCompose, text: 'docker-compose copied to the clipboard' });
-const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, filename: 'docker-compose.yml' });
-
-function downloadFile() {
-  if (dockerCompose.value === '') return;
-  try {
-    //dockerComposeBase64 = 'data:application/yaml;base64,' + dockerComposeBase64.value;
-    download();
-  } catch (_) {
-    //
-  }
-}
-
-watch([dockerRun], convertToCompose, { immediate: true });
-
-function convertToCompose() {
-  dockerCompose.value = composerize(dockerRun.value);
-}
-</script>

src/tools/docker-to-docker-compose/index.ts

@@ -1,11 +0,0 @@
-import { BrandDocker } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'Composerize',
-  path: '/docker-to-docker-compose',
-  description: 'Turns docker run commands into docker-compose files!',
-  keywords: ['docker', 'to', 'docker', 'compose'],
-  component: () => import('./docker-to-docker-compose.vue'),
-  icon: BrandDocker,
-});

src/tools/index.ts

@@ -1,7 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
-import { tool as dockerToDockerCompose } from './docker-to-docker-compose';
+import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter';
 import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
 import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
 import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
@@ -93,7 +93,7 @@ export const toolsByCategory: ToolCategory[] = [
       jsonMinify,
       sqlPrettify,
       chmodCalculator,
-      dockerToDockerCompose,
+      dockerRunToDockerComposeConverter,
     ],
   },
   {