geelen / typeslab

Simple, shareable typographic posters

TypeSlab

simple, shareable typographic posters

Some good examples at https://twitter.com/typeslab

Developing

To build this project yourself, do the following:

npm install -g jspm jspm-server
jspm install
jspm-server src

Then http://localhost:8080 should open and you should have a live-reloading hot-swapping dev server!

Note: only .amcss and .jsx files are hot-loaded, the rest requires a full browser reload. With JSPM that can take several seconds.

Also, you don't actually need to npm install anything dev on this project i.e. gulp isn't used for development. JSPM is all you need to get hacking, changing fonts & colour schemes and sending screenshots & PRs. Neato!

Building

To build a minified, bundled version of the project, you will need to npm install, and then run gulp build. In your dist directory you have a static build.

Related Projects

All under development, all by me, and all super early. So send me issues and PRs!

• jspm-server - live-reloading dev server for JSPM. If the plugin supports live-reloading, it will try to hot-swap files in. If not, it'll reload the page.
• plugin-postcss - live-reloading PostCSS plugin generator. Used for the amcss.js plugin here in this project.
• postcss-traits key part of AMCSS workflow in PostCSS.
• hot-reloading JSX plugin (not broken out yet) - brittle as all hell. Needs a single default export using ES6 classes for all JSX files, but if that's the case it'll use react-hot-api and swap them in.

License

GNU Affero General Public License

typeslab's Issues

Relaxing jsx restrictions

You mentioned the restrictions on ES6, naming and defaults, just wanted to touch on these.

For naming, is there a reason you can't key the __jsxHot object entirely by pluginArgument as that is a completely unique identifier?

For the exports - perhaps it is possible to iterate the different exports on the export object, to see if one is a React class, perhaps via obj instanceof React.Component? I'm sure there are lots of other ways out there to do this as well. That would cover the default and any others.

Then I'm still not quite sure I follow why we are restricted to ES6 modules for these JSX components as well.

Export as Vector?

Export as square for Instagram

It would be great to have an export as a Square image option to be able to quickly post to Instagram

• Could extend text-free themed color around the typeslab
• Could show current pixel dimensions while creating a typeslab
• Could actually calculate font sizes/spacing based on a square shape

Thanks!

Issues with Emoji.

Typeslab won't render the coffee icon in this this entry:

wake up
and rdrink a
morning
coffee☕️
you can
sleep
when you are
dead

Provide accessible text

Provide some sort of computer-readable text along with the image for accessibility purposes. This could take one of many forms:

• Server outputs a custom header in the request for the image. (Note that currently images are saved to imgur.)
• Metadata embedded in the .png file.
  Even if no sites or screen readers are currently searching for this data, we will give them a new data source from which to pull.

Issues with scandinavian characters

It seems that the line height is wrong when using scandinavian characters, ä, ö, å for example.

Error while building the project

Hi, I have cloned the repository. Trying to build using gulp. But failed with the following error message.

[18:36:06] Using gulpfile ~/Code/cloned/typeslab/gulpfile.js
[18:36:06] Starting 'jspm-bundle'...
[18:36:07] Starting 'html'...
[18:36:07] Starting 'misc'...
[18:36:07] Finished 'html' after 64 ms
[18:36:07] Finished 'misc' after 42 ms
Building the single-file sfx bundle for lib/main...

err Error: Error loading "lib/main" at file:/home/pras/Code/cloned/typeslab/src/lib/main.js
Error loading "npm:[email protected]" at file:/home/pras/Code/cloned/typeslab/src/jspm_packages/npm/[email protected]
ENOENT, open '/home/pras/Code/cloned/typeslab/src/jspm_packages/npm/[email protected]'
[18:36:08] 'jspm-bundle' errored after 1.5 s
[18:36:08] Error in plugin 'gulp-shell'
Message:
Command jspm bundle-sfx lib/main dist/bundle.js failed with exit code 1

Error running project

I installed this project with no errors but when running in the browser, nothing is rendered to the page and in the console I receive the error:

Uncaught (in promise) Error: Cannot read property 'replace' of undefined
Error loading http://127.0.0.1:8081/styles/reset.amcss!http://127.0.0.1:8081/amcss.js as "./reset.amcss!" from http://127.0.0.1:8081/styles/index.js
at SystemJSLoader.fetch (http://127.0.0.1:8081/jspm_packages/github/geelen/plugin-postcss@master/index.js!transpiled:55:54)
at SystemJSLoader.<anonymous> (http://127.0.0.1:8081/jspm_packages/system.src.js:3519:49)
at SystemJSLoader.<anonymous> (http://127.0.0.1:8081/jspm_packages/system.src.js:3613:20)
at SystemJSLoader.fetch (http://127.0.0.1:8081/jspm_packages/system.src.js:3834:20)
at http://127.0.0.1:8081/jspm_packages/system.src.js:326:33

Print options?

I see vector is out of the question in #6 but I'm guessing with canvas it is possible to change the image size and maybe DPI to make it suitable for printing?

This project is really neat, and seems natural to want to make posters with it but obv. the resulting image is way too small as-is.

Error after fresh installation

Hi,
Thanks you for your projet, it's very interesting.
But, after the installation (like say in Readme.md; I have just add the lock option on jspm install command), I have this issue on the Chrome's console :
Uncaught (in promise) Error: Cannot read property 'replace' of undefined Error loading http://127.0.0.1:8080/styles/reset.amcss!http://127.0.0.1:8080/amcss.js as "./reset.amcss!" from http://127.0.0.1:8080/styles/index.js at SystemJSLoader.fetch (http://127.0.0.1:8080/jspm_packages/github/geelen/plugin-postcss@master/index.js!transpiled:57:54) at SystemJSLoader.<anonymous> (http://127.0.0.1:8080/jspm_packages/system.src.js:4320:49) at SystemJSLoader.fetch (http://127.0.0.1:8080/jspm_packages/system.src.js:4565:20) at http://127.0.0.1:8080/jspm_packages/system.src.js:326:33

It seems appears because of the undefined pluginArgument attribut of medata (line 41 on src\jspm_packages\github\geelen\plugin-postcss@master\index.js).

Sorry, I'm a newbie in the world of npm... so maybe I'm do something wrong.
Thank you for your help

Love this! Could you add higher resolution? Or SVG?

Love this thing. Works so well for presenting something fast. Could you add higher resolution support? I have some font pairing suggestions too, if you are open to add them!

Option to add image

Please add an option where user can upload or put url to their own image and that will appear in final generated image.

It will kind of make it meme generator with nice type and everything.

Thanks

Unable to Start Server

When I run jspm-server src, I get the following

Fatal error in ../deps/v8/src/api.cc, line 1244
Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().

Illegal instruction: 4