├── public
    ├── logo.png
    ├── preview.jpg
    ├── 404.html
    └── checkDb.js
├── src
    ├── assets
    │   ├── background.png
    │   ├── main.css
    │   └── base.css
    ├── api_client
    │   └── servicesApi.js
    ├── filters
    │   ├── localDateFilter.js
    │   └── servicesFilter.js
    ├── stores
    │   ├── servicesCounterStore.js
    │   ├── searchStore.js
    │   ├── ranksStore.js
    │   ├── currentLangStore.js
    │   ├── tagsStore.js
    │   ├── servicesStore.js
    │   ├── orderStore.js
    │   └── rootFilterStore.js
    ├── views
    │   ├── ServiceView.vue
    │   └── HomeView.vue
    ├── App.vue
    ├── main.js
    ├── components
    │   ├── settings
    │   │   ├── components
    │   │   │   ├── DarkModeSwitcher.vue
    │   │   │   ├── LocaleSwitcher.vue
    │   │   │   └── ServicesOrderSelector.vue
    │   │   └── Settings.vue
    │   ├── TagList.vue
    │   ├── ServiceRating.vue
    │   ├── Loader.vue
    │   ├── Footer.vue
    │   ├── search
    │   │   ├── Search.vue
    │   │   ├── FilterComponent.vue
    │   │   └── AutoComplete.vue
    │   ├── ServicesList.vue
    │   ├── StarFilter.vue
    │   ├── service_card
    │   │   ├── components
    │   │   │   └── Sharing.vue
    │   │   ├── ServiceItem.vue
    │   │   └── ServiceListItem.vue
    │   └── Header.vue
    ├── utils
    │   └── utils.js
    ├── router
    │   └── index.js
    ├── directives
    │   └── clickOutsideDirective.js
    └── i18n
    │   └── index.js
├── jsconfig.json
├── .gitignore
├── vite.config.js
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── сlosed-or-inoperative-tool-report.md
    │   └── feature_request.md
    └── workflows
    │   └── static.yml
├── .eslintrc.cjs
├── package.json
├── index.html
└── README.md


/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awclub/catalog/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awclub/catalog/HEAD/public/preview.jpg


--------------------------------------------------------------------------------
/src/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awclub/catalog/HEAD/src/assets/background.png


--------------------------------------------------------------------------------
/src/api_client/servicesApi.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |  
3 | export function GetServices (url) {
4 | 	return axios.get(url)
5 | }


