Skip to content

Commit c7aa210

Browse files
Copilotfregante
Copilot
and
fregante
committed
Add live demo page with real-time URL shortening
Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>
1 parent a10a167 commit c7aa210

7 files changed

Lines changed: 402 additions & 1 deletion

File tree

‎.github/workflows/demo.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# From https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/
2+
name: Demo
3+
4+
on:
5+
- pull_request
6+
- push
7+
8+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
jobs:
15+
build:
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: actions/checkout@v4
19+
- run: npm ci
20+
- run: npm run build:demo
21+
- name: Upload artifact
22+
uses: actions/upload-pages-artifact@v3
23+
with:
24+
path: demo/dist/
25+
26+
deploy:
27+
# Allow one concurrent deployment
28+
concurrency:
29+
group: 'pages'
30+
cancel-in-progress: true
31+
32+
environment:
33+
name: github-pages
34+
url: ${{ steps.deployment.outputs.page_url }}
35+
runs-on: ubuntu-latest
36+
needs: build
37+
if: github.ref == 'refs/heads/main'
38+
steps:
39+
- name: Deploy to GitHub Pages
40+
id: deployment
41+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ Thumbs.db
99
*.lock
1010
logs
1111
package-lock.json
12+
demo/dist

‎demo/global.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
* {
2+
transition: none !important;
3+
}
4+
5+
:root {
6+
--grid-maxWidth: 800px;
7+
--color-primary: #4a8a00;
8+
padding-bottom: 3rem;
9+
-moz-tab-size: 4;
10+
tab-size: 4;
11+
}
12+
13+
code {
14+
color: var(--color-darkGrey);
15+
background-color: rgba(175, 184, 193, 0.2);
16+
padding: 0.2em 0.4em;
17+
border-radius: 3px;
18+
}
19+
20+
h1 {
21+
background: #4a8a00;
22+
padding: 1em;
23+
margin-top: 0;
24+
text-align: center;
25+
}
26+
27+
h1 a {
28+
color: white;
29+
}
30+
31+
label {
32+
display: flex;
33+
align-items: center;
34+
margin-bottom: 1em;
35+
}
36+
37+
label span {
38+
margin-right: 0.5em;
39+
font-size: 1.7em;
40+
font-weight: bold;
41+
}
42+
43+
input {
44+
width: 100%;
45+
}
46+
47+
#output {
48+
margin: 2em 0;
49+
padding: 1em;
50+
background-color: #f6f8fa;
51+
border-radius: 6px;
52+
min-height: 2em;
53+
}
54+
55+
#output.has-content {
56+
border: 1px solid #d0d7de;
57+
}
58+
59+
#output .result {
60+
font-size: 1.2em;
61+
margin-bottom: 0.5em;
62+
}
63+
64+
#output .original {
65+
font-size: 0.9em;
66+
color: #57606a;
67+
margin-top: 0.5em;
68+
}
69+
70+
.example {
71+
margin: 1em 0;
72+
padding: 1em;
73+
background-color: #f6f8fa;
74+
border-radius: 6px;
75+
border: 1px solid #d0d7de;
76+
}
77+
78+
.example-url {
79+
font-family: monospace;
80+
font-size: 0.9em;
81+
color: #0969da;
82+
word-break: break-all;
83+
margin-bottom: 0.5em;
84+
}
85+
86+
.example-result {
87+
font-size: 1.1em;
88+
margin-top: 0.5em;
89+
padding-top: 0.5em;
90+
border-top: 1px solid #d0d7de;
91+
}

‎demo/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link
6+
rel="stylesheet"
7+
href="https://unpkg.com/chota@0.7.2/dist/chota.min.css"
8+
/>
9+
<meta name="viewport" content="width=device-width,initial-scale=1" />
10+
11+
<title>`shorten-repo-url` npm module testing ground</title>
12+
13+
<link rel="stylesheet" href="global.css" />
14+
<script defer type="module" src="index.js"></script>
15+
</head>
16+
17+
<body>
18+
<h1>
19+
<a href="https://github.com/refined-github/shorten-repo-url">
20+
refined-github/shorten-repo-url
21+
</a>
22+
</h1>
23+
<main class="container">
24+
<p>
25+
Enter a GitHub URL to see how it will be shortened.
26+
</p>
27+
<label>
28+
<span>URL:</span>
29+
<input
30+
type="search"
31+
id="url-input"
32+
placeholder="https://github.com/nodejs/node/tree/v0.12/doc"
33+
autocomplete="off"
34+
autocorrect="off"
35+
/>
36+
</label>
37+
<div id="output"></div>
38+
<h2>Examples</h2>
39+
<div id="examples"></div>
40+
</main>
41+
</body>
42+
</html>

