puruvj / macos-preact Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://macos-preact.now.sh
License: MIT License
Home Page: https://macos-preact.now.sh
License: MIT License
Edit
Things have changed. @tolgaerdonmez has given me the wallpapers in HEIC format.
Calculator, currently is non-function. Make it function:
macOS start sound doesn't work because of no interactions with the user (page click) before playing.
I suggest to add a start button (as. iMac back start button) that invoke the user to click it to continue and start the OS.
Very Simple Tooltip with Pure CSS
Let me know!
In original macOS's menubar, clicking on 1 menu open it, and then hovering on other open them, and close the previous one. When they're open, hovering out of these do not close them, but clicking outside so.
Current Behavior:
Open on hovering directly, and hovering out closes it.
Expected:
Just like I described above.
Files to look out for:
src/components/Menubar.tsx
Use macOS cursors instead of regular cursor properties.
Use CSS variables like --app-cursor-default
, --app-cursor-pointer
, etc to store their URLs
__assets
and __components
as aliases are unnecessary. Remove them and fix the imports in Dock.tsx
and Desktop.tsx
Source https://dynamicwallpaper.club/gallery
For v2
Actually, if you open macos-web with a slow network, macOS "starts" first, and doesn't await for all images load... I suggest to wait body load, first, and then end "boot".
A lot of components rely on the useTheme
hook to get if theme is dark, just for stylistic purposes. Let's get rid of that and use the :global(body[data-theme=dark] .selector
. This is purely CSS based, and won't trigger unnecessary rerenders in components, and will make them smaller overall
calcutorbuttons are not working
The magnification effect should be disabled by default and made as a toggle.
In macOS Big Sur, the effect is not enabled by default. (the same with Monterey).
Why don't handle Cmd(or Ctrl)+W to close app window and Cmd(or Ctrl)+Q to quit app? This can be very "useful"! ๐
Create dock item and a list of app icons in the global store
Achieve that awesome wallpaper changing effect based on time(more like solar cycle stuff like sunset, sunrise, twilight time).
Use https://sunrise-sunset.org/api for this.
Implement in v2, and give customization options in v3.
The app indication tooltip on the dock is quite weird on hover. Fix it to follow the scaleing of app icons
When you click on menubar, it should open up, when you hover out, it stays open.
When one menu is open, and you hover over another, that menu should open up and previous one should close.
Currently, all the components are eagerly loaded. Thats no issue, but it is a problem when trying
do you want to include PWA for system updates like on svelte one?
https://github.com/antfu/vite-plugin-pwa/blob/main/client.d.ts#L89
macOS, after boot, make a transition to the login panel, so, can be a nice thing add a transition from before "boot" to after "boot"...
Describe this project in README.md, outline the roadmap(v1, v2, intended features, etc)
Time to add accessibility to this app. Its highly unaccessible at this point. Keyboard users can never know where they are, users are used to moving around using arrow keys, on certain list-like areas(menus), and the aria markup pretty much sucks
Actions to be taken:
Much more that can be done. Also, I am not very good at ARIA. Would appreciate if I could get comments/tips when I do it wrong in the code ๐๐
To make a more same as original boot, I suggest to hide cursor when boot, and then show it after boot.
I've found this repository that can be useful to implement a semi-functional Finder in macos-web: https://github.com/guyariely/finder-clone
Currently, the apps are confined to w=viewport. But apps on macOS can go sideways and exit the frame horizontally.
use Rnd's bounds and provide coordinates minus the dock and topbar
There is currently no file structure. Create one.
Inspiration:
https://medium.com/@Charles_Stover/optimal-file-structure-for-react-applications-f3e35ad0a145
Let's start work on menubars
Get this done
Cool project! Just noticed the page title still says React despite the move to Preact.
Currently, MenuBar, to show menus, uses TippyJS and lots of state management with Jotai. But that is quite slow.
Goal:
Remove TippyJS from the equation entirely.
Rely on CSS as much as possible, though using Jotai to show stuff actually seems like the best scenario here, as :hover
will not work unidirectionally, that is, it will show as well as hide on hover and removed-hover, which we do not want.
Same goes for ActionCenter. Use same methods for it too
Can be very beautiful see macOS app bouncing when an app "starts"! ๐
lipLICENSE
As specified in the title. the cursor is not macOS one when interacting with the VSCode window.
Auto-Hide Dock option would be better when we open any application in full screen.
Not a big deal but I think that .backgroundCover
should have background-repeat: no-repeat
instead of none
.
https://github.com/PuruVJ/macos-web/blob/main/.gitignore includes
package-lock.json
yarn.lock
It's better to commit them (choose one of them) and remove them from .gitignore
.
This also causes issues with codesandbox.
Why it's helpful? - see this https://stackoverflow.com/a/44904494/6708328.
From a personal perspective - installing the dependencies from remote may be different from your locally installed dependencies.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.