From 6f66eea70077491477092f0a3a056b84fbd307f3 Mon Sep 17 00:00:00 2001 From: Lior Date: Mon, 25 Mar 2024 13:23:34 +0000 Subject: [PATCH 1/7] svelte --- .../src/scenes/onboarding/sdks/allSDKs.tsx | 21 +++++--- .../FeatureFlagsSDKInstructions.tsx | 3 +- .../onboarding/sdks/feature-flags/index.tsx | 1 + .../onboarding/sdks/feature-flags/remix.tsx | 2 +- .../onboarding/sdks/feature-flags/svelte.tsx | 21 ++++++++ .../ProductAnalyticsSDKInstructions.tsx | 2 + .../sdks/product-analytics/svelte.tsx | 11 +++++ .../sdks/sdk-install-instructions/svelte.tsx | 49 +++++++++++++++++++ .../SessionReplaySDKInstructions.tsx | 2 + .../onboarding/sdks/session-replay/index.tsx | 1 + .../onboarding/sdks/session-replay/svelte.tsx | 11 +++++ .../sdks/surveys/SurveysSDKInstructions.tsx | 2 + .../scenes/onboarding/sdks/surveys/index.tsx | 1 + .../scenes/onboarding/sdks/surveys/svelte.tsx | 9 ++++ frontend/src/types.ts | 1 + 15 files changed, 128 insertions(+), 9 deletions(-) create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/session-replay/svelte.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/surveys/svelte.tsx diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx index a2bee604868e6..d53e77da0d945 100644 --- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx +++ b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx @@ -180,13 +180,6 @@ export const allSDKs: SDK[] = [ image: require('./logos/ruby.svg'), docsLink: 'https://posthog.com/docs/libraries/ruby', }, - { - name: 'Vue.js', - key: SDKKey.VUE_JS, - tags: [SDKTag.WEB], - image: require('./logos/vue.svg'), - docsLink: 'https://posthog.com/docs/libraries/vue-js', - }, { name: 'Rust', key: SDKKey.RUST, @@ -194,6 +187,20 @@ export const allSDKs: SDK[] = [ 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, + tags: [SDKTag.WEB], + image: require('./logos/vue.svg'), + docsLink: 'https://posthog.com/docs/libraries/vue-js', + }, // integrations { name: 'Google Tag Manager', diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx index 47148380d9554..cbd9f83836939 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx @@ -21,6 +21,7 @@ import { FeatureFlagsRemixJSInstructions, FeatureFlagsRNInstructions, FeatureFlagsRubyInstructions, + FeatureFlagsSvelteInstructions, } from '.' export const FeatureFlagsSDKInstructions: SDKInstructionsMap = { @@ -44,5 +45,5 @@ 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, } diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx index 94df56bf9395a..465a365264492 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx @@ -18,3 +18,4 @@ export * from './react' export * from './react-native' export * from './remix' export * from './ruby' +export * from './svelte' diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx index 6ff3103f58751..3ed90cab39edc 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx @@ -9,7 +9,7 @@ export function FeatureFlagsRemixJSInstructions(): JSX.Element { <>

Client-side rendering

- +

Server-side rendering

Install

diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx new file mode 100644 index 0000000000000..74349718ac517 --- /dev/null +++ b/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 ( + <> + +

Client-side rendering

+ +

Server-side rendering

+

Install

+ +

Configure

+ + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index 96552ce6e8b9a..ac746737f91f4 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx @@ -22,6 +22,7 @@ import { ProductAnalyticsRemixJSInstructions, ProductAnalyticsRNInstructions, ProductAnalyticsRubyInstructions, + ProductAnalyticsSvelteJSInstructions, } from '.' export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { @@ -46,4 +47,5 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions, [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions, [SDKKey.RUBY]: ProductAnalyticsRubyInstructions, + [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx new file mode 100644 index 0000000000000..8c60a6e20ee6a --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx new file mode 100644 index 0000000000000..141de4ab8acc3 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx @@ -0,0 +1,49 @@ +import { Link } from '@posthog/lemon-ui' +import { useValues } from 'kea' +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' +import { apiHostOrigin } from 'lib/utils/apiHost' +import { teamLogic } from 'scenes/teamLogic' + +import { JSInstallSnippet } from './js-web' + +function SvelteAppClientCodeSnippet(): JSX.Element { + const { currentTeam } = useValues(teamLogic) + + return ( + + {`import posthog from 'posthog-js' +import { browser } from '$app/environment'; + +export const load = async () => { + + if (browser) { + posthog.init( + '${currentTeam?.api_token}', + { api_host: "${apiHostOrigin()}" } + ) + } + return +};`} + + ) +} + +export function SDKInstallSvelteJSInstructions(): JSX.Element { + return ( + <> +

Install posthog-js using your package manager

+ + +

Initialize

+

+ If you haven't created a root{' '} + + layout + {' '} + already, create a new file called +layout.js in your src/routes folder. In + this file, check the environment is the browser, and initialize PostHog if so: +

+ + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx index 25b8956d50f9a..86b01c8456d1d 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx @@ -11,6 +11,7 @@ import { NuxtJSInstructions, ReactInstructions, RemixInstructions, + SvelteInstructions, } from '.' export const SessionReplaySDKInstructions: SDKInstructionsMap = { @@ -24,4 +25,5 @@ export const SessionReplaySDKInstructions: SDKInstructionsMap = { [SDKKey.NUXT_JS]: NuxtJSInstructions, [SDKKey.REACT]: ReactInstructions, [SDKKey.REMIX]: RemixInstructions, + [SDKKey.SVELTE]: SvelteInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx index 7f4f03520b7ac..38cd12d7980e6 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx @@ -8,3 +8,4 @@ export * from './next-js' export * from './nuxt' export * from './react' export * from './remix' +export * from './svelte' diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/svelte.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/svelte.tsx new file mode 100644 index 0000000000000..5908939d2ba18 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/session-replay/svelte.tsx @@ -0,0 +1,11 @@ +import { SDKInstallSvelteJSInstructions } from '../sdk-install-instructions/svelte' +import { SessionReplayFinalSteps } from '../shared-snippets' + +export function SvelteInstructions(): JSX.Element { + return ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx index 66d585ed66188..456d2c67b9369 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx @@ -11,6 +11,7 @@ import { NuxtJSInstructions, ReactInstructions, RemixInstructions, + SvelteInstructions, } from '.' export const SurveysSDKInstructions: SDKInstructionsMap = { @@ -24,4 +25,5 @@ export const SurveysSDKInstructions: SDKInstructionsMap = { [SDKKey.NUXT_JS]: NuxtJSInstructions, [SDKKey.REACT]: ReactInstructions, [SDKKey.REMIX]: RemixInstructions, + [SDKKey.SVELTE]: SvelteInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx index 7f4f03520b7ac..38cd12d7980e6 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx @@ -8,3 +8,4 @@ export * from './next-js' export * from './nuxt' export * from './react' export * from './remix' +export * from './svelte' diff --git a/frontend/src/scenes/onboarding/sdks/surveys/svelte.tsx b/frontend/src/scenes/onboarding/sdks/surveys/svelte.tsx new file mode 100644 index 0000000000000..3faf6bbbd394f --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/surveys/svelte.tsx @@ -0,0 +1,9 @@ +import { SDKInstallSvelteJSInstructions } from '../sdk-install-instructions/svelte' + +export function SvelteInstructions(): JSX.Element { + return ( + <> + + + ) +} diff --git a/frontend/src/types.ts b/frontend/src/types.ts index b057670539150..6b645c4c5c5df 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -3771,6 +3771,7 @@ export enum SDKKey { SEGMENT = 'segment', SENTRY = 'sentry', SHOPIFY = 'shopify', + SVELTE = 'svelte', VUE_JS = 'vuejs', WORDPRESS = 'wordpress', } From 7d017bc7077ad47936a48968f19230d8551aba4a Mon Sep 17 00:00:00 2001 From: Lior Date: Mon, 25 Mar 2024 13:40:14 +0000 Subject: [PATCH 2/7] missing export --- .../scenes/onboarding/sdks/sdk-install-instructions/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx index 5bfe78571d5fe..95225ae2889ca 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx @@ -16,3 +16,4 @@ export * from './python' export * from './react-native' export * from './remix' export * from './ruby' +export * from './svelte' From 8106b1655f57dbb2420c2ee8b5eb11777933f0e6 Mon Sep 17 00:00:00 2001 From: Lior Date: Mon, 25 Mar 2024 13:40:56 +0000 Subject: [PATCH 3/7] export --- frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index e3364337bf72c..b7f894b981dd3 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx @@ -19,3 +19,4 @@ export * from './python' export * from './react-native' export * from './remix' export * from './ruby' +export * from './svelte' From b1bbddd2c5023506a26181451f32f13adaf52943 Mon Sep 17 00:00:00 2001 From: Lior Date: Tue, 26 Mar 2024 10:01:08 +0000 Subject: [PATCH 4/7] webflow --- .../src/scenes/onboarding/sdks/allSDKs.tsx | 7 ++++++ .../FeatureFlagsSDKInstructions.tsx | 2 ++ .../onboarding/sdks/feature-flags/index.tsx | 1 + .../onboarding/sdks/feature-flags/webflow.tsx | 13 ++++++++++ .../ProductAnalyticsSDKInstructions.tsx | 2 ++ .../sdks/product-analytics/index.tsx | 1 + .../sdks/product-analytics/webflow.tsx | 11 +++++++++ .../sdks/sdk-install-instructions/index.tsx | 1 + .../sdks/sdk-install-instructions/webflow.tsx | 24 +++++++++++++++++++ .../SessionReplaySDKInstructions.tsx | 2 ++ .../onboarding/sdks/session-replay/index.tsx | 1 + .../sdks/session-replay/webflow.tsx | 11 +++++++++ .../sdks/surveys/SurveysSDKInstructions.tsx | 2 ++ .../scenes/onboarding/sdks/surveys/index.tsx | 1 + .../onboarding/sdks/surveys/webflow.tsx | 9 +++++++ frontend/src/types.ts | 1 + 16 files changed, 89 insertions(+) create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/sdk-install-instructions/webflow.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/session-replay/webflow.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/surveys/webflow.tsx diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx index d53e77da0d945..61544a8a86ed6 100644 --- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx +++ b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx @@ -201,6 +201,13 @@ export const allSDKs: SDK[] = [ image: require('./logos/vue.svg'), docsLink: 'https://posthog.com/docs/libraries/vue-js', }, + { + name: 'Webflow', + key: SDKKey.WEBFLOW, + tags: [SDKTag.WEB], + image: require('./logos/webflow.svg'), + docsLink: 'https://posthog.com/docs/libraries/webflow', + }, // integrations { name: 'Google Tag Manager', diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx index cbd9f83836939..1455900dd48ee 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx @@ -22,6 +22,7 @@ import { FeatureFlagsRNInstructions, FeatureFlagsRubyInstructions, FeatureFlagsSvelteInstructions, + FeatureFlagsWebflowInstructions, } from '.' export const FeatureFlagsSDKInstructions: SDKInstructionsMap = { @@ -46,4 +47,5 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = { [SDKKey.REMIX]: FeatureFlagsRemixJSInstructions, [SDKKey.RUBY]: FeatureFlagsRubyInstructions, [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions, + [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx index 465a365264492..22286b9cd9884 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx @@ -19,3 +19,4 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx new file mode 100644 index 0000000000000..3f4cbf0c157a7 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index ac746737f91f4..ee707796f03d8 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx @@ -23,6 +23,7 @@ import { ProductAnalyticsRNInstructions, ProductAnalyticsRubyInstructions, ProductAnalyticsSvelteJSInstructions, + ProductAnalyticsWebflowInstructions, } from '.' export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { @@ -48,4 +49,5 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions, [SDKKey.RUBY]: ProductAnalyticsRubyInstructions, [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions, + [SDKKey.WEBFLOW]: ProductAnalyticsWebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index b7f894b981dd3..64c8d36e2d505 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx @@ -20,3 +20,4 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx new file mode 100644 index 0000000000000..3edc373793c54 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx index 95225ae2889ca..f581ea9955b22 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx @@ -17,3 +17,4 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/webflow.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/webflow.tsx new file mode 100644 index 0000000000000..c0f45d721f6b1 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/webflow.tsx @@ -0,0 +1,24 @@ +import { JSSnippet } from 'lib/components/JSSnippet' + +export function SDKInstallWebflowInstructions(): JSX.Element { + return ( + <> +

Install the PostHog web snippet

+

First copy your web snippet:

+ +

+ Go to your Webflow site settings by clicking on the menu icon in the top left. If you haven’t already, + sign up for at least the Basic site plan. This enables you to add custom code. Then: +

+
    +
  1. + Go to the Custom code tab in site settings. +
    2. +
  2. + In the Head code section, paste your PostHog snippet and press save. +
    3. +
  3. Publish your site.
    4. +
+ + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx index 86b01c8456d1d..ad37dbe9e1d51 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx @@ -12,6 +12,7 @@ import { ReactInstructions, RemixInstructions, SvelteInstructions, + WebflowInstructions, } from '.' export const SessionReplaySDKInstructions: SDKInstructionsMap = { @@ -26,4 +27,5 @@ export const SessionReplaySDKInstructions: SDKInstructionsMap = { [SDKKey.REACT]: ReactInstructions, [SDKKey.REMIX]: RemixInstructions, [SDKKey.SVELTE]: SvelteInstructions, + [SDKKey.WEBFLOW]: WebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx index 38cd12d7980e6..cb7a7f25e5604 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx @@ -9,3 +9,4 @@ export * from './nuxt' export * from './react' export * from './remix' export * from './svelte' +export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/webflow.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/webflow.tsx new file mode 100644 index 0000000000000..081182e59adf3 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/session-replay/webflow.tsx @@ -0,0 +1,11 @@ +import { SDKInstallWebflowInstructions } from '../sdk-install-instructions' +import { SessionReplayFinalSteps } from '../shared-snippets' + +export function WebflowInstructions(): JSX.Element { + return ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx index 456d2c67b9369..3b9db97ceb079 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx @@ -12,6 +12,7 @@ import { ReactInstructions, RemixInstructions, SvelteInstructions, + WebflowInstructions, } from '.' export const SurveysSDKInstructions: SDKInstructionsMap = { @@ -26,4 +27,5 @@ export const SurveysSDKInstructions: SDKInstructionsMap = { [SDKKey.REACT]: ReactInstructions, [SDKKey.REMIX]: RemixInstructions, [SDKKey.SVELTE]: SvelteInstructions, + [SDKKey.WEBFLOW]: WebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx index 38cd12d7980e6..cb7a7f25e5604 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx @@ -9,3 +9,4 @@ export * from './nuxt' export * from './react' export * from './remix' export * from './svelte' +export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/surveys/webflow.tsx b/frontend/src/scenes/onboarding/sdks/surveys/webflow.tsx new file mode 100644 index 0000000000000..d7431d7b7d307 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/surveys/webflow.tsx @@ -0,0 +1,9 @@ +import { SDKInstallWebflowInstructions } from '../sdk-install-instructions/webflow' + +export function WebflowInstructions(): JSX.Element { + return ( + <> + + + ) +} diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 6b645c4c5c5df..898fb88acb078 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -3773,6 +3773,7 @@ export enum SDKKey { SHOPIFY = 'shopify', SVELTE = 'svelte', VUE_JS = 'vuejs', + WEBFLOW = 'webflow', WORDPRESS = 'wordpress', } From 55aec6765fb334d239313e569dcd32af548e25cc Mon Sep 17 00:00:00 2001 From: Lior Date: Tue, 26 Mar 2024 10:22:57 +0000 Subject: [PATCH 5/7] vue --- .../FeatureFlagsSDKInstructions.tsx | 2 + .../onboarding/sdks/feature-flags/index.tsx | 1 + .../onboarding/sdks/feature-flags/vue.tsx | 13 ++++ .../ProductAnalyticsSDKInstructions.tsx | 2 + .../sdks/product-analytics/index.tsx | 1 + .../onboarding/sdks/product-analytics/vue.tsx | 11 +++ .../sdks/sdk-install-instructions/index.tsx | 1 + .../sdks/sdk-install-instructions/vue.tsx | 78 +++++++++++++++++++ .../SessionReplaySDKInstructions.tsx | 2 + .../onboarding/sdks/session-replay/index.tsx | 1 + .../onboarding/sdks/session-replay/vue.tsx | 11 +++ .../sdks/surveys/SurveysSDKInstructions.tsx | 2 + .../scenes/onboarding/sdks/surveys/index.tsx | 1 + .../scenes/onboarding/sdks/surveys/vue.tsx | 9 +++ 14 files changed, 135 insertions(+) create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/session-replay/vue.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/surveys/vue.tsx diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx index 1455900dd48ee..681d094fae017 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx @@ -22,6 +22,7 @@ import { FeatureFlagsRNInstructions, FeatureFlagsRubyInstructions, FeatureFlagsSvelteInstructions, + FeatureFlagsVueInstructions, FeatureFlagsWebflowInstructions, } from '.' @@ -47,5 +48,6 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = { [SDKKey.REMIX]: FeatureFlagsRemixJSInstructions, [SDKKey.RUBY]: FeatureFlagsRubyInstructions, [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions, + [SDKKey.VUE_JS]: FeatureFlagsVueInstructions, [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx index 22286b9cd9884..900f2f45ba2e9 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx @@ -19,4 +19,5 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './vue' export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx new file mode 100644 index 0000000000000..eec3c3d13f093 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index ee707796f03d8..9d5106158a62e 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx @@ -23,6 +23,7 @@ import { ProductAnalyticsRNInstructions, ProductAnalyticsRubyInstructions, ProductAnalyticsSvelteJSInstructions, + ProductAnalyticsVueInstructions, ProductAnalyticsWebflowInstructions, } from '.' @@ -49,5 +50,6 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions, [SDKKey.RUBY]: ProductAnalyticsRubyInstructions, [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions, + [SDKKey.VUE_JS]: ProductAnalyticsVueInstructions, [SDKKey.WEBFLOW]: ProductAnalyticsWebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index 64c8d36e2d505..4585fda4a7079 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx @@ -20,4 +20,5 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './vue' export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx new file mode 100644 index 0000000000000..f4646bb7867c2 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx index f581ea9955b22..4c8ef1e268d09 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx @@ -17,4 +17,5 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './vue' export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx new file mode 100644 index 0000000000000..9bd3eb224ec10 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx @@ -0,0 +1,78 @@ +import { useValues } from 'kea' +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' +import { Link } from 'lib/lemon-ui/Link' +import { apiHostOrigin } from 'lib/utils/apiHost' +import { teamLogic } from 'scenes/teamLogic' + +import { JSInstallSnippet } from './js-web' + +function VueCreatePluginsFileSnippet(): JSX.Element { + return ( + + {`mkdir plugins #skip if you already have one +cd plugins +touch posthog.js`} + + ) +} + +function VuePluginsCodeSnippet(): JSX.Element { + const { currentTeam } = useValues(teamLogic) + + return ( + + {`//./plugins/posthog.js +import posthog from "posthog-js"; + +export default { + install(app) { + app.config.globalProperties.$posthog = posthog.init( + '${currentTeam?.api_token}', + { + api_host: '${apiHostOrigin()}', + } + ); + }, +};`} + + ) +} + +function VueActivatePluginSnippet(): JSX.Element { + return ( + + {`//main.js +import { createApp } from 'vue' +import App from './App.vue' +import posthogPlugin from "./plugins/posthog"; //import the plugin. + +const app = createApp(App); + +app.use(posthogPlugin); //install the plugin +app.mount('#app')`} + + ) +} + +export function SDKInstallVueInstructions(): JSX.Element { + return ( + <> +

+ The below guide is for integrating using plugins in Vue versions 3 and above. For integrating PostHog + using Provide/inject, Vue.prototype, or versions 2.7 and below, see our{' '} + Vue docs +

+

Install posthog-js using your package manager

+ +

Create a plugin

+

+ Create a new file posthog.js in your plugins directory: +

+ + Add the following code to posthog.js: + +

Activate your plugin

+ + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx index ad37dbe9e1d51..b8fc50a5bd38a 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx @@ -12,6 +12,7 @@ import { ReactInstructions, RemixInstructions, SvelteInstructions, + VueInstructions, WebflowInstructions, } from '.' @@ -27,5 +28,6 @@ export const SessionReplaySDKInstructions: SDKInstructionsMap = { [SDKKey.REACT]: ReactInstructions, [SDKKey.REMIX]: RemixInstructions, [SDKKey.SVELTE]: SvelteInstructions, + [SDKKey.VUE_JS]: VueInstructions, [SDKKey.WEBFLOW]: WebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx index cb7a7f25e5604..a1fbaef355a9c 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx @@ -9,4 +9,5 @@ export * from './nuxt' export * from './react' export * from './remix' export * from './svelte' +export * from './vue' export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/vue.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/vue.tsx new file mode 100644 index 0000000000000..3e783a11ba9fb --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/session-replay/vue.tsx @@ -0,0 +1,11 @@ +import { SDKInstallVueInstructions } from '../sdk-install-instructions' +import { SessionReplayFinalSteps } from '../shared-snippets' + +export function VueInstructions(): JSX.Element { + return ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx index 3b9db97ceb079..c0ee501fc6fe7 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx @@ -12,6 +12,7 @@ import { ReactInstructions, RemixInstructions, SvelteInstructions, + VueInstructions, WebflowInstructions, } from '.' @@ -27,5 +28,6 @@ export const SurveysSDKInstructions: SDKInstructionsMap = { [SDKKey.REACT]: ReactInstructions, [SDKKey.REMIX]: RemixInstructions, [SDKKey.SVELTE]: SvelteInstructions, + [SDKKey.VUE_JS]: VueInstructions, [SDKKey.WEBFLOW]: WebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx index cb7a7f25e5604..a1fbaef355a9c 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx @@ -9,4 +9,5 @@ export * from './nuxt' export * from './react' export * from './remix' export * from './svelte' +export * from './vue' export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/surveys/vue.tsx b/frontend/src/scenes/onboarding/sdks/surveys/vue.tsx new file mode 100644 index 0000000000000..1714535074989 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/surveys/vue.tsx @@ -0,0 +1,9 @@ +import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue' + +export function VueInstructions(): JSX.Element { + return ( + <> + + + ) +} From e57e95cddbf58ed75af96f3cebb63eae080f00ee Mon Sep 17 00:00:00 2001 From: Lior Date: Tue, 26 Mar 2024 12:19:03 +0000 Subject: [PATCH 6/7] django --- .../src/scenes/onboarding/sdks/allSDKs.tsx | 7 +++ .../FeatureFlagsSDKInstructions.tsx | 2 + .../onboarding/sdks/feature-flags/django.tsx | 13 +++++ .../onboarding/sdks/feature-flags/index.tsx | 1 + .../ProductAnalyticsSDKInstructions.tsx | 2 + .../sdks/product-analytics/django.tsx | 21 +++++++ .../sdks/product-analytics/index.tsx | 1 + .../sdks/sdk-install-instructions/django.tsx | 55 +++++++++++++++++++ .../sdks/sdk-install-instructions/index.tsx | 1 + frontend/src/types.ts | 1 + 10 files changed, 104 insertions(+) create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx index 61544a8a86ed6..c9a6a88c5b3cc 100644 --- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx +++ b/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, diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx index 681d094fae017..ab58f83895d72 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx @@ -6,6 +6,7 @@ import { FeatureFlagsAPIInstructions, FeatureFlagsAstroInstructions, FeatureFlagsBubbleInstructions, + FeatureFlagsDjangoInstructions, FeatureFlagsFlutterInstructions, FeatureFlagsFramerInstructions, FeatureFlagsGoInstructions, @@ -33,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, diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx new file mode 100644 index 0000000000000..3dfb2c07939c1 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx index 900f2f45ba2e9..83d8dd502923b 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index 9d5106158a62e..d435dc8bfa3ad 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx @@ -8,6 +8,7 @@ import { ProductAnalyticsAPIInstructions, ProductAnalyticsAstroInstructions, ProductAnalyticsBubbleInstructions, + ProductAnalyticsDjangoInstructions, ProductAnalyticsElixirInstructions, ProductAnalyticsFlutterInstructions, ProductAnalyticsFramerInstructions, @@ -34,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, diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx new file mode 100644 index 0000000000000..8729c42c514a1 --- /dev/null +++ b/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 ( + {`import posthog + +posthog.capture('test-id', 'test-event')`} + ) +} + +export function ProductAnalyticsDjangoInstructions(): JSX.Element { + return ( + <> + +

Send an Event

+ + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index 4585fda4a7079..bf5c8678d04a1 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx new file mode 100644 index 0000000000000..aee7182c84c6a --- /dev/null +++ b/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 pip install posthog +} + +function DjangoAppConfigSnippet(): JSX.Element { + const { currentTeam } = useValues(teamLogic) + + return ( + + {`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()}'`} + + ) +} + +function DjangoSettingsSnippet(): JSX.Element { + return ( + + {`INSTALLED_APPS = [ + # other apps + 'your_app_name.apps.MyAppConfig', # Add your app config +] `} + + ) +} + +export function SDKInstallDjangoInstructions(): JSX.Element { + return ( + <> +

Install

+ +

Configure

+

+ Set the PostHog API key and host in your AppConfig in apps.py so that's it's + available everywhere: +

+ +

+ Next, if you haven't done so already, make sure you add your AppConfig to your{' '} + settings.py under INSTALLED_APPS: + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx index 4c8ef1e268d09..45ffdf34a9919 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx +++ b/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' diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 898fb88acb078..00ad4a8cdbfe7 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -3744,6 +3744,7 @@ export enum SDKKey { ASTRO = 'astro', API = 'api', BUBBLE = 'bubble', + DJANGO = 'django', DOCUSAURUS = 'docusaurus', ELIXIR = 'elixir', FRAMER = 'framer', From 9f04fbdc776c3b102fc4347566c05c8845a9f5e6 Mon Sep 17 00:00:00 2001 From: Lior Date: Tue, 26 Mar 2024 12:24:41 +0000 Subject: [PATCH 7/7] flag code --- frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx index 3dfb2c07939c1..6f6e3043e9377 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx +++ b/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx @@ -7,7 +7,7 @@ export function FeatureFlagsDjangoInstructions(): JSX.Element { return ( <> - + ) }