Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
I may be slow to respond.

Derek Nguyen d4rekanguok

💭
I may be slow to respond.
  • Pen & Pillow
  • Seoul, SK
View GitHub Profile
@d4rekanguok
d4rekanguok / component.svelte
Last active Jan 18, 2022
A svelte component you can drop into your svelte kit app to view a list of all your components (poor man's Storybook)
View component.svelte
// updated to add props editting, rendering component inside iframe & allowing resizing viewer
<script context="module">
const modules = import.meta.globEager('/src/sections/*.svelte')
const componentNames = Object.keys(modules)
</script>
<script lang="ts">
import cx from 'clsx'
import { browser } from '$app/env'
@d4rekanguok
d4rekanguok / desk-structure.js
Created Oct 22, 2021
Monkey patch document list to hide create menu
View desk-structure.js
import S from '@sanity/desk-tool/structure-builder'
const DocumentListSansCreate = ({ title, filter }) => {
const _documentList = S.documentList()
.title(title)
.filter(filter)
_documentList.__serialize = _documentList.serialize.bind(_documentList)
_documentList.serialize = (...args) => {
const { menuItems, ...rest } = _documentList.__serialize(...args)
@d4rekanguok
d4rekanguok / fetch-meta.js
Last active Aug 2, 2021
Script to fetch metadata w/ Sanity before initiating Gatsby/Next/etc.
View fetch-meta.js
const path = require('path')
const fs = require('fs/promises')
require('dotenv').config({
// vvvvvvvvvv replace w/ your env
path: path.resolve(process.cwd(), '.env.local')
})
const createClient = require('@sanity/client')
const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
View Component.svelte
<script lang="ts">
export let name = 'World'
</script>
<div>Hello {name}</div>
View html-to-sanity-blocks.js
const { default: Schema } = require('@sanity/schema')
const { htmlToBlocks, randomKey } = require('@sanity/block-tools')
const { JSDOM } = require('jsdom')
const schemaBlog = Schema.compile({
name: 'myBlog',
types: [
{
title: 'Content',
name: 'content',
View gatsby-node.js
const fs = require('fs')
const path = require('path')
const toUpperCase = ([first, ...rest]) => [first.toUpperCase(), ...rest].join('')
exports.sourceNodes = ({ actions, createContentDigest, store }) => {
const { directory } = store.getState().program
const raw = fs.readFileSync(path.join(directory, 'package.json'))
View createResolvers.js
const unified = require('unified')
const remarkParse = require('remark-parse')
const remarkHtml = require('remark-html')
exports.createResolvers = ({
createResolvers,
}) => {
const toHTML = async (source) => {
const vfile = await unified()
.use(remarkParse)
@d4rekanguok
d4rekanguok / utils.ts
Created Jul 18, 2019
custom reorder widget for netlify cms
View utils.ts
import differenceBy from 'lodash/differenceBy'
export const hasItem = <T>(data: T[], item: T, key: keyof T): boolean => {
return data.some(datum => datum[key] === item[key])
}
export const removeOutdatedItem = <T>(
data: T[],
outdated: T[],
key: keyof T
@d4rekanguok
d4rekanguok / widget-id.js
Last active Aug 29, 2019
ID widget for netlifyCMS
View widget-id.js
/**
* This is now a npm package!
* Please find the better version of this gist here:
* https://github.com/d4rekanguok/netlify-cms-widgets/blob/master/packages/widget-id/src/control.tsx
*/
View article.js
import React from 'react'
import rehypeReact from 'rehype-react'
import { Helmet } from 'react-helmet'
import { graphql } from 'gatsby'
import PropTypes from 'prop-types'
import NoteBlock from '../components/note-block'
// import '../css/blog-post.css'; // make it pretty!