Skip to content

Commit

Permalink
Docs: ➕ Add posthog for analytics to both docs and landing (#2775)
Browse files Browse the repository at this point in the history
  • Loading branch information
chuckcarpenter authored May 3, 2024
1 parent 7a03676 commit 3d15718
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 95 deletions.
4 changes: 4 additions & 0 deletions docs-src/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export default defineConfig({
social: {
github: 'https://github.com/shepherd-pro/shepherd'
},
components: {
// Override the default `Head` component.
Head: './src/components/HeadWithPosthog.astro'
},
plugins: [
starlightTypeDoc({
entryPoints: ['./node_modules/shepherd.js/src/*.ts'],
Expand Down
8 changes: 8 additions & 0 deletions docs-src/src/components/HeadWithPosthog.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Head.astro';
import PostHog from './Posthog.astro';
---

<Default {...Astro.props}><slot /></Default>
<PostHog />
51 changes: 51 additions & 0 deletions docs-src/src/components/Posthog.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script is:inline>
!(function (t, e) {
var o, n, p, r;
e.__SV ||
((window.posthog = e),
(e._i = []),
(e.init = function (i, s, a) {
function g(t, e) {
var o = e.split('.');
2 == o.length && ((t = t[o[0]]), (e = o[1])),
(t[e] = function () {
t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
});
}
((p = t.createElement('script')).type = 'text/javascript'),
(p.async = !0),
(p.src = s.api_host + '/static/array.js'),
(r = t.getElementsByTagName('script')[0]).parentNode.insertBefore(
p,
r
);
var u = e;
for (
void 0 !== a ? (u = e[a] = []) : (a = 'posthog'),
u.people = u.people || [],
u.toString = function (t) {
var e = 'posthog';
return (
'posthog' !== a && (e += '.' + a), t || (e += ' (stub)'), e
);
},
u.people.toString = function () {
return u.toString(1) + '.people (stub)';
},
o =
'capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId'.split(
' '
),
n = 0;
n < o.length;
n++
)
g(u, o[n]);
e._i.push([i, s, a]);
}),
(e.__SV = 1));
})(document, window.posthog || []);
posthog.init('phc_sl7TroBwU2fA7dJVU70ZV5u0575fQNWYv1GK5enODkX', {
api_host: 'https://us.i.posthog.com'
});
</script>
4 changes: 1 addition & 3 deletions landing/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,14 @@ import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';

import partytown from '@astrojs/partytown';

// https://astro.build/config
export default defineConfig({
site: 'https://shepherdjs.dev',
integrations: [
mdx(),
sitemap(),
tailwind(),
partytown({ config: { forward: ['dataLayer.push'] } })
tailwind()
],
outDir: '../site'
});
1 change: 0 additions & 1 deletion landing/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
"dependencies": {
"@astrojs/check": "^0.5.10",
"@astrojs/mdx": "^2.2.4",
"@astrojs/partytown": "^2.0.4",
"@astrojs/rss": "^4.0.1",
"@astrojs/sitemap": "^3.1.2",
"@astrojs/tailwind": "^5.0.3",
Expand Down
19 changes: 4 additions & 15 deletions landing/src/components/BaseHead.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
---
import { ViewTransitions } from 'astro:transitions';
import PostHog from './Posthog.astro';
// Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component.
import '../styles/fonts.css';
Expand Down Expand Up @@ -82,22 +84,9 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
<meta name="title" content={title} />
<meta name="description" content={description} />

<!-- Google tag (gtag.js) -->
<script
type="text/partytown"
async
src="https://www.googletagmanager.com/gtag/js?id=G-TCGJJ6WHV6"></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'G-TCGJJ6WHV6');
</script>
<PostHog />

<!-- Open Graph / Facebook -->
<!-- Open Graph Facebook -->
<!-- <meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
Expand Down
110 changes: 55 additions & 55 deletions landing/src/components/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,147 +6,147 @@ import ShepherdHeader from '../images/shepherd-header.svg';
const { isHome } = Astro.props;
---

<header class='flex justify-center mt-4 w-full'>
<div class='absolute ml-2 top-0'>
<Fragment class='shepherd-logo absolute ml-2' set:html={ShepherdHead} />
<header class="flex justify-center mt-4 w-full">
<div class="absolute ml-2 top-0">
<Fragment class="shepherd-logo absolute ml-2" set:html={ShepherdHead} />
</div>

<div
class='bg-grey-light flex flex-col font-heading justify-center items-center w-full'
class="bg-grey-light flex flex-col font-heading justify-center items-center w-full"
>
<nav
class='flex justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0'
class="flex justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0"
>
<div class='flex lg:p-12'>
<div class="flex lg:p-12">
<a
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
href='https://github.com/shepherd-pro/shepherd'
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
href="https://github.com/shepherd-pro/shepherd"
>
GitHub
</a>
<a
class='pr-6 uppercase lg:pr-10 hover:text-navy-light'
href='https://shepherdjs.dev/docs/'
class="pr-6 uppercase lg:pr-10 hover:text-navy-light"
href="https://docs.shepherdpro.com/"
>
Docs
</a>
<a class='pr-6 uppercase hover:text-navy-light lg:pr-0' href='/blog'>
<a class="pr-6 uppercase hover:text-navy-light lg:pr-0" href="/blog">
Blog
</a>
</div>

<div class='flex lg:p-12'>
<div class="flex lg:p-12">
<a
class='pr-6 uppercase text-pink-300 hover:text-navy-light lg:pr-10'
href='https://shepherdpro.com/'
class="pr-6 uppercase text-pink-300 hover:text-navy-light lg:pr-10"
href="https://shepherdpro.com/"
>
Pro
</a>
<a
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
href='/pricing'
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
href="/pricing"
>
Pricing
</a>
<a
class='uppercase hover:text-navy-light'
href='mailto:hello@shepherdpro.com'
class="uppercase hover:text-navy-light"
href="mailto:hello@shepherdpro.com"
>
Contact
</a>
</div>
</nav>

<img
class='hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
class="hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
src={ShepherdHeader.src}
alt={SITE_TITLE}
/>

<h2 class='font-body p-2 text-xl'>
<h2 class="font-body p-2 text-xl">
Guide your users through a tour of your app.
</h2>

<div class='flex justify-center w-full'>
<div class="flex justify-center w-full">
{
isHome && (
<div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<img
class='absolute a11y-icon z-20'
src='/img/accessibility.svg'
alt=''
role='presentation'
class="absolute a11y-icon z-20"
src="/img/accessibility.svg"
alt=""
role="presentation"
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
<div class="bg-white h-72 p-6 relative z-10">
<h3 class="p-2 text-2xl text-center uppercase w-full">
Accessibility
</h3>

<p class='font-body p-2 text-xl'>
<p class="font-body p-2 text-xl">
Shepherd has full keyboard navigation support, focus
trapping, and a11y compliance via aria attributes.
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
</div>
</div>

<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<img
class='absolute customizable-icon z-20'
src='/img/customizable.svg'
alt=''
role='presentation'
class="absolute customizable-icon z-20"
src="/img/customizable.svg"
alt=""
role="presentation"
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
<div class="bg-white h-72 p-6 relative z-10">
<h3 class="p-2 text-2xl text-center uppercase w-full">
Highly Customizable
</h3>

<p class='font-body p-2 text-xl'>
<p class="font-body p-2 text-xl">
Shepherd's styles are kept minimal, allowing you to easily
customize the look and feel, but still give you enough to
drop in and be ready to go quickly.
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
</div>
</div>

<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<img
class='absolute framework-icon z-20'
src='/img/framework.svg'
alt=''
role='presentation'
class="absolute framework-icon z-20"
src="/img/framework.svg"
alt=""
role="presentation"
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
<div class="bg-white h-72 p-6 relative z-10">
<h3 class="p-2 text-2xl text-center uppercase w-full">
Framework Ready
</h3>

<p class='font-body p-2 text-xl'>
<p class="font-body p-2 text-xl">
Shepherd is ready to drop into your application using React,
Ember, Angular, Vue.js, ES Modules, or plain Javascript!
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
</div>
</div>
</div>
Expand Down
51 changes: 51 additions & 0 deletions landing/src/components/Posthog.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script is:inline>
!(function (t, e) {
var o, n, p, r;
e.__SV ||
((window.posthog = e),
(e._i = []),
(e.init = function (i, s, a) {
function g(t, e) {
var o = e.split('.');
2 == o.length && ((t = t[o[0]]), (e = o[1])),
(t[e] = function () {
t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
});
}
((p = t.createElement('script')).type = 'text/javascript'),
(p.async = !0),
(p.src = s.api_host + '/static/array.js'),
(r = t.getElementsByTagName('script')[0]).parentNode.insertBefore(
p,
r
);
var u = e;
for (
void 0 !== a ? (u = e[a] = []) : (a = 'posthog'),
u.people = u.people || [],
u.toString = function (t) {
var e = 'posthog';
return (
'posthog' !== a && (e += '.' + a), t || (e += ' (stub)'), e
);
},
u.people.toString = function () {
return u.toString(1) + '.people (stub)';
},
o =
'capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId'.split(
' '
),
n = 0;
n < o.length;
n++
)
g(u, o[n]);
e._i.push([i, s, a]);
}),
(e.__SV = 1));
})(document, window.posthog || []);
posthog.init('phc_sl7TroBwU2fA7dJVU70ZV5u0575fQNWYv1GK5enODkX', {
api_host: 'https://us.i.posthog.com'
});
</script>
Loading

0 comments on commit 3d15718

Please sign in to comment.