feat(showcase): embed section

content/projects/sample.yml

@@ -108,6 +108,10 @@ content:
               controls: true
               muted: true
 
+          - type: embed
+            content:
+              code: '<iframe src="https://player.vimeo.com/video/333541450" width="640" height="270" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>'
+
           - type: text
             theme: dark
             content:

src/components/Projects/Section/sections/Embed/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import { IEmbed } from '../../types'
+import { Wrapper } from './styled'
+
+const Embed = (props: IEmbed) => {
+  return <Wrapper dangerouslySetInnerHTML={{ __html: props.code }} />
+}
+
+export default Embed

src/components/Projects/Section/sections/Embed/styled.ts

@@ -0,0 +1,15 @@
+import styled from '@theme'
+
+export const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`

src/components/Projects/Section/sections/index.ts

@@ -10,3 +10,4 @@ export { default as waterfall } from './Waterfall'
 export { default as testimonial } from './Testimonial'
 export { default as sticky } from './Sticky'
 export { default as highlight } from './Highlight'
+export { default as embed } from './Embed'

src/components/Projects/Section/types.ts

@@ -111,6 +111,11 @@ export interface IStickyImage extends IStickyBase {
 
 export type ISticky = IStickyVideo | IStickyImage
 
+// Embed
+export interface IEmbed {
+  code: string
+}
+
 // Highlight
 export interface IHighlight {
   text: string
@@ -128,6 +133,7 @@ export type sectionTypes =
   | 'testimonial'
   | 'sticky'
   | 'highlight'
+  | 'embed'
 export type SectionContent =
   | IText
   | IImage
@@ -139,6 +145,7 @@ export type SectionContent =
   | ITestimonial
   | ISticky
   | IHighlight
+  | IEmbed
 
 export interface ISection {
   type: sectionTypes

src/components/Projects/Section/utils.ts

@@ -19,6 +19,7 @@ const defaultValues: { [K in sectionTypes]: layoutTypes } = {
   video: 'normal',
   waterfall: 'large',
   highlight: 'normal',
+  embed: 'normal',
 }
 
 const getProjectSectionWidth = (type: sectionTypes, layout?: layoutTypes) => {

src/templates/project.tsx

@@ -322,6 +322,9 @@ export const query = graphql`
               # Highlight
 
               #text
+
+              # Embed
+              code
             }
           }
         }