-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmodels.html
More file actions
146 lines (138 loc) · 7.92 KB
/
models.html
File metadata and controls
146 lines (138 loc) · 7.92 KB
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
139
140
141
142
143
144
145
146
<!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>model 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">model <span class="text-gray-700">registry</span></h1>
<p class="text-center md:text-left text-lg max-w-2xl mx-auto mb-4"></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">{1}</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">{2}</h3>
<p class="mb-4">{3} <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/vue@2.6.0"></script>
<script>
new Vue({
el: "#packages",
mounted() {
var vm = this;
this.getPkgScrollTop();
fetch('https://midnightstudioofficial.github.io/AvaWebsite/registry.json') // Fetch the JSON file using fetch()
.then(function(response) {
if (response.ok) {
return response.json();
}
throw new Error('Error fetching data from registry.json');
})
.then(function(data) {
vm.packages = 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) {
setTimeout(function(){ window.scrollTo(0, vm.pkgScrollTop); }, 300);
}
}
},
methods: {
getPkgScrollTop(e) {
this.pkgScrollTop = document.getElementById("packages").offsetTop;
},
getPkgCommand(package) { return this.useVpm ? 'main install ' + package.vpm : 'main 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>