Merge pull request #16 from mudmykola/feature/CRJ_movie_comments

 feat(favorites): added the functionality of favorites

.firebase/hosting.ZGlzdA.cache

@@ -1,4 +1,5 @@
-index.html,1724311927761,d926b4ac6eb4a92327ef5323c0fda3360732460b19ea39b9f7a7116340dc7ad4
-data/cartoons.json,1724311927472,f9e2b8b20dfdbe644aff3fb12576a11a60c8d965775117503f85d2c4957a2d78
-assets/index-D1gNhrEf.css,1724311927762,83485fc869df41dbc2f570222acdb5e71c19e51abab6f49048e543ff318e0a61
-assets/index-CNxTZzT0.js,1724311927762,063d38e7ff749befe4571514aebff1e20bac774d9a4b1d91491ac9db002f5d04
+index.html,1725086648941,f90fee2b73ca0f2054ee47d967dfdcd8e604dd3ce21465ba132c08a334f1ecec
+data/cartoons.json,1725086648638,f9e2b8b20dfdbe644aff3fb12576a11a60c8d965775117503f85d2c4957a2d78
+assets/FavoriteComponent-D-m1Vqz0.js,1725086648942,fb5f47bf40fa9e432fb00293f65f4619341bbd05b7dde6535903da683f9f82c7
+assets/index-BpTPr3PL.css,1725086648942,a2252c6228e0bf8105ee78148276a1b85f32f66cdd5fa9a361d255d9530af555
+assets/index-CjP5kf8-.js,1725086648941,1a822c2d8e9ae90efe28df8a8d0752cd7a306d258e76a618e3f4179647f7975b

.prettierrc

@@ -1,10 +1,10 @@
 {
   "printWidth": 80,
   "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "endOfLine": "lf"
-}
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "proseWrap": "always"
+}

README.md

@@ -1,16 +1,16 @@
 🎬 CartoonJoy Website
 
-CartoonJoy is a child-friendly website designed for easy and enjoyable access to cartoons. The site allows users to explore various cartoons, filter them by seasons and episodes, and play them directly on the site.
-🌟 Features
+CartoonJoy is a child-friendly website designed for easy and enjoyable access to
+cartoons. The site allows users to explore various cartoons, filter them by
+seasons and episodes, and play them directly on the site. 🌟 Features
 
     Child-Friendly Design: The website is designed with a vibrant and engaging interface to appeal to children.
     Responsive Layout: Fully responsive, ensuring a seamless experience on both desktop and mobile devices.
     Cartoon Filtering: Users can easily filter cartoons by seasons and episodes.
     Video Playback: Integrated video player for smooth playback of cartoon episodes.
     Custom Navigation: Easy-to-use, animated navigation panel optimized for small screens.
 
-🚀 Getting Started
-Prerequisites
+🚀 Getting Started Prerequisites
 
 To run this project locally, ensure you have the following installed:
 
@@ -46,26 +46,30 @@ bash
 
 Deployment
 
-You can deploy this project using Vercel, Netlify, or any static site hosting service.
-📹 Video Hosting Options
+You can deploy this project using Vercel, Netlify, or any static site hosting
+service. 📹 Video Hosting Options
 
-To ensure the best experience for users, especially on mobile devices, consider the following video hosting options:
+To ensure the best experience for users, especially on mobile devices, consider
+the following video hosting options:
 
     Vimeo: Upload your videos to YouTube or Vimeo and embed them on the site.
 
 📚 Usage
 
-The website is designed to be intuitive for children. Navigation is simple, with large buttons and clear labels. Videos are organized by cartoons, seasons, and episodes, making it easy for children to find their favorite shows.
-🎨 Design
+The website is designed to be intuitive for children. Navigation is simple, with
+large buttons and clear labels. Videos are organized by cartoons, seasons, and
+episodes, making it easy for children to find their favorite shows. 🎨 Design
 
-The site utilizes Tailwind CSS for a modern and clean design. The color scheme is bright and engaging, with animations that bring the interface to life.
-🛠️ Development
+The site utilizes Tailwind CSS for a modern and clean design. The color scheme
+is bright and engaging, with animations that bring the interface to life. 🛠️
+Development
 
-The project is built using Vite for fast builds and hot module replacement. Vue.js is used for component-based architecture, ensuring reusability and scalability.
-👨‍💻 Contributing
+The project is built using Vite for fast builds and hot module replacement.
+Vue.js is used for component-based architecture, ensuring reusability and
+scalability. 👨‍💻 Contributing
 
-Contributions are welcome! Please fork the repository and submit a pull request with your changes.
-Steps to Contribute:
+Contributions are welcome! Please fork the repository and submit a pull request
+with your changes. Steps to Contribute:
 
     Fork the repository.
     Create a new branch (git checkout -b feature-branch).
@@ -76,4 +80,5 @@ Steps to Contribute:
 
 📝 License
 
-This project is licensed under the MIT License. See the LICENSE file for more details.
+This project is licensed under the MIT License. See the LICENSE file for more
+details.

automation/bump-version.js

