Merge pull request #1 from Arirubiastor/main

last changes with api's
Arirubiastor · Jan 19, 2021 · 3286084 · 3286084
2 parents 30879a6 + 49912b6
commit 3286084
Show file tree

Hide file tree

Showing 13 changed files with 352 additions and 46 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,5 @@
+TEST_VARIABLE=Your test message
+
+LINKEDIN_ACCESS_TOKEN=your_linkedin_lit_profile_token
+
+INSTAGRAM_DISPLAY_API=your_instagram_display_api_access_token
diff --git a/.gitignore b/.gitignore
@@ -88,3 +88,7 @@ sw.*
 
 # Vim swap files
 *.swp
+
+
+# API keys, access tokens and credentials
+.env
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -1,9 +1,21 @@
 // All of your custom SCSS variables go first
 $primary: #7D61C8 ;
-$secondary: #ffffff ;
+$secondary: #e9d6d6 ;
 $light: #f1f1f1 ;
 $dark: #000000 ;
-$transparent: transparent;
+$transparent: transparent;
+$light-gray: #adb1b4 ;
+
+$background: #fac7dc ;
+
+
+
+//Nabvar
+
+$navbar-padding-y: 1.2rem !default;
+$navbar-padding-x: 2.5rem !default;
+
+
 //then bootstrap & bootstrap-vue should be added after 
 //so that they inherit the custom SCSS variables
 @import 'bootstrap/scss/bootstrap.scss';