--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 | <script>
2 |     sessionStorage.redirect = location.href;
3 | </script>
4 | <meta http-equiv="refresh" content="0;URL='/catalog'">


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./src/*"]
5 |     }
6 |   },
7 |   "exclude": ["node_modules", "dist"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/filters/localDateFilter.js:
--------------------------------------------------------------------------------
1 | export function localDateFilter(inputDate, currentLanguage) {
2 | 	let date = new Date(inputDate);
3 | 	let options = { year: 'numeric', month: 'long', day: 'numeric' };
4 | 
5 | 	return date.toLocaleDateString(currentLanguage, options);
6 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | .vite
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/stores/servicesCounterStore.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useServicesCounterStore = defineStore('servicesCounterStore', {
 4 | 	state: () => ({
 5 | 		count: 0
 6 | 	}),
 7 | 	getters: {
 8 | 		getCount(state) {
 9 | 			return state.count;
10 | 		}
11 | 	},
12 | 	actions: {
13 | 		setCount(value) {
14 | 			this.count = value
15 | 		}
16 | 	}
17 | });
18 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { URL, fileURLToPath } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 | 	plugins: [
 9 | 		vue(),
10 | 	],
11 | 	resolve: {
12 | 		alias: {
13 | 			'@': fileURLToPath(new URL('./src', import.meta.url))
14 | 		}
15 | 	},
16 | 	base: '/catalog/',
17 | })
18 | 


--------------------------------------------------------------------------------
/src/views/ServiceView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import ServiceItem from '../components/service_card/ServiceItem.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 | 	<main class="main-item">
 7 | 		<ServiceItem :item-id="$route.params.id" />
 8 | 	</main>
 9 | </template>
10 | 
11 | <style scoped>
12 | .main-item {
13 |   max-width: 1200px;
14 |   margin: 0 auto;
15 |   flex: 1 0 auto;
16 |   width: 100%;
17 | }
18 | </style>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import Footer from './components/Footer.vue'
 3 | import Header from './components/Header.vue'
 4 | import { RouterView } from 'vue-router'
 5 | </script>
 6 | 
 7 | <template>
 8 | 	<Header />
 9 | 
10 | 	<RouterView />
11 | 
12 | 	<Footer />
13 | </template>
14 | 
15 | <style>
16 | #app {
17 | 	display: flex;
18 | 	flex-direction: column;
19 | 	min-height: 100vh;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/сlosed-or-inoperative-tool-report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Сlosed or inoperative tool report
 3 | about: Create a report to help us improve our catalog / Сообщить о закрытом или неработающем
 4 |   сервисе из каталога
 5 | title: ''
 6 | labels: closed tool, inoperative tool
 7 | assignees: ''
 8 | 
 9 | ---
10 | 
11 | **Name and URL of the tool**
12 | **Description**
13 | A clear and concise description of what the bug is.
14 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | a {
 4 |   color: var(--link-color);
 5 |   text-decoration: none;
 6 |   transition: color 0.3s;
 7 | }
 8 | 
 9 | a:hover {
10 |   text-decoration: underline;
11 | }
12 | 
13 | .text-input {
14 |   font-size: 1em;
15 |   box-sizing: border-box;
16 |   padding: 5px 10px;
17 |   background-color: rgb(241, 235, 244);
18 |   border: 1px solid #ddd;
19 |   border-radius: 8px;
20 | }
21 | 
22 | .text-input:focus {
23 |   outline: none;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import './assets/main.css'
 2 | 
 3 | import { createApp } from 'vue'
 4 | import { createPinia } from 'pinia'
 5 | 
 6 | import App from './App.vue'
 7 | import { clickOutsideDirective } from "./directives/clickOutsideDirective.js";
 8 | import i18n from './i18n/index.js'
 9 | import router from './router/index.js'
10 | 
11 | const app = createApp(App)
12 | 
13 | app.use(createPinia())
14 | app.use(i18n)
15 | app.use(router)
16 | app.directive('clickOutside', clickOutsideDirective);
17 | 
18 | app.mount('#app')
19 | 


--------------------------------------------------------------------------------
/src/components/settings/components/DarkModeSwitcher.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useDark, useToggle } from "@vueuse/core";
 3 | 
 4 | const isDark = useDark();
 5 | const toggleDark = useToggle(isDark);
 6 | </script>
 7 | 
 8 | <template>
 9 | 	<button
10 | 		v-if="isDark"
11 | 		@click="toggleDark()"
12 | 	>
13 | 		{{ $t('themeLight') }}
14 | 	</button>
15 | 	<button
16 | 		v-else-if="!isDark"
17 | 		@click="toggleDark()"
18 | 	>
19 | 		{{ $t('themeDark') }}
20 | 	</button>
21 | </template>
22 | 
23 | <style scoped>
24 | 
25 | </style>


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	extends: [
 3 | 		'plugin:vue/vue3-recommended',
 4 | 		"stylelint",
 5 | 	],
 6 | 	rules: {
 7 | 		'vue/multi-word-component-names': 'off',
 8 | 		'vue/require-default-prop': 'off',
 9 | 		"indent": ["error", "tab"],
10 | 		"vue/html-indent": ["error", "tab"],
11 | 		"vue/script-indent": ["error", "tab"],
12 | 		"sort-imports": "off",
13 | 	},
14 | 	env: {
15 | 		"browser": true,
16 | 		"node": true
17 | 	},
18 | 	parserOptions: {
19 | 		"ecmaVersion": 15
20 | 	},
21 | 	ignorePatterns: [
22 | 		'checkDb.js'
23 | 	]
24 | }


--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
 1 | export const isOrDefault = (value, predicate, defaultValue, clb) => {
 2 | 	if (predicate(value)) return value;
 3 | 
 4 | 	clb && clb();
 5 |  
 6 | 	return defaultValue;
 7 | }
 8 | 
 9 | export const oneOf = (...args) => value => args.includes(value);
10 | 
11 | export const not = predicate => value => !predicate(value);
12 | 
13 | export const numberOrNull = value => {
14 | 	return isNaN(value) ? null : value;
15 | }
16 | 
17 | export const parseJson = json => {
18 | 	try {
19 | 		return JSON.parse(json);
20 | 	} catch (_) {
21 | 		return json;
22 | 	}
23 | }


--------------------------------------------------------------------------------
/src/components/settings/components/LocaleSwitcher.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useCurrentLangStore } from "../../../stores/currentLangStore.js";
 3 | 
 4 | const currentLangStore = useCurrentLangStore();
 5 | 
 6 | </script>
 7 | 
 8 | <template>
 9 | 	<button
10 | 		v-if="$i18n.locale === 'ru'"
11 | 		class="lang-switch"
12 | 		@click="() => currentLangStore.setCurrentLang('en')"
13 | 	>
14 | 		🌐 English
15 | 	</button>
16 | 	<button
17 | 		v-else-if="$i18n.locale === 'en'"
18 | 		class="lang-switch"
19 | 		@click="() => currentLangStore.setCurrentLang('ru')"
20 | 	>
21 | 		🌐 Русский
22 | 	</button>
23 | </template>
24 | 
25 | <style scoped>
26 | 
27 | </style>


--------------------------------------------------------------------------------
/src/stores/searchStore.js:
--------------------------------------------------------------------------------
 1 | import { useRootFilterStore } from "./rootFilterStore.js";
 2 | import { defineStore } from "pinia";
 3 | import { computed, ref } from "vue";
 4 | 
 5 | export const useSearchStore = defineStore('searchStore', () => {
 6 | 	const rootFilterStore = useRootFilterStore();
 7 | 
 8 | 	// state
 9 | 	const searchText = ref(rootFilterStore.text);
10 | 
11 | 	// getters
12 | 	const getSearchText = computed(() => searchText.value);
13 | 
14 | 	//actions
15 | 	function setSearchText(text) {
16 | 		searchText.value = text;
17 | 		rootFilterStore.setSearchText(text);
18 | 	}
19 | 
20 | 	return {
21 | 		getSearchText,
22 | 		setSearchText
23 | 	};
24 | });


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | import ServiceView from '../views/ServiceView.vue'
 4 | 
 5 | const router = createRouter({
 6 | 	history: createWebHistory(import.meta.env.BASE_URL),
 7 | 	routes: [
 8 | 		{
 9 | 			path: '/',
10 | 			name: 'home',
11 | 			component: HomeView,
12 | 			beforeEnter: (to, from, next) => {
13 | 				if (to.query.id) {
14 | 					next({ name: 'item', params: { id: to.query.id } });
15 | 				} else {
16 | 					next();
17 | 				}
18 | 			}
19 | 		},
20 | 		{
21 | 			path: '/:id',
22 | 			name: 'item',
23 | 			component: ServiceView,
24 | 			props: true
25 | 		}
26 | 	]
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this catalog / Идея для каталога
 4 | title: ''
 5 | labels: feature
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/src/directives/clickOutsideDirective.js:
--------------------------------------------------------------------------------
 1 | export const clickOutsideDirective = {
 2 | 	mounted: (el, binding) => {
 3 | 		// Define a function to handle clicks
 4 | 		el.__clickOutsideHandler__ = (event) => {
 5 | 			// Check if the click was outside the el and its children
 6 | 			if (!(el === event.target || el.contains(event.target))) {
 7 | 				// Call the method provided as the directive's value
 8 | 				binding.value(event);
 9 | 			}
10 | 		};
11 | 		// Attach the click handler to the document
12 | 		document.addEventListener('click', el.__clickOutsideHandler__);
13 | 	},
14 | 	unmounted: (el) => {
15 | 		// Remove the click handler from the document
16 | 		document.removeEventListener('click', el.__clickOutsideHandler__);
17 | 		el.__clickOutsideHandler__ = null;
18 | 	}
19 | }


--------------------------------------------------------------------------------
/src/stores/ranksStore.js:
--------------------------------------------------------------------------------
 1 | import { useRootFilterStore } from "./rootFilterStore.js";
 2 | import { defineStore } from "pinia";
 3 | import { computed, ref } from "vue";
 4 | 
 5 | export const useRanksStore = defineStore('ranksStore', () => {
 6 | 	const rootFilterStore = useRootFilterStore();
 7 | 
 8 | 	// state
 9 | 	const selectedRank = ref(rootFilterStore.rank);
10 | 
11 | 	// getters
12 | 	const getSelectedRanks = computed(() => selectedRank.value);
13 | 
14 | 	// actions
15 | 	function setRank(newRank) {
16 | 		selectedRank.value = newRank;
17 | 		rootFilterStore.setRank(newRank);
18 | 	}
19 | 
20 | 	function resetRank() {
21 | 		selectedRank.value = 0;
22 | 		rootFilterStore.setRank(0);
23 | 	}
24 | 
25 | 	return {
26 | 		getSelectedRanks,
27 | 		setRank,
28 | 		resetRank
29 | 	};
30 | });


--------------------------------------------------------------------------------
/src/components/TagList.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | defineProps({
 3 | 	items: Array,
 4 | 	onTagClick: Function
 5 | })
 6 | </script>
 7 | 
 8 | <template>
 9 | 	<div v-if="items && items.length > 0" class="tags">
10 | 		<span
11 | 			v-for="tag in [...items].sort((a, b) => a.localeCompare(b))"
12 | 			:key="tag"
13 | 			class="tag"
14 | 			@click="() => onTagClick(tag)"
15 | 		>{{ tag }}</span>
16 | 	</div>
17 | </template>
18 | 
19 | <style scoped>
20 | .tags {
21 |   display: inline-block;
22 | }
23 | 
24 | .tag {
25 |   display: inline-block;
26 |   background-color: var(--tag-bg-color);
27 |   color: var(--tag-text-color);
28 |   font-size: 1em;
29 |   border-radius: 3px;
30 |   padding: 2px 7px;
31 |   margin: 2px 6px 3px 0;
32 |   cursor: pointer;
33 |   transition: background-color 0.3s, color 0.3s;
34 | }
35 | </style>


--------------------------------------------------------------------------------
/src/components/ServiceRating.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | defineProps({
 3 | 	rank: {
 4 | 		type: Number,
 5 | 		required: true
 6 | 	}
 7 | });
 8 | </script>
 9 | 
10 | <template>
11 | 	<div v-if="rank && rank > 0" class="service-rating">
12 | 		<span v-for="n in rank" :key="n" class="rank-icon filled">★</span>
13 | 		<span v-for="n in (5 - rank)" :key="5-n" class="rank-icon">★</span>
14 | 	</div>
15 | </template>
16 | 
17 | <style scoped>
18 | .service-rating {
19 |   display: flex;
20 |   align-items: center;
21 |   font-size: 1em;
22 | }
23 | 
24 | .rank-icon {
25 |   color: #ffc107;
26 |   margin-right: 2px;
27 | }
28 | 
29 | .rank-icon.filled {
30 |   color: #ffc107;
31 |   -webkit-text-stroke: 1px #ffc107;
32 | }
33 | 
34 | .rank-icon:not(.filled) {
35 |   color: transparent;
36 |   -webkit-text-stroke: 1px #ffc107;
37 | }
38 | </style>


--------------------------------------------------------------------------------
/src/components/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="outer-circle">
 3 | 		<div class="inner-circle"></div>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | .outer-circle {
 9 |     width: 3rem;
10 |     height: 3rem;
11 |     background-color: #1a1b1e;
12 |     margin: auto;
13 |     position: absolute;
14 |     top: 0;
15 |     left: 0;
16 |     right: 0;
17 |     bottom: 0;
18 |     border-radius: 50%;
19 | }
20 | 
21 | .inner-circle {
22 |     border-radius: inherit;
23 |     background-image: conic-gradient(#fff0, rgb(183, 42, 246), rgb(189, 7, 255));
24 |     position: absolute;
25 |     z-index: -1;
26 |     margin: auto;
27 |     top: -0.6rem;
28 |     bottom: -0.6rem;
29 |     left: -0.6rem;
30 |     right: -0.6rem;
31 |     animation: circle-anim 0.6s linear infinite;
32 | }
33 | 
34 | @keyframes circle-anim {
35 |     0% {
36 |         transform: rotate(0deg);
37 |     }
38 |     100% {
39 |         transform: rotate(360deg);
40 |     }
41 | }
42 | </style>


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useRootFilterStore } from "../stores/rootFilterStore.js";
 3 | import FilterComponent from "../components/search/FilterComponent.vue";
 4 | import ServicesList from '../components/ServicesList.vue'
 5 | import i18n from '../i18n/index.js'
 6 | import { onBeforeMount } from "vue";
 7 | import { useRoute } from "vue-router";
 8 | import { watchEffect } from 'vue';
 9 | 
10 | const route = useRoute();
11 | const { t } = i18n.global;
12 | const rootFilterStore = useRootFilterStore();
13 | 
14 | onBeforeMount(() => {
15 | 	rootFilterStore.importFilterState(route.query);
16 | });
17 | 
18 | watchEffect(() => {
19 | 	document.title = t("title");
20 | });
21 | 
22 | </script>
23 | 
24 | <template>
25 | 	<main>
26 | 		<FilterComponent />
27 | 		<ServicesList />
28 | 	</main>
29 | </template>
30 | 
31 | <style scoped>
32 | main {
33 |   max-width: 1200px;
34 |   margin: 0 auto;
35 |   width: 100%;
36 |   flex: 1 0 auto;
37 | }
38 | </style>../stores/searchStore.js


--------------------------------------------------------------------------------
/src/stores/currentLangStore.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from "pinia";
 2 | import i18n from "../i18n/index.js";
 3 | import { ref } from "vue";
 4 | import { useRootFilterStore } from "./rootFilterStore.js";
 5 | 
 6 | export const ALL_LANGS = ['ru', 'uk', 'be', 'en'];
 7 | 
 8 | const defaultLang = (savedLang) => {
 9 | 	// default language is English,
10 | 	const defaultLangTemp = savedLang
11 |     || (['ru', 'uk', 'be'].some(lang => navigator.language.startsWith(lang)) ? 'ru' : 'en');
12 | 
13 | 	i18n.global.locale = defaultLangTemp;
14 | 
15 | 	return defaultLangTemp;
16 | };
17 | 
18 | export const useCurrentLangStore = defineStore('currentLangStore', () => {
19 | 	const rootFilterStore = useRootFilterStore();
20 | 
21 | 	// state
22 | 	const currentLang = ref(defaultLang(rootFilterStore.lang));
23 | 
24 | 	// actions
25 | 	function setCurrentLang(lang) {
26 | 		currentLang.value = lang;
27 | 		i18n.global.locale = lang;
28 | 		rootFilterStore.setLang(lang);
29 | 	}
30 | 
31 | 	return {
32 | 		setCurrentLang,
33 | 	}
34 | });


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | name: Build To Deployment Branch
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: ["main"]
 6 | 
 7 |   workflow_dispatch:
 8 | 
 9 | permissions:
10 |   contents: read
11 |   pages: write
12 |   id-token: write
13 | 
14 | concurrency:
15 |   group: "pages"
16 |   cancel-in-progress: false
17 | 
18 | jobs:
19 |   build-and-deploy:
20 |     runs-on: ubuntu-latest
21 |     steps:
22 |       - name: Checkout
23 |         uses: actions/checkout@v4
24 | 
25 |       - name: Setup Node.js
26 |         uses: actions/setup-node@v4
27 |         with:
28 |           node-version: '18'
29 | 
30 |       - name: Install dependencies
31 |         run: npm install
32 | 
33 |       - name: Lint
34 |         run: npm run lint
35 | 
36 |       - name: Build
37 |         run: npm run build
38 | 
39 |       - name: Check db.json
40 |         run: npm run check-db
41 | 
42 |       - name: Deploy to GitHub Pages Repo
43 |         uses: JamesIves/github-pages-deploy-action@4.1.5
44 |         with:
45 |           token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
46 |           branch: gh-pages
47 |           folder: dist


--------------------------------------------------------------------------------
/src/stores/tagsStore.js:
--------------------------------------------------------------------------------
 1 | import { computed, ref } from "vue";
 2 | import { defineStore } from "pinia";
 3 | import { useRootFilterStore } from "./rootFilterStore.js";
 4 | 
 5 | export const useTagsStore = defineStore('tagsStore', () => {
 6 | 	const rootFilterStore = useRootFilterStore();
 7 | 
 8 | 	// state
 9 | 	const selectedTags = ref(rootFilterStore.tags);
10 | 
11 | 	// getters
12 | 	const getSelectedTags = computed(() => selectedTags.value);
13 | 
14 | 	// actions
15 | 	function selectTag(tagName) {
16 | 		if (!selectedTags.value.includes(tagName)) {
17 | 			selectedTags.value = [...selectedTags.value, tagName];
18 | 			rootFilterStore.setTags(selectedTags.value);
19 | 		}
20 | 	}
21 | 
22 | 	function unSelectTag(tagName) {
23 | 		selectedTags.value = selectedTags.value.filter(tag => tag !== tagName);
24 | 		rootFilterStore.setTags(selectedTags.value);
25 | 	}
26 | 
27 | 	function resetTags() {
28 | 		selectedTags.value = [];
29 | 		rootFilterStore.setTags(selectedTags.value);
30 | 	}
31 | 
32 | 	return {
33 | 		getSelectedTags,
34 | 		selectTag,
35 | 		unSelectTag,
36 | 		resetTags
37 | 	};
38 | 
39 | });
40 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<footer>
 3 | 		<div>
 4 | 			<a
 5 | 				id="podcast-link"
 6 | 				href="https://itbeard.com/aia"
 7 | 				target="_blank"
 8 | 			>AIA Podcast</a>
 9 | 			<a
10 | 				id="podcast-chat-link"
11 | 				href="https://t.me/aiapodcast"
12 | 				target="_blank"
13 | 			>{{ $t('podcastChatLinkText') }}</a>
14 | 			<a
15 | 				href="https://aw.club"
16 | 				target="_blank"
17 | 			>AW Club</a>
18 | 			<a
19 | 				id="github-code-link"
20 | 				href="https://github.com/awclub/catalog"
21 | 				target="_blank"
22 | 			>{{ $t('githubCodeLinkText') }}</a>
23 | 		</div>
24 | 	</footer>
25 | </template>
26 | 
27 | <style scoped>
28 | footer {
29 |     padding: 10px;
30 |     text-align: center;
31 |     max-width: 1200px;
32 |     margin: 35px auto 10px;
33 |     flex: 0 0 auto;
34 |     width: 100%;
35 | }
36 | 
37 | footer div {
38 |     background-color: rgb(241, 235, 244);
39 |     border-radius: 10px;
40 |     padding: 5px 10px;
41 | }
42 | 
43 | footer a {
44 |     margin: 0 10px;
45 |     color: #333;
46 |     padding: 5px;
47 |     display: inline-block;
48 | }
49 | 
50 | </style>
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "aiacatalog",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "npm run lint && vite",
 8 |     "build": "npm run lint && vite build",
 9 |     "preview": "npm run lint && vite preview",
10 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
11 |     "format": "prettier --write src/",
12 |     "check-db": "node ./public/checkDb.js"
13 |   },
14 |   "dependencies": {
15 |     "@vueuse/core": "^10.7.1",
16 |     "axios": "^1.6.5",
17 |     "pinia": "^2.1.7",
18 |     "vue": "^3.3.11",
19 |     "vue-i18n": "^9.9.0",
20 |     "vue-router": "^4.2.5",
21 |     "vue3-popper": "^1.5.0"
22 |   },
23 |   "devDependencies": {
24 |     "@babel/eslint-parser": "^7.5.4",
25 |     "@babel/preset-react": "^7.23.3",
26 |     "@rushstack/eslint-patch": "^1.3.3",
27 |     "@vitejs/plugin-vue": "^4.5.2",
28 |     "@vue/eslint-config-prettier": "^8.0.0",
29 |     "eslint": "^8.56.0",
30 |     "eslint-config-stylelint": "^20.0.0",
31 |     "eslint-plugin-vue": "^9.20.1",
32 |     "prettier": "^3.0.3",
33 |     "vite": "^5.0.10"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/public/checkDb.js:
--------------------------------------------------------------------------------
 1 | import data from './db.json' assert { type: 'json' };
 2 | 
 3 | /**
 4 |  * @param services {{id: string, name: string}[]} List of services to check the uniqueness by id field
 5 |  * @returns {{ duplicates: [{ id: string, names: [string]} ]}}
 6 |  */
 7 | function checkUniqueness(services) {
 8 | 	const map = {};
 9 | 
10 | 	for (const service of services) {
11 | 		map[service.id] = [ ...(map[service.id] || []), service.name ];
12 | 	}
13 | 
14 | 	const duplicates = [];
15 | 
16 | 	for (const key of Object.keys(map)) {
17 | 		if (map[key].length > 1) {
18 | 			duplicates.push({
19 | 				id: key,
20 | 				names: map[key].map(name => `"${name}"`),
21 | 			});
22 | 		}
23 | 	}
24 | 
25 | 	return ({ duplicates });
26 | }
27 | 
28 | /**
29 |  * @param result {{ duplicates: [{ id: string, names: [string]} ]}}
30 |  */
31 | function throwDuplicationError(result) {
32 | 	const message = result.duplicates
33 | 		.map((current) => `id: ${current.id} \nnames: ${current.names.join(', ')}`)
34 | 		.join('\n\n');
35 | 
36 | 	throw new Error(`Found duplicates in db.json: \n${message}`);
37 | }
38 | 
39 | /**
40 |  * Main function to check db data.
41 |  */
42 | function checkDb(){
43 | 	const result = checkUniqueness(data);
44 | 
45 | 	if (result.duplicates.length) {
46 | 		throwDuplicationError(result);
47 | 	}
48 | }
49 | 
50 | checkDb();


