Playground

website/docs/getting_started/event-model.mdx

@@ -70,8 +70,8 @@ static, their content can be defined dynamically with different value types.
     // All nested entities within the main entity
     { type: 'github', data: { repo: 'walkerOS' } },
   ],
-  consent: { functional: true }, // Status of the granted consent state(s)
-  id: '1647261462000-01b5e2-5', // Timestamp, group & count of the event
+  consent: { functional: true, marketing: true }, // Status of the granted consent state(s)
+  id: '1647261462000-01b5e2-2', // Timestamp, group & count of the event
   trigger: 'visible', // Name of the trigger that fired
   entity: 'promotion', // The entity name involved in the event
   action: 'view', // The specific action performed on the entity
@@ -120,20 +120,21 @@ is a `page view`, `session start`, `product visible`, or `order complete`.
 
 <Link to="/docs/sources/walkerjs/tagging#data">Data properties</Link>
 describe the entity in **more detail**. Depending on the entity (e.g. _product_,
-_order_, _content_) they can vary and provide specific insights relevant to the interaction.
+_order_, _content_) they can vary and provide specific insights relevant to the
+interaction.
 
 ### Context
 
-<Link to="/docs/sources/walkerjs/tagging#context">Context</Link> refers to the **state**
-or **environment** in which the event was triggered. It could be as simple as a page
-position or as complex as the logical stage in a user journey, like a shopping journey
-from inspiration to checkout stage.
+<Link to="/docs/sources/walkerjs/tagging#context">Context</Link> refers to the
+**state** or **environment** in which the event was triggered. It could be as
+simple as a page position or as complex as the logical stage in a user journey,
+like a shopping journey from inspiration to checkout stage.
 
 ### Globals
 
-<Link to="/docs/sources/walkerjs/tagging#globals">Globals</Link> describe the **overall
-state** influencing events or user behavior. These might include the theme used,
-page type for web, or cart value.
+<Link to="/docs/sources/walkerjs/tagging#globals">Globals</Link> describe the
+**overall state** influencing events or user behavior. These might include the
+theme used, page type for web, or cart value.
 
 ### Custom
 
