Skip to content

feat: created generic Codepen Snippet component #548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Oct 27, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions src/.vuepress/components/common/codepen-snippet.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<p
class="codepen"
:data-theme-id="theme"
:data-preview="preview || null"
:data-editable="editable || null"
:data-height="height"
:data-default-tab="tab"
:data-user="user"
:data-slug-hash="slug"
:data-pen-title="title"
:data-embed-version="version"
:style="`height: ${height}px`">
<span>See the Pen <a :href="href">{{ title }}</a>
by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
</template>

<script>
export default {
props: {
title: {
type: String,
default: null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When defining props, it's best to choose either default or required. Otherwise, they basically cancel each other out.

In this case, it should most likely be required with no default property.

required: true,
},

slug: {
type: String,
default: null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

required: true,
},

tab: {
type: String,
default: 'result',
},

team: {
type: Boolean,
default: true,
},

user: {
type: String,
default: 'Vue',
},

name: {
type: String,
default: null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the type should be String, then we should set the default to '' instead to be consistent.

},

height: {
type: Number,
default: 300,
},

theme: {
type: String,
default: '39028',
},

preview: {
type: Boolean,
default: true,
},

editable: {
type: Boolean,
default: true,
},

version: {
type: String,
default: null,
}
},
mounted() {
const codepenScript = document.createElement('script')
codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
codepenScript.async = true
this.$el.appendChild(codepenScript)
},
computed: {
href() {
return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
}
},
}
</script>

<style lang="scss">
.codepen {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
}
</style>
2 changes: 1 addition & 1 deletion src/cookbook/editable-svg-icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default {

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.

<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>
<common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />

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

Expand Down
7 changes: 1 addition & 6 deletions src/examples/commits.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> 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.

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 Commits" slug="RwaWmzY" tab="js,result" />
7 changes: 1 addition & 6 deletions src/examples/elastic-header.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
# Elastic Header Example

<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">
<span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<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" />
7 changes: 1 addition & 6 deletions src/examples/grid-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> This is an example of creating a reusable grid component and using it with external data.

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKbowJ">
Vue 3 Grid Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 Grid Component Example" slug="BaKbowJ" tab="js,result" />
7 changes: 1 addition & 6 deletions src/examples/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> A simple Markdown editor

<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">
<span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<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" />
7 changes: 1 addition & 6 deletions src/examples/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> Features used: component, prop passing, content insertion, transitions.

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/mdPoyvv">
Vue 3 Modal Component</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 Modal Component" slug="mdPoyvv" tab="js,result" />
7 changes: 1 addition & 6 deletions src/examples/select2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 Wrapper Component Example" slug="eYZpwOB" tab="js,result" />
7 changes: 1 addition & 6 deletions src/examples/svg.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> This example showcases a combination of custom component, computed property, two-way binding and SVG support.

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 SVG Graph Example" slug="XWdmLWM" tab="js,result" />
7 changes: 1 addition & 6 deletions src/examples/todomvc.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,4 @@ Note that if your web browser is configured to block 3rd-party data/cookies, the
Additionally, due to limitations on CodePen, hashtag navigation will not work.
:::

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 TodoMVC" slug="Yzqyozj" tab="js,result" />
7 changes: 1 addition & 6 deletions src/examples/tree-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@

> Example of a tree view implementation showcasing recursive usage of components.

<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">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<common-codepen-snippet title="Vue 3 Tree View" slug="WNwQqbN" tab="js,result" />
7 changes: 1 addition & 6 deletions src/guide/a11y-basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,7 @@ export default {
</script>
```

<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">
<span>See the Pen <a href="https://codepen.io/mlama007/pen/VwepxJa">
Skip to Main</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<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" />

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

Expand Down
Loading