🐛(site) Fix share overrides, small screen search, a2c langs (#765)

* Add share overrides for posts

* Add proper lang attributes to badge generator

Resolves #764

* Add a/button swap for small screen search

Resolves #763

* Fix functions not working in vars

* Made main a flex column

* Make search wrapper grow-able

* Make wrapper full-width

---------

Co-authored-by: Sam Richard <samrichard@google.com>

Author: Snugug

site/lib/sanity/queries.ts

@@ -37,7 +37,18 @@ export const coreQuery = `
       'slug': slug.current
     },
     body,
-    // share,
+    share != null => {
+      'share': {
+        share.image.asset != null => {
+          'image': {
+            'image': 'cms://' + share.image.asset._ref,
+            'alt': share.image.alt,
+          },
+        },
+        'title': coalesce(share.title, title),
+        'description':coalesce(share.description, description),
+      }
+    },
     tags[]->{
       title,
       'slug': slug.current

site/src/components/BadgeGenerator.svelte

@@ -122,7 +122,12 @@
               class="badge-generator--radio-label"
               for="input-badge-{badge.id}"
             >
-              <img src={badge.image} alt={badge.name} draggable="false" />
+              <img
+                src={badge.image}
+                alt={badge.name}
+                draggable="false"
+                lang={language}
+              />
               <Generic
                 cta={{
                   type: 'low',
@@ -154,6 +159,7 @@
         <p
           class="badge-generator--attribution-text"
           dir={i18n.rtl ? 'rtl' : 'ltr'}
+          lang={language}
         >
           {i18n.legal}
         </p>

site/src/components/SiteHeader.svelte

@@ -86,6 +86,11 @@
 
   <!-- Search Field -->
   <div class="header--search">
+    <a href={`/${lang}/search`} aria-label="Search" class="header--search-link">
+      <svg role="img" aria-hidden="true" class="icon">
+        <use bind:this={searchIcon} href="/images/icons/sprite.svg#search" />
+      </svg></a
+    >
     <button class="header--search-toggle" on:click={toggleSearch}>
       <svg role="img" aria-hidden="true" class="icon">
         <use bind:this={searchIcon} href="/images/icons/sprite.svg#search" />
@@ -176,7 +181,8 @@
     }
 
     &--menu,
-    &--search-toggle {
+    &--search-toggle,
+    &--search-link {
       background: none;
       border: 0;
       padding: 0;
@@ -242,11 +248,22 @@
       }
     }
 
+    &--search-link {
+      @media (min-width: 535px) {
+        display: none;
+      }
+    }
+
     &--search-toggle {
+      display: none;
       width: 2rem;
       margin-inline-start: auto;
       padding-inline-end: 0.25rem;
 
+      @media (min-width: 535px) {
+        display: block;
+      }
+
       [data-active-search] & {
         background-color: var(--grey-100);
       }

site/src/layouts/article.astro

@@ -1,4 +1,6 @@
 ---
+import type { Share } from '$types/sanity';
+
 import Wrapper from '$layouts/wrapper.astro';
 import Recommended from '$components/Recommended.svelte';
 
@@ -10,13 +12,20 @@ export interface Props {
     content: string;
   }>;
   microcopy: object;
+  share?: Share;
 }
 
-const { title, props = [], metadesc, microcopy } = Astro.props;
+const { title, props = [], metadesc, microcopy, share } = Astro.props;
 const { locale } = microcopy;
 ---
 
-<Wrapper title={title} metadesc={metadesc} locale={locale} props={props}>
+<Wrapper
+  title={title}
+  metadesc={metadesc}
+  locale={locale}
+  props={props}
+  share={share}
+>
   <article class="article">
     <div class="article--header">
       <slot name="header" />

site/src/layouts/wrapper.astro

@@ -1,5 +1,7 @@
 ---
 import type { Locale } from '$types/content';
+import type { Share } from '$types/sanity';
+
 import { pwaInfo } from 'virtual:pwa-info';
 import SiteHeader from '$components/SiteHeader.svelte';
 import Announcement from '$components/Announcement.astro';
@@ -19,9 +21,10 @@ export interface Props {
     content: string;
   }>;
   locale: Locale;
+  share?: Share;
 }
 
-const { title, props = [], locale, metadesc } = Astro.props;
+const { title, props = [], locale, metadesc, share } = Astro.props;
 
 // TODO: get all availabe languages for current content
 const languages = [];
@@ -70,6 +73,22 @@ const t =
     {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
     <link rel="icon" type="image/png" href="ix://icons/favicon.png" />
     <link rel="apple-touch-icon" href="/images/icons/pwa/icon-192x192.png" />
+    <!-- Open Graph -->
+    {
+      share && (
+        <>
+          <meta property="og:title" content={share.title} />
+          <meta property="og:description" content={share.description} />
+          {share.image && (
+            <>
+              <meta property="og:image" content={share.image.image} />
+              <meta property="og:image:alt" content={share.image.alt} />
+            </>
+          )}
+        </>
+      )
+    }
+    <meta property="og:url" content={l10nURL(Astro.url, locale.code)} />
     {
       props.map((prop) => {
         return <meta property={`og:${prop.property}`} content={prop.content} />;

site/src/pages/[lang]/posts/[page].astro

@@ -9,7 +9,7 @@ import { posts, microcopy as micro } from '$lib/sanity';
 import type { PostHeroProps } from '$components/PostHero.svelte';
 import Text from '$components/Text.astro';
 import { buildTOC } from '$lib/portabletext';
-import type { Microcopy } from '$types/sanity';
+import type { Microcopy, Share } from '$types/sanity';
 
 /**
  * Builds paths for news pagination
@@ -71,9 +71,15 @@ const authors = {
 };
 
 const toc = buildTOC(post.body);
+const share = (post.share as Share) || null;
 ---
 
-<Article title={post.title} metadesc={post.description} microcopy={microcopy}>
+<Article
+  title={post.title}
+  metadesc={post.description}
+  microcopy={microcopy}
+  share={share}
+>
   <Fragment slot="header">
     <PostHero {...hero} />
   </Fragment>

site/src/pages/[lang]/search.astro

@@ -49,7 +49,7 @@ const { locale } = microcopy;
 <style lang="scss">
   .wrapper {
     background-color: var(--grey-100);
-    min-height: 100%;
+    flex-grow: 1;
   }
 
   .search-wrapper {

site/src/sass/_shared.scss

@@ -3,7 +3,7 @@
 
 // Globals
 @import 'globals/colors';
-@import 'globals/vars';
 @import 'globals/functions';
+@import 'globals/vars';
 @import 'globals/mixins';
 @import 'globals/extends';

site/src/sass/components/_body.scss

@@ -35,4 +35,6 @@ body {
 .main {
   flex: 1 0 auto;
   height: max-content;
+  display: flex;
+  flex-direction: column;
 }

site/src/sass/components/_wrapper.scss

@@ -11,6 +11,7 @@
 
   height: auto;
   margin: math.div($wrapper-block-spacing-m, 2) auto;
+  width: 100%;
   max-width: $wrapper-content-max-width;
 
   @supports (margin: clamp(1px, 1vw, 2px)) {