Fix .htaccess handling in Vite build

Added .htaccess file
SEO and OG
2025-12-04 20:15:56 +02:00 · 2025-12-04 20:07:24 +02:00 · 2025-12-04 19:58:29 +02:00 · 2025-12-04 19:38:18 +02:00 · 2025-12-04 19:12:08 +02:00 · 2025-12-02 20:11:12 +02:00
16 changed files with 252 additions and 69 deletions
--- a/index.html
+++ b/index.html
@@ -1,10 +1,58 @@
 <!doctype html>
-<html lang="">
+<html lang="fi">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tietokonepaja</title>
+
+    <!-- Primary Meta Tags -->
+    <title>Tietokonepaja - IT-tuki, Kotisivut, Laitehuollot ja Linux-palvelut</title>
+    <meta
+      name="title"
+      content="Tietokonepaja - IT-tuki, Kotisivut, Laitehuollot ja Linux-palvelut"
+    />
+    <meta
+      name="description"
+      content="Livonsaaren Tietokonepaja tarjoaa ammattitaitoista IT-tukea, responsiivisia kotisivuja, laitehuoltoja ja Linux-asennuksia. Palvelemme yrityksiä ja yksityishenkilöitä - ota yhteyttä!"
+    />
+    <meta
+      name="keywords"
+      content="tietokonepaja, IT-tuki, kotisivut, verkkosivut, laitehuolto, tietokoneen korjaus, Linux, tietotekniikka, Livonsaari"
+    />
+    <meta name="author" content="Tietokonepaja" />
+    <meta name="robots" content="index, follow" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://tietokonepaja.fi/" />
+    <meta
+      property="og:title"
+      content="Tietokonepaja - IT-tuki, Kotisivut, Laitehuollot ja Linux-palvelut"
+    />
+    <meta
+      property="og:description"
+      content="Livonsaaren Tietokonepaja tarjoaa ammattitaitoista IT-tukea, responsiivisia kotisivuja, laitehuoltoja ja Linux-asennuksia. Palvelemme yrityksiä ja yksityishenkilöitä - ota yhteyttä!"
+    />
+    <meta property="og:locale" content="fi_FI" />
+    <meta property="og:site_name" content="Tietokonepaja" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://tietokonepaja.fi/" />
+    <meta
+      property="twitter:title"
+      content="Tietokonepaja - IT-tuki, Kotisivut, Laitehuollot ja Linux-palvelut"
+    />
+    <meta
+      property="twitter:description"
+      content="Livonsaaren Tietokonepaja tarjoaa ammattitaitoista IT-tukea, responsiivisia kotisivuja, laitehuoltoja ja Linux-asennuksia. Palvelemme yrityksiä ja yksityishenkilöitä - ota yhteyttä!"
+    />
+
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://tietokonepaja.fi/" />
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#2c3e50" />
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "tietokonepaja-fi",
-  "version": "0.0.0",
+  "version": "1.0.0",
  "private": true,
  "type": "module",
  "engines": {
@@ -8,7 +8,7 @@
  },
  "scripts": {
    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-p type-check \"build-only {@}\" -- && cp public/.htaccess dist/.htaccess",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -0,0 +1,21 @@
+<IfModule mod_negotiation.c>
+  Options -MultiViews
+</IfModule>
+
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  
+  # Handle Authorization Header
+  RewriteCond %{HTTP:Authorization} .
+  RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+  
+  # Redirect Trailing Slashes If Not A Folder...
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{REQUEST_URI} (.+)/$
+  RewriteRule ^ %1 [L,R=301]
+  
+  # Send Requests To Front Controller...
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule ^ index.html [L]
+</IfModule>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -33,6 +33,10 @@
  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

+  /* Anchor colors for better distinction */
+  --color-link: #3b82f6;
+  --color-link-hover: #1d4ed8;
+
  /* SVG/Icon colors */
  --color-svg-fill: #000000;
  --color-svg-stroke: #000000;
@@ -52,6 +56,10 @@ html.dark {
  --color-heading: var(--vt-c-text-dark-1);
  --color-text: var(--vt-c-text-dark-2);

+  /* Anchor colors for dark theme */
+  --color-link: #60a5fa;
+  --color-link-hover: #93c5fd;
+
  /* SVG/Icon colors for dark theme */
  --color-svg-fill: #ffffff;
  --color-svg-stroke: #ffffff;
@@ -69,6 +77,10 @@ html.light {
  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

+  /* Anchor colors for light theme */
+  --color-link: #3b82f6;
+  --color-link-hover: #1d4ed8;
+
  /* SVG/Icon colors for light theme */
  --color-svg-fill: #000000;
  --color-svg-stroke: #000000;
@@ -87,6 +99,10 @@ html.light {
    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);

+    /* Anchor colors for dark theme */
+    --color-link: #60a5fa;
+    --color-link-hover: #93c5fd;
+
    /* SVG/Icon colors for dark theme */
    --color-svg-fill: #ffffff;
    --color-svg-stroke: #ffffff;
--- a/src/assets/jani.png
+++ b/src/assets/jani.png
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,17 +7,17 @@
  font-weight: normal;
 }

-a,
-.green {
+a {
  text-decoration: none;
-  color: rgb(60, 60, 60);
+  color: var(--color-link);
  transition: 0.4s;
  padding: 3px;
 }

@media (hover: hover) {
  a:hover {
-    background-color: hsla(0, 0%, 17%, 0.2);
+    color: var(--color-link-hover);
+    background-color: var(--color-background-soft);
  }
 }

--- a/src/assets/veikko.png
+++ b/src/assets/veikko.png
--- a/src/components/HomeSection.vue
+++ b/src/components/HomeSection.vue
@@ -7,6 +7,17 @@ import IconRepair from './icons/IconRepair.vue'
 </script>

 <template>
+  <ServiceItem>
+    <template #icon>
+      <IconHomesite />
+    </template>
+    <template #heading>Kotisivut</template>
+
+    Tarvitsetko kotisivut yrityksellesi tai yhdistyksellesi? Suunnittelemme ja toteutamme
+    responsiiviset ja käyttäjäystävälliset kotisivut, jotka vastaavat tarpeitasi ja edistävät
+    näkyvyyttäsi verkossa.
+  </ServiceItem>
+
  <ServiceItem>
    <template #icon>
      <IconItSupport />
@@ -28,17 +39,6 @@ import IconRepair from './icons/IconRepair.vue'
    moitteettomasti.
  </ServiceItem>

-  <ServiceItem>
-    <template #icon>
-      <IconHomesite />
-    </template>
-    <template #heading>Kotisivut</template>
-
-    Tarvitsetko kotisivut yrityksellesi tai yhdistyksellesi? Suunnittelemme ja toteutamme
-    responsiiviset ja käyttäjäystävälliset kotisivut, jotka vastaavat tarpeitasi ja edistävät
-    näkyvyyttäsi verkossa.
-  </ServiceItem>
-
  <ServiceItem>
    <template #icon>
      <IconLinux />
@@ -46,6 +46,7 @@ import IconRepair from './icons/IconRepair.vue'
    <template #heading>Linux</template>

    Vapaat ohjelmistot ja avoin lähdekoodi on lähellä sydäntämme. Tarjoamme Linux-käyttöjärjestelmä
-    tukea ja asennuksia huokeasti. Tilaa päivitys Windowsista tai MacOS:stä Linuxiin ilmaiseksi!
+    tukea ja asennuksia huokeasti. Mikäli vaihdat pois Windowsista, saat Linux asennuksen
+    ilmaiseksi!
  </ServiceItem>
 </template>
--- a/src/components/WelcomeText.vue
+++ b/src/components/WelcomeText.vue
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      Tervetuloa Livonsaaren Tietokonepajan verkkosivuille! Tarjoamme kattavia IT-palveluita,
-      laitehuoltoja, kotisivuratkaisuja ja Linux-tukea. Tutustu palveluihimme ja ota yhteyttä!
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
--- a/src/components/icons/IconEmail.vue
+++ b/src/components/icons/IconEmail.vue
@@ -0,0 +1,35 @@
+<template>
+  <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7"
+      stroke="#000000"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <rect
+      x="3"
+      y="5"
+      width="18"
+      height="14"
+      rx="2"
+      stroke="#000000"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  height: 30px;
+  width: 30px;
+  flex-shrink: 0;
+}
+
+.icon path,
+.icon rect {
+  stroke: var(--color-svg-stroke);
+  transition: stroke 0.3s ease;
+}
+</style>
--- a/src/components/icons/IconPhone.vue
+++ b/src/components/icons/IconPhone.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z"
+      stroke="#000000"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  height: 30px;
+  width: 30px;
+  flex-shrink: 0;
+}
+
+.icon path {
+  stroke: var(--color-svg-stroke);
+  transition: stroke 0.3s ease;
+}
+</style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,7 +15,7 @@ const router = createRouter({
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
+      component: () => import('../views/InfoView.vue'),
    },
    {
      path: '/contact',
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,12 +1,53 @@
+<script setup lang="ts">
+import IconEmail from '@/components/icons/IconEmail.vue'
+import IconPhone from '@/components/icons/IconPhone.vue'
+</script>
+
 <template>
  <div class="contact">
    <div class="contact-item">
      <div class="details">
-        <h3>Yhteystietomme</h3>
-        <p>
-          Voit ottaa meihin yhteyttä sähköpostitse osoitteeseen
-          <a href="mailto:info@tietokonepaja.fi">info@tietokonepaja.fi</a>.
-        </p>
+        <h3>Keitä me olemme</h3>
+        <div class="contact-person-container">
+          <div class="contact-person">
+            <strong>Veikko</strong>
+            <img
+              src="@/assets/veikko.png"
+              alt="Veikon kuva"
+              style="
+                width: 100px;
+                height: auto;
+                display: block;
+                margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
+              "
+            />
+          </div>
+          <div class="contact-person">
+            <strong>Jani</strong>
+            <img
+              src="@/assets/jani.png"
+              alt="Janin kuva"
+              style="
+                width: 100px;
+                height: auto;
+                display: block;
+                margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
+              "
+            />
+          </div>
+        </div>
+        <h4>Yhteydenotot</h4>
+
+        <div class="contact-info">
+          <IconEmail />
+          <a href="mailto:info@tietokonepaja.fi">info@tietokonepaja.fi</a>
+        </div>
+        <div class="contact-info">
+          <IconPhone />
+          +358 442373706 (Veikko)
+        </div>
      </div>
    </div>
  </div>
@@ -28,6 +69,27 @@
  margin-left: 1rem;
 }

+.contact-person-container {
+  display: flex;
+  gap: 2rem;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.contact-person {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-direction: column;
+}
+
+.contact-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
 h3 {
  font-size: 1.2rem;
  font-weight: 500;
@@ -35,6 +97,14 @@ h3 {
  color: var(--color-heading);
 }

+h4 {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 1rem;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
 p {
  color: var(--color-text);
  line-height: 1.6;
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Home from '../components/Home.vue'
+import Home from '../components/HomeSection.vue'
 </script>

 <template>
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -17,8 +17,8 @@
        <h3>Arvomme</h3>
        <ul>
          <li>
-            <strong>Ihmislähtöisyys:</strong> Laitteiden ja palveluiden tulee aina helpottaa
-            käyttäjiensä elämää. Ei vaikeuttaa sitä.
+            <strong>Järkevyys:</strong> Laitteiden ja palveluiden tulee aina helpottaa käyttäjiensä
+            elämää. Ei vaikeuttaa sitä.
          </li>
          <li>
            <strong>Hallinta:</strong> Käyttäjän tulee voida itse määritellä mitä laite tai
@@ -49,6 +49,10 @@
 </template>

 <style scoped>
+strong {
+  font-weight: 600;
+}
+
 .about-item {
  margin-top: 2rem;
  display: flex;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,4 +17,8 @@ export default defineConfig({
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
+  publicDir: 'public',
+  build: {
+    copyPublicDir: true,
+  },
 })
Author	SHA1	Message	Date
Veikko Lintujärvi	69290f3192	Fix .htaccess handling in Vite build	2025-12-04 20:15:56 +02:00
Veikko Lintujärvi	005fb89254	Added .htaccess file	2025-12-04 20:07:24 +02:00
Veikko Lintujärvi	8c65a640bc	SEO and OG	2025-12-04 19:58:29 +02:00
Veikko Lintujärvi	960e1cac9b	Improved contact page	2025-12-04 19:38:18 +02:00
Veikko Lintujärvi	5d84bf44c6	Text fixes	2025-12-04 19:12:08 +02:00
Veikko Lintujärvi	7419780032	Text changes and renaming	2025-12-02 20:11:12 +02:00
Veikko Lintujärvi	a64e5b0aa4	Naming fixes	2025-12-02 19:28:12 +02:00
Veikko Lintujärvi	1dcd7f2161	Rearrange service item list	2025-12-02 18:31:40 +02:00
Veikko Lintujärvi	e513b032e9	Bimb up to first major version	2025-11-15 19:38:50 +02:00
Veikko Lintujärvi	2d0c89256c	Fix link text color	2025-11-15 19:23:10 +02:00