Opensource Link and Info page updated (#7)

* 🧐 gtm added, events created

* 👽 app version added to info page, opensource icon added

* info page updated

* package.json updated

* opensource icon responsive feature added

* version updated

components/partials/app-header.vue

@@ -1,14 +1,26 @@
 <template>
  <header class="header" vertical-center>
  <div class="header__content" horizontal-center>
- <div class="site-info">
+ <div class="site-info" horizontal-center>
  <NuxtLink to="/">
  <img
  src="../../assets/svg/logo.svg"
  title="zelzele.io logo"
  alt="zelzele.io"
  />
  </NuxtLink>
+ <a
+ href="https://github.com/ahmetilhan24/zelzele.io"
+ target="_blank"
+ class="opensource"
+ vertical-center
+ >
+ <img
+ src="../../assets/svg/opensource.svg"
+ alt="Open source project"
+ title="Bu proje açık kaynaktır"
+ />
+ </a>
  </div>
  <div class="date">
  <span>{{ $dayjs().format("MMMM D, YYYY") }}</span>
@@ -35,10 +47,33 @@ const { $dayjs } = useNuxtApp();
  .site-info {
  display: flex;
  height: fit-content;
- img {
+ position: relative;
+ a {
+ height: 40px;
  width: 40px;
  @include small-device {
  width: 32px;
+ height: 32px;
+ }
+ &.opensource {
+ background-color: $white;
+ border-radius: 50%;
+ border: 1px solid $gray-two;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ right: -5px;
+ top: -5px;
+ @include small-device {
+ width: 16px;
+ height: 16px;
+ right: -2px;
+ top: -2px;
+ }
+ }
+ img {
+ width: 100%;
+ height: 100%;
  }
  }
  }

nuxt.config.ts

@@ -1,5 +1,10 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import packageJson from "./package.json";
 export default defineNuxtConfig({
+ runtimeConfig: {
+ public: {
+ appVersion: packageJson.version,
+ },
+ },
  vite: {
  css: {
  preprocessorOptions: {

package.json

@@ -1,7 +1,12 @@
 {
  "name": "zelzele.io",
- "version": "1.1.0",
+ "version": "1.0.2",
  "private": true,
+ "author": {
+ "name": "Ahmet ilhan",
+ "email": "[email protected]",
+ "url": "https://ahmetilhan24.github.io/"
+ },
  "scripts": {
  "build": "nuxt build",
  "dev": "nuxt dev",

pages/info.vue

@@ -1,7 +1,8 @@
 <template>
  <div class="info" vertical-center>
- <div class="info__title" vertical-center>
+ <div class="info__title" horizontal-center>
  <h2>Zelzele.io</h2>
+ <span>v{{ config.public.appVersion }}</span>
  </div>
  <br />
  <div class="info__questions" vertical-center>
@@ -76,10 +77,27 @@
  hizmet etmektedir. Proje yayında olduğu sürece amacından kopmayacaktır.
  </p>
  <p>
- Bu proje açık kaynak olup
- <a href="https://github.com/ahmetilhan24/zelzele.io">Github</a>
+ Bu proje açık kaynak (<img
+ src="~~/assets/svg/opensource.svg"
+ alt="Opensource"
+ title="Bu proje açık kaynaktır"
+ width="20px"
+ height="20px"
+ />) olup
+ <a href="https://github.com/ahmetilhan24/zelzele.io" target="_blank"
+ >Github
+ </a>
  üzerinden desteklerinizi beklemektedir.
  </p>
+ <p>
+ Bir hata bildirmek ya da yeni bir özelik eklenmesini istiyorsanız şu
+ linkten bir issue(Talep) açın.
+ <a
+ href="https://github.com/ahmetilhan24/zelzele.io/issues"
+ target="_blank"
+ >Github Issues</a
+ >
+ </p>
  </div>
  <div class="info__note" vertical-center>
  <p>
@@ -92,6 +110,7 @@
  </div>
 </template>
 <script lang="ts" setup>
+const config = useRuntimeConfig();
 useHead({
  title: "Zelzele.io tanıtım ve bilgi sayfası",
  meta: [
@@ -119,7 +138,13 @@ useHead({
  }
  &__title {
  width: 100%;
- align-items: flex-start;
+ justify-content: flex-start;
+ span {
+ margin-left: 10px;
+ padding-top: 8px;
+ font-size: 12px;
+ font-weight: bold;
+ }
  }
  &__questions {
  width: 100%;