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

uploaded new favicon files #118

Merged
merged 15 commits into from
Mar 8, 2019
Merged

uploaded new favicon files #118

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
97c7d36
uploaded new favicon files
Mar 6, 2019
b2ca0e2
moved favicon files back into src
Mar 6, 2019
5facfe5
deps: update x0, install file-loader
shawnbot Mar 6, 2019
6f273e9
deps: install mkdirp
shawnbot Mar 7, 2019
7744b54
add src/icons/index.js
shawnbot Mar 7, 2019
dce7d4b
get icons from src/icons/index.js
shawnbot Mar 7, 2019
599c1d1
move icons to src/icons
shawnbot Mar 7, 2019
8eed71a
deps: upgrade to serve@10.1.2
shawnbot Mar 7, 2019
dbc314d
move serve config from now.json to serve.json
shawnbot Mar 7, 2019
2aab2e8
fix output path of icons
shawnbot Mar 7, 2019
f7b2c2b
chore: lint
shawnbot Mar 7, 2019
9d44a11
deps: uninstall file-loader
shawnbot Mar 7, 2019
0d22801
added extra favicon sizes
Mar 8, 2019
e7aa230
new favicon files
Mar 8, 2019
331c4cc
Update src/icons/index.js
shawnbot Mar 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions now.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
{
"name": "primer-style",
"alias": "primer.style",
"type": "static",
"static": {
"trailingSlash": true
}
"type": "static"
}
1,756 changes: 1,120 additions & 636 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@
"throttle-debounce": "2.0.1"
},
"devDependencies": {
"@compositor/x0": "6.0.6",
"@compositor/x0": "6.0.7",
"@svgr/webpack": "2.3.0",
"babel-plugin-emotion": "9.2.6",
"eslint": "5.6.1",
"eslint-plugin-github": "1.4.0",
"mkdirp": "0.5.1",
"now": "11.4.6",
"now-github-url": "0.1.2",
"serve": "10.0.0"
"serve": "10.1.2"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

serve kept complaining so I updated. 🤷‍♂️

}
}
4 changes: 4 additions & 0 deletions serve.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"public": "docs",
"trailingSlash": true
}
Binary file removed src/apple-touch-icon.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/favicon.png
View file
Open in desktop
Binary file not shown.
Binary file added src/icons/android-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/icons/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/icons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/* eslint-disable github/unescaped-html-literal */
Copy link
Contributor

@shawnbot shawnbot Mar 7, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our eslint rules don't like unescaped HTML literals, which is definitely good. It's not currently possible to inject unsafe markup into these elements (via process.argv or elsewhere), though, so I think disabling this here is okay.

const {join} = require('path')
const {copyFileSync} = require('fs')
const mkdirp = require('mkdirp')

const argIndex = process.argv.indexOf('--out-dir')
const outDir = argIndex > -1 ? process.argv[argIndex + 1] : 'docs'
const iconsDir = join(outDir, 'icons')

mkdirp.sync(iconsDir)

const path = file => {
copyFileSync(join(__dirname, file), join(iconsDir, file))
return `/icons/${file}`
}

const link = ({rel = 'icon', type = 'image/png', file}) => `<link rel="${rel}" type="${type}" href="${path(file)}">`

const meta = ({name, file}) => `<link name="${name}" content="${path(file)}">`

module.exports = [
link({rel: 'icon', type: 'image/png', file: 'favicon.png'}),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ashygee this is currently how we create icon links and meta tags. The link() and meta() functions take an object of HTML attributes, with one exception: file is a filename relative to src/icons, which gets copied at build time (no hot module reloading for now) and prefixed with the path to the file on the server.

So in this case, file: 'favicon.png' causes src/icons/favicon.png to be copied to the output directory (build/icons/favicon.png), and the <link> tag gets href="/icons/favicon.png".

link({rel: 'apple-touch-icon', file: 'touch-icon-iphone.png'}),
link({rel: 'apple-touch-icon', sizes: '152x152', file: 'touch-icon-ipad.png'}),
link({rel: 'apple-touch-icon', sizes: '167x167', file: 'touch-icon-ipad-retina.png'}),
link({rel: 'apple-touch-icon', sizes: '180x180', file: 'touch-icon-iphone-retina.png'}),
link({rel: 'icon', sizes: '192x192', file: 'android-icon.png'}),
meta({name: 'msapplication-square310x310logo', file: 'microsoft-icon.png'})
]
Binary file added src/icons/microsoft-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 src/primer-image.png → src/icons/primer-image.png
View file
Open in desktop
File renamed without changes
Binary file added src/icons/touch-icon-ipad-retina.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/icons/touch-icon-ipad.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/icons/touch-icon-iphone-retina.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/icons/touch-icon-iphone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 17 additions & 14 deletions src/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
const icons = require('./icons')

module.exports = ({html = '', css = '', scripts, title}) =>
`<!DOCTYPE html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126681523-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-126681523-1');
</script>

<title>${title}</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1' />
<link rel='stylesheet' href='https://unpkg.com/primer-layout/build/build.css' />
<link rel="apple-touch-icon" href="https://user-images.githubusercontent.com/334891/45369221-63075b00-b5b3-11e8-8ac7-7e588fe4c905.png">
<link rel="icon" href="https://user-images.githubusercontent.com/334891/45369187-51be4e80-b5b3-11e8-8066-b06025239a79.png">
<title>${title}</title>

${icons.join('\n ')}

<meta name="keywords" content="Design System" />
<meta property="og:article:author" content="GitHub Design Systems team" />
<meta property="og:title" content="Primer" />
Expand All @@ -28,6 +20,17 @@ module.exports = ({html = '', css = '', scripts, title}) =>
<meta property="og:image:height" content="630" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@githubprimer" />

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126681523-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-126681523-1');
</script>

<link rel='stylesheet' href='https://unpkg.com/@primer/css/dist/layout.css' />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, this is the new unpkg URL for the layout bundle in @primer/css>=12.

${css}
</head>
<body>
Expand Down