v0.15.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "0.15.0",
+  "version": "0.15.4",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {

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/background/workflow-engine/blocks-handler/handler-loop-data.js

@@ -6,18 +6,22 @@ function loopData(block) {
     const nextBlockId = getBlockConnection(block);
 
     if (this.loopList[data.loopId]) {
-      this.loopList[data.loopId].index += 1;
+      const index = this.loopList[data.loopId].index + 1;
+
+      this.loopList[data.loopId].index = index;
 
       let currentLoopData;
 
       if (data.loopThrough === 'numbers') {
         currentLoopData = this.referenceData.loopData[data.loopId] + 1;
       } else {
-        currentLoopData =
-          this.loopList[data.loopId].data[this.loopList[data.loopId].index];
+        currentLoopData = this.loopList[data.loopId].data[index];
       }
 
-      this.referenceData.loopData[data.loopId] = currentLoopData;
+      this.referenceData.loopData[data.loopId] = {
+        data: currentLoopData,
+        $index: index,
+      };
     } else {
       let currLoopData;
 
@@ -57,7 +61,11 @@ function loopData(block) {
             : data.maxLoop || currLoopData.length,
       };
       /* eslint-disable-next-line */
-      this.referenceData.loopData[data.loopId] = data.loopThrough === 'numbers' ? data.fromNumber : currLoopData[0];
+      this.referenceData.loopData[data.loopId] = {
+        data:
+          data.loopThrough === 'numbers' ? data.fromNumber : currLoopData[0],
+        $index: 0,
+      };
     }
 
     resolve({

src/components/newtab/app/AppSidebar.vue

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

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -74,20 +74,19 @@
             )
           "
           draggable="true"
-          class="transform select-none cursor-move relative p-4 rounded-lg bg-input transition"
+          class="transform select-none cursor-move relative p-4 rounded-lg bg-input transition group"
           @dragstart="
             $event.dataTransfer.setData('block', JSON.stringify(block))
           "
         >
           <a
-            v-if="block.docs"
-            :href="`https://github.com/Kholid060/automa/wiki/Blocks#${block.id}`"
-            target="_blank"
+            :href="`https://docs.automa.site/blocks/${block.id}.html`"
             :title="t('common.docs')"
+            target="_blank"
             rel="noopener"
-            class="absolute top-px right-2"
+            class="absolute top-px right-2 top-2 text-gray-600 invisible group-hover:visible"
           >
-            &#128712;
+            <v-remixicon name="riInformationLine" size="18" />
           </a>
           <v-remixicon :name="block.icon" size="24" class="mb-2" />
           <p class="leading-tight text-overflow">

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="px-4 overflow-auto scroll pb-1">
-    <div class="sticky top-0 z-20 bg-white border-b border-gray-100 pb-4 mb-4">
-      <button class="mr-2 align-middle" @click="$emit('close')">
+    <div
+      class="sticky top-0 z-20 bg-white border-b border-gray-100 pb-4 mb-4 flex items-center"
+    >
+      <button class="mr-2" @click="$emit('close')">
         <v-remixicon name="riArrowLeftLine" />
       </button>
-      <p class="font-semibold inline-block align-middle">
+      <p class="font-semibold inline-block flex-1">
         {{ t(`workflow.blocks.${data.id}.name`) }}
       </p>
+      <a
+        :title="t('common.docs')"
+        :href="`https://docs.automa.site/blocks/${data.id}.html`"
+        rel="noopener"
+        target="_blank"
+      >
+        <v-remixicon name="riInformationLine" />
+      </a>
     </div>
     <component
       :is="data.editComponent"

src/components/newtab/workflow/WorkflowGlobalData.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="global-data">
     <a
-      href="https://github.com/Kholid060/automa/wiki/Features#reference-data"
+      href="https://docs.automa.site/api-reference/reference-data.html"
       target="_blank"
       rel="noopener"
       class="inline-block text-primary"

src/components/newtab/workflow/edit/EditGoogleSheets.vue

@@ -27,7 +27,7 @@
       <template #label>
         {{ t('workflow.blocks.google-sheets.spreadsheetId.label') }}
         <a
-          href="https://github.com/Kholid060/automa/wiki/Blocks#spreadsheet-id"
+          href="https://docs.automa.site/blocks/google-sheets.html#spreadsheet-id"
           target="_blank"
           rel="noopener"
           :title="t('workflow.blocks.google-sheets.spreadsheetId.link')"
@@ -45,7 +45,7 @@
       <template #label>
         {{ t('workflow.blocks.google-sheets.range.label') }}
         <a
-          href="https://github.com/Kholid060/automa/wiki/Blocks#range"
+          href="https://docs.automa.site/blocks/google-sheets.html#range"
           target="_blank"
           rel="noopener"
           :title="t('workflow.blocks.google-sheets.range.link')"

src/components/newtab/workflow/edit/EditJavascriptCode.vue

@@ -51,7 +51,7 @@
             <a
               v-for="func in availableFuncs"
               :key="func.id"
-              :href="`https://github.com/Kholid060/automa/wiki/Blocks#${func.id}`"
+              :href="`https://docs.automa.site/blocks/javascript-code.html#${func.id}`"
               target="_blank"
               rel="noopener"
               class="inline-block"
@@ -108,8 +108,8 @@ const emit = defineEmits(['update:data']);
 const { t } = useI18n();
 
 const availableFuncs = [
-  { name: 'automaNextBlock(data)', id: 'automanextblockdata' },
-  { name: 'automaRefData(keyword, path)', id: 'automarefdatakeyword-path' },
+  { name: 'automaNextBlock(data)', id: 'automanextblock-data' },
+  { name: 'automaRefData(keyword, path)', id: 'automarefdata-keyword-path' },
   { name: 'automaResetTimeout', id: 'automaresettimeout' },
 ];
 
@@ -159,7 +159,7 @@ function automaFuncsCompletion(context) {
             <code>automaNextBlock(<i>data</i>)</code>
             <p class="mt-2">
               Execute the next block
-              <a href="https://github.com/Kholid060/automa/wiki/Blocks#automanextblockdata" target="_blank" class="underline">
+              <a href="https://docs.automa.site/blocks/javascript-code.html#automanextblock-data" target="_blank" class="underline">
                 Read more
               </a>
             </p>
@@ -179,7 +179,7 @@ function automaFuncsCompletion(context) {
             <code>automaRefData(<i>keyword</i>, <i>path</i>)</code>
             <p class="mt-2">
               Use this function to
-              <a href="https://github.com/Kholid060/automa/wiki/Features#reference-data" target="_blank" class="underline">
+              <a href="https://docs.automa.site/api-reference/reference-data.html" target="_blank" class="underline">
                 reference data
               </a>
             </p>

src/components/newtab/workflow/edit/EditNewTab.vue

@@ -15,7 +15,7 @@
       @change="updateData({ url: $event })"
     />
     <a
-      href="https://github.com/Kholid060/automa/wiki/Features#reference-data"
+      href="https://docs.automa.site/api-reference/reference-data.html"
       rel="noopener"
       class="text-primary inline-block text-sm"
       target="_blank"

src/components/newtab/workflow/edit/EditWebhook.vue

@@ -95,7 +95,7 @@
       />
       <div class="mt-3">
         <a
-          href="https://github.com/Kholid060/automa/wiki/Features#reference-data"
+          href="https://docs.automa.site/api-reference/reference-data.html"
           rel="noopener"
           class="border-b text-primary"
           target="_blank"

src/content/services/web-service.js

@@ -25,7 +25,7 @@ function initWebListener() {
 
 async function listenWindowMessage(workflows) {
   try {
-    if (secrets?.webOrigin !== window.location.origin) return;
+    if (secrets?.webOrigin.includes(window.location.origin)) return;
 
     const db = await openDB('automa', 1, {
       upgrade(event) {

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/blocks.json

@@ -107,8 +107,8 @@
           "link": "Click to see more example"
         },
         "select": {
-          "get": "Get spreadsheet data",
-          "update": "Update spreadsheet data"
+          "get": "Get spreadsheet cell values",
+          "update": "Update spreadsheet cell values"
         }
       },
       "active-tab": {

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/App.vue

@@ -6,7 +6,7 @@
     </main>
     <ui-dialog />
     <div
-      v-if="isUpdated"
+      v-if="false"
       class="p-4 shadow-2xl z-50 fixed bottom-8 left-1/2 -translate-x-1/2 rounded-lg bg-accent text-white flex items-center"
     >
       <v-remixicon name="riInformationLine" class="mr-3" />

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/pages/Workflows.vue

@@ -31,7 +31,7 @@
       </div>
       <ui-button
         tag="a"
-        href="https://automa.vercel.app/workflows"
+        href="https://automa.site/workflows"
         target="_blank"
         class="inline-block relative"
         @click="browseWorkflow"

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',

src/utils/reference-data/key-parser.js

@@ -11,7 +11,16 @@ export default function (key) {
 
   dataKey = objectHasKey(refKeys, dataKey) ? refKeys[dataKey] : dataKey;
 
-  if (dataKey !== 'dataColumns') return { dataKey, path: path || '' };
+  if (dataKey !== 'dataColumns') {
+    if (dataKey === 'loopData' && !path.endsWith('.$index')) {
+      const pathArr = path.split('.');
+      pathArr.splice(1, 0, 'data');
+
+      path = pathArr.join('.');
+    }
+
+    return { dataKey, path: path || '' };
+  }
 
   const pathArr = path?.split('.') ?? [];
   let dataPath = path;