chore(website): talks section (#3443)

* chore(website): talks section

* chore: remove dep

* chore: iframe react

* Update deep-dive-into-verdaccio.md

* chore: refactor talks

* Update deep-dive-into-verdaccio.md

* chore: remove code

* Update website.yml

* chore: remove old talks ref

.github/workflows/website.yml

@@ -8,6 +8,11 @@ on:
         - './.github/workflows/website.yml'
   schedule:
     - cron: '0 0 * * *' 
+
+concurrency: 
+  group: ${{ github.head_ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest

website/docs/talks.md

@@ -1,11 +0,0 @@
----
-id: talks
-title: "Talks"
----
-
-All talks could be find on our YouTube channel, please subscribe for new content.
-
-[![logo](https://cdn.verdaccio.dev/website/watch-us.png)](https://www.youtube.com/channel/UC5i20v6o7lSjXzAHOvatt0w)
-
-> If you want to reference any of your talks or tutorials, please write in your channel #contribute on discord and will be added to the channel.
-

website/docusaurus.config.js

@@ -126,6 +126,16 @@ module.exports = {
         showLastUpdateTime: true,
       }),
     ],
+    [
+      'content-docs',
+      ({
+        id: 'talks',
+        path: 'talks',
+        routeBasePath: 'talks',
+        sidebarPath: require.resolve('./sidebarsTalk.js'),
+        showLastUpdateTime: true,
+      }),
+    ],
     [
       'docusaurus-plugin-typedoc',
       {
@@ -236,6 +246,11 @@ module.exports = {
           label: 'Community',
           position: 'left',
         },
+        {
+          href: '/talks',
+          label: 'Video Talks',
+          position: 'left',
+        },
         {
           type: 'localeDropdown',
           position: 'right',

website/package.json

@@ -42,6 +42,7 @@
     "p-cancelable": "2.1.1",
     "react-dom": "17.0.2",
     "react-player": "2.11.0",
+    "react-iframe": "1.8.4",
     "react-twitter-widgets": "^1.10.0",
     "typedoc": "0.23.16",
     "typedoc-plugin-markdown": "3.13.6",

website/sidebars.js

@@ -28,11 +28,7 @@ module.exports = {
           label: "Uses Cases",
           items: ["caching", "linking-remote-registry"]
         },
-        {
-          type: "category",
-          label: "Talks & Articles",
-          items: ["articles", "talks"]
-        },
+        "articles"
       ]
     },
     {

website/sidebarsCommunity.js

@@ -9,6 +9,11 @@ module.exports = {
       href: '/contributors',
       label: 'Meet the Contributors',
     },
+    {
+      type: 'link',
+      href: '/talks',
+      label: 'Video Talks',
+    },
     {
       type: 'link',
       label: 'Watch us on YouTube',

website/sidebarsTalk.js

@@ -0,0 +1,13 @@
+module.exports = {
+  community: [
+    {
+      type: 'autogenerated',
+      dirName: '.',
+    },
+    {
+      type: 'link',
+      label: 'Follow us on YouTube',
+      href: 'https://www.youtube.com/channel/UC5i20v6o7lSjXzAHOvatt0w',
+    }
+  ],
+};

website/src/components/Header.tsx

@@ -3,7 +3,6 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React from 'react';
-import ReactPlayer from 'react-player/youtube'
 import { Follow } from 'react-twitter-widgets';
 import cx from 'classnames';
 import { useMediaQuery } from 'usehooks-ts'
@@ -36,8 +35,8 @@ const Header = (): React.ReactElement => {
               style={{ marginTop: '8px' }}
             />
           <div className={styles['header--links']}>
-            <a href="https://github.com/verdaccio/verdaccio" className="link-secondary">
-              GITHUB
+            <a href="/Talks" className="link-secondary">
+              WATCH
             </a>
             <Link to={useBaseUrl('/docs/what-is-verdaccio')} className="link-primary">
               <Translate>GET STARTED</Translate>
@@ -55,10 +54,7 @@ const Header = (): React.ReactElement => {
             command="npm install --global verdaccio"
             alt={translate({ message: 'NPM command to install Verdaccio' })}
           />          
-        </div>      
-        {matches && <div className={styles['header--m-2']}>
-          <ReactPlayer url='https://www.youtube.com/watch?v=qRMucS3i3kQ' controls />
-        </div>}
+        </div>             
       </div>
       <div className={styles['header--absolute-links']}>
         <div>

website/src/pages/index.tsx

@@ -1,7 +1,6 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import React from 'react';
-import ReactPlayer from 'react-player/youtube'
 
 import Feature from '../components/Features';
 import Header from '../components/Header';
@@ -18,8 +17,7 @@ const Home = (): React.ReactElement => {
     <Layout title={siteConfig.tagline} description={siteConfig.customFields.description}>
       <header className={styles.header}>
         <Wave />
-        <Header />
-        
+        <Header />        
       </header>
       <main className={styles.main}>
         <UsedBy />        

website/talks/deep-dive-into-verdaccio.md

@@ -0,0 +1,42 @@
+---
+title: Deep dive into Verdaccio - NodeTLV 2022 - Israel
+hide_title: true
+keywords:
+  - verdaccio
+  - advanced
+sidebar_label: Deep dive into Verdaccio - 2022
+slug: deep-dive-into-verdaccio-nodetlv-2022-israel
+last_update:
+  date: 06/29/2022
+  author: Juan Picado
+---
+
+## Deep dive into Verdaccio - NodeTLV 2022 - Israel
+
+- Location: Tel Aviv-Yafo (Israel)
+- Conference: [Node.TLV](https://www.nodetlv.com)
+
+In this talk, you will discover a deep understanding of how a Node.js registry works. Advanced features that will help boost your registry productivity and what´s new for the next major release.
+
+### Video
+
+```mdx-code-block
+import ReactPlayer from 'react-player/youtube'
+
+<ReactPlayer url='https://youtu.be/qRMucS3i3kQ' height="600px" width="100%" pip controls/>
+```
+
+### Slides
+
+
+```mdx-code-block
+import Iframe from 'react-iframe'
+
+<Iframe url="https://www.slideshare.net/slideshow/embed_code/key/JkZpcKs7mir0Xx?hostedIn=slideshare&page=upload"
+    width="640px"
+    height="580px"
+    display="block"
+    scrolling={false}
+    position="relative"/>
+```
+

website/talks/index.md

@@ -0,0 +1,54 @@
+---
+title: Video Talks
+hide_title: true
+sidebar_label: Video Talks
+keywords:
+  - verdaccio
+  - videos
+  - youtube
+sidebar_position: 0
+---
+
+Subscribe to the channel watch more talks in the future.
+
+[![logo](https://cdn.verdaccio.dev/website/watch-us.png)](https://www.youtube.com/channel/UC5i20v6o7lSjXzAHOvatt0w)
+
+> If you are interested to reference any of your talks or tutorials that includes or refer to verdaccio tooling, please request it in our Discord channel `#contribute`.
+
+## The Latest Talks
+
+```mdx-code-block
+import ReactPlayer from 'react-player/youtube'
+
+<ReactPlayer url='https://youtube.com/playlist?list=PLP8UI_MhLljLk-HtxaEyOAPfEaVU6W1Q_' height="600px" width="100%" pip controls/>
+```
+
+## Verdaccio Public Talks
+
+```mdx-code-block
+
+<ReactPlayer url='https://www.youtube.com/embed/videoseries?list=PLP8UI_MhLljL5B4DEh20b1dfYI_DGj5IG' height="600px" width="100%" pip controls/>
+```
+
+## Must Watch
+
+```mdx-code-block
+
+<ReactPlayer url='https://youtube.com/playlist?list=PLP8UI_MhLljIDZOFHd7YlvUVhV89caeyu' height="600px" width="100%" pip controls/>
+```
+
+
+## Contributors Tutorials
+
+```mdx-code-block
+
+<ReactPlayer url='https://youtube.com/playlist?list=PLP8UI_MhLljIkGcN-czMCR3ET82prbs0O' height="600px" width="100%" pip controls/>
+```
+
+
+## Tutoriales en Español
+
+```mdx-code-block
+
+<ReactPlayer url='https://youtube.com/playlist?list=PLP8UI_MhLljIfH7rVncmRmj_nScZFywaG' height="600px" width="100%" pip controls/>
+```

website/versioned_docs/version-5.x/talks.md

@@ -1,11 +0,0 @@
----
-id: talks
-title: "Talks"
----
-
-All talks could be find on our YouTube channel, please subscribe for new content.
-
-[![logo](https://cdn.verdaccio.dev/website/watch-us.png)](https://www.youtube.com/channel/UC5i20v6o7lSjXzAHOvatt0w)
-
-> If you want to reference any of your talks or tutorials, please write in your channel #contribute on discord and will be added to the channel.
-

website/versioned_sidebars/version-5.x-sidebars.json

@@ -34,14 +34,7 @@
             "linking-remote-registry"
           ]
         },
-        {
-          "type": "category",
-          "label": "Talks & Articles",
-          "items": [
-            "articles",
-            "talks"
-          ]
-        }
+        "articles"
       ]
     },
     {