pxi
block-content-to-react
Our great sponsors
pxi | block-content-to-react | |
---|---|---|
4 | 2 | |
267 | 161 | |
- | - | |
0.0 | 0.0 | |
over 3 years ago | about 1 year ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
pxi
-
The fastest tool for querying large JSON files is written in Python! (benchmark)
Very interesting piece of software :). I have put a lot of work in pxi, a very similar tool written in pure JavaScript. I am not here to start a flame war between Python and JavaScript btw., I am actually thrilled to find another person that has written a very similar project :).
-
New command-line parser with 35+ opt-in features developed for 5 months needs your feedback
I have been working on a command-line parser for one of my open source projects (pxi) for about 5 months now. Today I have reached a milestone and wanted to collect feedback before I move on:
- List of JSON tools for command line
-
[OC] pjs is an awk-like tool for processing text, CSV, JSON, HTML, and XML
Hey, good job! If you wrote this to get a task done, you may also want to have a look at pxi (disclosure, I am the author).
block-content-to-react
-
Anchor Links From Sanity in Gatsby
This is a simple react component that uses @sanity/block-content-to-react. The great part here is that they have allowed for serializers and you can add a great deal of customization to any of the block based PortableText that you will be receiving from the graphql from Sanity.io.
-
Make a Progressive Web App with React
// /src/MadLib.js import { useQuery } from 'react-query'; import { useParams, Link } from 'react-router-dom'; import { useState, useEffect } from 'react'; import BlockContent from '@sanity/block-content-to-react'; import { sanity, imageUrlBuilder } from './sanity'; import styles from './MadLib.module.css'; const query = ` *[ _type == 'madLib' && slug.current == $slug ] `; function MadLib() { // this variable is populated from `react-router` which pulls it from the URL const { slug } = useParams(); // data is fetched from sanity via the sanity client and stored into // application state via react-query. note that the slug is used as the // "query key": https://react-query.tanstack.com/guides/query-keys const { data = [] } = useQuery(slug, () => sanity.fetch(query, { slug })); // we'll use destructuring assignment to return the first mab lib const [madLib] = data; // this will store the state of the answers of this mad lib const [answers, setAnswers] = useState( // if the items exist in localStorage, then localStorage.getItem(slug) ? // then set the initial state to that value JSON.parse(localStorage.getItem(slug)) : // otherwise, set the initial state to an empty object {}, ); // this is a react "effect" hook: https://reactjs.org/docs/hooks-effect.html // we use this to watch for changes in the `slug` or `answers` variables and // update local storage when those change. useEffect(() => { localStorage.setItem(slug, JSON.stringify(answers)); }, [slug, answers]); if (!madLib) { return
Loading…h1>; } // once the mad lib is loaded, we can map through the structured content to // find our placeholder shape. the end result is an array of these placeholders const placeholders = madLib?.story .map((block) => block.children.filter((n) => n._type === 'placeholder')) .flat(); // using the above placeholders array, we calculate whether or not all the // blanks are filled in by checking the whether every placeholder has a value // in the `answers` state variable. const allBlanksFilledIn = placeholders?.every( (placeholder) => answers[placeholder._key], ); return ( <>
{madLib.title}h2> {!allBlanksFilledIn ? ( // if all the blanks are _not_ filled in, then we can show the form <>
Fill in the blank!p>
When you're done, the finished mad lib will appear.p>
{ e.preventDefault(); const answerEntries = Array.from( // find all the inputs e.currentTarget.querySelectorAll('input'), ) // then get the name and values in a tuple .map((inputEl) => [inputEl.name, inputEl.value]); // use `Object.fromEntries` to transform them back to an object const nextAnswers = Object.fromEntries(answerEntries); setAnswers(nextAnswers); }} >-
{/* for each placeholder… */}
{placeholders.map(({ _key, type }) => (
- {/* …render an input an a label. */} {type} label> li> ))} ul> Submit!button> form> ) : ( // if all the blanks are filled in, then we can show the rendered // story with a custom serializer for the type `placeholder` <> answers[_key] }, }} /> { // we reset the state on click after the users confirms it's okay. if (window.confirm('Are you sure you want to reset?')) { setAnswers({}); } }} > Reset button> {/* this is a simple link back to the main mab libs index */} ← More Mad Libs Link> )} ); } export default MadLib;
What are some alternatives?
jid - json incremental digger
fill-in-the-blank - This is for an article i'm writing.
yamlpath - YAML/JSON/EYAML/Compatible get/set/merge/validate/scan/convert/diff processors using powerful, intuitive, command-line friendly syntax.
React-Commenting-System - Commenting System built with NextJS and Sanity
Textrude - Code generation from YAML/JSON/CSV models via SCRIBAN templates
portabletext - Portable Text is a JSON based rich text specification for modern content editing platforms.
jfq - JSONata on the command line
HULL - 💀 Headless Shopify Starter – powered by Next.js + Sanity.io
spyql - Query data on the command line with SQL-like SELECTs powered by Python expressions
sanity - Sanity Studio – Rapidly configure content workspaces powered by structured content
fx - Terminal JSON viewer & processor
nvim-jqx - Populate the quickfix with json entries