Skip to content

Add Favicons and Logo - #535

Merged
spaceninja merged 6 commits into
v-nextfrom
chore/add-favicons-and-logo
Mar 9, 2020
Merged

Add Favicons and Logo#535
spaceninja merged 6 commits into
v-nextfrom
chore/add-favicons-and-logo

Conversation

@spaceninja

Copy link
Copy Markdown
Member

Overview

This commit adds:

  • A "Welcome" story, which is loaded first, and appears at the top of the sidebar
  • Environment-aware favicons (blue on prod, pink on local) to easily distinguish browser tabs
  • A Cloud Four Storybook "theme" (it really just sets the logo in the sidebar)

Screenshots

Screen Shot 2020-03-09 at 11 41 21 AM

Testing

  1. Review on preview environment

@spaceninja

Copy link
Copy Markdown
MemberAuthor

@tylersticka I know you were holding off on theme stuff, but I learned how to set all these over the weekend for my side project, and thought I'd throw up a PR. Please feel free to change anything if it's not what you're looking for.

Comment threadstatic/logo.svg Outdated
@@ -0,0 +1 @@
<svg width="100" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.01 320.17"><defs><style>.cls-1{fill:#456bd9}</style></defs><path class="cls-1" d="M135 222.4a87.18 87.18 0 01-38.2-45.8 37.18 37.18 0 0110.4-20C116.8 145.6 228.6 24 276 3.2A235.69 235.69 0 00238.4 0C98.4 0 85 100 85 100S0 126 0 203.6C0 314.6 136.8 320 136.8 320a305.51 305.51 0 0043.2-1.6 25.81 25.81 0 0017.8-14.2c8.2-20 20-51.8 31.6-85.2-45.4 2.2-89.4 4.4-94.4 3.4zM480 180c0-98.2-96.2-108.8-96.2-108.8a122.2 122.2 0 00-42.8-44c-8.6 30.6-30.8 112.2-32 127.6h33.6s5.4 0 4 6.6c-3.2 15-11.6 51.6-29.6 52.8l-23.6 1.4c-6.6 27-13.6 55.2-18.6 75.6a94 94 0 0060 18.2 91.81 91.81 0 0067-24.6C482.8 271.2 480 180 480 180z"/><path class="cls-1" d="M277.8 57.2A846.57 846.57 0 00178 160l72.2-2.8c14.8-41.6 27.6-78.6 33.2-94.8a6 6 0 00-5.6-5.2z"/></svg>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Here's a logo that's sized better for Storybook, uses our updated blue and is a bit cleaner.

<svgxmlns="http://www.w3.org/2000/svg"width="36"height="24"viewBox="0 0 36 24">
<pathd="M10.12,16.67a6.52,6.52,0,0,1-2.86-3.43A2.73,2.73,0,0,1,8,11.74c.72-.83,9.1-9.94,12.65-11.5A16.69,16.69,0,0,0,17.87,0C7.38,0,6.37,7.5,6.37,7.5S0,9.44,0,15.26C0,23.58,10.25,24,10.25,24a24.94,24.94,0,0,0,3.24-.12,1.94,1.94,0,0,0,1.34-1.07c.61-1.5,1.5-3.88,2.37-6.38C13.79,16.58,10.49,16.75,10.12,16.67Z"fill="#215cca"/>
<pathd="M36,13.49c0-7.36-7.21-8.15-7.21-8.15A9.15,9.15,0,0,0,25.56,2c-.64,2.29-2.31,8.41-2.4,9.56h2.52s.41,0,.3.5c-.24,1.12-.87,3.87-2.22,4l-1.77.1c-.49,2-1,4.14-1.39,5.67a7.05,7.05,0,0,0,4.5,1.36,6.86,6.86,0,0,0,5-1.84C36.19,20.33,36,13.49,36,13.49Z"fill="#215cca"/>
<pathd="M20.82,4.29A64,64,0,0,0,13.34,12l5.41-.21c1.11-3.11,2.07-5.89,2.49-7.1A.43.43,0,0,0,20.82,4.29Z"fill="#215cca"/>
</svg>

Comment thread.storybook/main.js

module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
stories: ['../src/welcome.stories.mdx', '../src/**/*.stories.(js|mdx)'],

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can you add a comment explaining that this is intended to control the order? I'm aware of three methods for controlling the nav order so it would be helpful to know that is the intention here.

@@ -0,0 +1 @@
<link rel="shortcut icon" href="/favicon-%NODE_ENV%.ico" />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Nit: Self-closing tag not necessary in HTML5?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Looks like Prettier is adding it back in. I'll see if I can disable that.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Holy wow, this turns out to be a contentious topic in the Prettier community: prettier/prettier#5246

TL;DR: There's no option to disable it right now, and Prettier will always add the self-closing tag slash back in.

@spaceninja

Copy link
Copy Markdown
MemberAuthor

Updated logo, and comment added!

@spaceninja
spaceninja merged commit c7e8ab1 into v-nextMar 9, 2020
@spaceninja
spaceninja deleted the chore/add-favicons-and-logo branch March 9, 2020 20:59
@derekshirkderekshirk mentioned this pull request Aug 17, 2020
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@spaceninja@tylersticka