@@ -12,23 +12,25 @@ dotenv.config({ path: envFilePath });
 const currentVersion = process.env.VITE_APP_VERSION || '1.0.0';
 
 const incrementVersion = (version) => {
-    const [major, minor, patch] = version.split('.').map(num => parseInt(num, 10));
-    return `${major}.${minor}.${patch + 1}`;
+  const [major, minor, patch] = version
+    .split('.')
+    .map((num) => parseInt(num, 10));
+  return `${major}.${minor}.${patch + 1}`;
 };
 
 const newVersion = incrementVersion(currentVersion);
 
 const envVariables = fs.readFileSync(envFilePath, 'utf-8').split('\n');
-const newEnvVariables = envVariables.map(line => {
-    if (line.startsWith('VITE_APP_VERSION=')) {
-        return `VITE_APP_VERSION=${newVersion}`;
-    }
-    return line;
+const newEnvVariables = envVariables.map((line) => {
+  if (line.startsWith('VITE_APP_VERSION=')) {
+    return `VITE_APP_VERSION=${newVersion}`;
+  }
+  return line;
 });
 
-if (!newEnvVariables.some(line => line.startsWith('VITE_APP_VERSION='))) {
-    newEnvVariables.push(`VITE_APP_VERSION=${newVersion}`);
+if (!newEnvVariables.some((line) => line.startsWith('VITE_APP_VERSION='))) {
+  newEnvVariables.push(`VITE_APP_VERSION=${newVersion}`);
 }
 
 fs.writeFileSync(envFilePath, newEnvVariables.join('\n'), 'utf-8');
-console.log(`Version bumped to ${newVersion}`);
+console.log(`Version bumped to ${newVersion}`);

index.html

@@ -10,4 +10,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/App.vue

@@ -10,7 +10,10 @@ import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-watch(() => route.meta.title, (newTitle) => {
-  document.title = newTitle || 'Your Default Title';
-});
-</script>
+watch(
+  () => route.meta.title,
+  (newTitle) => {
+    document.title = newTitle || 'Your Default Title';
+  }
+);
+</script>

src/assets/tailwindcss/index.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/components/about/AboutComponent.vue

@@ -1,27 +1,30 @@
 <script setup>
 import { ref } from 'vue';
 
-const mission = ref('На CartoonJoy ми створюємо та пропонуємо найкращий контент для дітей, щоб забезпечити розваги та навчання в цікавій і захоплюючій формі. Наші мультфільми та шоу розроблені, щоб надихати уяву та підтримувати розвиток дітей.');
+const mission = ref(
+  'На CartoonJoy ми створюємо та пропонуємо найкращий контент для дітей, щоб забезпечити розваги та навчання в цікавій і захоплюючій формі. Наші мультфільми та шоу розроблені, щоб надихати уяву та підтримувати розвиток дітей.'
+);
 
 const teamMembers = ref([
   {
     id: 1,
-    image: 'https://media.licdn.com/dms/image/v2/D4E03AQFGRKoyoucwFw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1682867375530?e=1729123200&v=beta&t=BxKym7Wnko7-2pXsrPgcG_16qiVLwof0zMhI_DCAefU',
+    image:
+      'https://media.licdn.com/dms/image/v2/D4E03AQFGRKoyoucwFw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1682867375530?e=1729123200&v=beta&t=BxKym7Wnko7-2pXsrPgcG_16qiVLwof0zMhI_DCAefU',
     name: 'Микола Мудь',
-    role: 'Front-end Developer Vue'
+    role: 'Front-end Developer Vue',
   },
   {
     id: 2,
     image: 'https://via.placeholder.com/150',
-    name: 'Ім\'я Прізвище 2',
-    role: 'Роль у команді 2'
+    name: "Ім'я Прізвище 2",
+    role: 'Роль у команді 2',
   },
   {
     id: 3,
     image: 'https://via.placeholder.com/150',
-    name: 'Ім\'я Прізвище 3',
-    role: 'Роль у команді 3'
-  }
+    name: "Ім'я Прізвище 3",
+    role: 'Роль у команді 3',
+  },
 ]);
 </script>
 
@@ -45,10 +48,22 @@ const teamMembers = ref([
         <section>
           <h2 class="text-3xl font-semibold mb-4">Наша команда</h2>
           <div class="flex flex-wrap -mx-4">
-            <div v-for="member in teamMembers" :key="member.id" class="w-full md:w-1/3 px-4 mb-8">
-              <div class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700">
-                <img :src="member.image" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-gray-600">
-                <h3 class="text-xl font-semibold mb-2 text-center">{{ member.name }}</h3>
+            <div
+              v-for="member in teamMembers"
+              :key="member.id"
+              class="w-full md:w-1/3 px-4 mb-8"
+            >
+              <div
+                class="bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-700"
+              >
+                <img
+                  :src="member.image"
+                  alt="Team Member"
+                  class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-gray-600"
+                />
+                <h3 class="text-xl font-semibold mb-2 text-center">
+                  {{ member.name }}
+                </h3>
                 <p class="text-gray-400 text-center">{{ member.role }}</p>
               </div>
             </div>
@@ -57,4 +72,4 @@ const teamMembers = ref([
       </div>
     </div>
   </div>
-</template>
+</template>