Skip to content

Commit d7887b4

Browse files
acejamacejam
authored
Add Tailwind CSS (#2)
1 parent f0c6d4d commit d7887b4

11 files changed

+1264
-210
lines changed

‎package-lock.json

+962-29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@
1010
"author": "",
1111
"license": "ISC",
1212
"devDependencies": {
13+
"autoprefixer": "^10.4.8",
1314
"file-loader": "^6.2.0",
1415
"html-webpack-plugin": "^5.5.0",
1516
"node-sass": "^7.0.1",
17+
"postcss": "^8.4.14",
18+
"postcss-loader": "^7.0.1",
1619
"sass-loader": "^13.0.2",
20+
"tailwindcss": "^3.1.7",
1721
"webpack": "^5.73.0",
1822
"webpack-cli": "^4.10.0",
1923
"webpack-dev-server": "^4.9.3"

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
}
6+
}

‎src/IpfsPinSync.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default class IpfsPinSync {
7272
while (pinsExistToCheck === true) {
7373
// Get 1000 Successful Pins
7474
let pinsGetOptions = {
75-
limit: 1000,
75+
limit: 500,
7676
status: new Set([Status.Pinned, Status.Pinning, Status.Queued]) // requires a set, and not an array
7777
}
7878
if (earliestPinInList != null) {
@@ -158,4 +158,4 @@ export default class IpfsPinSync {
158158
async #addPin (client, pinPostOptions) {
159159
await client.pinsPost(pinPostOptions);
160160
}
161-
}
161+
}

‎src/images/filebase-logo.svg

+24
Loading

‎src/index.html

+196-96
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,196 @@
1-
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>IPFS Pin Sync</title>
7-
</head>
8-
<body style="background-color: #343A41;padding:20px;">
9-
<div class="container-fluid text-center border rounded" style="background-color:#FFFFFF;">
10-
<h2 class="m-2">IPFS Pinning Service Synchronizer</h2>
11-
<br/>
12-
<div class="row">
13-
<div class="col-lg mt-2 mb-2">
14-
<div class="d-grid gap-2 m-b-3 m-t-3 border rounded p-2" style="border-color:#343A41 !important;" style="height:100%">
15-
<h5 class="p-2 ">SOURCE PROVIDER</h5>
16-
<form name="sourceLogin">
17-
<div class="mb-3 row">
18-
<label for="inputSourceEndpoint" class="col-sm-2 col-form-label">Endpoint</label>
19-
<div class="col-sm-10">
20-
<input type="text" name="endpoint" class="form-control" id="inputSourceEndpoint" placeholder="https://api.pinata.cloud/psa" value="https://api.pinata.cloud/psa">
21-
</div>
22-
</div>
23-
<div class="mb-3 row">
24-
<label for="inputSourceToken" class="col-sm-2 col-form-label">Token</label>
25-
<div class="col-sm-10">
26-
<input type="password" name="token" class="form-control" id="inputSourceToken">
27-
</div>
28-
</div>
29-
<div class="d-grid gap-2 mb-3">
30-
<button type="submit" class="btn btn-primary" id="sourceSubmitButton">Login to Source</button>
31-
</div>
32-
</form>
33-
<table class="table table-bordered d-none " id="sourceTable">
34-
<thead>
35-
<tr>
36-
<th scope="col">CID</th>
37-
<th scope="col">Name</th>
38-
</tr>
39-
</thead>
40-
<tbody id="sourceTableBody">
41-
</tbody>
42-
</table>
43-
</div>
44-
</div>
45-
<div class="col-lg-1 mt-2 mb-2">
46-
<div class="d-grid gap-2 m-b-3 m-t-3 p-2" style="height:100%">
47-
<button type="submit" style="background-color: #E66A00;" class="btn btn-success disabled " id="syncSubmitButton">Sync<br/><br/>
48-
<i class="bi bi-arrow-repeat"></i></button>
49-
</div>
50-
</div>
51-
<div class="col-lg mt-2 mb-2">
52-
<div class="d-grid gap-2 m-b-3 m-t-3 border rounded p-2" style="border-color:#343A41 !important;" style="height:100%">
53-
<h5 class="p-2">DESTINATION PROVIDER</h5>
54-
<form name="destinationLogin">
55-
<div class="mb-3 row">
56-
<label for="inputDestinationEndpoint" class="col-sm-2 col-form-label">Endpoint</label>
57-
<div class="col-sm-10">
58-
<input type="text" name="endpoint" class="form-control" id="inputDestinationEndpoint" placeholder="https://api.filebase.io/v1/ipfs" value="https://api.filebase.io/v1/ipfs">
59-
</div>
60-
</div>
61-
<div class="mb-3 row">
62-
<label for="inputDestinationToken" class="col-sm-2 col-form-label">Token</label>
63-
<div class="col-sm-10">
64-
<input type="password" name="token" class="form-control" id="inputDestinationToken">
65-
</div>
66-
</div>
67-
<div class="d-grid gap-2 mb-3">
68-
<button type="submit" class="btn btn-primary" id="destinationSubmitButton">Login to Destination</button>
69-
</div>
70-
</form>
71-
<table class="table table-bordered d-none " id="destinationTable">
72-
<thead>
73-
<tr>
74-
<th scope="col">CID</th>
75-
<th scope="col">Name</th>
76-
</tr>
77-
</thead>
78-
<tbody id="destinationTableBody">
79-
</tbody>
80-
</table>
81-
<table class="table table-bordered d-none " id="destinationProgress">
82-
<thead>
83-
<tr>
84-
<th scope="col">Name</th>
85-
<th scope="col">Value</th>
86-
</tr>
87-
</thead>
88-
<tbody id="destinationProgressBody">
89-
</tbody>
90-
</table>
91-
</div>
92-
</div>
93-
</div>
94-
</div>
95-
</body>
96-
</html>
1+
<!doctype html>
2+
<html class="h-full bg-gray-100" lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>IPFS Pin Sync</title>
8+
</head>
9+
10+
<body class="h-full">
11+
<div class="min-h-full">
12+
<div class="bg-[#343a40] pb-32">
13+
<nav class="bg-[#343a40]">
14+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
15+
<div class="border-b border-gray-700">
16+
<div class="flex items-center justify-between h-16 px-4 sm:px-0">
17+
<div class="flex items-center">
18+
<div class="flex-shrink-0">
19+
<img class="mx-auto block w-40" src="images/filebase-logo.svg" />
20+
</div>
21+
<div class="hidden md:block">
22+
<div class="ml-10 flex items-baseline space-x-4">
23+
<a href="https://docs.filebase.com/"
24+
class="text-gray-300 hover:bg-[#343a40] hover:text-white px-3 py-2 rounded-md text-sm font-medium"
25+
aria-current="page">Documentation</a>
26+
27+
<a href="https://github.com/filebase/ipfs-pin-sync"
28+
class="text-gray-300 hover:bg-[#343a40] hover:text-white px-3 py-2 rounded-md text-sm font-medium">GitHub</a>
29+
30+
<a href="https://discord.com/invite/rDDzEAHW2H"
31+
class="text-gray-300 hover:bg-[#343a40] hover:text-white px-3 py-2 rounded-md text-sm font-medium">Support</a>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</nav>
39+
<header class="py-10">
40+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41+
<h1 class="text-3xl font-bold text-white">IPFS Pin Sync</h1>
42+
</div>
43+
</header>
44+
</div>
45+
46+
<main class="-mt-32">
47+
<div class="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
48+
<div class="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
49+
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96">
50+
<div class="grid grid-cols-3 gap-4">
51+
<div>
52+
<div class="sm:mx-auto sm:w-full sm:max-w-md">
53+
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
54+
<h5 class="text-center">Source Provider</h5><br><br>
55+
<form name="sourceLogin" class="space-y-6">
56+
<div>
57+
<label for="email" class="block text-sm font-medium text-gray-700"> Endpoint </label>
58+
<div class="mt-1">
59+
<input placeholder="https://api.pinata.cloud/psa" value="https://api.pinata.cloud/psa"
60+
type="text" name="endpoint" id="inputSourceEndpoint" required
61+
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
62+
</div>
63+
</div>
64+
65+
<div>
66+
<label for="password" class="block text-sm font-medium text-gray-700"> Token </label>
67+
<div class="mt-1">
68+
<input type="password" name="token" id="inputSourceToken" required
69+
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
70+
</div>
71+
</div>
72+
73+
<div>
74+
<button type="submit" id="sourceSubmitButton"
75+
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#ffa500] hover:bg-[#eb9100] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ffa500]">
76+
Login to Source
77+
</button>
78+
</div>
79+
</form>
80+
</div>
81+
</div>
82+
</div>
83+
<div>
84+
<div class="mx-auto text-center">
85+
<div class="bg-white py-24 px-4 shadow sm:rounded-lg sm:px-10">
86+
<button type="submit" id="syncSubmitButton"
87+
class="disabled inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ffa500]">
88+
Sync
89+
</button>
90+
<div>
91+
<dl class="mt-5 grid grid-cols-2 gap-5">
92+
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
93+
<dt class="text-sm font-medium text-gray-500 truncate">Progress</dt>
94+
<dd class="mt-1 text-3xl font-semibold text-gray-900" id="destinationProgress"></dd>
95+
</div>
96+
97+
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
98+
<dt class="text-sm font-medium text-gray-500 truncate">Pin Count</dt>
99+
<dd class="mt-1 text-3xl font-semibold text-gray-900" id="destinationCount"></dd>
100+
</div>
101+
</dl>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
<div>
107+
<div class="sm:mx-auto sm:w-full sm:max-w-md">
108+
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
109+
<h5 class="text-center">Destination Provider</h5><br><br>
110+
<form name="destinationLogin" class="space-y-6">
111+
<div>
112+
<label for="email" class="block text-sm font-medium text-gray-700"> Endpoint </label>
113+
<div class="mt-1">
114+
<input placeholder="https://api.filebase.io/v1/ipfs" value="https://api.filebase.io/v1/ipfs"
115+
type="text" name="endpoint" id="inputDestinationEndpoint" required
116+
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
117+
</div>
118+
</div>
119+
120+
<div>
121+
<label for="password" class="block text-sm font-medium text-gray-700"> Token </label>
122+
<div class="mt-1">
123+
<input type="password" name="token" id="inputDestinationToken" required
124+
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
125+
</div>
126+
</div>
127+
128+
<div>
129+
<button type="submit" id="destinationSubmitButton"
130+
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#ffa500] hover:bg-[#eb9100] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ffa500]">
131+
Login to Destination
132+
</button>
133+
</div>
134+
</form>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
<div class="grid grid-cols-2 gap-4">
141+
<div>
142+
<div class="px-4 sm:px-6 lg:px-8">
143+
<div class="mt-8 flex flex-col">
144+
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
145+
<div class="inline-block min-w-full py-2 align-middle md:px-1 lg:px-1">
146+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
147+
<table id="sourceTable" class="min-w-full divide-y divide-gray-300 z-50">
148+
<thead class="bg-gray-50">
149+
<tr>
150+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">CID
151+
</th>
152+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Name
153+
</th>
154+
</tr>
155+
</thead>
156+
<tbody id="sourceTableBody" class="divide-y divide-gray-200 bg-white">
157+
</tbody>
158+
</table>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
<div>
166+
<div class="px-4 sm:px-6 lg:px-8">
167+
<div class="mt-8 flex flex-col">
168+
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
169+
<div class="inline-block min-w-full py-2 align-middle md:px-1 lg:px-1">
170+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
171+
<table id="destinationTable" class="min-w-full divide-y divide-gray-300 z-50">
172+
<thead class="bg-gray-50">
173+
<tr>
174+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">CID
175+
</th>
176+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Name
177+
</th>
178+
</tr>
179+
</thead>
180+
<tbody id="destinationTableBody" class="divide-y divide-gray-200 bg-white">
181+
</tbody>
182+
</table>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
</div>
192+
</main>
193+
</div>
194+
</body>
195+
196+
</html>

0 commit comments

Comments
 (0)