Publish API docs to GitHub Pages

.github/workflows/main.yml

@@ -2,24 +2,21 @@ name: CI
 
 on:
   push:
-    branches: [ "develop", "master" ]
+    branches: ['develop', 'master']
   pull_request:
-    branches: [ "develop", "master" ]
-
+    branches: ['develop', 'master']
   workflow_dispatch:
 
 jobs:
   lint:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v3
-
+      - uses: actions/checkout@v4
       - name: Setup Node.js environment
-        uses: actions/[email protected]
-
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
       - name: Run npm
         run: npm ci
-
       - name: Check lint
         run: npm run lint

.github/workflows/npm-publish.yml

@@ -8,23 +8,13 @@ on:
     types: [created]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-
   publish-npm:
-    needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish

.github/workflows/pages.yml

@@ -0,0 +1,43 @@
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - develop
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Run npm
+        run: npm ci
+      - name: Build API docs
+        run: npm run docs
+      - name: Build website
+        uses: actions/jekyll-build-pages@v1
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}

.gitignore

@@ -70,3 +70,10 @@ ios/custom/Frameworks/**/*.zip
 ios/custom/Frameworks/integrations
 ios/build.sh
 ios/custom/Frameworks/tvos/*.xcframework
+
+# TypeDoc
+api/
+
+# Jekyll / GitHub Pages
+_site/
+Gemfile.lock

Gemfile

@@ -0,0 +1,36 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+# gem "jekyll", "~> 4.3.2"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+# gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+# gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+
+# Needed for `jekyll serve`
+gem "webrick", "~> 1.8"

_config.yml

@@ -0,0 +1,27 @@
+title: React Native THEOplayer
+description: >-
+  A React Native THEOplayerView component
+author: THEO Technologies
+remote_theme: pages-themes/[email protected]
+plugins:
+  - jekyll-remote-theme
+github:
+  source:
+    branch: "develop"
+    path: "/"
+include:
+  - api/
+exclude:
+  - LICENSE
+  - '.*.js'
+  - '*.json'
+  - '*.plugin.js'
+  - '*.config.js'
+  - '*.podspec'
+  - '.*/'
+  - android/
+  - example/
+  - ios/
+  - lib/
+  - node_modules/
+  - src/

doc/creating-minimal-app.md

@@ -53,6 +53,7 @@ $ npm i react-native-theoplayer --legacy-peer-deps
 
 Finally, replace the `App.tsx` with this minimal code:
 
+{% raw %}
 ```tsx
 import React from 'react';
 import {Platform, View} from 'react-native';
@@ -87,6 +88,7 @@ const App = () => {
 
 export default App;
 ```
+{% endraw %}
 
 When configuring a stream that is hosted on another server than `cdn.theoplayer.com`,
 a license for the React Native SDK needs to be obtained through the 'Licenses' built in the [THEOplayer portal](https://portal.theoplayer.com/)
@@ -143,7 +145,8 @@ To define which extra THEOplayer integrations need to be loaded for additional f
 
 Create a json file **[YourApplicationFolder]/react-native-theoplayer.json**, or **[YourApplicationFolder]/theoplayer-config.json**, on the same level as the node_modules folder (both alternatives offer the same functionality).
 
-Edit the file to reflect the features required for your application. The following example adds Google IMA, Chromecast and Sideloaded textTracks to the setup. If one of these is out of your applications scope, you can leave it out to reduce the app's size. When using only basic functionality, leave the features array empty. 
+Edit the file to reflect the features required for your application. The following example adds Google IMA, Chromecast and Sideloaded textTracks to the setup. If one of these is out of your applications scope, you can leave it out to reduce the app's size. When using only basic functionality, leave the features array empty.
+
 Example:
 ```
 {

doc/fullscreen.md

@@ -89,6 +89,7 @@ use [a package](https://www.npmjs.com/package/@alexzunik/rn-native-portals-rebor
 _relocates the native view to a different parent in the native view hierarchy_.
 This approach aims to prevent the remounting of the complex video component.
 
+{% raw %}
 ```tsx
 export default function App() {
   const [isMiniPlayer, setMiniPlayer] = useState(false);
@@ -117,6 +118,7 @@ export default function App() {
     </View>);
 }
 ```
+{% endraw %}
 
 The player component along with its UI container in the example above is wrapped in a `PortalOrigin`.
 Its destination is left `null` as long as the player is presented inline.

doc/migrating_v2.md

@@ -20,11 +20,10 @@ such as `player.autoplay = true` and `player.pause()`.
 
 <table>
 <th>v1.x</th><th>>= v2.x</th>
-
 <tr valign="top">
 <td>
 
-``` tsx
+```tsx
 const App = () => {
   return (
     <View style={styles.container}>
@@ -40,7 +39,7 @@ const App = () => {
 </td>
 <td>
 
-``` tsx
+```tsx
 const onPlayerReady = (player: THEOplayer) => {
   player.autoplay = true;
   player.source = source;
@@ -58,9 +57,7 @@ const App = () => {
 ```
 
 </td>
-
 </tr>
-
 </table>
 
 ### Listening to Player Events
@@ -70,11 +67,10 @@ by a subscription approach.
 
 <table>
 <th>v1.x</th><th>>= v2.x</th>
-
 <tr valign="top">
 <td>
 
-``` tsx
+```tsx
 const App = () => {
   const [error, setError] = useState<PlayerError | undefined>();
   const [textTracks, setTextTracks] = useState<TextTrack[]>([]);
@@ -104,7 +100,7 @@ const App = () => {
 </td>
 <td>
 
-``` tsx
+```tsx
 const App = () => {
   const theoPlayer = useRef<THEOplayer>();
   const [error, setError] = useState<PlayerError | undefined>();
@@ -132,9 +128,7 @@ const App = () => {
 ```
 
 </td>
-
 </tr>
-
 </table>
 
 ### AdsAPI and CastAPI
@@ -144,11 +138,10 @@ from the view's reference, it can now be requested directly from the player inst
 
 <table>
 <th>v1.x</th><th>>= v2.x</th>
-
 <tr valign="top">
 <td>
 
-``` tsx
+```tsx
 <THEOplayerView
   ref={(ref: THEOplayerView) => {
     this.player = ref;
@@ -165,7 +158,7 @@ const isPlayingAd = () => {
 </td>
 <td>
 
-``` tsx
+```tsx
 <THEOplayerView
   config={playerConfig}
   onPlayerReady={onPlayerReady}
@@ -181,7 +174,5 @@ const onPlayerReady = (player: THEOplayer) => {
 ```
 
 </td>
-
 </tr>
-
 </table>