--------------------------------------------------------------------------------
/src/components/search/Search.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { computed } from "vue";
 3 | import { useSearchStore } from "../../stores/searchStore.js";
 4 | 
 5 | const searchStore = useSearchStore();
 6 | const searchText = computed(() => searchStore.getSearchText);
 7 | 
 8 | const setInput = (e) => {
 9 | 	searchStore.setSearchText(e.target.value);
10 | };
11 | </script>
12 | 
13 | <template>
14 | 	<div class="search-container">
15 | 		<input
16 | 			class="text-input search-box"
17 | 			type="text"
18 | 			:value="searchText"
19 | 			:placeholder="$t('searchPlaceholder')"
20 | 			@input="setInput"
21 | 		>
22 | 		<span
23 | 			v-if="!!searchText.length"
24 | 			class="clear-button"
25 | 			@click="searchStore.setSearchText('')"
26 | 		>&times;</span>
27 | 	</div>
28 | </template>
29 | 
30 | <style scoped>
31 | .search-container {
32 |   position: relative;
33 |   display: inline-block;
34 |   padding: 0;
35 |   width: 320px;
36 | }
37 | 
38 | .search-box {
39 |   width: 100%;
40 |   margin: 10px auto;
41 | }
42 | 
43 | .clear-button {
44 |   position: absolute;
45 |   right: 10px;
46 |   top: 24px;
47 |   transform: translateY(-50%);
48 |   cursor: pointer;
49 |   color: #555;
50 |   font-size: 2em;
51 |   font-weight: bold;
52 | }
53 | 
54 | @media screen and (max-width: 814px) {
55 |   .search-container {
56 |     width: calc(100% - 50px);
57 |     display: block;
58 |   }
59 | }
60 | 
61 | </style>../stores/searchStore.js


--------------------------------------------------------------------------------
/src/i18n/index.js:
--------------------------------------------------------------------------------
 1 | import { KEYWORDS } from "../stores/rootFilterStore.js";
 2 | import { createI18n } from 'vue-i18n';
 3 | 
 4 | const i18n = createI18n({
 5 | 	// default locale
 6 | 	locale: localStorage.getItem(KEYWORDS.LANG),
 7 | 	globalInjection: true,
 8 | 	legacy: true,
 9 | 	// translations
10 | 	messages: {
11 | 		en: {
12 | 			title: "AI tools catalog by AIA Podcast & Anywher Club",
13 | 			header: "AI tools catalog by",
14 | 			searchPlaceholder: "Search by name & description...",
15 | 			mentionedIn: "Mentioned in",
16 | 			githubCodeLinkText: "Code on GitHub",
17 | 			podcastChatLinkText: "Podcast chat",
18 | 			podcastLinkText: "AIA Podcast",
19 | 			searchTagsPlaceholder: "Search by tags...",
20 | 			shareResult: "Copied to clipboard",
21 | 			sortingLegend: "Sorting",
22 | 			sortingByName: "Name",
23 | 			sortingByDate: "Date",
24 | 			themeDark: "Dark Theme",
25 | 			themeLight: "Light Theme",
26 | 		},
27 | 		ru: {
28 | 			title: "Каталог ИИ-сервисов от AIA Podcast & Anywher Club",
29 | 			header: "Каталог ИИ-сервисов от",
30 | 			searchPlaceholder: "Поиск по названию и описанию...",
31 | 			mentionedIn: "Упомянут в",
32 | 			githubCodeLinkText: "Код на GitHub",
33 | 			podcastChatLinkText: "Чат подкаста",
34 | 			podcastLinkText: "AIA Podcast",
35 | 			searchTagsPlaceholder: "Поиск по тегам...",
36 | 			shareResult: "Ссылка скопирована",
37 | 			sortingLegend: "Сортировка",
38 | 			sortingByName: "Имя",
39 | 			sortingByDate: "Дата",
40 | 			themeDark: "Тёмная тема",
41 | 			themeLight: "Светлая тема",
42 | 		},
43 | 	},
44 | });
45 | 
46 | 
47 | export default i18n


--------------------------------------------------------------------------------
/src/components/settings/components/ServicesOrderSelector.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { DIRECTION, useOrderStore } from "../../../stores/orderStore.js";
 3 | import { computed } from "vue";
 4 | 
 5 | const orderStore = useOrderStore();
 6 | 
 7 | const viewSettings = computed(() => orderStore.getOrderViewSettings);
 8 | const orders = computed(() => orderStore.getOrders);
 9 | const selectedOrder = computed(() => orderStore.selectedOrder);
10 | 
11 | </script>
12 | 
13 | <template>
14 | 	<fieldset class="sorting-fieldbox">
15 | 		<legend class="order-legend">
16 | 			{{ $t('sortingLegend') }}
17 | 		</legend>
18 | 		<button
19 | 			v-for="order in orders"
20 | 			:key="order.key"
21 | 			:class="{'hovered': selectedOrder === order.key}"
22 | 			@click="orderStore.toggleOrder(order.key)"
23 | 		>
24 | 			<span>{{ $t(order.textLabelKey) }}</span>
25 | 			<span class="arrow">{{ viewSettings[order.key] === DIRECTION.ASC ? '&#8593;' : '&#8595;' }}</span>
26 | 		</button>
27 | 	</fieldset>
28 | </template>
29 | 
30 | <style scoped>
31 | .order-legend {
32 |   padding-inline-start: 4px;
33 |   padding-inline-end: 4px;
34 | }
35 | 
36 | .arrow {
37 |   margin-left: 4px
38 | }
39 | 
40 | .sorting-fieldbox {
41 |   border-color: #ffffff40;
42 |   border-radius: 5px;
43 |   margin-top: 10px;
44 |   padding-bottom: 0;
45 |   padding-top: 0;
46 | }
47 | 
48 | .sorting-fieldbox button {
49 |   padding: 5px 10px;
50 |   margin: 7px 5px;
51 | }
52 | 
53 | .sorting-fieldbox button:hover,
54 | .sorting-fieldbox button.hovered {
55 |   border-left: 4px solid var(--link-color);
56 |   padding: 5px 7px;
57 | }
58 | 
59 | </style>../stores/orderStore.js


--------------------------------------------------------------------------------
/src/stores/servicesStore.js:
--------------------------------------------------------------------------------
 1 | import { GetServices } from "../api_client/servicesApi.js";
 2 | import { defineStore } from 'pinia';
 3 | 
 4 | export const useServicesStore = defineStore('servicesStore', {
 5 | 	state: () => ({
 6 | 		services: [],
 7 | 		service: {},
 8 | 		tags: [],
 9 | 		selectedRank: 0,
10 | 	}),
11 | 	getters: {
12 | 		getServices(state) {
13 | 			return state.services
14 | 		},
15 | 		getService(state) {
16 | 			return state.service
17 | 		},
18 | 		getTags(state) {
19 | 			return state.tags
20 | 		},
21 | 		getSelectedRank(state) {
22 | 			return state.selectedRank
23 | 		}
24 | 	},
25 | 	actions: {
26 | 		async fetchServices() {
27 | 			const api = await new GetServices(`./db.json?${new Date().getTime()}`)
28 |       
29 | 			const response = api
30 | 			const { data } = response
31 | 
32 | 			this.services = data
33 | 		},
34 | 		async fetchService(id) {
35 | 			const api = await new GetServices(`./db.json?${new Date().getTime()}`)
36 |         
37 | 			const currentId = id
38 | 			const response = api
39 | 			const { data } = response
40 | 
41 | 			const service = data.find(i => i.id.includes(currentId))
42 | 
43 | 			this.service = service
44 | 		},
45 | 		async fetchTags() {
46 | 			const { data } = await new GetServices(`./db.json?${new Date().getTime()}`);
47 | 
48 | 			const uniqueAvailableTags = Object.keys(
49 | 				(data || [])
50 | 					.flatMap(service => service.tags)
51 | 					.reduce((prev, curr) => {
52 | 						prev[curr] = true;
53 | 
54 | 						return prev;
55 | 					}, {})
56 | 			);
57 | 
58 | 			uniqueAvailableTags.sort();
59 | 			this.tags = uniqueAvailableTags;
60 | 		}
61 | 	},
62 | });


--------------------------------------------------------------------------------
/src/components/ServicesList.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { computed, onBeforeMount, ref } from 'vue'
 3 | import Loader from './Loader.vue'
 4 | import ServiceListItem from './service_card/ServiceListItem.vue'
 5 | import { useOrderStore } from "../stores/orderStore.js";
 6 | import { useServicesFilter } from "../filters/servicesFilter.js";
 7 | import { useServicesStore } from '../stores/servicesStore.js';
 8 | 
 9 | const servicesStore = useServicesStore();
