This project is inspired by Migueravilla's Bento new page. It has been built with Astro for easy extending and TailwindCSS. You can see it live here.
Feel free to fork or contribute!
- Node.js 18+.
- Vercel account for hosting.
If you just wanna change the name, and bookmarks, you don't need anything. Check here for instructions.
- Fork the repository to customize it to your liking
If you wanna change the the layout, or add more features like weather, or anything of your liking, you'll need to clone it, and install the dependencies.
git clone <your-repo-url>
cd <the-repo-name>
npm installThen you can start the development server and start adding features. Refer to the Astro Docs if you're not familiar with it.
npm run devThis will let you preview your changes in the browser as you do them.
- Start customizing your page!
When you're doing adding or editing features, you can start modifying the src/lib/data.js file, where you'll find all the parameters that allow you to customize the content of the page.
Under the user attribute in the file, you'll be able to set the name that shows up in bold, and the username that shows right below it.
To set the image, I've chosen to use the Gravatar API. So if you already have a Gravatar account setted up, you can just change the email property and it'll show your image. If you do not have an account, you can create one by going to Gravatar.
If it's the first time you're using Gravatar, the image may not show up immediately and it could even take a couple of days.
If you do not want to create an account, you can also go to src/components/User.astro and set the url of your image directly in the src attribute of the img tag.
Under the clock attribute in the file, you can change the timezone and locale for the clock and date that shows right below it. For valid timezones, please refer to this page.
Under the bookmarks attribute in the file, you'll find an array of objects that contain a name, icon and url attributes. You can modify the array to add as many bookmarks as you want.
For choosing an icon name, please refer to Lucide Icons.
You can change the background of the page by simply swaping the src/assets/background.svg by another file by the same name. I've used Haikei to generate mine.
If your background isn't an svg, you can also go to the src/layouts/Layout.astro file and change the background-image url path so it picks up your image name. By the same method, and putting the url of a gif, you can also add animated backgrounds! Further customizations may be needed to make it look right.
For now, if you wish to change the text color, you'll need to go individually to each component and change the classes there.
- Deploying and setting it up on firefox.
Once you're done, you can simply deploy it to Vercel, using your github repo.
To set it up in your Firefox, please check out here.
Your contributions will be well received! Please feel free to fork and start making contributions.