init

nurgeldiserikbay · Mar 25, 2024 · 36194b3 · 36194b3
commit 36194b3
Show file tree

Hide file tree

Showing 40 changed files with 1,593 additions and 0 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_BASE_URL=https://www.thecocktaildb.com/api/json/v1
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"semi": false,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"arrowParens": "always",
+	"useTabs": true,
+	"tabWidth": 2
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+
+- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Simurg Test</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "simurg-test",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.8",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vue3-lazyload": "^0.3.8"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.72.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vue-tsc": "^2.0.6"
+  }
+}
diff --git a/src/app/App.vue b/src/app/App.vue
@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<router-view />
+	</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/app/app.ts b/src/app/app.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import App from '@/app/App.vue'
+import { router, setupRouter } from '@/app/router'
+import { setupStore } from '@/shared/stores'
+import { registerModules } from '@/app/providers/register-modules'
+import VueLazyLoad from 'vue3-lazyload'
+
+import '@/app/styles/style.scss'
+
+export function init() {
+	const app = createApp(App)
+
+	app.use(VueLazyLoad, {})
+
+	setupStore(app)
+	registerModules(router)
+	setupRouter(app)
+	app.mount('#app')
+}
diff --git a/src/app/plugins/axios.ts b/src/app/plugins/axios.ts
@@ -0,0 +1,10 @@
+import axios, { type AxiosInstance } from 'axios'
+
+const api: AxiosInstance = axios.create({
+	baseURL: import.meta.env.VITE_BASE_URL,
+	headers: {
+		'Content-type': 'application/json',
+	},
+})
+
+export default api
diff --git a/src/app/providers/register-modules.ts b/src/app/providers/register-modules.ts
@@ -0,0 +1,21 @@
+import type { Router } from 'vue-router'
+import type { DefaultModule } from '@/shared/types/common'
+
+interface AppModule {
+	router?: (router: Router) => void
+}
+
+const modules = import.meta.glob<DefaultModule<AppModule>>(
+	'@/modules/*/index.ts',
+)
+
+export function registerModules(router: Router) {
+	const registerModule = (module: AppModule) => {
+		if (module.router) module.router(router)
+	}
+
+	Object.keys(modules).forEach(async (moduleKey) => {
+		const module = await modules[moduleKey]()
+		registerModule(module.default)
+	})
+}
diff --git a/src/app/router/index.ts b/src/app/router/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from './routes'
+
+export const router = createRouter({
+	history: createWebHistory(),
+	routes,
+	linkActiveClass: 'active',
+})
+
+export function setupRouter(app: App) {
+	app.use(router)
+}
diff --git a/src/app/router/routes.ts b/src/app/router/routes.ts
@@ -0,0 +1 @@
+export const routes = []
diff --git a/src/app/style.scss b/src/app/style.scss
@@ -0,0 +1 @@
+@import "./styles/index.scss";
diff --git a/src/app/styles/_global.scss b/src/app/styles/_global.scss
@@ -0,0 +1,5 @@
+.head-3 {
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 1.4;
+}
diff --git a/src/app/styles/_mixins.scss b/src/app/styles/_mixins.scss
@@ -0,0 +1,20 @@
+@function join-list($list, $separator: ", ") {
+  $result-string: "";
+
+  @each $item in $list {
+    $index: index($list, $item);
+    $result-string: $result-string + $item;
+
+    @if ($index !=length($list)) {
+      $result-string: $result-string + $separator;
+    }
+  }
+
+  @return $result-string;
+}
+
+@mixin get-media($medias...) {
+  @media #{join-list($medias)} {
+    @content;
+  }
+}
diff --git a/src/app/styles/_variables.scss b/src/app/styles/_variables.scss
@@ -0,0 +1,13 @@
+// Media
+$fullhd-width: 1560px;
+$desktop-width: 1281px;
+$laptop-width: 1025px;
+$tablet-width: 768px;
+$mobile-width: 280px;
+
+// Media queries as strings
+$fullhd: "(min-width: #{$fullhd-width})";
+$desktop: "(min-width: #{$desktop-width})";
+$laptop: "(min-width: #{$laptop-width}) and (max-width: #{$desktop-width - 1})";
+$tablet: "(min-width: #{$tablet-width}) and (max-width: #{$laptop-width - 1})";
+$mobile: "(max-width: #{$tablet-width - 1})";
diff --git a/src/app/styles/style.scss b/src/app/styles/style.scss
@@ -0,0 +1,11 @@
+@import 'global.scss';
+@import 'mixins.scss';
+@import 'variables.scss';
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,3 @@
+import { init } from '@/app/app'
+
+init()
diff --git a/src/modules/cocktails/components/CocktailList.vue b/src/modules/cocktails/components/CocktailList.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="cocktail-list">
+		<router-link
+			v-for="cocktail in cocktailStore._getCocktailList"
+			:key="cocktail.slug"
+			:to="`/${cocktail.slug}`"
+			class="cocktail-list__item"
+		>
+			{{ cocktail.name }}
+		</router-link>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useCocktailStore } from '../store'
+
+const $route = useRoute()
+const $router = useRouter()
+
+const cocktailStore = useCocktailStore()
+
+onBeforeMount(async () => {
+	await cocktailStore._fetchCocktailList()
+
+	if (!$route.params.slug) {
+		$router.push(`/${cocktailStore._getCocktailList[0].slug}`)
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/app/styles/_variables";
+@import "@/app/styles/_mixins";
+
+.cocktail-list {
+	&__item {
+		display: block;
+		font-size: 1.8rem;
+		font-weight: bold;
+		line-height: 1.3;
+		margin-bottom: 15px;
+		text-decoration: none;
+		color: #000;
+
+		@include get-media($mobile, $tablet) {
+			display: inline-block;
+			font-size: 1.4rem;
+			margin-right: 15px;
+		}
+
+		&::first-letter {
+			text-transform: capitalize;
+		}
+
+		&:visited {
+			color: #000;
+		}
+
+		&:active,
+		&.router-link-exact-active {
+			color: green;
+		}
+	}
+}
+</style>
diff --git a/src/modules/cocktails/index.ts b/src/modules/cocktails/index.ts
@@ -0,0 +1,5 @@
+import router from './router'
+
+export default {
+	router,
+}
diff --git a/src/modules/cocktails/pages/CocktailMain.vue b/src/modules/cocktails/pages/CocktailMain.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="cocktail-main">
+		<div class="cocktail-main__list"><CocktailList /></div>
+		<div class="cocktail-main__view">
+			<router-view />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import CocktailList from '../components/CocktailList.vue'
+</script>
+
+<style lang="scss" scoped>
+@import "@/app/styles/_variables";
+@import "@/app/styles/_mixins";
+
+.cocktail-main {
+	display: flex;
+	justify-content: flex-start;
+	align-items: stretch;
+
+	@include get-media($mobile, $tablet) {
+		flex-direction: column;
+	}
+
+	&__list {
+		padding: 13px 15px;
+		min-width: 200px;
+	}
+
+	&__view {
+		flex-grow: 1;
+		padding: 15px;
+	}
+}
+</style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_BASE_URL=https://www.thecocktaildb.com/api/json/v1