10 | const servicesFilter = useServicesFilter();
11 | const orderStore = useOrderStore();
12 | const isServicesLoading = ref(true);
13 | 
14 | const comparator = computed(() => orderStore.getSelectedComparator);
15 | 
16 | onBeforeMount(async () => {
17 | 	await servicesStore.fetchServices();
18 | 	isServicesLoading.value = false;
19 | })
20 | 
21 | const services = computed(() => {
22 | 	const filtered = servicesFilter.applyFilter(servicesStore.getServices);
23 | 	
24 | 	filtered.sort((a, b) => a.name.localeCompare(b.name)); // default sort by Name ASC
25 | 
26 | 	return filtered.sort(comparator.value);
27 | })
28 | </script>
29 | 
30 | <template>
31 | 	<Loader v-if="isServicesLoading" />
32 | 	<div
33 | 		v-else
34 | 		class="services-list"
35 | 	>
36 | 		<ServiceListItem
37 | 			v-for="service in services"
38 | 			:key="service.id"
39 | 			:service-item="service"
40 | 		/>
41 | 	</div>
42 | </template>
43 | 
44 | <style scoped>
45 |   .services-list {
46 |     display: grid;
47 |     grid-template-columns: repeat(3, 1fr);
48 |     grid-template-rows: 1fr;
49 |     grid-column-gap: 20px;
50 |     grid-row-gap: 20px;
51 |     margin: 0 10px;
52 |   }
53 | 
54 |   @media screen and (max-width: 1100px) {
55 |     .services-list {
56 |       grid-template-columns: repeat(2, 1fr);
57 |     }
58 |   }
59 | 
60 |   @media screen and (max-width: 640px) {
61 |     .services-list {
62 |       grid-template-columns: repeat(1, 1fr);
63 |     }
64 |   }
65 | </style>


--------------------------------------------------------------------------------
/src/components/StarFilter.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { useRanksStore } from "../stores/ranksStore.js";
 3 | 
 4 | export default {
 5 | 	props: {
 6 | 		initialRank: {
 7 | 			type: Number,
 8 | 			default: 0,
 9 | 		},
10 | 	},
11 | 	emits: ['update:rank'],
12 | 	data() {
13 | 		return {
14 | 			rank: this.initialRank,
15 | 		};
16 | 	},
17 | 	mounted() {
18 | 		const ranksStore = useRanksStore();
19 | 
20 | 		this.rank = ranksStore.getSelectedRanks;
21 | 	},
22 | 	methods: {
23 | 		setRank(newRank) {
24 | 			this.rank = newRank;
25 | 			this.$emit('update:rank', this.rank);
26 | 		},
27 | 		reset() {
28 | 			this.rank = 0;
29 | 			this.$emit('update:rank', this.rank);
30 | 		},
31 | 	},
32 | };
33 | </script>
34 | 
35 | <template>
36 | 	<div class="star-filter">
37 | 		<span v-for="star in 5" :key="star" class="star" @click="setRank(star)">
38 | 			<i class="icon" :class="{'filled': star <= rank}">★</i>
39 | 		</span>
40 | 		<input
41 | 			v-show="rank > 0"
42 | 			class="reset-button"
43 | 			type="button"
44 | 			title="reset"
45 | 			value="&#8634;"
46 | 			@click="reset"
47 | 		>
48 | 	</div>
49 | </template>
50 | 
51 | <style scoped>
52 | .star-filter {
53 | 	text-align: right;
54 | }
55 | 
56 | .star-filter .star .icon {
57 |   margin-right: 4px;
58 |   cursor: pointer;
59 |   color: #ccc;
60 |   font-style: normal;  
61 |   font-size: 1.3em;
62 | }
63 | 
64 | .star-filter .star .icon.filled {
65 |   margin-right: 4px;
66 |   color: #ffc107;
67 |   -webkit-text-stroke: 1px #ffc107;
68 | }
69 | 
70 | .reset-button {
71 |   font-size: 1em;
72 |   display: inline;
73 |   cursor: pointer;
74 |   border-radius: 50%;
75 |   border: none;
76 |   font-weight: bold;
77 |   background-color: var(--reset-btn-bg-color);
78 |   color: var(--reset-btn-text-color);
79 |   width: 24px;
80 |   height: 24px;
81 | }
82 | 
83 | .reset-button:hover {
84 |   background-color: var(--reset-btn-bg-color-hover);
85 |   color: var(--reset-btn-text-color);
86 |   transition: 0.3s;
87 | }
88 | </style>
89 | ../stores/ranksStore.js


--------------------------------------------------------------------------------
/src/filters/servicesFilter.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from "pinia";
 2 | import i18n from "../i18n/index.js";
 3 | import { useServicesCounterStore } from "../stores/servicesCounterStore.js";
 4 | import { useSearchStore } from "../stores/searchStore.js";
 5 | import { useTagsStore } from "../stores/tagsStore.js";
 6 | import { useRanksStore } from "../stores/ranksStore.js";
 7 | 
 8 | export const useServicesFilter = defineStore('servicesFilter', () => {
 9 | 	const tagsStore = useTagsStore();
10 | 	const searchStore = useSearchStore();
11 | 	const servicesCounterStore = useServicesCounterStore();
12 | 	const ranksStore = useRanksStore();
13 | 
14 | 	const _containsAllTags = (serviceTags, selectedTags = []) => {
15 | 		serviceTags = serviceTags.map(tag => tag.toLowerCase());
16 | 		selectedTags = selectedTags.map(tag => tag.toLowerCase());
17 | 
18 | 		return selectedTags.every(tag => serviceTags.includes(tag));
19 | 	}
20 | 
21 | 	const _isSuitableServiceBySearchTerm = (service, searchTerm, currentLanguage) => {
22 | 		searchTerm = searchTerm.toLowerCase();
23 | 
24 | 		return service.name.toLowerCase().includes(searchTerm) ||
25 |       service.description[currentLanguage].toLowerCase().includes(searchTerm) ||
26 |       service.mentions.some(mention => mention.episodeUrl.toLowerCase().startsWith(searchTerm)) ||
27 |       service.mentions.some(mention => mention.episodeName.toLowerCase().includes(searchTerm)) ||
28 |       service.url.toLowerCase().includes(searchTerm) ||
29 |       service.id.toLowerCase().includes(searchTerm);
30 | 	}
31 | 
32 | 	const applyFilter = (services = []) => {
33 | 		const selectedTags = tagsStore.getSelectedTags;
34 | 		const filtered = services
35 | 			.filter(service => _containsAllTags(service.tags, selectedTags))
36 | 			.filter(service => _isSuitableServiceBySearchTerm(service, searchStore.getSearchText, i18n.global.locale))
37 | 			.filter(service => ranksStore.getSelectedRanks === 0 || service.rank === ranksStore.getSelectedRanks);
38 | 		
39 | 		servicesCounterStore.setCount(filtered.length);
40 | 
41 | 		return filtered;
42 | 	};
43 | 
44 | 	return {
45 | 		applyFilter
46 | 	};
47 | });


--------------------------------------------------------------------------------
/src/components/service_card/components/Sharing.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <script setup>
 3 | import Popper from "vue3-popper";
 4 | import { ref } from "vue";
 5 | 
 6 | const isOpen = ref(false);
 7 | 
 8 | const props = defineProps({
 9 | 	url: String,
10 | 	closeDelay: Number
11 | })
12 | 
13 | const onOpen = () => {
14 | 	isOpen.value = true;
15 | 	setTimeout(() => {
16 | 		isOpen.value = false;
17 | 	}, props.closeDelay);
18 | };
19 | 
20 | const copyToClipboard = (url) => {
21 | 	navigator.clipboard.writeText(url)
22 | 		.then(() => {
23 | 			onOpen()
24 | 		})
25 | 		.catch((e) => {
26 | 			console.error('error occurred while service url is copied', e);
27 | 		});
28 | }
29 | 
30 | </script>
31 | 
32 | <template>
33 | 	<Popper
34 | 		arrow
35 | 		:content="$t('shareResult')"
36 | 		class="popper-customized"
37 | 		:show="isOpen"
38 | 	>
39 | 		<button
40 | 			type="button"
41 | 			class="copy-to-clipboard"
42 | 			title="Copy URL to clipboard"
43 | 			@click="copyToClipboard(url)"
44 | 		>
45 | 			<svg
46 | 				xmlns="http://www.w3.org/2000/svg"
47 | 				width="24"
48 | 				height="24"
49 | 				viewBox="0 0 24 24"
50 | 				fill="none"
51 | 				stroke="currentColor"
52 | 				stroke-width="3"
53 | 				stroke-linecap="round"
54 | 				stroke-linejoin="round"
55 | 			>
56 | 				<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
57 | 				<polyline points="16 6 12 2 8 6" />
58 | 				<line
59 | 					x1="12"
60 | 					x2="12"
61 | 					y1="2"
62 | 					y2="15"
63 | 				/>
64 | 			</svg>
65 | 		</button>
66 | 	</Popper>
67 | </template>
68 | 
69 | <style>
70 | .copy-to-clipboard {
71 |     box-sizing: border-box;
72 |     border-radius: 25%;
73 |     transition: background-color 0.3s, color 0.3s;
74 |     background-color: unset;
75 |     margin: 0;
76 |     padding: 0;
77 |     border: none;
78 |     cursor: pointer;
79 | }
80 | 
81 | .copy-to-clipboard svg {
82 |     height: 18px;
83 |     transition: 0.3s;
84 |     color: var(--copy-to-clipboard-btn-color);
85 | }
86 | 
87 | .copy-to-clipboard:hover svg {
88 |     color: var(--copy-to-clipboard-btn-color-hover);
89 | }
90 | 
91 | .popper-customized .popper {
92 |     min-width: 160px;
93 |     text-align: center;
94 | }
95 | </style>


--------------------------------------------------------------------------------
/src/components/settings/Settings.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import DarkModeSwitcher from "./components/DarkModeSwitcher.vue";
 3 | import LocaleChanger from "./components/LocaleSwitcher.vue";
 4 | import ServicesOrderSelector from "./components/ServicesOrderSelector.vue";
 5 | </script>
 6 | 
 7 | <template>
 8 | 	<div class="settings-menu">
 9 | 		<button id="settings-button">
10 | 			<span class="material-symbols-outlined">settings</span>
11 | 		</button>
12 | 		<div class="settings-content">
13 | 			<LocaleChanger />
14 | 			<DarkModeSwitcher />
15 | 			<ServicesOrderSelector />
16 | 		</div>
17 | 	</div>
18 | </template>
19 | 
20 | <style>
21 | 
22 | .settings-menu {
23 |   position: relative;
24 |   display: inline-block;
25 | }
26 | 
27 | .settings-menu:hover .settings-content {
28 |   display: block;
29 |   animation: fadeIn 0.3s;
30 | }
31 | 
32 | #settings-button {
33 |   background: none;
34 |   border: none;
35 |   cursor: pointer;
36 |   font-size: 24px;
37 |   color: var(--text-color);
38 |   transition: background-color 0.3s, color 0.3s;
39 |   width: 150px;
40 |   text-align: right;
41 | }
42 | 
43 | .settings-content {
44 |   display: none;
45 |   position: absolute;
46 |   background-color: var(--button-bg-color);
47 |   min-width: 170px;
48 |   font-weight: bold;
49 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
50 |   z-index: 1;
51 |   right: 0;
52 |   border-radius: 5px;
53 |   padding: 10px;
54 |   top: 100%;
55 |   transition: all 0.3s ease-in-out;
56 | }
57 | 
58 | .settings-content button {
59 |   color: var(--button-text-color);
60 |   background-color: var(--button-bg-color);
61 |   padding: 12px 16px;
62 |   text-decoration: none;
63 |   display: block;
64 |   border: none;
65 |   text-align: left;
66 |   width: 100%;
67 |   border-radius: 5px;
68 |   transition: background-color 0.3s;
69 |   font-size: 1em;
70 |   cursor: pointer;
71 | }
72 | 
73 | .settings-content button:hover {
74 |   border-left: 4px solid var(--link-color);
75 | }
76 | 
77 | @media screen and (max-width: 814px) {
78 | 
79 |   .settings-menu {
80 |     position: absolute;
81 |     display: inline-block;
82 |     top: 3px;
83 |     right: 3px;
84 |   }
85 | 
86 |   #settings-button {
87 |     width: 80px;
88 |   }
89 | 
90 |   .selected-tags-box {
91 |     margin-left: 0px !important;
92 |   }
93 | }
94 | 
95 | </style>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" prefix="og: http://ogp.me/ns#">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 	<link rel="icon" href="logo.png">
 8 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 | 	<meta property="og:site_name" content="awclub.github.io/catalog">
