✨feat(视频组件): 增加懒加载 文档嵌入jsx

Author: summerscar

blog/about-codelab-club.md

@@ -37,7 +37,7 @@ CodeLab的第一笔捐赠来自罗云先生,这笔捐赠让我们得以全力以
 
 在很多人看来，我们可能有些不切实际，说得好听一点，有些理想主义。我很开心周围能有这样一群"不切实际"的朋友，我们选择做那些我们认为是对的事，而不是那些操作容易见效快的事。感谢早期推动着CodeLab的所有人。我将这份名单列出，名字不分先后。哈哈，我们做到了真正意义上的`不分先后`，用的便是`编程`，我写了几行代码来随机排列人名，你每次刷新页面，排序都将不同 :)
 
-
+<p>{['aaa', 'bbb', 'ccc', 'ddd', 'eee'].sort(() => Math.random() - 0.5).join('、')}</p>
 
 希望这份名单不断加长，也希望参与其中的每个人，热爱贡献、分享与创造的过程。
 
@@ -60,9 +60,9 @@ CodeLab的第一笔捐赠来自罗云先生,这笔捐赠让我们得以全力以
 {/*
 CodeLab将探索多种club模式，构建编程教育的基础设施，科普。我们力图做到中立、客观，不蹭热点不站队:)*/}
 
-线下方面，CodeLab将在全国主要城市，利用周末时间，组织志愿者、借用场地，开展编程活动；  
-线上方面，CodeLab将构建先进的编程平台，在积木化编程里加入开源硬件、物联网和人工智能；  
-同时我们将构建活跃的用户社区，鼓励志愿者、学习者、创造者参与其中；  
+线下方面，CodeLab将在全国主要城市，利用周末时间，组织志愿者、借用场地，开展编程活动；
+线上方面，CodeLab将构建先进的编程平台，在积木化编程里加入开源硬件、物联网和人工智能；
+同时我们将构建活跃的用户社区，鼓励志愿者、学习者、创造者参与其中；
 我们也乐于与其他公益组织展开合作，让编程与更广泛的社会活动结合。
 
 我们目前的办公室在广州，我们会先在广州探索各种club的模式，一旦运转流畅，我们就在全国各地去开展活动。
@@ -126,7 +126,7 @@ NASA(美国国家航空航天局)做了一个开源项目: [JPL Open Source Rove
 
 
 # 如何参与
-{/* >  那些疯狂到以为自己能够改变世界的人， 才能真正改变世界。 -- 史蒂夫·乔布斯*/} 
+{/* >  那些疯狂到以为自己能够改变世界的人， 才能真正改变世界。 -- 史蒂夫·乔布斯*/}
 
 有很多种方式参与CodeLab。
 

docusaurus.config.js

@@ -32,26 +32,26 @@ module.exports = {
           position: 'left',
         },
         {
-          
+
           href: 'https://adapter.codelab.club/',
           /*
-          to: 'docs/adapter',         
+          to: 'docs/adapter',
           activeBasePath:'docs/adapter',
            */
           label: '文档',
           position: 'left',
         },
-        { 
-          to: 'blog', 
+        {
+          to: 'blog',
           /*
           activeBasePath:'blog',
            */
-          label: '博客', 
+          label: '博客',
           position: 'left'
         },
-        { 
-          to: '/blog/2018/11/08/about-codelab-club', 
-          label:'关于我们', 
+        {
+          to: '/blog/2018/11/08/about-codelab-club',
+          label:'关于我们',
           position:'left'
         },
         {
@@ -139,14 +139,15 @@ module.exports = {
     ],
   ],
   scripts: [
+    'https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js',
     'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js',
     'https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js',
     'https://cdn.jsdelivr.net/npm/video.js/dist/video.min.js',
     '/script/settheme.js',
   ],
   stylesheets: [
     // https://unpkg.com/video.js/dist/video-js.min.css
-    // 
+    //
     //'https://unpkg.com/video.js/dist/video-js.min.css',
     'https://cdn.jsdelivr.net/npm/video.js/dist/video-js.min.css',
     'https://cdn.jsdelivr.net/npm/@videojs/themes@1/dist/fantasy/index.css'

src/pages/projects/index.js

@@ -70,6 +70,21 @@ export const VideoRow = function ({title, videos, ...props}) {
     }
   }
 
+  useLayoutEffect(() => {
+    const observer = window.lozad('.lozad', {
+      load: (el) => {
+        el.src = el.getAttribute('data-src');
+        // Custom implementation to load an element
+        // e.g. el.src = el.getAttribute('data-src');
+      },
+      loaded: (el) => {
+        el.removeAttribute('poster')
+        el.classList.add('loaded');
+      }
+    }); // lazy loads elements with default selector as '.lozad'
+    observer.observe();
+  })
+
   return (
     <div className="margin-top--log margin-bottom--log">
       {
@@ -82,22 +97,22 @@ export const VideoRow = function ({title, videos, ...props}) {
             <div className={clsx('col col--4')} key={index}>
               <div>
                 <video
-                  src={video.src}
-                  /*poster="/static/img/Play.PNG"*/
-                  className={clsx(styles.video)}
-                  onClick={() => openModal(video)}>
-                    <source src={video.src} type="video/mp4"/>
-                </video>
+                  type="video/mp4"
+                  poster="/static/img/Play.PNG"
+                  data-src={video.src}
+                  className={clsx(styles.video, 'lozad')}
+                  onClick={() => openModal(video)}
+                />
                 <p className={clsx('text--center', isDarkTheme && styles.headerFontTitle)}>{video.title}</p>
               </div>
-            
+
                 {/*
                 < div className={clsx(styles.videoName)}>
                   <p className={clsx('text--left', isDarkTheme && styles.headerFontNum)}>by CodeLab</p>
                   <p className={clsx('text--center', isDarkTheme && styles.headerFontTitle)}>{video.title}</p>
                 </div>
                 */}
-              
+
             </div>
           ))
         }
@@ -143,13 +158,13 @@ function Projects() {
           {/*
             <span className={clsx(styles.fancytitle1, 'stack')}>Let's &nbsp;</span>
             <span className={clsx(styles.fancytitle1, 'stack')}>&nbsp; Play!</span>
-          
+
             <h1 className={clsx(styles.fancytitle2, 'stack')}>无惧简陋与粗糙</h1>
             */}
             <h1 className={clsx(styles.fancytitle2, 'stack')}>在玩乐中创作与表达</h1>
         </div>
         <main className={clsx("container")}>
-          <VideoRow title="" videos={videos['来自CodeLab']}/>         
+          <VideoRow title="" videos={videos['来自CodeLab']}/>
           <VideoRow title="" videos={videos['来自社区']}/>
         </main>
       </div>