KTL-2944 feat: add the youtube playlist

Author: nikpachoo

.gitignore

@@ -50,3 +50,4 @@ generated
 
 /reports*
 /data/page_views_map.json
+.peer-deps-installed

.npmrc

@@ -1 +1,3 @@
-save-exact = true
+save-exact = true
+
+@webteam:registry=https://packages.jetbrains.team/npm/p/wt/npm/

README.md

@@ -139,6 +139,16 @@ You can:
 
 ## Local development
 
+### For internal contributors
+Use a VPN or the office network for development, if possible. Otherwise, see below.
+
+### For external contributors
+To build the website locally without corporate network access, set the following environment variable:
+
+`export USE_FALLBACK_FOR_INTERNAL_PACKAGES=1`
+
+This will allow the project to build, but some UI components will not be displayed because they are available only within the corporate network.
+
 #### preliminaries: python3 installed
 
 ```

blocks/server-side/additional-materials/additional-materials.tsx

@@ -5,7 +5,8 @@ import cn from 'classnames';
 import styles from './additional-materials.module.css';
 import { useTextStyles } from '@rescui/typography';
 
-import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
+// @ts-ignore
+import YoutubePlaylist from '@webteam/youtube-playlist/lib';
 
 export const AdditionalMaterials: FC = ({}) => {
 
@@ -25,11 +26,10 @@ export const AdditionalMaterials: FC = ({}) => {
                 </h3>
 
                 <div className="ktl-row">
-                    <div className="ktl-col-12 ktl-col-md-8">
-                        <YoutubePlayer
-                            mode={1}
-                            id="PLlFc5cFwUnmx-dpq9nkdaVJX0GnrM1Mp1"
-                            previewImgSrc="https://img.youtube.com/vi/0URxGa3q3tY/maxresdefault.jpg"
+                    <div className="ktl-col-12">
+                        <YoutubePlaylist
+                            playlistId="PLlFc5cFwUnmx-dpq9nkdaVJX0GnrM1Mp1"
+                            playlistTitle="Server-Side Development with Kotlin"
                         />
                     </div>
                 </div>

components/webteam-fallback/webteam-fallback.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const WebteamFallback = () => {
+    return <div>The component is not availalble without VPN</div>;
+};

components/webteam-fallback/youtube-playlist/lib/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
+
+interface YoutubePlaylistProps {
+    playlistId: string;
+    playlistTitle: string;
+}
+
+const YoutubePlaylist: FC<YoutubePlaylistProps> = ({ playlistId, playlistTitle }) => {
+    return (
+        <YoutubePlayer
+            mode={1}
+            id={playlistId}
+        />
+    );
+};
+
+export default YoutubePlaylist;

next.config.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const packageJSON = require('./package.json');
 
 const withPlugins = require('next-compose-plugins');
@@ -13,6 +14,20 @@ let transpiledPackages = [
     '@rescui/menu'
 ];
 
+if (process.env.USE_FALLBACK_FOR_INTERNAL_PACKAGES !== '1') {
+    transpiledPackages.push(
+        '@webteam/youtube-playlist',
+        '@webteam/ui-contexts',
+        '@webteam/colors',
+        '@webteam/toggle',
+        '@webteam/youtube-player',
+        '@webteam/use-fetch',
+        '@webteam/use-async-data',
+        '@webteam/bem-cn-fast',
+        '@webteam/list'
+    )
+}
+
 const withTranspile = nextTranspileModules(transpiledPackages);
 
 const nextConfig = {
@@ -44,6 +59,17 @@ const nextConfig = {
             type: 'asset/source'
         });
 
+        const useFallbackForInternalPackages = process.env.USE_FALLBACK_FOR_INTERNAL_PACKAGES === '1';
+
+        config.resolve.alias = config.resolve.alias || {};
+
+        if (useFallbackForInternalPackages) {
+            config.resolve.alias['@webteam'] = path.resolve(
+                __dirname,
+                'components/webteam-fallback'
+            );
+        }
+
         return config;
     },
 };

package.json

@@ -107,13 +107,21 @@
     "webpack-dev-server": "^4.3.1",
     "yaml-loader": "0.7.0"
   },
+  "webteamDependencies": {
+    "@webteam/ui-contexts": "0.10.10",
+    "@webteam/youtube-playlist": "1.8.3"
+  },
   "resolutions": {
     "sharp": "^0.28.3"
   },
+  "overrides": {
+    "sharp": "^0.28.3"
+  },
   "scripts": {
     "build": "yarn run build:production && yarn run next-build-static",
     "build:production": "NODE_ENV=production webpack  --mode production",
-    "postinstall": "cd node_modules/codemirror && rollup -c",
+    "install:internal": "node scripts/install-internal.js",
+    "postinstall": "npm run install:internal && cd node_modules/codemirror && rollup -c",
     "start": "webpack serve",
     "next-dev": "next dev",
     "next-build-static": "next build && next export",

scripts/install-internal.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const flagFile = path.join(process.cwd(), '.peer-deps-installed');
+
+if (fs.existsSync(flagFile)) {
+    console.log('Peer dependencies already installed, skipping...');
+    fs.rmSync(flagFile);
+    process.exit(0);
+}
+
+try {
+    const pkgPath = path.join(process.cwd(), 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    const peerDeps = pkg.webteamDependencies || {};
+    
+    if (Object.keys(peerDeps).length === 0) {
+        console.log('No optional peer dependencies to install.');
+        process.exit(0);
+    }
+    
+    if (process.env.USE_FALLBACK_FOR_INTERNAL_PACKAGES === '1') {
+        console.log('No external packages are installed, using fallback.');
+        process.exit(0);
+    }
+
+    const packagesToInstall = Object.entries(peerDeps)
+        .map(([name, version]) => `${name}@${version.replace(/"/g, '')}`)
+        .join(' ');
+
+    console.log(`Installing ${packagesToInstall} as optional peer dependencies...`);
+
+    execSync(`npm install --no-package-lock --no-save --legacy-peer-deps ${packagesToInstall}`, { stdio: 'inherit' });
+
+    fs.writeFileSync(flagFile, new Date().toISOString());
+
+    console.log('Peer dependencies installed successfully.');
+} catch (err) {
+    console.error('Failed to install peer dependencies:', err.message);
+    process.exit(1);
+}