yaml/package

ArunGovil · Dec 4, 2022 · 1a52837 · 1a52837
1 parent 6e69cd8
commit 1a52837
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 29 deletions.
diff --git a/components/Listing.tsx b/components/Listing.tsx
@@ -1,36 +1,39 @@
 import React, { useState, useEffect } from "react";
 import { technology, codes } from "../json";
 import CodeCard from "./CodeCard";
+import content from "../content/content.yaml";
+import tabs from "../content/tabs.yaml";
 
 export default function Listing() {
-  const [currentTab, setCurrentTab] = useState(1);
+  const [currentTab, setCurrentTab] = useState({ id: 1, title: "reactJs" });
   const [code, setCode] = useState<any>([]);
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
+    setLoading(true);
     fetchData();
   }, [currentTab]);
 
-  const fetchData = () => {
-    const res = codes.filter(
-      (item) => item.technology == codes[currentTab - 1].technology
-    );
-    setCode(res);
+  const fetchData = async () => {
+    const data = content.filter((item) => {
+      return item.technology == currentTab.title;
+    });
+    setCode(data);
     setLoading(false);
   };
 
   const returnNotFound = () => {
     return (
-      <div>
-        <p>Not Found</p>
+      <div className="text-center">
+        <p className="font-thin">No Result Found</p>
       </div>
     );
   };
 
   const returnLoading = () => {
     return (
-      <div>
-        <p>Loading..</p>
+      <div className="text-center">
+        <p className="font-thin">Loading..</p>
       </div>
     );
   };
@@ -60,19 +63,20 @@ export default function Listing() {
     <div className="flex flex-col justify-center items-center p-4 w-full max-w-5xl mt-8">
       <nav>
         <ul className="flex">
-          {technology.map((item) => (
-            <li
-              key={item.id}
-              onClick={() => setCurrentTab(item.id)}
-              className={
-                item.id == currentTab
-                  ? "cursor-pointer p-2 mr-2 border-b-2 border-orange-500"
-                  : "cursor-pointer p-2 mr-2 border-none"
-              }
-            >
-              {item.title}
-            </li>
-          ))}
+          {tabs.length > 0 &&
+            tabs.map((item) => (
+              <li
+                key={item.id}
+                onClick={() => setCurrentTab(item)}
+                className={
+                  item.title == currentTab.title
+                    ? "cursor-pointer p-2 mr-2 border-b-2 border-orange-500"
+                    : "cursor-pointer p-2 mr-2 border-none"
+                }
+              >
+                {item.title}
+              </li>
+            ))}
         </ul>
       </nav>
       <section className="mt-8 w-full">

diff --git a/components/PrimarySearch.tsx b/components/PrimarySearch.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { technology, placeholders } from "../json";
 
@@ -46,12 +47,15 @@ export default function PrimarySearch() {
       <div className="mt-12 flex">
         <input
           onChange={(e) => setQuery(e.target.value)}
-          className="bg-black border-l border-r border-t border-b rounded-l-lg p-2 border-slate-800 h-12 w-96 text-sm"
+          className="bg-black border-l border-r border-t border-b rounded-l-lg p-2 border-slate-800 h-12 w-96 max-w-[75vw] text-sm"
           placeholder={placeholder.placeholder}
         />
-        <div className="p-2 flex items-center justify-center cursor-pointer bg-gradient-to-br from-[#FF4D4D] to-orange-500 rounded-r-lg text-sm pl-3 pr-3">
-          search
-        </div>
+        <Link
+          href="/details"
+          className="p-2 flex items-center justify-center cursor-pointer bg-gradient-to-br from-[#FF4D4D] to-orange-500 rounded-r-lg text-sm pl-3 pr-3"
+        >
+          <p>search</p>
+        </Link>
       </div>
       {isVisible && returnSuggestions()}
     </div>

diff --git a/content/content.yaml b/content/content.yaml
@@ -0,0 +1,80 @@
+# reactJs commands
+- title: Create React App using npm
+  code: npm init react-app app-name
+  technology: reactJs
+  tags:
+    - reactJs
+    - npm
+- title: Create React App using npx
+  code: npx create-react-app app-name
+  technology: reactJs
+  tags:
+    - reactJs
+    - npx
+- title: Create React App using Yarn
+  code: yarn create react-app app-name
+  technology: reactJs
+  tags:
+    - reactJs
+    - yarn
+- title: Create React Typescript App using npm
+  code: npm init react-app app-name --template typescript
+  technology: reactJs
+  tags:
+    - reactJs
+    - npm
+- title: Create React Typescript App using npx
+  code: npx create-react-app app-name --template typescript
+  technology: reactJs
+  tags:
+    - reactJs
+    - npx
+- title: Create React Typescript App using Yarn
+  code: yarn create react-app app-name --template typescript
+  technology: reactJs
+  tags:
+    - reactJs
+    - yarn
+
+# nextJs commands
+- title: Create React App using npm
+  code: npm init react-app app-name
+  technology: nextJs
+  tags:
+    - nextJs
+    - npm
+- title: Create React App using npx
+  code: npx create-react-app app-name
+  technology: nextJs
+  tags:
+    - nextJs
+    - npx
+
+# reactNative commands
+- title: Create React Native App using npx
+  code: npx react-native init appName
+  technology: reactNative
+  tags:
+    - reactNative
+    - npm
+- title: Create React Typescript App using npx
+  code: npx react-native init appName --template react-native-template-typescript
+  technology: reactNative
+  tags:
+    - reactNative
+    - typescript
+    - npx
+
+# git commands
+- title: Git add remote url
+  code: git remote add origin repo-url
+  technology: git
+  tags:
+    - git
+    - remote
+- title: View remote url
+  code: git remote -v
+  technology: git
+  tags:
+    - git
+    - remote
diff --git a/content/tabs.yaml b/content/tabs.yaml
@@ -0,0 +1,11 @@
+# tabs
+- id: 1
+  title: reactJs
+- id: 2
+  title: nextJs
+- id: 3
+  title: reactNative
+- id: 4
+  title: git
+- id: 5
+  title: django
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,15 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+  webpack: function (config) {
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      use: "js-yaml-loader",
+    });
+    return config;
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@types/react-dom": "18.0.9",
     "eslint": "8.28.0",
     "eslint-config-next": "13.0.5",
+    "js-yaml-loader": "^1.2.2",
     "next": "13.0.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pages/details.tsx b/pages/details.tsx
@@ -0,0 +1,19 @@
+import Head from "next/head";
+import { Header, Hero, Listing, About, Footer } from "../components";
+
+export default function Details() {
+  return (
+    <div>
+      <Head>
+        <title>cmdr / one stop shop</title>
+        <meta name="description" content="jack of all commands" />
+        <link rel="icon" href="/img/frame.png" />
+      </Head>
+      <main className="flex flex-col items-center">
+        <Header />
+        <Listing />
+        <Footer />
+      </main>
+    </div>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -317,6 +317,13 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -409,6 +416,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -630,6 +642,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 enhanced-resolve@^5.10.0:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
@@ -880,6 +897,11 @@ espree@^9.4.0:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esquery@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
@@ -1331,6 +1353,23 @@ js-sdsl@^4.1.4:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml-loader@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/js-yaml-loader/-/js-yaml-loader-1.2.2.tgz#2c15f93915617acd19676d648945fa3003f8629b"
+  integrity sha512-H+NeuNrG6uOs/WMjna2SjkaCw13rMWiT/D7l9+9x5n8aq88BDsh2sRmdfxckWPIHtViYHWRG6XiCKYvS1dfyLg==
+  dependencies:
+    js-yaml "^3.13.1"
+    loader-utils "^1.2.3"
+    un-eval "^1.2.0"
+
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -1388,6 +1427,15 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+loader-utils@^1.2.3:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
@@ -1908,6 +1956,11 @@ source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
 string.prototype.matchall@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
@@ -2082,6 +2135,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"
   integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==
 
+un-eval@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/un-eval/-/un-eval-1.2.0.tgz#22a95c650334d59d21697efae32612218ecad65f"
+  integrity sha512-Wlj/pum6dQtGTPD/lclDtoVPkSfpjPfy1dwnnKw/sZP5DpBH9fLhBgQfsqNhe5/gS1D+vkZUuB771NRMUPA5CA==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"