Skip to content

Commit 1f4b667

Browse files
jambonnjambonn
committed
Add dist folder when run build
1 parent cb4292c commit 1f4b667

18 files changed

+12268
-109
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.DS_Store
22
node_modules
3-
/dist
3+
dist/demo.html
4+
dist/bit
5+
/gh-pages
46

57

68
# local env files

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
demo/
22
tests/
3+
gh-pages/
34
vue.config.js
45
postcss.config.js
56
jest.config.js

‎README.md‎

Lines changed: 180 additions & 5 deletions
Large diffs are not rendered by default.

‎demo/App.vue‎

Lines changed: 195 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
<template>
22
<div id="hero" style="margin-top: 50px; margin-bottom: 50px">
33
<h1 style="text-align: center">
4-
Vue Concise Carousel with True SSR Written for Jambon.
4+
Vue Concise Carousel is SSR and CSR friendly.
55
</h1>
6+
<p class="action" style="text-align: center">
7+
<a class="button" href="#install">GET STARTED</a>
8+
<a
9+
class="button white"
10+
href="https://github.com/jambonn/vue-concise-carousel#readme"
11+
>
12+
GITHUB
13+
</a>
14+
</p>
615
<div id="example">
716
<carousel
817
:per-page-custom="[
@@ -20,6 +29,69 @@
2029
</slide>
2130
</carousel>
2231
</div>
32+
<div id="install" class="container">
33+
<h2
34+
id="installation"
35+
style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em"
36+
>
37+
Installation
38+
</h2>
39+
<h3>yarn/npm</h3>
40+
<pre
41+
class="language-bash"
42+
><code class="language-bash"><span class="token comment"># npm</span>
43+
<span class="token function">npm</span> i vue-concise-carousel
44+
<span class="token comment"># yarn</span>
45+
<span class="token function">yarn</span> <span class="token function">add</span> vue-concise-carousel</code></pre>
46+
</div>
47+
<div id="quick-start" class="container">
48+
<h2 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
49+
Quick Start
50+
</h2>
51+
<p>
52+
See
53+
<a href="https://github.com/jambonn/vue-concise-carousel#configuration">
54+
Configuration
55+
</a>
56+
to learn advanced usage.
57+
</p>
58+
<pre
59+
class="language-html"
60+
><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
61+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
62+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>carousel</span> <span class="token attr-name">:center-mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">:navigation-enabled</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
63+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
64+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
65+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
66+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
67+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>carousel</span><span class="token punctuation">&gt;</span></span>
68+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
69+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
70+
71+
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
72+
<span class="token keyword">import</span> { Carousel, Slide } <span class="token keyword">from</span> <span class="token string">'vue-concise-carousel'</span>
73+
<span class="token keyword">import</span> <span class="token string">'vue-concise-carousel/dist/vue-concise-carousel.css'</span>
74+
75+
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
76+
name<span class="token punctuation">:</span> <span class="token string">'ConciseCarouselComponent'</span><span class="token punctuation">,</span>
77+
components<span class="token punctuation">:</span> <span class="token punctuation">{</span> Carousel, Slide <span class="token punctuation">}</span><span class="token punctuation">,</span>
78+
<span class="token punctuation">}</span>
79+
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
80+
</div>
81+
<div id="license" class="container">
82+
<h2 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
83+
License
84+
</h2>
85+
<p>
86+
This software is licensed under the
87+
<a
88+
href="https://github.com/jambonn/vue-concise-carousel/blob/master/LICENSE"
89+
>
90+
MIT
91+
</a>
92+
.
93+
</p>
94+
</div>
2395
</div>
2496
</template>
2597
<script>
@@ -32,3 +104,125 @@ export default {
32104
},
33105
}
34106
</script>
107+
108+
<style lang="css">
109+
body {
110+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
111+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
112+
font-size: 16px;
113+
-webkit-font-smoothing: antialiased;
114+
-moz-osx-font-smoothing: grayscale;
115+
color: #34495e;
116+
background-color: #fff;
117+
margin: 0;
118+
}
119+
.container {
120+
width: 100%;
121+
padding: 12px;
122+
margin-right: auto;
123+
margin-left: auto;
124+
}
125+
@media (min-width: 960px) {
126+
.container {
127+
max-width: 900px;
128+
}
129+
}
130+
@media (min-width: 1264px) {
131+
.container {
132+
max-width: 1185px;
133+
}
134+
}
135+
pre[class*='language-'] {
136+
background: #2d2d2d;
137+
padding: 1em;
138+
margin: 0.5em 0;
139+
overflow: auto;
140+
font-size: 1em;
141+
text-align: left;
142+
white-space: pre;
143+
word-spacing: normal;
144+
word-break: normal;
145+
line-height: 1.5;
146+
tab-size: 4;
147+
hyphens: none;
148+
}
149+
code {
150+
color: #bd4147;
151+
white-space: pre;
152+
word-break: normal;
153+
background: transparent;
154+
overflow: visible;
155+
padding: 0;
156+
border: 0;
157+
display: inline;
158+
line-height: inherit;
159+
margin: 0;
160+
}
161+
code:before,
162+
code:after {
163+
content: ' ';
164+
letter-spacing: -1px;
165+
}
166+
.token.block-comment,
167+
.token.cdata,
168+
.token.comment,
169+
.token.doctype,
170+
.token.prolog {
171+
color: #999;
172+
}
173+
.token.boolean,
174+
.token.function,
175+
.token.number {
176+
color: #f08d49;
177+
}
178+
.token.punctuation {
179+
color: #ccc;
180+
}
181+
.token.attr-value,
182+
.token.char,
183+
.token.regex,
184+
.token.string,
185+
.token.variable {
186+
color: #7ec699;
187+
}
188+
.token.attr-name,
189+
.token.deleted,
190+
.token.namespace,
191+
.token.tag {
192+
color: #e2777a;
193+
}
194+
.token.atrule,
195+
.token.builtin,
196+
.token.important,
197+
.token.keyword,
198+
.token.selector {
199+
color: #cc99cd;
200+
}
201+
a {
202+
text-decoration: none;
203+
}
204+
.button {
205+
padding: 0.75em 2em;
206+
border-radius: 2em;
207+
display: inline-block;
208+
color: #fff;
209+
background-color: #34495e;
210+
transition: all 0.15s ease;
211+
box-sizing: border-box;
212+
border: 1px solid #34495e;
213+
}
214+
.button.white {
215+
background-color: #fff;
216+
color: #34495e;
217+
}
218+
.action .button:first-child {
219+
margin-right: 1em;
220+
}
221+
222+
.action .button {
223+
margin: 1em 0;
224+
font-size: 1.05em;
225+
font-weight: 600;
226+
letter-spacing: 0.1em;
227+
}
228+
</style>

‎demo/template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title><%= htmlWebpackPlugin.options.title %></title>
99
<meta
1010
name="description"
11-
content="Completely rewritten as a vue component. It is designed to support SSR from the start."
11+
content="Completely rewritten as a vue component. It is designed to support SSR and CSR from the start."
1212
/>
1313
</head>
1414
<body>

0 commit comments

Comments
 (0)