feat(new tool): Docker Compose to Docker Run

#634 #546

src/components/TextareaCopyable.vue

@@ -7,6 +7,7 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import bashHljs from 'highlight.js/lib/languages/bash';
 import { useCopy } from '@/composable/copy';
 
 const props = withDefaults(
@@ -30,6 +31,7 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('bash', bashHljs);
 
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

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

@@ -0,0 +1,12 @@
+declare module 'decomposerize' {
+  type Configuration = {
+    command?: string,
+    rm?: boolean,
+    detach?: boolean,
+    multiline?: boolean,
+    'long-args'?: boolean,
+    'arg-value-separator'?: ArgValueSeparator,
+  };
+  const decomposerize: (dockerComposeContent: string, configuration?: Configuration) => string;
+  export default decomposerize;
+}

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import decomposerize from 'decomposerize';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const detachOption = ref<boolean>(false);
+const removeOption = ref<boolean>(false);
+const longArgsOption = ref<boolean>(false);
+const equalAsSepOption = ref<boolean>(false);
+
+const dockerCompose = ref(
+  `version: '3.3'
+services:
+    nginx:
+        ports:
+            - '80:80'
+        volumes:
+            - '/var/run/docker.sock:/tmp/docker.sock:ro'
+        restart: always
+        logging:
+            options:
+                max-size: 1g
+        image: nginx`,
+);
+
+const conversionResult = computed(() => {
+  try {
+    const config = {
+      'detach': detachOption.value,
+      'rm': removeOption.value,
+      'long-args': longArgsOption.value,
+      'arg-value-separator': equalAsSepOption.value ? '=' : ' ',
+    };
+    return { commands: decomposerize(dockerCompose.value.trim(), config), errors: [] };
+  }
+  catch (e: any) {
+    return { commands: '#see error messages', errors: e.toString().split('\n') };
+  }
+});
+
+const errors = computed(() => conversionResult.value.errors);
+const dockerRunCommands = computed(() => conversionResult.value.commands);
+
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+  formatOnType: true,
+  formatOnPaste: true,
+};
+</script>
+
+<template>
+  <div>
+    <c-label label="Paste your Docker Compose file content:">
+      <div relative w-full>
+        <c-monaco-editor
+          v-model:value="dockerCompose"
+          theme="vs-dark"
+          language="yaml"
+          height="250px"
+          :options="MONACO_EDITOR_OPTIONS"
+        />
+      </div>
+    </c-label>
+
+    <div v-if="errors.length > 0">
+      <n-alert title="The following errors occured" type="error" mt-5>
+        <ul>
+          <li v-for="(message, index) of errors" :key="index">
+            {{ message }}
+          </li>
+        </ul>
+      </n-alert>
+    </div>
+
+    <n-divider />
+
+    <div class="mb-6 flex flex-row items-center gap-2">
+      <n-checkbox v-model:checked="detachOption">
+        Detach (-d)
+      </n-checkbox>
+      <n-checkbox v-model:checked="removeOption">
+        Remove (--rm)
+      </n-checkbox>
+      <n-checkbox v-model:checked="longArgsOption">
+        Long Arguments
+      </n-checkbox>
+      <n-checkbox v-model:checked="equalAsSepOption">
+        --<i>arg</i>=<i>value</i> ?
+      </n-checkbox>
+    </div>
+
+    <n-divider />
+
+    <TextareaCopyable :value="dockerRunCommands" language="bash" copy-placement="outside" />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+import { BrandDocker } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Docker Compose to Docker run converter',
+  path: '/docker-compose-to-docker-run-converter',
+  description: 'Turns Docker Compose filt to docker run command(s)!',
+  keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
+  component: () => import('./docker-compose-to-docker-run-converter.vue'),
+  icon: BrandDocker,
+  createdAt: new Date('2024-01-03'),
+});

src/tools/index.ts

@@ -75,6 +75,7 @@ import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
+import { tool as dockerComposeToDockerRunConverter } from './docker-compose-to-docker-run-converter';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -138,6 +139,7 @@ export const toolsByCategory: ToolCategory[] = [
       sqlPrettify,
       chmodCalculator,
       dockerRunToDockerComposeConverter,
+      dockerComposeToDockerRunConverter,
       xmlFormatter,
     ],
   },