Create home page component - Vanilla.js

[blackgirlbytes]

Create home page component - Vanilla

🚀 Goal

Create a home page component in Vanilla that serves as the landing page for our Decentralized Web App (DWA) starter, providing different views based on the user's connection status.

🤔 Background

We need to implement the home page for our Vanilla.js DWA starter, mirroring the functionality of the existing React implementation. This page should display a welcome message and a connect button when the user is not connected, and show a TodoList component (or placeholder) when connected.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vanilla, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• [ ] Create a HomePage.vanilla component
• [ ] Implement conditional rendering based on the user's connection status:
  • [ ] When not connected, display:
  • [ ] A title "DWA Starter"
  • [ ] An image (use the same workplace.svg or an equivalent)
  • [ ] A button labeled "Connect to your DWA" that initiates the Web5 connection process
  • [ ] A message below the button saying "Connect your DWA to get started"
  • [ ] When connected, display:
  • [ ] If a TodoList component exists, use it here
  • [ ] If no TodoList component exists yet, create a simple placeholder component that says "Todo List Coming Soon!"
• [ ] Ensure the component uses the Web5 connection status correctly
• [ ] Implement the connection functionality when the button is clicked
• [ ] Style the component using Tailwind CSS to match the existing design
• [ ] Ensure the layout is responsive and looks good on various screen sizes

🌟 Resources

• Web5 Documentation
• Vanilla JS Documentation
• Tailwind CSS Documentation
• DWA React Vite Starter App (for reference)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[29deepanshutyagi]

.take

[github-actions[bot]]

Thanks for taking this issue! Let us know if you have any questions!

[29deepanshutyagi]

can you describe what kind of image should i add

[blackgirlbytes]

@29deepanshutyagi hiii! If you run this project locally, you will be able to see what it should look like https://github.com/TBD54566975/tbd-examples/tree/main/javascript/dwa-starter-react-vite

But it should look like this

Remember this is a JavaScript version of the React project, which is linked in the issue. It needs to look exactly like this.

You can also take a look at the Vue version which is in progress. https://github.com/TBD54566975/tbd-examples/tree/main/javascript/dwa-starter-vue