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.

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

Format <head> correctly #225

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

Comments

Projects
None yet
3 participants
@yoshuawuyts
Copy link
Member

yoshuawuyts commented Aug 11, 2017

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

This comment has been minimized.

Copy link
Member

YerkoPalma commented Aug 11, 2017

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

This comment has been minimized.

Copy link
Collaborator

toddself commented Aug 11, 2017

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

@yoshuawuyts

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 11, 2017

@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

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 11, 2017

@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

This comment has been minimized.

Copy link
Member

YerkoPalma commented Aug 11, 2017

@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

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 11, 2017

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

@yoshuawuyts

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 11, 2017

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 referenced this issue Aug 14, 2017

Open

favicon #17

@yoshuawuyts

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 18, 2017

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

This comment has been minimized.

Copy link
Member

YerkoPalma commented Aug 18, 2017

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

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 18, 2017

@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

This comment has been minimized.

Copy link
Member

YerkoPalma commented Aug 18, 2017

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

This comment has been minimized.

Copy link
Member Author

yoshuawuyts commented Aug 18, 2017

@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

This comment has been minimized.

Copy link
Member

YerkoPalma commented Aug 18, 2017

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
You can’t perform that action at this time.