web-development/medium-aws-tutorial-1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-03-19 03:31:03 +00:00
parent db39e2212b
commit c17cb242e1
8 changed files with 10105 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
links.md
View File

@@ -76,3 +76,8 @@ Composition API in Vue3:
### Tutorials/Guides (nuxt)
<https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/>
## Design
Good free HQ images:
<https://unsplash.com/s/photos/random>

92
src/App.vue
View File

@@ -1,22 +1,29 @@
<template>
<div id="app">
<v-card color="grey lighten-4" flat height="100px">
<v-toolbar :color="''" :dark="true">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>AWS Login Tutorial</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
<v-app>
<v-app-bar
color="#0b3765"
dark
prominent
shrink-on-scroll
fade-img-on-scroll
src="https://picsum.photos/1920/1080?random"
app
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, #0b376580, #19204880"
></v-img>
</template>
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-toolbar-title>AWS Login Tutorial</v-toolbar-title>
</v-app-bar>
<!-- <v-spacer></v-spacer> -->
<!-- <v-content class="pa-0"> -->
<v-content>
<v-container>
<v-row>
<v-card>
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
@@ -24,25 +31,60 @@
<router-link to="/signupConfirm">Confirm</router-link>
<router-link to="/signIn">Sign In</router-link>
</div>
</v-card>
</v-row>
<router-view></router-view>
<br />
<!-- <h1 v-if="this.email != null"> -->
<v-row>
<h1 v-if="this.$store.getters.authorized != false">
<!-- Hello {{ this.userEmail }} -->
Hello {{ this.$store.getters.userEmail }}
</h1>
<h1 v-else>Welcome!</h1>
<v-col cols="2">
</v-row>
<v-row justify-center>
<v-card class="pa-2 ma-2"
><v-btn large color="primary" @click="dosignOut"
>Sign Out</v-btn
></v-card
></v-row
></v-col
>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row class="pa-10">s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row justify="center">
<v-img
class="nice"
src="https://images.unsplash.com/photo-1519444793799-fb6e09f43bfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
max-width="60%"
></v-img>
</v-row>
</v-container>
</v-content>
<!-- <svg class="divider" width="100%" viewBox="0 0 10 1"> -->
<svg class="divider" width="100%" viewBox="0 0 10 1">
<v-container>
<h1>test</h1>
</v-container>
<polygon
stroke="none"
stroke-width="0"
fill="#0b3765"
points="0,0.8 0,1 10,1 10,0.5"
/>
</svg>
<v-footer color="#0b3765">
<v-row justify="center" no-gutters>
<p class="text-center white--text">{{ new Date().getFullYear() }}|</p>
<strong class="text-center white--text"> AWS Tutorial</strong>
<v-spacer></v-spacer>
</v-row>
</v-footer>
</v-app>
</div>
</template>
<script>
@@ -84,4 +126,8 @@ export default {
color: $mycol;
margin-top: 60px;
}
.nice {
clip-path: polygon(0 60%, 0 100%, 100% 100%, 100% 0);
}
</style>

10011
src/assets/lottie/triangle.json Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/components/Animation.vue
View File

@@ -4,7 +4,7 @@
<script>
import Lottie from "vue-lottie";
import * as delivery from "../assets/lottie/delivery.json";
import * as delivery from "../assets/lottie/halloween.json";
// console.log(delivery)
export default {
name: "Animation",

1
src/main.js
View File

@@ -11,7 +11,6 @@ Amplify.configure(awsconfig);
Vue.use(Amplify);
Vue.component("lottie", Lottie);
console.log(Lottie);
Vue.config.productionTip = false;

7
src/plugins/vuetify.js
View File

@@ -1,7 +1,6 @@
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
});
export default new Vuetify({});

29
src/views/About.vue
View File

@@ -10,38 +10,9 @@
<script>
import Animation from "../components/Animation";
// import Lottie from "vue-lottie";
import * as delivery from "@/assets/lottie/halloween.json";
export default {
components: {
animation: Animation
},
methods: {
handleAnimation: function(anim) {
this.anim = anim;
},
stop: function() {
this.anim.stop();
},
play: function() {
this.anim.play();
},
pause: function() {
this.anim.pause();
},
onSpeedChange: function() {
this.anim.setSpeed(this.animationSpeed);
}
},
data() {
return {
defaultOptions: { animationData: delivery },
animationSpeed: 1
};
}
};
</script>

1
vuex.md
View File

@@ -39,4 +39,5 @@ actions = {
...
}
```
Here this handler only needs to do `context.dispatch` and `context.state`. The `{email, password}` will come from the user object we pass as an argument. Inside this handler we can then access any of the state functions we need to do.