Skip to content

Instantly share code, notes, and snippets.

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" ],
@TheThirdRace
TheThirdRace / Image.tsx
Last active February 6, 2024 15:20
Image component: merge Chakra-ui `2.8.0` with NextJs `13.4.13` and remove most pain points
/**
* # `<Image>`
*
* This component is a merge between `next/image` and `Chakra-ui`.
* - last updated on 2023-08-08 with `next/image` 13.4.13 and `chakra-ui/react` 2.8.0
* - https://github.com/vercel/next.js/blob/v13.4.13/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/commits/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/compare/v13.4.4...canary
*
@mckhames
mckhames / NextJS-JSON-LD-Post-Schema-Org-And-OpenGraph-Metadata.js
Last active March 31, 2022 13:15
How To Generate Schema-Org JSON-LD + OpenGraph Metadata with NextJS and Wordpress
//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