Integrate Tailwind CSS, componetize, composable for state management …

…between components. (#19) * Add tailwind setup and extension recommendation * integrate tailwind and componentize with composable for state management * tweak styles and make things look nicer * final comments in readme.
chrisjbarr · Aug 5, 2022 · f1cdc4b · f1cdc4b
1 parent f8b364d
commit f1cdc4b
Show file tree

Hide file tree

Showing 20 changed files with 980 additions and 171 deletions.
diff --git a/README.md b/README.md
diff --git a/front-end/.eslintrc-auto-import.json b/front-end/.eslintrc-auto-import.json
@@ -166,6 +166,7 @@
     "useFullscreen": true,
     "useGamepad": true,
     "useGeolocation": true,
+    "useGitHubSearch": true,
     "useIdle": true,
     "useImage": true,
     "useInfiniteScroll": true,

diff --git a/front-end/.vscode/extensions.json b/front-end/.vscode/extensions.json
@@ -1,3 +1,9 @@
 {
-  "recommendations": ["Vue.volar", "ZixuanChen.vitest-explorer", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+  "recommendations": [
+    "Vue.volar",
+    "ZixuanChen.vitest-explorer",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
 }
diff --git a/front-end/auto-imports.d.ts b/front-end/auto-imports.d.ts
@@ -167,6 +167,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useGitHubSearch: typeof import('./src/composables/useGitHubSearch')['useGitHubSearch']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -441,6 +442,7 @@ declare module '@vue/runtime-core' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useGitHubSearch: UnwrapRef<typeof import('./src/composables/useGitHubSearch')['useGitHubSearch']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>

diff --git a/front-end/components.d.ts b/front-end/components.d.ts
@@ -7,8 +7,10 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    GitHubSearch: typeof import('./src/components/GitHub/Search.vue')['default']
     GitHubSearchHistory: typeof import('./src/components/GitHub/SearchHistory.vue')['default']
+    GitHubSearchInput: typeof import('./src/components/GitHub/SearchInput.vue')['default']
     GitHubSearchResults: typeof import('./src/components/GitHub/SearchResults.vue')['default']
+    LayoutHeader: typeof import('./src/components/Layout/Header.vue')['default']
+    LayoutSidebar: typeof import('./src/components/Layout/Sidebar.vue')['default']
   }
 }