First commit

2 years ago · 5cda3ad037
12 changed files with 5866 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,15 @@
+{
+  "name": "homepage",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "vue": "^3.0.4"
+  },
+  "devDependencies": {
+    "vite": "^1.0.0-rc.13",
+    "@vue/compiler-sfc": "^3.0.4"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,15 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Welcome to Gourav's Homepage" />
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h2>Welcome to Gourav's Homepage</h2>
+    <input type="text" placeholder="Filter Search" v-model="query" />
+    <button @click="reset">Reset</button>
+  </div>
+  <div>
+    {{ query }}
+    <search-results :query='query' />
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import SearchResults from './SearchResults.vue';
+
+export default {
+  components: {
+    SearchResults,
+  },
+
+  setup() {
+    const query = ref("");
+
+    const reset = (evt) => {
+      query.value = ""; // clears the query
+    };
+
+    return {
+      query,
+      reset,
+
+    };
+  },
+};
+</script>
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@ -0,0 +1,33 @@
+<template>
+  <div class="root">
+    <p>Showing {{ filteredTitles.length }} results for "{{ query }}"</p>
+    <ul>
+      <p v-for="title in filteredTitles" :key="title.Page">
+        <a :href="title.Page" target="_blank">{{ title.Name }}</a>
+      </p>
+    </ul>
+  </div>
+</template>
+
+<script>
+import titles from "../post-data.json";
+import { computed } from "vue";
+
+export default {
+  props: {
+    query: String,
+  },
+
+  setup(props, context) {
+    const filteredTitles = computed(() => {
+      return titles.filter((s) =>
+        s.Name.toLowerCase().includes(props.query.toLowerCase())
+      );
+    });
+
+    return {
+        filteredTitles,
+    }
+  },
+};
+</script>
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,8 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App).mount('#app')
--- a/src/post-data.json
+++ b/src/post-data.json
@ -0,0 +1,210 @@
+[
+    {
+      "Name": "Setting Up your First Vue3 Project - Vue 3.0 Release",
+      "Page": "https://learnvue.co/2020/09/setting-up-your-first-vue3-project-vue-3-0-release/"
+    },
+    {
+      "Name": "A Vue Event Handling Cheatsheet – The Essentials",
+      "Page": "https://learnvue.co/2020/01/a-vue-event-handling-cheatsheet-the-essentials/"
+    },
+    {
+      "Name": "6 Techniques to Write Better VueJS v-for Loops",
+      "Page": "https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/"
+    },
+    {
+      "Name": "A Simple Vue Watcher Tutorial For Beginners",
+      "Page": "https://learnvue.co/2019/12/a-simple-vue-watcher-tutorial-for-beginners/"
+    },
+    {
+      "Name": "VueJS Animations for Beginners",
+      "Page": "https://learnvue.co/2020/02/vuejs-animations-for-beginners/"
+    },
+    {
+      "Name": "Provide and Inject - An Introduction to Building Vue3 Plugins",
+      "Page": "https://learnvue.co/2020/03/designing-vue3-plugins-using-provide-and-inject/"
+    },
+    {
+      "Name": "How to Manage VueJS Mixins",
+      "Page": "https://learnvue.co/2019/12/how-to-manage-mixins-in-vuejs/"
+    },
+    {
+      "Name": "How You Can Use Vue Transitions Right Now",
+      "Page": "https://learnvue.co/2020/01/how-you-can-use-vue-transitions-right-now/"
+    },
+    {
+      "Name": "Using Component Slots in VueJS — An Overview",
+      "Page": "https://learnvue.co/2019/12/using-component-slots-in-vuejs - an-overview/"
+    },
+    {
+      "Name": "An Overview of VueJS Dynamic Components",
+      "Page": "https://learnvue.co/2020/01/an-overview-of-vuejs-dynamic-components/"
+    },
+    {
+      "Name": "Mastering Computed Properties in VueJS",
+      "Page": "https://learnvue.co/2019/12/mastering-computed-properties-in-vuejs/"
+    },
+    {
+      "Name": "A First Look at Vue-Router in Vue3",
+      "Page": "https://learnvue.co/2020/04/a-first-look-at-vue-router-in-vue3/"
+    },
+    {
+      "Name": "A Beginner's Guide to Vue Lifecycle Hooks",
+      "Page": "https://learnvue.co/2019/12/a-beginners-guide-to-vuejs-lifecycle-hooks/"
+    },
+    {
+      "Name": "How to Use Lifecycle Hooks in Vue3",
+      "Page": "https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/"
+    },
+    {
+      "Name": "How to Add Drag and Drop to Your VueJS Project",
+      "Page": "https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/"
+    },
+    {
+      "Name": "How to Make Your First VueJS Plugin",
+      "Page": "https://learnvue.co/2020/01/how-to-make-your-first-vuejs-plugin/"
+    },
+    {
+      "Name": "An Introduction to Vue3 Props - A Beginner's Guide",
+      "Page": "https://learnvue.co/2020/08/an-introduction-to-vue3-props-a-beginners-guide/"
+    },
+    {
+      "Name": "Building Reusable Components in VueJS | Tabs",
+      "Page": "https://learnvue.co/2019/12/building-reusable-components-in-vuejs-tabs/"
+    },
+    {
+      "Name": "Creating a Vue3 Global Component",
+      "Page": "https://learnvue.co/2020/08/how-to-register-a-vue3-global-component/"
+    },
+    {
+      "Name": "12 VueJS Best Practices for Pro Developers",
+      "Page": "https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/"
+    },
+    {
+      "Name": "An Overview of Vue Keep-Alive",
+      "Page": "https://learnvue.co/2019/12/an-overview-of-vue-keep-alive/"
+    },
+    {
+      "Name": "A Beautiful Parallax Scrolling Effect in VueJS - Daily Vue Tips #2",
+      "Page": "https://learnvue.co/2020/04/a-beautiful-parallax-scrolling-effect-in-vuejs-daily-vue-tips-2/"
+    },
+    {
+      "Name": "Getting Smart with Vue Form Validation – Vuelidate Tutorial",
+      "Page": "https://learnvue.co/2020/01/getting-smart-with-vue-form-validation-vuelidate-tutorial/"
+    },
+    {
+      "Name": "Build a Custom VueJS Tag Input in Under 10 Minutes",
+      "Page": "https://learnvue.co/2020/01/build-a-custom-vuejs-tag-input-in-under-10-minutes/"
+    },
+    {
+      "Name": "LearnVue",
+      "Page": "https://learnvue.co/"
+    },
+    {
+      "Name": "Building the Same Component in Vue2 vs. Vue3",
+      "Page": "https://learnvue.co/2020/02/building-the-same-component-in-vue2-vs-vue3/"
+    },
+    {
+      "Name": "4 Vue3 Composition API Tips You Should Know",
+      "Page": "https://learnvue.co/2020/01/4-vue3-composition-api-tips-you-should-know/"
+    },
+    {
+      "Name": "8 Free Vue Icon Libraries to Pretty Up Your Web App",
+      "Page": "https://learnvue.co/2019/12/8-free-vue-icon-libraries-to-pretty-up-your-web-app/"
+    },
+    {
+      "Name": "How and Why to Use Wrapper Components in Vue3",
+      "Page": "https://learnvue.co/2020/02/how-and-why-to-use-wrapper-components-in-vue3/"
+    },
+    {
+      "Name": "Animated Active Menu Highlights in VueJS - Daily Vue Tips #1",
+      "Page": "https://learnvue.co/2020/04/animated-active-menu-highlights-in-vuejs-daily-vue-tips-1/"
+    },
+    {
+      "Name": "Extract and Reuse Logic in the Vue Composition API",
+      "Page": "https://learnvue.co/2020/03/extract-and-reuse-logic-in-the-vue-composition-api/"
+    },
+    {
+      "Name": "7 Simple VueJS Tips You Can Use to Become a Better Developer",
+      "Page": "https://learnvue.co/2020/01/7-simple-vuejs-tips-you-can-use-to-become-a-better-developer/"
+    },
+    {
+      "Name": "What You Need to Know About Vue3 in 2020",
+      "Page": "https://learnvue.co/2019/12/what-you-need-to-know-about-vue3-in-2020/"
+    },
+    {
+      "Name": "An Introduction to VueJS Suspense Components",
+      "Page": "https://learnvue.co/2020/01/an-introduction-to-vuejs-suspense-components/"
+    },
+    {
+      "Name": "Creating Your First VueJS Custom Directive",
+      "Page": "https://learnvue.co/2020/01/creating-your-first-vuejs-custom-directive/"
+    },
+    {
+      "Name": "A Quick Vue3 Infinite Scrolling Component - Daily Vue Tips #4",
+      "Page": "https://learnvue.co/2020/09/a-quick-vue3-infinite-scrolling-component-daily-vue-tips-4/"
+    },
+    {
+      "Name": "An Introduction to Vue Teleport - A New Feature in Vue3",
+      "Page": "https://learnvue.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/"
+    },
+    {
+      "Name": "7 Great Vue3 Tutorials and Resources to Start Learning Today",
+      "Page": "https://learnvue.co/2020/03/7-great-vue3-tutorials-and-resources-to-start-learning-today/"
+    },
+    {
+      "Name": "How to Use VueJS Filters to Write Better Code",
+      "Page": "https://learnvue.co/2020/01/how-to-use-vuejs-filters-to-write-better-code/"
+    },
+    {
+      "Name": "Using Vue watchEffect to Track Reactive Dependencies",
+      "Page": "https://learnvue.co/2020/03/using-vue-watcheffect-to-track-reactive-dependencies/"
+    },
+    {
+      "Name": "How To Deploy Your Vue App to Github Pages",
+      "Page": "https://learnvue.co/2020/09/how-to-deploy-your-vue-app-to-github-pages/"
+    },
+    {
+      "Name": "6 Vue Loader Animation Libraries to Reduce Your Bounce Rate",
+      "Page": "https://learnvue.co/2020/02/6-vue-loader-animation-libraries-to-reduce-your-bounce-rate/"
+    },
+    {
+      "Name": "9 Vue Input Libraries to Upgrade Your Forms",
+      "Page": "https://learnvue.co/2020/01/9-vue-input-libraries-to-power-up-your-forms/"
+    },
+    {
+      "Name": "A VueJS Skeleton Loading Screen using Suspense Components",
+      "Page": "https://learnvue.co/2020/04/vue-skeleton-loading-screen-using-suspense-components-daily-vue-4/"
+    },
+    {
+      "Name": "Building a VueJS DatePicker Component - A Complete Tutorial",
+      "Page": "https://learnvue.co/2020/03/building-a-vuejs-datepicker-component-a-vue3-tutorial/"
+    },
+    {
+      "Name": "What does VueJS 3.0 Mean for Web Development",
+      "Page": "https://learnvue.co/2019/12/what-does-vuejs-3-0-mean-for-web-development/"
+    },
+    {
+      "Name": "Build Your First Vue3 Application - Our First Course",
+      "Page": "https://learnvue.co/2020/03/build-your-first-vue3-application-our-vue3-course/"
+    },
+    {
+      "Name": "Make Elements Fade In While Scrolling - Daily Vue Tip 3",
+      "Page": "https://learnvue.co/2020/04/make-elements-fade-in-while-scrolling-daily-vue-tip-3/"
+    },
+    {
+      "Name": "How Vue3 is Designed for Both Hobby Devs and Large Projects",
+      "Page": "https://learnvue.co/2019/12/how-vue3-is-designed-for-both-hobby-devs-and-large-projects/"
+    },
+    {
+      "Name": "A First Look at Vue3 Alpha Release - Example App in 15 Minutes",
+      "Page": "https://learnvue.co/2020/01/a-first-look-at-vue3-alpha-release-example-app-in-15-minutes/"
+    },
+    {
+      "Name": "A First Look at Vue3 Composition API",
+      "Page": "https://learnvue.co/2019/12/a-first-look-at-vue3-a-vue-composition-api-tutorial/"
+    },
+    {
+      "Name": "5 Things You can Do to Prepare for Vue 3.0",
+      "Page": "https://learnvue.co/2019/12/5-things-you-can-do-to-prepare-for-vue-3-0/"
+    }
+  ]