diff --git a/components/InstagramMedia.vue b/components/InstagramMedia.vue
@@ -0,0 +1,24 @@
+<template>
+ <div class="container">
+ <h2>Instagram posts</h2>
+ <InstagramMediaItem :collection="collection" />
+ </div>
+</template>
+
+<script>
+import InstagramMediaItem from "~/components/InstagramMediaItem.vue";
+export default {
+ props: {
+ collection: {
+ type: Array,
+ required: true,
+ },
+ },
+ components: {
+ InstagramMediaItem,
+ },
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/components/InstagramMediaItem.vue b/components/InstagramMediaItem.vue
@@ -0,0 +1,25 @@
+<template>
+ <div>
+ <b-card-group columns>
+ <b-card v-for="collectionItem in collection" :key="collectionItem.id" :img-src="collectionItem.media_url" img-alt="Instagram image" img-top>
+ <b-img></b-img>
+ {{ collectionItem.id }}<br />{{ collectionItem.caption }}
+ </b-card>
+ </b-card-group>
+ <!-- {{ collection }} -->
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ collection: {
+ type: Array,
+ required: true,
+ },
+ },
+};
+</script>
+
+<style>
+</style>
diff --git a/components/MediumPosts.vue b/components/MediumPosts.vue
@@ -0,0 +1,33 @@
+<template>
+ <b-container>
+ <header class="pt-4">
+ <h2 class="font-bold text-lg md:text-2xl">Blog</h2>
+ </header>
+ <!-- <MediumPostsItem :posts="posts" v-for="post in posts" :key="post">
+ </MediumPostsItem> -->
+
+ <b-card-group columns class="pt-4">
+ <MediumPostsItem :posts="posts"> </MediumPostsItem>
+ </b-card-group>
+ </b-container>
+</template>
+
+<script>
+import MediumPostsItem from "~/components/MediumPostsItem.vue";
+
+export default {
+ name: "MediumPosts",
+ componets: {
+ MediumPostsItem,
+ },
+ props: {
+ posts: {
+ type: Array,
+ required: true,
+ },
+ },
+};
+</script>
+
+<style>
+</style>
diff --git a/components/MediumPostsItem.vue b/components/MediumPostsItem.vue
@@ -0,0 +1,48 @@
+<template>
+ <div>
+ <!-- <b-card-group columns> -->
+ <a :href="post.link" target="blank" v-for="(post, index) in posts" :key="index">
+ <!-- <b-card> -->
+ <b-card :img-src="post.thumbnail" img-alt="Post Image" img-top>
+ <!-- <b-card-image :src="post.thumbnail"> </b-card-image> -->
+ <b-card-title>
+ {{ post.title }}
+ </b-card-title>
+ <b-card-sub-title>
+ <!-- {{ post.author }} -->
+ {{ post.pubDate }}
+ </b-card-sub-title>
+ <b-card-text>
+ <!-- <p v-html="post.description" v-if="post.description.length > 50 ? post.description : post.description.substring(0, 50) + '...'"></p> -->
+ <p v-html="post.description.substring(1, 1000)"></p>
+
+ <div class="post-categories__container mt-2">
+ <b-badge v-for="(categorie, index) in post.categories" :key="index" class="d-inline border border-light-gray mr-1">
+ {{ categorie }}
+ </b-badge>
+ </div>
+ </b-card-text>
+ </b-card>
+ </a>
+ <!-- </b-card-group> -->
+ </div>
+</template>
+
+<script>
+export default {
+ name: "MediumPostsItem",
+ props: {
+ posts: {
+ type: Array,
+ required: true,
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+figcaption,
+figure {
+ display: none;
+}
+</style>
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
@@ -1,49 +1,50 @@
 <template>
  <div>
- <b-navbar toggleable="lg" variant="transparent">
- <b-navbar-brand href="#">Ariana Rubí</b-navbar-brand>
-
- <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-
- <b-collapse id="nav-collapse" is-nav>
- <b-navbar-nav>
- <b-nav-item href="#">Collection/Projects</b-nav-item>
- </b-navbar-nav>
-
- <!-- Right aligned nav items -->
- <b-navbar-nav class="ml-auto">
- <b-nav-form>
- <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
- <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
- </b-nav-form>
-
- <b-nav-item-dropdown text="Lang" right>
+ <b-navbar toggleable="lg" variant="transparent">
+ <b-navbar-brand href="#">Ariana Rubí</b-navbar-brand>
+
+ <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+ <b-collapse id="nav-collapse" is-nav>
+ <b-navbar-nav>
+ <b-nav-item href="#">
+ <b-icon
+ icon="grip-horizontal"
+ variant="dark"
+ style="width: 18px; height: 18px"
+ class="d-inline"
+ >
+ </b-icon>
+ Projects</b-nav-item
+ >
+ </b-navbar-nav>
+
+ <!-- Right aligned nav items -->
+ <b-navbar-nav class="ml-auto">
+ <b-nav-form>
+ <b-form-input
+ size="sm"
+ class="mr-sm-2"
+ placeholder="Search"
+ ></b-form-input>
+ <b-button size="sm" class="my-2 my-sm-0" type="submit"
+ >Search</b-button
+ >
+ </b-nav-form>
+
+ <!-- <b-nav-item-dropdown text="Lang" right>
  <b-dropdown-item href="#">EN</b-dropdown-item>
  <b-dropdown-item href="#">ES</b-dropdown-item>
- <b-dropdown-item href="#">RU</b-dropdown-item>
- <b-dropdown-item href="#">FA</b-dropdown-item>
- </b-nav-item-dropdown>
-
- <b-nav-item-dropdown right>
- <!-- Using 'button-content' slot -->
- <template #button-content>
- <em>User</em>
- </template>
- <b-dropdown-item href="#">Profile</b-dropdown-item>
- <b-dropdown-item href="#">Sign Out</b-dropdown-item>
- </b-nav-item-dropdown>
- </b-navbar-nav>
- </b-collapse>
- </b-navbar>
-</div>
+ </b-nav-item-dropdown> -->
+ </b-navbar-nav>
+ </b-collapse>
+ </b-navbar>
+ </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
 <style>
-
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -29,6 +29,7 @@ export default {
 
  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
+ '@nuxtjs/dotenv',
  ],
 
  // Modules (https://go.nuxtjs.dev/config-modules)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
  "generate": "nuxt generate"
  },
  "dependencies": {
+ "@nuxtjs/dotenv": "^1.4.1",
  "axios": "^0.21.1",
  "bootstrap": "^4.5.2",
  "bootstrap-vue": "^2.17.3",