Skip to content

Commit f2481ca

Browse files
SandstedtSandstedt
committed
Initial comit using VuePress
The DOCS files are based on the DOCS files from the mojs master repo
0 parents  commit f2481ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+14903
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.DS_Store
3+
docs/.vuepress/dist

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Sandstedt
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# mojs.github.io
2+
Website for mo · js with tutorials and documentation.
3+
4+
![mo · js](logo.png "mo · js")
5+
6+
## To get started
7+
* Install VuePress globally to be able to run the command `npm install -g vuepress`
8+
* Run `npm i` to install all dependencies
9+
* Run `npm start` to start the project on `http://localhost:8080`
10+
11+
## Deploy
12+
* Run `npm run build`
13+
* Push to the mojs.github.io master branch using `. deploy.sh`

‎deploy.sh

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
#!/usr/bin/env sh
2+
3+
# abort on errors
4+
set -e
5+
6+
# build
7+
npm run docs:build
8+
9+
# navigate into the build output directory
10+
cd docs/.vuepress/dist
11+
12+
# if you are deploying to a custom domain
13+
# echo 'www.example.com' > CNAME
14+
15+
git init
16+
git add -A
17+
git commit -m 'deploy'
18+
19+
# if you are deploying to https://<USERNAME>.github.io
20+
git push -f [email protected]:mojs/mojs.github.io.git master
21+
22+
# if you are deploying to https://<USERNAME>.github.io/<REPO>
23+
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
24+
25+
cd -

‎docs/.vuepress/components/Home.vue

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<template>
2+
<div class="home">
3+
<div class="hero">
4+
<img
5+
v-if="data.heroImage"
6+
:src="$withBase(data.heroImage)"
7+
alt="hero"
8+
>
9+
10+
<p
11+
class="action"
12+
v-if="data.actionText && data.actionLink"
13+
>
14+
<NavLink
15+
class="action-button"
16+
:item="actionLink"
17+
/>
18+
</p>
19+
</div>
20+
21+
<div
22+
class="features"
23+
v-if="data.features && data.features.length"
24+
>
25+
<div
26+
class="feature"
27+
v-for="(feature, index) in data.features"
28+
:key="index"
29+
>
30+
<img :src="feature.image" :alt="feature.title" :class="feature.imageClass ? 'feature__image ' + feature.imageClass : 'feature__image'" />
31+
<h2>{{ feature.title }}</h2>
32+
<p>{{ feature.details }}</p>
33+
</div>
34+
</div>
35+
36+
<Content custom/>
37+
38+
<div
39+
class="footer"
40+
v-if="data.footer"
41+
>
42+
{{ data.footer }}
43+
</div>
44+
</div>
45+
</template>
46+
47+
<script>
48+
import NavLink from '@vuepress/theme-default/components/NavLink.vue'
49+
50+
export default {
51+
components: { NavLink },
52+
53+
computed: {
54+
data () {
55+
return this.$page.frontmatter
56+
},
57+
58+
actionLink () {
59+
return {
60+
link: this.data.actionLink,
61+
text: this.data.actionText
62+
}
63+
}
64+
}
65+
}
66+
</script>
67+
68+
<style lang="stylus">
69+
@import './config.styl'
70+
71+
.home
72+
padding $navbarHeight 2rem 0
73+
max-width 960px
74+
margin 0px auto
75+
.hero
76+
text-align center
77+
img
78+
max-height 280px
79+
display block
80+
margin 3rem auto 1.5rem
81+
h1
82+
font-size 3rem
83+
h1, .description, .action
84+
margin 1.8rem auto
85+
.description
86+
max-width 35rem
87+
font-size 1.6rem
88+
line-height 1.3
89+
color lighten($textColor, 40%)
90+
.action-button
91+
display inline-block
92+
font-size 1.2rem
93+
color #fff
94+
background-color $accentColor
95+
padding 0.8rem 1.6rem
96+
border-radius 4px
97+
transition background-color .1s ease
98+
box-sizing border-box
99+
border-bottom 1px solid darken($accentColor, 10%)
100+
&:hover
101+
background-color lighten($accentColor, 10%)
102+
.features
103+
border-top 1px solid $borderColor
104+
padding 1.2rem 0
105+
margin-top 2.5rem
106+
display flex
107+
flex-wrap wrap
108+
align-items flex-start
109+
align-content stretch
110+
justify-content space-between
111+
.feature
112+
flex-grow 1
113+
flex-basis 30%
114+
max-width 30%
115+
padding-top 2rem
116+
h2
117+
font-size 1.4rem
118+
font-weight 500
119+
border-bottom none
120+
padding-bottom 0
121+
margin 0
122+
color lighten($textColor, 10%)
123+
p
124+
color lighten($textColor, 25%)
125+
&__image
126+
max-width 6.125rem
127+
margin 0 auto 2rem
128+
display block
129+
&--retina
130+
max-width 4.5rem
131+
&--simple
132+
max-width 4.25rem
133+
&--modular
134+
max-width 5.0625rem
135+
&--robust
136+
max-width 8.75rem
137+
&--open-sourced
138+
max-width 4.75rem
139+
.footer
140+
padding 2.5rem
141+
border-top 1px solid $borderColor
142+
text-align center
143+
color lighten($textColor, 25%)
144+
145+
@media (max-width: $MQMobile)
146+
.home
147+
.features
148+
flex-direction column
149+
.feature
150+
max-width 100%
151+
padding 0 2.5rem
152+
153+
@media (max-width: $MQMobileNarrow)
154+
.home
155+
padding-left 1.5rem
156+
padding-right 1.5rem
157+
.hero
158+
img
159+
max-height 210px
160+
margin 2rem auto 1.2rem
161+
h1
162+
font-size 2rem
163+
h1, .description, .action
164+
margin 1.2rem auto
165+
.description
166+
font-size 1.2rem
167+
.action-button
168+
font-size 1rem
169+
padding 0.6rem 1.2rem
170+
.feature
171+
h2
172+
font-size 1.25rem
173+
</style>

