Skip to content

Commit 8226a5c

Browse files
jbratcherjbratcher
committed
basic blog setup and styling
1 parent 3ac36ea commit 8226a5c

File tree

9 files changed

+9784
-103
lines changed

9 files changed

+9784
-103
lines changed

‎README.md

+20-24
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,47 @@
1-
# 🏞 Nuxt & Netlify CMS Starter
1+
# Nuxt, Vuetify, & Netlify CMS Starter Kit
22

3-
A lot of the starter repos for **Nuxt x Netlify CMS** use a module like `nuxtent` or `nuxtdown` to manage flat file content. This project is meant to be a solution for those who don't mind doing a little more configuration to not have to rely on these dependencies.
4-
5-
## 🎉 Getting Started
6-
7-
The quickest way to get started is with Netlify's hyper-convenient **one-click Deploy To Netlify**, which will automatically create an instance of this project on your GitHub account and deploy it instantly to Netlify.
3+
A simple repo to add Vueity and blog functionality to [Nuxt & Netlify CMS Starter](https://github.com/renestalder/nuxt-netlify-cms-starter-template)
84

9-
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/xdesro/nuxt-netlify-cms-starter)
10-
11-
Otherwise, you can follow these steps!
5+
A lot of the starter repos for **Nuxt x Netlify CMS** use a module like `nuxtent` or `nuxtdown` to manage flat file content. This project is meant to be a solution for those who don't mind doing a little more configuration to not have to rely on these dependencies.
126

13-
1. 👯‍♂️ Clone the repository locally and cd into the directory.
7+
1. Clone the repository locally and cd into the directory.
148

159
```bash
16-
git clone https://github.com/xdesro/nuxt-netlify-cms-starter
10+
git clone https://github.com/jbratcher/nuxt-netlify-cms-starter-kit
1711

1812
cd nuxt-netlify-cms-starter
1913
```
2014

21-
2. 📦 Install dependencies.
15+
2. Install dependencies.
2216

2317
```bash
24-
yarn install
18+
npm install
2519
```
2620

27-
3. 🏗 Run the project for local dev. This will start a hot-reloading server at `localhost:3000`.
21+
3. Run the project for local dev. This will start a hot-reloading server at `localhost:3000`.
2822

2923
```bash
30-
yarn dev
24+
npm run dev
3125
```
3226

