{"id":27287246,"url":"https://github.com/serjilyashenko/weekapp","last_synced_at":"2026-04-24T16:04:55.390Z","repository":{"id":158699263,"uuid":"616461827","full_name":"serjilyashenko/WeekApp","owner":"serjilyashenko","description":"Discover dates and week numbers effortlessly with user-friendly interface.","archived":false,"fork":false,"pushed_at":"2023-12-14T18:53:15.000Z","size":2684,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T20:18:56.780Z","etag":null,"topics":["calendar","javascript","week","week-number"],"latest_commit_sha":null,"homepage":"https://weekapp.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serjilyashenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-20T12:44:32.000Z","updated_at":"2023-10-06T10:44:56.000Z","dependencies_parsed_at":"2023-10-01T21:16:17.414Z","dependency_job_id":null,"html_url":"https://github.com/serjilyashenko/WeekApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serjilyashenko%2FWeekApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serjilyashenko%2FWeekApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serjilyashenko%2FWeekApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serjilyashenko%2FWeekApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serjilyashenko","download_url":"https://codeload.github.com/serjilyashenko/WeekApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248473112,"owners_count":21109629,"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":["calendar","javascript","week","week-number"],"created_at":"2025-04-11T20:19:00.391Z","updated_at":"2026-04-24T16:04:55.306Z","avatar_url":"https://github.com/serjilyashenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🗓️ Week App\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/162a4db8-f908-4a07-bdb5-be8e88d5cb47/deploy-status)](https://app.netlify.com/sites/weekapp/deploys)\n\n[Check it out 🚀](https://weekapp.netlify.app/)\n\nFind the week number for any date and vice versa.\nYou can also select a year and week number to see the dates within that week\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/preview_dark.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/preview_light.png\"\u003e\n  \u003cimg alt=\"Application preview\" width=\"500px\" height=\"400px\" src=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/WinError_light.png\"\u003e\n\u003c/picture\u003e\n\n⚠️ WeekApp exclusively operates with ISO weeks ([wiki](https://en.wikipedia.org/wiki/ISO_week_date)). That means weeks start from Monday. ⚠️\u003cbr/\u003e\nFor example, in the year 2023, the 40th ISO week runs from Monday, October 2nd to Sunday, October 8th.\n\n#### Stack:\n\n- Vite.js\n- React\n- Typescript\n- Jest\n- ts-jest\n\n#### Notes:\n\n- While I created my own date functions from scratch for fun, I highly recommend using third-party libraries such as\n  `date-fns` or `luxon` for production code. These libraries have been thoroughly tested, optimized for performance, and\n  offer a wide range of useful features. By using them, you can avoid common errors and edge cases that may arise when\n  working with dates.\n- There is no RTL. First I want to test my date functions. RTL may be added later.\n- The dark mode is implemented too. A lot of css custom properties was used 😅. See `index.css` file.\n- Icons size is calculated as 1.2em from inherited font-size\n- A trick to customize date-picker button (see `date-picker.module.css`)\n- I used css custom properties at some point to share calendar content min height (--calendar-content file calendar-template.module.css)\n- As a color schema I use `hsl`. I would like to try `oklch`. But since I prefer to use pure css in that project, the browsers support of `oklch` is not enough today(2023-09-23).\n- includes @supports to make `:user-invalid` progressive enhancement for chrome (edge and a bit older chrome doesn't support them (on `2023-09-23`))\n- I like styling of the form for day and night modes. + box-shadow animation for `:focus-visible`\n- I like how the animation of the opening of the form turned out\\\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/formAnimation_dark.gif\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/formAnimation_light.gif\"\u003e\n  \u003cimg alt=\"Form animation\" width=\"300px\" height=\"290px\" src=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/WinError_light.png\"\u003e\n\u003c/picture\u003e\n\n- There are related fields in WeekForm.tsx. Week input allowed values depends on Year input value. For instance 2023 includes 52 weeks, otherwise 2027 includes 53 weeks. So, the week input's validity may change during Year input change.\n- Week input validation using regex generated by `getWeekRegexPattern` method.\n- Date methods can trow error during component rendering. They are intercepted by ErrorBoundary.\n- I created fun win fallback `ErrorFallback.tsx` (using html + css) for rendering errors:\\\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/WinError_dark.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/WinError_light.png\"\u003e\n  \u003cimg alt=\"Shows error example\" width=\"500px\" height=\"286px\" src=\"https://raw.githubusercontent.com/serjilyashenko/WeekApp/master/images/WinError_light.png\"/\u003e\n\u003c/picture\u003e\n\n- ISO warning text includes `text-wrap: balance;`. However, chrome and edge only supports this (2023-10-05).\n- The favicon setup is based on the [evilmartians article](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)\n  - `\u003clink rel=\"icon\" href=\"/favicon.ico\" sizes=\"32x32\" /\u003e` for legacy browsers\n  - `\u003clink rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\" /\u003e` Single SVG icon for modern browsers (a light/dark version can be included)\n  - `\u003clink rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\" /\u003e` 180×180 PNG image for Apple devices\n  - `\u003clink rel=\"manifest\" href=\"/manifest.webmanifest\" /\u003e` Web app manifest with 192×192 and 512×512 PNG icons for Android devices\n- Also Preview is added via OpenGraph metatags\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserjilyashenko%2Fweekapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserjilyashenko%2Fweekapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserjilyashenko%2Fweekapp/lists"}