A Pen by Jake Albaugh on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { chakra, ThemingProps, useStyleConfig } from '@chakra-ui/react' | |
import NextImage, { ImageProps as NextImageProps } from 'next/image' | |
import { ReactElement } from 'react' | |
import { Sizes } from '../../theme/variables/image' | |
// TODO review props when NextJs is updated so we don't have to defined it here | |
/** | |
* ? Because NextJs typing is preventing auto-suggest for layout, width and height, | |
* ? we declare the styles differently in this component and will manage the switch | |
* ? to NextJs typings when calling NextJs `next/image` component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { StyleConfig } from '../../type/Chakra' | |
import { articleInnerSpacing } from './Article' | |
export const Image: StyleConfig = { | |
parts: ['layPicture', 'layImage', 'preImage'], | |
baseStyle: { | |
layPicture: {}, | |
layImage: { | |
// layout | |
display: 'inline-block' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mediaJSON = { "categories" : [ { "name" : "Movies", | |
"videos" : [ | |
{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org", | |
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ], | |
"subtitle" : "By Blender Foundation", | |
"thumb" : "images/BigBuckBunny.jpg", | |
"title" : "Big Buck Bunny" | |
}, | |
{ "description" : "The first Blender Open Movie from 2006", | |
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//This assumes NextJS with wordpress backend that has wpGraphql plugin installed. | |
//We're filling in all required metadata with standard wordpress fields. Recommend using ACF or equivalent to finetune the different | |
//fields, as ours will contain a few duplicates (i.e. category, subject, etc) | |
import Head from "next/head"; | |
import { format } from "date-fns"; | |
export default function MetadataComponent({ post }) { | |
//create function to strip html from content so that article body can be added to schema |