feat: add rel & title attrs to links

Author: VChet

src/components/header/repo-form.vue

@@ -10,15 +10,24 @@
       <ol v-if="!form.integrations.uptimerobotKey">
         <li>
           Go to
-          <a href="https://uptimerobot.com/dashboard.php#mySettings" target="_blank">
+          <a
+            href="https://uptimerobot.com/dashboard.php#mySettings"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Go to UptimeRobot settings"
+          >
             Settings
           </a>
         </li>
         <li>Find "Monitor-Specific API Keys"</li>
         <li>Find your monitor</li>
         <li>Copy and paste it's API key here</li>
       </ol>
-      <input v-model.trim="form.integrations.uptimerobotKey" name="uptimerobotKey" placeholder="uptimerobot monitor key">
+      <input
+        v-model.trim="form.integrations.uptimerobotKey"
+        name="uptimerobotKey"
+        placeholder="uptimerobot monitor key"
+      >
     </fieldset>
     <fieldset v-if="form.name">
       <legend>Netlify Deploy Status</legend>
@@ -28,6 +37,8 @@
           <a
             :href="`https://app.netlify.com/sites/${form.name}/configuration/general#site-information`"
             target="_blank"
+            rel="noopener noreferrer"
+            title="Go to Netlify site details"
           >
             Site Details
           </a>

src/components/modals/about-modal.vue

@@ -58,7 +58,9 @@
         <h2>Contact</h2>
         <p>
           For any questions or concerns, please reach out to the developer at the app's
-          <a href="https://github.com/VChet/github-metrics">GitHub repository</a>
+          <a href="https://github.com/VChet/github-metrics" rel="noopener noreferrer" title="Go to GitHub repository">
+            GitHub repository
+          </a>
         </p>
       </div>
     </dialog>

src/components/repo-item.vue

@@ -6,7 +6,13 @@
         <icon-template v-if="repo.is_template" />
         <icon-lock v-if="repo.private" />
         <icon-archive v-if="repo.archived" />
-        <a v-dompurify-html="repoName" :href="repo.html_url" class="text-truncate icon-button" />
+        <a
+          v-dompurify-html="repoName"
+          :href="repo.html_url"
+          rel="noopener noreferrer"
+          :title="`Go to ${repo.full_name} repository`"
+          class="text-truncate icon-button"
+        />
       </h2>
       <div class="repo__header-actions">
         <edit-repo :repo />
@@ -41,7 +47,12 @@
         {{ repo.integrations.analytics }}
       </li>
       <li v-if="repo.homepage">
-        <a :href="repo.homepage">
+        <a
+          :href="repo.homepage"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Go to website"
+        >
           <icon-external-link />
           {{ hostingName ?? "Website" }}
         </a>
@@ -54,19 +65,34 @@
           {{ repo.language }}
         </span>
         <!-- Stars -->
-        <a :href="`https://github.com/${repo.full_name}/stargazers`" title="stars">
+        <a
+          :href="`https://github.com/${repo.full_name}/stargazers`"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Go to stargazers"
+        >
           <icon-star />
           {{ repo.stargazers_count }}
           <metric-delta :delta="repoDiff?.stars" />
         </a>
         <!-- Forks -->
-        <a :href="`https://github.com/${repo.full_name}/forks`" title="forks">
+        <a
+          :href="`https://github.com/${repo.full_name}/forks`"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Go to forks"
+        >
           <icon-git-fork />
           {{ repo.forks_count }}
           <metric-delta :delta="repoDiff?.forks" />
         </a>
         <!-- Issues -->
-        <a :href="`https://github.com/${repo.full_name}/issues?q=is%3Aopen`" title="open issues/prs">
+        <a
+          :href="`https://github.com/${repo.full_name}/issues?q=is%3Aopen`"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Go to open issues/prs"
+        >
           <icon-circle-dot />
           {{ repo.open_issues_count }}
           <metric-delta :delta="repoDiff?.issues" inverse />

src/pages/dependencies.vue

@@ -20,7 +20,12 @@
           <tr>
             <th />
             <th v-for="repo in repos" :key="repo.id">
-              <a :href="repo.html_url" target="_blank">
+              <a
+                :href="repo.html_url"
+                target="_blank"
+                rel="noopener noreferrer"
+                :title="`Go to ${repo.full_name} repository`"
+              >
                 {{ settings.displayOwner ? repo.full_name : repo.name }}
               </a>
             </th>
@@ -32,7 +37,13 @@
               <button class="icon" type="button" title="exclude dependency" @click="hideDependency(dep)">
                 <icon-x />
               </button>
-              <a :href="`https://npmjs.org/${dep}`" target="_blank" class="text-truncate">
+              <a
+                :href="`https://npmjs.org/${dep}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                :title="`Go to ${dep} on npm`"
+                class="text-truncate"
+              >
                 {{ dep }}
                 <div>{{ latestVersions[dep] ?? '???' }}</div>
               </a>