@foldjs/svelte 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +8 -8
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -3,19 +3,19 @@
3
3
  [![npm](https://img.shields.io/npm/v/foldjs?color=5b4bff)](https://www.npmjs.com/package/foldjs)
4
4
  [![gzip size](https://img.shields.io/bundlejs/size/foldjs?label=gzip)](https://bundlejs.com/?q=foldjs)
5
5
  [![license](https://img.shields.io/npm/l/foldjs)](LICENSE)
6
- [![demo](https://img.shields.io/badge/demo-live-5b4bff)](https://christophe77.github.io/foldjs/)
6
+ [![demo](https://img.shields.io/badge/demo-live-5b4bff)](https://christophe77.github.io/fold.js/)
7
7
 
8
8
  **fold.js is an open-source JavaScript library that makes web apps work properly on foldable phones** such as the Samsung Galaxy Z Fold, Google Pixel Fold, Honor Magic V or Microsoft Surface Duo. It detects the hinge and the device posture (flat, book, tabletop), and gives you two-pane layouts that never put content under the hinge. It works with React, Vue, Svelte, Solid, Angular, Astro or plain HTML, weighs about 2 kB, and ships with a built-in foldable simulator so you can build without owning a device.
9
9
 
10
- > 📊 **New study:** [94% of popular websites split a button across a foldable's hinge](https://christophe77.github.io/foldjs/study.html) (79 sites audited on a Galaxy Z Fold, including Google, Amazon and Facebook, plus a run at the leaked iPhone Fold size: 88%).
10
+ > 📊 **New study:** [94% of popular websites split a button across a foldable's hinge](https://christophe77.github.io/fold.js/study.html) (79 sites audited on a Galaxy Z Fold, including Google, Amazon and Facebook, plus a run at the leaked iPhone Fold size: 88%).
11
11
 
12
- ### [▶ Try the live demo](https://christophe77.github.io/foldjs/) (works on desktop: the simulator is built in) · [See an existing site fixed in one line](https://christophe77.github.io/foldjs/legacy.html)
12
+ ### [▶ Try the live demo](https://christophe77.github.io/fold.js/) (works on desktop: the simulator is built in) · [See an existing site fixed in one line](https://christophe77.github.io/fold.js/legacy.html)
13
13
 
14
14
  ```bash
15
15
  npx foldjs audit https://your-site.com # how foldable-ready is your site? Score out of 100 + HTML report
16
16
  ```
17
17
 
18
- ![fold.js demo: npx foldjs audit scores a mobile site 83/100, the HTML report outlines elements under the hinge, foldjs/auto fixes the site to 100/100, then a fold.js app switches between book and tabletop postures](https://raw.githubusercontent.com/christophe77/foldjs/main/docs/demo.gif)
18
+ ![fold.js demo: npx foldjs audit scores a mobile site 83/100, the HTML report outlines elements under the hinge, foldjs/auto fixes the site to 100/100, then a fold.js app switches between book and tabletop postures](https://raw.githubusercontent.com/christophe77/fold.js/main/docs/demo.gif)
19
19
 
20
20
  ## Why fold.js?
21
21
 
@@ -160,7 +160,7 @@ The panel also shows a live **foldable score** and outlines every element under
160
160
  ## Audit any website: `npx foldjs audit`
161
161
 
162
162
  ```bash
163
- npx foldjs audit https://christophe77.github.io/foldjs/legacy.html
163
+ npx foldjs audit https://christophe77.github.io/fold.js/legacy.html
164
164
  ```
165
165
 
166
166
  ```
@@ -178,7 +178,7 @@ npx foldjs audit https://christophe77.github.io/foldjs/legacy.html
178
178
  Report: ./foldjs-report/report.html
179
179
  ```
180
180
 
181
- It opens the page in headless Chrome at the real inner-screen sizes of the Samsung Galaxy Z Fold and Google Pixel Fold, in book and tabletop postures, and lists every element under the hinge. The HTML report shows annotated screenshots and a fix for each issue, plus a badge for your README: [![foldable-ready](https://img.shields.io/badge/foldable--ready-100%2F100-brightgreen)](https://github.com/christophe77/foldjs)
181
+ It opens the page in headless Chrome at the real inner-screen sizes of the Samsung Galaxy Z Fold and Google Pixel Fold, in book and tabletop postures, and lists every element under the hinge. The HTML report shows annotated screenshots and a fix for each issue, plus a badge for your README: [![foldable-ready](https://img.shields.io/badge/foldable--ready-100%2F100-brightgreen)](https://github.com/christophe77/fold.js)
182
182
 
183
183
  | Option | Default | |
184
184
  |---|---|---|
@@ -219,7 +219,7 @@ On a foldable (and in the simulator), it applies safe, reversible fixes as inlin
219
219
  | Any element is pushed off the hinge (titles, call-to-action buttons) | add `data-fold-avoid` | `avoid` |
220
220
  | An element and its children are never touched | add `data-fold-ignore` | |
221
221
 
222
- Turn a fix off with `autoFix({ bars: false })` or `<script src="…/auto.global.js" data-bars="false">`. [See it on a typical mobile site](https://christophe77.github.io/foldjs/legacy.html): the foldable score goes from 70 to 100 in book posture.
222
+ Turn a fix off with `autoFix({ bars: false })` or `<script src="…/auto.global.js" data-bars="false">`. [See it on a typical mobile site](https://christophe77.github.io/fold.js/legacy.html): the foldable score goes from 70 to 100 in book posture.
223
223
 
224
224
  ## iPhone Fold: the virtual fold
225
225
 
@@ -234,7 +234,7 @@ configure({ virtualFold: true }); // any landscape screen at least 600px tall
234
234
  configure({ virtualFold: false }); // never
235
235
  ```
236
236
 
237
- The iPhone Fold crease is reportedly much shallower than on earlier foldables, so content on the fold stays readable. The virtual fold is about using the wide inner screen well, not about hiding a gap. Preview it in the [demo](https://christophe77.github.io/foldjs/?virtual=1), and audit a site at the leaked iPhone Fold size with `npx foldjs audit <url> --device iphone-fold`.
237
+ The iPhone Fold crease is reportedly much shallower than on earlier foldables, so content on the fold stays readable. The virtual fold is about using the wide inner screen well, not about hiding a gap. Preview it in the [demo](https://christophe77.github.io/fold.js/?virtual=1), and audit a site at the leaked iPhone Fold size with `npx foldjs audit <url> --device iphone-fold`.
238
238
 
239
239
  ## Core API
240
240
 
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@foldjs/svelte",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Svelte store and actions for foldable phones: $fold, use:twoPane, use:foldWhen and a built-in foldable simulator. Works with SvelteKit.",
5
5
  "license": "MIT",
6
6
  "author": "christophe77",
7
7
  "repository": {
8
8
  "type": "git",
9
- "url": "git+https://github.com/christophe77/foldjs.git",
9
+ "url": "git+https://github.com/christophe77/fold.js.git",
10
10
  "directory": "packages/svelte"
11
11
  },
12
- "homepage": "https://christophe77.github.io/foldjs/",
13
- "bugs": "https://github.com/christophe77/foldjs/issues",
12
+ "homepage": "https://christophe77.github.io/fold.js/",
13
+ "bugs": "https://github.com/christophe77/fold.js/issues",
14
14
  "type": "module",
15
15
  "main": "./dist/index.cjs",
16
16
  "module": "./dist/index.js",