Iteration1

[Danie0918]

【Discussion】

• Website of Magickbase shaping#43
• Magickbase official website homepage visual-style-guide#26
• Magickbase official website design visual-style-guide#25

---

【PRD】https://lb84z6.axshare.com/

• [General]
• [Home]
• [Neuron]
• [CKB Explorer]
• [Godwoken Explorer]
• [Axon Explorer]
• [Kuai]
• [Service Monitor]

---

【UI】https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?type=design&node-id=17481-39205&mode=design&t=J0PymtVYKVV1Pv04-0

---

【PR】

[Danie0918]

【General】

1. Website Architecture

• The website has Magickbase as the first level domain name and the official website of its services as the second level domain name.
• Domain rules: service name.magickbase.com/name of the page file under the service.

2. Top Navigation

• [Logo] Located in the upper left corner of the page, displaying the name of the current page (service pages need to provide the official website jump logo), page sliding navigation bar fixed top.
• [Menu] Tap to swipe left to bring up a menu that provides navigation and global settings.

3. Bottom Column

• [Logo] Click to jump to the Magickbase home page.
• [Status and Service Monitor] Displays the overall status of the current services under Magickbase and can be clicked to access the service monitor page.
• [Services] Click the name to jump to the corresponding service homepage.
• [Foundation] Provide the foundation external link, click to jump to the foundation home page.

[Danie0918]

【Home】

1. Branding Screen
   The first screen displays fixed copy for brand promotion (slogan + introduction), supports language switching, and switches to the next screen by sliding.

2. About Us
   Show team spirit, fixed copy (headline + body), support language switching, scroll to show vision, mission, future when sliding the page, keep sliding to switch to the next screen.

3. Services
   Display the services under the organization (name + description) and click new window to go to the services home page.

4. Contact Us
   Contact us (promotional text + contact information), click to display the corresponding contact information.

[Danie0918]

【Neuron】

1. Home

Split-screen introduction to Neuron Wallet features, providing introductory copy and preview images to guide users to download the wallet.

2. Changelog

• [Data Source] Get the github release page to update the text, provide a link to jump to view the corresponding issue.
• [Sort] In descending order of version release.
• [Paging] Load up to 5 screens of content in a single load, beyond which you will need to turn the page to view.
• [Back to top] Provides a back to top button to click to return to the top of the page after the page has slid beyond one screen.
• [Tip] Add a marker line at the bottom of the earliest update in the document to indicate to the user that there is "no more content".

3. Help Center

• [Home] Display titles and provide searches based on captured documents.
• [Search Results] Fuzzy match search document title and content and provide a preview, display results when not matched and provide contact information.
• [Document] The content of issues and discussions on github is collected through algolia and divided into newbie guides, FAQs and announcements.

4. Download

• [Resource] Get the latest release resources from github.
• [List] Categorized by system, architecture, and package type, Checksum is provided to help check downloaded packages.

[Danie0918]

【CKB Explorer】CKB Explorer Portal - Help users to understand CKB Explorer and record CKB Explorer updates.

1. Home

Split-screen introduction to CKB Explorer features, providing introductory copy and preview images to direct users to CKB Explorer.

2. Changelog

[Data Source] Get github to update issues and titles, providing jump links to view the appropriate issues.
[Sort] Sorted in descending order of time.
[Paging] Load up to 5 screens of content in a single load, beyond which you will need to turn the page to view.
[Back to top] Provides a back to top button to click to return to the top of the page after the page has slid beyond one screen.
[Tip] Add a marker line at the bottom of the earliest update in the document to indicate to the user that there is "no more content".

[Danie0918]

【Godwoken Explorer】Godwoken Explorer Portal - Help users to understand Godwoken Explorer and record Godwoken Explorer updates.

1. Home

Split-screen introduction to Godwoken Explorer features, providing introductory copy and preview images to direct users to Godwoken Explorer.

2. Changelog

