SUI2

a startpage.

Originally forked from sui, sui2 adds new features like keyboard navigation and PWA to boost your productivity. It's a complete refactor, brings new technologies for easier development & deployment.

See how keyboard navigation works in action:

sui2.mov

Deploy to any static hosting

sui2 uses Vite to build a staic website, which means it's nothing but vanilla HTML/CSS/JavaScript that could be deployed to anywhere you want.

To build the project, simply follow the steps below.

1. Install dependencies: npm install

2. Create you own data.json

   sui2 get all the data it requires from data.json, you can make a copy from data.example.json, and then edit it with your own applications and bookmarks.

3. Build the result: npm run build

   The result will be stored in the dist folder

4. Upload to a static hosting.

   There are various hosting services like GitHub Pages, Cloudflare Pages, Netlify. Examples will be documented later on.

If you are happy with the look and functionality of sui2, it is recommended to use this project as a submodule rather than fork it. Please checkout reorx/start as an example for how to use it in another project, and how to build with GitHub Actions and deploy to Cloudflare Pages.

data.json editing

There's a full example in data.example.json, it's self explanatory so I'm not going to write too much about it, maybe a json schema will be created as a supplement in the future.

The only thing worth mentioning here is the icon attribute, it uses the MDI icon set from Iconify, you can find any icon you like in this page, and use the name after mdi: as the value for the icon attribute. For example mdi:bread-slice should be used as "icon": "bread-slice" in data.json.

Development

Developing the startpage is easy, first clone the project, then run the following:

npm install

# start vite dev server
npm run dev

Developing the live-server is a little bit tricky, live-server/ is an independent package with an express server and another vite frontend.

cd live-server
npm install

# start the express server on port 3000
npm run dev-backend

# open another shell, then start vite dev server
npm run dev

The output of npm run dev looks like this:

  ➜  Local:   http://localhost:5173/editor/

You can now open this URL to start developing live-server. The fetch requests of /api and /preview on this page will be proxied to the express server on port 3000. The default data folder is at live-server/data/.

from https://github.com/reorx/sui2 

----

https://github.com/pseudoyu/nsc-starter

 

 

11048PMP41016x1048 0:18