Merge pull request #20 from dnj/connect-to-api

Connect to api

app.vue

@@ -1,9 +1,21 @@
 <template>
-  <NuxtLayout>
-    <v-app>
-      <v-locale-provider :rtl="$vuetify.locale.isRtl">
+  <v-app>
+    <v-locale-provider :rtl="isRTL">
+      <NuxtLayout>
         <NuxtPage />
-      </v-locale-provider>
-    </v-app>
-  </NuxtLayout>
+      </NuxtLayout>
+    </v-locale-provider>
+  </v-app>
 </template>
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    return { locale: useI18n().locale };
+  },
+  computed: {
+    isRTL() {
+      return ["fa", "ar"].includes(this.locale);
+    }
+  }
+})
+</script>

components/Footer.vue

@@ -9,16 +9,24 @@
                 </v-col>
                 <v-col sm="6" cols="12"
                     :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'left' : 'right'">
-                    <v-btn to="/docs" variant="text">مستندات</v-btn>
-                    <v-btn to="/gallery" variant="text">گالری</v-btn>
-                    <v-btn to="/contact" variant="text">تماس با ما</v-btn>
+                    <v-btn class="mx-1" :to="localePath('docs')" variant="text">{{ $t("pages.docs") }}</v-btn>
+                    <v-btn class="mx-1" :to="localePath('gallery')" variant="text">{{ $t("pages.gallery") }}</v-btn>
+                    <v-btn class="mx-1" :to="localePath('contact')" variant="text">{{ $t("pages.contact") }}</v-btn>
                 </v-col>
             </v-row>
             <v-divider class="my-5"></v-divider>