[Data Source] Get github to update issues and titles, providing jump links to view the appropriate issues.
[Sort] Sorted in descending order of time.
[Paging] Load up to 5 screens of content in a single load, beyond which you will need to turn the page to view.
[Back to top] Provides a back to top button to click to return to the top of the page after the page has slid beyond one screen.
[Tip] Add a marker line at the bottom of the earliest update in the document to indicate to the user that there is "no more content".

[Danie0918]

【Axon Explorer】Axon Explorer Portal - Help users to understand Axon Explorer and record Axon Explorer updates.

1. Home

Split-screen introduction to Axon Explorer features, providing introductory copy and preview images to direct users to Axon Explorer.

2. Changelog

[Data Source] Get github to update issues and titles, providing jump links to view the appropriate issues.
[Sort] Sorted in descending order of time.
[Paging] Load up to 5 screens of content in a single load, beyond which you will need to turn the page to view.
[Back to top] Provides a back to top button to click to return to the top of the page after the page has slid beyond one screen.
[Tip] Add a marker line at the bottom of the earliest update in the document to indicate to the user that there is "no more content".

[Danie0918]

【Kuai】Kuai Portal - Help users to understand Kuai and record Kuai updates.

1. Home

Split-screen introduction to Kuai features, providing introductory copy and demo to direct users to Kuai.

2. Changelog

[Data Source] Get github to update issues and titles, providing jump links to view the appropriate issues.
[Sort] Sorted in descending order of time.
[Paging] Load up to 5 screens of content in a single load, beyond which you will need to turn the page to view.
[Back to top] Provides a back to top button to click to return to the top of the page after the page has slid beyond one screen.
[Tip] Add a marker line at the bottom of the earliest update in the document to indicate to the user that there is "no more content".

[Danie0918]

【Service Monitor】Service monitoring page that provides a summary of online service monitoring data.

1. Home

Displays the overall status of the service and the status of each of its subordinate services (Public Node, CKB Explorer, Godwoken Explorer, and Faucet) for the last 90 days.(Data sources:https://status.magickbase.com/)

2. Index

Provides service index detail charts, currently supports CKB Explorer and Godwoken Explorer.

[Data Sources] https://grafana.layerview.io/d/gEWc1Gq4k/ckb-dashboard?orgId=1&from=now-5m&to=now&refresh=5s
[Content Display] Embedded in a fixed position on the page, click on the zoom button to view the enlarged chart.

3. History Events

Record historical events for each service to help users access and understand how problems occurred and were resolved over time.

[Data Sources] https://status.magickbase.com/incidents
[Sort] Sorted in descending order of time.
[Content Display] Display the start and end time, title and label of the event in a table, and hover over the entry to display the details.

[Danie0918]

[Service Monitor]

Here the original public node page has been expanded to introduce new service indicator charts to form a new web page.This preserves the original data and expands and categorizes it, how about this solution? @Keith-CY @Sven-TBD

[Keith-CY]

Mentioning the Service Monitor -> Status status and Service Monitor -> History Incidents

There are 2 solutions to reuse service of uptime at https://status.magickbase.com/

1. Use OpenAPI of uptime https://uptime.com/api/v1/docs/, but it's limited to 500 requests/hour, and build the page by ourselves;
2. Embed uptime's page in an iframe and update its style with custom CSS
   

I would pick solution 2 because the page of uptime looks good to me.
Any idea from @WhiteMinds

[WhiteMinds]

Mentioning the Service Monitor -> Status status and Service Monitor -> History Incidents

There are 2 solutions to reuse service of uptime at https://status.magickbase.com/

1. Use OpenAPI of uptime https://uptime.com/api/v1/docs/, but it's limited to 500 requests/hour, and build the page by ourselves;
2. Embed uptime's page in an iframe and update its style with custom CSS
   

I would pick solution 2 because the page of uptime looks good to me. Any idea from @WhiteMinds

I think I missed this message before.

I also agree with using Solution 2, to avoid reimplementing the uptime functionality again.

[PainterPuppets]

After discussing with @WhiteMinds , it was decided to rename neuron-troubleshooting repo and change to monorepo, with each sub-project page as a separate package

[PainterPuppets]

https://magickbase-website-g4z9v7rdh-magickbase.vercel.app/