10 | 	<meta property="og:title" content="AI tools directory by AIA Podcast & Anywhere Club">
11 | 	<meta property="og:description"
12 | 		content="Directory of quality links to AI tools, models, and AI services that have been discussed in episodes of the AIA Podcast">
13 | 	<meta property="og:image" content="src/assets/preview.jpg">
14 | 	<meta property="og:image:width" content="1200">
15 | 	<meta property="og:image:height" content="630">
16 | 	<meta property="og:url" content="https://awclub.github.io/catalog/">
17 | 	<meta property="og:type" content="website">
18 | 	<meta name="twitter:card" content="summary_large_image" />
19 | 	<meta name="twitter:image" content="preview.jpg" />
20 | 	<title id="title">AI tools catalog by AIA Podcast</title>
21 | 	<link rel="preload" href="https://fonts.googleapis.com">
22 | 	<link rel="preload" href="https://fonts.gstatic.com" crossorigin>
23 | 	<link rel="preload"
24 | 		href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap"
25 | 		as="style" onload="this.onload=null;this.rel='stylesheet'">
26 | 	<link rel="preload"
27 | 		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
28 | 		as="style" onload="this.onload=null;this.rel='stylesheet'">
29 | 	<noscript>
30 | 		<link
31 | 			href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap"
32 | 			rel="stylesheet">
33 | 		<link
34 | 			href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
35 | 			rel="stylesheet">
36 | 	</noscript>
37 | 
38 | 	<!-- Google tag (gtag.js) -->
39 | 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-55EPMSTZRW"></script>
40 | 	<script>
41 | 		window.dataLayer = window.dataLayer || [];
42 | 		function gtag() { dataLayer.push(arguments); }
43 | 		gtag('js', new Date());
44 | 
45 | 		gtag('config', 'G-55EPMSTZRW');
46 | 	</script>
47 | 
48 | 	<!-- 404 Github Pages fix -->
49 | 	<script>
50 | 		(function(){
51 | 		  var redirect = sessionStorage.redirect;
52 | 		  delete sessionStorage.redirect;
53 | 		  if (redirect && redirect != location.href) {
54 | 			history.replaceState(null, null, redirect);
55 | 		  }
56 | 		})();
57 | 	</script>
58 | </head>
59 | 
60 | <body>
61 | 	<div id="app"></div>
62 | 	<script type="module" src="/src/main.js"></script>
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --background-color: #fff;
 4 |   --text-color: #333;
 5 |   --link-color: #1a73e8;
 6 |   --header-bg-color: #f1ebf4;
 7 |   --service-item-bg-color: rgba(241, 235, 244, 0.8);
 8 |   --service-item-border-color: #ddd;
 9 |   --button-bg-color: #e2e2e2;
10 |   --button-text-color: #333;
11 |   --tag-bg-color: #9c94d3;
12 |   --tag-text-color: #fff;
13 |   --aw-club-color: #7e34bb;
14 |   --autocomplete-item-text-color: #e1e1e1;
15 |   --autocomplete-item-bg-color: #9c94d3;
16 |   --autocomplete-item-text-color-hover: #fff;
17 |   --autocomplete-item-bg-color-hover: #524980;
18 |   --autocomplete-item-text-color-active: #e1e1e1;
19 |   --autocomplete-item-bg-color-active: #423465;
20 |   --reset-btn-bg-color: rgba(102, 50, 136, 0.7);
21 |   --reset-btn-bg-color-hover: rgba(102, 50, 136, 0.9);
22 |   --reset-btn-text-color: #f3e7e7;
23 |   --copy-to-clipboard-btn-color: #a7a7a7;
24 |   --copy-to-clipboard-btn-color-hover: #404040;
25 |   --popper-theme-background-color: #333333;
26 |   --popper-theme-background-color-hover: #333333;
27 |   --popper-theme-text-color: #ffffff;
28 |   --popper-theme-border-width: 0px;
29 |   --popper-theme-border-style: solid;
30 |   --popper-theme-border-radius: 6px;
31 |   --popper-theme-padding: 8px 0px;
32 |   --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
33 |   }
34 | 
35 |   :root.dark {
36 |     --background-color: #1a1b1e;
37 |     --text-color: #f5f5f5;
38 |     --link-color: #4a90e2;
39 |     --header-bg-color: #26272b;
40 |     --service-item-bg-color: rgba(47, 48, 53, 0.8);
41 |     --service-item-border-color: #ddd2;
42 |     --button-bg-color: #3b3c40;
43 |     --button-text-color: #f5f5f5;
44 |     --tag-bg-color: #7b769e;
45 |     --tag-text-color: #e1e1e1;
46 |     --aw-club-color: #a449ee;
47 |     --autocomplete-item-text-color: #e1e1e1;
48 |     --autocomplete-item-bg-color: #6d609d;
49 |     --autocomplete-item-text-color-hover: #fff;
50 |     --autocomplete-item-bg-color-hover: #524980;
51 |     --autocomplete-item-text-color-active: #e1e1e1;
52 |     --autocomplete-item-bg-color-active: #423465;
53 |     --reset-btn-bg-color: rgba(158, 98, 208, 0.7);
54 |     --reset-btn-bg-color-hover: rgba(158, 98, 208, 0.9);
55 |     --reset-btn-text-color: #d2d2d2;
56 |     --copy-to-clipboard-btn-color: #6b6a6a;
57 |     --copy-to-clipboard-btn-color-hover: #d2d2d2;
58 |   }
59 | 
60 | *,
61 | *::before,
62 | *::after {
63 |   box-sizing: border-box;
64 |   margin: 0;
65 | }
66 | 
67 | strong {
68 |   font-weight: bolder;
69 | }
70 | 
71 | body {
72 |   min-height: 100vh;
73 |   color: var(--text-color);
74 |   background: var(--background-color);
75 |   transition:
76 |     color 0.5s,
77 |     background-color 0.5s;
78 |   font-family: 'Roboto', Arial, sans-serif;
79 |   font-weight: normal;
80 |   text-rendering: optimizeLegibility;
81 |   -webkit-font-smoothing: antialiased;
82 |   -moz-osx-font-smoothing: grayscale;
83 |   margin: 0;
84 |   background-image: url('./background.png');
85 |   background-size: cover;
86 |   background-attachment: fixed;
87 |   background-position: center;
88 |   transition: background-color 0.3s, color 0.3s;
89 | }
90 | 


--------------------------------------------------------------------------------
/src/stores/orderStore.js:
--------------------------------------------------------------------------------
  1 | import { computed, ref } from "vue";
  2 | import { defineStore } from "pinia";
  3 | import { useRootFilterStore } from "./rootFilterStore.js";
  4 | 
  5 | export const DIRECTION = {
  6 | 	ASC: 'ASC',
  7 | 	DESC: 'DESC'
  8 | };
  9 | 
 10 | // Comparator should sort the items by ASC always. DESC will be applied in runtime.
 11 | const ORDERS = [
 12 | 	{
 13 | 		key: 'name',
 14 | 		textLabelKey: 'sortingByName',
 15 | 		comparator: (first, second) => first.name.localeCompare(second.name)
 16 | 	},
 17 | 	{
 18 | 		key: 'date',
 19 | 		textLabelKey: 'sortingByDate',
 20 | 		comparator: (first, second) => first.date.localeCompare(second.date)
 21 | 	}
 22 | ];
 23 | 
 24 | export const ALL_ORDERS = ORDERS.flatMap(
 25 | 	order => Object.values(DIRECTION)
 26 | 		.map((direction) => (`${direction}-${order.key}`))
 27 | );
 28 | 
 29 | const DEFAULT_ORDER = [ 'date', DIRECTION.DESC ];
 30 | 
 31 | const _parseSavedState = (state) => {
 32 | 	if (!state) {
 33 | 		return DEFAULT_ORDER;
 34 | 	}
 35 | 
 36 | 	const parts = state.split('-');
 37 | 
 38 | 	if (parts.length !== 2) {
 39 | 		return DEFAULT_ORDER;
 40 | 	}
 41 | 
 42 | 	const direction = (DIRECTION.DESC.toLowerCase() === parts[1].toLowerCase()) ? DIRECTION.DESC : DIRECTION.ASC;
 43 | 
 44 | 	return [ parts[0], direction ];
 45 | };
 46 | 
 47 | const _buildInitialViewSettings = (savedState) => {
 48 | 	const defaultSettings = ORDERS.reduce((obj, order) => ({
 49 | 		...obj,
 50 | 		[order.key]: DIRECTION.ASC
 51 | 	}), {});
 52 | 	const [ field, direction ] = _parseSavedState(savedState);
 53 | 
 54 | 	defaultSettings[field] = direction;
 55 | 
 56 | 	return defaultSettings;
 57 | };
 58 | 
 59 | const _reverted = (direction) => {
 60 | 	return direction === DIRECTION.ASC ? DIRECTION.DESC : DIRECTION.ASC;
 61 | };
 62 | 
 63 | export const useOrderStore = defineStore('orderStore', () => {
 64 | 	const rootFilterStore = useRootFilterStore();
 65 | 
 66 | 	// state
 67 | 	const orderViewSettings = ref(_buildInitialViewSettings(rootFilterStore.order) || {});
 68 | 	const selectedOrder = ref(_parseSavedState(rootFilterStore.order)[0]);
 69 | 
 70 | 	// getters
 71 | 	const getOrderViewSettings = computed(() => orderViewSettings.value);
 72 | 	const getSelectedOrder = computed(() => selectedOrder.value);
 73 | 	const getSelectedComparator = computed(() => {
 74 | 		const comparator = ORDERS.find(order => order.key === selectedOrder.value).comparator;
 75 | 
 76 | 		if (orderViewSettings.value[selectedOrder.value] === DIRECTION.ASC) {
 77 | 			return comparator;
 78 | 		}
 79 | 
 80 | 		return (first, second) => -comparator(first, second);
 81 | 	});
 82 | 
 83 | 	// actions
 84 | 	const toggleOrder = (orderKey) => {
 85 | 		if (selectedOrder.value === orderKey) {
 86 | 			// just revert direction
 87 | 			orderViewSettings.value = {
 88 | 				...orderViewSettings.value,
 89 | 				[orderKey]: _reverted(orderViewSettings.value[orderKey])
 90 | 			};
 91 | 		} else {
 92 | 			selectedOrder.value = orderKey;
 93 | 		}
 94 | 
 95 | 		rootFilterStore.setOrder(`${selectedOrder.value}-${orderViewSettings.value[selectedOrder.value]}`);
 96 | 	};
 97 | 
 98 | 	return {
 99 | 		getOrderViewSettings,
100 | 		getOrders: ORDERS,
101 | 		getSelectedComparator,
102 | 		getSelectedOrder,
103 | 		toggleOrder
104 | 	};
105 | })


