mariobarisa/vaporflow-startpage

Vaporflow is a browser start page with daisyui distinctive aesthetic, featuring OpenWeather

Vaporflow Chrome Startpage
≋≋≋（🗻📼🌸🌴⛲️🐬💾 ）≋≋≋

---

"Vaporflow is a browser start page where I have gathered the elements that I like the most about the projects found on r/startpages. This Chrome extension (and soon Firefox as well) embeds these features:"

• Based on Tailwind CSS + Daisy UI component
• OpenWeather
• React + Typescript
• Support Manifest V3

---

Table of Contents

Table of Contents

• Intro
• Usage
  • Prerequisite for OpenWeather
  • Setup
  • Configs
  • Bookmarks
• Tech Docs
• Contributing

Intro

Welcome to the Vaporflow Chrome Extension README! Vaporflow is a stylish and customizable browser start page that is now available as a Chrome extension. Built on top of Chrome Extension Boilerplate React Vite, Vaporflow is powered by React 18 and TypeScript, and uses Vite as its build tool. The design is based on the popular Tailwind CSS framework, with added components from Daisy UI, to make customization a breeze. It supports the latest Chrome Extension Manifest V3 specification.

As soon as the Boilerplate template supports manifest v3, support will be added in this repo as well.

• Read more about Chrome manifest v2 support here.
• Read more about Firefox Manifest v3 support here.

Usage

Prerequisite for OpenWeather

Want to keep up-to-date with the latest weather conditions right from your start page? No problem! To add the Weather Widget to your start page, simply create an account on OpenWeather and generate an API KEY.

Setup

1. Clone of Fork this repository.
2. Run yarn or npm i (check your node version >= 16)
3. Run yarn dev or npm run dev
4. Load Extension on Chrome
   1. Open - Chrome browser
   2. Access - chrome://extensions
   3. Check - Developer mode
   4. Find - Load unpacked extension
   5. Select - dist folder in this project (after dev or build)
5. If you want to build in production, Just run yarn build or npm run build.

Configs

With the src/pages/newtab/config.json file, you can easily set your OpenWeather API key, language, units, location, and the page themes to suit your preferences. All theme reference are available in tailwind.config.cjs.

// src/pages/newtab/config.json
{
  "username": "Gaël",
  "openweather":{
    "apikey": "YOUR_API_KEY", // 👈 Add your OpenWeather key here
    "language": "en",
    "units": "metric",
    "location": "Lausanne"
  },
  "theme": [ // 👈 See tailwind.config.cjs for more themes
    {
      "name": "Light",
      "emoji": "🖨️",
      "theme": "light"
    },
    {
      "name": "Dark",
      "emoji": "🌑",
      "theme": "dark"
    },
  ]
}

Sample theme:

Bookmarks

The configuration of bookmarks is done in src/pages/newtab/Bookmarks.tsx:

1. Update const YourLinks = ... link list

/// src/pages/newtab/Bookmarks.tsx
  const socialLinks = [
    {
      href: "https://www.instagram.com/", // 👈 url link
      icon: <SlSocialInstagram className="hidden md:block" size={20} />, // 👈 react-icons
      text: "instagram", // 👈 displayed text
    },
    {
      href: "https://www.twitter.com/",
      icon: <SlSocialTwitter className="hidden md:block" size={20} />,
      text: "twitter",
    },
    ...
  ];

2. Update category title

/// src/pages/newtab/Bookmarks.tsx
      <div className="col-start-2 text-center">
        <h3 className="text-accent text-xl font-semibold">Social</h3> // 👈 Category title
        {renderLinks(socialLinks)} // 👈 Link list constant
      </div>

Tech Docs

• Boilerplate React Vite
• Vite Plugin
• Chrome Extension with manifest 3
• Rollup
• Rollup-plugin-chrome-extension
• Tailwind CSS

Contributing

Feel free to open PRs or raise issues!