diff --git a/app/assets/images/codebar-social.jpg b/app/assets/images/codebar-social.jpg new file mode 100644 index 000000000..1d2817ac3 Binary files /dev/null and b/app/assets/images/codebar-social.jpg differ diff --git a/app/mailers/virtual_workshop_invitation_mailer.rb b/app/mailers/virtual_workshop_invitation_mailer.rb index 50ac4fdd3..26ce782c3 100644 --- a/app/mailers/virtual_workshop_invitation_mailer.rb +++ b/app/mailers/virtual_workshop_invitation_mailer.rb @@ -10,7 +10,7 @@ def attending(workshop, member, invitation, waiting_list = false) setup(workshop, invitation, member) @waiting_list = waiting_list - subject = "Attendance Confirmation: #{I18n.t('workshop.virtual.title', + subject = "Attendance Confirmation: #{I18n.t('workshops.virtual.title_with_date', chapter: @workshop.chapter.name, date: humanize_date(@workshop.date_and_time))}" diff --git a/app/views/errors/error.html.haml b/app/views/errors/error.html.haml index 73f99c83a..81f6830d7 100644 --- a/app/views/errors/error.html.haml +++ b/app/views/errors/error.html.haml @@ -1,7 +1,7 @@ !!! %html %head - %link{ rel: 'image_src', href: '/assets/logo-square.png', :alt => "codebar logo" } + = render partial: 'shared/meta_tags' = favicon_link_tag 'favicon.ico' %title codebar.io - Page not found :css diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml index 93df11e42..9080a9216 100644 --- a/app/views/errors/not_found.html.haml +++ b/app/views/errors/not_found.html.haml @@ -1,7 +1,7 @@ !!! %html %head - %link{ rel: 'image_src', href: '/assets/logo-square.png', :alt => "codebar logo" } + = render partial: 'shared/meta_tags' = favicon_link_tag 'favicon.ico' %title codebar.io - Page not found :css diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 3d8dc6bb2..fa99c098a 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -5,23 +5,18 @@ %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' } %meta{ name: 'robots', content: 'index, follow' } %meta{ property: 'fb:admins', content: '622070503' } - %meta{ property: 'og:type', content: 'website' } - %meta{ property: 'og:locale', content: 'en_GB' } - %meta{ property: 'og:site_name', content: 'codebar' } %meta{ name: 'keywords', content: 'codebar, programming, diversity, html, css, javascript, ruby, python' } - %meta{ property: 'og:image', content: image_url('logo-square.png') } - %meta{ property: 'og:url', content: request.original_url } - %meta{ property: 'og:title', content: 'codebar' } - %meta{ property: 'og:description', content: 'Making tech more diverse and welcoming by bringing people together and helping teach programming skills.' } %meta{ name: 'description', content: 'Making tech more diverse and welcoming by bringing people together and helping teach programming skills.' } + + - if content_for? :meta_tags + = yield :meta_tags + - else + = render partial: 'shared/meta_tags' + %link{ rel: 'icon', sizes: '196x196', href: '/Icon-196.png'} %link{ rel: 'icon', sizes: '128x128', href: '/Icon-128.png'} %link{ rel: 'apple-touch-icon', sizes: '128x128', href: '/Icon-128.png'} - = content_for :meta_tags - - %link{ rel: 'image_src', href: '/assets/logo-square.png', alt: 'codebar logo' } - %title= retrieve_title = favicon_link_tag 'favicon.ico' = stylesheet_link_tag('application', media: 'all', data: { turbo_track: 'reload' }) diff --git a/app/views/shared/_meta_tags.html.haml b/app/views/shared/_meta_tags.html.haml new file mode 100644 index 000000000..ae73a0861 --- /dev/null +++ b/app/views/shared/_meta_tags.html.haml @@ -0,0 +1,9 @@ +%meta{ property: 'og:title', content: 'codebar' } +%meta{ property: 'og:type', content: 'website' } +%meta{ property: 'og:url', content: request.original_url } +%meta{ property: 'og:image', content: image_url('logo-square.png') } +%meta{ property: 'og:description', content: 'Making tech more diverse and welcoming by bringing people together and helping teach programming skills.' } +%meta{ property: 'og:site_name', content: 'codebar' } +%meta{ property: 'og:locale', content: 'en_GB' } +-# Only Twitter-specific tag needed +%meta{ name: 'twitter:card', content: 'summary_large_image' } diff --git a/app/views/virtual_workshops/_meta_tags.html.haml b/app/views/virtual_workshops/_meta_tags.html.haml deleted file mode 100644 index 9f11044f1..000000000 --- a/app/views/virtual_workshops/_meta_tags.html.haml +++ /dev/null @@ -1,6 +0,0 @@ -- content_for :meta_tags do - - title = t('workshops.virtual.title', chapter: workshop.chapter.name) - - slack_description = "codebar #{workshop.chapter.name} virtual workshop" - %meta{ property: 'og:title', content: title } - %meta{ property: 'og:description', content: slack_description } - %meta{ property: 'og:image', content: image_url('social-summary-card-image.png') } diff --git a/app/views/virtual_workshops/show.html.haml b/app/views/virtual_workshops/show.html.haml index eaa559ced..4f88b05d9 100644 --- a/app/views/virtual_workshops/show.html.haml +++ b/app/views/virtual_workshops/show.html.haml @@ -1,6 +1,6 @@ -- title t('workshop.virtual.title', chapter: @workshop.chapter.name, date: humanize_date(@workshop.date_and_time)) +- title t('workshops.virtual.title_with_date', chapter: @workshop.chapter.name, date: humanize_date(@workshop.date_and_time)) -= render partial: 'virtual_workshops/meta_tags', locals: { workshop: @workshop } += render partial: 'workshops/meta_tags', locals: { workshop: @workshop } .container.py-4.py-lg-5 .row diff --git a/app/views/workshops/_meta_tags.html.haml b/app/views/workshops/_meta_tags.html.haml index 3c3b9ba11..cdf5615b5 100644 --- a/app/views/workshops/_meta_tags.html.haml +++ b/app/views/workshops/_meta_tags.html.haml @@ -1,6 +1,25 @@ -- content_for :meta_tags do - - title = "Workshop at #{workshop.host.name}" - - slack_description = "codebar #{workshop.chapter.name}" +:ruby + title = if workshop.virtual? + t('workshops.virtual.title_with_date', chapter: workshop.chapter.name, date: humanize_date(workshop.date_and_time)) + else + t('workshop.title', host: workshop.host.name, date: humanize_date(workshop.date_and_time)) + end + url = request.original_url + image = workshop.host.try(:image_url).presence || image_url('codebar-social.jpg') + description = (workshop.virtual? ? t('workshops.virtual.lead') : t('workshops.lead')) + += content_for :meta_tags do %meta{ property: 'og:title', content: title } - %meta{ property: 'og:description', content: slack_description } - %meta{ property: 'og:image', content: image_url('social-summary-card-image.png') } + %meta{ property: 'og:type', content: 'event' } + %meta{ property: 'og:url', content: url } + %meta{ property: 'og:image', content: image } + %meta{ property: 'og:description', content: description } + %meta{ property: 'og:site_name', content: 'codebar' } + %meta{ property: 'og:locale', content: 'en_GB' } + + -# Only Twitter-specific tag needed + %meta{ name: 'twitter:card', content: 'summary_large_image' } + + -# Event timing + %meta{ property: 'event:start_time', content: workshop.date_and_time } + %meta{ property: 'event:end_time', content: workshop.ends_at } diff --git a/config/locales/en.yml b/config/locales/en.yml index a9ccfb5ac..6cb673247 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -128,13 +128,13 @@ en: subject: "Reminder: you're on the codebar waiting list (%{date_time})" workshop: title: Workshop at %{host} - %{date} + lead: 'Join us in our in-person workshops to learn programming in a supportive and collaborative environment at your own pace, or share your knowledge and coach our students.' calendar: summary: codebar @ %{host_name} description: "Declining or removing this event from your calendar does not update your invitation. If you are unable to attend please follow the link found on this calendar entry and update your attendance status. Missing codebar events repeatedly will result in a suspension.\n Invitation link: %{invitation_link}" virtual: - title: Virtual workshop for %{chapter} - %{date} calendar: location: codebar Slack (https://slack.codebar.io) description: "How to join\n @@ -263,7 +263,8 @@ en: on_waiting_list: You are on the waiting list. virtual: title: 'Virtual workshop for %{chapter}' - lead: 'Participate in our workshops to learn programming in a supportive and collaborative online environment at your own pace, or share your knowledge and coach our students.' + title_with_date: 'Virtual workshop for %{chapter} 🌐 %{date}' + lead: 'Participate in our online workshops to learn programming in a supportive and collaborative environment at your own pace, or share your knowledge and coach our students.' intro: 'Our virtual workshops take place online. Our aim is to help you get started with programming by pairing you with a coach that will be able to remotely assist and guide you through what you want to learn. Once you sign up we will email you more details about how to join the workshop and tools that we recommend to make the process easier for you. In the meantime if you have any questions, do not hesitate to send an email to %{chapter_email}.' events: title: "Events" diff --git a/spec/features/viewing_a_workshop_spec.rb b/spec/features/viewing_a_workshop_spec.rb index 24c70b671..a200021b2 100644 --- a/spec/features/viewing_a_workshop_spec.rb +++ b/spec/features/viewing_a_workshop_spec.rb @@ -38,13 +38,13 @@ describe '#details' do scenario 'workshop and page title' do expect(page) - .to have_title("Virtual workshop for #{workshop.chapter.name} - #{humanize_date(workshop.date_and_time)}") + .to have_title("Virtual workshop for #{workshop.chapter.name} 🌐 #{humanize_date(workshop.date_and_time)}") expect(page).to have_content("Virtual workshop for #{workshop.chapter.name}") end scenario 'workshop info' do within '*[data-test=workshop-info]' do - expect(page).to have_content('Participate in our workshops') + expect(page).to have_content('Participate in our online workshops') expect(page).to have_content('Our virtual workshops take place online') within '.description' do diff --git a/spec/mailers/virtual_workshop_invitation_mailer_spec.rb b/spec/mailers/virtual_workshop_invitation_mailer_spec.rb index 83ec73d24..ef15ece84 100644 --- a/spec/mailers/virtual_workshop_invitation_mailer_spec.rb +++ b/spec/mailers/virtual_workshop_invitation_mailer_spec.rb @@ -6,7 +6,7 @@ it '#attending' do email_subject = "Attendance Confirmation: Virtual workshop for #{workshop.chapter.name} " \ - "- #{humanize_date(workshop.date_and_time)}" + "🌐 #{humanize_date(workshop.date_and_time)}" VirtualWorkshopInvitationMailer.attending(workshop, member, invitation).deliver_now