a
This commit is contained in:
Ubuntu
@@ -0,0 +1,218 @@
|
||||
<script lang="ts" setup>
|
||||
import { NIcon, useThemeVars } from 'naive-ui';
|
||||
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { Heart, Home2, Menu2 } from '@vicons/tabler';
|
||||
|
||||
import { storeToRefs } from 'pinia';
|
||||
import HeroGradient from '../assets/hero-gradient.svg?component';
|
||||
import MenuLayout from '../components/MenuLayout.vue';
|
||||
import NavbarButtons from '../components/NavbarButtons.vue';
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
import { config } from '@/config';
|
||||
import type { ToolCategory } from '@/tools/tools.types';
|
||||
import { useToolStore } from '@/tools/tools.store';
|
||||
import { useTracker } from '@/modules/tracker/tracker.services';
|
||||
import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';
|
||||
|
||||
const themeVars = useThemeVars();
|
||||
const styleStore = useStyleStore();
|
||||
const version = config.app.version;
|
||||
const commitSha = config.app.lastCommitSha.slice(0, 7);
|
||||
|
||||
const { tracker } = useTracker();
|
||||
const { t } = useI18n();
|
||||
|
||||
const toolStore = useToolStore();
|
||||
const { favoriteTools, toolsByCategory } = storeToRefs(toolStore);
|
||||
|
||||
const tools = computed<ToolCategory[]>(() => [
|
||||
...(favoriteTools.value.length > 0 ? [{ name: t('tools.categories.favorite-tools'), components: favoriteTools.value }] : []),
|
||||
...toolsByCategory.value,
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuLayout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
|
||||
<template #sider>
|
||||
<RouterLink to="/" class="hero-wrapper">
|
||||
<HeroGradient class="gradient" />
|
||||
<div class="text-wrapper">
|
||||
<div class="title">
|
||||
IT - TOOLS
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<div class="subtitle">
|
||||
{{ $t('home.subtitle') }}
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<div class="sider-content">
|
||||
<div v-if="styleStore.isSmallScreen" flex flex-col items-center>
|
||||
<locale-selector w="90%" />
|
||||
|
||||
<div flex justify-center>
|
||||
<NavbarButtons />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CollapsibleToolMenu :tools-by-category="tools" />
|
||||
|
||||
<div class="footer">
|
||||
<div>
|
||||
IT-Tools
|
||||
|
||||
<c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
|
||||
v{{ version }}
|
||||
</c-link>
|
||||
|
||||
<template v-if="commitSha && commitSha.length > 0">
|
||||
-
|
||||
<c-link
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
type="primary"
|
||||
:href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
|
||||
>
|
||||
{{ commitSha }}
|
||||
</c-link>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
© {{ new Date().getFullYear() }}
|
||||
<c-link target="_blank" rel="noopener" href="https://corentin.tech?utm_source=it-tools&utm_medium=footer">
|
||||
Corentin Thomasset
|
||||
</c-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div flex items-center justify-center gap-2>
|
||||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
:aria-label="$t('home.toggleMenu')"
|
||||
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
|
||||
>
|
||||
<NIcon size="25" :component="Menu2" />
|
||||
</c-button>
|
||||
|
||||
<c-tooltip :tooltip="$t('home.home')" position="bottom">
|
||||
<c-button to="/" circle variant="text" :aria-label="$t('home.home')">
|
||||
<NIcon size="25" :component="Home2" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
||||
<c-tooltip :tooltip="$t('home.uiLib')" position="bottom">
|
||||
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
|
||||
<icon-mdi:brush-variant text-20px />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
||||
<command-palette />
|
||||
|
||||
<locale-selector v-if="!styleStore.isSmallScreen" />
|
||||
|
||||
<div>
|
||||
<NavbarButtons v-if="!styleStore.isSmallScreen" />
|
||||
</div>
|
||||
|
||||
<c-tooltip position="bottom" :tooltip="$t('home.support')">
|
||||
<c-button
|
||||
round
|
||||
href="https://www.buymeacoffee.com/cthmsst"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
class="support-button"
|
||||
:bordered="false"
|
||||
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
|
||||
>
|
||||
{{ $t('home.buyMeACoffee') }}
|
||||
<NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
</div>
|
||||
<slot />
|
||||
</template>
|
||||
</MenuLayout>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// ::v-deep(.n-layout-scroll-container) {
|
||||
// @percent: 4%;
|
||||
// @position: 25px;
|
||||
// @size: 50px;
|
||||
// @color: #eeeeee25;
|
||||
// background-image: radial-gradient(@color @percent, transparent @percent),
|
||||
// radial-gradient(@color @percent, transparent @percent);
|
||||
// background-position: 0 0, @position @position;
|
||||
// background-size: @size @size;
|
||||
// }
|
||||
|
||||
.support-button {
|
||||
background: rgb(37, 99, 108);
|
||||
background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
|
||||
color: #fff !important;
|
||||
transition: padding ease 0.2s !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: #838587;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.sider-content {
|
||||
padding-top: 160px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
|
||||
.gradient {
|
||||
margin-top: -65px;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: 16px;
|
||||
color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
border-radius: 4px;
|
||||
background-color: v-bind('themeVars.primaryColor');
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
import BaseLayout from './base.layout.vue';
|
||||
import ToolLayout from './tool.layout.vue';
|
||||
|
||||
export const layouts = {
|
||||
base: BaseLayout,
|
||||
toolLayout: ToolLayout,
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useHead } from '@vueuse/head';
|
||||
import type { HeadObject } from '@vueuse/head';
|
||||
|
||||
import BaseLayout from './base.layout.vue';
|
||||
import FavoriteButton from '@/components/FavoriteButton.vue';
|
||||
import type { Tool } from '@/tools/tools.types';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const head = computed<HeadObject>(() => ({
|
||||
title: `${route.meta.name} - IT Tools`,
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: route.meta?.description as string,
|
||||
},
|
||||
{
|
||||
name: 'keywords',
|
||||
content: ((route.meta.keywords ?? []) as string[]).join(','),
|
||||
},
|
||||
],
|
||||
}));
|
||||
useHead(head);
|
||||
const { t } = useI18n();
|
||||
|
||||
const i18nKey = computed<string>(() => route.path.trim().replace('/', ''));
|
||||
const toolTitle = computed<string>(() => t(`tools.${i18nKey.value}.title`, String(route.meta.name)));
|
||||
const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.description`, String(route.meta.description)));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<div class="tool-layout">
|
||||
<div class="tool-header">
|
||||
<div flex flex-nowrap items-center justify-between>
|
||||
<n-h1>
|
||||
{{ toolTitle }}
|
||||
</n-h1>
|
||||
|
||||
<div>
|
||||
<FavoriteButton :tool="{ name: route.meta.name, path: route.path } as Tool" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator" />
|
||||
|
||||
<div class="description">
|
||||
{{ toolDescription }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-content">
|
||||
<slot />
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tool-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
::v-deep(& > *) {
|
||||
flex: 0 1 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-layout {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tool-header {
|
||||
padding: 40px 0;
|
||||
width: 100%;
|
||||
|
||||
.n-h1 {
|
||||
opacity: 0.9;
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
background: rgb(161, 161, 161);
|
||||
opacity: 0.2;
|
||||
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user