diff --git a/README.md b/README.md index 3feae26..124546c 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ This project is a port of [react-wrap-balancer](https://github.com/shuding/react Simple Solid.js Component That Makes Titles More Readable +![Example](/example.png) + ## Introduction [**Solid Wrap Balancer**](https://solid-wrap-balancer.vercel.app) is a simple Solid Component that makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like a single word in the last line, makes the content more “balanced”: @@ -69,6 +71,6 @@ For full documentation and use cases, please visit [**solid-wrap-balancer.vercel This project is a port of [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) made by [Shu Ding](https://twitter.com/shuding_) to solid.js - ## Flow + If there is a context - it initialize it with realyout function. The Rebalancer init script for each element, but if it has a context - it uses its existing relayout function from the global window context. In SSR it inject hte ratio prop to the element. When the component load it search for the script and call it with the component id. The script is a resizable observer that try to rebalance text according to ratio. If Decrease it's with to see if the height changes and go to the smallest width that the height keep the same. When unmount / ratio changes - clean observer and element function. diff --git a/dev/css.d.ts b/dev/css.d.ts new file mode 100644 index 0000000..efff394 --- /dev/null +++ b/dev/css.d.ts @@ -0,0 +1,7 @@ +import * as CSS from "csstype"; + +declare module "csstype" { + interface Properties { + "--w"?: CSS.Property.Width; + } +} diff --git a/dev/package.json b/dev/package.json index 88fff50..54f6cf5 100644 --- a/dev/package.json +++ b/dev/package.json @@ -32,14 +32,10 @@ "dependencies": { "@solidjs/meta": "^0.28.2", "@solidjs/router": "^0.6.0", - "@trpc/client": "10.7.0", - "@trpc/server": "10.7.0", "copy-to-clipboard": "^3.3.3", "solid-devtools": "^0.24.7", "solid-js": "^1.6.8", - "solid-spring": "^0.0.7", "solid-start": "^0.2.11", - "solid-start-trpc": "^0.0.16", "undici": "5.14.0", "zod": "^3.20.2" }, diff --git a/dev/pnpm-lock.yaml b/dev/pnpm-lock.yaml index 54f396b..7ae63f7 100644 --- a/dev/pnpm-lock.yaml +++ b/dev/pnpm-lock.yaml @@ -4,8 +4,6 @@ specifiers: '@solidjs/meta': ^0.28.2 '@solidjs/router': ^0.6.0 '@trivago/prettier-plugin-sort-imports': ^4.0.0 - '@trpc/client': 10.7.0 - '@trpc/server': 10.7.0 '@tsconfig/strictest': ^1.0.2 autoprefixer: ^10.4.13 copy-to-clipboard: ^3.3.3 @@ -19,10 +17,8 @@ specifiers: prettier-plugin-tailwindcss: ^0.2.1 solid-devtools: ^0.24.7 solid-js: ^1.6.8 - solid-spring: ^0.0.7 solid-start: ^0.2.11 solid-start-node: ^0.2.11 - solid-start-trpc: ^0.0.16 solid-start-vercel: ^0.2.11 solid-wrap-balancer: ^0.0.2 tailwindcss: ^3.2.4 @@ -35,14 +31,10 @@ specifiers: dependencies: '@solidjs/meta': 0.28.2_solid-js@1.6.8 '@solidjs/router': 0.6.0_solid-js@1.6.8 - '@trpc/client': 10.7.0_@trpc+server@10.7.0 - '@trpc/server': 10.7.0 copy-to-clipboard: 3.3.3 solid-devtools: 0.24.7_hfrm4tqrrzcujjixyttunlyf2u solid-js: 1.6.8 - solid-spring: 0.0.7_solid-js@1.6.8 solid-start: 0.2.11_hfrm4tqrrzcujjixyttunlyf2u - solid-start-trpc: 0.0.16_rmcrcy2rzasit5v5g43xykyply undici: 5.14.0 zod: 3.20.2 @@ -1953,18 +1945,6 @@ packages: - supports-color dev: true - /@trpc/client/10.7.0_@trpc+server@10.7.0: - resolution: {integrity: sha512-xCPc2hp37REJst6TXMkJvdc85CHvxpVY6YVdZIjl7uCYoQcrstwy8AWi7ElB3x7e19Cweke+9CAaUXKwAE1AKQ==} - peerDependencies: - '@trpc/server': 10.7.0 - dependencies: - '@trpc/server': 10.7.0 - dev: false - - /@trpc/server/10.7.0: - resolution: {integrity: sha512-kFhlqhzZt5PwVRRDci8oJKMMFGjjq9189stT6bvS9xuuLjRzzwhMShRi99sm/jqhdjWmlXyO3Ncx0rnghUvH+w==} - dev: false - /@trysound/sax/0.2.0: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -6200,14 +6180,6 @@ packages: '@babel/types': 7.20.7 solid-js: 1.6.8 - /solid-spring/0.0.7_solid-js@1.6.8: - resolution: {integrity: sha512-/sP/z4nvXYSHH557IRPKN+H33OrnshT89mOlFynMqxbHGKxReut0xTkGrdWysp+mLR7DlqX+vqNJBY4PPtwgyg==} - peerDependencies: - solid-js: ^1.3.13 - dependencies: - solid-js: 1.6.8 - dev: false - /solid-start-node/0.2.11_sp7myxm6rxzrac4riakledllqu: resolution: {integrity: sha512-wnk+Yif4L+5ipSOURyT9TwoDJYr1RMbT7qjPanxUU7qJNp0JdWiQgK0cJfijYNRGjClGkbyucnXjVbVHh7kYbg==} peerDependencies: @@ -6230,20 +6202,6 @@ packages: - supports-color dev: true - /solid-start-trpc/0.0.16_rmcrcy2rzasit5v5g43xykyply: - resolution: {integrity: sha512-99/EGIE0SObmCVhZR00bYpkEQpCDP22YgjalQpVgm0BKy2+tJzEC6vdvOII2Ppa0Fm7iPwc4LDZoFX2E3KYmsg==} - peerDependencies: - '@trpc/client': ^10.0.0 - '@trpc/server': ^10.0.0 - solid-js: ^1.5.7 - solid-start: ^0.2.1 - dependencies: - '@trpc/client': 10.7.0_@trpc+server@10.7.0 - '@trpc/server': 10.7.0 - solid-js: 1.6.8 - solid-start: 0.2.11_hfrm4tqrrzcujjixyttunlyf2u - dev: false - /solid-start-vercel/0.2.11_wd4moojhkeyjx5ja7mtof35eie: resolution: {integrity: sha512-UpaITA4SZ6nhWQoSqzCiWK135QOUEI3QKlAtx0JZIFXzSKnCuRt0amAT5l+dRGTnMc4NPLMRCJaQAjcX3Fq8rw==} peerDependencies: diff --git a/dev/public/bench.svg b/dev/public/bench.svg new file mode 100644 index 0000000..fba963b --- /dev/null +++ b/dev/public/bench.svg @@ -0,0 +1 @@ + diff --git a/dev/src/components/Counter.tsx b/dev/src/components/Counter.tsx deleted file mode 100644 index 4e2ad1d..0000000 --- a/dev/src/components/Counter.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { createSignal } from "solid-js"; - -export function Counter() { - const [count, setCount] = createSignal(0); - - return ( - - ); -} diff --git a/dev/src/root.css b/dev/src/root.css index 4049d9d..dd37ac6 100644 --- a/dev/src/root.css +++ b/dev/src/root.css @@ -13,6 +13,10 @@ body { height: 100%; } +.break { + word-break: break-word; +} + p, h1, h2 { @@ -131,17 +135,6 @@ h3 { font-weight: 400; } -h3 > span::before { - content: ""; - width: 0; - height: 0; - border-left: 0.35em solid transparent; - border-right: 0.35em solid transparent; - border-bottom: 0.6em solid currentColor; - display: inline-block; - margin-right: 0.4em; -} - h3 + .headline { margin-top: 10px; } @@ -364,6 +357,8 @@ h2 { } .tooltip-trigger { + display: flex; + justify-content: center; margin-top: 120px; margin-bottom: 10px; padding: 4px; diff --git a/dev/src/routes/api/trpc/[trpc].ts b/dev/src/routes/api/trpc/[trpc].ts deleted file mode 100644 index b6f984e..0000000 --- a/dev/src/routes/api/trpc/[trpc].ts +++ /dev/null @@ -1,11 +0,0 @@ -import { createSolidAPIHandler } from "solid-start-trpc"; -import { createContext } from "~/server/trpc/context"; -import { appRouter } from "~/server/trpc/router/_app"; - -const handler = createSolidAPIHandler({ - router: appRouter, - createContext, -}); - -export const GET = handler; -export const POST = handler; diff --git a/dev/src/routes/index.tsx b/dev/src/routes/index.tsx index a34c371..f11b195 100644 --- a/dev/src/routes/index.tsx +++ b/dev/src/routes/index.tsx @@ -1,68 +1,599 @@ -import { A } from "@solidjs/router"; -import { createSignal } from "solid-js"; -import { Balancer } from "solid-wrap-balancer"; +import copy from "copy-to-clipboard"; +import type { JSX } from "solid-js"; +import { Show, createSignal, mergeProps } from "solid-js"; +import Copiedcon from "~/assets/copied.svg"; +import CopyIcon from "~/assets/copy.svg"; +import GithubIcon from "~/assets/github.svg"; +import TooltipArrowIcon from "~/assets/tooltip-arrow.svg"; +import TooltipTriggerIcon from "~/assets/tooltip-tigger.svg"; +import { Balancer, BalancerProvider } from "../../../src"; -export default function HomePage() { - const [ratio, setRatio] = createSignal(1); - const [width, setWidth] = createSignal(339); - const [text, setText] = createSignal( - "The quick brown fox jumps over the lazy dog" - ); - const widthString = () => `${width()}px`; +const content = ( + <> +
+
+
+ +); + +// Quick and dirty monochrome code highlighter via string templates, don't use this. +function highlightedCode( + fades: TemplateStringsArray, + ...highlighted: Array +) { + const elements = []; + + for (const fade of fades) { + elements.push({fade}); + if (highlighted.length > 0) { + elements.push({highlighted.shift()}); + } + } + + return elements; +} +function Comparison(_props: { + a: JSX.Element; + b: JSX.Element; + align?: "center" | "left" | "start"; +}) { + const [width, setWidth] = createSignal(0.55); + const props = mergeProps({ align: "left" as const }, _props); return ( -
-
+
+
+ { + setWidth(Number(e.currentTarget.value)); + }} + /> +
+ {/* TODO: fix it*/} +
- - { - setWidth(Number.parseInt(e.currentTarget.value)); - }} - /> - - - { - setRatio(Number.parseFloat(e.currentTarget.value)); - }} - /> - -