Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Format <head> correctly #225

Open
yoshuawuyts opened this issue Aug 11, 2017 · 13 comments
Open

Format <head> correctly #225

yoshuawuyts opened this issue Aug 11, 2017 · 13 comments

Comments

@yoshuawuyts
Copy link
Member

yoshuawuyts commented Aug 11, 2017 •
edited
Loading

This mostly means generating a ton of icons, and being smart about it. But from the looks of it we can do this from 3 required resources:

  • icon-512x512.png for manifest.json
  • safari-icon.svg for safari-pinned-tab (needs to be black/white square, see this tutorial)
  • a twitter / fb card in .png with dimensions of1500x1120

In addition we'll need the following values:

  • title - used to describe the page in the browser's tabs
  • description - used to describe what the page is, in long form; used by search engines and the like. Can be derived from manifest.json
  • themeColor - used to change the color of the header on mobile. Can be derived from manifest.json
  • twitterName - name of the organization on twitter. Useful for shares.
  • mainUrl - the homepage for the site

Reference

<head>
  <link rel="preload" href="/bundle.js" as="script">
  <link rel="preload" as="style" href="/bundle.css" onload="this.rel='stylesheet'">
  <link rel="preload" as="font" href="/assets/font_gt_america_mono.woff "crossorigin="crossorigin">
  <link rel="manifest" href="/manifest.json">

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content=${description}>
  <meta name="theme-color" content="${themeColor}">
  <title>${title}</title>

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@${twitterName}">
  <meta name="twitter:image" content="/assets/card-1500x1120.png">

  <meta name="og:title" content="${name}">
  <meta name="og:url" content="${mainUrl}">
  <meta name="og:description" content="${mainUrl}">
  <meta name="og:image" content="/assets/card-1500x1120.png">

  <link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" href="/assets/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/assets/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/assets/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/assets/favicon-192x192.png" sizes="192x192">
  <link rel="shortcut icon" href="/assets/favicon.ico">

  <style>.critical-css {}</style>
</head>
@YerkoPalma
Copy link
Member

What's the limit of what is going to be supported in head? there are lots of meta tag, is bankai going to support them all?
For instance, those icon* tags and the manifest might be related to pwa, then we should also support mobile-web-app-capable meta tag with his apple flavor?

@toddself
Copy link
Contributor

Also these require a ton of assets to be generated and served from an art perspective.

@yoshuawuyts
Copy link
Member Author

@YerkoPalma v good question. I'm kinda feeling 👎 on supporting overly Apple-specific things. Given they'll be adding WebWorkers soon, it probably also means they'll get behind the manifest spec. For example the pinned safari icon is probably too much (ugh, egh, blegh).

The mobile-web-app-capable tags seems like it requires some extra thought to it as it (can) disable built-in UI elements. But then again, specifying display: standalone in the manifest.json achieves the same results. I don't think it's worth it in this case.

@yoshuawuyts
Copy link
Member Author

@toddself yeah, for sure! Was thinking we do two things to make this less of a hassle:

  • we scan the assets/ dir for the right files; working down from icon-512x512.png down to smaller sizes. If we encounter a smaller size, we'll use that to generate the next asset in line. This is an optimization tho, don't think we'll do it from the get go.
  • check if the directory already contains the output files before resizing and copying them over. Assets are something that's supposed to rarely change, and with the right console output for bankai build we can show that we're using the existing versions (e.g. to prevent surprises).

@YerkoPalma
Copy link
Member

YerkoPalma commented Aug 11, 2017 •
edited
Loading

@yoshuawuyts agree, but that tag was just an example 😃
I just remebered this project about possible head tags, might worth to have a look.

Edit: head-it also could help

@yoshuawuyts
Copy link
Member Author

@YerkoPalma woah, thanks for sharing! - that link is both super useful, and mad daunting. There's so much stuff ;_;

@yoshuawuyts
Copy link
Member Author

Ohh, another cool one is dns-prefetching; allows warming up the cache for external requests. String matching on a JS bundle should get us a longgg wayyyy C:

@yoshuawuyts yoshuawuyts mentioned this issue Aug 14, 2017
Open
@yoshuawuyts
Copy link
Member Author

Oh, found out how to do sitemaps too! Useful for search engines. The way to do it is by creating a robots.txt file and adding the following:

Sitemap: <sitemap_location>

The sitemap URL requires a full text thingy; for example:

Sitemap: http://www.example.org/sitemap.xml

The coolest about this, is that you can include links to videos in sitemaps too; heaps of stuff we can do here! ✨

@YerkoPalma
Copy link
Member

How would you know how to include routes in the sitemap? since bankai builds a single js file with a single html entry point you can't use files to figure out routes, and without knowing what router is being used there is no simple way to find defined routes.
Or the idea is just to allow some --sitemap option so user can specify their sitemaps?

@yoshuawuyts
Copy link
Member Author

yoshuawuyts commented Aug 18, 2017 •
edited
Loading

@YerkoPalma we already do SSR in the last version of bankai; this is done by looking at exports and fingerprinting the internals (e.g. figuring out if it's choo, we don't support anything else right now).

From there it's only a matter of implementing the sitemap ✨. Would be cool if we could have an create-sitemap module of sorts that takes an array and outputs a sitemap ✨

@YerkoPalma
Copy link
Member

YerkoPalma commented Aug 18, 2017 •
edited
Loading

figuring out if it's choo, we don't support anything else right now

That sentence is key. I always though of bankai as a framework agnostic library.

Anyway, if we can detect if it is a choo app, then bankai could automatically generate sitemap.xml, otherwise, allow users to enter an array of routes and make a sitemap.xml file

@yoshuawuyts
Copy link
Member Author

@YerkoPalma it is! - It's nicely abstracted away, so people can add other frameworks too if they like. I just haven't put in the work, because, well I don't use anything else haha. PRs welcome tho!

@YerkoPalma
Copy link
Member

I have used bankai with other stacks and works nice. Just had troubles with custom file structures, but everything else just works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@toddself @yoshuawuyts @YerkoPalma