base on Official docs, website, and handbook for PostHog. <p align="center"> <img alt="posthoglogo" src="https://user-images.githubusercontent.com/65415371/205059737-c8a4f836-4889-4654-902e-f302b187b6a0.png"> </p> # PostHog.com - Website, docs, blog, and handbook <p align="center"> <a href='http://makeapullrequest.com'><img alt='PRs Welcome' src='https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=shields'/></a> <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/posthog/posthog.com"/> <a href='https://posthog.com/community'><img alt="Join Community" src="https://img.shields.io/badge/community-join-blue"/></a> <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/posthog/posthog.com"/> <img alt="GitHub closed pull requests" src="https://img.shields.io/github/issues-pr-closed/posthog/posthog.com"/> </p> <p align="center"> <a href="https://app.posthog.com/home#supportModal">Support</a> - <a href="https://posthog.com/roadmap">Roadmap</a> - <a href="https://github.com/PostHog/posthog.com/issues/new">Open an issue</a> - <a href="https://github.com/PostHog/posthog.com/blob/master/STYLEGUIDE.md">Style guide</a> </p> This is the repository for the PostHog website. It contains: - All of our written content and visuals including product features, manuals, docs, blogs, case studies, tutorials, and the handbook - Features like questions and answers (using [Squeak!](https://github.com/PostHog/squeak)), job listings (using [Ashby](https://www.ashbyhq.com/customers/posthog-customer-story)), pricing calculator, roadmap, API docs, and more - All the components, templates, logic, and styling to make this work, look pretty, and spark joy ## Table of contents - [Quick start](#quick-start) - [Advanced setup](#advanced-setup) - [Contributing](#contributing) ## Quick start 1. **Pre-installation** Install [Node](https://nodejs.org/en/download/) (version 22) - if you installed Node using nvm, you can run `nvm use` to automatically switch to the correct version. Install [Yarn](https://classic.yarnpkg.com/en/). (If you're on a Mac with Apple Silicon and get an error with `-86` in it, you may need to [install Rosetta](https://osxdaily.com/2020/12/04/how-install-rosetta-2-apple-silicon-mac/).) ```bash npm install --global yarn ``` 2. **Start developing** Clone the repo and navigate into your new site’s directory: ```bash git clone [email protected]:PostHog/posthog.com.git && cd posthog.com/ ``` If you're using an Apple Silicon Mac (M1) you'll need to run the following commands: ```bash rm -rf ./node_modules brew install vips ``` Then install the site dependencies, and start it up: ```bash yarn yarn start ``` > **Tip:** Seeing a discrepancy between local development and staging/production? Preview the production build locally by running `gatsby build && gatsby serve` 3. **Open the source code and start editing!** Your site is now running at `http://localhost:8001`! > **Note:** You'll also see a second link: `http://localhost:8001/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql). See full instructions on [developing PostHog.com locally in our manual](https://posthog.com/handbook/engineering/posthog-com/developing-the-website). ## Advanced setup ### Debugging errors on start 1. Pull the latest changes from `master` 2. Run `gatsby clean && yarn start` or delete `node_modules` and `.cache` 3. Check builds are passing in [deployment to Vercel](https://github.com/PostHog/posthog.com/deployments) ### Working on `/docs/api`? The site will load the API schema from US Cloud by default. You can override this to use your local PostHog instance with an env var: ``` POSTHOG_OPEN_API_SPEC_URL="http://127.0.0.1:8000/api/schema/" yarn start ``` ### Want Ashby job listings or GitHub contributors to load? You’ll need to set environment variables for these. [See (private) instructions](https://github.com/PostHog/company-internal/blob/master/website-api-keys.md) for this. ### Developing the posts section To see your local version of the posts section, `/posts` needs to be visited directly (`http://localhost:8001/posts`) ### Developing the merch store Additional environment variables are needed to develop the merch store: - `SHOPIFY_APP_PASSWORD` - `GATSBY_MYSHOPIFY_URL` - `GATSBY_SHOPIFY_STOREFRONT_TOKEN` Currently, these environment variables are excluded from Vercel preview builds to disable merch store node creation and speed up build times on non-merch related PRs. ### Dynamic open graph images To develop a dynamic open graph image: 1. Run `yarn build` with both the `ASHBY_API_KEY` and `GITHUB_API_KEY` set. 1. In `gatsby/onPostBuild.ts`, temporarily comment out the following: ``` if (process.env.VERCEL_GIT_COMMIT_REF !== 'master') return ``` 1. Find the generated open graph image in `public/og-images/` ## Contributing We <3 contributions big and small. In priority order (although everything is appreciated) with the most helpful first: - Ask a [question in our community](https://posthog.com/questions) - Submit [bug reports and give us feedback in the app](https://app.posthog.com/home#supportModal)! - Vote on features or get early access to beta functionality in our [roadmap](https://posthog.com/roadmap) - Open a PR - Read [our instructions above](#quick-start) on developing PostHog.com locally - Read more [detailed instructions in our manual](https://posthog.com/handbook/engineering/posthog-com/developing-the-website) - For basic edits, go to the file in GitHub and click the edit button (pencil icon) - Open [an issue](https://github.com/PostHog/posthog.com/issues/new) or [content idea](https://github.com/PostHog/posthog.com/issues/new?assignees=andyvan-ph&labels=content&template=blog-post-idea-template.md&title=%7BContent+type%7D+-+%7Btitle%7D) ", Assign "at most 3 tags" to the expected json: {"id":"14860","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"