Scraping actor profiles from FreeOnes.

assets/components/actor/actor.vue

@@ -20,30 +20,50 @@
                     <span>{{ actor.aliases.join(', ') }}</span>
                 </li>
 
-                <li>
-                    <dfn class="bio-heading">Born in</dfn>
-                    <span v-if="actor.city">{{ actor.city }}</span>
-                    <span>{{ actor.country || 'Unknown' }}</span>
-                </li>
-
-                <li>
+                <li v-if="actor.birthdate">
                     <dfn class="bio-heading">Date of birth</dfn>
-                    <span>{{ actor.birthdate || 'Unknown' }}</span>
+                    <span>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }} ({{ age }})</span>
                 </li>
 
-                <li>
+                <li v-if="actor.birthCountry || actor.birthPlace">
+                    <dfn class="bio-heading">Born in</dfn>
+
+                    <span v-if="actor.birthCountry">
+                        <img
+                            class="flag"
+                            :src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.svg`"
+                        >{{ actor.birthCountry.name }}
+                    </span>
+
+                    <span v-if="actor.birthPlace">{{ actor.birthPlace }}</span>
+                </li>
+
+                <li v-if="actor.residenceCountry || actor.residencePlace">
+                    <dfn class="bio-heading">Lives in</dfn>
+
+                    <span v-if="actor.residenceCountry">
+                        <img
+                            class="flag"
+                            :src="`/img/flags/${actor.residenceCountry.alpha2.toLowerCase()}.svg`"
+                        >{{ actor.residenceCountry.name }}
+                    </span>
+
+                    <span v-if="actor.residencePlace">{{ actor.residencePlace }}</span>
+                </li>
+
+                <li v-if="actor.caucasion">
                     <dfn class="bio-heading">Ethnicity</dfn>
-                    <span>{{ actor.ethnicity || 'Unknown' }}</span>
+                    <span>{{ actor.ethnicity }}</span>
                 </li>
 
-                <li>
+                <li v-if="actor.height">
                     <dfn class="bio-heading">Height</dfn>
-                    <span>{{ actor.height || 'Unknown' }}</span>
+                    <span>{{ actor.height }}</span>
                 </li>
 
-                <li>
+                <li v-if="actor.gender !== 'male'">
                     <dfn class="bio-heading">Boobs</dfn>
-                    <span>Size: {{ actor.boobSize || 'Unknown' }}</span>
+                    <span v-if="actor.boobSize">{{ actor.boobSize }}</span>
                     <span v-if="actor.boobsNatural !== null">{{ actor.boobsNatural ? 'Natural' : 'Enhanced' }}</span>
                 </li>
             </ul>
@@ -57,9 +77,15 @@
 </template>
 
 <script>
+import dayjs from 'dayjs';
+
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
+function age() {
+    return dayjs(new Date()).diff(this.actor.birthdate, 'years');
+}
+
 async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
 }
@@ -85,6 +111,9 @@ export default {
             pageTitle: null,
         };
     },
+    computed: {
+        age,
+    },
     mounted,
     methods: {
         fetchReleases,
@@ -120,4 +149,10 @@ export default {
         content: ':';
     }
 }
+
+.flag {
+    height: 1rem;
+    border: solid 1px $shadow-weak;
+    margin: 0 .25rem 0 0;
+}
 </style>