feat: add welcome page

src/background/index.js

@@ -128,7 +128,7 @@ chrome.runtime.onInstalled.addListener((details) => {
         browser.tabs
           .create({
             active: true,
-            url: browser.runtime.getURL('newtab.html#/workflows'),
+            url: browser.runtime.getURL('newtab.html#/welcome'),
           })
           .catch((error) => {
             console.error(error);

src/components/newtab/app/AppSidebar.vue

@@ -76,7 +76,7 @@ const links = [
   },
   {
     name: t('common.docs', 2),
-    icon: 'riBookOpenLine',
+    icon: 'riBook3Line',
     url: 'https://docs.automa.site',
   },
   {

src/lib/v-remixicon.js

@@ -14,7 +14,7 @@ import {
   riWindow2Line,
   riArrowUpDownLine,
   riRefreshLine,
-  riBookOpenLine,
+  riBook3Line,
   riGithubFill,
   riCodeSSlashLine,
   riRecordCircleLine,
@@ -94,7 +94,7 @@ export const icons = {
   riWindow2Line,
   riArrowUpDownLine,
   riRefreshLine,
-  riBookOpenLine,
+  riBook3Line,
   riGithubFill,
   riCodeSSlashLine,
   riRecordCircleLine,

src/locales/en/newtab.json

@@ -2,6 +2,11 @@
   "home": {
     "viewAll": "View all"
   },
+  "welcome": {
+    "title": "Welcome to Automa! 🎉",
+    "text": "Get started by reading the documentation or browsing workflows in the Automa Marketplace.",
+    "marketplace": "Marketplace"
+  },
   "updateMessage": {
     "text1": "Automa has been updated to v{version},",
     "text2": "see what's new."

src/newtab/pages/Welcome.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="py-16 max-w-xl mx-auto">
+    <h1 class="font-semibold text-4xl mb-8">
+      {{ t('welcome.title') }}
+    </h1>
+    <p class="text-lg">
+      {{ t('welcome.text') }}
+    </p>
+    <div class="mt-8 space-x-2 flex items-center">
+      <ui-button
+        tag="a"
+        href="https://docs.automa.site"
+        target="_blank"
+        rel="noopener"
+      >
+        <v-remixicon name="riBook3Line" class="-ml-1 mr-2" />
+        {{ t('common.docs') }}
+      </ui-button>
+      <ui-button
+        tag="a"
+        href="https://automa.site/workflows"
+        target="_blank"
+        rel="noopener"
+      >
+        <v-remixicon name="riCompass3Line" class="-ml-1 mr-2" />
+        {{ t('welcome.marketplace') }}
+      </ui-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>

src/newtab/router.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from './pages/Home.vue';
+import Welcome from './pages/Welcome.vue';
 import Workflows from './pages/Workflows.vue';
 import WorkflowDetails from './pages/workflows/[id].vue';
 import Collections from './pages/Collections.vue';
@@ -15,6 +16,11 @@ const routes = [
     path: '/',
     component: Home,
   },
+  {
+    name: 'welcome',
+    path: '/welcome',
+    component: Welcome,
+  },
   {
     name: 'workflows',
     path: '/workflows',