{"id":25272019,"url":"https://github.com/nndda/itchio-profile","last_synced_at":"2026-05-30T23:01:33.105Z","repository":{"id":258698380,"uuid":"870704384","full_name":"nndda/itchio-profile","owner":"nndda","description":"HTML \u0026 CSS source code and build pipelines for my itch.io profile page's content. Live at https://nnda.itch.io","archived":false,"fork":false,"pushed_at":"2026-05-28T08:03:09.000Z","size":605,"stargazers_count":31,"open_issues_count":0,"forks_count":16,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-28T08:22:44.825Z","etag":null,"topics":["css","front-end","itch","itchio"],"latest_commit_sha":null,"homepage":"https://nnda.itch.io/","language":"TypeScript","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/nndda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"nndda","patreon":"nnda","ko_fi":"nnda","liberapay":"nnda"}},"created_at":"2024-10-10T14:14:14.000Z","updated_at":"2026-05-28T08:03:13.000Z","dependencies_parsed_at":"2025-12-29T21:08:49.247Z","dependency_job_id":null,"html_url":"https://github.com/nndda/itchio-profile","commit_stats":null,"previous_names":["nndda/itchio-profile"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/nndda/itchio-profile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nndda%2Fitchio-profile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nndda%2Fitchio-profile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nndda%2Fitchio-profile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nndda%2Fitchio-profile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nndda","download_url":"https://codeload.github.com/nndda/itchio-profile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nndda%2Fitchio-profile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33712579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-30T02:00:06.278Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","front-end","itch","itchio"],"created_at":"2025-02-12T12:39:05.424Z","updated_at":"2026-05-30T23:01:33.100Z","avatar_url":"https://github.com/nndda.png","language":"TypeScript","funding_links":["https://github.com/sponsors/nndda","https://patreon.com/nnda","https://ko-fi.com/nnda","https://liberapay.com/nnda"],"categories":["CSS"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e \u003cimg height=\"32\" width=\"32\" src=\"https://cdn.simpleicons.org/itchdotio/fff\"/\u003e\n  \u003ccode\u003ennda.itch.io\u003c/code\u003e\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nSource code for my itch.io profile page.\n\nMain stylesheet: [`src/styles.css`](src/styles.css)\n｜\nProfile content: [`src/content.html`](src/content.html)\n\n\u003cimg src=\"https://github.com/user-attachments/assets/6a94c86a-6563-401e-8a92-9a6488016082\" alt=\"\"\u003e\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## Devlog\n\n- May 28\u003csup\u003eth\u003c/sup\u003e 2026 — [Profile Page Updates: Time is Ticking...](https://itch.io/blog/1536605/profile-page-updates-time-is-ticking)\n- March 15\u003csup\u003eth\u003c/sup\u003e 2026 — [Profile Page Updates: Little Updates](https://itch.io/blog/1459365/profile-page-update-little-updates)\n- May 23\u003csup\u003erd\u003c/sup\u003e 2025 — [Profile Page Updates: Documentation](https://itch.io/blog/950966/profile-page-updates-documentation)\n\n\u003cbr\u003e\n\n## Page theme settings\n\nSettings used in the itch.io profile page's theme editor.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\n  \u003cb\u003e Theme setting \u003c/b\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n  \u003cb\u003e Value \u003c/b\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\n\u003ctbody\u003e\n\n\u003ctr\u003e\n\u003ctd rowspan=\"3\"\u003e\u003cb\u003e Color \u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e BG \u003c/td\u003e\n\u003ctd\u003e\n\n  `#15141B`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e Text \u003c/td\u003e\n\u003ctd\u003e\n\n  `#E7E9E8` (match `--text` CSS variable)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e Link \u003c/td\u003e\n\u003ctd\u003e\n\n  `#EAEAEA` (match `--link` CSS variable)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd rowspan=\"2\"\u003e\u003cb\u003e Text \u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e Font \u003c/td\u003e\n\u003ctd\u003e\n\n  `Zen Kaku Gothic New`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e Size \u003c/td\u003e\n\u003ctd\u003e\n\n  `96`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd rowspan=\"1\"\u003e\u003cb\u003e Images \u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e Size \u003c/td\u003e\n\u003ctd\u003e\n\n  `Full width`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd rowspan=\"2\"\u003e My Projects \u003c/td\u003e\n\u003ctd\u003e Layout \u003c/td\u003e\n\u003ctd\u003e\n\n  `Grid`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e B. Radius \u003c/td\u003e\n\u003ctd\u003e\n\n  `0`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd rowspan=\"1\"\u003e\u003cb\u003e Collections \u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003e Layout \u003c/td\u003e\n\u003ctd\u003e\n\n  `List`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n## Requirements\n\n- [git](https://git-scm.com/)\n- GitHub account\n- [Bun](https://bun.com/)\n\n## Installation\n\n0. Star this repository?? 👉👈 (optional)\n\n1. [Fork](https://github.com/nndda/itchio-profile/fork) this repository, and clone your fork locally.\n\n1. Install the dependencies.\n    ```\n    bun install\n    ```\n\n1. Modify the [`src/styles.css`](src/styles.css) and/or the [`src/content.html`](src/content.html) to your liking.\n\n    See the [Development](#development) section.\n\n1. Edit `package.json`, and bump the `version` field. e.g. from `1.2.0` to `1.3.0`.\n\n1. Build the CSS.\n    ```\n    bun run build\n    ```\n\n1. Test the CSS and the HTML, by copy-pasting the content of `dist/test.css` and `dist/content.html` to your itch.io profile page.\n\n1. If everything's fine and ready, publish your updates.\n    ```\n    bun run publish\n    ```\n\n    And then copy-paste the CSS from `dist/styles.css` to your itch.io profile page's CSS field, and `dist/content.html` to your profile content, and save it.\n\n\u003e [!IMPORTANT]\n\u003e If you've only changed the HTML, there's no ***need to bump the version and publish the update*** via `bun run publish`, as that is only for the CSS updates.\n\u003e\n\u003e You should, however, run the `bun run build`, and then commit and push the changes to the HTML files yourself.\n\n\u003cbr\u003e\n\n## Development\n\nHow I update and develop my profile page with its HTML and CSS.\n\nI use Firefox, because it has a nice CSS editor feature on its dev tool.\n\n1. Open your itch.io profile page. And clear out the custom CSS field (just clear it out, you don't need to save it).\n2. Open the Firefox Web Developer Tools by pressing \u003ckbd\u003ef12\u003c/kbd\u003e or \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eI\u003c/kbd\u003e.\n3. Go to the `Style Editor` tab, and import the CSS source file `src/styles.css`.\n\n   ![](https://github.com/user-attachments/assets/495e2981-a40e-4d8d-be08-33ddb3567a34)\n\n   You can start working with the CSS from here. And save your changes by pressing \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eS\u003c/kbd\u003e.\n\n\u003e [!IMPORTANT]\n\u003e When importing CSS file that has unicode characters in it (like this CSS),\n\u003e Firefox might break those characters.\n\u003e\n\u003e To fix that:\n\u003e 1. Open the CSS in your favourite text editor.\n\u003e 2. Select and copy ALL of the content.\n\u003e 3. Go back to the Firefox `Style Editor`, and paste over the imported CSS, **overwriting** it.\n\nAs for editing the HTML, I just copy-paste the content of `src/content.html` to the `.user_profile.formatted` element on the `Inspector` tab. Edit it there, and copy it back to the `src/content.html` HTML file.\n\n\u003cbr\u003e\n\n## Icons\n\nMost of the icons are from [Font Awesome](https://fontawesome.com/), that is merged, and subsetted ([`src/icons.txt`](src/icons.txt)).\n\n```sh\nbun install\npip install fonttools brotli\n\npyftmerge \\\n  node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2 \\\n  node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 \\\n  --output-file=merged.woff2 \\\n  --verbose\n\npyftsubset merged.woff2 \\\n  --unicodes-file=src/icons.txt \\\n  --flavor=woff2 \\\n  --no-hinting \\\n  --desubroutinize \\\n  --ignore-missing-glyphs \\\n  --ignore-missing-unicodes \\\n  --output-file=dist/i.woff2 \\\n  --verbose\n\nrm merged.woff2\n```\n\n\u003cbr\u003e\n\n## Why all these setup just for HTML and CSS??\n\nCSS on itch.io's profile page is limited to only ***5120 characters***. And so, the whole build pipeline is made as a workaround for that limitation. The idea is:\n\n1. If the CSS' characters count exceeded 5120, split it to two.\n2. One 'main' CSS, that will be copy-pasted directly onto the profile page.\n3. The other half of the CSS will be imported, using CSS' `@import`, via [jsDelivr](https://www.jsdelivr.com/). Hence the need of versioning, as jsDelivr caches aggressively.\n\n\u003e [!WARNING]\n\u003e Because of the nature of `@import` in CSS, it will cause [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) on the profile page.\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/SAWARATSUKI/KawaiiLogos\"\u003e\n    \u003cimg width=\"520\" src=\"https://github.com/user-attachments/assets/4cc1431a-5dc4-4f15-9013-ec0ffbeb8957\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## License\n\n[MIT licensed](LICENSE) :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnndda%2Fitchio-profile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnndda%2Fitchio-profile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnndda%2Fitchio-profile/lists"}