feat(kno-12274): add guides in vue.js tutorial

components/ui/Callout.tsx

@@ -9,7 +9,8 @@ type CalloutType =
   | "alert"
   | "enterprise"
   | "beta"
-  | "roadmap";
+  | "roadmap"
+  | "community_sourced";
 
 const TYPE_CONFIG: Record<
   CalloutType,
@@ -24,6 +25,26 @@ const TYPE_CONFIG: Record<
   enterprise: { emoji: "🏢", bgColor: "blue" },
   beta: { emoji: "🚧", bgColor: "yellow" },
   roadmap: { emoji: "🛣", bgColor: "default" },
+  community_sourced: { emoji: "🤝", bgColor: "default" },
+};
+
+const COMMUNITY_SOURCED = {
+  title: "Community-sourced.",
+  text: (
+    <>
+      This tutorial is based on a real Knock implementation and may reflect
+      preferences of the original developer. If you spot something that could be
+      improved, we welcome{" "}
+      <a href="https://github.com/knocklabs/docs/" target="_blank">
+        contributions
+      </a>
+      . Join our{" "}
+      <a href="https://knock.app/join-slack" target="_blank">
+        community Slack
+      </a>{" "}
+      to discuss this implementation or share your own.
+    </>
+  ),
 };
 
 export const Callout = ({
@@ -60,6 +81,17 @@ export const Callout = ({
     ? TYPE_CONFIG[effectiveType]?.bgColor ?? customBgColor ?? "default"
     : customBgColor || "default";
 
+  const effectiveTitle =
+    title ??
+    (effectiveType === "community_sourced"
+      ? COMMUNITY_SOURCED.title
+      : undefined);
+  const effectiveText =
+    text ??
+    (effectiveType === "community_sourced"
+      ? COMMUNITY_SOURCED.text
+      : undefined);
+
   // Ensure emoji is always a string
   const emojiString = typeof emoji === "string" ? emoji : String(emoji || "💡");
   const centeredProps: TgphComponentProps<typeof Stack> = isCentered
@@ -119,17 +151,17 @@ export const Callout = ({
         py="1"
         style={{ marginBottom: "0px", color: "var(--tgph-gray-12)" }}
       >
-        {title && (
+        {effectiveTitle && (
           <Text
             as="span"
             size="2"
             weight="semi-bold"
             style={{ color: "var(--tgph-gray-12)" }}
           >
-            {title}{" "}
+            {effectiveTitle}{" "}
           </Text>
         )}
-        {text && text}
+        {effectiveText && effectiveText}
       </Text>
     </Stack>
   );

components/ui/CodeBlock.tsx

@@ -47,6 +47,7 @@ SyntaxHighlighter.registerLanguage("swift", swift);
 SyntaxHighlighter.registerLanguage("kotlin", kotlin);
 SyntaxHighlighter.registerLanguage("xml", xml);
 SyntaxHighlighter.registerLanguage("mjml", xml);
+SyntaxHighlighter.registerLanguage("vue", xml);
 
 export type SupportedLanguage =
   | "javascript"

content/concepts/channels.mdx

@@ -10,7 +10,8 @@ A channel in Knock represents a configured provider to send notifications to you
 Within Knock, we split channels into different types, where each type has at least one provider associated that can be configured:
 
 - [Email](/integrations/email/overview) (such as Sendgrid, Postmark)
-- [In-app](/integrations/in-app/overview) (such as feeds, toasts, banners)
+- [In-app](/integrations/in-app/overview) (such as feeds and toasts)
+- [In-app guide](/in-app-ui/guides/overview) (such as banners, modals, and other in-product messaging)
 - [Push](/integrations/push/overview) (such as APNs, FCM)
 - [SMS](/integrations/sms/overview) (such as Twilio, Telnyx)
 - [Chat](/integrations/chat/overview) (such as Slack, Microsoft Teams, and Discord)

content/in-app-ui/guides/render-guides.mdx

@@ -7,6 +7,14 @@ section: Building in-app UI > Guides
 
 Once you've [created a guide](/in-app-ui/guides/create-guides), you'll need to render it in your product using the [guides API](/api-reference/users/guides/). This involves fetching the guide data from Knock and displaying it to your users based on their eligibility. You can render guides using Knock's client-side SDKs, which provide built-in state management and helper methods, or by directly calling the [guides API](/api-reference/users/guides) to build a custom implementation. Below we cover both approaches and how to filter guides to show the right content to your users.
 
+## Guide identifiers
+
+There are three identifiers you'll work with when implementing guides:
+
+- **Guide channel ID.** Guides are delivered through a dedicated channel called "In-app guide". You can find your guide channel ID under [Channels and sources](/integrations/overview) in your Knock dashboard. You'll use this UUID to initialize the guides provider in your client SDK or to call the [guides API](/api-reference/users/guides/) directly.
+- **Guide key.** The `key` is a unique identifier for a specific guide instance, set when [creating the guide](/in-app-ui/guides/create-guides). E.g., `subscription-expiration-banner` or `spring-promo-modal`.
+- **Guide type.** The `type` of a guide corresponds to the key of its [message type](/in-app-ui/message-types), selected when creating the guide. E.g., `banner` or `custom-modal`.
+
 ## Fetching guides
 
 There are two ways to fetch and render guides: using Knock's client-side SDKs, which provide built-in state management and helper methods, or by directly calling the [guides API](/api-reference/users/guides) to build a custom implementation. Our [step-by-step React example](/in-app-ui/react/headless/guide) demonstrates how to incorporate the SDK's guide provider into your application and render guide components to your users.
@@ -51,6 +59,8 @@ Knock exposes a set of client SDKs that provide helpers and logic to make it eas
   ]}
 />
 
+For a step-by-step example of how to implement guides with the JavaScript SDK in a Vue.js application, see the [Guides in Vue.js](/tutorials/guides-in-vue) tutorial.
+
 #### Key SDK resources
 
 When working with Knock's SDKs to fetch and render guides, you'll use the following components and hooks for React:

content/integrations/overview.mdx

@@ -34,7 +34,8 @@ You can use Knock to power sophisticated cross-channel notification workflows fo
 We support the following channel types today:
 
 - [Email](/integrations/email/overview) (such as Sendgrid, Postmark)
-- [In-app](/integrations/in-app/overview) (such as feeds, toasts, banners)
+- [In-app](/integrations/in-app/overview) (such as feeds and toasts)
+- [In-app guide](/in-app-ui/guides/overview) (such as banners, modals, and other in-product messaging)
 - [Push](/integrations/push/overview) (such as APNs, FCM)
 - [SMS](/integrations/sms/overview) (such as Twilio, Telnyx)
 - [Chat](/integrations/chat/overview) (such as Slack, Microsoft Teams, and Discord)