search

thegreenhouseio / www.thegreenhouse.io

Personal website, articles, blog, etc.
https://www.thegreenhouse.io
3 stars 0 forks source link

upgrade lit@2 #234

Open thescientist13 opened 3 years ago

thescientist13 commented 3 years ago

Related Issue

https://github.com/ProjectEvergreen/greenwood/pull/611#issuecomment-888402531

Wanted to help do some Lit@2 upgrade testing to see if I could reproduce the above issue. From what I can tell, it comes down to the way the serialized HTML is coming out from puppeteer which, when can combined with Greenwood's static optimization settings, results in issue like above and below.

Screen Shot 2021-07-29 at 12 34 35 PM

Details

Before

On production today, here is the HTML you get for. index.html.

<!DOCTYPE html><html lang="en" prefix="og:http://ogp.me/ns#">
          <script data-state="apollo">
            window.__APOLLO_STATE__ = true;
          </script>

                          <head>
                          <link rel="preload" href="/styles/page.47891221.css" as="style" crossorigin="anonymous"></link>

                          <link rel="preload" href="/styles/theme.11495703.css" as="style" crossorigin="anonymous"></link>

        <!-- Shady DOM styles for app-header --><style scope="app-header">app-header .header.app-header {
  width: 100%;
}

app-header h2.app-header {
  padding: 0;
}

app-header .header.app-header a.app-header {
  text-decoration: none;
}

app-header header.app-header {
  display: none;
}

app-header .caption.app-header {
  width: 100%;     text-align: center;     color: #efefef;     background-color: #020202;     font-style: italic;     margin: 0;
}

@media (min-width: 768px) {
app-header header.app-header {
  display: block;     background-image: url('/assets/banner.jpg');     background-size: cover;     background-color: #020202;     height: 300px;
}

}</style><!-- Shady DOM styles for app-social-icon-link --><style scope="app-social-icon-link">app-social-icon-link img.app-social-icon-link {
  display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
}</style><!-- Shady DOM styles for app-footer --><style scope="app-footer">app-footer footer.app-footer {
  width: 50%;     margin: 0 auto;     text-align: center;
}

app-footer ul.app-footer {
  list-style: none;     padding: 0;     margin-top: 10px;
}

app-footer li.app-footer {
  display: inline-block;
}

app-footer .copyright.app-footer {
  display: inline-block;     margin: 10px auto;
}</style><!-- Shady DOM styles for app-navigation --><style scope="app-navigation">app-navigation .navigation.app-navigation {
  display: block;     width: 40%;     margin: 25px auto;     text-align: center;
}

app-navigation .navigation.app-navigation ul.app-navigation {
  list-style: none;     margin: 0 auto;     width: 80%;     padding: 0;
}

app-navigation .navigation.app-navigation li.app-navigation {
  display: inline-block;     width: 100px;
}

app-navigation .navigation.app-navigation a.app-navigation {
  color: #020202;     font-size: 1.5em;
}</style><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>

        <title>The Greenhouse I/O</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<meta name="twitter:creator" content="@thegreenhouseio">
<meta name="twitter:site" content="@thegreenhouseio">
<meta property="og:title" content="The Greenhouse I/O">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.thegreenhouse.io">
<meta property="og:image" content="/assets/og-meta-preview.png">
<meta property="og:description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="icon" href="/assets/favicon.ico">

    <link rel="stylesheet" href="/styles/theme.11495703.css">
    <link rel="stylesheet" href="/styles/page.47891221.css">

    <style>
      .outlet {
        min-height: 50vh
      }
    </style>

          <style>

      h2 {
        padding-left: 17.25%;
      }

      p {
        width: 65%;
        margin: 20px auto;
        text-align: left;
        font-size: 20px;
      }

      p.cta {
        text-align: center;
      }

      hr {
        width: 15%;
        margin: 5px auto;
      }

          </style>

          <link rel="preconnect" href="https://www.google-analytics.com/">
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117350131-1"></script>
          <script>
            var getOutboundLink = function(url) {
              gtag('event', 'click', {
                'event_category': 'outbound',
                'event_label': url,
                'transport_type': 'beacon'
              });
            }
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-117350131-1', { 'anonymize_ip': true });
            gtag('config', 'UA-117350131-1');
          </script>
        </head>

  <body>

    <div class="layout">
      <section class="row">
        <app-header><!---->
      <div class="header style-scope app-header"> 
        <a href="/" title="Return to the the home page" class="style-scope app-header">
          <header class="style-scope app-header"></header>
          <h2 class="caption style-scope app-header">A DREAMER BY DESIGN</h2>
        </a>
      </div>
    <!----></app-header>
      </section>

      <section class="row">
        <app-navigation><!---->
      <div class="navigation style-scope app-navigation">
        <nav class="style-scope app-navigation">
          <ul class="style-scope app-navigation">
            <li class="style-scope app-navigation"><a href="/about/" class="style-scope app-navigation">About</a></li>
            <li class="style-scope app-navigation"><a href="/projects/" class="style-scope app-navigation">Projects</a></li>
            <li class="style-scope app-navigation"><a href="/blog/" class="style-scope app-navigation">Blog</a></li>
          </ul>
        </nav>
      </div>
    <!----></app-navigation>
      </section>

      <section class="outlet row">  

    <div>
      <h2>Hello, I'm <strong>Owen Buckley</strong>! 👋</h2>
