-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
152 lines (140 loc) · 7.13 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drupal Pod Badge Generator</title>
<link rel="stylesheet" href="style.css">
<style>
body {
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: rgb(37, 157, 210);
background: radial-gradient(circle, rgba(37, 157, 210, 1) 0%, rgba(39, 109, 178, 1) 50%, rgba(41, 64, 140, 1) 100%);
}
#gitpod-badge {
max-width: 75vw;
min-width: 500px;
margin: auto;
}
label {
font-weight: bold;
}
textarea {
resize: none;
}
.container {
height: 100vh;
}
.bubbles {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
projectName: ``,
loading: false,
imageSrc: `https://drupalpodbadge.netlify.app/badge.png`,
coreSelected: '',
projectVersionSelected: '',
installprofile: 'standard',
installprofileOptions: ['standard', 'default', 'minimal', 'demo_umami'],
coreVersions: [],
projectVersions: [],
projectDetails: {},
fetchProjectDetails: function () {
// fetch project details
this.loading = true;
fetch(`https://www.drupal.org/api-d7/node.json?field_project_machine_name=${this.projectName}`).then(response => response.json()).then(data => {
this.loading = false;
if (!data.list.length) { return };
let thisProjectDetails = data.list[0];
this.projectDetails = thisProjectDetails
let projectVersions = Object.keys(thisProjectDetails.project_usage)
this.projectVersions = projectVersions
!this.projectVersionSelected ? this.projectVersionSelected = projectVersions[0] : '';
})
},
fetchCoreVersions: function () {
// if there is a query param like ?project=stage_file_proxy, set project name to stage_file_proxy
let urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('project')) {
this.projectName = urlParams.get('project');
this.fetchProjectDetails();
}
// fetch drupal versions
this.loading = true;
fetch(`https://repo.packagist.org/p2/drupal/core.json`).then(response => response.json()).then(data => {
this.loading = false;
this.coreVersions = data.packages['drupal/core'].map(release => {
return {
text: release.version,
value: release.version
}
})
!this.projectVersionSelected ? this.coreSelected = this.coreVersions[0].value : '';
// Fetch project details if project name is set
if (this.projectName.length) {
this.fetchProjectDetails();
}
})
},
copyToClipBoard: function () {
navigator.clipboard.writeText(this.buttonMarkup)
},
get gitPodURL() {
return `https://gitpod.io/#DP_PROJECT_NAME=${this.projectName},DP_ISSUE_FORK=,DP_ISSUE_BRANCH=,DP_PROJECT_TYPE=${this.projectDetails.type},DP_MODULE_VERSION=${this.projectVersionSelected},DP_CORE_VERSION=${this.coreSelected},DP_PATCH_FILE=,DP_INSTALL_PROFILE=${this.installprofile}/https://github.com/shaal/drupalpod`
},
get buttonMarkup() {
return `<a href="${this.gitPodURL}"><img src="${this.imageSrc}" alt="OpenInDrupalPod" style="max-width: 100%;"></a><div><small>get your own at <a href="https://drupalpodbadge.netlify.app">DrupalPod</a></small></div>`
}
}).mount('#gitpod-badge')
</script>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="card shadow p-4">
<div id="gitpod-badge" v-scope v-effect="fetchCoreVersions()">
<h2>DrupalPod Badge Generator</h2>
<p>Project Page: <a href="https://github.com/shaal/DrupalPod">github.com/shaal/DrupalPod</a></p>
<label for="project">Drupal Project Name</label>
https://www.drupal.org/project/<input type="text" placeholder="machine_name" name="project"
v-model="projectName" @blur="fetchProjectDetails" required>
<br>
<label for="core-version">Drupal Core Versions:</label>
<select name="core-version" v-model="coreSelected">
<option v-for="(option, index) in coreVersions" :value="option.value">{{ option.text }}</option>
</select>
<br>
<label for="install-profile">Install profile:</label>
<select name="install-profile" id="install-profile" v-model="installprofile">
<option v-for="option in installprofileOptions" :value="option">{{ option }}</option>
</select>
<div v-if="projectName.length">
<label for="project-version"><span v-if="projectDetails.title">{{projectDetails.title}}</span> Project
Version:</label>
<select name="project-version" v-model="projectVersionSelected">
<option v-for="(value, index) in projectVersions" :value="value">{{ value }}</option>
</select>
<div v-if="loading">
<h2>Loading...</h2>
</div>
<div v-if="coreSelected.length && projectVersionSelected.length && !loading">
<p v-html="buttonMarkup"></p>
<textarea v-model="buttonMarkup" name="code" id="" cols="60" rows="6" style="width:100%"></textarea>
<div>
<button @click="copyToClipBoard">Copy Badge Code</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>