-            <div class="footer-sen">&copy; کلیه ی حقوق مادی و معنوی این سایت محفوظ می باشد.</div>
+            <div class="footer-sen">&copy; {{ $t("copy-right") }}</div>
         </div>
     </v-container>
 </template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+    setup(){
+        return { localePath: useLocalePath() };
+    }
+})
+</script>
 <style lang="scss">
 .footer {
     .footer-sen {

components/Header.vue

@@ -1,27 +1,75 @@
 <template>
-	<header>
-		<v-app-bar class="top-bar" :elevation="0" color="white" density="comfortable"
-			:dir="$vuetify.locale.isRtl ? 'rtl' : 'ltr'">
-			<NuxtLink to="/" class="toolbar-title"><v-app-bar-title>وب شات</v-app-bar-title></NuxtLink>
-			<v-toolbar-items class="hidden-sm-and-down">
-				<v-btn to="/docs" color="secondary">مستندات</v-btn>
-				<v-btn to="/gallery" color="secondary">گالری</v-btn>
-				<v-btn to="/contact" color="secondary">تماس با‌ما</v-btn>
-			</v-toolbar-items>
-			<v-spacer />
-			<v-menu>
-				<template v-slot:activator="{ props }">
-					<v-app-bar-nav-icon class="hidden-md-and-up" v-bind="props"></v-app-bar-nav-icon>
-				</template>
-				<v-list>
-					<v-list-item><v-btn variant="text" to="/docs" color="secondary">مستندات</v-btn></v-list-item>
-					<v-list-item><v-btn variant="text" to="/gallery" color="secondary">گالری</v-btn></v-list-item>
-					<v-list-item><v-btn variant="text" to="/contact" color="secondary">تماس با‌ما</v-btn></v-list-item>
-				</v-list>
-			</v-menu>
-		</v-app-bar>
-	</header>
+	<v-app-bar :elevation="0" color="white" density="comfortable" class=" px-5">
+		<NuxtLink :to="localePath('/')" class="toolbar-title me-3"><v-app-bar-title>{{ $t("pages.index")
+				}}</v-app-bar-title></NuxtLink>
+		<v-toolbar-items class="hidden-sm-and-down">
+			<v-btn :to="localePath('docs')" class="mx-1" color="secondary">{{ $t("pages.docs") }}</v-btn>
+			<v-btn :to="localePath('gallery')" class="mx-1" color="secondary">{{ $t("pages.gallery") }}</v-btn>
+			<v-btn :to="localePath('contact')" class="mx-1" color="secondary">{{ $t("pages.contact") }}</v-btn>
+		</v-toolbar-items>
+		<v-spacer />
+		<v-menu>
+			<template v-slot:activator="{ props }">
+				<v-btn variant="text" color="light" height="80%" rounded v-bind="props">
+					<span class="fi flag mx-1 rounded"
+						:class="`fi-` + languages.find((language) => { return language.value === locale })?.country" />
+					{{ languages.find((language) => { return language.value === locale })?.title }}
+				</v-btn>
+			</template>
+			<v-list :elevation="3">
+				<v-list-item v-for="(language, i) in getOtherLanguages(locale)" :key="i" :value="language.value"
+					:to="switchLocalePath(language.value)">
+					<template v-slot:append>
+						<span class="fi ms-2 rounded" :class="`fi-${language.country}`" />
+					</template>
+					<v-list-item-title>{{ language.title }}</v-list-item-title>
+				</v-list-item>
+			</v-list>
+		</v-menu>
+		<v-menu>
+			<template v-slot:activator="{ props }">
+				<v-app-bar-nav-icon class="hidden-md-and-up mx-0" v-bind="props"></v-app-bar-nav-icon>
+			</template>
+			<v-list>
+				<v-list-item><v-btn variant="text" :to="localePath('docs')" color="secondary">{{ $t("pages.docs")
+						}}</v-btn></v-list-item>
+				<v-list-item><v-btn variant="text" :to="localePath('gallery')" color="secondary">{{
+						$t("pages.gallery") }}</v-btn></v-list-item>
+				<v-list-item><v-btn variant="text" :to="localePath('contact')" color="secondary">{{
+						$t("pages.contact") }}</v-btn></v-list-item>
+			</v-list>
+		</v-menu>
+	</v-app-bar>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+interface ILanguage {
+	title: string,
+	value: string
+}
+
+export default defineComponent({
+	setup() {
+		const { locale } = useI18n();
+		return { locale, localePath: useLocalePath(), switchLocalePath: useSwitchLocalePath() };
+	},
+	data() {
+		return {
+			languages: [
+				{ title: "English", value: "en", country: "us" },
+				{ title: "فارسی", value: "fa", country: "ir" },
+			]
+		}
+	},
+	methods: {
+		getOtherLanguages(code: string) {
+			return this.languages.filter((otherLanguage) => otherLanguage.value !== code)
+		},
+	}
+})
+</script>
 <style>
 .toolbar-title {
 	text-decoration: none;

components/Images.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-row v-if="images && !error" class="my-2" justify="center">
+        <v-col class="pa-2" cols="1" v-for="(image, i) in images" :key="i">
+            <a :href="image.url" target="_blank">
+                <v-img v-if="image.id"
+                    :src="getPublickEndPoint(`api/gallery/${image.id}?width=200&height=150`)"></v-img>
+                <v-img v-if="!image.id"
+                    :src="getPublickEndPoint(`capture?url=${image.url}&width=200&height=150`)"></v-img>
+            </a>
+        </v-col>
+    </v-row>
+    <v-progress-circular v-if="pending" indeterminate class="my-5" color="primary" />
+    <v-alert class="my-5 text-start" v-if="error" :text="$t('fetch-data.error.server')" type="error" variant="tonal"
+        closable></v-alert>
+</template>
+<script lang="ts">
+import type { PropType } from 'vue'
+import { getPublickEndPoint } from '~/utilities';
+interface IImage {
+    id?: number;
+    url: string;
+}
+export default defineComponent({
+    setup() {
+        return { getPublickEndPoint };
+    },
+    props: {
+        images: {
+            type: Array as PropType<IImage[]>
+        },
+        pending: Boolean,
+        error: Boolean
+    },
+})
+</script>

i18n.config.ts

@@ -3,13 +3,9 @@ import fa from "./locales/fa.json";
 
 export default defineI18nConfig(() => ({
     legacy: false,
-    locale: 'en',
+    locale: 'fa',
     messages: {
-        en: {
-            ...en
-        },
-        fa: {
-            ...fa
-        }
+        en: en,
+        fa: fa
     }
 }))

locales/en.json

@@ -1,3 +1,49 @@
 {
-    "tool for capturing web pages": "A tool for capturing web pages"
+    "index.banner.title": "A tool for capturing web pages",
+    "index.banner.subtitle": "Fast, Free, Realtime",
+    "index.banner.capture": "Capture",
+    "index.banner.start": "Get Started",
+    "index.intro.title": "Screenshot capturing is instant",
+    "index.intro.content": "We are the only website that capture instant screenshots that provides you with images as soon as you request them. Try it out using our free API.",
+    "index.how-to-use.title": "Try it now!",
+    "index.how-to-use.content": "Simply use the code below on your website:",
+    "index.options.title": "Advanced options",
+    "index.options.content": "There are more advanced options as well, you can change the image attribute by specifying the width and you can specify the number of pixels of the original website you want to crop. For instance:",
+    "index.options.code-explanation": "Photo captured from a 1200 x 1200 pixel browser. The code above shrinks the main screen to 100 pixels width and then crops 600 pixels of the image.",
+    "index.options.button": "See all options",
+    "pages.index": "Web Shot",
+    "pages.docs": "documents",
+    "pages.gallery": "gallery",
+    "pages.contact": "contact us",
+    "copy-right": "All rights are reserved.",
+    "documents.title": "API documentation",
+    "documents.subtitle": "an example of a url",
+    "documents.content": "Image modification options can be sent along with the website address in an url. Below is a complete list of options:",
+    "documents.btn": "capture image",
+    "documents.options.title": "Full list of image modifier options",
+    "documents.options.table.header.options": "Option",
+    "documents.options.table.header.type": "Type",
+    "documents.options.table.header.required": "Required",
+    "documents.options.table.header.description": "Description",
+    "documents.options.table.content.string": "string",
+    "documents.options.table.content.number": "number",
+    "documents.options.table.content.description.url": "The URL of the webpage you want to capture.",
+    "documents.options.table.content.description.width": "The desired width of the final screenshot in pixels.",
+    "documents.options.table.content.description.height": "The desired height of the final screenshot in pixels.",
+    "documents.options.table.content.description.maxAge": "Max age in seconds of image if it already cached. Min 10s.",
+    "documents.options.table.content.description.format": "Image format, possible values: \"jpeg\" or \"png\".",
+    "documents.options.table.content.description.fullPage": "Whether to take a screenshot of the full webpage or not.",
+    "documents.options.table.content.description.timeout": "The max time in ms to wait for the page to load. Min 2000, Max 15000.",
+    "documents.options.table.content.description.viewportWidth": "The page width in pixel. Min 320, Max 4096.",
+    "documents.options.table.content.description.viewportHeight": "The page height in pixel. Min 320, Max 4096.",
+    "gallery.title": "Gallery",
+    "gallery.content.part1": "Take a look at webshot images from",
+    "gallery.content.part2": "top websites. ",
+    "gallery.content.part3": "Our programming interface provides high quality images receives and stores them on a network infrastructure to deliver them as quickly as possible.",
+    "contact.title": "Contact Us",
+    "contact.content": "If you have any questions or comments, you can contact [email protected]. We will answer you within one working day.",
+    "contact.subtitle": "Ways of communication",
+    "contact.ways.email": "Email:",
+    "contact.ways.phone": "Phone:",
+    "fetch-data.error.server": "Server error"
 }

locales/fa.json

@@ -1,3 +1,49 @@
 {
-    "tool for capturing web pages": "ابزاری برای تصویر صفحات وب"
+    "index.banner.title": "ابزاری برای تصویر صفحات وب",
+    "index.banner.subtitle": "سریع، رایگان و بروز",
+    "index.banner.capture": "مشاهده تصویر",
+    "index.banner.start": "شروع!",
+    "index.intro.title": "تهیه تصاویر به صورت مستقیم انجام میشود",
+    "index.intro.content": "ما تنها تولید کننده ی عکس فوری وب سایت هستیم تا به محض اینکه شما آنها را درخواست می کنید تصاویر را در اختیارتان بگذاریم. با استفاده از رابط برنامه نویسی رایگان ما آن را امتحان کنید.",
+    "index.how-to-use.title": "همین حالا امتحان کنید!",
+    "index.how-to-use.content": "به سادگی از کد زیر در وبسایت خود استفاده کنید:",
+    "index.options.title": "گزینه های پیشرفته",
+    "index.options.content": "گزینه های پیشرفته تر نیز وجود دارد، شما می توانید با تعیین عرض مشخصه تصویر را تغییر دهید و شما می توانید تعداد پیکسل های وب سایت اصلی که می خواهید برش دهید تعیین کنید. مثلا:",
+    "index.options.code-explanation": "عکس از یک مرورگر 1200 در 1200 پیکسل گرفته شده است. کد بالا، صفحه نمایش اصلی را به 100 پیکسل عرض می برد و سپس 600 پیکسل از تصویر را می برد.",
+    "index.options.button": "مشاهده لیست کلی گزینه ها",
+    "pages.index": "وب شات",
+    "pages.docs": "مستندات",
+    "pages.gallery": "گالری",
+    "pages.contact": "تماس با ما",
+    "copy-right": "کلیه ی حقوق مادی و معنوی این سایت محفوظ می باشد.",
+    "documents.title": "مستندات رابط برنامه نویسی",
+    "documents.subtitle": "مثال آدرس اینترنتی",
+    "documents.content": "گزینه های اصلاح تصویر میتوانند به همراه آدرس وب سایت در آدرسی اینترنتی ارسال شوند. در زیر لیستی کامل از گزینه ها را مشاهده می کنید:",
+    "documents.btn": "مشاهده ی تصویر وب سایت",
+    "documents.options.title": "لیست کامل گزینه های اصلاح کننده تصویر",
+    "documents.options.table.header.options": "گزینه",
+    "documents.options.table.header.type": "نوع",
+    "documents.options.table.header.required": "اجباری",
+    "documents.options.table.header.description": "توضیحات",
+    "documents.options.table.content.string": "رشته",
+    "documents.options.table.content.number": "عدد",
+    "documents.options.table.content.description.url": "آدرس اینترنتی وبسایت مقصد",
+    "documents.options.table.content.description.width": "عرض تصویر (پیشفرض: 600px)",
+    "documents.options.table.content.description.height": "ارتفاع تصویر (پیشفرض: 1200px)",
+    "documents.options.table.content.description.maxAge": "مقدار زمان مشخص در واحد ثانیه برای بروزرسانی تصویر ذخیره شده (حداقل 10 ثانیه)",
+    "documents.options.table.content.description.format": "نوع تصویر (\"jpeg\" یا \"png\")",
+    "documents.options.table.content.description.fullPage": "تصویر شامل کل صفحه ی وب سایت باشد یا خیر",
+    "documents.options.table.content.description.timeout": "مدت زمان انتظار بعد از بارگزاری صفحه و تهیه تصویر بعد از این زمان (حداقل: 2000 و حداکثر: 15000)",
+    "documents.options.table.content.description.viewportWidth": "تصویر صفحه وب سایت در عرض مشخص شده ذخیره خواهد شد (حداقل: 320 و حداکثر: 4096)",
+    "documents.options.table.content.description.viewportHeight": "تصویر صفحه وب سایت در ارتفاع مشخص شده ذخیره خواهد شد (حداقل: 320 و حداکثر: 4096)",
+    "gallery.title": "گالری تصاویر",
+    "gallery.content.part1": "نگاهی به تصاویر وب شات از",
+    "gallery.content.part2": "وبسایت برتر. ",
+    "gallery.content.part3": "رابط برنامه نویسی ما تصاویری با کیفیت بالا را دریافت می کند و آنها را بر روی یک زیر ساخت شبکه نگهداری می کند تا در سریع ترین زمان آنها را تحویل دهد.",
+    "contact.title": "تماس با ما",
+    "contact.content": "اگر سوال و یا نظری دارید میتوانید با ایمیل [email protected] در ارتباط باشد. به فاصله ی یک روز کاری پاسختان را خواهیم داد. ",
+    "contact.subtitle": "راه های ارتباطی",
+    "contact.ways.email": "ایمیل:",
+    "contact.ways.phone": "تلفن:",
+    "fetch-data.error.server": "خطای سرور"
 }

nuxt.config.ts

@@ -20,26 +20,28 @@ export default defineNuxtConfig({
     //...
   ],
   i18n: {
-    vueI18n: './i18n.config.ts'
-  },
+    vueI18n: './i18n.config.ts',
+    locales: ['en', 'fa'],
+    defaultLocale: 'en',
+},
   vite: {
-    vue: {
-      template: {
-        transformAssetUrls,
-      },
+  vue: {
+    template: {
+      transformAssetUrls,
     },
   },
+},
   nitro: {
-    storage: {
-      captures: {
-        driver: 'fs',
-        base: './.data/captures'
-      }
-    },
-    rollupConfig: {
-      plugins: [
-        image()
-      ]
+  storage: {
+    captures: {
+      driver: 'fs',
+      base: './.data/captures'
     }
+  },
+  rollupConfig: {
+    plugins: [
+      image()
+    ]
   }
+}
 })

package.json

@@ -13,6 +13,7 @@
     "@mdi/font": "^7.4.47",
     "@prisma/client": "^5.12.0",
     "async-mutex": "^0.5.0",
+    "flag-icons": "^7.2.1",
     "nuxt": "^3.11.2",
     "puppeteer": "^22.6.3",
     "satori": "^0.9.1",
@@ -25,10 +26,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
     "@rollup/plugin-image": "^3.0.3",
     "prisma": "^5.12.1",
     "sass": "^1.74.1",
-    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
     "sass-loader": "^14.1.1",
     "unplugin-font-to-buffer": "^0.2.0",
     "vite-plugin-vuetify": "^2.0.3",