33-
4. 🌌 Build the app for server-side rendered deployment. See more about **Universal SSR** in the [Nuxt.js docs](https://nuxtjs.org/guide#server-rendered-universal-ssr-).
27+
4. Build the app for server-side rendered deployment. See more about **Universal SSR** in the [Nuxt.js docs](https://nuxtjs.org/guide#server-rendered-universal-ssr-).
3428

3529
```bash
36-
yarn build
30+
npm run build
3731

3832
# And to serve that deployment...
39-
yarn start
33+
npm run start
4034
```
4135

42-
5. ⚡️ Generate a fully pre-rendered static site. See more [in the docs](https://nuxtjs.org/guide#static-generated-pre-rendering-).
36+
5. Generate a fully pre-rendered static site. See more [in the docs](https://nuxtjs.org/guide#static-generated-pre-rendering-).
4337

4438
```bash
45-
yarn generate
39+
npm run generate
4640
```
4741

4842
> This project was bootstrapped with `create-nuxt-app`. There are more detailed explanations of how everything works in the [Nuxt.js docs](https://nuxtjs.org).
4943
50-
## 🖋 Activating Netlify CMS
44+
## Activating Netlify CMS
5145

5246
This project comes with Netlify CMS ready to rumble, and a basic blog configuration. To use Netlify CMS:
5347

@@ -59,12 +53,14 @@ This project comes with Netlify CMS ready to rumble, and a basic blog configurat
5953
4. If you don't want to create an account, or would like to use an external provider such as GitHub or Google, you can enable those services under **External providers**.
6054
5. Scroll down to **Services** and click **Enable Git Gateway**.
6155

62-
### 🔐 Local Setup
56+
### Local Setup
6357

6458
1. In your browser, navigate to `localhost:3000/admin`.
6559
2. Enter the Netlify URL of your site when prompted.
6660
3. Login with the account you created or one of the external providers, if you enabled them.
6761

68-
## 💁‍♀️ Questions? Concerns?
62+
### Use Netlify CMS Dashboard
6963

70-
Feel free to reach out [on Twitter](https://twitter.com/xdesro). Friendly feedback and advice is always welcome. Contributions doubly so.
64+
1. In your browser, naviage to `localhost:3000/admin`.
65+
2. Login via your chosen method.
66+
3. You will be redirectd to the dashboard where you can create and manage posts

‎components/MenuLinks.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* eslint-disable */
2+
<template>
3+
<!-- Links Wrapper -->
4+
<v-list :class="listClass">
5+
<!-- General links -->
6+
<v-list-item
7+
v-for="(item, i) in generalLinks"
8+
:key="i + `-${item.title}`"
9+
:to="item.to"
10+
:class="listItemClass"
11+
dark
12+
router
13+
exact
14+
>
15+
<v-list-item-action>
16+
<v-icon>{{ item.icon }}</v-icon>
17+
</v-list-item-action>
18+
<v-list-item-content>
19+
<v-list-item-title v-text="item.title" />
20+
</v-list-item-content>
21+
</v-list-item>
22+
</v-list>
23+
</template>
24+
25+
<script>
26+
import { mapActions, mapState } from 'vuex'
27+
28+
export default {
29+
name: 'MenuLinks',
30+
props: {
31+
generalLinks: {
32+
type: Array,
33+
default() {
34+
return []
35+
}
36+
},
37+
listClass: {
38+
type: String,
39+
default: ''
40+
},
41+
listItemClass: {
42+
type: String,
43+
default: ''
44+
}
45+
}
46+
}
47+
</script>
48+
49+
<style>
50+
</style>

‎layouts/default.vue

+164-31
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,127 @@
11
<template>
2-
<div class="container">
3-
<nuxt />
4-
</div>
2+
<v-app>
3+
<!-- Header Area -->
4+
<v-app-bar
5+
app
6+
color="primary"
7+
dark
8+
elevate-on-scroll
9+
fixed
10+
hide-on-scroll
11+
scroll-threshold="100"
12+
prominent
13+
height="70px"
14+
>
15+
<v-toolbar-title class="headline align-self-center" v-text="title" />
16+
<v-spacer />
17+
<v-app-bar-nav-icon class="hidden-md-and-up" @click.stop="drawer = !drawer" />
18+
<MenuLinks
19+
:general-links="generalLinks"
20+
list-class="row hidden-md-and-down"
21+
list-item-class="row-menu"
22+
/>
23+
</v-app-bar>
24+
<!-- side/mobile navigation -->
25+
<v-navigation-drawer
26+
v-model="drawer"
27+
:mini-variant="miniVariant"
28+
class="primary"
29+
fixed
30+
dark
31+
app
32+
right
33+
>
34+
<MenuLinks :general-links="generalLinks" list-class="listClass" list-item-class="column" />
35+
</v-navigation-drawer>
36+
<!-- Nuxt content -->
37+
<v-content>
38+
<nuxt />
39+
</v-content>
40+
<!-- Footer Area -->
41+
<v-footer color="primary" class="pa-0">
42+
<v-row justify="center" no-gutters>
43+
<v-btn
44+
v-for="(link, i) in footerLinks"
45+
:key="i + link.title"
46+
color="white"
47+
text
48+
rounded
49+
class="my-2"
50+
>{{ link.title }}</v-btn>
51+
<v-col class="primary lighten-2 py-4 text-center white--text" cols="12">
52+
{{ new Date().getFullYear() }} —
53+
<strong>Green Spaces</strong>
54+
</v-col>
55+
</v-row>
56+
</v-footer>
57+
</v-app>
558
</template>
659

7-
<style>
60+
<script>
61+
import MenuLinks from '../components/MenuLinks.vue'
62+
63+
export default {
64+
components: {
65+
MenuLinks
66+
},
67+
data() {
68+
return {
69+
drawer: false,
70+
fixed: false,
71+
footerLinks: [
72+
{
73+
title: 'Home',
74+
to: '/'
75+
},
76+
{
77+
title: 'About Us',
78+
to: '/'
79+
},
80+
{
81+
title: 'Team',
82+
to: '/'
83+
},
84+
{
85+
title: 'Services',
86+
to: '/'
87+
},
88+
{
89+
title: 'Blog',
90+
to: '/'
91+
},
92+
{
93+
title: 'Contact Us',
94+
to: '/'
95+
}
96+
],
97+
generalLinks: [
98+
{
99+
icon: 'mdi-apps',
100+
title: 'Home',
101+
to: '/'
102+
},
103+
{
104+
icon: 'mdi-post',
105+
title: 'Blog',
106+
to: '/blog'
107+
}
108+
],
109+
miniVariant: false,
110+
title: 'Nuxt Netlify CMS'
111+
}
112+
}
113+
}
114+
</script>
115+
116+
<style lang="scss">
117+
*,
118+
*:before,
119+
*:after {
120+
box-sizing: border-box;
121+
margin: 0;
122+
padding: 0;
123+
}
124+
8125
html {
9126
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
10127
Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -17,39 +134,55 @@ html {
17134
box-sizing: border-box;
18135
}
19136
20-
*,
21-
*:before,
22-
*:after {
23-
box-sizing: border-box;
24-
margin: 0;
137+
html,
138+
body {
139+
overflow-x: hidden;
140+
}
141+
142+
.v-application a {
143+
color: #fff !important;
144+
}
145+
146+
.v-list-item.row-menu {
147+
flex: 1 1 0;
148+
}
149+
150+
.v-card__title {
151+
word-break: break-word;
25152
}
26153
27-
.button--green {
28-
display: inline-block;
29-
border-radius: 4px;
30-
border: 1px solid #3b8070;
31-
color: #3b8070;
32-
text-decoration: none;
33-
padding: 10px 30px;
154+
.text-shadow {
155+
text-shadow: 2px 2px 4px #000;
34156
}
35157
36-
.button--green:hover {
37-
color: #fff;
38-
background-color: #3b8070;
158+
.box-shadow-1 {
159+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
39160
}
40161
41-
.button--grey {
42-
display: inline-block;
43-
border-radius: 4px;
44-
border: 1px solid #35495e;
45-
color: #35495e;
46-
text-decoration: none;
47-
padding: 10px 30px;
48-
margin-left: 15px;
162+
.theme--dark.v-sheet {
163+
background-color: transparent;
164+
}
165+
166+
.btn-box-shadow-primary {
167+
box-shadow: 0 0 8px rgba(0, 121, 107, 0.8);
168+
169+
&:hover {
170+
box-shadow: none;
171+
transition: all 0.5s ease;
172+
}
173+
}
174+
175+
.btn-box-shadow-secondary {
176+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
177+
178+
&:hover {
179+
box-shadow: none;
180+
transition: all 0.5s ease;
181+
}
49182
}
50183
51-
.button--grey:hover {
52-
color: #fff;
53-
background-color: #35495e;
184+
.justify-space-evenly {
185+
justify-content: space-around;
186+
justify-content: space-evenly;
54187
}
55-
</style>
188+
</style>

0 commit comments

Comments
 (0)