feat: Add frameworks to onboarding part 3

frontend/src/scenes/onboarding/sdks/allSDKs.tsx

@@ -58,6 +58,13 @@ export const allSDKs: SDK[] = [
         image: require('./logos/bubble.svg'),
         docsLink: 'https://posthog.com/docs/libraries/bubble',
     },
+    {
+        name: 'Django',
+        key: SDKKey.DJANGO,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/django.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/django',
+    },
     {
         name: 'Elixir',
         key: SDKKey.ELIXIR,
@@ -180,6 +187,20 @@ export const allSDKs: SDK[] = [
         image: require('./logos/ruby.svg'),
         docsLink: 'https://posthog.com/docs/libraries/ruby',
     },
+    {
+        name: 'Rust',
+        key: SDKKey.RUST,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/rust.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/rust',
+    },
+    {
+        name: 'Svelte',
+        key: SDKKey.SVELTE,
+        tags: [SDKTag.WEB],
+        image: require('./logos/svelte.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/svelte',
+    },
     {
         name: 'Vue.js',
         key: SDKKey.VUE_JS,
@@ -188,11 +209,11 @@ export const allSDKs: SDK[] = [
         docsLink: 'https://posthog.com/docs/libraries/vue-js',
     },
     {
-        name: 'Rust',
-        key: SDKKey.RUST,
-        tags: [SDKTag.SERVER],
-        image: require('./logos/rust.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/rust',
+        name: 'Webflow',
+        key: SDKKey.WEBFLOW,
+        tags: [SDKTag.WEB],
+        image: require('./logos/webflow.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/webflow',
     },
     // integrations
     {

frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx

@@ -6,6 +6,7 @@ import {
     FeatureFlagsAPIInstructions,
     FeatureFlagsAstroInstructions,
     FeatureFlagsBubbleInstructions,
+    FeatureFlagsDjangoInstructions,
     FeatureFlagsFlutterInstructions,
     FeatureFlagsFramerInstructions,
     FeatureFlagsGoInstructions,
@@ -21,6 +22,9 @@ import {
     FeatureFlagsRemixJSInstructions,
     FeatureFlagsRNInstructions,
     FeatureFlagsRubyInstructions,
+    FeatureFlagsSvelteInstructions,
+    FeatureFlagsVueInstructions,
+    FeatureFlagsWebflowInstructions,
 } from '.'
 
 export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
@@ -30,6 +34,7 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.API]: FeatureFlagsAPIInstructions,
     [SDKKey.ASTRO]: FeatureFlagsAstroInstructions,
     [SDKKey.BUBBLE]: FeatureFlagsBubbleInstructions,
+    [SDKKey.DJANGO]: FeatureFlagsDjangoInstructions,
     [SDKKey.FLUTTER]: FeatureFlagsFlutterInstructions,
     [SDKKey.FRAMER]: FeatureFlagsFramerInstructions,
     [SDKKey.GO]: FeatureFlagsGoInstructions,
@@ -44,5 +49,7 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.REACT_NATIVE]: FeatureFlagsRNInstructions,
     [SDKKey.REMIX]: FeatureFlagsRemixJSInstructions,
     [SDKKey.RUBY]: FeatureFlagsRubyInstructions,
-    // add rust, gatsby, nuxt, vue, svelte, and others here
+    [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions,
+    [SDKKey.VUE_JS]: FeatureFlagsVueInstructions,
+    [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions,
 }

frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx

@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallDjangoInstructions } from '../sdk-install-instructions'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallDjangoInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.PYTHON} />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx

@@ -3,6 +3,7 @@ export * from './angular'
 export * from './api'
 export * from './astro'
 export * from './bubble'
+export * from './django'
 export * from './flutter'
 export * from './framer'
 export * from './go'
@@ -18,3 +19,6 @@ export * from './react'
 export * from './react-native'
 export * from './remix'
 export * from './ruby'
+export * from './svelte'
+export * from './vue'
+export * from './webflow'

frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx

@@ -9,7 +9,7 @@ export function FeatureFlagsRemixJSInstructions(): JSX.Element {
         <>
             <SDKInstallRemixJSInstructions />
             <h3>Client-side rendering</h3>
-            <FlagImplementationSnippet sdkKey={SDKKey.REACT} />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
             <h3>Server-side rendering</h3>
             <h4>Install</h4>
             <NodeInstallSnippet />

frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx

@@ -0,0 +1,21 @@
+import { SDKKey } from '~/types'
+
+import { NodeInstallSnippet, NodeSetupSnippet } from '../sdk-install-instructions'
+import { SDKInstallSvelteJSInstructions } from '../sdk-install-instructions/svelte'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsSvelteInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallSvelteJSInstructions />
+            <h3>Client-side rendering</h3>
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+            <h3>Server-side rendering</h3>
+            <h4>Install</h4>
+            <NodeInstallSnippet />
+            <h4>Configure</h4>
+            <NodeSetupSnippet />
+            <FlagImplementationSnippet sdkKey={SDKKey.NODE_JS} />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx

@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsVueInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallVueInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx

@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallWebflowInstructions } from '../sdk-install-instructions/webflow'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsWebflowInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallWebflowInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx

@@ -8,6 +8,7 @@ import {
     ProductAnalyticsAPIInstructions,
     ProductAnalyticsAstroInstructions,
     ProductAnalyticsBubbleInstructions,
+    ProductAnalyticsDjangoInstructions,
     ProductAnalyticsElixirInstructions,
     ProductAnalyticsFlutterInstructions,
     ProductAnalyticsFramerInstructions,
@@ -22,6 +23,9 @@ import {
     ProductAnalyticsRemixJSInstructions,
     ProductAnalyticsRNInstructions,
     ProductAnalyticsRubyInstructions,
+    ProductAnalyticsSvelteJSInstructions,
+    ProductAnalyticsVueInstructions,
+    ProductAnalyticsWebflowInstructions,
 } from '.'
 
 export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
@@ -31,6 +35,7 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.API]: ProductAnalyticsAPIInstructions,
     [SDKKey.ASTRO]: ProductAnalyticsAstroInstructions,
     [SDKKey.BUBBLE]: ProductAnalyticsBubbleInstructions,
+    [SDKKey.DJANGO]: ProductAnalyticsDjangoInstructions,
     [SDKKey.ELIXIR]: ProductAnalyticsElixirInstructions,
     [SDKKey.FLUTTER]: ProductAnalyticsFlutterInstructions,
     [SDKKey.FRAMER]: ProductAnalyticsFramerInstructions,
@@ -46,4 +51,7 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions,
     [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions,
     [SDKKey.RUBY]: ProductAnalyticsRubyInstructions,
+    [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions,
+    [SDKKey.VUE_JS]: ProductAnalyticsVueInstructions,
+    [SDKKey.WEBFLOW]: ProductAnalyticsWebflowInstructions,
 }

frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx

@@ -0,0 +1,21 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+
+import { SDKInstallDjangoInstructions } from '../sdk-install-instructions'
+
+function DjangoCaptureSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Python}>{`import posthog
+
+posthog.capture('test-id', 'test-event')`}</CodeSnippet>
+    )
+}
+
+export function ProductAnalyticsDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallDjangoInstructions />
+            <h3>Send an Event</h3>
+            <DjangoCaptureSnippet />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx

@@ -3,6 +3,7 @@ export * from './angular'
 export * from './api'
 export * from './astro'
 export * from './bubble'
+export * from './django'
 export * from './elixir'
 export * from './flutter'
 export * from './framer'
@@ -19,3 +20,6 @@ export * from './python'
 export * from './react-native'
 export * from './remix'
 export * from './ruby'
+export * from './svelte'
+export * from './vue'
+export * from './webflow'

frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx

@@ -0,0 +1,11 @@
+import { SDKInstallSvelteJSInstructions } from '../sdk-install-instructions/svelte'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsSvelteJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallSvelteJSInstructions />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx

@@ -0,0 +1,11 @@
+import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsVueInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallVueInstructions />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx

@@ -0,0 +1,11 @@
+import { SDKInstallWebflowInstructions } from '../sdk-install-instructions/webflow'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsWebflowInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallWebflowInstructions />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx

@@ -0,0 +1,55 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+function DjangoInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.Bash}>pip install posthog</CodeSnippet>
+}
+
+function DjangoAppConfigSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Python}>
+            {`from django.apps import AppConfig
+import posthog
+
+class YourAppConfig(AppConfig):
+    name = "your_app_name"
+    def ready(self):
+        posthog.api_key = '${currentTeam?.api_token}'
+        posthog.host = '${apiHostOrigin()}'`}
+        </CodeSnippet>
+    )
+}
+
+function DjangoSettingsSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Python}>
+            {`INSTALLED_APPS = [
+    # other apps
+    'your_app_name.apps.MyAppConfig',  # Add your app config
+] `}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <DjangoInstallSnippet />
+            <h3>Configure</h3>
+            <p>
+                Set the PostHog API key and host in your <code>AppConfig</code> in <code>apps.py</code> so that's it's
+                available everywhere:
+            </p>
+            <DjangoAppConfigSnippet />
+            <p />
+            Next, if you haven't done so already, make sure you add your <code>AppConfig</code> to your{' '}
+            <code>settings.py</code> under <code>INSTALLED_APPS</code>:
+            <DjangoSettingsSnippet />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx

@@ -2,6 +2,7 @@ export * from './android'
 export * from './angular'
 export * from './astro'
 export * from './bubble'
+export * from './django'
 export * from './elixir'
 export * from './flutter'
 export * from './framer'
@@ -16,3 +17,6 @@ export * from './python'
 export * from './react-native'
 export * from './remix'
 export * from './ruby'
+export * from './svelte'
+export * from './vue'
+export * from './webflow'