<p>I find myself most passionate about helping people learn more about technology and how to improve their process and workflows.  I like to do so through software projects that are well designed, tested, performant, and maintained in a way that advocates for both user <em>and</em> developer experiences.  My broad range of technical knowledge and capabilities, creativity, interpersonal skills, and a good splash of entrepreneurial spirit make me a valuable contributor to any project.</p>
<p><strong>The Greenhouse</strong> is a personal business of my own with the goal of helping local entrepreneurs and small businesses plan out their ideas and strategies while helping make technology their new competitive advantage.  Be it small business consultation, advice on creating a blog or content based website, coding help or mentorship, presentation or speaking opportunities, business or product development, and everything in between, I am there and ready to answer questions and help solve any technical problems or questions you have!</p>
<p>I'm always up to something online be it on <a href="https://twitter.com/thegreenhouseio">twitter</a> <a href="https://medium.com/@thegreenhouseio">Medium</a>, or around the local <a href="https://www.pvdgeeks.org">Rhode Island Tech Meetup Community</a>, so I hope to hear from you!</p>
<p class="cta"><i>Let's build something great!</i></p>
<hr>
    </div>

      </section>

      <section class="row">
        <app-footer><!---->
      <footer class="style-scope app-footer">
        <ul class="style-scope app-footer">
          <li class="style-scope app-footer">
            <app-social-icon-link name="linkedin" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://www.linkedin.com/in/owen-buckley-91393447/" click="getOutboundLink('https://www.linkedin.com/in/owen-buckley-91393447/');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/linkedin.svg" alt="linkedin logo">
      </a>
    <!----></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="twitter" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://twitter.com/thegreenhouseio" click="getOutboundLink('https://twitter.com/thegreenhouseio');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/twitter.svg" alt="twitter logo">
      </a>
    <!----></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="medium" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://medium.com/@thegreenhouseio" click="getOutboundLink('https://medium.com/@thegreenhouseio');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/medium.svg" alt="medium logo">
      </a>
    <!----></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="github" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://github.com/thescientist13" click="getOutboundLink('https://github.com/thescientist13');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/github.svg" alt="github logo">
      </a>
    <!----></app-social-icon-link>
          </li>
        </ul>

        <span class="copyright style-scope app-footer">© Owen Buckley / thegreenhouse.io</span>
      </footer>
    <!----></app-footer>
      </section>
    </div>

</body></html>

After

In this PR, this is what you get now (notice the absence of pre-rendered <style> tags in the <head>)

<!DOCTYPE html><html lang="en" prefix="og:http://ogp.me/ns#">
          <script data-state="apollo">
            window.__APOLLO_STATE__ = true;
          </script>

                          <head>
                          <link rel="preload" href="/styles/page.47891221.css" as="style" crossorigin="anonymous"></link>

                          <link rel="preload" href="/styles/theme.11495703.css" as="style" crossorigin="anonymous"></link>

        <!-- Shady DOM styles for app-header --><!-- Shady DOM styles for app-social-icon-link --><!-- Shady DOM styles for app-footer --><!-- Shady DOM styles for app-navigation --><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>

        <title>The Greenhouse I/O</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<meta name="twitter:creator" content="@thegreenhouseio">
