├── .gitignore ├── chrome-extension ├── background.js ├── icon128.png ├── icon16.png ├── icon48.png ├── lib │ ├── package.json │ ├── placeholdifier-monospace.woff │ ├── placeholdifier-monospace.woff2 │ ├── placeholdifier.css │ ├── placeholdifier.woff │ └── placeholdifier.woff2 ├── manifest.json └── placeholdify.js ├── font-builder ├── index.html ├── index.js ├── package.json └── yarn.lock ├── lib ├── license ├── readme.md └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | chrome-extension.zip 3 | dist 4 | .cache -------------------------------------------------------------------------------- /chrome-extension/background.js: -------------------------------------------------------------------------------- 1 | chrome.browserAction.onClicked.addListener(placeholdify); 2 | 3 | function placeholdify() { 4 | chrome.tabs.executeScript({ 5 | file: "placeholdify.js", 6 | allFrames: true, 7 | frameId: 0, 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /chrome-extension/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/icon128.png -------------------------------------------------------------------------------- /chrome-extension/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/icon16.png -------------------------------------------------------------------------------- /chrome-extension/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/icon48.png -------------------------------------------------------------------------------- /chrome-extension/lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "placeholdifier", 3 | "description": "Turn HTML into a live wireframe", 4 | "version": "0.2.2", 5 | "keywords": [ 6 | "placeholder", 7 | "skeleton", 8 | "html", 9 | "css", 10 | "style", 11 | "mask", 12 | "streaming", 13 | "wireframe" 14 | ], 15 | "homepage": "https://github.com/pomber/placeholdifier#readme", 16 | "license": "MIT", 17 | "repository": "pomber/placeholdifier" 18 | } 19 | -------------------------------------------------------------------------------- /chrome-extension/lib/placeholdifier-monospace.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/lib/placeholdifier-monospace.woff -------------------------------------------------------------------------------- /chrome-extension/lib/placeholdifier-monospace.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/lib/placeholdifier-monospace.woff2 -------------------------------------------------------------------------------- /chrome-extension/lib/placeholdifier.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Placeholdifier"; 3 | src: url("./placeholdifier.woff2") format("woff2"), 4 | url("./placeholdifier.woff") format("woff"); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | @font-face { 10 | font-family: "Placeholdifier Monospace"; 11 | src: url("./placeholdifier-monospace.woff2") format("woff2"), 12 | url("./placeholdifier-monospace.woff") format("woff"); 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | 17 | .placeholdify, 18 | .placeholdify * { 19 | font-family: "Placeholdifier" !important; 20 | background-image: none !important; 21 | } 22 | 23 | pre.placeholdify, 24 | pre.placeholdify *, 25 | .placeholdify pre *, 26 | code.placeholdify, 27 | code.placeholdify *, 28 | .placeholdify code * { 29 | font-family: "Placeholdifier Monospace" !important; 30 | } 31 | 32 | .placeholdify img, 33 | .placeholdify video { 34 | filter: brightness(0%) contrast(0%) opacity(0.8); 35 | } 36 | -------------------------------------------------------------------------------- /chrome-extension/lib/placeholdifier.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/lib/placeholdifier.woff -------------------------------------------------------------------------------- /chrome-extension/lib/placeholdifier.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pomber/placeholdifier/fba16ef58b91991567d2d92b5b1d684dc6565ab8/chrome-extension/lib/placeholdifier.woff2 -------------------------------------------------------------------------------- /chrome-extension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Placeholdifier", 3 | "version": "0.2.2", 4 | "description": "Turn any website into a live wireframe", 5 | "icons": { 6 | "16": "icon16.png", 7 | "48": "icon48.png", 8 | "128": "icon128.png" 9 | }, 10 | "permissions": ["http://*/", "https://*/"], 11 | "background": { 12 | "scripts": ["background.js"], 13 | "persistent": false 14 | }, 15 | "browser_action": {}, 16 | "web_accessible_resources": ["lib/placeholdifier.css", "lib/*"], 17 | "manifest_version": 2 18 | } 19 | -------------------------------------------------------------------------------- /chrome-extension/placeholdify.js: -------------------------------------------------------------------------------- 1 | var id = "placeholdifier"; 2 | if (!document.getElementById(id)) { 3 | const head = document.getElementsByTagName("head")[0]; 4 | const link = document.createElement("link"); 5 | link.id = id; 6 | link.rel = "stylesheet"; 7 | link.type = "text/css"; 8 | link.href = chrome.runtime.getURL("lib/placeholdifier.css"); 9 | link.media = "all"; 10 | head.appendChild(link); 11 | } 12 | 13 | document.body.classList.toggle("placeholdify"); 14 | -------------------------------------------------------------------------------- /font-builder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 31 | 32 |

ABC Abc

33 |

ABC Abc ABCCHg

34 |

35 | ABC Abc 😀 ABCCHg ABC Abc ABCCHg ABC Abc ABCCHg 36 |

37 |

另一种语言的东西

38 | 
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return consectetur(
    ipsum,
    0,
    dolor < 0 ? 0 : dolor
  )
}
39 | 40 | 41 | -------------------------------------------------------------------------------- /font-builder/index.js: -------------------------------------------------------------------------------- 1 | const opentype = require("opentype.js"); 2 | 3 | const code = (s) => s.charCodeAt(0); 4 | const exclude = " ',;[]().\"`".split("").map(code); 5 | 6 | function changePath(glyph, h) { 7 | console.log(glyph); 8 | 9 | const aPath = new opentype.Path(); 10 | 11 | if (!exclude.includes(glyph.unicode)) { 12 | aPath.moveTo(0, 0); 13 | aPath.lineTo(0, h); 14 | aPath.lineTo(glyph.advanceWidth + 24, h); 15 | aPath.lineTo(glyph.advanceWidth + 24, 0); 16 | aPath.close(); 17 | } 18 | 19 | glyph.path = aPath; 20 | } 21 | 22 | // curl 'https://fonts.googleapis.com/css?family=Name' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'User-Agent: AppleWebKit/537.36 (KHTML, like Gecko) Chrome' 23 | const url = "somefont.woff"; 24 | 25 | const f = (font) => { 26 | const glyphs = Object.values(font.glyphs.glyphs); 27 | const H = glyphs.find((g) => g.unicode === 72); 28 | const h = H.yMax; 29 | 30 | glyphs.forEach((g) => changePath(g, h)); 31 | 32 | const newFont = new opentype.Font({ 33 | familyName: "Placeholdifier", 34 | styleName: "Medium", 35 | unitsPerEm: font.unitsPerEm, 36 | ascender: font.ascender, 37 | descender: font.descender, 38 | glyphs: Object.values(font.glyphs.glyphs), 39 | }); 40 | 41 | const fontface = new window.FontFace( 42 | "Placeholdifier", 43 | newFont.toArrayBuffer() 44 | ); 45 | 46 | document.fonts.add(fontface); 47 | 48 | window.downloadFont = function () { 49 | newFont.download("placeholdifier.otf"); 50 | }; 51 | }; 52 | 53 | opentype.load(url).then(f); 54 | -------------------------------------------------------------------------------- /font-builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "opentype.js": "^1.3.3", 4 | "parcel": "^1.12.4" 5 | }, 6 | "scripts": { 7 | "dev": "parcel index.html" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /lib: -------------------------------------------------------------------------------- 1 | ./chrome-extension/lib -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Rodrigo Pombo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |
2 |
3 | Placeholdifier 4 |
5 |
6 | 7 | # Placeholdifier 8 | 9 | Turn any website into a live wireframe. 10 | 11 | ## [Chrome Extension](https://chrome.google.com/webstore/detail/placeholdifier/iinkgkmmblamljaklibgclblomobdbha) 12 | 13 |
14 | 15 | Placeholdifier Chrome Extension 16 | 17 |
18 |
19 | 20 | ## npm Package 21 | 22 | You can use it in your site by importing the CSS from unpkg and adding the `placeholdify` class somewhere: 23 | 24 | ```html 25 | 26 | 27 | 31 | 32 | 33 |

Hello World

34 |

Hello World

35 | 36 | 37 | ``` 38 | 39 | > [Try it in JS Bin](https://jsbin.com/tuyecacebi/edit?html,output) 40 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | opentype.js@^1.3.3: 6 | version "1.3.3" 7 | resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-1.3.3.tgz#65b8645b090a1ad444065b784d442fa19d1061f6" 8 | integrity sha512-/qIY/+WnKGlPIIPhbeNjynfD2PO15G9lA/xqlX2bDH+4lc3Xz5GCQ68mqxj3DdUv6AJqCeaPvuAoH8mVL0zcuA== 9 | dependencies: 10 | string.prototype.codepointat "^0.2.1" 11 | tiny-inflate "^1.0.3" 12 | 13 | string.prototype.codepointat@^0.2.1: 14 | version "0.2.1" 15 | resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc" 16 | integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg== 17 | 18 | tiny-inflate@^1.0.3: 19 | version "1.0.3" 20 | resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4" 21 | integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw== 22 | --------------------------------------------------------------------------------