Styles

pomber · pomber · commit 7d673504f46e · 2020-08-14T16:08:53.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -4,5 +4,4 @@ todo.md
 dist
 yarn-error.log
 site/out
-xmdx/public/000.mp4
-xmdx/public/001.mp4
+xmdx/public/*.mp4
diff --git a/xmdx/demo/cake.mdx b/xmdx/demo/cake.mdx
@@ -1,4 +1,4 @@
-<Video src="001.mp4" start={0} end={40} />
+<Video src="r000.mp4" start={0} end={40} />
 <Browser url="/01" zoom={0.8} />
 <Editor
   code="hello.md"
@@ -7,6 +7,15 @@
   tabs={["demo/hello.md", "pages/hello.js"]}
 />
 
+```srt
+0.5 –> 4.5
+Let's start with markdown file
+I'm assuming we all know markdown
+4.5 –> 10.5
+there's a reason why it's so popular,
+the syntax is so clean
+```
+
 ---
 
 <Video src="001.mp4" start={40} end={56} />
diff --git a/xmdx/pages/content.md b/xmdx/pages/content.md
@@ -138,7 +138,9 @@ And the next step.
 
 ---
 
-Ok, that's all. I leave you here the links to the repo of the talk. Not the slides, but the talk itself. You run yarn dev and you can watch this talk again.
+Ok, that's all. The talk's takeaway is: you can use MDX to build your own dialect tailored for any specific layuout.
+
+I leave you here the links to the repo of the talk. Not the slides, but the talk itself. You run yarn dev and you can watch this talk again.
 
 Also there's my twitter, and the components we used, most of them come from a new project I'm working on, it's called Code Hike and it focuses on code walkthroughs and tools for making it easy to explain code.
 
diff --git a/xmdx/pages/index.js b/xmdx/pages/index.js
@@ -8,6 +8,7 @@ import { useSpring } from "use-spring"
 import { sim } from "@code-hike/sim-user"
 import { MDXProvider } from "@mdx-js/react"
 import Content from "../demo/cake.mdx"
+import Head from "next/head"
 
 const components = {
   wrapper: Wrapper,
@@ -60,7 +61,20 @@ function getStepsFromMDX(children) {
     }
   })
 
-  console.log({ editorSteps })
+  const captionSteps = splits.map(split => {
+    const pre = split.find(
+      child =>
+        child.props.mdxType === "pre" &&
+        child.props.children.props.className ===
+          "language-srt"
+    )
+    if (!pre) return []
+
+    return parseSrt(pre.props.children.props.children)
+  })
+
+  console.log(splits[0])
+  console.log(captionSteps)
 
   return {
     videoSteps,
@@ -69,9 +83,19 @@ function getStepsFromMDX(children) {
   }
 }
 
+function parseSrt(srt) {
+  const regex = /^[\d\.\:]+\s+[–\-]>\s+[\d\.\:]+$/gm
+  const times = srt.match(regex)
+  const [, ...texts] = srt.split(regex)
+  return times.map((time, i) => ({ time, text: texts[i] }))
+}
+
 export default function Page() {
   return (
     <MDXProvider components={components}>
+      <Head>
+        <title>The X in MDX</title>
+      </Head>
       <Content />
     </MDXProvider>
   )
@@ -169,13 +193,18 @@ function Talk({ videoSteps, browserSteps, editorSteps }) {
               ref={browserRef}
             />
           </div>
+          <div className={s.div4}>
+            <pre className={s.captions}>
+              there's a reason why it's so popular, <br />
+              the syntax is so clean
+            </pre>
+          </div>
           <div className={s.div3}>
             <div className={s.video}>
               <div
                 style={{
                   height: "100%",
                   float: "right",
-                  marginRight: -30,
                 }}
               >
                 <Video
@@ -186,7 +215,6 @@ function Talk({ videoSteps, browserSteps, editorSteps }) {
                   style={{
                     height: "100%",
                   }}
-                  muted
                   onStepChange={changeStep}
                   onTimeChange={onTimeChange}
                   ref={playerRef}
@@ -202,9 +230,15 @@ function Talk({ videoSteps, browserSteps, editorSteps }) {
                 }}
               >
                 <div>
-                  <span style={{ fontSize: "1.2em" }}>
+                  <a
+                    style={{
+                      fontSize: "1.2em",
+                      color: "#F19A38",
+                    }}
+                    href="https://twitter.com/pomber"
+                  >
                     @pomber
-                  </span>
+                  </a>
                   <div style={{ height: 5 }} />
                   <span style={{ fontSize: "1.8em" }}>
                     Rodrigo
@@ -214,9 +248,23 @@ function Talk({ videoSteps, browserSteps, editorSteps }) {
                     Pombo
                   </span>
                   <div style={{ height: 10 }} />
-                  <span style={{ fontSize: "1.3em" }}>
-                    FOO CONF
-                  </span>
+                  <a
+                    style={{ fontSize: "1.3em", margin: 0 }}
+                    href="https://mdxjs.com/conf/"
+                  >
+                    <span
+                      children="<"
+                      style={{
+                        color: "#F19A38",
+                        fontSize: "1.2em",
+                      }}
+                    />
+                    MDXConf
+                    <span
+                      children=" />"
+                      style={{ color: "#F19A38" }}
+                    />
+                  </a>
                 </div>
               </div>
             </div>
diff --git a/xmdx/pages/index.module.css b/xmdx/pages/index.module.css
@@ -18,15 +18,15 @@
   display: grid;
   height: 100%;
   grid-template-columns: repeat(7, 1fr);
-  grid-template-rows: repeat(6, 1fr);
+  grid-template-rows: repeat(7, 1fr);
   grid-column-gap: 16px;
   grid-row-gap: 16px;
   padding: 16px;
   box-sizing: border-box;
 }
 
 .div1 {
-  grid-area: 1 / 1 / 7 / 5;
+  grid-area: 1 / 1 / 8 / 5;
 }
 .div2 {
   grid-area: 1 / 5 / 5 / 8;
@@ -35,6 +35,27 @@
   grid-area: 5 / 5 / 7 / 8;
 }
 
+.div4 {
+  grid-area: 7 / 5 / 8 / 8;
+}
+
+.captions {
+  color: #ddd;
+  background-color: #222;
+  border-radius: 6px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-family: Ubuntu, Droid Sans, -apple-system,
+    BlinkMacSystemFont, Segoe WPC, Segoe UI, sans-serif;
+  box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.25),
+    0 3px 7px -3px rgba(0, 0, 0, 0.3);
+  padding: 0 16px;
+  margin: 0;
+}
+
 .author {
   width: 100%;
   height: 100%;
@@ -58,16 +79,25 @@
   position: absolute;
   display: flex;
   align-items: center;
-  text-align: right;
+  text-align: center;
   font-size: 0.8em;
   color: #bbb;
   background: linear-gradient(
     to right,
-    #222 34%,
+    #222 38%,
     transparent 75%
   );
   color: #ddd;
   padding: 32px;
   font-family: Ubuntu, Droid Sans, -apple-system,
     BlinkMacSystemFont, Segoe WPC, Segoe UI, sans-serif;
 }
+
+.details a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.details a:hover {
+  text-decoration: underline;
+}
diff --git a/xmdx/public/favicon.ico b/xmdx/public/favicon.ico