--------------------------------------------------------------------------------
/src/components/service_card/ServiceItem.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import Loader from '../Loader.vue'
  3 | import Sharing from "./components/Sharing.vue";
  4 | import { computed } from 'vue'
  5 | import { localDateFilter } from "../../filters/localDateFilter.js";
  6 | import { onBeforeMount } from "vue"
  7 | import { useBrowserLocation } from "@vueuse/core";
  8 | import { useServicesStore } from '../../stores/servicesStore.js';
  9 | import ServiceRating from "../../components/ServiceRating.vue";
 10 | 
 11 | const servicesStore = useServicesStore();
 12 | const location = useBrowserLocation();
 13 | 
 14 | const service = computed(() => {
 15 | 	return servicesStore.getService
 16 | })
 17 | 
 18 | const props = defineProps({
 19 | 	itemId: String,
 20 | 	langCode: String
 21 | })
 22 | 
 23 | onBeforeMount(() => {
 24 | 	servicesStore.fetchService(props.itemId)
 25 | })
 26 | </script>
 27 | 
 28 | <template>
 29 | 	<Loader v-if="!service.name" />
 30 | 	<div
 31 | 		v-else
 32 | 		class="service-item"
 33 | 	>
 34 | 		<div class="service-header">
 35 | 			<Sharing 
 36 | 				:url="`${location.href}`"
 37 | 				class="sharing-positioning"
 38 | 				:close-delay="3000"
 39 | 			/>
 40 | 			<a
 41 | 				:href="service.url"
 42 | 				target="_blank"
 43 | 			>
 44 | 				<h3>{{ service.name }}</h3>
 45 | 			</a>
 46 | 			<ServiceRating :rank="service.rank ?? 0" />
 47 | 		</div>
 48 | 		<p>{{ service.description[$i18n.locale] }}</p>
 49 | 		<p>
 50 | 			{{ $t('mentionedIn') }}:
 51 | 			<a
 52 | 				v-for="mention in service.mentions"
 53 | 				:key="mention.episodeName"
 54 | 				:href="mention.episodeUrl"
 55 | 				target="_blank"
 56 | 				class="mention-link"
 57 | 			>
 58 | 				{{ mention.episodeName }}
 59 | 			</a>
 60 | 		</p>
 61 | 		<div class="tags">
 62 | 			<span
 63 | 				v-for="tag in service.tags"
 64 | 				:key="tag"
 65 | 				class="tag"
 66 | 			>{{ tag }}</span>
 67 | 		</div>
 68 | 		<div class="date">
 69 | 			{{ localDateFilter(service.date, $i18n.locale) }}
 70 | 		</div>
 71 | 	</div>
 72 | </template>
 73 | 
 74 | <style scoped>
 75 | .service-item {
 76 | 	position: relative;
 77 | 	border: 1px solid var(--service-item-border-color);
 78 | 	border-radius: 10px;
 79 | 	margin: 10px;
 80 | 	padding: 12px 25px 25px 25px;
 81 | 	background-color: var(--service-item-bg-color);
 82 | 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 83 | 	transition: background-color 0.3s;
 84 | }
 85 | 
 86 | .service-item h3 {
 87 | 	margin: 10px 0 0 0;
 88 | 	padding: 0;
 89 | 	font-size: 1.2em;
 90 | 	display: inline;
 91 | 	font-weight: bold;
 92 |   word-break: break-word;
 93 | }
 94 | 
 95 | .date {
 96 | 	position: absolute;
 97 | 	right: 5px;
 98 | 	bottom: 5px;
 99 | 	color: rgb(128, 128, 128)
100 | }
101 | 
102 | .tag {
103 | 	display: inline-block;
104 | 	background-color: var(--tag-bg-color);
105 | 	color: var(--tag-text-color);
106 | 	font-size: 1em;
107 | 	border-radius: 3px;
108 | 	padding: 2px 7px;
109 | 	margin: 2px 6px 2px 0;
110 | 	cursor: pointer;
111 | 	transition: background-color 0.3s, color 0.3s;
112 | }
113 | 
114 | p {
115 | 	display: block;
116 | 	margin-block-start: 1em;
117 | 	margin-block-end: 1em;
118 | 	margin-inline-start: 0px;
119 | 	margin-inline-end: 0px;
120 | }
121 | 
122 | .sharing-positioning {
123 |   float: right;
124 |   border: none !important;
125 |   position: relative;
126 |   right: -12px;
127 |   top: 12px;
128 | }
129 | 
130 | .mention-link::after {
131 |   content: ",";
132 | 	margin-right: 5px;
133 | }
134 | 
135 | .mention-link:last-child::after {
136 |   content: "";
137 | 	margin-right: 0px;
138 | }
139 | </style>


--------------------------------------------------------------------------------
/src/components/search/FilterComponent.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { useRootFilterStore } from "../../stores/rootFilterStore.js";
  3 | import { useBrowserLocation } from "@vueuse/core";
  4 | import Sharing from "../../components/service_card/components/Sharing.vue";
  5 | import AutoCompleteInput from "./AutoComplete.vue";
  6 | import Search from "./Search.vue";
  7 | import TagList from "../TagList.vue";
  8 | import { useServicesStore } from "../../stores/servicesStore.js";
  9 | import { useTagsStore } from "../../stores/tagsStore.js";
 10 | 
 11 | import { computed, onBeforeMount } from "vue";
 12 | import { useRanksStore } from "../../stores/ranksStore.js";
 13 | import StarFilter from "../../components/StarFilter.vue";
 14 | 
 15 | const location = useBrowserLocation();
 16 | 
 17 | const rootFilterStore = useRootFilterStore();
 18 | const tagsStore = useTagsStore();
 19 | const servicesStore = useServicesStore();
 20 | const ranksStore = useRanksStore();
 21 | 
 22 | onBeforeMount(() => {
 23 | 	servicesStore.fetchTags();
 24 | });
 25 | 
 26 | const tags = computed(() => {
 27 | 	return servicesStore.getTags
 28 | });
 29 | 
 30 | const searchQuery = computed(() => {
 31 | 	return new URLSearchParams(rootFilterStore.searchState || {}).toString();
 32 | });
 33 | 
 34 | const handleRankUpdate = (newRank) => {
 35 | 	ranksStore.setRank(newRank);
 36 | };
 37 | const handleResetRank = () => {
 38 | 	ranksStore.resetRank();
 39 | };
 40 | 
 41 | </script>
 42 | 
 43 | <template>
 44 | 	<div class="filter-container">
 45 | 		<Search />
 46 | 		<div class="selected-tags-box">
 47 | 			<auto-complete-input
 48 | 				:placeholder="$t('searchTagsPlaceholder')"
 49 | 				:available-items="tags"
 50 | 				:already-selected-items="tagsStore.getSelectedTags"
 51 | 				:on-select="tagsStore.selectTag"
 52 | 			/>
 53 | 			<div class="selected-tags">
 54 | 				<TagList
 55 | 					:items="tagsStore.getSelectedTags"
 56 | 					:on-tag-click="tagsStore.unSelectTag"
 57 | 				/>
 58 | 			</div>
 59 | 			<input
 60 | 				v-show="tagsStore.getSelectedTags && tagsStore.getSelectedTags.length > 0"
 61 | 				class="reset-button"
 62 | 				type="button"
 63 | 				title="reset"
 64 | 				value="&#8634;"
 65 | 				@click="tagsStore.resetTags"
 66 | 			>
 67 | 		</div>
 68 | 		<Sharing
 69 | 			:url="`${location.origin}/catalog/?${searchQuery}`"
 70 | 			class="sharing-positioning"
 71 | 			:close-delay="3000"
 72 | 		/>
 73 | 		<StarFilter @update:rank="handleRankUpdate" @reset-rank="handleResetRank" />
 74 | 	</div>
 75 | </template>
 76 | 
 77 | <style scoped>
 78 | .filter-container {
 79 |   padding: 0 10px 10px;
 80 |   position: relative;
 81 | }
 82 | 
 83 | .selected-tags-box {
 84 |   position: relative;
 85 |   display: inline-block;
 86 |   padding: 0;
 87 |   margin-left: 10px;
 88 |   margin-bottom: 10px;
 89 | }
 90 | 
 91 | .selected-tags {
 92 |   display: inline-block;
 93 |   margin: 0 0 0 10px;
 94 | }
 95 | 
 96 | .reset-button {
 97 |   font-size: 1em;
 98 |   display: inline;
 99 |   cursor: pointer;
100 |   border-radius: 50%;
101 |   border: none;
102 |   font-weight: bold;
103 |   background-color: var(--reset-btn-bg-color);
104 |   color: var(--reset-btn-text-color);
105 |   padding: 5px;
106 |   width: 28px;
107 |   height: 28px;
108 | }
109 | 
110 | .reset-button:hover {
111 |   background-color: var(--reset-btn-bg-color-hover);
112 |   color: var(--reset-btn-text-color);
113 |   transition: 0.3s;
114 | }
115 | 
116 | .sharing-positioning {
117 |   position: absolute;
118 |   right: 10px;
119 |   top: 10px;
120 | }
121 | </style>
122 | 
123 | <style>
124 | .selected-tags .tag {
125 |   margin: 0 6px 0 0;
126 | }
127 | </style>


--------------------------------------------------------------------------------
/src/components/search/AutoComplete.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 | 	name: 'AutoCompleteInput',
  4 | 	props: {
  5 | 		placeholder: String,
  6 | 		availableItems: Array,
  7 | 		alreadySelectedItems: Array,
  8 | 		onSelect: Function
  9 | 	},
 10 | 	data() {
 11 | 		return ({
 12 | 			inputValue: '',
 13 | 			filteredItems: [],
 14 | 			currentFocus: -1,
 15 | 			showList: false
 16 | 		});
 17 | 	},
 18 | 	watch: {
 19 | 		inputValue(newValue) {
 20 | 			if (!newValue) {
 21 | 				this.filteredItems = [];
 22 | 				this.showList = false;
 23 | 			}
 24 | 		}
 25 | 	},
 26 | 	methods: {
 27 | 		filterItems() {
 28 | 			const value = this.inputValue.toLowerCase();
 29 | 
 30 | 			this.filteredItems = this.availableItems.filter(
 31 | 				item => item.toLowerCase().startsWith(value) && !this.alreadySelectedItems.includes(item)
 32 | 			);
 33 | 			this.showList = true;
 34 | 		},
 35 | 		highlightItem(item) {
 36 | 			const match = this.inputValue;
 37 | 
 38 | 			return `<strong>${item.substring(0, match.length)}</strong>${item.substring(match.length)}`;
 39 | 		},
 40 | 		navigateItems(event) {
 41 | 			if (event.key === 'ArrowDown') {
 42 | 				this.currentFocus = (this.currentFocus + 1) % this.filteredItems.length;
 43 | 			} else if (event.key === 'ArrowUp') {
 44 | 				this.currentFocus = (this.currentFocus + this.filteredItems.length - 1) % this.filteredItems.length;
 45 | 			} else if (event.key === 'Enter') {
 46 | 				event.preventDefault();
 47 | 
 48 | 				if (this.currentFocus > -1) {
 49 | 					this.selectItem(this.filteredItems[this.currentFocus]);
 50 | 				}
 51 | 			}
 52 | 		},
 53 | 		selectItem(item) {
 54 | 			this.$emit('item-selected', item);
 55 | 			this.inputValue = '';
 56 | 			this.filteredItems = [];
 57 | 			this.onSelect(item);
 58 | 			this.showList = false;
 59 | 		},
 60 | 		showItems() {
 61 | 			this.filterItems();
 62 | 		},
 63 | 		resetResult() {
 64 | 			this.filteredItems = [];
 65 | 			this.showList = false;
 66 | 		}
 67 | 	}
 68 | };
 69 | </script>
 70 | 
 71 | <template>
 72 | 	<div
 73 | 		v-click-outside="resetResult"
 74 | 		class="autocomplete"
 75 | 	>
 76 | 		<input
 77 | 			v-model="inputValue"
 78 | 			class="text-input autocomplete-input"
 79 | 			type="text"
 80 | 			:placeholder="placeholder"
 81 | 			@input="filterItems"
 82 | 			@keydown="navigateItems"
 83 | 			@click="showItems"
 84 | 		>
 85 | 		<div
 86 | 			v-if="showList"
 87 | 			class="autocomplete-items"
 88 | 		>
 89 | 			<div
 90 | 				v-for="(item, index) in filteredItems"
 91 | 				:key="index"
 92 | 				class="autocomplete-item"
 93 | 				:class="{'autocomplete-active': currentFocus === index}"
 94 | 				@click="selectItem(item)"
 95 | 				v-html="highlightItem(item)"
 96 | 			/>
 97 | 		</div>
 98 | 	</div>
 99 | </template>
