{"id":21046343,"url":"https://github.com/dev-xo/remix-client-hints","last_synced_at":"2025-05-15T18:31:14.665Z","repository":{"id":200538788,"uuid":"704282338","full_name":"dev-xo/remix-client-hints","owner":"dev-xo","description":"An intuitive Remix + Client Hints example, that provides Theme Switching \u0026 Server Dates in your application.","archived":false,"fork":false,"pushed_at":"2023-10-16T04:27:05.000Z","size":1846,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-10-17T06:41:38.429Z","etag":null,"topics":["client-hints","remix","remix-run"],"latest_commit_sha":null,"homepage":"https://remix-client-hints.fly.dev","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/dev-xo.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}},"created_at":"2023-10-13T00:03:43.000Z","updated_at":"2023-10-17T06:41:41.065Z","dependencies_parsed_at":"2023-10-17T06:52:08.284Z","dependency_job_id":null,"html_url":"https://github.com/dev-xo/remix-client-hints","commit_stats":null,"previous_names":["dev-xo/remix-client-hints"],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-xo%2Fremix-client-hints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-xo%2Fremix-client-hints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-xo%2Fremix-client-hints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-xo%2Fremix-client-hints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-xo","download_url":"https://codeload.github.com/dev-xo/remix-client-hints/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225368348,"owners_count":17463377,"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":["client-hints","remix","remix-run"],"created_at":"2024-11-19T14:29:09.187Z","updated_at":"2024-11-19T14:29:09.744Z","avatar_url":"https://github.com/dev-xo.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\u003ca href=\"https://npm.im/remix-auth-totp\"\u003e💡 Remix Client Hints\u003c/a\u003e\u003c/h1\u003e\n  \u003cp\u003e\n    A simple and straightforward \u003cstrong\u003eRemix + Client Hints\u003c/strong\u003e example based on \u003ca href=\"https://github.com/epicweb-dev/epic-stack/blob/main/docs/client-hints.md\"\u003eEpic Stack - Client Hints\u003c/a\u003e implementation, that provides \u003cstrong\u003eLight/Dark Theme \u0026 Server Dates\u003c/strong\u003e in your application.\n  \u003c/p\u003e\n  \u003c!-- \u003cbr /\u003e\u003cbr /\u003e --\u003e\n  \u003cdiv\u003e\n    \u003ca href=\"https://remix-client-hints.fly.dev\"\u003eLive Demo\u003c/a\u003e\n    •\n    \u003ca href=\"https://github.com/dev-xo/remix-client-hints/tree/main#resources\"\u003eResources\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n## [Live Demo](https://remix-client-hints.fly.dev)\n\n[Live Demo](https://remix-client-hints.fly.dev) that displays Theme Switching and Server Dates in action.\n\n[![Remix Auth TOTP](https://raw.githubusercontent.com/dev-xo/dev-xo/main/remix-client-hints/thumbnail.png)](https://remix-client-hints.fly.dev)\n\n## Remix + Client Hints API\n\nThis example isn't meant to be a full-fledged application; it's more a reference for your own implementation or a starting point for your own project.\n\nIt helps you implement Theme Switching and Server Dates, based on [Epic Stack - Client Hints](https://github.com/epicweb-dev/epic-stack/blob/main/docs/client-hints.md) and [Jacob Paris](https://www.jacobparis.com/content/remix-ssr-dates) article.\n\nOn the first visit, the server grabs theme and time-zone hints, stores them in cookies, and reloads the page for client-side usage. While the **_FOUC (Flash of Unstyled Content)_** is unavoidable, the one-time page reload is a good trade-off and provides a better user experience than having the flash occur on every page load.\n\nCheck out the [Resources](#resources) section for more info and examples on Client Hints.\n\n## Usage\n\nLet's review some implementation details.\n\n### `Theme Switching`\n\nTheme switching is based on `prefers-color-scheme` media feature, which is a part of the [User Preference Media Features](https://web.dev/articles/user-preference-media-features-headers) specification.\n\nTo update our theme, we do a `POST` request to `/resources/theme` route, that updates the `theme` cookie, and either reloads the page **_(Progressive Enhancement)_** or returns a JSON response.\n\n### `Time-Zone`\n\nThe time-zone implementation allows the server to understand client's time zone on initial page load. On the server-side, the `getHints(request).timeZone` method is used to retrieve the time-zone information. For client-side usage, `useHints().timeZone` could be employed.\n\nIn the App Demo, the time-zone is also displayed in the UI, and the `Intl.DateTimeFormat` object is created in the user's time-zone, considering their preferred language.\n\n## Getting Started\n\nIn order to run this example locally, clone the repository and install its dependencies:\n\n```sh\nnpm install\n```\n\nRun the server:\n\n```sh\nnpm run dev\n```\n\nReady to go! 🎉\n\n## Resources\n\nA list of examples and resources that could help you grasp the concepts behind Client Hints and this implementation.\n\n- [HTTP Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) - A must-read introduction to Client Hints by MDN Web Docs.\n- [Media features Client Hints](https://web.dev/articles/user-preference-media-features-headers) - A great article that discusses how client hint headers can help websites obtain user media preferences like color scheme or reduced motion at request time, enabling servers to deliver optimized CSS for better performance.\n- [Server Dates with Remix](https://www.jacobparis.com/content/remix-ssr-dates) by [Jacob Paris](https://twitter.com/jacobmparis) - One of the first Remix articles that discusses how to handle date rendering in Remix apps when the server and client are in different timezones, avoiding issues like flash of unstyled content (FOUC) and hydration problems. A similar approach has later been used as base implementation for the Epic Stack - Client Hints.\n- [FOUC (Flash of Unstyled Content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) - A great Wikipedia article that discusses the FOUC issue.\n- [Epic Stack - Client Hints](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/005-client-pref-cookies.md) by [kentcdodds](https://github.com/kentcdodds) - An introduction to Client Hints + Remix, that has served as a base for this implementation.\n\n## Contributing\n\nIf you have any suggestions you'd like to share, feel free to open a PR!\n\n## License\n\nLicensed under the [MIT license](https://github.com/dev-xo/remix-auth-totp/blob/main/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-xo%2Fremix-client-hints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-xo%2Fremix-client-hints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-xo%2Fremix-client-hints/lists"}