@@ -177,9 +178,9 @@ interface User extends Properties {
 
 ### Consent
 
-<Link to="/docs/consent_management/overview">Consent</Link> captures the **permissions
-granted** by the user, which is crucial for subsequent data processing and helpful
-to comply with privacy regulations.
+<Link to="/docs/consent_management/overview">Consent</Link> captures the
+**permissions granted** by the user, which is crucial for subsequent data
+processing and helpful to comply with privacy regulations.
 
 ### Source
 

website/docs/sources/walkerjs/installation/package.mdx

@@ -18,22 +18,43 @@ npm i @elbwalker/walker.js
 Then run the following code once to create an instance:
 
 ```js
-import { Walkerjs } from '@elbwalker/walker.js';
+import { createSourceWalkerjs } from '@elbwalker/walker.js';
 
-window.walkerjs = Walkerjs({
+const { elb, instance } = createSourceWalkerjs({
   /* custom config */
 });
 ```
 
-To configure and communicate with the walker.js instance load the `elb`-helper
-function:
+## elb
+
+To configure and communicate with the walker.js instance asynchronously either
+load the `elb`-helper function:
 
 ```js
 import { elb } from '@elbwalker/walker.js';
+```
+
+Or define the `elb`-helper function yourself:
+
+```ts
+// Typescript
+import type { Elb } from '@elbwalker/walker.js';
+const elb: Elb.Fn = (...args: unknown[]) => {
+  (window.elbLayer = window.elbLayer || []).push(args);
+};
 
-window.elb = elb;
-elb('entity action', data, trigger, context, nested); // push events
-elb('walker <command>', data); // configure walker, see Commands
+// JavaScript
+function elb() {
+  (window.elbLayer = window.elbLayer || []).push(arguments);
+}
+```
+
+or use the `elb` returned from `createSourceWalkerjs` which returns the `async`
+result of the call:
+
+```js
+const { elb } = createSourceWalkerjs();
+await elb('entity action');
 ```
 
 ## Single Page Applications

website/docusaurus.config.ts

@@ -87,9 +87,8 @@ const config: Config = {
           position: 'left',
           label: 'Documentation',
         },
-        { to: '/playground', label: 'Playground', position: 'left' },
+        { to: '/playground/', label: 'Playground', position: 'left' },
         { to: '/services', label: 'Services', position: 'left' },
-        { to: '/blog', label: 'Blog', position: 'left' },
         {
           href: vars.github,
           label: 'GitHub',
@@ -109,7 +108,7 @@ const config: Config = {
             },
             {
               label: 'Playground',
-              to: '/playground',
+              to: '/playground/',
             },
             {
               label: 'walker.js',

website/package.json

@@ -19,16 +19,17 @@
     "@docusaurus/preset-classic": "^3.7.0",
     "@docusaurus/theme-live-codeblock": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
-    "@elbwalker/destination-web-api": "^3.0.3",
-    "@elbwalker/destination-web-google-ads": "^3.0.3",
-    "@elbwalker/destination-web-google-ga4": "^3.1.5",
-    "@elbwalker/destination-web-google-gtm": "^3.0.3",
-    "@elbwalker/destination-web-meta-pixel": "^3.0.3",
-    "@elbwalker/destination-web-piwikpro": "^2.0.3",
-    "@elbwalker/destination-web-plausible": "^4.0.3",
+    "@elbwalker/destination-node-meta": "^2.2.1",
+    "@elbwalker/destination-web-api": "^3.0.4",
+    "@elbwalker/destination-web-google-ads": "^3.0.4",
+    "@elbwalker/destination-web-google-ga4": "^3.1.6",
+    "@elbwalker/destination-web-google-gtm": "^3.0.4",
+    "@elbwalker/destination-web-meta-pixel": "^3.1.0",
+    "@elbwalker/destination-web-piwikpro": "^2.0.4",
+    "@elbwalker/destination-web-plausible": "^4.0.4",
     "@elbwalker/tagger": "^2.1.5",
-    "@elbwalker/utils": "^3.8.1",
-    "@elbwalker/walker.js": "^3.4.1",
+    "@elbwalker/utils": "^3.8.2",
+    "@elbwalker/walker.js": "^3.4.2",
     "@iconify/react": "^5.2.1",
     "@mdx-js/react": "^3.1.0",
     "css-loader": "^7.1.2",
@@ -48,14 +49,14 @@
     "@heroicons/react": "^2.2.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/postcss": "^4.1.6",
     "@tailwindcss/typography": "^0.5.16",
     "autoprefixer": "^10.4.21",
     "clsx": "^2.1.1",
-    "daisyui": "^5.0.14",
+    "daisyui": "^5.0.35",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.3",
+    "tailwindcss": "^4.1.6",
     "typescript": "~5.8.3"
   },
   "browserslist": {

website/src/components/atoms/icons.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+
+interface CheckProps {
+  children: ReactNode;
+}
+
+export function Check({ children }: CheckProps) {
+  return (
+    <span className="text-s mx-1.5 inline-flex items-center rounded-full px-2.5 py-0.5 font-medium">
+      <svg
+        aria-hidden="true"
+        className="h-4 w-4 mr-1"
+        fill="#34d399"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+      {children}
+    </span>
+  );
+} 

website/src/components/home/hero.tsx

@@ -1,51 +1,28 @@
 import React from 'react';
-import { Button } from '../atoms/buttons';
-
-export default function Hero() {
-  const CheckSVG = ({ children }) => (
-    <span className="text-s mx-1.5 inline-flex items-center rounded-full px-2.5 py-0.5 font-medium">
-      <svg
-        aria-hidden="true"
-        className="h-4 w-4 mr-1"
-        fill="#34d399"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-          clipRule="evenodd"
-        ></path>
-      </svg>
-      {children}
-    </span>
-  );
+import Hero from '@site/src/components/organisms/hero';
 
+export default function HomeHero() {
   return (
-    <main className="relative mx-3 mt-16 max-w-7xl sm:mt-24 lg:mx-auto">
-      <div className="text-center	">
-        <h1 className="text-6xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
-          <div className="block text-elbwalker block">walkerOS</div>
-          <div className="block xl:inline text-black dark:text-white">
-            Open-source event data collection
-          </div>
-        </h1>
-        <p className="mx-auto mt-3 text-base sm:text-lg md:mt-5 md:text-xl">
-          Collect event data for digital analytics in a unified and
-          privacy-centric way.
-        </p>
-        <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
-          <Button link="/docs/getting_started/quick_start">Get started</Button>
-          <Button link="/playground" variant="secondary">
-            Playground
-          </Button>
-        </div>
-      </div>
-      <div className="mt-10 text-center">
-        <CheckSVG>runs in your own infrastructure</CheckSVG>
-        <CheckSVG>integrates with various analytics & marketing tools</CheckSVG>
-        <CheckSVG>in-built consent mode</CheckSVG>
-      </div>
-    </main>
+    <Hero
+      title={<div className="block text-elbwalker block">walkerOS</div>}
+      subtitle="Open-source event data collection"
+      text="Collect event data for digital analytics in a unified and privacy-centric way."
+      primaryButton={{
+        link: "/docs/getting_started/quick_start",
+        children: "Get started",
+        elbAction: 'start',
+      }}
+      secondaryButton={{
+        link: "/playground/",
+        children: "Playground",
+        elbAction: 'playground',
+      }}
+      elbTitle="home"
+      badges={[
+        "runs in your own infrastructure",
+        "integrates with various analytics & marketing tools",
+        "in-built consent mode"
+      ]}
+    />
   );
 }

website/src/components/molecules/codeBox.tsx

@@ -1,4 +1,4 @@
-import { WalkerOS } from '@elbwalker/types';
+import type { WalkerOS } from '@elbwalker/types';
 import { isString, isDefined, tryCatch, tryCatchAsync } from '@elbwalker/utils';
 import Editor from 'react-simple-code-editor';
 import { useState, useEffect, useRef } from 'react';
@@ -10,8 +10,8 @@ import {
   TypewriterOptions,
   pauseTypewriter,
   resetTypewriter,
-} from './typewriterCode';
-import SyntaxHighlighter from './syntaxHighlighter';
+} from '@site/src/components/molecules/typewriterCode';
+import SyntaxHighlighter from '@site/src/components/molecules/syntaxHighlighter';
 
 interface FormatValueProps {
   intent?: number;
@@ -132,29 +132,41 @@ const CodeBox: React.FC<CodeBoxProps> = ({
 
   const handleFormat = tryCatchAsync(
     async (value: string, onChangeHandler: (code: string) => void) => {
+      const trimmedValue = value.trim();
+
       // Check if the content is a complete statement
       const isCompleteStatement = /^[a-zA-Z_$][a-zA-Z0-9_$]*\s*=/.test(
-        value.trim(),
+        trimmedValue,
       );
 
       // If it's not a complete statement, wrap it in a return statement
-      const contentToFormat = isCompleteStatement ? value : `return ${value}`;
+      const contentToFormat = isCompleteStatement
+        ? trimmedValue
+        : `return ${trimmedValue}`;
 
       const formattedValue = await prettier.format(contentToFormat, {
-        parser: language === 'html' ? 'html' : 'babel',
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false,
         plugins: [parserBabel, estree],
+        parser: 'babel',
         semi: false,
         singleQuote: true,
         trailingComma: 'es5',
-        printWidth: 80,
-        tabWidth: 2,
-        useTabs: false,
       });
 
-      const finalValue = isCompleteStatement
+      let finalValue = isCompleteStatement
         ? formattedValue
         : formattedValue.replace(/^return\s+/, '').replace(/[\r\n]+$/, '');
 
+      // Clean up the formatted value
+      finalValue = finalValue.trim().replace(/^\(|\)$/g, ''); // Remove parentheses
+
+      // Only remove indentation if it looks like HTML
+      if (finalValue.match(/<[^>]+>/)) {
+        finalValue = finalValue.replace(/^\s{2}/gm, '').replace(/^\s/, '');
+      }
+
       onChangeHandler?.(finalValue);
     },
   );