Skip to content

Commit c50047c

Browse files
anti-podeanti-pode
committed
feat(components): добавить название примеров и ссылки
1 parent d83edec commit c50047c

File tree

14 files changed

+152
-42
lines changed

14 files changed

+152
-42
lines changed

‎docs/assets/index-B3jaX63i.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-DJcRpt-s.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎docs/assets/index-a8RZxL7n.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/assets/index-ptjJCNVs.js‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<link rel="icon" href="/js-data-structures/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
77
<title>Структуры данных для frontend-разработчика</title>
8-
<script type="module" crossorigin src="/js-data-structures/assets/index-DJcRpt-s.js"></script>
9-
<link rel="stylesheet" crossorigin href="/js-data-structures/assets/index-a8RZxL7n.css">
8+
<script type="module" crossorigin src="/js-data-structures/assets/index-ptjJCNVs.js"></script>
9+
<link rel="stylesheet" crossorigin href="/js-data-structures/assets/index-B3jaX63i.css">
1010
</head>
1111
<body>
1212
<div id="app"></div>

‎src/components/section/app-section.vue‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ defineProps({
1212
type: String,
1313
default: '',
1414
},
15+
examples: {
16+
type: Array<{ title: string; link: string }>,
17+
default: [],
18+
},
1519
})
1620
</script>
1721

