NNotepad: UI update

[ibelem]

Updated UI with following changes:

• Add navigation bar for logo, WebNN sample links, show generated code, show documentation and device type selector
• Add code editor to replace the <textarea> which can show code lines
• More style tuning

@inexorabletash @huningxin @Honry Please take a look and let me know if it's acceptable or not.

[huningxin]

Does this change from "Nnodepad" to "NNotepad"? I cannot tell that from the diff.

[ibelem]

@huningxin There was the typo in the svg logo, changed the text from "NNodepad" to "NNotepad" now, please refer to the updated new screen shot as attached.

[huningxin]

The UI update looks good to me. I'll defer to @inexorabletash for decision. Thanks!

[inexorabletash]

Nice work!

Some nitpicks, some requests.

Also, I'm seeing lots of console spam, e.g.:

• Uncaught SyntaxError: Unexpected token <
• Error: Unexpected usage at _EditorSimpleWorker.loadForeignModule

It's possible I've got things set up incorrectly locally, but I don't think those are coming from my code.

[ibelem]

@inexorabletash @huningxin @anssiko

Thanks for the review and feedback, removed monaco-editor and vite-plugin-monaco-editor npm packages, and fixed issues captured by @inexorabletash. PTAL.

[inexorabletash]

Thanks - fixes look good. I appreciate the effort to make the simple HTTP server work! It's unfortunate to have to have a copy of the monaco editor in the source tree - is there any way to pull that in via npm to ease maintenance?

I'm on vacation this week so I'll give a quick LGTM to unblock.

[inexorabletash]

Thank you!

[ibelem]

@inexorabletash Wishing you a fantastic break!

The new commit removed monaco editor local codes from source tree, use the js files from CDN https://cdn.jsdelivr.net/npm/[email protected]/ instead. @huningxin @anssiko PTAL

Verify it worked via python3 -m http.server 8888
http://localhost:8888/nnotepad/index.html

Verify it worked via npm run start
https://10.239.115.52:5173/nnotepad/index.html

[inexorabletash]

One suggested change, but overall LGTM.

Thank you so much for taking this on!

[ibelem]

@inexorabletash Thank you, added the /* global monaco */ instead of ignoring the whole file for eslint. PTAL.

[inexorabletash]

LGTM!