fix: improve bench score (#109)

clemcode · Feb 6, 2023 · c8d6648 · c8d6648
1 parent 1de488c
commit c8d6648
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 8 deletions.
diff --git a/.docs/nuxt.config.ts b/.docs/nuxt.config.ts
@@ -4,9 +4,12 @@ export default defineNuxtConfig({
   typescript: { includeWorkspace: true },
   app: {
     head: {
+      htmlAttrs: {
+        lang: 'en'
+      },
       link: [
         { rel: 'stylesheet', href: '/css/supreme.css' }
       ]
     }
-  }
+  },
 })
diff --git a/.docs/public/robots.txt b/.docs/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/.docs/tokens.config.ts b/.docs/tokens.config.ts
@@ -2,6 +2,6 @@ import { defineTheme } from 'pinceau'
 
 export default defineTheme({
   font: {
-    sans: 'Supreme'
+    sans: 'Supreme, 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',
   }
 })
diff --git a/assets/main.css b/assets/main.css
@@ -1,6 +1,5 @@
 html {
   background-color: $dt('color.gray.100');
-  /* font-family: ClashGrotesk; */
 }
 
 html.dark {

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
@@ -67,7 +67,6 @@ css({
     '.message': {
       textAlign: 'center',
       marginBottom: '{space.4}',
-      color: '{elements.text.secondary.color.static}'
     },
     '.icons': {
       display: 'grid',

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -7,7 +7,7 @@ const show = ref(false)
 <template>
   <header :class="alpine.header.position || 'left'">
     <div class="menu">
-      <button @click="(show = !show)">
+      <button @click="(show = !show)" aria-label="Navigation Menu">
         <svg width="24" height="24" viewBox="0 0 68 68" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path d="M8 34C8 32.1362 8 31.2044 8.30448 30.4693C8.71046 29.4892 9.48915 28.7105 10.4693 28.3045C11.2044 28 12.1362 28 14 28C15.8638 28 16.7956 28 17.5307 28.3045C18.5108 28.7105 19.2895 29.4892 19.6955 30.4693C20 31.2044 20 32.1362 20 34C20 35.8638 20 36.7956 19.6955 37.5307C19.2895 38.5108 18.5108 39.2895 17.5307 39.6955C16.7956 40 15.8638 40 14 40C12.1362 40 11.2044 40 10.4693 39.6955C9.48915 39.2895 8.71046 38.5108 8.30448 37.5307C8 36.7956 8 35.8638 8 34Z" />
           <path d="M28 34C28 32.1362 28 31.2044 28.3045 30.4693C28.7105 29.4892 29.4892 28.7105 30.4693 28.3045C31.2044 28 32.1362 28 34 28C35.8638 28 36.7956 28 37.5307 28.3045C38.5108 28.7105 39.2895 29.4892 39.6955 30.4693C40 31.2044 40 32.1362 40 34C40 35.8638 40 36.7956 39.6955 37.5307C39.2895 38.5108 38.5108 39.2895 37.5307 39.6955C36.7956 40 35.8638 40 34 40C32.1362 40 31.2044 40 30.4693 39.6955C29.4892 39.2895 28.7105 38.5108 28.3045 37.5307C28 36.7956 28 35.8638 28 34Z" />
@@ -22,8 +22,10 @@ const show = ref(false)
 
     <div class="logo">
       <NuxtLink v-if="alpine.header.logo" to="/">
-        <NuxtImg class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt" />
-        <NuxtImg class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt" />
+        <!-- TODO: width/height doesn't make much sense here, but Lighthouse requires it. 
+        Used current Alpine logo ratio, will break on enduser logo -->
+        <NuxtImg class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt" width="89" height="31" />
+        <NuxtImg class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt" width="89" height="31" />
       </NuxtLink>
       <NuxtLink v-else to="/" class="fallback">
         {{ alpine.title }}
@@ -49,6 +51,7 @@ css({
     py: 'var(--header-padding)',
     '.menu': {
       position: 'absolute',
+      display: 'flex',
       ':hover': {
         color: '{color.primary.500}',
       },

diff --git a/components/content/ArticlesListItem.vue b/components/content/ArticlesListItem.vue
@@ -26,7 +26,7 @@ defineProps({
   <article v-if="article._path && article.title" :class="{ 'featured': featured }">
     <div class="image">
       <NuxtLink :to="article._path">
-        <NuxtImg v-if="article.cover" :src="article.cover" :alt="article.title" />
+        <NuxtImg v-if="article.cover" :src="article.cover" :alt="article.title" width="16" height="9" />
       </NuxtLink>
     </div>
 
@@ -60,6 +60,7 @@ css({
       }
     },
     img: {
+      width: '100%',
       aspectRatio: '16 / 9',
       objectFit: 'cover',
       borderRadius: '{radii.md}',

diff --git a/components/content/Gallery.vue b/components/content/Gallery.vue
@@ -18,6 +18,8 @@ defineProps({
         v-for="(image, index) in images"
         :key="index"
         :src="image"
+        :width="16"
+        :height="9"
       />
     </div>
   </section>

diff --git a/components/content/Hero.vue b/components/content/Hero.vue
@@ -35,6 +35,8 @@ defineProps({
         :class="imagePosition"
         :src="image"
         :alt="imageAlt"
+        :width="16"
+        :height="9"
       />
     </div>
   </section>