Skip to content

Commit 722b92e

Browse files
ErickPetruErickPetru
authored
feat: created generic Codepen Snippet component (#548)
1 parent a502ebe commit 722b92e

30 files changed

+189
-495
lines changed

‎src/.vuepress/components/common/codepen-snippet.vue

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<template>
2+
<p
3+
class="codepen"
4+
:data-theme-id="theme"
5+
:data-preview="preview || null"
6+
:data-editable="editable || null"
7+
:data-height="height"
8+
:data-default-tab="tab"
9+
:data-user="user"
10+
:data-slug-hash="slug"
11+
:data-pen-title="title"
12+
:data-embed-version="version"
13+
:style="`height: ${height}px`">
14+
<span>See the Pen <a :href="href">{{ title }}</a>
15+
by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
16+
on <a href="https://codepen.io">CodePen</a>.</span>
17+
</p>
18+
</template>
19+
20+
<script>
21+
export default {
22+
props: {
23+
title: {
24+
type: String,
25+
default: null,
26+
required: true,
27+
},
28+
29+
slug: {
30+
type: String,
31+
default: null,
32+
required: true,
33+
},
34+
35+
tab: {
36+
type: String,
37+
default: 'result',
38+
},
39+
40+
team: {
41+
type: Boolean,
42+
default: true,
43+
},
44+
45+
user: {
46+
type: String,
47+
default: 'Vue',
48+
},
49+
50+
name: {
51+
type: String,
52+
default: null,
53+
},
54+
55+
height: {
56+
type: Number,
57+
default: 300,
58+
},
59+
60+
theme: {
61+
type: String,
62+
default: '39028',
63+
},
64+
65+
preview: {
66+
type: Boolean,
67+
default: true,
68+
},
69+
70+
editable: {
71+
type: Boolean,
72+
default: true,
73+
},
74+
75+
version: {
76+
type: String,
77+
default: null,
78+
}
79+
},
80+
mounted() {
81+
const codepenScript = document.createElement('script')
82+
codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
83+
codepenScript.async = true
84+
this.$el.appendChild(codepenScript)
85+
},
86+
computed: {
87+
href() {
88+
return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
89+
}
90+
},
91+
}
92+
</script>
93+
94+
<style lang="scss">
95+
.codepen {
96+
box-sizing: border-box;
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
100+
border: 2px solid;
101+
margin: 1em 0;
102+
padding: 1em;
103+
}
104+
</style>

‎src/cookbook/editable-svg-icons.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default {
143143

144144
We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser.
145145

146-
<p data-height="300" data-theme-id="0" data-slug-hash="dJRpgY" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Editable SVG Icon System: Animated icon" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Editable SVG Icon System: Animated icon</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
146+
<common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />
147147

148148
<p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
149149

‎src/examples/commits.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> This example fetches latest Vue.js commits data from GitHub’s API and displays them as a list. You can switch between the master and dev branches.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="RwaWmzY" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Commits">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
7-
Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Commits" slug="RwaWmzY" tab="js,result" />

‎src/examples/elastic-header.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
# Elastic Header Example
22

3-
<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="ZEWGmar" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
4-
<span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
5-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
6-
on <a href="https://codepen.io">CodePen</a>.</span>
7-
</p>
8-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
3+
<common-codepen-snippet title="Vue 3 Elastic Draggable Header Example" slug="ZEWGmar" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

‎src/examples/grid-component.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> This is an example of creating a reusable grid component and using it with external data.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="BaKbowJ" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Grid Component Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKbowJ">
7-
Vue 3 Grid Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Grid Component Example" slug="BaKbowJ" tab="js,result" />

‎src/examples/markdown.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> A simple Markdown editor
44
5-
<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="oNxXzyB" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
6-
<span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
7-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Markdown Editor" slug="oNxXzyB" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

‎src/examples/modal.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> Features used: component, prop passing, content insertion, transitions.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="mdPoyvv" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Modal Component">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/mdPoyvv">
7-
Vue 3 Modal Component</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Modal Component" slug="mdPoyvv" tab="js,result" />

‎src/examples/select2.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="eYZpwOB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Wrapper Component Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
7-
Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Wrapper Component Example" slug="eYZpwOB" tab="js,result" />

‎src/examples/svg.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="XWdmLWM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 SVG Graph Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
7-
Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 SVG Graph Example" slug="XWdmLWM" tab="js,result" />

‎src/examples/todomvc.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,4 @@ Note that if your web browser is configured to block 3rd-party data/cookies, the
88
Additionally, due to limitations on CodePen, hashtag navigation will not work.
99
:::
1010

11-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="Yzqyozj" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 TodoMVC">
12-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
13-
Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
14-
on <a href="https://codepen.io">CodePen</a>.</span>
15-
</p>
16-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
11+
<common-codepen-snippet title="Vue 3 TodoMVC" slug="Yzqyozj" tab="js,result" />

‎src/examples/tree-view.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> Example of a tree view implementation showcasing recursive usage of components.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="WNwQqbN" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Tree View">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
7-
Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Tree View" slug="WNwQqbN" tab="js,result" />

‎src/guide/a11y-basics.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,7 @@ export default {
5454
</script>
5555
```
5656

57-
<p class="codepen" data-height="350" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="VwepxJa" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Skip to Main">
58-
<span>See the Pen <a href="https://codepen.io/mlama007/pen/VwepxJa">
59-
Skip to Main</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
60-
on <a href="https://codepen.io">CodePen</a>.</span>
61-
</p>
62-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
57+
<common-codepen-snippet title="Skip to Main" slug="VwepxJa" :height="350" tab="js,result" :team="false" user="mlama007" name="Maria" theme="light" :preview="false" :editable="false" />
6358

6459
[Read documentation on skip link to main content](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
6560

0 commit comments

Comments
 (0)