-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
138 lines (131 loc) · 7.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
html { scroll-behavior: smooth; }
</style>
<title>vpkg registry</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body class="font-sans min-h-screen bg-white border-t-8 border-blue-500">
<div class="max-w-6xl flex flex-col md:flex-row px-2 py-8 mx-auto h-full">
<section class="md:top-0 md:sticky w-full md:w-1/4 md:pr-2 md:pb-4 flex flex-col self-start flex-wrap">
<div class="px-3 pt-6">
<h1 class="text-center md:text-left text-4xl mb-4">vpkg <span class="text-gray-700">registry</span></h1>
<p class="text-center md:text-left text-lg max-w-2xl mx-auto mb-4">An alternative package registry for managing and publishing your V modules. It's free, simple, and straightforward to use.</p>
<div class="flex flex-col mb-8">
<a href="https://github.com/vpkg-project/registry" class="w-full text-center text-md bg-blue-500 hover:bg-blue-700 shadow border-blue-700 font-bold text-white rounded px-6 py-4">Contribute on GitHub</a>
</div>
<div>
<h3 class="text-2xl mb-3 text-gray-600">How to submit?</h3>
<p class="mb-4">See the <a class="underline text-blue-500" href="https://github.com/vpkg-project/registry#Adding-packages-to-the-list">Adding packages to the list</a> section of the README for the updated instructions. </p>
</div>
<div>
<h3 class="text-2xl mb-3 text-gray-600">Run your own registry</h3>
<p class="mb-4">Use the <a class="underline text-blue-500" href="https://github.com/vpkg-project/registry-template">registry server template</a> to start running your own registry server. Just modify registry.json and use any http or web library of your choice to get up and running.</p>
</div>
</div>
</section>
<section id="packages" class="w-full md:w-3/4 md:pl-2 pt-2 md:pt-8 pb-16 flex flex-col text-center md:text-left min-h-screen">
<div class="px-2 pb-2 flex flex-col md:flex-row md:justify-between">
<h2 class="text-3xl text-center md:text-left mb-4 text-gray-700 font-normal">{{ numberOfPackages }} packages found.</h2>
<button :class="[useVpm ? 'bg-blue-600 hover:bg-blue-800' : 'bg-blue-500 hover:bg-blue-700']" class="md:self-start text-center text-sm shadow border-blue-700 font-bold text-white rounded px-4 py-2" @click="useVpm = !useVpm">Use {{ useVpm ? 'vpkg': 'vpm' }} install command instead</button>
</div>
<div style="top:3%; z-index:1;" class="sticky w-full flex flex-col items-center pb-8 px-2">
<input type="text" placeholder="Search modules/packages..." v-model="searchQuery" class="w-full p-4 mb-2 text-xl md:text-2xl rounded bg-white border border-gray-500 shadow-lg focus:shadow-md" />
</div>
<div v-if="!isLoading" class="w-full flex flex-col flex-wrap">
<div class="w-full px-2" :key="package.name" v-for="package in filteredPackages">
<div class="border-b border-gray-500 hover:border-gray-700 py-4">
<h3 class="text-2xl mb-3 text-gray-600">{{ package.name }}</h3>
<code class="bg-gray-300 w-full p-4 block rounded font-mono mb-4" style="position: relative;">
{{ getPkgCommand(package) }}
<button class="bg-gray-400 rounded p-1" style="position: absolute;right: 1em;" title="Click to copy" @click="copy(package)">copy</button>
</code>
<a :href="package.url" class="text-underline text-sm text-gray-600 hover:text-gray-700">{{ package.url }}</a>
</div>
</div>
</div>
<div v-else class="w-full py-16 text-center">
<h2 class="text-gray-600 font-bold text-4xl">Loading...</h2>
</div>
<div class="px-2" v-if="filteredPackages.length == 0">
<h2 class="text-gray-600 font-bold text-4xl">No search results found</h2>
</div>
</section>
</div>
<footer class="bg-gray-200 py-3 w-full">
<div class="max-w-5xl mx-auto px-2 text-center">
© 2020 <a href="https://nedpals.xyz">Ned Palacios</a> / <a href="https://github.com/vpkg-project">vpkg project</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: "#packages",
mounted() {
var server = window.location.origin + window.location.pathname;
var vm = this;
this.getPkgScrollTop();
axios.get(server + "/registry.json")
.then(function (response) { vm.packages = response.data.packages; vm.isLoading = false; })
.catch(function(err) { console.log(err); });
window.addEventListener("resize", this.getPkgScrollTop);
},
beforeDestroy() { window.removeEventListener("resize", this.getPkgScrollTop); },
data: { pkgScrollTop: 0, packages: [], searchQuery: "", useVpm: false, isLoading: true },
watch: {
searchQuery: function (oldQuery, newQuery) {
var scrollTop = document.documentElement.scrollTop;
var vm = this;
if (newQuery != oldQuery && scrollTop != 0) {
// console.log(vm.pkgScrollTop);
setTimeout(function(){ window.scrollTo(0, vm.pkgScrollTop); }, 300);
}
}
},
methods: {
getPkgScrollTop(e) {
this.pkgScrollTop = document.getElementById("packages").offsetTop;
// console.log(this.pkgScrollTop);
},
getPkgCommand(package) { return this.useVpm ? 'v install ' + package.vpm : 'vpkg get ' + package.name; },
copy(package) {
var txtarea = document.createElement("textarea")
this.$el.appendChild(txtarea)
txtarea.value = this.getPkgCommand(package)
txtarea.select()
document.execCommand("copy")
this.$el.removeChild(txtarea)
}
},
computed: {
numberOfPackages() { var len = this.packages.length; return len === 0 ? 0 : len; },
filteredPackages() {
var packages = this.packages;
var query = this.searchQuery;
if (query.length > 1) { packages = packages.filter(function(pkg) { return pkg.name.indexOf(query) !== -1; }); }
return packages.sort(function(a, b) {
var c = a.name.toLowerCase();
var n = b.name.toLowerCase();
if (c < n) { return -1; }
if (c > n) { return 1; }
return 0;
});
}
}
});
</script>
</body>
</html>