@@ -28,7 +32,7 @@ defineProps({
2832
{{ title }}
2933

3034
<a v-if="source" class="section__header__source" :href="source" target="_blank">
31-
<img src="@/assets/icons/github-mark.svg" alt="" />Исходный код
35+
<img src="@/assets/icons/github-mark.svg" alt="" />Исходный код страницы
3236
</a>
3337
</h2>
3438

@@ -56,13 +60,35 @@ defineProps({
5660

5761
<div class="section__body__examples">
5862
<div v-if="$slots.example1" class="section__body__example">
59-
<h3 class="section__body__example__title">Пример #1</h3>
63+
<h3 v-if="examples[0]" class="section__body__example__title">
64+
<span>#1. {{ examples[0].title }}</span>
65+
66+
<a
67+
v-if="examples[0].link"
68+
class="section__body__example__source"
69+
:href="examples[0].link"
70+
target="_blank"
71+
>
72+
<img src="@/assets/icons/github-mark.svg" alt="" />Исходный код примера
73+
</a>
74+
</h3>
6075

6176
<slot name="example1" />
6277
</div>
6378

6479
<div v-if="$slots.example2" class="section__body__example">
65-
<h3 class="section__body__example__title">Пример #2</h3>
80+
<h3 v-if="examples[1]" class="section__body__example__title">
81+
<span>#2. {{ examples[1].title }}</span>
82+
83+
<a
84+
v-if="examples[1].link"
85+
class="section__body__example__source"
86+
:href="examples[1].link"
87+
target="_blank"
88+
>
89+
<img src="@/assets/icons/github-mark.svg" alt="" />Исходный код примера
90+
</a>
91+
</h3>
6692

6793
<slot name="example2" />
6894
</div>
@@ -182,6 +208,26 @@ defineProps({
182208
183209
&__title {
184210
margin: 0 0 6px !important;
211+
font-style: normal !important;
212+
213+
span {
214+
font-style: italic;
215+
}
216+
}
217+
218+
&__source {
219+
margin-left: 8px;
220+
white-space: nowrap;
221+
font-weight: 400;
222+
font-size: 18px;
223+
224+
img {
225+
display: inline-block;
226+
width: 1em;
227+
height: 1em;
228+
margin-right: 4px;
229+
margin-bottom: -2px;
230+
}
185231
}
186232
187233
p {

‎src/structures/array/view-array.vue‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,36 @@ import FilmsList from '@/structures/array/examples/films-list.vue'
77
<app-section
88
title="Массив"
99
source="https://github.com/RuSaG0/js-data-structures/tree/master/src/structures/array"
10+
:examples="[
11+
{
12+
title: 'Список фильмов',
13+
link: 'https://github.com/RuSaG0/js-data-structures/blob/master/src/structures/array/examples/films-list.vue',
14+
},
15+
]"
1016
>
1117
<template #description>
12-
Массив — это одна из самых распространённых структур данных в программировании. Они используются для хранения коллекции элементов.
18+
Массив — это одна из самых распространённых структур данных в программировании. Они
19+
используются для хранения коллекции элементов.
1320
</template>
1421

1522
<template #example1>
16-
<p>
17-
Список фильмов
18-
</p>
1923
<films-list />
2024
</template>
2125

2226
<div class="explanation">
2327
<h3>Важный момент</h3>
2428
<p>
25-
На самом деле есть 2 похожие на себя структуры данных: массив (или статический массив) и вектор (динамический массив).
29+
На самом деле есть 2 похожие на себя структуры данных: массив (или статический массив) и
30+
вектор (динамический массив).
2631
</p>
2732
<p>
28-
Записи в виде <code>const arr = []; </code> или <code> const arr = new Array() </code> на самом деле являются векторами. Массивом же является, например, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array" target="_blank">BigInt64Array</a>
33+
Записи в виде <code>const arr = []; </code> или <code> const arr = new Array() </code> на
34+
самом деле являются векторами. Массивом же является, например,
35+
<a
36+
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array"
37+
target="_blank"
38+
>BigInt64Array</a
39+
>
2940
</p>
3041
</div>
3142
</app-section>

‎src/structures/graph/view-graph.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ import FriendGraphD3 from './examples/friend-graph-d3.vue'
77
<app-section
88
title="Граф"
99
source="https://github.com/RuSaG0/js-data-structures/tree/master/src/structures/graph"
10+
:examples="[
11+
{
12+
title: 'Социальная сеть',
13+
link: 'https://github.com/RuSaG0/js-data-structures/blob/master/src/structures/graph/examples/friend-graph-d3.vue',
14+
},
15+
]"
1016
>
1117
<template #description>
1218
Граф — это структура данных, состоящая из узлов и рёбер, где каждый узел представляет объект,

‎src/structures/list/view-list.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ import PaintCanvas from '@/structures/list/examples/paint/paint-canvas.vue'
88
<app-section
99
title="Связный список"
1010
source="https://github.com/RuSaG0/js-data-structures/tree/master/src/structures/list"
11+
:examples="[
12+
{
13+
title: 'Музыкальный плеер',
14+
link: 'https://github.com/RuSaG0/js-data-structures/blob/master/src/structures/list/examples/music-player/music-player.vue',
15+
},
16+
{
17+
title: 'Графический редактор',
18+
link: 'https://github.com/RuSaG0/js-data-structures/blob/master/src/structures/list/examples/paint/paint-canvas.vue',
19+
},
20+
]"
1121
>
1222
<template #description>
1323
<p>

‎src/structures/map/view-map.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ import FilmMap from '@/structures/map/examples/film-map.vue'
77
<app-section
88
title="Карта"
99
source="https://github.com/RuSaG0/js-data-structures/tree/master/src/structures/map"
10+
:examples="[
11+
{
12+
title: 'Фильм',
13+
link: 'https://github.com/RuSaG0/js-data-structures/blob/master/src/structures/map/examples/film-map.vue',
14+
},
15+
]"
1016
>
1117
<template #description>
1218
Карта (как и объект или хэш-таблица) — коллекция пар ключ/значение.
1319
</template>
1420

1521
<template #example1>
16-
<p>
17-
Фильм со своими свойствами: название, жанр, изображение
18-
</p>
22+
<p>Фильм со своими свойствами: название, жанр, изображение</p>
1923
<film-map />
2024
</template>
2125
</app-section>

0 commit comments

Comments
 (0)