feat(app): update the file extension automatically

change the filename extension on language change

Author: Akshara Hegde

.gitignore

@@ -17,6 +17,7 @@ logs
 .DS_Store
 .fleet
 .idea
+.vscode/
 
 # Local env files
 .env

assets/file-extensions.json

@@ -0,0 +1,97 @@
+{
+  "plaintext": ".txt",
+  "abap": ".abap",
+  "apex": ".cls",
+  "azcli": ".azcli",
+  "bat": ".bat",
+  "bicep": ".bicep",
+  "cameligo": ".cameligo",
+  "clojure": ".clj",
+  "coffeescript": ".coffee",
+  "c": ".c",
+  "cpp": ".cpp",
+  "csharp": ".cs",
+  "csp": ".csp",
+  "css": ".css",
+  "cypher": ".cyp",
+  "dart": ".dart",
+  "dockerfile": ".dockerfile",
+  "ecl": ".ecl",
+  "elixir": ".ex",
+  "flow9": ".flow9",
+  "freemarker2": ".ftl",
+  "fsharp": ".fs",
+  "go": ".go",
+  "graphql": ".gql",
+  "handlebars": ".hbs",
+  "hcl": ".hcl",
+  "html": ".html",
+  "ini": ".ini",
+  "java": ".java",
+  "javascript": ".js",
+  "json": ".json",
+  "julia": ".jl",
+  "kotlin": ".kt",
+  "less": ".less",
+  "lexon": ".lexon",
+  "liquid": ".liquid",
+  "lua": ".lua",
+  "m3": ".m3",
+  "markdown": ".md",
+  "mdx": ".mdx",
+  "mips": ".mips",
+  "msdax": ".msdax",
+  "mysql": ".sql",
+  "objective-c": ".m",
+  "pascal": ".pas",
+  "pascaligo": ".pascaligo",
+  "perl": ".pl",
+  "pgsql": ".pgsql",
+  "php": ".php",
+  "pla": ".pla",
+  "postiats": ".dats",
+  "powerquery": ".pq",
+  "powershell": ".ps1",
+  "proto": ".proto",
+  "pug": ".pug",
+  "python": ".py",
+  "qsharp": ".qs",
+  "r": ".r",
+  "razor": ".cshtml",
+  "redis": ".redis",
+  "redshift": ".sql",
+  "restructuredtext": ".rst",
+  "ruby": ".rb",
+  "rust": ".rs",
+  "sb": ".sb",
+  "scala": ".scala",
+  "scheme": ".scm",
+  "scss": ".scss",
+  "shell": ".sh",
+  "sol": ".sol",
+  "aes": ".aes",
+  "sparql": ".rq",
+  "sql": ".sql",
+  "st": ".st",
+  "swift": ".swift",
+  "systemverilog": ".sv",
+  "verilog": ".v",
+  "tcl": ".tcl",
+  "twig": ".twig",
+  "typescript": ".ts",
+  "vb": ".vb",
+  "wgsl": ".wgsl",
+  "xml": ".xml",
+  "yaml": ".yaml",
+  "ada": ".ada",
+  "cobol": ".cob",
+  "d": ".d",
+  "erlang": ".erl",
+  "fortran": ".f",
+  "groovy": ".groovy",
+  "haskell": ".hs",
+  "ocaml": ".ml",
+  "octave": ".m",
+  "racket": ".rkt",
+  "sbcl": ".sbcl"
+}

components/App/Navbar/index.vue

@@ -1,9 +1,9 @@
 <template>
   <header
-    class="border-b bg-gray-900 border-white/10 flex items-center justify-between gap-3"
+    class="flex gap-3 justify-between items-center bg-gray-900 border-b border-white/10"
   >
-    <h1 class="font-bold tracking-wide flex items-center gap-2 px-4">
-      <Icon class="h-5 w-5" name="i-lucide-chevron-right-square" /><span
+    <h1 class="flex gap-2 items-center px-4 font-bold tracking-wide">
+      <Icon class="w-5 h-5" name="i-lucide-chevron-right-square" /><span
         >CODESHARE</span
       >
     </h1>
@@ -15,27 +15,27 @@
     />
     <span v-else class="text-xs">{{ title }}</span>
     <div
-      class="border-l divide-x divide-white/10 border-white/10 flex items-center"
+      class="flex items-center border-l divide-x divide-white/10 border-white/10"
     >
       <UTooltip text="Download file" @click="$emit('download')">
-        <button class="border-white/10 h-9 px-3 text-sm hover:bg-gray-950">
-          <Icon name="i-lucide-download" class="h-4 w-4" />
+        <button class="px-3 h-9 text-sm border-white/10 hover:bg-gray-950">
+          <Icon name="i-lucide-download" class="w-4 h-4" />
         </button>
       </UTooltip>
       <UTooltip text="Copy code">
         <button
           @click="$emit('copy')"
-          class="border-white/10 h-9 px-3 text-sm hover:bg-gray-950"
+          class="px-3 h-9 text-sm border-white/10 hover:bg-gray-950"
         >
-          <Icon name="i-lucide-copy" class="h-4 w-4" />
+          <Icon name="i-lucide-copy" class="w-4 h-4" />
         </button>
       </UTooltip>
       <UTooltip v-if="publishEnabled" text="Publish">
         <button
           @click="$emit('publish')"
