In addition to the Storybook for React setup, you'll also need to install these packages:
npm i -D @babel/core babel-loader css-loader style-loader
function string_to_slug (str) { | |
str = str.replace(/^\s+|\s+$/g, ''); // trim | |
str = str.toLowerCase(); | |
// remove accents, swap ñ for n, etc | |
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; | |
var to = "aaaaeeeeiiiioooouuuunc------"; | |
for (var i=0, l=from.length ; i<l ; i++) { | |
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); | |
} |
In addition to the Storybook for React setup, you'll also need to install these packages:
npm i -D @babel/core babel-loader css-loader style-loader
import * as React from "react"; | |
import { useMousePosition } from "~/hooks/useMousePosition"; | |
/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */ | |
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) { | |
const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {}; | |
const [mouseX, mouseY] = useMousePosition(); | |
const positions = { x, y, h, w, mouseX, mouseY }; | |
return ( | |
<div |
Auth0 Brand Evolution | |
https://auth0.design/ | |
Great designers are strong at "product thinking." | |
https://twitter.com/joulee/status/1357748477548089344 | |
Webpack Nedir? | |
http://devnot.com/2021/webpack-nedir-webpacke-detayli-bir-bakis/ | |
Chalk |
/** | |
* Note: Requires the following dependencies: | |
* - `motion` | |
* - `react-use` | |
* - `is-web-crawler` | |
*/ | |
import { animate, spring } from 'motion' | |
import { isCrawlerUserAgent } from 'is-web-crawler' | |
import { useEffect, useRef } from 'react' |
import { Node, mergeAttributes } from "@tiptap/core"; | |
import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"; | |
import { Tldraw } from "@tldraw/tldraw"; // use @tldraw/tldraw@canary | |
import "@tldraw/tldraw/tldraw.css"; | |
function Component() { | |
return ( | |
<NodeViewWrapper className="react-component"> | |
<div style={{ width: "100%", height: 500 }}> | |
<Tldraw /> |
['absl-py==1.4.0', | |
'affine==2.4.0', | |
'aiohttp==3.8.1', | |
'aiosignal==1.3.1', | |
'analytics-python==1.4.post1', | |
'anyio==3.7.1', | |
'anytree==2.8.0', | |
'argcomplete==1.10.3', | |
'argon2-cffi-bindings==21.2.0', | |
'argon2-cffi==21.3.0', |