staging -> production

.gitignore

@@ -4,3 +4,4 @@ yarn-error.log
 .DS_Store
 /.log/
 .docusaurus
+*_version*

README.md

@@ -15,20 +15,16 @@ git clone https://github.com/getstream/stream-chat-docusaurus-cli
 
 cd stream-chat-docusaurus-cli
 
-# Install dependencies
+# Run the install command
 
-yarn
-
-# link the package so that npx picks it
-
-npm link
+npm install -g
 ```
 
 Within the same directory level of your SDK that the `docusaurus` directory described above lives you can run CLI commands. Make sure you have at least the directory structure described above as well as at least 1 markdown file.
 
 ### Starting
 
-To run the site locally and see your documentation, run `npx stream-chat-docusaurus -s`. 
+To run the site locally and see your documentation, run `npx stream-chat-docusaurus -s`.
 
 ### Environment variables
 
@@ -114,17 +110,14 @@ You can add your own sidebar instead of the auto-generated default by creating a
 To share content between multiple SDKs, put markdown files in the `shared` directory. During run, it will be symlinked next to your content.
 
 ```sh
-- docusaurus
-    - React
-    - Android
-    - iOS
-    - shared # this will be symlink to the shared directory
+- shared
+    - <your-shared-file> # this will be symlink to the shared directory
 ```
 
 Then, import and render the shared content using mdx:
 
 ```mdx
