From 7cfac424e24b148b6d8507741fadee60e4557a0c Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 29 Sep 2022 02:47:07 +0200
Subject: [PATCH] refactor: adjust template structure

---
 src/views/AnatomyView.vue | 46 ++++++++++++++++++++++-----------------
 src/views/GeneralView.vue | 12 +++++++---
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index 2233f45..589ec01 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -16,6 +16,10 @@ const colors = [
 </script>
 
 <template>
+  <TextBlock>
+    <h1>{{ $route.meta.title }}</h1>
+  </TextBlock>
+
   <RefImage>
     <source
       srcset="
@@ -59,29 +63,31 @@ const colors = [
       strip of deep dark cedar brown. Arms and legs are distinguished by a light
       earthy brown.
     </p>
+  </TextBlock>
 
-    <RefImage>
-      <source
-        srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset
-        "
-      />
-      <source
-        srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset
-        "
-      />
-      <img
-        src="@/assets/viktor-front-SFW-alpha.png?w=700&png"
-        alt="Viktor frontal shot by sabertoofs"
-      />
+  <RefImage>
+    <source
+      srcset="
+        @/assets/viktor-front-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset
+      "
+    />
+    <source
+      srcset="
+        @/assets/viktor-front-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset
+      "
+    />
+    <img
+      src="@/assets/viktor-front-SFW-alpha.png?w=700&png"
+      alt="Viktor frontal shot by sabertoofs"
+    />
 
-      <template #caption>
-        Viktor frontal shot &copy;
-        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
-      </template>
-    </RefImage>
+    <template #caption>
+      Viktor frontal shot &copy;
+      <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+    </template>
+  </RefImage>
 
+  <TextBlock>
     <p>
       His entire body is speckled with scattered aquamarine spots, which come in
       pairs of one large and one small spot. The only exceptions are the spots
diff --git a/src/views/GeneralView.vue b/src/views/GeneralView.vue
index 01a5409..9df0fbe 100644
--- a/src/views/GeneralView.vue
+++ b/src/views/GeneralView.vue
@@ -49,6 +49,10 @@ const sexData = [
 </script>
 
 <template>
+  <TextBlock>
+    <h1>{{ $route.meta.title }}</h1>
+  </TextBlock>
+
   <DataTable :headings="heads" :data="data"></DataTable>
 
   <TextBlock>
@@ -76,15 +80,17 @@ const sexData = [
     <p>
       He likes things to be simple, which is why he is not a big fan of
       high-tech. He does have a smartphone, but he hates using it as much as he
-      dislikes the fact he’s dependent on owning one.
+      dislikes the fact he's dependent on owning one.
     </p>
   </TextBlock>
 
   <TextBlock>
     <h2>Sexuality</h2>
+  </TextBlock>
 
-    <DataTable :headings="sexHeads" :data="sexData"></DataTable>
+  <DataTable :headings="sexHeads" :data="sexData"></DataTable>
 
+  <TextBlock>
     <p>
       As a teenager, Viktor noticed that he felt a bit differently about the
       boys in his class. Especially in gym class, his eyes tended to linger
@@ -108,7 +114,7 @@ const sexData = [
       him out as his bro. At first his buddy was irritated by the offer, but
       eventually agreed. The two snuck into a bedroom at the host's place, where
       Viktor would let his buddy unload all the pent-up pressure inside him. He
-      wouldn’t remember much of the party, but what he didn’t forget how good it
+      wouldn't remember much of the party, but what he didn't forget how good it
       felt to give himself to another man.
     </p>
   </TextBlock>