-          class="border-white/10 h-9 px-3 text-sm hover:bg-gray-950"
+          class="px-3 h-9 text-sm border-white/10 hover:bg-gray-950"
         >
-          <Icon name="i-lucide-external-link" class="h-4 w-4" />
+          <Icon name="i-lucide-external-link" class="w-4 h-4" />
         </button>
       </UTooltip>
     </div>

composables/editor.js

@@ -1,5 +1,6 @@
 import githubTheme from "@/assets/github-dark.json";
 import languages from "@/assets/languages";
+import fileExtensions from "@/assets/file-extensions";
 
 export const useEditor = () => {
   const { copy } = useClipboard();
@@ -22,7 +23,7 @@ export const useEditor = () => {
     },
     inlineSuggest: {
       enabled: true,
-      showToolbar: 'always'
+      showToolbar: "always",
     },
   });
   const snippet = useState("snippet", () => {
@@ -32,13 +33,22 @@ export const useEditor = () => {
       language: "plaintext",
     };
   });
+
   const confirmationModal = ref(false);
   const loading = ref(false);
   const toast = useToast();
   const selectedLanguage = ref("plaintext");
   const lineCount = ref(0);
   const editorRef = shallowRef();
 
+  watchEffect(() => {
+    const language = snippet.value.language;
+    if (fileExtensions[language]) {
+      const originalFilename = snippet.value.title.split('.')[0];
+      snippet.value.title = `${originalFilename}${fileExtensions[language]}`;
+    }
+  });
+
   const handleMount = (editor, monaco) => {
     editorRef.value = editor;
     monaco.editor.defineTheme("github-dark", githubTheme);
@@ -89,7 +99,7 @@ export const useEditor = () => {
   const confirmPublish = async () => {
     try {
       loading.value = true;
-      
+
       const data = await $fetch("/api/codebin", {
         method: "POST",
         body: snippet.value,
@@ -108,7 +118,7 @@ export const useEditor = () => {
       navigateTo(`/${data.uid}`);
     } catch (error) {
       loading.value = false;
-      console.log(error.statusMessage)
+      console.log(error.statusMessage);
       toast.add({
         title: "Error",
         description: error.statusMessage || error.message,
@@ -123,7 +133,7 @@ export const useEditor = () => {
       type: "text/plain;charset=utf-8",
     });
     saveAs(blob, snippet.value.title || "untitled.txt");
-  }
+  };
 
   function saveAs(blob, fileName) {
     const link = document.createElement("a");
@@ -151,6 +161,6 @@ export const useEditor = () => {
     publishSnippet,
     confirmPublish,
     copySnippet,
-    downloadSnippet
+    downloadSnippet,
   };
 };

pages/[id].vue

@@ -1,13 +1,13 @@
 <template>
-  <main class="h-screen flex flex-col text-white">
+  <main class="flex flex-col h-screen text-white">
     <AppNavbar
       @publish="publishSnippet"
       @copy="copySnippet"
       @download="downloadSnippet"
       :publish-enabled="false"
       :title="snippet.title"
     />
-    <div class="flex-1 flex">
+    <div class="flex flex-1">
       <AppSidebar />
       <ClientOnly>
         <vue-monaco-editor
@@ -20,15 +20,15 @@
           @change="onChange"
         >
           <template #default>
-            <div class="flex items-center justify-center">
+            <div class="flex justify-center items-center">
               <div class="text-gray-500">Loading editor...</div>
             </div>
           </template>
         </vue-monaco-editor>
       </ClientOnly>
     </div>
     <footer
-      class="border-t bg-gray-900 border-white/10 flex items-center justify-between"
+      class="flex justify-between items-center bg-gray-900 border-t border-white/10"
     >
       <div
         class="flex items-center divide-x divide-white/10 text-xs [&>div]:p-2 border-r border-white/10"
@@ -47,7 +47,7 @@
         </div>
       </div>
       <div
-        class="flex items-center divide-x divide-white/10 text-xs border-l border-white/10"
+        class="flex items-center text-xs border-l divide-x divide-white/10 border-white/10"
       >
         <UTooltip
           :text="`Toggle minimap (${
@@ -61,7 +61,7 @@
             @click="toggleMinimap"
             :disabled="!editorRef"
           >
-            <Icon name="i-heroicons-map" class="h-4 w-4" />
+            <Icon name="i-heroicons-map" class="w-4 h-4" />
           </button>
         </UTooltip>
         <UTooltip
@@ -74,7 +74,7 @@
             @click="formatCode"
             :disabled="!editorRef"
           >
-            <Icon name="i-lucide-sparkles" class="h-4 w-4" />
+            <Icon name="i-lucide-sparkles" class="w-4 h-4" />
           </button>
         </UTooltip>
         <USelectMenu
@@ -91,7 +91,7 @@
     <UModal v-model="confirmationModal">
       <div class="p-4 space-y-4">
         <p>Publish code</p>
-        <UFormGroup label="Email">
+        <UFormGroup label="File name">
           <UInput size="lg" placeholder="File name" v-model="snippet.title" />
         </UFormGroup>
         <UAlert