[Feature] Add links to webpage for papers with arxiv and doi (#475)

This PR implemented #469 

I added two link button that open the system default external browser to
open the arxiv or doi link based on the `arxiv` and `doi` properties in
`PaperEntity`. These two buttons only shows when these two properties
existed.

I also remove the `formatOnSave` settings in `.vscode/settings.json`
because the format behaviour may vary on different platform, which may
mess up the format of entire file.

---------

Co-authored-by: geoffreychen777 <geoffreychen777@gmail.com>

.gitignore

@@ -29,4 +29,5 @@ mongodb-realm
 
 crypto
 
-!paperlib-api/dist
+!paperlib-api/dist
+package-lock.json

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
   "editor.tabSize": 2,
-  "editor.formatOnSave": true,
   "typescript.tsdk": "node_modules/typescript/lib"
 }

app/locales/locales/en.GB.json

@@ -29,6 +29,7 @@
     "preview": "Preview",
     "note": "Note",
     "codes": "Codes",
+    "onlineResources": "Online Resources",
     "pages": "Pages",
     "volume": "Volume",
     "number": "Num./Iss.",

app/locales/locales/zh.CN.json

@@ -29,6 +29,7 @@
     "preview": "预览",
     "note": "笔记",
     "codes": "代码",
+    "onlineResources": "在线资源",
     "pages": "页码",
     "volume": "卷",
     "number": "期",

app/renderer/ui/main-view/detail-view/components/online-resources.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { BIconCodeSlash, BIconGithub, BIconLink } from "bootstrap-icons-vue";
+const props = defineProps({
+  codes: Object as () => Array<string>,
+  arxiv: String,
+  doi: String,
+});
+
+const isCodeOfficial = (codeJSONstr: string) => {
+  const code = JSON.parse(codeJSONstr) as {
+    url: string;
+    isOfficial: boolean;
+  };
+  const official = code.isOfficial ? "codeofficial" : "codecommunity";
+  return official;
+};
+
+const onLinkClick = (url: string) => {
+  fileService.open(url);
+};
+
+const onCodeClick = (codeJSONstr: string) => {
+  const code = JSON.parse(codeJSONstr) as {
+    url: string;
+    isOfficial: boolean;
+  };
+  fileService.open(code.url);
+};
+</script>
+
+<template>
+      <div class="flex flex-wrap mt-1 text-xs">
+        <div 
+          class="flex space-x-1 bg-neutral-200 dark:bg-neutral-700 rounded-md p-1 hover:bg-neutral-300 hover:dark:bg-neutral-600 hover:shadow-sm select-none cursor-pointer mb-1 mr-1"
+          v-if="arxiv"
+          @click="onLinkClick(`https://arxiv.org/abs/${arxiv.toLowerCase().replaceAll('arxiv:', '').trim()}`)"
+        >
+          <BIconLink class="text-xs my-auto" />
+          <div class="text-xxs my-auto">arXiv</div>
+        </div>
+        <div 
+          class="flex space-x-1 bg-neutral-200 dark:bg-neutral-700 rounded-md p-1 hover:bg-neutral-300 hover:dark:bg-neutral-600 hover:shadow-sm select-none cursor-pointer mb-1 mr-1"
+          v-if="doi"
+          @click="onLinkClick(`https://doi.org/${doi}`)"
+        >
+          <BIconLink class="text-xs my-auto" />
+          <div class="text-xxs my-auto">DOI</div>
+        </div>
+        <div
+          class="flex space-x-1 bg-neutral-200 dark:bg-neutral-700 rounded-md p-1 hover:bg-neutral-300 hover:dark:bg-neutral-600 hover:shadow-sm select-none cursor-pointer mb-1 mr-1"
+          v-for="code in codes"
+          @click="onCodeClick(code)"
+        >
+          <BIconGithub class="text-xs my-auto" v-if="code.includes('github')" />
+          <BIconCodeSlash class="text-xs my-auto" v-if="!code.includes('github')" />
+          <div class="text-xxs my-auto">
+            {{ $t(`mainview.${isCodeOfficial(code)}`) }}
+          </div>
+        </div>
+    </div>
+</template>

app/renderer/ui/main-view/detail-view/paper-detail-view.vue

@@ -7,7 +7,7 @@ import { PaperEntity } from "@/models/paper-entity";
 import { disposable } from "@/base/dispose";
 import Authors from "./components/authors.vue";
 import Categorizers from "./components/categorizers.vue";
-import Code from "./components/code.vue";
+import OnlineResources from "./components/online-resources.vue";
 import Markdown from "./components/markdown.vue";
 import PubDetails from "./components/pub-details.vue";
 import Rating from "./components/rating.vue";
@@ -306,8 +306,17 @@ onUpdated(() => {
         v-if="entity.note.length > 0 && entity.note.startsWith('<md>')"
         :content="entity.note"
       />
-      <Section :title="$t('mainview.codes')" v-if="entity.codes.length > 0">
-        <Code :codes="entity.codes" />
+      <Section
+        :title="$t('mainview.onlineResources')"
+        v-if="
+          entity.codes.length > 0 || entity.doi !== '' || entity.arxiv !== ''
+        "
+      >
+        <OnlineResources
+          :codes="entity.codes"
+          :doi="entity.doi"
+          :arxiv="entity.arxiv"
+        />
       </Section>
       <Section
         :title="$t('mainview.supplementaries')"