Skip to content

Commit 8d8d190

Browse files
bencodezenbencodezen
authored
docs: update video styles (#495)
* config: add dev command * feature: standardize video styles and markup
1 parent 3341528 commit 8d8d190

7 files changed

+56
-30
lines changed

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"vuepress": "^1.5.4"
66
},
77
"scripts": {
8+
"dev": "yarn serve",
89
"serve": "vuepress dev src",
910
"build": "vuepress build src"
1011
},

Diff for: ‎src/.vuepress/components/VideoLesson.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script>
2+
export default {
3+
props: {
4+
href: {
5+
type: String,
6+
required: true
7+
},
8+
title: {
9+
type: String,
10+
default: ''
11+
}
12+
}
13+
}
14+
</script>
15+
16+
<template>
17+
<section class="video-lesson">
18+
<a :href="href" target="_blank" rel="sponsored noopener" :title="title">
19+
<slot></slot>
20+
</a>
21+
</section>
22+
</template>
23+
24+
<style lang="scss">
25+
.video-lesson {
26+
display: flex;
27+
align-items: center;
28+
background-color: #e7ecf3;
29+
padding: 1em 1.25em;
30+
border-radius: 2px;
31+
color: #486491;
32+
position: relative;
33+
margin: 24px 0;
34+
35+
a {
36+
color: #486491;
37+
position: relative;
38+
padding-left: 16px;
39+
}
40+
41+
&::before {
42+
content: '\f144';
43+
font-family: 'FontAwesome';
44+
font-size: 2em;
45+
display: inline-block;
46+
color: #73abfe;
47+
vertical-align: middle;
48+
}
49+
}
50+
</style>

Diff for: ‎src/.vuepress/styles/index.styl

-25
Original file line numberDiff line numberDiff line change
@@ -125,31 +125,6 @@
125125
}
126126
}
127127

128-
.scrimba,
129-
.vueschool {
130-
background-color: #e7ecf3;
131-
padding: 1em 1.25em;
132-
border-radius: 2px;
133-
color: #486491;
134-
position: relative;
135-
margin: 24px 0;
136-
137-
a {
138-
color: #486491;
139-
position: relative;
140-
padding-left :16px;
141-
}
142-
143-
&::before {
144-
content: "\f144";
145-
font-family: 'FontAwesome';
146-
font-size: 2em;
147-
display: inline-block;
148-
color: #73abfe;
149-
vertical-align: middle;
150-
}
151-
}
152-
153128
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
154129
font-size: inherit;
155130
cursor: pointer!important;

Diff for: ‎src/guide/component-custom-events.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ For these reasons, we recommend you **always use kebab-case for event names**.
2323

2424
## Defining Custom Events
2525

26-
<div class="vueschool"><a href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to define which events a component can emit with Vue School">Learn how to define emitted events with a free lesson on Vue School</a></div>
26+
<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">Watch a free video about Defining Custom Events on Vue School</VideoLesson>
2727

2828
Emitted events can be defined on the component via the `emits` option.
2929

Diff for: ‎src/guide/composition-api-introduction.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
Reaching this far in the documentation, you should already be familiar with both [the basics of Vue](introduction.md) and [creating components](component-basics.md).
77
:::
88

9-
[Watch a free video about the Composition API on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api)
9+
<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api" title="Learn how Composition API works in depth with Vue Mastery">Watch a free video about the Composition API on Vue Mastery</VideoLesson>
1010

1111
Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundreds of components. When dealing with such large applications, sharing and reusing code becomes especially important.
1212

@@ -68,7 +68,7 @@ Now that we know the **why** we can get to the **how**. To start working with th
6868

6969
### `setup` Component Option
7070

71-
[Watch a free video about setup on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references)
71+
<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Learn how setup works with Vue Mastery">Watch a free video on setup on Vue Mastery</VideoLesson>
7272

7373
The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's.
7474

Diff for: ‎src/guide/composition-api-lifecycle-hooks.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
44
5-
[Watch a free video about Lifecycle Hooks on Vue Mastery](https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks)
5+
<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks" title="Learn about how Lifecycle Hooks work with Vue Mastery">Watch a free video about Lifecycle Hooks on Vue Mastery</VideoLesson>
66

77
You can access a component's lifecycle hook by prefixing the lifecycle hook with "on".
88

Diff for: ‎src/guide/reactivity.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Now it’s time to take a deep dive! One of Vue’s most distinct features is the unobtrusive reactivity system. Models are proxied JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue’s reactivity system.
44

5-
[Watch a free video about Reactivity on Vue Mastery](https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity)
5+
<VideoLesson href="https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity" title="Learn how how reactivity works in depth with Vue Mastery">Watch a free video on Reactivity in Depth on Vue Mastery</VideoLesson>
66

77
## What is Reactivity?
88

0 commit comments

Comments
 (0)