100 | 
101 | <style scoped>
102 | /* Style the input and autocomplete container */
103 | .autocomplete {
104 |   position: relative;
105 |   display: inline-block;
106 | }
107 | 
108 | /* Style the items (options) */
109 | .autocomplete-items {
110 |   position: absolute;
111 |   box-sizing: border-box;
112 |   max-height: 250px;
113 |   overflow-x: hidden;
114 |   overflow-y: auto;
115 |   border-radius: 8px;
116 |   border: 1px none #d4d4d455;
117 |   border-left-style: solid;
118 |   z-index: 99;
119 |   top: 100%;
120 |   left: 0;
121 |   right: 0;
122 | }
123 | 
124 | .autocomplete-item {
125 |   padding: 8px;
126 |   cursor: pointer;
127 |   color: var(--autocomplete-item-text-color);
128 |   background-color: var(--autocomplete-item-bg-color);
129 |   border-bottom: 1px dashed #d4d4d435;
130 | }
131 | 
132 | .autocomplete-item:hover {
133 |   background-color: var(--autocomplete-item-bg-color-hover);
134 |   color: var(--autocomplete-item-text-color-hover);
135 | }
136 | 
137 | /* When navigating through the items using the arrow keys */
138 | .autocomplete-active {
139 |   background-color: var(--autocomplete-item-bg-color-active) !important;
140 |   color: var(--autocomplete-item-text-color-active);
141 | }
142 | </style>


--------------------------------------------------------------------------------
/src/stores/rootFilterStore.js:
--------------------------------------------------------------------------------
  1 | import { isOrDefault, not, numberOrNull, oneOf, parseJson } from "../utils/utils.js";
  2 | import { ALL_LANGS } from "../stores/currentLangStore.js";
  3 | import { ALL_ORDERS } from "../stores/orderStore.js";
  4 | import { defineStore } from "pinia";
  5 | 
  6 | export const KEYWORDS = {
  7 | 	LANG: 'currentLanguage',
  8 | 	ORDER: 'sortingOrder',
  9 | 	TAGS: 'selectedTags',
 10 | 	RANK: 'selectedRanks',
 11 | 	TEXT: 'search'
 12 | };
 13 | 
 14 | const EXPORTED_KEYWORDS = [
 15 | 	KEYWORDS.RANK,
 16 | 	KEYWORDS.TAGS,
 17 | 	KEYWORDS.TEXT
 18 | ];
 19 | 
 20 | const _initState = () => {
 21 | 	return {
 22 | 		[ KEYWORDS.LANG ]: isOrDefault(
 23 | 			localStorage.getItem( KEYWORDS.LANG ),
 24 | 			oneOf(ALL_LANGS),
 25 | 			'en',
 26 | 			() => localStorage.setItem(KEYWORDS.LANG, 'en')
 27 | 		),
 28 | 		[ KEYWORDS.ORDER ]: isOrDefault(
 29 | 			localStorage.getItem( KEYWORDS.ORDER ),
 30 | 			oneOf(ALL_ORDERS),
 31 | 			'date-DESC',
 32 | 			() => localStorage.setItem(KEYWORDS.ORDER, 'date-DESC')
 33 | 		),
 34 | 		[ KEYWORDS.TAGS ]: isOrDefault(
 35 | 			parseJson(localStorage.getItem( KEYWORDS.TAGS )),
 36 | 			Array.isArray,
 37 | 			[],
 38 | 			() => localStorage.setItem(KEYWORDS.TAGS, '[]')
 39 | 		),
 40 | 		[ KEYWORDS.RANK ]: isOrDefault(
 41 | 			parseInt(numberOrNull(localStorage.getItem( KEYWORDS.RANK ))),
 42 | 			not(isNaN),
 43 | 			0,
 44 | 			() => localStorage.setItem(KEYWORDS.RANK, '0')
 45 | 		),
 46 | 		[ KEYWORDS.TEXT ]: localStorage.getItem( KEYWORDS.TEXT ) || '',
 47 | 	};
 48 | };
 49 | 
 50 | const _saveChanges = (key, value) => localStorage.setItem(key, value);
 51 | 
 52 | export const useRootFilterStore = defineStore('rootFilterStore', ({
 53 | 	state: () => _initState(),
 54 | 	getters: {
 55 | 		lang: state => state[KEYWORDS.LANG],
 56 | 		order: state => state[KEYWORDS.ORDER],
 57 | 		tags: state => state[KEYWORDS.TAGS],
 58 | 		rank: state => state[KEYWORDS.RANK],
 59 | 		text: state => state[KEYWORDS.TEXT],
 60 | 		searchState: state => {
 61 | 			return EXPORTED_KEYWORDS.reduce((prev, key) => ({ ...prev, [key]: state[key] }), {});
 62 | 		},
 63 | 	},
 64 | 	actions: {
 65 | 		importFilterState(query) {
 66 | 			this[KEYWORDS.RANK] = isOrDefault(
 67 | 				numberOrNull(parseInt(query[KEYWORDS.RANK] || localStorage.getItem(KEYWORDS.RANK) || '0', 10)),
 68 | 				not(isNaN),
 69 | 				0,
 70 | 				() => localStorage.setItem(KEYWORDS.RANK, '0')
 71 | 			);
 72 | 			this[KEYWORDS.TEXT] = query[KEYWORDS.TEXT] || localStorage.getItem(KEYWORDS.TEXT) || '';
 73 | 			this[KEYWORDS.TAGS] = isOrDefault(
 74 | 				query[KEYWORDS.TAGS]
 75 | 					? query[KEYWORDS.TAGS].split(',').filter(Boolean)
 76 | 					: parseJson(localStorage.getItem(KEYWORDS.TAGS)),
 77 | 				Array.isArray,
 78 | 				[],
 79 | 				() => localStorage.setItem(KEYWORDS.TAGS, '[]')
 80 | 			);
 81 | 			this[KEYWORDS.LANG] = isOrDefault(
 82 | 				query[KEYWORDS.LANG] || localStorage.getItem(KEYWORDS.LANG),
 83 | 				oneOf(ALL_LANGS),
 84 | 				'en',
 85 | 				() => localStorage.setItem(KEYWORDS.LANG, 'en')
 86 | 			);
 87 | 			this[KEYWORDS.ORDER] = isOrDefault(
 88 | 				query[KEYWORDS.ORDER] || localStorage.getItem(KEYWORDS.ORDER),
 89 | 				oneOf(ALL_ORDERS),
 90 | 				'date-DESC',
 91 | 				() => localStorage.setItem(KEYWORDS.ORDER, 'date-DESC')
 92 | 			);
 93 | 		},
 94 | 		setLang(lang) {
 95 | 			this[ KEYWORDS.LANG ] = lang;
 96 | 			_saveChanges(KEYWORDS.LANG, lang);
 97 | 		},
 98 | 		setOrder(order) {
 99 | 			this[ KEYWORDS.ORDER ] = order;
100 | 			_saveChanges(KEYWORDS.ORDER, order);
101 | 		},
102 | 		setTags(tags) {
103 | 			this[ KEYWORDS.TAGS ] = tags === null ? [] : (Array.isArray(tags) ? tags : []);
104 | 			_saveChanges(KEYWORDS.TAGS, JSON.stringify(this[KEYWORDS.TAGS]));
105 | 		},
106 | 		setRank(rank) {
107 | 			this[ KEYWORDS.RANK ] = rank;
108 | 			_saveChanges(KEYWORDS.RANK, rank);
109 | 		},
110 | 		setSearchText(text) {
111 | 			this[ KEYWORDS.TEXT ] = text;
112 | 			_saveChanges(KEYWORDS.TEXT, text);
113 | 		}
114 | 	}
115 | }));


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { RouterLink } from 'vue-router';
  3 | import Settings from "./settings/Settings.vue";
  4 | import { computed } from 'vue'
  5 | import { useServicesCounterStore } from '../stores/servicesCounterStore.js';
  6 | 
  7 | defineProps({
  8 | 	msg: {
  9 | 		type: String,
 10 | 		required: false
 11 | 	}
 12 | });
 13 | 
 14 | const servicesCounterStore = useServicesCounterStore();
 15 | const servicesCount = computed(() =>  servicesCounterStore.getCount);
 16 | 
 17 | </script>
 18 | 
 19 | <template>
 20 | 	<header>
 21 | 		<div class="container">
 22 | 			<div class="title-container">
 23 | 				<RouterLink to="/">
 24 | 					<img
 25 | 						alt="Vue logo"
 26 | 						class="logo"
 27 | 						src="../../public/logo.png"
 28 | 						width="70"
 29 | 						height="70"
 30 | 					>
 31 | 				</RouterLink>
 32 | 				<h1 class="title">
 33 | 					{{ $t('header') }}
 34 | 					<a
 35 | 						id="podcast-name"
 36 | 						target="_blank"
 37 | 						href="https://itbeard.com/aia"
 38 | 					>AIA Podcast</a> 
 39 | 					<a
 40 | 						id="aw-club"
 41 | 						target="_blank"
 42 | 						href="https://aw.club"
 43 | 					>&  Anywhere Club</a>
 44 | 				</h1>
 45 | 			</div>
 46 | 			<Settings />
 47 | 			<div
 48 | 				v-if="servicesCount"
 49 | 				class="services-count"
 50 | 			>
 51 | 				{{ servicesCount }}
 52 | 			</div>
 53 | 		</div>
 54 | 	</header>
 55 | </template>
 56 | 
 57 | <style scoped>
 58 | header {
 59 |     padding: 10px;
 60 |     text-align: center;
 61 |     max-width: 1200px;
 62 |     margin: 10px auto 0px auto;
 63 |     transition: background-color 0.3s;
 64 |     width: 100%;
 65 |     position: relative;
 66 | }
 67 | 
 68 | .container {
 69 |     background-color: var(--header-bg-color);
 70 |     border-radius: 10px;
 71 |     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 72 |     display: flex;
 73 |     justify-content: space-between;
 74 |     align-items: center;
 75 |     max-width: 1200px;
 76 |     margin: 0 auto;
 77 |     padding: 10px;
 78 | }
 79 | 
 80 | .logo {
 81 |     width: 70px;
 82 |     height: 70px;
 83 |     border-radius: 50%;
 84 |     margin-right: 10px;
 85 | }
 86 | 
 87 | .title-container {
 88 |     display: flex;
 89 |     align-items: center;
 90 |     text-align: left;
 91 | }
 92 | 
 93 | .title-container img {
 94 |     width: 70px;
 95 |     height: 70px;
 96 |     border-radius: 50%;
 97 |     margin-right: 10px;
 98 |     display: block;
 99 | }
