Merge d715376317 into 08d977b8cd

README.md

@@ -6,6 +6,10 @@
 
 Useful tools for developer and people working in IT. [Have a look !](https://it-tools.tech).
 
+## Sponsors
+
+[![Renderize banner](./.github/sponsor-banner.svg)](https://renderize.tech?utm_source=it-tools&utm_medium=readme)
+
 ## Functionalities and roadmap
 
 Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see if some feature listed to be implemented.

package.json

@@ -1,7 +1,8 @@
 {
   "name": "it-tools",
+  "type": "module",
   "version": "2024.10.22-7ca5933",
-  "packageManager": "pnpm@8.15.3",
+  "packageManager": "pnpm@9.11.0",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "author": "Corentin Th <corentin.thomasset74+it-tools@gmail.com> (https://corentin.tech)",
   "license": "GNU GPLv3",
@@ -137,7 +138,7 @@
     "less": "^4.1.3",
     "prettier": "^3.0.0",
     "typescript": "~5.2.0",
-    "unocss": "^0.57.0",
+    "unocss": "^0.65.1",
     "unocss-preset-scrollbar": "^0.2.1",
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",

src/config.ts

@@ -59,6 +59,12 @@ export const config = figue({
     default: false,
     env: 'VITE_SHOW_BANNER',
   },
+  showSponsorBanner: {
+    doc: 'Show the sponsor banner',
+    format: 'boolean',
+    default: false,
+    env: 'VITE_SHOW_SPONSOR_BANNER',
+  },
 })
   .loadEnv({
     ...import.meta.env,

src/pages/Home.page.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IconDragDrop, IconHeart } from '@tabler/icons-vue';
+import { IconDragDrop, IconFileDescription, IconHeart } from '@tabler/icons-vue';
 import { useHead } from '@vueuse/head';
 import { computed } from 'vue';
 import Draggable from 'vuedraggable';
@@ -43,11 +43,29 @@ function onUpdateFavoriteTools() {
           {{ $t('home.follow.thankYou') }}
           <n-icon :component="IconHeart" />
         </ColoredCard>
+
+        <a href="https://renderize.tech?utm_source=it-tools&utm_medium=banner" target="_blank" rel="noopener" class="text-current decoration-none">
+          <c-card v-if="config.showSponsorBanner" class="cursor-pointer !border-2px !hover:border-primary">
+            <div class="flex items-center justify-between">
+              <n-icon :component="IconFileDescription" class="text-neutral-400 dark:text-neutral-600" size="40" />
+              <div class="rounded-full bg-#eeeeee px-10px py-2px text-xs text-black dark:bg-#333333 dark:text-white">
+                Sponsor
+              </div>
+            </div>
+
+            <div class="my-5px flex items-baseline gap-4 text-balance text-lg text-black dark:text-white">
+              Generate PDFs from HTML with Renderize API
+            </div>
+            <div class="text-neutral-500 dark:text-neutral-400">
+              Automate your document generation with our fast, developer-friendly API. Start with a free forever plan.
+            </div>
+          </c-card>
+        </a>
       </div>
 
       <transition name="height">
         <div v-if="toolStore.favoriteTools.length > 0">
-          <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+          <h3 class="mb-5px mt-25px text-neutral-400 font-500">
             {{ $t('home.categories.favoriteTools') }}
             <c-tooltip :tooltip="$t('home.categories.favoritesDndToolTip')">
               <n-icon :component="IconDragDrop" size="18" />
@@ -68,7 +86,7 @@ function onUpdateFavoriteTools() {
       </transition>
 
       <div v-if="toolStore.newTools.length > 0">
-        <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+        <h3 class="mb-5px mt-25px text-neutral-400 font-500">
           {{ t('home.categories.newestTools') }}
         </h3>
         <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
@@ -76,7 +94,7 @@ function onUpdateFavoriteTools() {
         </div>
       </div>
 
-      <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+      <h3 class="mb-5px mt-25px text-neutral-400 font-500">
         {{ $t('home.categories.allTools') }}
       </h3>
       <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">

src/tools/device-information/device-information.vue

@@ -54,6 +54,19 @@ const sections = [
       },
     ],
   },
+  {
+    name: 'Time zone',
+    information: [
+      {
+        label: 'Time zone name',
+        value: computed(() => Intl.DateTimeFormat().resolvedOptions().timeZone),
+      },
+      {
+        label: 'UTC offset',
+        value: computed(() => `${new Date().getTimezoneOffset()} minutes`),
+      },
+    ],
+  },
 ];
 </script>