{"id":13493397,"url":"https://github.com/kitze/twizzle-landing","last_synced_at":"2025-04-04T12:07:52.682Z","repository":{"id":33474101,"uuid":"158670574","full_name":"kitze/twizzle-landing","owner":"kitze","description":"The landing page for Twizzle","archived":false,"fork":false,"pushed_at":"2023-05-25T15:07:18.000Z","size":2603,"stargazers_count":642,"open_issues_count":28,"forks_count":61,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T11:07:54.197Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://twizzle.app","language":"JavaScript","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/kitze.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,"roadmap":null,"authors":null}},"created_at":"2018-11-22T08:59:55.000Z","updated_at":"2024-06-01T16:44:20.000Z","dependencies_parsed_at":"2024-01-13T19:26:48.642Z","dependency_job_id":"965e9f7f-d5ad-4130-82c8-ec7c7c6d95a3","html_url":"https://github.com/kitze/twizzle-landing","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/kitze%2Ftwizzle-landing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Ftwizzle-landing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Ftwizzle-landing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Ftwizzle-landing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitze","download_url":"https://codeload.github.com/kitze/twizzle-landing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174418,"owners_count":20896078,"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":[],"created_at":"2024-07-31T19:01:14.796Z","updated_at":"2025-04-04T12:07:52.660Z","avatar_url":"https://github.com/kitze.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)  \n\n### Other projects:\n- 💻 [Sizzy](https://sizzy.co) - A browser for designers and developers, focused on responsive design\n- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops\n- 🔮 [Glink](https://glink.so) - Changelogs, Roadmap, User Requests\n- 🐶 [Benji](https://benji.so) - Ultimate wellness and productivity platform\n- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps\n- 📹 [YouTube Vlog](https://youtube.com/kitze) - Follow my journey\n\n\u003ca href=\"https://zerotoshipped.com\"\u003e\u003cimg style=\"width:450px\" src=\"https://i.ibb.co/WKQPDv5/twitter-image.jpg\" alt=\"Zero To Shipped\"\u003e\u003c/a\u003e\n\n---\n\n# Twizzle\n\n✉️️ Landing page for [Twizzle](https://twizzle.app), a desktop app for Twitter DM \u0026 composing tweets  \n\n## 🛠️ Setup\n\nIt's `CRA 2` with `customize-cra` and `react-app-rewired`.  \nThe [config file](https://github.com/kitze/twizzle-landing/blob/master/config-overrides.js) is adding/changing the following:\n\n- Add `babel-plugin-styled-components`\n- Add `inline-react-svg` to inline svg files (I know CRA has this functionality but you import every file in a specific way)\n- Disable ESlint 🤷‍♂️️\n\n## ✅️ Main file\nThe magic happens in [components/App/index.js](https://github.com/kitze/twizzle-landing/blob/master/src/components/App/index.js)\n\n## 🐟️ Custom hooks\nAll of the hooks are in [utils/hooks.js](https://github.com/kitze/twizzle-landing/blob/master/src/utils/hooks.js)\n\n- `useCanHover` - detect if the device supports hover, if it doesn't, use `onClick` for the \"tweeting\" button\n- `useToggleBodyClass` - toggle a body class based on a boolean. Used to trigger `dark/light` and `scroll/no-scroll` classes on the `body` tag.\n- `useGoogleAnalytics` - inserts a google analytics script, but only when the app is ready\n- `useMousePosition` - track the mouse position. It's used to detect if the user is over the menu bar, otherwise the tweet composer gets glitchy.\n- `useLoadScript` - appends a script tag to the head of the page (used to load the Paddle script after the page is loaded)\n\nI'll move these hooks to [react-hanger](https://github.com/kitze/react-hanger) soon.\n\n## 🏝️ Desert background\n\n- I extracted all the logic for the background in a [Background](https://github.com/kitze/twizzle-landing/blob/master/src/components/Background/index.js) component\n- For the background I'm using 2 different svg images of a desert, a light one and a dark one.\n- I tried using them as background images, but they get all weird for some reason\n- They are switched using the [DayNightToggle](https://github.com/kitze/twizzle-landing/blob/master/src/components/DayNightSwitch/index.js).\n- I'm using a `desertLoaded` boolean to detect when the dark image is completely loaded, and fade it in (otherwise it would look ugly on slow connections)\n- I'm waiting until the [app is ready](https://github.com/kitze/twizzle-landing/blob/master/src/components/Background/index.js#L17) to start loading the light image, otherwise it's just slowing down the other requests for no reason \n\n## 🍬️ Intro animation\n\n- All the animation logic is extracted in [this custom hook](https://github.com/kitze/twizzle-landing/blob/master/src/components/App/use-intro-animation.js)\n- It's using [react-pose](https://github.com/Popmotion/popmotion/tree/master/packages/react-pose) for the animations\n- It's using [sequence](https://github.com/kitze/twizzle-landing/blob/master/src/utils/sequence.js) which is a function that I wrote for scheduling state changes. I also used it for the intro animation of [ok-google.io](http://ok-google.io). It goes through the arguments and if it finds a function it calls it, and if it finds a number it's gonna wait with `setTimeout` for the amount of ms. There is more info in [this article](https://medium.com/@kitze/js-coding-challenge-1-test-your-skills-63c2af5446d0).\n- It's always enabled in production, but it can be turned off in development using a boolean\n\n## 🌓️ Day/night switch\n\nIt's really [nothing fancy](https://github.com/kitze/twizzle-landing/blob/master/src/components/DayNightSwitch/index.js), just couple of styled divs. I feel a bit guilty because it's completely inaccessible by keyboard users.\n\n## z-index\n\nSo, z-index has been driving me crazy for a long time, so I decided to [simplify the logic](https://github.com/kitze/twizzle-landing/blob/master/src/styles/zindex.js) by ordering all elements in an `order` array and then using `...zIndexFor(ELEMENTS.COMPOSE)` in the styles for the component that needs z-index. Smooth.\n\n## 🖌️ Theming\n\n- The app has a dark and a light mode, and all the logic for them is in [styles/themes.js](https://github.com/kitze/twizzle-landing/blob/master/src/styles/themes.js).\n- Other components can use the themes either by destructuring the `theme` prop, or with the following mixins:\n\n- `whenTheme` - It applies style only when the certain theme name is active. Example: `whenTheme('dark', {backgroundColor: 'black})`\n- `applyTheme` - It applies certain theme styles to the element. Example: `applyTheme('windowBar')` will get the `theme.windowBar` styles from the current theme\n- `getThemeColor` - It reads a certain color from the current theme. Example: `getThemeColor('icon')` will return the icon color for the current theme.\n\n\n## ⁉️ AMA\n\nJust open an issue if you're interested about anything else in the app, and I'll add it in the readme.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitze%2Ftwizzle-landing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitze%2Ftwizzle-landing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitze%2Ftwizzle-landing/lists"}