Skip to content

Commit 6d60a47

Browse files
saurabhdawaresaurabhdaware
committed
/create page added to create widget
1 parent 783225e commit 6d60a47

File tree

1 file changed

+224
-0
lines changed

1 file changed

+224
-0
lines changed

‎src/create.html‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
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.0">
6+
7+
<meta property="og:type" content="website" />
8+
<meta property="og:title" content="DEV-widget Creator">
9+
10+
<meta name="twitter:card" content="summary_large_image"></meta>
11+
<meta name="twitter:creator" content="@saurabhcodes"></meta>
12+
13+
14+
15+
<meta property="og:image:secure_url" itemprop="image" content="https://res.cloudinary.com/saurabhdaware/image/upload/v1582478745/npm/devwidget-gen.png">
16+
<meta property="og:image" itemprop="image" content="https://res.cloudinary.com/saurabhdaware/image/upload/v1582478745/npm/devwidget-gen.png">
17+
<meta property="og:image:width" content="600" />
18+
<meta property="og:image:height" content="300" />
19+
20+
<meta property="og:description" content="Create your DEV.to Widget and paste the code in your website/blog to show off your articles!">
21+
22+
23+
<title>Create DEV.to Widget</title>
24+
<link rel="stylesheet"
25+
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
26+
<style>
27+
html, body{
28+
margin: 0px;
29+
padding: 0px;
30+
background-color: #ddd;
31+
color: #222;
32+
height: 100%;
33+
width: 100%;
34+
overflow-x: hidden;
35+
font-family: Arial, Helvetica, sans-serif;
36+
}
37+
38+
*{
39+
box-sizing: border-box;
40+
}
41+
.main-container{
42+
display: flex;
43+
}
44+
45+
.btn{
46+
border: none;
47+
padding: 10px 30px;
48+
font-weight: bold;
49+
}
50+
51+
.menu{
52+
flex:1;
53+
padding: 20px 40px;
54+
background-color: #fff;
55+
box-shadow: 2px 3px 15px 9px rgba(0,0,0,.2);
56+
height: 100%;
57+
}
58+
59+
label{
60+
display: block;
61+
font-weight: bold;
62+
margin-bottom: 3px;
63+
color: #444;
64+
}
65+
66+
input, select{
67+
display: block;
68+
width: 100%;
69+
padding: 8px 7px;
70+
margin-bottom: 20px;
71+
background-color: #fff;
72+
}
73+
74+
.widget-container{
75+
flex: 3;
76+
padding: 30px 60px;
77+
display: flex;
78+
}
79+
80+
.widget-holder{
81+
display: inline-block;
82+
}
83+
.code-holder{
84+
display: inline-block;
85+
flex: 1;
86+
max-width: 600px;
87+
padding: 0px 30px;
88+
}
89+
code{
90+
display: block;
91+
padding: 10px 20px;
92+
font-size: 14pt;
93+
}
94+
.copy-button{
95+
background-color: #222;
96+
width: 300px;
97+
color: #fff;
98+
padding: 15px;
99+
cursor: pointer;
100+
font-size: 11pt;
101+
}
102+
103+
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
104+
105+
@media (max-width: 768px){
106+
.main-container{
107+
display: block;
108+
}
109+
110+
.widget-container{
111+
display: block;
112+
padding: 10px;
113+
}
114+
115+
.code-holder{
116+
padding: 5px;
117+
max-width: 100%;
118+
}
119+
}
120+
</style>
121+
</head>
122+
<body>
123+
<div class="main-container" style="height: 100%;">
124+
<div class="menu">
125+
<h1>DEV-Widget</h1><br>
126+
<label for="username">DEV.to Username</label>
127+
<input type="text" id="username" autocomplete="off" value="saurabhdaware">
128+
129+
<label for="theme">Theme</label>
130+
<select id="theme">
131+
<option value="default">Default</option>
132+
<option value="pink">Pink</option>
133+
<option value="ocean">Ocean</option>
134+
<option value="dark">Dark</option>
135+
<option value="cobalt2">Cobalt2</option>
136+
</select>
137+
138+
<label for="sortby">Sort By</label>
139+
<select id="sortby">
140+
<option value="date">Date</option>
141+
<option value="reactions">Reactions</option>
142+
</select>
143+
144+
<label for="limit">Limit</label>
145+
<input type="number" id="limit" value="30">
146+
147+
<label for="width">Card Width</label>
148+
<input type="text" id="width" value="300px">
149+
150+
<label for="contentheight">Content Height</label>
151+
<input type="text" id="contentheight" value="300px">
152+
153+
<button class="btn create-btn" style="cursor: pointer;" id="create-button">Generate</button>
154+
155+
</div>
156+
<div class="widget-container">
157+
<div class="widget-holder"></div>
158+
<div class="code-holder">
159+
<pre><code class="html" contenteditable></code></pre>
160+
<div style="text-align: center;">
161+
<button class="btn copy-button">Copy Code</button>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
167+
<a href="https://github.com/saurabhdaware/dev-widget" target="_blank" class="github-corner" aria-label="View source on GitHub">
168+
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
169+
</a>
170+
<script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"></script>
171+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
172+
<script>
173+
174+
175+
function createCard() {
176+
const username = document.querySelector('#username').value;
177+
const theme = document.querySelector('#theme').value;
178+
const sortby = document.querySelector('#sortby').value;
179+
const limit = document.querySelector('#limit').value;
180+
const width = document.querySelector('#width').value;
181+
const contentheight = document.querySelector('#contentheight').value;
182+
183+
const widgetCode = /* html */`<dev-widget
184+
data-username="${username}"
185+
data-theme="${theme}"
186+
data-sortby="${sortby}"
187+
data-limit="${limit}"
188+
data-width="${width}"
189+
data-contentheight="${contentheight}"
190+
></dev-widget>
191+
`
192+
193+
scriptCode = `&lt;script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"&gt;&lt;/script&gt;`;
194+
195+
document.querySelector('.widget-holder').innerHTML = widgetCode;
196+
197+
let codeBlockCode = (widgetCode +'\n\n'+scriptCode).replace(/</g, '&lt;').replace(/>/g, '&gt;')
198+
199+
document.querySelector('code').innerHTML = codeBlockCode;
200+
201+
hljs.highlightBlock(document.querySelector('code'));
202+
}
203+
204+
205+
function copyCode() {
206+
var copyText = document.querySelector("code");
207+
const testIp = document.createElement('textarea');
208+
testIp.style.position = 'fixed';
209+
testIp.style.top = '-10000px';
210+
document.body.append(testIp);
211+
testIp.value = copyText.innerText.replace(/\n/g, '\r\n');
212+
testIp.select();
213+
testIp.setSelectionRange(0, 99999)
214+
document.execCommand("copy");
215+
alert("copied");
216+
}
217+
218+
hljs.initHighlightingOnLoad();
219+
createCard();
220+
document.querySelector('.copy-button').addEventListener('click', copyCode);
221+
document.querySelector('#create-button').addEventListener('click', createCard);
222+
</script>
223+
</body>
224+
</html>

0 commit comments

Comments
 (0)