chore: bump deps and improve docs

BayBreezy · Oct 21, 2024 · 86b9a2b · 86b9a2b
1 parent 268a25a
commit 86b9a2b
Show file tree

Hide file tree

Showing 25 changed files with 9,196 additions and 4,282 deletions.
diff --git a/.automdrc b/.automdrc
@@ -0,0 +1 @@
+watch=true
diff --git a/.nuxtrc b/.nuxtrc
@@ -1,2 +1,2 @@
-imports.autoImport=false
+imports.autoImport=true
 typescript.includeWorkspace=true
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Behon Baker.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,32 +1,67 @@
-<img src="./unlayer.png" style="height: 70px;"/>
+# <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/People%20with%20professions/Artist%20Medium%20Skin%20Tone.png" alt="Artist Medium Skin Tone" width="35" height="35" /> Nuxt Unlayer
 
-# Nuxt Unlayer
+<!-- automd:badges color="green" license github="baybreezy/nuxt-unlayer" provider="shields" name="nuxt-unlayer" codecov packagephobia -->
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
+[![npm version](https://img.shields.io/npm/v/nuxt-unlayer?color=green)](https://npmjs.com/package/nuxt-unlayer)
+[![npm downloads](https://img.shields.io/npm/dm/nuxt-unlayer?color=green)](https://npm.chart.dev/nuxt-unlayer)
+[![codecov](https://img.shields.io/codecov/c/gh/baybreezy/nuxt-unlayer?color=green)](https://codecov.io/gh/baybreezy/nuxt-unlayer)
+[![license](https://img.shields.io/github/license/baybreezy/nuxt-unlayer?color=green)](https://github.com/baybreezy/nuxt-unlayer/blob/main/LICENSE)
 
-![Demo Image](./screenshot.png)
+<!-- /automd -->
 
-> Add the [Unlayer Editor](https://docs.unlayer.com/docs) to your [Nuxt](https://nuxt.com) app easily.
+![Demo Image](./playground/public/image.jpg)
 
-## Demo
+- [ Nuxt Unlayer](#-nuxt-unlayer)
+  - [ Demo](#-demo)
+  - [ Quick Setup](#-quick-setup)
+  - [ Full Example](#-full-example)
+  - [ Screenshot](#-screenshot)
+  - [Development](#development)
+  - [Contributors](#contributors)
+
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Roller%20Coaster.png" alt="Roller Coaster" width="25" height="25" /> Demo
 
 The Demo is available at [Nuxt Unlayer Playground](https://nuxt-unlayer.behonbaker.com/)
 
-## Quick Setup
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Milky%20Way.png" alt="Milky Way" width="25" height="25" /> Quick Setup
 
 1. Add `nuxt-unlayer` dependency to your project
 
-```bash
-# Using yarn
-yarn add --dev nuxt-unlayer
+<!-- automd:pm-install name="nuxt-unlayer" separate -->
+
+```sh
+# ✨ Auto-detect
+npx nypm install nuxt-unlayer
+```
 
-# Using npm
-npm install --save-dev nuxt-unlayer
+```sh
+# npm
+npm install nuxt-unlayer
 ```
 
-2. Add `nuxt-unlayer` to the `modules` section of `nuxt.config.ts`
+```sh
+# yarn
+yarn add nuxt-unlayer
+```
+
+```sh
+# pnpm
+pnpm install nuxt-unlayer
+```
+
+```sh
+# bun
+bun install nuxt-unlayer
+```
+
+```sh
+# deno
+deno install nuxt-unlayer
+```
+
+<!-- /automd -->
+
+1. Add `nuxt-unlayer` to the `modules` section of `nuxt.config.ts`
 
 ```js
 export default defineNuxtConfig({
@@ -36,92 +71,146 @@ export default defineNuxtConfig({
 
 That's it! You can now use Nuxt Unlayer in your Nuxt app ✨
 
-## Full Example
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" alt="Rocket" width="25" height="25" /> Full Example
 
 <details>
 <summary>Full Example</summary>
 
-```vue
+<!-- automd:file src="./playground/app/app.vue" lang="vue" code -->
+
+```vue [app.vue]
 <template>
   <main class="main">
-    <header class="header">
-      <h1>Nuxt Unlayer</h1>
-      <div v-if="editor" class="nav">
-        <button @click="exportHTML">Export HTML</button>
-        <button @click="hiddenFile.click()">Import Design</button>
-        <button @click="saveDesign" class="btn">Save Design</button>
+    <UiNavbar sticky>
+      <div class="flex h-16 max-w-screen-2xl items-center justify-between px-5">
+        <h1 class="text-lg font-semibold tracking-tight">Nuxt Unlayer</h1>
+        <div v-if="editor" class="flex items-center gap-2">
+          <UiButton variant="outline" size="sm" @click="exportHTML">Export HTML</UiButton>
+          <UiButton variant="outline" @click="hiddenFile.click()">Import Design</UiButton>
+          <UiButton class="btn" @click="saveDesign">Save Design</UiButton>
+        </div>
       </div>
-    </header>
-    <section class="editor">
+    </UiNavbar>
+    <section class="h-[calc(100dvh-65px)]">
       <ClientOnly>
-        <EmailEditor @ready="editorLoaded" />
+        <EmailEditor
+          display-mode="email"
+          :appearance="{
+            theme: 'dark',
+          }"
+          @ready="editorLoaded"
+        />
       </ClientOnly>
     </section>
   </main>
-  <input
-    @change="importDesign"
-    type="file"
-    hidden
-    ref="hiddenFile"
-    accept=".json"
-  />
+  <!-- eslint-disable-next-line vue/html-self-closing -->
+  <input ref="hiddenFile" type="file" hidden accept=".json" @change="importDesign" />
+  <UiVueSonner />
 </template>
 
 <script setup lang="ts">
-import { useHead, shallowRef, ref } from "#imports";
-import sample from "@/sample.json";
-import { type EditorInstance } from "#unlayer/props";
-
-useHead({ title: "Nuxt - Unlayer" });
+  import sample from "@@/sample.json";
+  import type { EditorInstance } from "#unlayer/props";
 
-const editor = shallowRef<EditorInstance | null | undefined>();
-const hiddenFile = ref();
+  useHead({ title: "Nuxt - Unlayer" });
+  const colorMode = useColorMode();
 
-const editorLoaded = (value: any) => {
-  console.log("🚀 ~ file: app.vue:23 ~ editorLoaded ~ value", value);
-  editor.value = value;
+  const editor = shallowRef<EditorInstance | null | undefined>();
+  const hiddenFile = ref();
 
-  // load up design after the editor gets loaded
-  editor.value?.loadDesign(JSON.parse(JSON.stringify(sample)));
-};
+  const editorLoaded = (value: any) => {
+    console.log("🚀 ~ file: app.vue:23 ~ editorLoaded ~ value", value);
+    editor.value = value;
 
-const saveDesign = () => {
-  editor.value?.saveDesign((design: any) => {
-    console.log(
-      "🚀 ~ file: app.vue:31 ~ editor.value.saveDesign ~ design",
-      design
-    );
-  });
-};
+    // load up design after the editor gets loaded
+    editor.value?.loadDesign(JSON.parse(JSON.stringify(sample)));
+    useSonner.success("Editor Loaded", {
+      duration: 2000,
+      description: "You can now start designing your email template",
+    });
+  };
 
-const importDesign = (e: any) => {
-  if (!e) return;
-  const file = e.target.files[0];
-  if (!file.type.includes("json")) return;
-  const reader = new FileReader();
+  const saveDesign = () => {
+    editor.value?.saveDesign((design: any) => {
+      useSonner.success("Design Saved", {
+        duration: 2000,
+        description:
+          "Your design has been saved successfully. CHeck the console for the design object",
+      });
+      console.log("🚀 ~ file: app.vue:31 ~ editor.value.saveDesign ~ design", design);
+    });
+  };
 
-  reader.onload = function (readVal) {
-    //@ts-ignore
-    editor.value?.loadDesign(JSON.parse(readVal.target?.result));
+  const importDesign = (e: any) => {
+    if (!e) return;
+    const file = e.target.files[0];
+    if (!file.type.includes("json")) return;
+    const reader = new FileReader();
+
+    reader.onload = function (readVal) {
+      const result = readVal.target?.result;
+      if (typeof result === "string") {
+        editor.value?.loadDesign(JSON.parse(result));
+        useSonner.success("Design Imported", {
+          duration: 2000,
+          description: "Your design has been imported successfully",
+        });
+      }
+    };
+    reader.readAsText(file);
+  };
+  const exportHTML = () => {
+    editor.value?.exportHtml((data: any) => {
+      const json = data.design; // design json
+      console.log("🚀 ~ file: app.vue:40 ~ editor.value.exportHtml ~ json", json);
+      const html = data.html; // final html
+      console.log("🚀 ~ file: app.vue:42 ~ editor.value.exportHtml ~ html", html);
+      useSonner.success("HTML Exported", {
+        duration: 2000,
+        description: "Your design has been exported successfully. Check the console for the HTML",
+      });
+    });
   };
-  reader.readAsText(file);
-};
-const exportHTML = () => {
-  editor.value?.exportHtml((data: any) => {
-    const json = data.design; // design json
-    console.log("🚀 ~ file: app.vue:40 ~ editor.value.exportHtml ~ json", json);
-    const html = data.html; // final html
-    console.log("🚀 ~ file: app.vue:42 ~ editor.value.exportHtml ~ html", html);
+
+  const title = "Nuxt Unlayer";
+  const description = "Easily add unlayer to your Nuxt application";
+  const image = "/image.jpg";
+  const url = "https://nuxt-unlayer.behonbaker.com";
+  useSeoMeta({
+    description,
+    ogTitle: title,
+    ogDescription: description,
+    ogImage: image,
+    twitterTitle: title,
+    ogUrl: url,
+    twitterDescription: description,
+    twitterImage: image,
+    twitterCard: "summary_large_image",
+  });
+
+  useHead({
+    htmlAttrs: {
+      lang: "en",
+    },
+    link: [
+      {
+        rel: "icon",
+        type: "image/png",
+        href: "/UnlayerIcon.png",
+      },
+    ],
   });
-};
 </script>
+
 ```
 
+<!-- /automd -->
+
 </details>
 
-## Screenshot of playground
+## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Camera%20with%20Flash.png" alt="Camera with Flash" width="25" height="25" /> Screenshot
 
-<img src="./screenshot.png" style=""/>
+<img src="./playground/public/image.jpg" style=""/>
 
 ## Development
 
@@ -149,11 +238,19 @@ npm run test:watch
 npm run release
 ```
 
-<!-- Badges -->
+## Contributors
+
+Published under the [MIT](https://github.com/baybreezy/nuxt-unlayer/blob/main/LICENSE) license.
+Made by [@BayBreezy](https://github.com/BayBreezy) with ❤️
+
+<a href="https://github.com/baybreezy/nuxt-unlayer/graphs/contributors">
+<img src="https://contrib.rocks/image?repo=baybreezy/nuxt-unlayer" />
+</a>
+
+<!-- automd:with-automd lastUpdate -->
+
+---
+
+_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Mon Oct 21 2024)_
 
-[npm-version-src]: https://img.shields.io/npm/v/nuxt-unlayer/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/nuxt-unlayer
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-unlayer.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/nuxt-unlayer
-[license-src]: https://img.shields.io/npm/l/nuxt-unlayer.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/nuxt-unlayer
+<!-- /automd -->
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -4,9 +4,15 @@ export default createConfigForNuxt({
   features: {
     tooling: true,
   },
-}).override("nuxt/typescript/rules", {
-  rules: {
-    "@typescript-eslint/no-explicit-any": "off",
-  },
-  ignores: ["dist", "node_modules"],
-});
+})
+  .override("nuxt/typescript/rules", {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+    ignores: ["dist", "node_modules"],
+  })
+  .override("nuxt", {
+    rules: {
+      "vue/require-default-prop": "off",
+    },
+  });