Skip to content

Commit 35b4a9b

Browse files
marina-mostiNataliaTepluhina
marina-mosti
and
NataliaTepluhina
authored
feat: migrate examples (#397)
* add sidebar and nav config * add markdown example * make text quote * feat: add commits example * feat: add grid-component example * feat: add treat-view example * feat: add svg example * feat: add modal example * feat: add elastic header example * feat: add select2 example * feat: add todo mvc example * update commits example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * update markdown example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * update component example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * update svg example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * update todomvc example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * update tree view example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * update draggable example Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
1 parent d7b4cc8 commit 35b4a9b

10 files changed

Lines changed: 115 additions & 2 deletions

File tree

‎src/.vuepress/config.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,23 @@ const sidebar = {
167167
]
168168
},
169169
'/api/composition-api'
170+
],
171+
examples: [
172+
{
173+
title: 'Examples',
174+
collapsable: false,
175+
children: [
176+
'/examples/markdown',
177+
'/examples/commits',
178+
'/examples/grid-component',
179+
'/examples/tree-view',
180+
'/examples/svg',
181+
'/examples/modal',
182+
'/examples/elastic-header',
183+
'/examples/select2',
184+
'/examples/todomvc'
185+
]
186+
}
170187
]
171188
}
172189

@@ -213,7 +230,8 @@ module.exports = {
213230
ariaLabel: 'Documentation Menu',
214231
items: [
215232
{ text: 'Guide', link: '/guide/introduction' },
216-
{ text: 'Style Guide', link: '/style-guide/' }
233+
{ text: 'Style Guide', link: '/style-guide/' },
234+
{ text: 'Examples', link: '/examples/markdown' }
217235
]
218236
},
219237
{ text: 'API Reference', link: '/api/application-config' },
@@ -275,7 +293,8 @@ module.exports = {
275293
collapsable: false,
276294
'/guide/': sidebar.guide,
277295
'/community/': sidebar.guide,
278-
'/api/': sidebar.api
296+
'/api/': sidebar.api,
297+
'/examples/': sidebar.examples
279298
},
280299
smoothScroll: false
281300
},

‎src/examples/commits.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# GitHub Commits
2+
3+
> 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.
4+
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>

‎src/examples/elastic-header.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Elastic Header Example
2+
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>

‎src/examples/grid-component.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Grid Component
2+
3+
> This is an example of creating a reusable grid component and using it with external data.
4+
5+
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="zYqvQgw" 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 Elastic Draggable Header Example">
6+
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/zYqvQgw">
7+
Vue 3 Elastic Draggable Header 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>

‎src/examples/markdown.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Markdown Editor
2+
3+
> A simple Markdown editor
4+
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>

‎src/examples/modal.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Modal Component
2+
3+
> Features used: component, prop passing, content insertion, transitions.
4+
5+
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="BaKoeXe" 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 Markdown Editor">
6+
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKoeXe">
7+
Vue 3 Markdown Editor</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>

‎src/examples/select2.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Wrapper Component Example
2+
3+
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
4+
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>

‎src/examples/svg.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# SVG Graph
2+
3+
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
4+
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>

‎src/examples/todomvc.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# TodoMVC
2+
3+
> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
4+
5+
:::warning
6+
Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the **localStorage** data will fail to be saved.
7+
8+
Additionally, due to limitations on CodePen, hashtag navigation will not work.
9+
:::
10+
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>

‎src/examples/tree-view.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Tree View
2+
3+
> Example of a tree view implementation showcasing recursive usage of components.
4+
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>

0 commit comments

Comments
 (0)