-import SharedContent from '../../../shared/_example-shared-content.md'
+import SharedContent from '../../../shared/_example-shared-content.md';
 
 <SharedContent />
 ```

constants.js

@@ -5,6 +5,7 @@ const folderMapping = {
   react: 'React',
   reactnative: 'React Native',
   angular: 'Angular',
+  api: 'API',
 };
 
 const platformMapping = {
@@ -13,7 +14,8 @@ const platformMapping = {
   ios: 'ios-swift',
   react: 'react',
   reactnative: 'react-native',
-  angular: 'angular'
+  angular: 'angular',
+  api: 'api',
 };
 
 const languageMapping = {
@@ -23,6 +25,7 @@ const languageMapping = {
   react: 'javascript',
   reactnative: 'javascript',
   angular: 'javascript',
+  api: 'javascript',
 };
 
 const DOCUSAURUS_INDEX =
@@ -31,11 +34,22 @@ const CMS_INDEX = 'DOCS';
 
 const IGNORED_DIRECTORIES = ['common-content'];
 
+const SDK_ORDER = [
+  'react',
+  'ios',
+  'android',
+  'reactnative',
+  'flutter',
+  'angular',
+  'api',
+];
+
 module.exports = {
   IGNORED_DIRECTORIES,
   DOCUSAURUS_INDEX,
   CMS_INDEX,
   folderMapping,
   platformMapping,
   languageMapping,
+  SDK_ORDER,
 };

docusaurus.config.js

@@ -16,7 +16,11 @@ if (!process.env.PRODUCT) {
   process.env.PRODUCT = 'chat';
 }
 
-const { folderMapping, IGNORED_DIRECTORIES } = require('./constants');
+const {
+  folderMapping,
+  IGNORED_DIRECTORIES,
+  SDK_ORDER,
+} = require('./constants');
 const URLS = require('./urls');
 const productVariables = require('./src/product-variables');
 const Icons = require('./admonition-icons');
@@ -33,12 +37,21 @@ const {
   docusaurus: { title: navbarTitle },
 } = productVariables[PRODUCT];
 
-const SDK_FOLDERS = DOCS_DIR.filter((file) => {
+let SDK_FOLDERS = DOCS_DIR.filter((file) => {
+  if (PRODUCT === 'video' && file === 'reactnative') {
+    return false;
+  }
   return fs
     .lstatSync(`${STREAM_SDK_DOCUSAURUS_PATH}/docs/${file}`)
     .isDirectory();
 });
 
+SDK_FOLDERS = SDK_FOLDERS.sort((a, b) => {
+  const aIndex = SDK_ORDER.indexOf(a.toLowerCase()) ?? 1000;
+  const bIndex = SDK_ORDER.indexOf(b.toLowerCase()) ?? 1000;
+  return aIndex - bIndex;
+});
+
 const CUSTOM_PLUGIN_FILES = DOCUSAURUS_DIR_CONTENTS.filter((file) =>
   getCustomPluginRegExp().test(file)
 );
@@ -179,6 +192,15 @@ const navbarSDKItems = SDK_FOLDERS.map((SDK) => {
   };
 });
 
+// create sections in the dropdown by inserting two dividers.
+if (process.env.PRODUCT === 'video') {
+  navbarSDKItems.splice(0, 0, {
+    label: 'SDKs',
+    className: 'navbar__break',
+    href: '#',
+  });
+}
+
 const navbarVersionItems = SDK_FOLDERS.map((SDK) => ({
   docsPluginId: SDK.toLowerCase().replace(' ', ''),
   type: 'docsVersionDropdown',
@@ -205,9 +227,10 @@ const navbarItems = [
 ];
 
 if (navbarSDKItems.length > 1) {
+  const label = process.env.PRODUCT === 'video' ? 'Video docs' : 'SDK';
   navbarItems.push({
     items: navbarSDKItems,
-    label: 'SDK',
+    label,
     className: 'navbar__link__custom-dropdown--sdks',
     position: 'left',
   });
@@ -226,8 +249,21 @@ if (process.env.DEPLOYMENT_ENV === 'production') {
   ]);
 }
 
+/**
+ * For video, we want to embed the homepage in the content repository.
+ */
+if (process.env.SOURCE_HOMEPAGE) {
+  plugins.push([
+    '@docusaurus/plugin-content-pages',
+    {
+      path: path.join(STREAM_SDK_DOCUSAURUS_PATH, 'pages'),
+    },
+  ]);
+} else {
+  plugins.push('@docusaurus/plugin-content-pages');
+}
+
 plugins.push(
-  '@docusaurus/plugin-content-pages',
   'docusaurus-plugin-sass',
   path.resolve(__dirname, 'src/symlink-docusaurus'),
   path.resolve(__dirname, 'src/define-env-vars-plugin'),
@@ -243,7 +279,7 @@ module.exports = {
   organizationName: 'GetStream',
   plugins,
   projectName: `stream-${PRODUCT}`,
-  tagline: `Stream ${productTitle} official component SDKs`,
+  tagline: `Stream ${productTitle} Component SDKs`,
   themeConfig: {
     // Docusaurus forces us to pass these values even if they are not internally used.
     // Theyre only used to show/hide the search bar in our case.

package.json

@@ -52,6 +52,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-toastify": "^7.0.4",
+    "remark-admonitions": "^1.2.1",
     "sass": "^1.34.0",
     "viz.js": "1.8.0"
   },

shared/_tokenSnippet.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import './tokenSnippet.css';
+
+const BASE_URL = 'https://stream-calls-dogfood.vercel.app/api/call/sample?';
+
+const STORAGE_KEY = 'tokenSnippetDataFor';
+
+async function callAPI(sampleApp) {
+  const constructedUrl = constructUrl(sampleApp);
+  const response = await fetch(constructedUrl);
+  const resultObject = await response.json();
+  return resultObject;
+}
+
+function constructUrl(sampleApp) {
+  return (
+    BASE_URL +
+    new URLSearchParams({
+      app_type: sampleApp,
+    })
+  );
+}
+
+export class TokenSnippet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loadingFinished: false,
+      sampleApp: props.sampleApp,
+      userId: 'Loading ...',
+      userName: 'Creating user name ...',
+      callId: 'Creating random call ID ...',
+      callType: 'Loading call type ...',
+      apiKey: 'Waiting for an API key ...',
+      token: 'Token is generated ...',
+      deepLink: 'Link is created ...',
+      displayStyle: props.displayStyle ?? 'full',
+    };
+  }
+
+  componentDidMount() {
+    const storedData = sessionStorage.getItem(STORAGE_KEY + this.state.sampleApp);
+    if (storedData) {
+      this.setState({
+        ...this.state,
+        loadingFinished: true,
+        ...JSON.parse(storedData),
+      });
+    } else {
+      callAPI(this.state.sampleApp).then((result) => {
+        const savedData = sessionStorage.getItem(STORAGE_KEY + this.state.sampleApp);
+        // We're checking again if another component might have written
+        // the data in the meantime. This is not ideal, but it works for now.
+        // (This happens for multiple elements on the same page)
+        if (savedData) {
+          this.setState({
+            ...this.state,
+            loadingFinished: true,
+            ...JSON.parse(savedData),
+          });
+        } else {
+          sessionStorage.setItem(STORAGE_KEY + this.state.sampleApp, JSON.stringify(result));
+          this.setState({
+            ...this.state,
+            loadingFinished: true,
+            ...result,
+          });
+        }
+      });
+    }
+  }
+
+  render() {
+    const showTable =
+      this.state.displayStyle === 'full' ||
+      this.state.displayStyle === 'credentials';
+
+    const showJoinLink =
+      this.state.displayStyle === 'full' || this.state.displayStyle === 'join';
+
+    return (
+      <div className="snippetStyle">
+        {showTable && (
+          <div>
+            <p>Here are credentials to try out the app with:</p>
+            <table className="snippetTable">
+              <thead>
+                <tr>
+                  <th>Property</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>API Key</td>
+                  <td>{this.state.apiKey}</td>
+                </tr>
+                <tr>
+                  <td>Token</td>
+                  <td className="tokenStyle">
+                    <span> {this.state.token}</span>
+                    {this.state.loadingFinished && (
+                      <button
+                        onClick={() =>
+                          navigator.clipboard.writeText(this.state.token)
+                        }
+                      >
+                        Copy
+                      </button>
+                    )}
+                  </td>
+                </tr>
+                <tr>
+                  <td>User ID</td>
+                  <td>{this.state.userId}</td>
+                </tr>
+                <tr>
+                  <td>Call ID</td>
+                  <td>{this.state.callId}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {showJoinLink && (
+          <span className="joinCallRow">
+            For testing you can join the call on our web-app:{' '}
+            <a
+              target="_blank"
+              rel="noreferrer noopener"
+              href={this.state.deepLink}
+              className="joinCallLink"
+            >
+              Join Call
+            </a>
+          </span>
+        )}
+      </div>
+    );
+  }
+}