Added some SEO stuff

Author: fayazara

README.md

@@ -1,21 +1,23 @@
 # Codeshare.app
 
-[Codeshare.app](https://codeshare.app) A mininal code bin sharing app, I wanted a simple but powerful for devs pastebin so, I created this small tool to share code snippets
-
-## Stack
-
-- Nuxt 3
-- Tailwindcss
-- Nuxt UI
-- Turso Database
-- Monaco editor
+[Codeshare.app](https://codeshare.app) A mininal code bin sharing app, I wanted a simple but powerful for devs pastebin so, I created this small tool using monaco editor, I've made is as frictionless as possible, kept the UI similar to VS Code.
 
 ## Pending tasks
 
 1. Keyboard shortcuts
 2. Diff editor
 3. Refactor (lot of code repeated, didn't think it through) - make common and reuse components and composables
 4. Sharable diff editor
+5. File icons (feels like a lot of work)
+6. Password protected bins (simple password based middleware)
+
+## Stack
+
+- [Nuxt 3](https://nuxt.com)
+- [Tailwindcss](https://tailwindcss.com)
+- [Nuxt UI](https://ui.nuxt.com)
+- [Turso Database](https://turso.tech)
+- [Monaco editor](https://microsoft.github.io/monaco-editor/)
 
 ## ENV Vars
 

app.vue

@@ -3,7 +3,25 @@
   <NuxtPage />
   <UNotifications />
 </template>
-
+<script setup>
+useSeoMeta({
+  ogTitle: 'Codeshare - Pastebin for developers',
+  description: 'Codeshare allows you to share code with other developers. Create and share code snippets without signing up.',
+  ogDescription: 'Codeshare allows you to share code with other developers. Create and share code snippets without signing up.',
+  ogImage: 'https://codeshare.app/social-card.png',
+  ogImageWidth: "1600",
+  ogImageHeight: "900",
+  ogUrl: 'https://codeshare.app',
+  ogImageType: 'image/png',
+  ogImageAlt: 'Image describing Codeshare.apps functionality, a code editor with syntax highlighting and its features.',
+  twitterTitle: 'Codeshare - Pastebin for developers',
+  ogType: 'website',
+  ogLocale: 'en_US',
+  twitterDescription: 'Codeshare allows you to share code with other developers. Create and share code snippets without signing up.',
+  twitterCard: 'summary_large_image',
+  themeColor: '#111827',
+})
+</script>
 <style>
 html,
 body {

components/App/Navbar/index.vue

@@ -10,13 +10,14 @@
     <UInput
       v-if="publishEnabled"
       v-model="snippet.title"
-      placeholder="file.txt"
+      placeholder="untitled.txt"
       size="2xs"
     />
+    <span v-else class="text-xs">{{ title }}</span>
     <div
       class="border-l divide-x divide-white/10 border-white/10 flex items-center"
     >
-      <UTooltip text="Download file">
+      <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>
@@ -47,6 +48,10 @@ defineProps({
     type: Boolean,
     required: true,
   },
+  title: {
+    type: String,
+    required: true,
+  },
 });
 const { snippet } = useEditor();
 </script>

composables/editor.js

@@ -13,7 +13,7 @@ export const useEditor = () => {
     autoSurround: "languageDefined",
     scrollBeyondLastLine: false,
     fontLigatures: true,
-    fontFamily: "Cascadia Code",
+    fontFamily: "Cascadia Code, Fira Code, monospace",
     minimap: {
       enabled: false,
     },
@@ -89,7 +89,7 @@ export const useEditor = () => {
   const confirmPublish = async () => {
     try {
       loading.value = true;
-      confirmationModal.value = false;
+      
       const data = await $fetch("/api/codebin", {
         method: "POST",
         body: snippet.value,
@@ -104,19 +104,34 @@ export const useEditor = () => {
         icon: "i-heroicons-check-circle",
       });
       copy(`${window.location.origin}/${data.uid}`);
+      confirmationModal.value = false;
       navigateTo(`/${data.uid}`);
     } catch (error) {
+      loading.value = false;
       toast.add({
         title: "Error",
         description: error.message,
         color: "red",
         icon: "i-heroicons-x-circle",
       });
-    } finally {
-      loading.value = false;
     }
   };
 
+  const downloadSnippet = () => {
+    const blob = new Blob([snippet.value.body], {
+      type: "text/plain;charset=utf-8",
+    });
+    saveAs(blob, snippet.value.title || "untitled.txt");
+  }
+
+  function saveAs(blob, fileName) {
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = fileName;
+    link.click();
+    link.remove();
+  }
+
   return {
     MONACO_EDITOR_OPTIONS,
     selectedLanguage,
@@ -135,5 +150,6 @@ export const useEditor = () => {
     publishSnippet,
     confirmPublish,
     copySnippet,
+    downloadSnippet
   };
 };

nuxt.config.ts

@@ -7,10 +7,16 @@ export default defineNuxtConfig({
     "@nuxtjs/google-fonts",
     "@nuxtjs/fontaine",
     "@vueuse/nuxt",
+    "nuxt-security"
   ],
   ui: {
     icons: ["heroicons", "lucide"],
   },
+  security: {
+    headers: {
+      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',
+    },
+  },
   colorMode: {
     preference: "dark",
   },

package.json

@@ -19,6 +19,7 @@
     "drizzle-kit": "^0.20.13",
     "nuxt": "^3.9.1",
     "nuxt-icon": "^0.6.8",
+    "nuxt-security": "^1.0.1",
     "vue": "^3.4.13",
     "vue-router": "^4.2.5"
   },

pages/[id].vue

@@ -3,7 +3,9 @@
     <AppNavbar
       @publish="publishSnippet"
       @copy="copySnippet"
+      @download="downloadSnippet"
       :publish-enabled="false"
+      :title="snippet.title"
     />
     <div class="flex-1 flex">
       <AppSidebar />
@@ -119,6 +121,7 @@ const {
   publishSnippet,
   confirmPublish,
   copySnippet,
+  downloadSnippet,
 } = useEditor();
 const route = useRoute();
 const { data: snippet } = await useFetch(`/api/codebin/${route.params.id}`);

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="h-screen flex flex-col text-white">
-    <AppNavbar @publish="publishSnippet" @copy="copySnippet" publishEnabled />
+    <AppNavbar @publish="publishSnippet" @copy="copySnippet" @download="downloadSnippet" publishEnabled />
     <div class="flex-1 flex">
       <AppSidebar />
       <ClientOnly>
@@ -125,6 +125,7 @@ const {
   publishSnippet,
   confirmPublish,
   copySnippet,
+  downloadSnippet
 } = useEditor();
 
 useHead({