Merge pull request #21 from ibelem/blog

Add blog - onnx2webnn

Author: ibelem

app/_components/authors.jsx

@@ -0,0 +1,33 @@
+import { getDictionary } from '../_dictionaries/get-dictionary'
+
+export const TopContent = async ({ title, date, authors, lang }) => {
+  const dictionary = await getDictionary(lang)
+  const dateObj = new Date(date)
+  return (
+    <>
+      <h1 className="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-bold x:mt-2 x:text-4xl">{title}</h1>
+      <div className="my-4 text-sm text-gray-400">
+        <time dateTime={dateObj.toISOString()}>
+          {dateObj.toLocaleDateString(lang, {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </time>{' '}
+        {dictionary.by}{' '}
+        {authors.map(author => (
+          <span key={author.name} className="not-last:after:content-[',_']">
+            <a
+              href={author.link}
+              target="_blank"
+              rel="noreferrer"
+              className="text-gray-800 dark:text-gray-100"
+            >
+              {author.name}
+            </a>
+          </span>
+        ))}
+      </div>
+    </>
+  )
+}

app/_components/blog.jsx

@@ -0,0 +1,34 @@
+import { Link } from 'nextra-theme-docs'
+import { getPageMap } from 'nextra/page-map'
+
+export const Blog = async ({ lang }) => {
+  const pageMap = await getPageMap(`/${lang}/blog`)
+  return pageMap.map(page => {
+    if (page.name === 'index') return
+    const { title, description, date } = page.frontMatter
+
+    return (
+      <div key={page.route} className="mt-12">
+        <h3 className="text-2xl font-semibold"><Link href={page.route} className="">{title}</Link></h3>
+        <p className="my-6 leading-7 opacity-80">
+          {description}{' '}
+          <Link href={page.route} className="after:content-['_→']">
+            Read more
+          </Link>
+        </p>
+        {date && !isNaN(new Date(date)) && (
+          <time
+            dateTime={new Date(date).toISOString()}
+            className="text-sm opacity-50"
+          >
+            {new Date(date).toLocaleDateString(lang, {
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric'
+            })}
+          </time>
+        )}
+      </div>
+    )
+  })
+}

app/_components/video.jsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useCallback, useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+export const Video = ({ src, caption, ratio }) => {
+  const [inViewRef, inView] = useInView({ threshold: 1 })
+  const videoRef = useRef(null)
+
+  const setRefs = useCallback(
+    (node) => {
+      // Ref's from useRef needs to have the node assigned to `current`
+      videoRef.current = node
+      // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
+      inViewRef(node)
+
+      node.addEventListener('click', function () {
+        if (this.paused) {
+          this.play()
+        } else {
+          this.pause()
+        }
+      })
+    },
+    [inViewRef]
+  )
+
+  useEffect(() => {
+    if (!videoRef.current) {
+      return
+    }
+
+    if (inView) {
+      videoRef.current.play()
+    } else {
+      videoRef.current.pause()
+    }
+  }, [inView])
+
+  return (
+    <div style={{ position: 'relative', margin: '2rem 1rem' }}>
+      <div style={{ paddingBottom: ratio * 100 + '%' }} />
+      <video
+        style={{ position: 'absolute', top: 0, left: 0 }}
+        loop
+        muted
+        autoPlay
+        playsInline
+        ref={setRefs}
+      >
+        <source src={src} type="video/mp4" />
+      </video>
+      {caption && (
+        <figcaption style={{ fontSize: '.9rem', textAlign: 'center' }}>
+          {caption}
+        </figcaption>
+      )}
+    </div>
+  )
+}

app/style.css

@@ -168,7 +168,7 @@ h5 {
   color: var(--n-1);
   background-color: var(--dark-bg);
   border-radius: 5px;
-  padding: 0 0.4rem;
+  padding: 0.2rem 0.6rem;
 }
 
 .light h3:hover .x\:text-primary-600 {

content/en/_meta.js

@@ -22,6 +22,10 @@ export default {
     title: 'FAQ',
     type: 'page',
   },
+  blog: {
+    title: 'Blog',
+    type: 'page',
+  },
   showcase: {
     title: 'Showcase',
     type: 'page',

content/en/blog.mdx

@@ -0,0 +1,9 @@
+---
+searchable: true
+---
+
+import { Blog } from '../../app/_components/blog'
+
+# WebNN
+
+<Blog lang={props.params.lang} />