add component MerginMapsProjectShort (#141)

Author: alex-cit

src/.vuepress/components/MerginMapsProjectShort.vue

@@ -0,0 +1,31 @@
+<template>
+  <span>
+    <a :href="`https://public.cloudmergin.com/projects/${id}/tree`" target="_blank" rel="noopener noreferrer">
+      <img :alt="`Mergin Maps Project ${id}`" :src="$withBase('/Mergin.svg')" />
+       <span>
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
+          <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
+          <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
+        </svg>
+        <span class="sr-only">(opens new window)</span>
+      </span>
+    </a>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "merginmapsproject",
+  props: {
+    id: String
+  }
+}
+</script>
+
+<style scoped>
+img {
+  border: none;
+  height: 15px;
+}
+
+</style>

src/misc/write-docs/index.md

@@ -347,6 +347,10 @@ Use `<MerginMapsProject />` component, e.g. `<MerginMapsProject id="lutraconsult
 
 <MerginMapsProject id="lutraconsulting/test_forms" />
 
+For a short reference (e.g. in tables), use `<MerginMapsProjectShort />` component, e.g. `<MerginMapsProject id="lutraconsulting/test_forms" />` transforms to 
+
+<MerginMapsProjectShort id="lutraconsulting/test_forms" />
+
 ### Show Input App Google/Apple badges for download
 
 Use `<AppDownload />` component