News Site Nuxt - Images (#450)

resources/newssite/news-nuxt/README.md

@@ -34,3 +34,7 @@ Add, commit and push changes to the working branch.
 
 The Speedometer test consists of navigating between the different pages of the news site.
 It includes interactions with the navigation drop-down menu to ensure state changes happen in between the page navigations.
+
+## Images license
+
+[Unsplash License](https://unsplash.com/license)

resources/newssite/news-nuxt/components/atoms/ArticleImage.vue

@@ -16,7 +16,7 @@ export default {
 </script>
 
 <template>
-    <div v-if="image" :class="imageClass">
+    <div v-if="image" :class="imageClass" style="width: auto">
         <img :class="styles['article-image']" :src="image.src" :width="image.width" :height="image.height" :alt="image.alt" />
         <ArticleTag :tag="meta?.tag" />
     </div>

resources/newssite/news-nuxt/data/index.js

@@ -1,22 +1,22 @@
-import { content as contentEn } from "~/data/en/content";
-import { content as contentJp } from "~/data/jp/content";
-import { content as contentAr } from "~/data/ar/content";
+import { content as contentEn } from "@/data/en/content";
+import { content as contentJp } from "@/data/jp/content";
+import { content as contentAr } from "@/data/ar/content";
 
-import { settings as settingsEn } from "~/data/en/dialog";
-import { settings as settingsJp } from "~/data/jp/dialog";
-import { settings as settingsAr } from "~/data/ar/dialog";
+import { settings as settingsEn } from "@/data/en/dialog";
+import { settings as settingsJp } from "@/data/jp/dialog";
+import { settings as settingsAr } from "@/data/ar/dialog";
 
-import { footer as footerEn } from "~/data/en/footer";
-import { footer as footerJp } from "~/data/jp/footer";
-import { footer as footerAr } from "~/data/ar/footer";
+import { footer as footerEn } from "@/data/en/footer";
+import { footer as footerJp } from "@/data/jp/footer";
+import { footer as footerAr } from "@/data/ar/footer";
 
-import * as buttonsEn from "~/data/en/buttons";
-import * as buttonsJp from "~/data/jp/buttons";
-import * as buttonsAr from "~/data/ar/buttons";
+import * as buttonsEn from "@/data/en/buttons";
+import * as buttonsJp from "@/data/jp/buttons";
+import * as buttonsAr from "@/data/ar/buttons";
 
-import * as linksEn from "~/data/en/links";
-import * as linksJp from "~/data/jp/links";
-import * as linksAr from "~/data/ar/links";
+import * as linksEn from "@/data/en/links";
+import * as linksJp from "@/data/jp/links";
+import * as linksAr from "@/data/ar/links";
 
 export const dataSource = {
     en: {

resources/newssite/news-nuxt/dist/404.html

@@ -3,6 +3,6 @@
 <head><meta charset="utf-8">
 <title>The Daily Broadcast</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="description" content="A news site developed with Nuxt."><link rel="modulepreload" as="script" crossorigin href="./_nuxt/entry.6023314e.js"><link rel="preload" as="style" href="./_nuxt/entry.4163a698.css"><link rel="prefetch" as="script" crossorigin href="./_nuxt/error-component.df420153.js"><link rel="stylesheet" href="./_nuxt/entry.4163a698.css"></head>
-<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"./",buildAssetsDir:"/_nuxt/",cdnURL:"./"}}</script><script type="module" src="./_nuxt/entry.6023314e.js" crossorigin></script></body>
+<meta name="description" content="A news site developed with Nuxt."><link rel="modulepreload" as="script" crossorigin href="./_nuxt/entry.ab49470b.js"><link rel="preload" as="style" href="./_nuxt/entry.4163a698.css"><link rel="prefetch" as="script" crossorigin href="./_nuxt/error-component.98713fee.js"><link rel="stylesheet" href="./_nuxt/entry.4163a698.css"></head>
+<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"./",buildAssetsDir:"/_nuxt/",cdnURL:"./"}}</script><script type="module" src="./_nuxt/entry.ab49470b.js" crossorigin></script></body>
 </html>

resources/newssite/news-nuxt/dist/_nuxt/error-404.cfea4b42.js

@@ -1 +1 @@
-import{a,b as n,o as r,e as d,f as e,t as s,h as l,w as c,i as p,j as f,p as h,k as x}from"./entry.6023314e.js";const m=t=>(h("data-v-30d2164e"),t=t(),x(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),_={class:"max-w-520px text-center z-20"},b=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),d("div",u,[g,e("div",_,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,b),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[l(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-30d2164e"]]);export{z as default};
+import{a,b as n,o as r,e as d,f as e,t as s,h as l,w as c,i as p,j as f,p as h,k as x}from"./entry.ab49470b.js";const m=t=>(h("data-v-30d2164e"),t=t(),x(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),_={class:"max-w-520px text-center z-20"},b=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),d("div",u,[g,e("div",_,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,b),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[l(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-30d2164e"]]);export{z as default};

resources/newssite/news-nuxt/dist/_nuxt/error-500.24e732f2.js

@@ -1 +1 @@
-import{a as i,b as a,o as r,e as n,f as e,t as s,p as l,k as d}from"./entry.6023314e.js";const c=t=>(l("data-v-32388612"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(b,u)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-32388612"]]);export{w as default};
+import{a as i,b as a,o as r,e as n,f as e,t as s,p as l,k as d}from"./entry.ab49470b.js";const c=t=>(l("data-v-32388612"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(b,u)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-32388612"]]);export{w as default};

resources/newssite/news-nuxt/dist/_nuxt/error-component.98713fee.js

@@ -1,3 +1,3 @@
-import{o as m,c as E,n as f,g,u as s,d as n,_ as a}from"./entry.6023314e.js";const k={__name:"nuxt-error-page",props:{error:Object},setup(c){const u=c,{error:t}=u;(t.stack||"").split(`
+import{o as m,c as E,n as f,g,u as s,d as n,_ as a}from"./entry.ab49470b.js";const k={__name:"nuxt-error-page",props:{error:Object},setup(c){const u=c,{error:t}=u;(t.stack||"").split(`
 `).splice(1).map(e=>({text:e.replace("webpack:/","").replace(".vue",".js").trim(),internal:e.includes("node_modules")&&!e.includes(".cache")||e.includes("internal")||e.includes("new Promise")})).map(e=>`<span class="stack${e.internal?" internal":""}">${e.text}</span>`).join(`
-`);const r=Number(t.statusCode||500),o=r===404,i=t.statusMessage??(o?"Page Not Found":"Internal Server Error"),p=t.message||t.toString(),_=void 0,d=o?n(()=>a(()=>import("./error-404.5f4a11ab.js"),["./error-404.5f4a11ab.js","./entry.6023314e.js","./entry.4163a698.css","./error-404.23f2309d.css"],import.meta.url).then(e=>e.default||e)):n(()=>a(()=>import("./error-500.75fd0b91.js"),["./error-500.75fd0b91.js","./entry.6023314e.js","./entry.4163a698.css","./error-500.aa16ed4d.css"],import.meta.url).then(e=>e.default||e));return(e,l)=>(m(),E(s(d),f(g({statusCode:s(r),statusMessage:s(i),description:s(p),stack:s(_)})),null,16))}},h=k;export{h as default};
+`);const r=Number(t.statusCode||500),o=r===404,i=t.statusMessage??(o?"Page Not Found":"Internal Server Error"),p=t.message||t.toString(),_=void 0,d=o?n(()=>a(()=>import("./error-404.cfea4b42.js"),["./error-404.cfea4b42.js","./entry.ab49470b.js","./entry.4163a698.css","./error-404.23f2309d.css"],import.meta.url).then(e=>e.default||e)):n(()=>a(()=>import("./error-500.24e732f2.js"),["./error-500.24e732f2.js","./entry.ab49470b.js","./entry.4163a698.css","./error-500.aa16ed4d.css"],import.meta.url).then(e=>e.default||e));return(e,l)=>(m(),E(s(d),f(g({statusCode:s(r),statusMessage:s(i),description:s(p),stack:s(_)})),null,16))}},h=k;export{h as default};