<meta name="twitter:site" content="@thegreenhouseio">
<meta property="og:title" content="The Greenhouse I/O">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.thegreenhouse.io">
<meta property="og:image" content="/assets/og-meta-preview.png">
<meta property="og:description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="icon" href="/assets/favicon.ico">

    <link rel="stylesheet" href="/styles/theme.11495703.css">
    <link rel="stylesheet" href="/styles/page.47891221.css">

    <style>
      .outlet {
        min-height: 50vh
      }
    </style>

          <style>

      h2 {
        padding-left: 17.25%;
      }

      p {
        width: 65%;
        margin: 20px auto;
        text-align: left;
        font-size: 20px;
      }

      p.cta {
        text-align: center;
      }

      hr {
        width: 15%;
        margin: 5px auto;
      }

          </style>

          <link rel="preconnect" href="https://www.google-analytics.com/">
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117350131-1"></script>
          <script>
            var getOutboundLink = function(url) {
              gtag('event', 'click', {
                'event_category': 'outbound',
                'event_label': url,
                'transport_type': 'beacon'
              });
            }
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-117350131-1', { 'anonymize_ip': true });
            gtag('config', 'UA-117350131-1');
          </script>
        </head>

  <body>

    <div class="layout">
      <section class="row">
        <app-header><!---->
      <div class="header style-scope app-header"> 
        <a href="/" title="Return to the the home page" class="style-scope app-header">
          <header class="style-scope app-header"></header>
          <h2 class="caption style-scope app-header">A DREAMER BY DESIGN</h2>
        </a>
      </div>
    <style class="style-scope app-header">
      :host .header {     width: 100%;   }   :host h2 {     padding: 0;   }   :host .header a {     text-decoration: none;   }   :host header {     display: none;   }   :host .caption {     width: 100%;     text-align: center;     color: #efefef;     background-color: #020202;     font-style: italic;     margin: 0;   }  @media (min-width: 768px) {   :host header {     display: block;     background-image: url('/assets/banner.jpg');     background-size: cover;     background-color: #020202;     height: 300px;   } }
    </style></app-header>
      </section>

      <section class="row">
        <app-navigation><!---->
      <div class="navigation style-scope app-navigation">
        <nav class="style-scope app-navigation">
          <ul class="style-scope app-navigation">
            <li class="style-scope app-navigation"><a href="/about/" class="style-scope app-navigation">About</a></li>
            <li class="style-scope app-navigation"><a href="/projects/" class="style-scope app-navigation">Projects</a></li>
            <li class="style-scope app-navigation"><a href="/blog/" class="style-scope app-navigation">Blog</a></li>
          </ul>
        </nav>
      </div>
    <style class="style-scope app-navigation">
      :host .navigation {     display: block;     width: 40%;     margin: 25px auto;     text-align: center;   }   :host .navigation ul {     list-style: none;     margin: 0 auto;     width: 80%;     padding: 0;   }   :host .navigation li {     display: inline-block;     width: 100px;   }   :host .navigation a {     color: #020202;     font-size: 1.5em;   }
    </style></app-navigation>
      </section>

      <section class="outlet row">  

    <div>
      <h2>Hello, I'm <strong>Owen Buckley</strong>! 👋</h2>
<p>I find myself most passionate about helping people learn more about technology and how to improve their process and workflows.  I like to do so through software projects that are well designed, tested, performant, and maintained in a way that advocates for both user <em>and</em> developer experiences.  My broad range of technical knowledge and capabilities, creativity, interpersonal skills, and a good splash of entrepreneurial spirit make me a valuable contributor to any project.</p>
<p><strong>The Greenhouse</strong> is a personal business of my own with the goal of helping local entrepreneurs and small businesses plan out their ideas and strategies while helping make technology their new competitive advantage.  Be it small business consultation, advice on creating a blog or content based website, coding help or mentorship, presentation or speaking opportunities, business or product development, and everything in between, I am there and ready to answer questions and help solve any technical problems or questions you have!</p>
<p>I'm always up to something online be it on <a href="https://twitter.com/thegreenhouseio">twitter</a> <a href="https://medium.com/@thegreenhouseio">Medium</a>, or around the local <a href="https://www.pvdgeeks.org">Rhode Island Tech Meetup Community</a>, so I hope to hear from you!</p>
<p class="cta"><i>Let's build something great!</i></p>
<hr>
    </div>

      </section>

      <section class="row">
        <app-footer><!---->
      <footer class="style-scope app-footer">
        <ul class="style-scope app-footer">
          <li class="style-scope app-footer">
            <app-social-icon-link name="linkedin" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://www.linkedin.com/in/owen-buckley-91393447/" click="getOutboundLink('https://www.linkedin.com/in/owen-buckley-91393447/');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/linkedin.svg" alt="linkedin logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="twitter" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://twitter.com/thegreenhouseio" click="getOutboundLink('https://twitter.com/thegreenhouseio');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/twitter.svg" alt="twitter logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="medium" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://medium.com/@thegreenhouseio" click="getOutboundLink('https://medium.com/@thegreenhouseio');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/medium.svg" alt="medium logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="github" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://github.com/thescientist13" click="getOutboundLink('https://github.com/thescientist13');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/github.svg" alt="github logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>
        </ul>

        <span class="copyright style-scope app-footer">© Owen Buckley / thegreenhouse.io</span>
      </footer>
    <style class="style-scope app-footer">
      :host footer {     width: 50%;     margin: 0 auto;     text-align: center;   }   :host ul {     list-style: none;     padding: 0;     margin-top: 10px;   }   :host li {     display: inline-block;   }   :host .copyright {     display: inline-block;     margin: 10px auto;   }
    </style></app-footer>
      </section>
    </div>

</body></html>

But if I revert the data-gwd-opt="static" change, then everything is back to normal.