100 | 
101 | .title-container .title {
102 |     margin: 0 0 0 5px;
103 |     font-weight: bold;
104 | }
105 | 
106 | #podcast-name {
107 |     white-space: nowrap;
108 |     color: var(--text-color);;
109 |     border-bottom: 3px dotted var(--text-color);;
110 |     transition: 0.3s;
111 |     font-weight: bold;
112 | }
113 | 
114 | #podcast-name:hover {
115 |     text-decoration: none;
116 |     color: var(--aw-club-color);
117 |     border-bottom-color: var(--aw-club-color);
118 | }
119 | 
120 | #aw-club {
121 |     white-space: nowrap;
122 |     color: var(--aw-club-color);
123 |     text-decoration: none;
124 |     transition: color 0.3s;
125 |     margin-left: 7px;
126 |     font-size: 0.5em;
127 |     font-style: italic;
128 |     font-weight: bold;
129 | }
130 | 
131 | nav {
132 |   width: 100%;
133 |   font-size: 12px;
134 |   text-align: center;
135 |   margin-top: 2rem;
136 | }
137 | 
138 | nav a.router-link-exact-active {
139 |   color: var(--color-text);
140 | }
141 | 
142 | nav a.router-link-exact-active:hover {
143 |   background-color: transparent;
144 | }
145 | 
146 | nav a {
147 |   display: inline-block;
148 |   padding: 0 1rem;
149 |   border-left: 1px solid var(--color-border);
150 | }
151 | 
152 | nav a:first-of-type {
153 |   border: 0;
154 | }
155 | 
156 | .services-count {
157 |   position: absolute;
158 |   right: 20px;
159 |   bottom: 15px;
160 |   font-size: 0.9em;
161 |   color: #999;
162 | }
163 | 
164 | @media (min-width: 1024px) {
165 | 
166 |   nav {
167 |     text-align: left;
168 |     margin-left: -1rem;
169 |     font-size: 1rem;
170 | 
171 |     padding: 1rem 0;
172 |     margin-top: 1rem;
173 |   }
174 | }
175 | 
176 | @media (max-width: 640px) {
177 | 
178 |   h1.title {
179 |     font-size: 1.5em;
180 |   }
181 | }
182 | 
183 | 
184 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AIA Podcast's AI Tools Catalog
 2 | This is a catalog of tools that have been mentioned in the [AIA Podcast](https://itbeard.com/aia). 
 3 | These tools are AI-powered and can be useful in programming, content creation, and increasing your effectiveness.
 4 | 
 5 | ## Links
 6 | - Catalog: https://awclub.github.io/catalog
 7 | - AIA Podcast: https://itbeard.com/aia
 8 | - Podcast's Chat: https://t.me/aiapodcast
 9 | - Anywhere Club: https://aw.club
10 | 
11 | 
12 | ## FAQ
13 | ### How do I add my service to the catalog?
14 | Visit our chat on [Telegram](https://t.me/aiapodcast) (RU lang) and send us the link to your service with a short description. If your service is helpful and interesting enough, we will discuss it in the next episode of the AIA Podcast and then add it to our catalog. This is the only way to get into this catalog.
15 | 
16 | 
17 | ### How can I add improvements to the catalog?
18 | Make a fork of this repository, then make improvements and send a PR (Pull Request) to our repository. Alternatively, you can create an Issue with type "[Feature request](https://github.com/awclub/catalog/issues/new?assignees=&labels=feature&projects=&template=feature_request.md&title=)", and we will implement them if we decide that they are acceptable and meaningful.
19 | 
20 | 
21 | ### How can I report a closed or inoperative tool from the catalog?
22 | You can create an Issue with type "[Сlosed or inoperative tool report](https://github.com/awclub/catalog/issues/new?assignees=&labels=closed+tool%2C+inoperative+tool&projects=&template=%D1%81losed-or-inoperative-tool-report.md&title=)". Then, we will review the tool and decide whether to remove it from the catalog or not.
23 | 
24 | ---
25 | 
26 | # Каталог ИИ-сервисов от AIA Podcast
27 | Это каталог ИИ-сервисов и инструментов, которые упоминались в [AIA Podcast](https://itbeard.com/aia). 
28 | Эти инструменты работают на основе искусственного интеллекта и могут быть полезны в программировании, создании контента и повышении эффективности вашей работы.
29 | 
30 | ## Ссылки
31 | - Каталок: https://awclub.github.io/catalog
32 | - AIA Podcast: https://itbeard.com/aia
33 | - Чат подкаста: https://t.me/aiapodcast
34 | - Anywhere Club: https://aw.club
35 |   
36 | ## Вопрос-ответ
37 | ### Как добавить сервис в каталог?
38 | Зайдите в наш чат в [Telegram](https://t.me/aiapodcast) и пришлите нам ссылку на сервис с кратким описанием. Если сервис окажется достаточно полезным и интересным, мы обсудим его в следующем эпизоде AIA Podcast, а затем добавим в наш каталог. Это единственный способ попасть в каталог.
39 | 
40 | ### Как добавить улучшения в каталог?
41 | Сделайте форк этого репозитория, затем внесите улучшения и отправьте PR (Pull Request) в наш репозиторий. Также вы можете создать Issue с типом "[Feature request](https://github.com/awclub/catalog/issues/new?assignees=&labels=feature&projects=&template=feature_request.md&title=)" и описанием улучшения, мы рассмотрим его и внедрим, если решим, что оно приемлемо и имеет смысл.
42 | 
43 | 
44 | ### Как сообщить о закрытом или неработающем сервисе из каталога?
45 | Вы можете создать Issue с типом "[Сlosed or inoperative tool report](https://github.com/awclub/catalog/issues/new?assignees=&labels=closed+tool%2C+inoperative+tool&projects=&template=%D1%81losed-or-inoperative-tool-report.md&title=)". Затем мы рассмотрим запрос и решим, удалять сервис из каталога или нет.
46 | 
47 | ---
48 | 
49 | # How to run the catalog (instructions for developers)
50 | 
51 | - The catalogue runs on `Vue 3`, so you need to prepare your local environment.
52 | - We use [ESLint](https://eslint.org/) for linting.
53 | - The database file is located at the path: `public/db.json`
54 | 
55 | ## Recommended IDE Setup
56 | 
57 | - [VSCode](https://code.visualstudio.com/)
58 | - [Volar Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (also you need to disable Vetur, if you are using it) 
59 | - [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
60 | 
61 | ## Customize configuration
62 | 
63 | If you need to change the settings, see the [Vite Configuration Reference](https://vitejs.dev/config/).
64 | 
65 | ### Project Setup
66 | 
67 | ```sh
68 | npm install
69 | ```
70 | 
71 | ### Lint, Compile and Hot-Reload for Development
72 | 
73 | ```sh
74 | npm run dev
75 | ```
76 | 
77 | ### Lint, Compile and Minify for Production
78 | 
79 | ```sh
80 | npm run build
81 | ```
82 | 


--------------------------------------------------------------------------------
/src/components/service_card/ServiceListItem.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { RouterLink } from 'vue-router';
  3 | import Sharing from "./components/Sharing.vue";
  4 | import TagList from "../TagList.vue";
  5 | import { localDateFilter } from "../../filters/localDateFilter.js";
  6 | import { useBrowserLocation } from "@vueuse/core";
  7 | import { useTagsStore } from "../../stores/tagsStore.js";
  8 | import ServiceRating from "../../components/ServiceRating.vue";
  9 | 
 10 | defineProps({
 11 | 	serviceItem: Object,
 12 | })
 13 | 
 14 | const tagsStore = useTagsStore();
 15 | const location = useBrowserLocation();
 16 | 
 17 | const formattedUrl = function (url) {
 18 | 	return url.substring(0, 5);
 19 | }
 20 | </script>
 21 | 
 22 | <template>
 23 | 	<div class="service-item">
 24 | 		<div class="service-header">
 25 | 			<Sharing
 26 | 				:url="`${location.origin}/catalog/${formattedUrl(serviceItem.id)}`"
 27 | 				class="sharing-positioning"
 28 | 				:close-delay="3000"
 29 | 			/>
 30 | 			<RouterLink :to="`${formattedUrl(serviceItem.id)}`">
 31 | 				<h3>{{ serviceItem.name }}</h3>
 32 | 			</RouterLink>
 33 | 			<a
 34 | 				:href="serviceItem.url"
 35 | 				type="button"
 36 | 				class="open-in-new-tab"
 37 | 				title="Open in new tab"
 38 | 				target="_blank"
 39 | 			>
 40 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 115.71" width="16" height="16">
 41 | 					<path
 42 | 						d="M116.56,3.69l-3.84,53.76l-17.69-15c-19.5,8.72-29.96,23.99-30.51,43.77c-17.95-26.98-7.46-50.4,12.46-65.97 L64.96,3L116.56,3.69L116.56,3.69z M28.3,0h14.56v19.67H32.67c-4.17,0-7.96,1.71-10.72,4.47c-2.75,2.75-4.46,6.55-4.46,10.72 l-0.03,46c0.03,4.16,1.75,7.95,4.5,10.71c2.76,2.76,6.56,4.48,10.71,4.48h58.02c4.15,0,7.95-1.72,10.71-4.48 c2.76-2.76,4.48-6.55,4.48-10.71v-6.96h17.01v11.33c0,7.77-3.2,17.04-8.32,22.16c-5.12,5.12-12.21,8.32-19.98,8.32H28.3 c-7.77,0-14.86-3.2-19.98-8.32C3.19,102.26,0,95.18,0,87.41l0.03-59.1C0,20.52,3.19,13.43,8.31,8.31C13.43,3.19,20.51,0,28.3,0 L28.3,0z"
 43 | 					/>
 44 | 				</svg>
 45 | 			</a>
 46 | 			<ServiceRating :rank="serviceItem.rank ?? 0"/>
 47 | 		</div>
 48 | 		<p>{{ serviceItem.description[$i18n.locale] }}</p>
 49 | 		<p>
 50 | 			{{ $t('mentionedIn') }}:
 51 | 			<a
 52 | 				v-for="mention in serviceItem.mentions"
 53 | 				:key="mention.episodeName"
 54 | 				:href="mention.episodeUrl"
 55 | 				target="_blank"
 56 | 				class="mention-link"
 57 | 			>
 58 | 				{{ mention.episodeName }}
 59 | 			</a>
 60 | 		</p>
 61 | 		<TagList
 62 | 			:items="serviceItem.tags"
 63 | 			:on-tag-click="tagsStore.selectTag"
 64 | 		/>
 65 | 		<div class="date">
 66 | 			{{ localDateFilter(serviceItem.date, $i18n.locale) }}
 67 | 		</div> <!-- Добавляем дату -->
 68 | 	</div>
 69 | </template>
 70 | 
 71 | <style scoped>
 72 | .service-item {
 73 |   position: relative;
 74 |   border: 1px solid var(--service-item-border-color);
 75 |   border-radius: 10px;
 76 |   padding: 12px 25px 25px 25px;
 77 |   background-color: var(--service-item-bg-color);
 78 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 79 |   transition: background-color 0.3s;
 80 | 
 81 |   @media screen and (max-width: 640px) {
 82 |     width: 100%;
 83 |   }
 84 | }
 85 | 
 86 | .service-header {
 87 |   display: block;
 88 | }
 89 | 
 90 | .service-item h3 {
 91 |   margin: 10px 0 0 0;
 92 |   padding: 0;
 93 |   font-size: 1.2em;
 94 |   display: inline;
 95 |   font-weight: bold;
 96 |   word-break: break-word;
 97 | }
 98 | 
 99 | .date {
100 |   position: absolute;
101 |   right: 5px;
102 |   bottom: 5px;
103 |   color: rgb(128, 128, 128)
104 | }
105 | 
106 | p {
107 |   display: block;
108 |   margin-block-start: 1em;
109 |   margin-block-end: 1em;
110 |   margin-inline-start: 0px;
111 |   margin-inline-end: 0px;
112 | }
113 | 
114 | .sharing-positioning {
115 |   float: right;
116 |   border: none !important;
117 |   position: relative;
118 |   right: -12px;
119 |   top: 12px;
120 | }
121 | 
122 | .open-in-new-tab {
123 |   margin: 0 0 0 10px;
124 |   cursor: pointer;
125 |   position: relative;
126 | }
127 | 
128 | .open-in-new-tab svg {
129 |   transition: 0.3s;
130 |   color: var(--copy-to-clipboard-btn-color);
131 |   filter: invert(42%) sepia(39%) saturate(0%) hue-rotate(318deg) brightness(93%) contrast(95%);
132 | }
133 | 
134 | .open-in-new-tab:hover svg {
135 |   filter: invert(81%) sepia(2%) saturate(10%) hue-rotate(42deg) brightness(102%) contrast(95%);
136 | }
137 | 
138 | .mention-link::after {
139 |   content: ",";
140 |   margin-right: 5px;
141 | }
142 | 
143 | .mention-link:last-child::after {
144 |   content: "";
145 |   margin-right: 0px;
146 | }
147 | </style>


--------------------------------------------------------------------------------