{"id":13546050,"url":"https://github.com/pixelnest/presskit.html","last_synced_at":"2025-12-30T14:39:58.179Z","repository":{"id":14319353,"uuid":"76340949","full_name":"pixelnest/presskit.html","owner":"pixelnest","description":"Re-implementation of presskit() as a static site generator","archived":false,"fork":false,"pushed_at":"2023-10-14T03:35:15.000Z","size":25136,"stargazers_count":283,"open_issues_count":20,"forks_count":49,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-14T12:12:15.459Z","etag":null,"topics":["css","dopresskit","html","nodejs","presskit","static-site-generator"],"latest_commit_sha":null,"homepage":"http://pixelnest.io/2017/03/presskit-html/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelnest.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-13T08:56:53.000Z","updated_at":"2024-05-08T21:48:38.517Z","dependencies_parsed_at":"2024-05-08T21:58:42.828Z","dependency_job_id":null,"html_url":"https://github.com/pixelnest/presskit.html","commit_stats":{"total_commits":442,"total_committers":5,"mean_commits":88.4,"dds":"0.12669683257918551","last_synced_commit":"aa5c4b49035b32680f2f2c7d1745ae0e04915c3c"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelnest%2Fpresskit.html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelnest%2Fpresskit.html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelnest%2Fpresskit.html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelnest%2Fpresskit.html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelnest","download_url":"https://codeload.github.com/pixelnest/presskit.html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246860263,"owners_count":20845634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dopresskit","html","nodejs","presskit","static-site-generator"],"created_at":"2024-08-01T12:00:30.636Z","updated_at":"2025-12-15T13:47:37.342Z","avatar_url":"https://github.com/pixelnest.png","language":"JavaScript","funding_links":[],"categories":["**Marketing**","JavaScript","MarketingAndBizDev"],"sub_categories":[],"readme":"# ![presskit.html](header.png)\n\n\u003e Re-implementation of presskit() as a static site generator\n\n![Build Status](https://travis-ci.org/pixelnest/presskit.html.svg?branch=master)\n[![NPM - Presskit](https://badgen.net/npm/v/presskit)](https://www.npmjs.com/package/presskit)\n[![Code Style - Standard](https://badgen.net/badge/code%20style/standard/f2a)](http://standardjs.com/)\n\n* [Why presskit.html?](#why)\n* [Showcase](#showcase)\n* [Roadmap](#roadmap)\n* [Quickstart](#quickstart-for-existing-presskit-users)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Documentation](#documentation)\n* [Migration Guide](#migration-guide)\n* [Credits](#credits)\n\n_Created by [Pixelnest Studio](http://pixelnest.io/)._\n\nThis is a complete re-implementation, with a permissive MIT license, of [presskit()][dopresskit], which was originally created by [Rami Ismail](https://twitter.com/tha_rami) of [Vlambeer](http://www.vlambeer.com).\n\nWarning: **presskit.html** is, _currently_, a tool for developers. You need to know how to use the command-line — but that's all, to be honest. However, we plan to create a small app to simplify this process in the future. Stay tuned by following our [Twitter account](https://twitter.com/pixelnest).\n\n---\n\n**presskit.html** is a tool to create a presskit for your company, products or games.\n\nTo quote the original [presskit()][dopresskit]:\n\n\u003e Developers \u0026 press both have the same goal: to bring great games to as many people as possible - after all, a good game is worth nothing if no-one plays it. For the press, finding out about a game but not having access to information \u0026 media for the game means that they can't write about it. Of course, developers want to spend their valuable time making games instead of press pages.\n\n\u003e **presskit()** (pronounced _'do presskit'_) is the solution. Free for everyone, open and easy-to-use for both developers \u0026 press. Developers only have to spend an hour or so creating well-laid out press pages with everything the press needs to write to their hearts desire. Everybody wins.\n\nIt uses an **almost-identical format and output** as its precursor. The goal is to be compatible, as much as possible.\n\nAnd even if presskit() was conceived with videogames in mind, we think that you can use it for any kind of product.\n\nExamples (built with **presskit.html**):\n\n* [Pixelnest Studio](http://pixelnest.io/presskit/)\n* [Fake Pizza Burger Studio](http://pixelnest.io/presskit.html/example/)\n\nThe goal of **presskit.html** is to generate only static HTML pages — no PHP required at all. Just fill some XML data files, add some images, execute a command, and boom. It's done.\n\n**You already have a presskit and you want to use this tool instead of the old un-maintained PHP-based presskit()? [Read the migration guide](#migration-guide).**\n\n## Why\n\n**Why reimplement [presskit()][dopresskit]?** **presskit.html** is basically a static site generator for presskit(). Everything is built once on your computer, and then distributed as static files to your users.\n\nWe love the concept behind static site generators like [Jekyll](https://jekyllrb.com) or [Hugo](https://gohugo.io). These tools create lightweight static HTML pages, which are, by design, more secure and efficient than using a PHP server, for example.\n\nMoreover, if you use one of these tools to build your company or product's website, you can simply drop the result of **presskit.html** into your site directly, whatever the technology you are using — it's just HTML pages, after all. 😉\n\nThat's mainly why we built **presskit.html** — that's how we make our websites, and we can integrate our presskits more easily this way.\n\nWe have also added some nice little things (like thumbnails generation, a \"Press Copy Request\" button, widgets integration, relations between products or an optional hamburger menu, for example) and created a more robust implementation of presskit() (which is, unfortunately, un-maintained since 2014).\n\nHowever, _we have tried to be as close as possible to the original presskit format and style._ In fact, comparing the output of **presskit.html** with the one of presskit() should be almost indistinguishable.\n\nThis is by design: the aim of the original presskit() was to create an instantly-recognizable website — almost a standard in the videogame industry.\n\nYou already have a presskit? Just try it: [follow our migration guide](#migration-guide), run **presskit.html** in the folder containing your presskit()-based `data.xml` and `images/` and you will have a ready to deploy set of HTML pages which are almost identical to what you already have.\n\n## Showcase\n\nBuilt with **presskit.html**:\n\n* [Pixelnest Studio](http://pixelnest.io/presskit/) ([source code](https://github.com/pixelnest/presskit/))\n* [Genix Lab](http://www.genix-lab.com/presskit/)\n* [Creative Brothers](http://www.creativebrothers.io/presskit/en/)\n\n\u003csmall\u003e_You are using **presskit.html**? Tell us or submit a pull request!_\u003c/small\u003e\n\nWant to compare with presskit() websites? Check these ones:\n\n* [Vlambeer](http://www.vlambeer.com/press/)\n* [Flying Oak Games](http://www.flying-oak.com/presskit/index.php)\n\n## Roadmap\n\nThe roadmap is available on [Trello](https://trello.com/b/5T6BIyi3/open-source-presskit-html).\n\n## Quickstart for existing presskit users\n\n1. Install [Node.js](https://nodejs.org).\n2. Open your terminal (\"Terminal\" on macOS, \"cmd\" on Windows).\n3. Run `npm install -g presskit`.\n4. Type `cd`, press space, and drag the folder containing your `data.xml` files.\n5. Run `presskit build`.\n6. Open the `build/` folder, double-click on index.html and… 🍾\n\n## Installation\n\nYou will need a terminal and [Node.js](https://nodejs.org/).\n\nThe simplest way to install **presskit.html** is to use [npm](http://npmjs.org/) (bundled with Node.js):\n\n```shell\nnpm install -g presskit\n```\n\n(Feeling fancy? Use [Yarn](https://yarnpkg.com/en/) instead.)\n\nThis should add a globally available `presskit` command to your shell.\n\nTo update to a new version of **presskit.html**, just type:\n\n```shell\nnpm update -g presskit\n```\n\n## Usage\n\nRun this command:\n\n```\npresskit build\n```\n\n**presskit.html** will then scan your local working directory (where you are executing the command) and all direct sub-directories for `data.xml` files and `images/` folders.\n\nTo launch your presskit with a server and automatically reload it each time your save a `data.xml`, just use:\n\n```\npresskit build --watch\n```\n\nYou can also specify the folder to scan:\n\n```shell\npresskit build path/to/folder\n```\n\nThe `presskit` command does a bunch more (watch mode, generation of `data.xml`, etc.). Use `presskit -h` to learn more.\n\nIn order to generate a complete presskit, you should have:\n\n- One `data.xml` for your company.\n- One `data.xml` per product in unique subfolders.\n- All assets (mostly images) located in an `images/` subfolder next to the corresponding `data.xml`.\n\nExample:\n\n```\n📄 data.xml\n📂 images/\n  📄 header.png\n  📄 logo.png\n📂 product-name-01/\n  📄 data.xml\n  📂 images/\n    📄 header.png\n    📄 logo.png\n    📄 screenshot1.png\n    📄 screenshot2.png\n```\n\nThe `header.png` is used as the banner for the corresponding page. `logo.png` will be used as the product's brand.\n\nThe arborescence above should generate a build folder containing:\n\n```\n📂 build/\n  📄 index.html\n  📂 images/\n    📄 header.png\n    📄 logo.png\n    📄 images.zip\n    📄 logo.zip\n  📂 product-name-01/\n    📄 index.html\n    📂 images/\n      📄 header.png\n      📄 logo.png\n      📄 screenshot1.png\n      📄 screenshot2.png\n      📄 images.zip\n      📄 logo.zip\n  📂 css/\n  📂 js/\n```\n\nSimply copy **all** the files in the `build/` folder to your server… and you're done!\n\n_Note: the webserver is **not** included._\n\nYou can also [try our example](https://github.com/pixelnest/presskit.html/tree/master/data) from this repository, available online here: http://pixelnest.io/presskit.html/example/.\n\n### Additional options of `presskit build`\n\n`presskit build` has a few other features. Use `presskit build -h` to discover them all.\n\nTwo interesting ones are:\n\n- `presskit build --collapse-menu` uses a collapsed menu for the main navigation at the top (commonly-known as the \"[hamburger button](https://en.wikipedia.org/wiki/Hamburger_button)\") — only for small screens. This option toggles this behavior on all pages.\n- `presskit build --pretty-links` hides `index.html` at the end of URLs.\n\nYou can combine all these options together, of course.\n\n### Create `data.xml` files with `presskit new`\n\nYou can also generate empty `data.xml` with the `presskit new` command.\n\n## Documentation\n\nFor a tag by tag walkthrough, open these links:\n\n- [Company `data.xml` file](http://pixelnest.io/presskit.html/company/)\n- [Product or game `data.xml` file](http://pixelnest.io/presskit.html/product/)\n\n**If you have never written a presskit before, those links are a must-read.**\n\nFor a more detailed documentation about some specific features, see below.\n\n_NB: since **presskit.html** is 99% compatible with [presskit()][dopresskit], you can also just read the existing documentation there._\n\n### Tags\n\n**Warning: do not put XML tags inside your content.**\n\nFor example, do not do this (note the `\u003cbr /\u003e`):\n\n```xml\n\u003cdescription\u003e\n  Lorem ipsum\u003cbr /\u003e sit amet.\n\u003c/description\u003e\n```\n\n#### Widgets\n\nThis is a new feature of **presskit.html**: you can put your widgets directly into your presskit pages.\n\n- Mailchimp `\u003cmailchimp\u003eLIST_URL inside your signup form\u003c/mailchimp\u003e`\n- App Store `\u003cappstore\u003eAPP_ID\u003c/appstore\u003e`\n- Play Store `\u003cplaystore\u003ecom.domain.yourappid\u003c/playstore\u003e`\n- Steam `\u003csteam\u003eSTEAM_ID\u003c/steam\u003e`\n- Humble Bundle `\u003chumble\u003eproduct_name/BUNDLE_ID\u003c/humble\u003e`\n- Itch.io `\u003citch\u003eITCH_ID\u003c/itch\u003e`\n- Game Jolt `\u003cgamejolt\u003ePACKAGE_ID\u003c/gamejolt\u003e`\n- Bandcamp `\u003cbandcamp\u003eBANDCAMP_ID\u003c/bandcamp\u003e`\n\nJust add the `\u003cwidgets\u003e` tag, and the widget providers that you want:\n\n```xml\n\u003cwidgets\u003e\n  \u003cmailchimp\u003e//url.us3.list-manage.com/subscribe/post?u=USER_ID\u0026amp;id=LIST_ID\u003c/mailchimp\u003e\n  \u003cappstore\u003e950812012\u003c/appstore\u003e\n  \u003cplaystore\u003ecom.noodlecake.altosadventure\u003c/playstore\u003e\n  \u003csteam\u003e347160\u003c/steam\u003e\n  \u003chumble\u003esteredenn/7SDLfk23hw\u003c/humble\u003e\n  \u003citch\u003e27992\u003c/itch\u003e\n  \u003cgamejolt\u003e8ReMi2Nw\u003c/gamejolt\u003e\n  \u003cbandcamp\u003e1135613467\u003c/bandcamp\u003e\n\u003c/widgets\u003e\n```\n\nWe don't support other widgets for the moment, but feel free to send a pull request or submit an issue.\n\n**Warning: widgets import many scripts and assets. This may have a penalty on your page size and responsiveness.**\n\n#### Relations\n\nThis is a new feature of **presskit.html**: you can specify relations between products using the `\u003crelations\u003e` tag.\n\nFor example, on a product page, you could add something like:\n\n```xml\n\u003ctitle\u003eStarCraft\u003c/title\u003e\n\n[…]\n\n\u003crelations\u003e\n  \u003crelation\u003e\n    \u003ctype\u003eExpansion\u003c/type\u003e\n    \u003cproduct\u003eStarCraft: Brood War\u003c/product\u003e\n  \u003c/relation\u003e\n  \u003crelation\u003e\n    \u003ctype\u003eSequel\u003c/type\u003e\n    \u003cproduct\u003eStarCraft II\u003c/product\u003e\n  \u003c/relation\u003e\n\u003c/relations\u003e\n```\n\n_This tag should be added on the **main** page; not the related product._\n\nAt build time, a relation will be added to the product and its related product, with a link between the two.\n\nYou can have as many relations as you want. You can use it to show DLCs, expansions, sequels, prequels, etc.\n\n**Warning**: you need to rebuild the presskit to see the changes.\n\n#### Other tags\n\nWe recommend to read the [company](http://pixelnest.io/presskit.html/company/) and [product](http://pixelnest.io/presskit.html/product/) documentation pages for more information. New tags include `\u003cpartners\u003e` and `\u003cabouts\u003e`. More might be implemented later.\n\n### Images\n\nFor each `data.xml`, you can add an `images/` folder containing the assets of your product or game.\n\n- An image named `header.png` or `header.jpg` will be used for the page's banner.\n- An image named `logo.png` or `logo.jpg` will be used as your page's logo.\n- Each `jpg`, `jpeg`, `png` or `gif` will be displayed in the gallery.\n\nFor each non-header/non-logo image, a thumbnail will be automatically generated during the build process. If you don't want to use the thumbnails, you can disable them with the `--ignore-thumbnails` option of `presskit build`. However, we do not recommend this: it might drastically increase the size of your pages. It can be a massive change: for example, on our presskit, one of our page has gone from 100mB to 4mB. We also convert gifs to small JPGs, that you can animate with a click.\n\n#### Logos\n\nYou can provide multiple logos for a page. As long as they start with \"logo\", they will be displayed in the \"Logo \u0026 Icon\" section.\n\nThis will work, for example:\n\n```\n📄 logo01.png\n📄 logo02.png\n📄 logo03.jpg\n```\n\n#### Categories\n\nInside the `images/` folder, you can sort images by categories. It's simple: put a few images into a subfolder (like `images/wallpapers/`), and a new category will be automatically added to the gallery.\n\n[You can find an example here.](http://pixelnest.io/presskit.html/example/product/#gallery-wallpapers)\n\n#### Favicon\n\nIf a `favicon.ico` is found in the `images/` folder of a `data.xml`, it will be used as the favicon of this HTML page. It will not be exported in the `images.zip`, nor visible in the images gallery.\n\n### Archives\n\n**presskit.html** will find every images and logos in the `images/` folder of a `data.xml`. Then, it will create two archives: `images.zip` and `logo.zip`.\n\nThere's a small trick to know: if you provide one (or both) of these zips in your `images/` folder, **presskit.html** will just copy it directly, instead of overriding it. This is nice, because it allows you to provide a more complete (and heavy) zip. In this archive, you can, for example, put bigger gifs, images, artworks, or even videos.\n\nThat's purely optional, and most products or games won't need a specially crafted archive. 😉\n\n## Migration Guide\n\nThis tool is almost a drop-in replacement for presskit() (well, except for the fact that it generates HTML instead of using a PHP back-end — but that's simpler, not harder). Which mean that you can go in your folder containing the `data.xml` and `images/`, run `presskit build` and boom, you're done.\n\n_Well, almost._\n\nWe have made some breaking changes between this format and the original presskit() format. But be reassured: they are fairly small, and are, indeed, useful.\n\nFollow the guide.\n\n### URLs\n\nThis re-implementation of presskit() has a big difference: all your product URLs will break. With presskit(), you pointed to `/sheet.php?p=MYSUPERGAME` for the `MYSUPERGAME` page. Here, you will point to `/MYSUPERGAME/` directly (the `index.html` is not required, which makes prettier URLs).\n\n**This can't be changed.** We don't use PHP, but simple, robust and lightweight HTML files, and this difference is inevitable.\n\n### External URLs\n\npresskit() didn't require the protocol (ie., `http` or `https`) for most URLs in the `data.xml`.\n\nFor example:\n\n```xml\n\u003csocials\u003e\n  \u003csocial\u003e\n    \u003cname\u003etwitter.com/pixelnest/\u003c/name\u003e\n    \u003clink\u003etwitter.com/pixelnest/\u003c/link\u003e\n  \u003c/social\u003e\n\u003c/socials\u003e\n```\n\nNote that the `\u003clink\u003e` has no `http` or `https` protocol before its destination.\n\nThe problem with that is that we cannot deduce the protocol automatically. It will work seamlessly for the biggest sites like Facebook or Twitter, but we cannot guarantee that it will link correctly for everything.\n\nThat's why we require that you specify the protocol for your URLs:\n\n```xml\n\u003csocials\u003e\n  \u003csocial\u003e\n    \u003cname\u003etwitter.com/pixelnest/\u003c/name\u003e\n    \u003clink\u003ehttps://twitter.com/pixelnest/\u003c/link\u003e\n  \u003c/social\u003e\n\u003c/socials\u003e\n```\n\nOtherwise, the URL will be relative to your presskit, and thus, will break.\n\n### Company `data.xml`\n\n**This is recommended, but presskit.html is smart enough to detect the company `data.xml` automatically, if your file structure is correct.**\n\nYour main `data.xml` containing your company information should use a `\u003ccompany\u003e\u003c/company\u003e` root tag for your XML document.\n\nBefore:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cgame\u003e\n  \u003ctitle\u003ePixelnest Studio\u003c/title\u003e\n  \u003c!-- The rest --\u003e\n\u003c/game\u003e\n```\n\nAfter:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003ccompany\u003e\n  \u003ctitle\u003ePixelnest Studio\u003c/title\u003e\n  \u003c!-- The rest --\u003e\n\u003c/company\u003e\n```\n\n**Why?** It allows us to better differentiate the main `data.xml` from the others. And moreover, it does not make sense that the company `data.xml` is considered as a `\u003cgame\u003e`, right?\n\n### Release dates\n\nThe original presskit() assumed that you had only one release date for a product or game. And we all know that it's simply not true.\n\nThat's why we handle multiple release dates.\n\nSo, in your product/game `data.xml`, you must change your `\u003crelease-date\u003e` tag.\n\nBefore:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cproduct\u003e\n  \u003ctitle\u003eMy Super Game\u003c/title\u003e\n  \u003crelease-date\u003e04 Feb, 2016\u003c/release-date\u003e\n  \u003c!-- The rest --\u003e\n\u003c/product\u003e\n```\n\nAfter:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cproduct\u003e\n  \u003ctitle\u003eMy Super Game\u003c/title\u003e\n  \u003crelease-dates\u003e\n    \u003crelease-date\u003ePC/Mac - 04 Feb, 2016\u003c/release-date\u003e\n    \u003crelease-date\u003eiOS/Android - 04 Feb, 2017\u003c/release-date\u003e\n  \u003c/release-dates\u003e\n  \u003c!-- The rest --\u003e\n\u003c/product\u003e\n```\n\n**Why?** We all know that there's no single release date for a product or a game.\n\n### Contacts\n\nIn each `data.xml`, you can set a list of contacts:\n\n```xml\n\u003ccontacts\u003e\n  \u003ccontact\u003e\n    \u003cname\u003eInquiries\u003c/name\u003e\n    \u003cmail\u003econtact@pizzaburger.studio\u003c/mail\u003e\n  \u003c/contact\u003e\n  \u003c!-- Others --\u003e\n\u003c/contacts\u003e\n```\n\nIn presskit(), you needed to set these informations _only in the company page_. Each product then retrieved the values from the company and added them automatically.\n\nWe modified that: now, you **need** to set these informations everywhere. That way, you can change mails and links for each product individually.\n\n---\n\n## Pixelnest Studio\n\n[Pixelnest Studio](http://pixelnest.io/) is a small indie company, creating games and apps. You can contact us on [Twitter at @pixelnest](https://twitter.com/pixelnest). Want to check our game, Steredenn? Go to http://steredenn.pixelnest.io/.\n\n## Credits\n\n### [presskit()][dopresskit]\n\nThis couldn't have be made without the awesome work of [Rami Ismail](https://twitter.com/tha_rami) and the [presskit()][dopresskit] team. Thanks to them!\n\n### Assets\n\n* The images used in this repository can be found on [Unsplash](https://unsplash.com/), a free provider of high-quality images.\n* Pizza gif is from [Giphy](http://giphy.com/).\n\n\n[dopresskit]: http://dopresskit.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelnest%2Fpresskit.html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelnest%2Fpresskit.html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelnest%2Fpresskit.html/lists"}