Remove antd (#3754)

* remove antd as a dependency! * update CTAs in blog posts * create tab component to replace antd version * remove references to antd (wip) * rebuild compensation calculator * rebuild contributors page * replace spinner on slack * remove antd from APIEndpoint * redo yc-onboarding * add dark mode styles * fix missing angle bracket * Reset Fonts.scss * update yarn.lock * redirect /startups to /pricing * use pointer on dropdowns * overflow tabs instead of wrap Co-authored-by: Eli Kinsey <[email protected]>
PostHog · Jul 21, 2022 · ec1e907 · ec1e907
1 parent dbdb6d7
commit ec1e907
Show file tree

Hide file tree

Showing 33 changed files with 863 additions and 1,531 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,5 @@
 *.lock
 .cache/
 public/
+node_modules/
+static/
diff --git a/.yarnrc b/.yarnrc
@@ -1 +1 @@
---add.ignore-workspace-root-check=true
+--add.ignore-workspace-root-check true
diff --git a/contents/blog/the-posthog-array-1-21-0.mdx b/contents/blog/the-posthog-array-1-21-0.mdx
@@ -5,13 +5,12 @@ rootPage: /blog
 sidebar: Blog
 showTitle: true
 hideAnchor: true
-categories: ["Release notes", "Product updates"]
+categories: ['Release notes', 'Product updates']
 featuredImage: ../images/blog/array/default.png
 featuredImageType: standard
 ---
 
 import { Link } from 'gatsby'
-import { Button } from 'antd'
 
 Release 1.21 is a big one, on top of exciting new features and improvements, we put extra time into the overall stability of PostHog squashing dozens of issues. Some highlights of this release:
 
@@ -25,11 +24,13 @@ We received a lot of great feedback and issue reports and over this release cycl
 
 Make sure to upgrade to get the new features, improvements and fixes.
 
-<Link to="/docs/deployment">
-    <Button className="center" type="primary" size="large">
-        Install PostHog
-    </Button>
-</Link>
+<br />
+
+<div class="flex items-center justify-center">
+  <CallToAction to="/docs/deployment">
+    Install PostHog
+  </CallToAction>
+</div>
 
 <br />
 
@@ -383,4 +384,3 @@ In addition to the highlights listed above, we also merged a bunch of PRs improv
 -   Enable SSL PostgreSQL configuration through env variables [\#2967](https://github.com/PostHog/posthog/pull/2967) ([tmilicic](https://github.com/tmilicic))
 
 <ArrayCTA />
-
diff --git a/contents/blog/the-posthog-array-1-22-0.mdx b/contents/blog/the-posthog-array-1-22-0.mdx
@@ -11,7 +11,6 @@ featuredImageType: standard
 ---
 
 import { Link } from 'gatsby'
-import { Button } from 'antd'
 
 PostHog 1.22 is out with awesome new features, usability and performance improvements, and the usual bug squashing.
 
@@ -34,11 +33,13 @@ Thank you oshura3, we look forward to collaborating with you more!
 -   **Improvement:** Better tooling for updating data in dashboards
 -   **Improvement:** A whole new UX for individual person pages
 
-<Link to="https://app.posthog.com/signup">
-    <Button className="center" type="primary" size="large">
-        Try PostHog Cloud Now
-    </Button>
-</Link>
+<br />
+
+<div class="flex items-center justify-center">
+  <CallToAction to="https://app.posthog.com/signup">
+    Try PostHog Cloud Now
+  </CallToAction>
+</div>
 
 <br />
 

diff --git a/contents/docs/api/post-only-endpoints.mdx b/contents/docs/api/post-only-endpoints.mdx
@@ -12,8 +12,6 @@ This page refers to our public endpoints, which use the same API key as the [Pos
 
 > **Note:** For this API, you should use your 'Project API Key' from the 'Project' page in PostHog. This is the same key used in your frontend snippet.
 
-
-
 # Sending events
 
 To send events to PostHog, you can use any of [our libraries](/docs/integrate/overview) **or** any Mixpanel library by changing the `api_host` setting to the address of your instance.
@@ -162,74 +160,62 @@ curl -v -L --header "Content-Type: application/json" -d '{
 ##### Responses
 
 ```js
-{ 
-    status: 1 
+{
+    status: 1
 }
 ```
 
-**Meaning:** A `200: OK` response means we have successfully received the payload, it is in the correct format, and the project API key (token) is valid. It **does not** imply that events are valid and will be ingested. As mentioned under [Invalid events](#invalid-events), certain event validation errors may cause an event not to be ingested. 
-
+**Meaning:** A `200: OK` response means we have successfully received the payload, it is in the correct format, and the project API key (token) is valid. It **does not** imply that events are valid and will be ingested. As mentioned under [Invalid events](#invalid-events), certain event validation errors may cause an event not to be ingested.
 
 #### Status code: 400
 
 ##### Responses
 
-
 ```js
-{   
-    type: 'validation_error', 
-    code: 'invalid_project', 
-    detail: 'Invalid Project ID.', 
-    attr: 'project_id' 
+{
+    type: 'validation_error',
+    code: 'invalid_project',
+    detail: 'Invalid Project ID.',
+    attr: 'project_id'
 }
 ```
 
 **Meaning:** We were unable to determine the project to associate the events with.
 
-
 #### Status code: 401
 
 ##### Responses
 
-
 ```js
-{   
-    type: 'authentication_error', 
-    code: 'invalid_api_key', 
-    detail: 'Project API key invalid. You can find your project API key in PostHog project settings.', 
+{
+    type: 'authentication_error',
+    code: 'invalid_api_key',
+    detail: 'Project API key invalid. You can find your project API key in PostHog project settings.',
 }
 ```
 
 **Meaning:** The token/API key you provided is invalid.
 
-import { Divider } from 'antd'
-
 <br />
 
-<Divider dashed style={{ background: '#eeeeee', height: 1 }} />
-
-<br />
-
-
 ```js
-{   
-    type: 'authentication_error', 
-    code: 'invalid_personal_api_key', 
-    detail: 'Invalid Personal API key.', 
+{
+    type: 'authentication_error',
+    code: 'invalid_personal_api_key',
+    detail: 'Invalid Personal API key.',
 }
 ```
 
-**Meaning:**  The personal API key you used for authentication is invalid.
+**Meaning:** The personal API key you used for authentication is invalid.
 
 #### Status code: 503 (Deprecated)
 
 ##### Responses
 
-
 ```js
-{   
-    type: 'server_error', 
-    code: 'fetch_team_fail', 
+{
+    type: 'server_error',
+    code: 'fetch_team_fail',
     detail: 'Unable to fetch team from database.'
 }
 ```
@@ -242,14 +228,13 @@ We perform basic validation on the payload and project API key (token), returnin
 
 However, we **will not return an error** to the client when the following happens:
 
-- An event does not have a name
-- An event does not have the `distinct_id` field set
-- The `distinct_id` field of an event has an empty value
-
-The three cases above will cause the event to not be ingested, but you will still receive a `200: OK` response from us. 
+-   An event does not have a name
+-   An event does not have the `distinct_id` field set
+-   The `distinct_id` field of an event has an empty value
 
-This approach allows us to process events asynchronously if necessary, ensuring reliability and low latency for our event ingestion endpoints. 
+The three cases above will cause the event to not be ingested, but you will still receive a `200: OK` response from us.
 
+This approach allows us to process events asynchronously if necessary, ensuring reliability and low latency for our event ingestion endpoints.
 
 # Feature flags
 

diff --git a/contents/docs/integrate/ingest-historic-data.mdx b/contents/docs/integrate/ingest-historic-data.mdx
@@ -4,9 +4,6 @@ sidebar: Docs
 showTitle: true
 ---
 
-import { Tabs } from 'antd'
-export const TabPane = Tabs.TabPane
-
 Historical data ingestion (or importing data), opposed to [live data ingestion](/docs/integrate/ingest-live-data), is the process of transporting data from external sources into PostHog so you can benefit from PostHog product analytics on historical data. It may be that you have historical data that you want to analyze along with new live data or that you have a requirement to periodically import data from third-party sources to augment your live data.
 
 Whatever the reason for the historical data ingestion, this guide covers what to consider during that process.
@@ -87,34 +84,46 @@ import GoCapture from './server/go/snippets/capture.mdx'
 import RubyCapture from './server/ruby/snippets/capture.mdx'
 import CURLCapture from './server/curl/snippets/capture.mdx'
 
+import Tab from "components/Tab"
+
 > The server libraries handle batching capture requests. If you decide to use the API directly you will need to manage this yourself.
 
-<Tabs defaultActiveKey="1" type="card" size="large" style={{marginBottom: "20px"}}>
-  <TabPane tab="Node.js" key="1">
-    <NodeCapture />
-    <p>For more information see the <a href="/docs/integrate/server/node">Node.js docs</a>.</p>
-  </TabPane>
-  <TabPane tab="Python" key="2">
-    <PythonCapture />
-    <p>For more information see the <a href="/docs/integrate/server/python">python docs</a>.</p>
-  </TabPane>
-  <TabPane tab="PHP" key="3">
-    <PHPCapture />
-    <p>For more information see the <a href="/docs/integrate/server/php">PHP docs</a>.</p>
-  </TabPane>
-  <TabPane tab="Go" key="4">
-    <GoCapture />
-    <p>For more information see the <a href="/docs/integrate/server/go">Go docs</a>.</p>
-  </TabPane>
-  <TabPane tab="Ruby" key="5">
-    <RubyCapture />
-    <p>For more information see the <a href="/docs/integrate/server/ruby">Ruby docs</a>.</p>
-  </TabPane>    
-  <TabPane tab="cURL" key="6">
-    <CURLCapture />
-    <p>For more information see the <a href="/docs/api">API docs</a>.</p>
-  </TabPane>
-</Tabs>
+<Tab.Group>
+  <Tab.List>
+    <Tab>Node.js</Tab>
+    <Tab>Python</Tab>
+    <Tab>PHP</Tab>
+    <Tab>Go</Tab>
+    <Tab>Ruby</Tab>
+    <Tab>cURL</Tab>
+  </Tab.List>
+  <Tab.Panels>
+    <Tab.Panel>
+      <NodeCapture />
+      <p>For more information see the <a href="/docs/integrate/server/node">Node.js docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <PythonCapture />
+      <p>For more information see the <a href="/docs/integrate/server/python">python docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <PHPCapture />
+      <p>For more information see the <a href="/docs/integrate/server/php">PHP docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <GoCapture />
+      <p>For more information see the <a href="/docs/integrate/server/go">Go docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <RubyCapture />
+      <p>For more information see the <a href="/docs/integrate/server/ruby">Ruby docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <CURLCapture />
+      <p>For more information see the <a href="/docs/api">API docs</a>.</p>
+    </Tab.Panel>
+  </Tab.Panels>
+</Tab.Group>
 
 ## User identification
 
@@ -127,29 +136,39 @@ import GoIdentify from './server/go/snippets/identify.mdx'
 import RubyIdentify from './server/ruby/snippets/identify.mdx'
 import CURLIdentify from './server/curl/snippets/identify.mdx'
 
-<Tabs defaultActiveKey="1" type="card" size="large" style={{marginBottom: "20px"}}>
-  <TabPane tab="Node.js" key="1">
-    <NodeIdentify />
-    <p>For more information see the <a href="/docs/integrate/server/node">Node.js docs</a>.</p>
-  </TabPane>
-  <TabPane tab="Python" key="2">
-    <PythonIdentify />
-    <p>For more information see the <a href="/docs/integrate/server/python">Python docs</a>.</p>
-  </TabPane>
-  <TabPane tab="PHP" key="3">
-    <PHPIdentify />
-    <p>For more information see the <a href="/docs/integrate/server/php">PHP docs</a>.</p>
-  </TabPane>
-  <TabPane tab="Go" key="4">
-    <GoIdentify />
-    <p>For more information see the <a href="/docs/integrate/server/go">Go docs</a>.</p>
-  </TabPane>
-  <TabPane tab="Ruby" key="5">
-    <RubyIdentify />
-    <p>For more information see the <a href="/docs/integrate/server/ruby">Ruby docs</a>.</p>
-  </TabPane>    
-  <TabPane tab="cURL" key="6">
-    <CURLIdentify />
-    <p>For more information see the <a href="/docs/api">API docs</a>.</p>
-  </TabPane>
-</Tabs>
+<Tab.Group>
+  <Tab.List>
+    <Tab>Node.js</Tab>
+    <Tab>Python</Tab>
+    <Tab>PHP</Tab>
+    <Tab>Go</Tab>
+    <Tab>Ruby</Tab>
+    <Tab>cURL</Tab>
+  </Tab.List>
+  <Tab.Panels>
+    <Tab.Panel>
+      <NodeIdentify />
+      <p>For more information see the <a href="/docs/integrate/server/node">Node.js docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <PythonIdentify />
+      <p>For more information see the <a href="/docs/integrate/server/python">Python docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <PHPIdentify />
+      <p>For more information see the <a href="/docs/integrate/server/php">PHP docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <GoIdentify />
+      <p>For more information see the <a href="/docs/integrate/server/go">Go docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <RubyIdentify />
+      <p>For more information see the <a href="/docs/integrate/server/ruby">Ruby docs</a>.</p>
+    </Tab.Panel>
+    <Tab.Panel>
+      <CURLIdentify />
+      <p>For more information see the <a href="/docs/api">API docs</a>.</p>
+    </Tab.Panel>
+  </Tab.Panels>
+</Tab.Group>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,5 @@ @@
     *.lock
     .cache/
     public/
+    node_modules/
+    static/
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		--add.ignore-workspace-root-check=true
		--add.ignore-workspace-root-check true