From 3240365770871ec3dcaa88d242fb2508f7a46917 Mon Sep 17 00:00:00 2001 From: anjy7 Date: Thu, 29 Dec 2022 22:46:13 +0530 Subject: [PATCH 1/8] added filtered search component --- .../filtered-search-bar/AllCards.js | 16 + app/components/filtered-search-bar/Card.js | 40 +++ app/components/filtered-search-bar/Filter.js | 56 +++ app/pages/filtered-search/index.js | 336 ++++++++++++++++++ 4 files changed, 448 insertions(+) create mode 100644 app/components/filtered-search-bar/AllCards.js create mode 100644 app/components/filtered-search-bar/Card.js create mode 100644 app/components/filtered-search-bar/Filter.js create mode 100644 app/pages/filtered-search/index.js diff --git a/app/components/filtered-search-bar/AllCards.js b/app/components/filtered-search-bar/AllCards.js new file mode 100644 index 00000000..cde4b693 --- /dev/null +++ b/app/components/filtered-search-bar/AllCards.js @@ -0,0 +1,16 @@ +import Card from "./Card"; +import {motion} from "framer-motion" + + +function AllCards({ data,search }) { + return ( + + + {search(data).map((x) => { + return ; + })} + + ); +} + +export default AllCards; diff --git a/app/components/filtered-search-bar/Card.js b/app/components/filtered-search-bar/Card.js new file mode 100644 index 00000000..ae29b327 --- /dev/null +++ b/app/components/filtered-search-bar/Card.js @@ -0,0 +1,40 @@ +import React from "react"; +import { motion } from "framer-motion"; + +function Card({ name, value, info}) { + return ( + +
+
+ {name} +
+ +

+ {info} +

+ + Read more + + +
+ + ); +} + +export default Card; diff --git a/app/components/filtered-search-bar/Filter.js b/app/components/filtered-search-bar/Filter.js new file mode 100644 index 00000000..8d7910c2 --- /dev/null +++ b/app/components/filtered-search-bar/Filter.js @@ -0,0 +1,56 @@ +import { useEffect } from "react"; +import React from "react"; + +function Filter({ resources, setActiveOption, setFiltered, activeOption }) { + useEffect(() => { + if (activeOption == "all") { + setFiltered(resources); + return; + } + const filtered = resources.filter((card) => card.genre === activeOption); + setFiltered(filtered); + console.log(filtered); + }, [activeOption]); + + return ( +
+

+ Filter: +

+
+ + + + + +
+
+ ); +} + +export default Filter; diff --git a/app/pages/filtered-search/index.js b/app/pages/filtered-search/index.js new file mode 100644 index 00000000..41b91d86 --- /dev/null +++ b/app/pages/filtered-search/index.js @@ -0,0 +1,336 @@ +import AllCards from "../../components/filtered-search-bar/AllCards"; +import Filter from "../../components/filtered-search-bar/Filter"; +import { useState, useEffect } from "react"; + + +export default function Home() { + + const resources = { + hits: [ + { + id: 0, + name: "DevOps Path", + value: + "https://twitter.com/ghumare64/status/1537460982582128641?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "Recommended by me, If focusing on the Job Interview", + genre: "twitter", + }, + { + id: 1, + name: "DevOps Roadmap by roadmap.sh", + value: "https://roadmap.sh/devops", + info: "A community driven step by step guide for DevOps, SRE or any other Operations Role in 2022", + genre: "roadmap", + }, + { + id: 2, + name: "Kubernetes Resources", + value: + "https://twitter.com/ghumare64/status/1586751198962495489?s=20&t=oeBFJCpW8z_ZEpe1F65W8A", + info: "Tweet thread", + genre: "resources", + }, + { + id: 3, + name: "Remote Job Path", + value: + "https://twitter.com/ghumare64/status/1567096152079859712?s=20&t=bTOHCdrD6epup8J2p7Fucw", + info: "It is my experience while applying remote jobs", + genre: "roadmap", + }, + { + id: 4, + name: "DevOps Books", + value: "https://github.com/rohitg00/DevOps_Books", + info: "Repository created to host every free DevOps books available", + genre: "resources", + }, + { + id: 5, + name: "Resume Tips", + value: + "https://twitter.com/ghumare64/status/1529346650468012032?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "This tweet contains - Resume tips and my own latex resume template", + genre: "roadmap", + }, + { + id: 6, + name: "DevOps Youtube Channels", + value: + "https://twitter.com/ghumare64/status/1559771038895853568?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "This tweet contains - Youtube video channels to learn DevOps free of cost.", + genre: "resources", + }, + { + id: 7, + name: "DevOps Tools", + value: + "https://twitter.com/ghumare64/status/1560892185842941953?s=20&t=mTInaYg86KZbVNyC865ntQ", + info: "I personally use this DevOps tools", + genre: "twitter", + }, + { + id: 8, + name: "System Design Resources", + value: + "https://twitter.com/ghumare64/status/1530525871366230017?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "This tweet contains - Resources to learn System Design. \ud83e\udd16 System Design is the essential part of SDE/SRE Interviews.", + genre: "resources", + }, + { + id: 9, + name: "DevOps Projects - 1", + value: + "https://twitter.com/ghumare64/status/1523372831513673729?s=20&t=luieHHpWhSqkW3_Pg3VWnQ", + info: "5 DevOps Projects that will get you a job", + genre: "project", + }, + { + id: 10, + name: "DevOps Projects - 2", + value: + "https://twitter.com/ghumare64/status/1546127603282710530?s=20&t=luieHHpWhSqkW3_Pg3VWnQ", + info: '"Anna Afamefuna, Thanks for curation"', + genre: "project", + }, + { + id: 11, + name: "DevOps Resources - 1", + value: + "https://twitter.com/ghumare64/status/1526398860389519361?s=20&t=luieHHpWhSqkW3_Pg3VWnQ", + info: "This is part 1 of some DevOps resources", + genre: "resources", + }, + { + id: 12, + name: "DevOps Resources - 2", + value: + "https://twitter.com/ghumare64/status/1528377875044663296?s=20&t=luieHHpWhSqkW3_Pg3VWnQ", + info: "This is part 2 of some DevOps resources", + genre: "resources", + }, + { + id: 13, + name: "DevOps Resources - 3", + value: + "https://twitter.com/ghumare64/status/1531885835150233600?s=20&t=luieHHpWhSqkW3_Pg3VWnQ", + info: "This is part 3 of some DevOps resources", + genre: "resources", + }, + { + id: 14, + name: "Free Courses", + value: + "https://twitter.com/ghumare64/status/1581497472043536385?s=20&t=k_1DZf1dgt6iU4IGIWx9zA", + info: "DevOps, Data Science, and Python Free Courses", + genre: "resources", + }, + { + id: 15, + name: "AWS Resources", + value: "[AWS Badges](https://aws.amazon.com/training/badges/)", + info: "Learn AWS skills and earn AWS digital badges for FREE!", + genre: "resources", + }, + { + id: 16, + name: "Tricks to earn through DevOps", + value: + "https://twitter.com/ghumare64/status/1555793156847063040?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "This tweet contains - Tips and tricks to earn more than 50$/hr+ with DevOps and powerful content.", + genre: "tips", + }, + { + id: 17, + name: "Part-time Jobs", + value: + "https://twitter.com/ghumare64/status/1530242128139259905?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "Learn about part-time jobs in DevOps", + genre: "twitter", + }, + { + id: 18, + name: "Service Mesh", + value: + "https://twitter.com/ghumare64/status/1547812558295670784?s=20&t=KA45jQ2CBsyZK3wFW9zi7g", + info: "Different resources to learn service mesh free of cost", + genre: "resources", + }, + { + id: 19, + name: "Getting Started With eBPF", + value: "https://ebpf.io/what-is-ebpf/", + info: "eBPF (which is no longer an acronym for anything) is a revolutionary technology with origins in the Linux kernel that can run sandboxed programs in a privileged context such as the operating system kernel.", + genre: "resources", + }, + { + id: 20, + name: "Free Introduction to GitOps", + value: "https://bit.ly/3xKPZyi", + info: "Linux Foundation course", + genre: "resources", + }, + { + id: 21, + name: "DevOps-The-Hard-Way-AWS", + value: "https://buff.ly/3QxT6QE", + info: "This repository contains free labs for setting up an entire workflow and DevOps environment from a real-world perspective in AWS", + genre: "github", + }, + { + id: 22, + name: "DevOps Exercises", + value: "https://github.com/bregman-arie/devops-exercises", + info: "Linux, Jenkins, AWS, SRE, Prometheus, Docker, Python, Ansible, Git, Kubernetes, Terraform, OpenStack, SQL, NoSQL, Azure, GCP, DNS, Elastic, Network, Virtualization. DevOps Interview Questions", + genre: "resources", + }, + { + id: 23, + name: "90DaysOfDevOps", + value: "https://github.com/MichaelCade/90DaysOfDevOps", + info: "This repository is my documenting repository for learning the world of DevOps. I started this journey on the 1st January 2022 and I plan to run to March 31st for a complete 90-day romp on spending an hour a day including weekends to get a foundational knowledge across a lot of different areas that make up DevOps.", + genre: "github", + }, + { + id: 24, + name: "Learn DevOps", + value: "https://github.com/dwyl/learn-devops", + info: '\ud83d\udea7 Learn the craft of "DevOps" (Developer Operations) to Deploy your App and Monitor it so it stays "Up"!', + genre: "resources", + }, + { + id: 25, + name: "Awesome Learning", + value: "https://github.com/Lets-DevOps/awesome-learning", + info: "A curated list for DevOps learning resources. Join the slack channel to discuss more.", + genre: "resources", + }, + { + id: 26, + name: "DevOps Academy", + value: "https://github.com/devopsacademyau/academy", + info: "DevOps content, classes and exercises", + genre: "resources", + }, + { + id: 27, + name: "DevOps Gitbook", + value: "https://tkssharma-devops.gitbook.io/devops-training/", + info: "Some curated DevOps insights", + genre: "resources", + }, + { + id: 28, + name: "Github Gists", + value: + "[1](https://t.co/gpWbgCKdrY) [2](https://t.co/jdQJtSYUjL) [3](https://t.co/OyObbwSbwf) [4](https://t.co/dDxC2TU0JW) [5](https://t.co/AvuBAnXzqK) [6](https://t.co/AvuBAnXzqK) [7](https://t.co/ThxJIAyM4U) [8](https://t.co/wyZ4Cg8lif) [9](https://t.co/2u83ClKLR8)", + info: "Application Security Interview Preparation questions", + genre: "github", + }, + { + id: 29, + name: "Free e-Books", + value: "https://bit.ly/3LfMOma", + info: "The Container Security Book by Liz Rice", + genre: "resources", + }, + { + id: 30, + name: "Github Repos - 1", + value: "https://bit.ly/3ypmikg", + info: "Automated Vagrant Kubernetes Cluster Setup", + genre: "github", + }, + { + id: 31, + name: "Github Repos - 2", + value: "https://bit.ly/3dGLCfw", + info: "Kubetools - A Curated List of Kubernetes Tools", + genre: "github", + }, + { + id: 32, + name: "Github Repos - 3", + value: "https://bit.ly/3Kejxa5", + info: "System Design Primer", + genre: "github", + }, + { + id: 33, + name: "Kubernetes course by CIVO", + value: "https://www.civo.com/academy", + info: "Kubernetes - An orchestration tool used to manage your containers and application", + genre: "github", + }, + { + id: 34, + name: "Sample Docker Templates", + value: + "https://github.com/devtron-labs/devtron/tree/main/sample-docker-templates", + info: "Devtron Sample Docker Templates - If you're exploring the docker images and stuck with the creation of dockerfiles, This resource get you covered.", + genre: "github", + }, + { + id: 35, + name: "DevOps Projects", + value: "https://github.com/Abhinav-26/DevOps-Projects", + info: "Curated List of DevOps Projects", + genre: "project", + }, + ], + estimatedTotalHits: 66, + query: "botman", + limit: 20, + offset: 0, + processingTimeMs: 12, + }; + + const [filtered, setFiltered] = useState(resources.hits); + const [activeOption, setActiveOption] = useState("all"); + + const [q, setQ] = useState(""); + const [searchParam] = useState(["name"]); + + function search(items) { + return items.filter((item) => { + return searchParam.some((newItem) => { + return ( + item[newItem].toString().toLowerCase().indexOf(q.toLowerCase()) > -1 + ); + }); + }); + } + + return ( +
+

+ ALL RESOURCES +

+
+
+

Search:

+ + setQ(e.target.value)} + /> +
+ + +
+ +
+
+
+ ); +} \ No newline at end of file From 4d698ca8c18f31d5d0b2e097e1013673a6c2aaed Mon Sep 17 00:00:00 2001 From: PalanikannanM Date: Fri, 30 Dec 2022 05:44:03 +0000 Subject: [PATCH 2/8] fixed package.json and uneccesary imports --- .../filtered-search-bar/AllCards.js | 1 - app/package-lock.json | 197 ++++++++++++++++++ app/package.json | 1 + app/pages/filtered-search/index.js | 6 +- 4 files changed, 201 insertions(+), 4 deletions(-) diff --git a/app/components/filtered-search-bar/AllCards.js b/app/components/filtered-search-bar/AllCards.js index cde4b693..6efeb0ba 100644 --- a/app/components/filtered-search-bar/AllCards.js +++ b/app/components/filtered-search-bar/AllCards.js @@ -5,7 +5,6 @@ import {motion} from "framer-motion" function AllCards({ data,search }) { return ( - {search(data).map((x) => { return ; })} diff --git a/app/package-lock.json b/app/package-lock.json index c7786eeb..d3bf72f7 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -16,6 +16,7 @@ "bootstrap": "^5.1.3", "dompurify": "^2.3.5", "emoji-toolkit": "^6.6.0", + "framer-motion": "^8.0.2", "gapi-cjs": "^1.0.3", "graphql": "^16.3.0", "ipfs-core": "^0.14.2", @@ -237,6 +238,21 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint/eslintrc": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz", @@ -460,6 +476,64 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "dependencies": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/dom": { + "version": "10.15.3", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.3.tgz", + "integrity": "sha512-FQ7a2zMBXc1UeU8CG9G3yDpst55fbb0+C9A0VGfwOITitBCzigKZnXRgsRSWWR+FW57GSc13eGQxtYB0lKG0Ng==", + "dependencies": { + "@motionone/animation": "^10.15.1", + "@motionone/generators": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "dependencies": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "dependencies": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" + }, + "node_modules/@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "dependencies": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "node_modules/@multiformats/murmur3": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@multiformats/murmur3/-/murmur3-1.1.3.tgz", @@ -4991,6 +5065,28 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.0.2.tgz", + "integrity": "sha512-xuIiQchVh/cLqUzzu5/8ok4o0nkwYPyIRtkDl8wDvrQUNRhSfRaZu1MMdzN0TjpBtG66oP03PSLO7Qtu1YqPrA==", + "dependencies": { + "@motionone/dom": "^10.15.3", + "hey-listen": "^1.0.8", + "tslib": "2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/framer-motion/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, "node_modules/fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", @@ -5421,6 +5517,11 @@ "he": "bin/he" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -11337,6 +11438,21 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "@eslint/eslintrc": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz", @@ -11555,6 +11671,64 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "requires": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/dom": { + "version": "10.15.3", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.3.tgz", + "integrity": "sha512-FQ7a2zMBXc1UeU8CG9G3yDpst55fbb0+C9A0VGfwOITitBCzigKZnXRgsRSWWR+FW57GSc13eGQxtYB0lKG0Ng==", + "requires": { + "@motionone/animation": "^10.15.1", + "@motionone/generators": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "requires": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "requires": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" + }, + "@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "requires": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "@multiformats/murmur3": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@multiformats/murmur3/-/murmur3-1.1.3.tgz", @@ -15016,6 +15190,24 @@ "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", "dev": true }, + "framer-motion": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.0.2.tgz", + "integrity": "sha512-xuIiQchVh/cLqUzzu5/8ok4o0nkwYPyIRtkDl8wDvrQUNRhSfRaZu1MMdzN0TjpBtG66oP03PSLO7Qtu1YqPrA==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "@motionone/dom": "^10.15.3", + "hey-listen": "^1.0.8", + "tslib": "2.4.0" + }, + "dependencies": { + "tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + } + } + }, "fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", @@ -15324,6 +15516,11 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", diff --git a/app/package.json b/app/package.json index 6ffee746..fe9e4b23 100644 --- a/app/package.json +++ b/app/package.json @@ -19,6 +19,7 @@ "bootstrap": "^5.1.3", "dompurify": "^2.3.5", "emoji-toolkit": "^6.6.0", + "framer-motion": "^8.0.2", "gapi-cjs": "^1.0.3", "graphql": "^16.3.0", "ipfs-core": "^0.14.2", diff --git a/app/pages/filtered-search/index.js b/app/pages/filtered-search/index.js index 41b91d86..d0e7bd4e 100644 --- a/app/pages/filtered-search/index.js +++ b/app/pages/filtered-search/index.js @@ -1,6 +1,6 @@ import AllCards from "../../components/filtered-search-bar/AllCards"; import Filter from "../../components/filtered-search-bar/Filter"; -import { useState, useEffect } from "react"; +import { useState } from "react"; export default function Home() { @@ -318,9 +318,9 @@ export default function Home() { placeholder="Search for..." value={q} onChange={(e) => setQ(e.target.value)} - /> + /> - + Date: Fri, 30 Dec 2022 06:31:53 +0000 Subject: [PATCH 3/8] changed the url for the resources to point to /resources --- app/pages/{filtered-search => resources}/index.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename app/pages/{filtered-search => resources}/index.js (100%) diff --git a/app/pages/filtered-search/index.js b/app/pages/resources/index.js similarity index 100% rename from app/pages/filtered-search/index.js rename to app/pages/resources/index.js From de439c250058b9c6a3603a98bfc2e7ef7c45a188 Mon Sep 17 00:00:00 2001 From: anjy7 Date: Fri, 30 Dec 2022 17:19:50 +0530 Subject: [PATCH 4/8] added dropdown list in search bar --- app/components/filtered-search-bar/Filter.js | 3 +- app/pages/resources/index.js | 40 +++++++++++++++----- 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/app/components/filtered-search-bar/Filter.js b/app/components/filtered-search-bar/Filter.js index 8d7910c2..de1a5c0c 100644 --- a/app/components/filtered-search-bar/Filter.js +++ b/app/components/filtered-search-bar/Filter.js @@ -13,7 +13,7 @@ function Filter({ resources, setActiveOption, setFiltered, activeOption }) { }, [activeOption]); return ( -
+

Filter:

@@ -54,3 +54,4 @@ function Filter({ resources, setActiveOption, setFiltered, activeOption }) { } export default Filter; + diff --git a/app/pages/resources/index.js b/app/pages/resources/index.js index d0e7bd4e..4fc26fa0 100644 --- a/app/pages/resources/index.js +++ b/app/pages/resources/index.js @@ -1,10 +1,10 @@ -import AllCards from "../../components/filtered-search-bar/AllCards"; -import Filter from "../../components/filtered-search-bar/Filter"; -import { useState } from "react"; +import AllCards from "../components/AllCards"; +import Filter from "../components/Filter"; +import { useState, useEffect } from "react"; export default function Home() { - + const resources = { hits: [ { @@ -289,6 +289,7 @@ export default function Home() { const [activeOption, setActiveOption] = useState("all"); const [q, setQ] = useState(""); + const [trigger, setTrigger] = useState(true); const [searchParam] = useState(["name"]); function search(items) { @@ -306,20 +307,39 @@ export default function Home() {

ALL RESOURCES

-
-
-

Search:

+
+
+

+ Search: +

setQ(e.target.value)} + onChange={(e) => { + setQ(e.target.value) + setTrigger(true) + }} />
+
+
+ {trigger && search(filtered).map((x) => { + + return q &&
{ + setQ(x.name); + setTrigger(false) + }} className=" bg-white w-60 p-1 border border-grey-600 mr-40 min-h-10 ml-28 pr-2 md:ml-[15.25rem] md:pl-2 md:w-2/3 lg:w-[93.8rem] md:h-8"> + {x.name}
; + })} +
+ + +
); -} \ No newline at end of file +} From 96b205c1c7319291bfe200b1d294528a3a635c1c Mon Sep 17 00:00:00 2001 From: anjy7 Date: Wed, 4 Jan 2023 22:33:37 +0530 Subject: [PATCH 5/8] removed hard coded data, now dynamically importing data --- .../filtered-search-bar/AllCards.js | 8 +- app/components/filtered-search-bar/Card.js | 21 +- app/components/filtered-search-bar/Filter.js | 4 +- app/pages/resources/index.js | 498 ++++++------------ 4 files changed, 172 insertions(+), 359 deletions(-) diff --git a/app/components/filtered-search-bar/AllCards.js b/app/components/filtered-search-bar/AllCards.js index 6efeb0ba..cfc2a75b 100644 --- a/app/components/filtered-search-bar/AllCards.js +++ b/app/components/filtered-search-bar/AllCards.js @@ -1,3 +1,4 @@ +import React from "react"; import Card from "./Card"; import {motion} from "framer-motion" @@ -5,8 +6,11 @@ import {motion} from "framer-motion" function AllCards({ data,search }) { return ( - {search(data).map((x) => { - return ; + + {search(data)?.map((x) => { + if(x.id>7){ + return ; + } })} ); diff --git a/app/components/filtered-search-bar/Card.js b/app/components/filtered-search-bar/Card.js index ae29b327..adc4da9c 100644 --- a/app/components/filtered-search-bar/Card.js +++ b/app/components/filtered-search-bar/Card.js @@ -4,33 +4,20 @@ import { motion } from "framer-motion"; function Card({ name, value, info}) { return ( -
-
+
+
{name}
-

+

{info}

Read more -
diff --git a/app/components/filtered-search-bar/Filter.js b/app/components/filtered-search-bar/Filter.js index de1a5c0c..1f1c4958 100644 --- a/app/components/filtered-search-bar/Filter.js +++ b/app/components/filtered-search-bar/Filter.js @@ -9,7 +9,7 @@ function Filter({ resources, setActiveOption, setFiltered, activeOption }) { } const filtered = resources.filter((card) => card.genre === activeOption); setFiltered(filtered); - console.log(filtered); + // console.log(filtered); }, [activeOption]); return ( @@ -37,7 +37,7 @@ function Filter({ resources, setActiveOption, setFiltered, activeOption }) { Twitter diff --git a/app/pages/resources/index.js b/app/pages/resources/index.js index 556017aa..1ed12f1c 100644 --- a/app/pages/resources/index.js +++ b/app/pages/resources/index.js @@ -1,90 +1,93 @@ import AllCards from '../../components/filtered-search-bar/AllCards'; import Filter from '../../components/filtered-search-bar/Filter'; import { useState, useEffect } from 'react'; +import Nav from '../../components/Hero/Nav'; export default function Home() { const [resource, setresource] = useState(); useEffect(() => { const json = []; - fetch('https://raw.githubusercontent.com/rohitg00/DevOpsCommunity/main/README.md') + fetch( + "https://raw.githubusercontent.com/rohitg00/DevOpsCommunity/main/README.md" + ) .then((response) => response.text()) .then((markdown) => { - let lines = markdown.split('\n'); + let lines = markdown.split("\n"); let i = 0; lines.forEach((line) => { let newLine = line; line = line.toLowerCase(); - if (line.includes('https')) { + if (line.includes("https")) { // paragraph - let arr = newLine.split('|'); + let arr = newLine.split("|"); if ( - line.includes('path') || - line.includes('course') || - line.includes('scholarship') || - line.includes('free') || - line.includes('roadmap') || - line.includes('learning') || - line.includes('learn') || - line.includes('courses') || - line.includes('introduction') || - line.includes('e-books') || - line.includes('exercises') || - line.includes('started') || - line.includes('gitbook') + line.includes("path") || + line.includes("course") || + line.includes("scholarship") || + line.includes("free") || + line.includes("roadmap") || + line.includes("learning") || + line.includes("learn") || + line.includes("courses") || + line.includes("introduction") || + line.includes("e-books") || + line.includes("exercises") || + line.includes("started") || + line.includes("gitbook") ) { json.push({ id: i, - type: 'paragraph', + type: "paragraph", name: arr[0], value: arr[1], info: arr[2], - genre: 'resources', + genre: "resources", }); i++; - } else if (line.includes('projects')) { + } else if (line.includes("projects")) { json.push({ id: i, - type: 'paragraph', + type: "paragraph", name: arr[0], value: arr[1], info: arr[2], - genre: 'projects', + genre: "projects", }); i++; } else if ( - line.includes('repos') || - line.includes('repository') || - line.includes('template') + line.includes("repos") || + line.includes("repository") || + line.includes("template") ) { json.push({ id: i, - type: 'paragraph', + type: "paragraph", name: arr[0], value: arr[1], info: arr[2], - genre: 'github', + genre: "github", }); i++; } else if ( - (line.includes('twitter') && line.includes('resources')) || - line.includes('tricks') || - line.includes('tools') + (line.includes("twitter") && line.includes("resources")) || + line.includes("tricks") || + line.includes("tools") ) { json.push({ id: i, - type: 'paragraph', + type: "paragraph", name: arr[0], value: arr[1], info: arr[2], - genre: 'twitter', + genre: "twitter", }); i++; } else { json.push({ id: i, - type: 'paragraph', + type: "paragraph", text: arr, }); i++; @@ -102,40 +105,39 @@ export default function Home() { // console.log(resource); const [filtered, setFiltered] = useState(resource); - const [activeOption, setActiveOption] = useState('all'); + const [activeOption, setActiveOption] = useState("all"); - const [q, setQ] = useState(''); + const [q, setQ] = useState(""); const [trigger, setTrigger] = useState(true); - const [searchParam] = useState(['name']); + const [searchParam] = useState(["name"]); function search(items) { return items?.filter((item) => { - if(item.id>7){ + if (item.id > 7) { return searchParam.some((newItem) => { return ( - item[newItem]?.toString().toLowerCase().indexOf(q.toLowerCase()) > -1 + item[newItem]?.toString().toLowerCase().indexOf(q.toLowerCase()) > + -1 ); }); } - }); } if (resource) { return ( -
-

ALL RESOURCES

-
-
-

- Search: -

- +
+
); } -} +} \ No newline at end of file From 376f534e3722d8fa15d15de6ac7217e8a6394640 Mon Sep 17 00:00:00 2001 From: anjy7 Date: Thu, 5 Jan 2023 22:38:41 +0530 Subject: [PATCH 8/8] improved UI of dropdown --- app/pages/resources/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/pages/resources/index.js b/app/pages/resources/index.js index 1ed12f1c..b13cdded 100644 --- a/app/pages/resources/index.js +++ b/app/pages/resources/index.js @@ -126,7 +126,7 @@ export default function Home() { if (resource) { return (
-
-
+
{trigger && search(filtered)?.map((x) => { @@ -156,7 +156,7 @@ export default function Home() { setQ(x.name); setTrigger(false); }} - className=" bg-white w-60 p-1 border border-grey-600 mr-40 min-h-10 ml-28 pr-2 md:ml-[15.25rem] md:pl-2 md:w-2/3 lg:w-[93.8rem] md:h-8" + className=" bg-white w-[16rem] p-1 border border-grey-600 mr-40 min-h-10 sm:w-[59.6rem] md:h-8" > {x.name}