Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Gelean committed May 29, 2020
1 parent 55d294f commit 9fb9995
Show file tree
Hide file tree
Showing 42 changed files with 13,850 additions and 34 deletions.
16 changes: 16 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
13 changes: 13 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
90 changes: 90 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# Nuxt generate
dist

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless

# IDE / Editor
.idea

# Service worker
sw.*

# macOS
.DS_Store

# Vim swap files
*.swp
52 changes: 18 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,22 @@
# Vueapp
Information and links for Vue development
# akasha

## Setup
> Elder Project
1. Open up Editor or IDE (I used Visual Studio Code)
1. Open up terminal
1. npm install -g vue-cli npx
2. npx create-nuxt-app vueapp
- Choose: Javascript
- Choose: NPM
- Choose: Bootstrap Vue
- Choose: Express
- Choose: Axios, PWA Support
- Choose: Jest
- Choose: Universal
- Choose: jsconfig.json
1. cd vueapp
1. npm install vuetify mongodb lodash @onekiloparsec/vue-xeditable
1. npm run dev
## Build Setup

## Links
```bash
# install dependencies
$ npm install

* https://vuejs.org
* https://nuxtjs.org
* https://bootstrap-vue.org
* https://vuetifyjs.com/en
* https://devhints.io/vue
* https://www.youtube.com/watch?v=j55fHUJqtyw
* https://www.youtube.com/watch?v=Wy9q22isx3U
* https://www.youtube.com/watch?v=zzUpO8tXoaw
* https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node
* https://snipcart.com/blog/vuejs-blog-demo
* https://gist.github.com/bradtraversy/f407d642bdc3b31681bc7e56d95485b6
* https://redonion.se/en/working-with-css-in-nuxt-js
* https://www.jennapederson.com/blog/2019/10/8/building-a-playground-with-nuxt-and-markdown
* https://regenrek.com/posts/create-a-frontmatter-markdown-powered-blog-with-nuxt.js
* https://code.visualstudio.com
# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate
```

For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
7 changes: 7 additions & 0 deletions assets/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# ASSETS

**This directory is not required, you can delete it if you don't want to use it.**

This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
Binary file added assets/images/bootstrap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/bootstrapvue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/css3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/elasticsearch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/html5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/jest.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/js.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/lodash.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/mongodb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/nodejs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/nuxt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/swagger.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/vue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/vuetify.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 95 additions & 0 deletions components/CharacterComponent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<div class="container">
<div class="add-character">
<h1>Characters</h1>
<b-form-input type="text" id="character-name" v-model="name" placeholder="Character Name"/>
<b-form-input type="text" id="character-role" v-model="role" placeholder="Character Role"/>
<b-button variant="success" v-on:click="addCharacter()">
Add Character
</b-button>
<hr>
<b-alert show dismissable variant="danger" v-if="error">{{error}}</b-alert>
<div class="character"
v-for="(character, index) in characters"
v-bind:item="character"
v-bind:index="index"
v-bind:key="character._id">
<div class="text">
<p v-if="character.name">Name: {{character.name}}</p>
<p v-if="character.role">Role: {{character.role}}</p>
<b-button class="float-right" variant="danger" size="sm" v-on:click="deleteCharacter(character._id)">x</b-button>
</div>
</div>
</div>
</div>
</template>

<script>
import CharacterService from '../server/CharacterService';
export default {
name: 'CharacterComponent',
data() {
return {
characters: [],
error: '',
name: '',
role: ''
}
},
async created() {
try {
this.characters = await CharacterService.getCharacters();
} catch(err) {
this.error = err.message;
}
},
methods: {
async addCharacter() {
if (this.name === "") {
this.error = "No name specified";
} else {
this.error = "";
await CharacterService.addCharacter(this.name, this.role);
this.characters = await CharacterService.getCharacters();
}
},
async deleteCharacter(id) {
this.error = "";
await CharacterService.deleteCharacter(id);
this.characters = await CharacterService.getCharacters();
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
margin-bottom: 0;
}

p.text {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}

.btn-sm, .btn-group-sm > .btn {
padding: 0.025rem 0.5rem;
}

div.container {
max-width: 800px;
margin: 0 auto;
}

div.character {
position: relative;
border: 1px solid #58D6B6;
background-color: #B8FFE1;
padding: 10px 10px 10px 10px;
margin-bottom: 15px;
overflow: hidden;
}
</style>
41 changes: 41 additions & 0 deletions components/Logo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<svg
class="NuxtLogo"
width="245"
height="180"
viewBox="0 0 452 342"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<path
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
fill="#00C58E"
/>
<path
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
fill="#108775"
/>
<path
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
fill="#2F495E"
fill-rule="nonzero"
/>
</g>
</svg>
</template>

<style>
.NuxtLogo {
animation: 1s appear;
margin: auto;
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
7 changes: 7 additions & 0 deletions components/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# COMPONENTS

**This directory is not required, you can delete it if you don't want to use it.**

The components directory contains your Vue.js Components.

_Nuxt.js doesn't supercharge these components._
21 changes: 21 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js'
},
moduleFileExtensions: [
'js',
'vue',
'json'
],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest'
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue'
]
}
12 changes: 12 additions & 0 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
7 changes: 7 additions & 0 deletions layouts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# LAYOUTS

**This directory is not required, you can delete it if you don't want to use it.**

This directory contains your Application Layouts.

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
Loading

0 comments on commit 9fb9995

Please sign in to comment.