feat: add browsers list, linting plugin and Docs section with supported browsers

.browserslistrc

@@ -0,0 +1,4 @@
+# Browsers that we support
+
+> 0.5%, last 2 versions, Firefox ESR,
+not dead, not op_mini all, not KaiOS < 4.0

.changeset/brave-days-happen.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Adding a browserslist config file and corresponding Eslint plugin (compat). Code will be linted based on supported browsers. Docs now show a section on the homepage listing all supported browsers and versions.

.eslintrc.cjs

@@ -10,6 +10,10 @@ module.exports = {
  parserOptions: {
  ecmaVersion: "latest",
  },
+ plugins: ["compat"],
+ env: {
+ browser: true,
+ },
  extends: [
  "plugin:vue/vue3-recommended",
  "eslint:recommended",
@@ -18,6 +22,7 @@ module.exports = {
  // see: https://github.com/vuejs/eslint-config-typescript#vueeslint-config-typescriptrecommended
  "@vue/eslint-config-typescript/recommended",
  "@vue/eslint-config-prettier/skip-formatting",
+ "plugin:compat/recommended",
  ],
  rules: {
  // Allow usage of @ts-ignore if a description for the reason was provided

apps/docs/package.json

@@ -18,6 +18,7 @@
  "@sit-onyx/icons": "workspace:^",
  "@sit-onyx/shared": "workspace:^",
  "@sit-onyx/vitepress-theme": "workspace:^",
+ "@vueuse/core": "^11.1.0",
  "chart.js": "^4.4.4",
  "postcss": "^8.4.47",
  "sass-embedded": "catalog:",
@@ -26,5 +27,11 @@
  "vitepress": "^1.4.0",
  "vue": "catalog:",
  "vue-chartjs": "^5.3.1"
+ },
+ "imports": {
+ "#src/.vitepress/browser-loader.data": {
+ "storybook": "./src/.vitepress/browser-loader.data.mock.ts",
+ "default": "./src/.vitepress/browser-loader.data.ts"
+ }
  }
 }

apps/docs/src/.vitepress/browser-loader.data.mock.ts

@@ -0,0 +1,27 @@
+import type { Data } from "./browser-loader.data";
+
+// We need to mock the Data for Storybook
+export const data: Data = {
+ browsers: [
+ {
+ coverage: 96.86,
+ id: "chrome",
+ name: "Chrome",
+ versions: {
+ "108.0.0": 108,
+ "107.0.0": 107,
+ },
+ },
+ {
+ coverage: 91.86,
+ id: "firefox",
+ name: "Firefox",
+ versions: {
+ "108.0.0": 108,
+ "107.0.0": 107,
+ },
+ },
+ ],
+ coverage: 96.86,
+ browserRules: "default",
+};

apps/docs/src/.vitepress/browser-loader.data.ts

@@ -0,0 +1,61 @@
+import fs from "fs";
+import { fileURLToPath } from "url";
+import { defineLoader } from "vitepress";
+
+const browserslistRcPath = fileURLToPath(new URL("../../../../.browserslistrc", import.meta.url));
+
+export type Browser = {
+ coverage: number;
+ id: string;
+ name: string;
+ versions: Record<string, number | undefined>;
+};
+
+export interface Data {
+ browsers: Browser[];
+ coverage: number;
+ browserRules: string;
+}
+
+declare const data: Data;
+
+export { data };
+
+/**
+ * Based on our browserslist config we load information about supported browser version and coverage from the
+ * official browserlist API. This happens only on build time.
+ * More information can be found on https://browsersl.ist
+ */
+export default defineLoader({
+ async load(): Promise<Data> {
+ return new Promise((resolve, reject) => {
+ let browserRules = "";
+
+ try {
+ const data = fs.readFileSync(browserslistRcPath, "utf8");
+ const lines = data.split("\n").filter((l) => !!l && !l.startsWith("#"));
+ browserRules = lines.join("").trim();
+ } catch (e) {
+ reject("could not read .browserslistrc")
+ }
+
+ const fetchBrowserslistData = async () => {
+ const url = `https://browsersl.ist/api/browsers?q=${browserRules}`;
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error("failed to fetch browserslist API data");
+ }
+
+ const data = await response.json();
+ resolve({ browserRules, ...data });
+ };
+
+ try {
+ fetchBrowserslistData();
+ } catch {
+ reject("error loading browserslist API data");
+ }
+ });
+ },
+});

apps/docs/src/.vitepress/components/BrowsersList.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import Component from "./BrowsersList.vue";
+
+const meta: Meta<typeof Component> = {
+ title: "BrowsersList",
+ component: Component,
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const Default = {
+ args: {},
+} satisfies Story;

apps/docs/src/.vitepress/components/BrowsersList.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { data as browsersData } from "#src/.vitepress/browser-loader.data";
+
+const browsers = browsersData.browsers.filter((b) => b.coverage > 0);
+
+const popularBrowsers = ["chrome", "edge", "firefox", "safari", "samsung", "ios_saf"];
+
+const filteredBrowsers = browsers
+ .filter((browser) => popularBrowsers.includes(browser.id))
+ .map((browser) => {
+ return {
+ ...browser,
+ minVersion: Object.keys(browser.versions).sort()[0],
+ };
+ });
+</script>
+
+<template>
+ <ul class="browsersList">
+ <li v-for="{ name, minVersion, id } in filteredBrowsers" :key="name" class="browser">
+ <img
+ :src="`/assets/browsers/${id}.svg`"
+ :alt="`${name} icon`"
+ width="40px"
+ height="40px"
+ class="browser__image"
+ loading="lazy"
+ />
+ <p class="browser__name">{{ name }}</p>
+ <p>Version ≥ {{ minVersion }}</p>
+ </li>
+ </ul>
+</template>
+
+<style lang="scss" scoped>
+.browsersList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--onyx-spacing-xl);
+ margin: 0;
+ padding: 0;
+ margin-bottom: var(--onyx-spacing-lg);
+}
+
+.browser {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ p {
+ margin: 0;
+ line-height: 1.3;
+ }
+ &__name {
+ padding-top: var(--onyx-spacing-xs);
+ font-weight: 600;
+ }
+ &__image {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ transform: translateX(-4px);
+ }
+}
+</style>