‎demo/index.js‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
import shortenUrl from '../index.js';
2+
3+
// URLs imported from index.test.js
4+
const urls = [
5+
'https://github.com/fregante/shorten-repo-url/',
6+
'https://github.com/fregante/shorten-repo-url/?tab=readme-ov-file',
7+
'https://github.com/fregante/shorten-repo-url/tree/v0.12',
8+
'https://github.com/fregante/shorten-repo-url/tree/d71718db6aa4feb8dc10edbad1134472468e971a',
9+
'https://github.com/nodejs/node/',
10+
'https://github.com/nodejs/shorten-repo-url/',
11+
'https://github.com/nodejs/node/tree/v0.12',
12+
'https://github.com/nodejs/node/tree/d71718db6aa4feb8dc10edbad1134472468e971a',
13+
'https://github.com/fregante/shorten-repo-url/tree/master/doc',
14+
'https://github.com/fregante/shorten-repo-url/tree/v0.12/doc',
15+
'https://github.com/fregante/shorten-repo-url/tree/d71718db6aa4feb8dc10edbad1134472468e971a/doc',
16+
'https://github.com/nodejs/node/tree/master/doc',
17+
'https://github.com/nodejs/node/tree/v0.12/doc',
18+
'https://github.com/nodejs/node/tree/d71718db6aa4feb8dc10edbad1134472468e971a/doc',
19+
'https://github.com/fregante/shorten-repo-url/blob/master/.gitignore',
20+
'https://github.com/fregante/shorten-repo-url/blob/v0.12/.gitignore',
21+
'https://github.com/fregante/shorten-repo-url/blob/cc8fc46/.gitignore',
22+
'https://github.com/fregante/shorten-repo-url/blob/main/한글.txt',
23+
'https://github.com/nodejs/node/blob/master/.gitignore',
24+
'https://github.com/nodejs/node/blob/v0.12/.gitignore',
25+
'https://github.com/nodejs/node/blob/cc8fc46/.gitignore',
26+
'https://github.com/fregante/shorten-repo-url/blame/master/.gitignore',
27+
'https://github.com/fregante/shorten-repo-url/blame/v0.12/.gitignore',
28+
'https://github.com/fregante/shorten-repo-url/blame/cc8fc46/.gitignore',
29+
'https://github.com/nodejs/node/blame/master/.gitignore',
30+
'https://github.com/nodejs/node/blame/v0.12/.gitignore',
31+
'https://github.com/nodejs/node/blame/cc8fc46/.gitignore',
32+
'https://github.com/fregante/shorten-repo-url/commits/master/.gitignore',
33+
'https://github.com/fregante/shorten-repo-url/commits/v0.12/.gitignore',
34+
'https://github.com/fregante/shorten-repo-url/commits/cc8fc46/.gitignore',
35+
'https://github.com/nodejs/node/commits/master/.gitignore',
36+
'https://github.com/nodejs/node/commits/v0.12/.gitignore',
37+
'https://github.com/nodejs/node/commits/cc8fc46/.gitignore',
38+
'https://github.com/fregante/shorten-repo-url/commit/cc8fc46.diff',
39+
'https://github.com/fregante/shorten-repo-url/commit/cc8fc46.patch',
40+
'https://github.com/nodejs/node/commit/cc8fc46.diff',
41+
'https://github.com/nodejs/node/commit/cc8fc46.patch',
42+
'https://github.com/fregante/shorten-repo-url/releases/tag/v0.12.0',
43+
'https://github.com/nodejs/node/releases/tag/v0.12.0',
44+
'https://github.com/fregante/shorten-repo-url/milestone/25',
45+
'https://github.com/fregante/shorten-repo-url/compare/d71718db6aa4feb8dc10edbad1134472468e971a',
46+
'https://github.com/fregante/shorten-repo-url/compare/master',
47+
'https://github.com/fregante/shorten-repo-url/compare/master...master',
48+
'https://github.com/nodejs/node/compare/d71718db6aa4feb8dc10edbad1134472468e971a',
49+
'https://github.com/nodejs/node/compare/master',
50+
'https://github.com/nodejs/node/compare/master...master',
51+
'https://github.com/nodejs/node/milestone/25',
52+
'https://github.com/fregante/shorten-repo-url/labels/npm',
53+
'https://github.com/nodejs/node/labels/npm',
54+
'https://github.com/nodejs/node/labels/Please%21%20♥',
55+
'https://github.com/refined-github/refined-github/labels/Please%21%20♥%EF%B8%8E',
56+
'https://github.com/fregante/shorten-repo-url/archive/6.4.1.zip',
57+
'https://github.com/fregante/shorten-repo-url/releases/download/6.4.1/now-macos',
58+
'https://github.com/zeit/now-cli/archive/6.4.1.zip',
59+
'https://github.com/zeit/now-cli/releases/download/6.4.1/now-macos',
60+
'https://github.com/bfred-it/shorten-repo-url/network/dependents',
61+
'https://github.com/bfred-it/shorten-repo-url/network/dependencies',
62+
'https://github.com/network/dependencies',
63+
'https://github.com/bfred-it/shorten-repo-url/wiki',
64+
'https://github.com/fregante/shorten-repo-url/pulse',
65+
'https://github.com/fregante/shorten-repo-url/labels',
66+
'https://github.com/fregante/shorten-repo-url/compare',
67+
'https://github.com/fregante/shorten-repo-url/network',
68+
'https://github.com/fregante/shorten-repo-url/projects',
69+
'https://github.com/fregante/shorten-repo-url/releases',
70+
'https://github.com/fregante/shorten-repo-url/milestones',
71+
'https://github.com/fregante/shorten-repo-url/contributors',
72+
'https://github.com/fregante/shorten-repo-url/pull/123/files',
73+
'https://github.com/nodejs/node/pull/123/files',
74+
'https://github.com/fregante/shorten-repo-url/pull/123/commits',
75+
'https://github.com/fregante/shorten-repo-url/pull/123/checks',
76+
'https://github.com/nodejs/node/wiki',
77+
'https://github.com/nodejs/node/pulse',
78+
'https://github.com/nodejs/node/labels',
79+
'https://github.com/nodejs/node/compare',
80+
'https://github.com/nodejs/node/network',
81+
'https://github.com/nodejs/node/projects',
82+
'https://github.com/nodejs/node/releases',
83+
'https://github.com/nodejs/node/milestones',
84+
'https://github.com/nodejs/node/contributors',
85+
'https://github.com/nodejs/node/graphs/commit-activity',
86+
'https://rawgit.com/fregante/shorten-repo-url/master/.gitignore',
87+
'https://cdn.rawgit.com/fregante/shorten-repo-url/v0.12/.gitignore',
88+
'https://cdn.rawgit.com/fregante/shorten-repo-url/d71718db/.gitignore',
89+
'https://raw.githubusercontent.com/fregante/shorten-repo-url/master/.gitignore',
90+
'https://raw.githubusercontent.com/fregante/shorten-repo-url/v0.12/.gitignore',
91+
'https://raw.githubusercontent.com/fregante/shorten-repo-url/d71718db/.gitignore',
92+
'https://rawgit.com/nodejs/node/master/.gitignore',
93+
'https://cdn.rawgit.com/nodejs/node/v0.12/.gitignore',
94+
'https://cdn.rawgit.com/nodejs/node/d71718db/.gitignore',
95+
'https://raw.githubusercontent.com/nodejs/node/master/.gitignore',
96+
'https://raw.githubusercontent.com/nodejs/node/v0.12/.gitignore',
97+
'https://raw.githubusercontent.com/nodejs/node/d71718db/.gitignore',
98+
'https://github.com/sindresorhus',
99+
'https://github.com/nodejs',
100+
'https://github.com/pulls',
101+
'https://github.com/issues',
102+
'https://github.com/trending',
103+
'https://github.com/features',
104+
'https://github.com/marketplace',
105+
'https://github.com/trending/developers',
106+
'https://github.com/settings/profile',
107+
'https://github.com/',
108+
'https://github.com',
109+
'https://github.com/fregante/shorten-repo-url/issues',
110+
'https://github.com/fregante/shorten-repo-url/issues?q=wow',
111+
'https://github.com/fregante/shorten-repo-url/issues?q=is%3Aissue++is%3Aopen+sort%3Aupdated-desc+&unrelated=true',
112+
'https://github.com/issues?q=is%3Aissue++is%3Aopen+sort%3Aupdated-desc+&unrelated=true',
113+
'https://github.com/pulls?q=is%3Apr++is%3Aopen+sort%3Aupdated-desc+&unrelated=true',
114+
'https://github.com/sindresorhus/notifier-for-github/pull/253/files/6b4489d417c9425dc27c5fb8d6b4a8518debd035..60cdcf3c3646164441bf8f037cef620479cdec59',
115+
'https://togithub.com/fregante/shorten-repo-url/issues/25',
116+
'https://togithub.com/fregante/shorten-repo-url/issues/28#issue-850900171',
117+
'https://togithub.com/fregante/shorten-repo-url/pull/32',
118+
'https://togithub.com/fregante/shorten-repo-url/pull/32/files',
119+
'https://togithub.com/fregante/shorten-repo-url/pull/33#pullrequestreview-801229042',
120+
'https://togithub.com/fregante/shorten-repo-url/pull/33#discussion_r750069394',
121+
'https://togithub.com/nodejs/node/pull/123',
122+
'https://togithub.com/nodejs/node/pull/123/files',
123+
'https://togithub.com/fregante/shorten-repo-url/commit/98c6175b0cbd4caca71d24e68e57b942b0dfb549',
124+
'https://togithub.com/refined-github/refined-github/commit/4f270c4f50e0a2a20085a6e92095117f10340322',
125+
'https://togithub.com/refined-github/refined-github/commit/e81a9646b448d90c7e02ab41332cab0507dccbbd#commitcomment-60089354',
126+
'https://github.com/refined-github/refined-github/wiki/%22Can-you-add-this-feature%3F%22#3-it-doesnt-require-options',
127+
'https://github.com/refined-github/refined-github/wiki/%22Can-you-add-this-feature%3F%22#',
128+
'https://github.com/refined-github/refined-github/wiki/%22Can-you-add-this-feature%3F%22',
129+
'https://github.com/fregante/shorten-repo-url/wiki/%22Can-you-add-this-feature%3F%22',
130+
'https://github.com/scarf005/hangul-test/wiki/한글-위키-페이지',
131+
'https://github.com/scarf005/hangul-test/wiki/한글-위키-페이지#한글-헤딩',
132+
'https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement#parameters',
133+
'https://www.google.com/',
134+
'https://wwww.google.com/',
135+
'http://www.google.com/',
136+
'https://www.npmjs.com/',
137+
'https://www.npmjs.com/packaasdge/node',
138+
'https://example.com/nodejs/node/blob/cc8fc46/.gitignore',
139+
'https://example.site/한글로-된-URL',
140+
'https://한글로-된-경로.com/하위경로#한글-해시',
141+
];
142+
143+
const currentLocation = 'https://github.com/fregante/shorten-repo-url/issue/1';
144+
145+
const urlInput = document.getElementById('url-input');
146+
const output = document.getElementById('output');
147+
const examplesContainer = document.getElementById('examples');
148+
149+
function updateOutput(url) {
150+
if (!url) {
151+
output.innerHTML = '';
152+
output.classList.remove('has-content');
153+
return;
154+
}
155+
156+
const shortened = shortenUrl(url, currentLocation);
157+
158+
if (shortened) {
159+
output.classList.add('has-content');
160+
output.innerHTML = `
161+
<div class="result">${shortened}</div>
162+
<div class="original">Original: ${url}</div>
163+
`;
164+
} else {
165+
output.classList.add('has-content');
166+
output.innerHTML = `
167+
<div class="result">Not a GitHub URL or unable to shorten</div>
168+
<div class="original">Original: ${url}</div>
169+
`;
170+
}
171+
}
172+
173+
// Handle input changes
174+
urlInput.addEventListener('input', (e) => {
175+
updateOutput(e.target.value);
176+
});
177+
178+
// Initialize examples
179+
function renderExamples() {
180+
// Show a subset of interesting examples
181+
const interestingUrls = [
182+
'https://github.com/nodejs/node/tree/v0.12/doc',
183+
'https://github.com/fregante/shorten-repo-url/blob/cc8fc46/.gitignore',
184+
'https://github.com/fregante/shorten-repo-url/releases/tag/v0.12.0',
185+
'https://github.com/fregante/shorten-repo-url/pull/123/files',
186+
'https://github.com/nodejs/node/labels/Please%21%20♥',
187+
'https://github.com/fregante/shorten-repo-url/commit/cc8fc46.diff',
188+
'https://raw.githubusercontent.com/nodejs/node/master/.gitignore',
189+
'https://github.com/sindresorhus',
190+
'https://github.com/fregante/shorten-repo-url/wiki/%22Can-you-add-this-feature%3F%22',
191+
'https://togithub.com/fregante/shorten-repo-url/issues/25',
192+
];
193+
194+
examplesContainer.innerHTML = interestingUrls.map(url => {
195+
const shortened = shortenUrl(url, currentLocation);
196+
return `
197+
<div class="example">
198+
<div class="example-url">${url}</div>
199+
<div class="example-result">→ ${shortened || 'Not shortened'}</div>
200+
</div>
201+
`;
202+
}).join('');
203+
}
204+
205+
renderExamples();

0 commit comments

Comments
 (0)