‎docs/.vuepress/components/LayoutHome.vue

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<template>
2+
<div
3+
class="theme-container"
4+
:class="pageClasses"
5+
@touchstart="onTouchStart"
6+
@touchend="onTouchEnd"
7+
>
8+
<Navbar
9+
v-if="shouldShowNavbar"
10+
@toggle-sidebar="toggleSidebar"
11+
/>
12+
13+
<div
14+
class="sidebar-mask"
15+
@click="toggleSidebar(false)"
16+
></div>
17+
18+
<Sidebar
19+
:items="sidebarItems"
20+
@toggle-sidebar="toggleSidebar"
21+
>
22+
<slot
23+
name="sidebar-top"
24+
slot="top"
25+
/>
26+
<slot
27+
name="sidebar-bottom"
28+
slot="bottom"
29+
/>
30+
</Sidebar>
31+
32+
<Home v-if="$page.frontmatter.home"/>
33+
34+
<Page
35+
v-else
36+
:sidebar-items="sidebarItems"
37+
>
38+
<slot
39+
name="page-top"
40+
slot="top"
41+
/>
42+
<slot
43+
name="page-bottom"
44+
slot="bottom"
45+
/>
46+
</Page>
47+
</div>
48+
</template>
49+
50+
<script>
51+
import Home from './Home.vue'
52+
import Navbar from '@vuepress/theme-default/components/Navbar.vue'
53+
import Page from '@vuepress/theme-default/components/Page.vue'
54+
import Sidebar from '@vuepress/theme-default/components/Sidebar.vue'
55+
import { resolveSidebarItems } from '@vuepress/theme-default/util'
56+
57+
export default {
58+
components: { Home, Page, Sidebar, Navbar },
59+
60+
data () {
61+
return {
62+
isSidebarOpen: false
63+
}
64+
},
65+
66+
computed: {
67+
shouldShowNavbar () {
68+
const { themeConfig } = this.$site
69+
const { frontmatter } = this.$page
70+
if (
71+
frontmatter.navbar === false
72+
|| themeConfig.navbar === false) {
73+
return false
74+
}
75+
return (
76+
this.$title
77+
|| themeConfig.logo
78+
|| themeConfig.repo
79+
|| themeConfig.nav
80+
|| this.$themeLocaleConfig.nav
81+
)
82+
},
83+
84+
shouldShowSidebar () {
85+
const { frontmatter } = this.$page
86+
return (
87+
!frontmatter.home
88+
&& frontmatter.sidebar !== false
89+
&& this.sidebarItems.length
90+
)
91+
},
92+
93+
sidebarItems () {
94+
return resolveSidebarItems(
95+
this.$page,
96+
this.$page.regularPath,
97+
this.$site,
98+
this.$localePath
99+
)
100+
},
101+
102+
pageClasses () {
103+
const userPageClass = this.$page.frontmatter.pageClass
104+
return [
105+
{
106+
'no-navbar': !this.shouldShowNavbar,
107+
'sidebar-open': this.isSidebarOpen,
108+
'no-sidebar': !this.shouldShowSidebar
109+
},
110+
userPageClass
111+
]
112+
}
113+
},
114+
115+
mounted () {
116+
this.$router.afterEach(() => {
117+
this.isSidebarOpen = false
118+
})
119+
},
120+
121+
methods: {
122+
toggleSidebar (to) {
123+
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
124+
},
125+
126+
// side swipe
127+
onTouchStart (e) {
128+
this.touchStart = {
129+
x: e.changedTouches[0].clientX,
130+
y: e.changedTouches[0].clientY
131+
}
132+
},
133+
134+
onTouchEnd (e) {
135+
const dx = e.changedTouches[0].clientX - this.touchStart.x
136+
const dy = e.changedTouches[0].clientY - this.touchStart.y
137+
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
138+
if (dx > 0 && this.touchStart.x <= 80) {
139+
this.toggleSidebar(true)
140+
} else {
141+
this.toggleSidebar(false)
142+
}
143+
}
144+
}
145+
}
146+
}
147+
</script>
148+
149+
<style src="prismjs/themes/prism-tomorrow.css"></style>

0 commit comments

Comments
 (0)