[Learn] Land the learn page (#1258)

Co-authored-by: Augustine Kim <[email protected]>

Author: AndrewJakubowicz

packages/lit-dev-content/site/_includes/article.html

@@ -7,13 +7,15 @@
      — Updated <time datetime="{{ lastUpdated }}">{{ lastUpdated | readableDate }}</time>
     {% endif %}
   </div>
+  <!-- TODO: Remove comment once tag support is enabled
   <div class="tags">
     {% for tag in tags %}
       {% if tag != 'articles-nav' %}
         <a href="{{ site.baseurl }}/articles/tags/{{ tag }}/" aria-label="{{ tag }} tag">{{ tag }}</a>
       {% endif %}
     {% endfor %}
   </div>
+  -->
   <div class="authors">
     {% for authorId in author or defaultAuthor %}
       {% set authorData = authors[authorId] %}

packages/lit-dev-content/site/_includes/site-nav.html

@@ -17,8 +17,8 @@
     </litdev-version-selector>
 </li>
 
-<li class="navItem{% if page.url.includes('/tutorials') %} active{% endif %}">
-   <a href="{{ site.baseurl }}/tutorials/">Tutorials</a></li>
+<li class="navItem{% if page.url.includes('/learn') %} active{% endif %}">
+   <a href="{{ site.baseurl }}/learn/">Learn</a></li>
 <li class="navItem{% if page.url.includes('/playground') %} active{% endif %}">
    <a href="{{ site.baseurl }}/playground/">Playground</a></li>
 <li class="navItem{% if page.url.includes('/blog') %} active{% endif %}">

packages/lit-dev-content/site/css/articles.css

@@ -200,8 +200,6 @@ article {
 
 .articleHeader .tags {
   display: flex;
-  /* TODO(emarquez): remove once we launch tags */
-  display: none;
 }
 
 .articleHeader .tags a {

packages/lit-dev-content/site/home/6-explore.html

@@ -4,7 +4,7 @@ <h1 class="homeSectionHeading">Explore Lit</h1>
   <div id="exploreItems">
     <div>
       <h2>Try our live tutorials — no installation needed</h2>
-      <a href="{{site.baseurl}}/tutorials/">Tutorials</a>
+      <a href="{{site.baseurl}}/learn/#filter=tutorial">Tutorials</a>
     </div>
 
     <div>

packages/lit-dev-server/src/redirects.ts

@@ -34,8 +34,9 @@ export const pageRedirects = new Map([
   // Old release-notes redirects to new v2 location.
   ['/docs/releases/release-notes/1.3.0/',      '/docs/v2/releases/release-notes/1.3.0/'],
   ['/docs/releases/release-notes/1.2.0/',      '/docs/v2/releases/release-notes/1.2.0/'],
-  // Old Lit tutorial redirect to new tutorial catalog
-  ['/tutorial/', '/tutorials/'],
+  // Old Lit tutorial redirect to new learn catalog
+  ['/tutorial/', '/learn/#filter=tutorial'],
+  ['/tutorials/', '/learn/#filter=tutorial'],
 ].map(([path, redir]) => [
   // Trailing slashes are required because this redirect map is consulted after
   // standard lit.dev path canonicalization.
@@ -96,12 +97,12 @@ export const oldLitElementSiteRedirects = new Map([
   ['/guide/build',      '/docs/v1/tools/build/'],
   ['/guide/community',  '/docs/v1/resources/community/'],
 
-  ['/try',              '/tutorials/'],
-  ['/try/create',       '/tutorials/'],
-  ['/try/properties',   '/tutorials/'],
-  ['/try/logic',        '/tutorials/'],
-  ['/try/events',       '/tutorials/'],
-  ['/try/style',        '/tutorials/'],
+  ['/try',              '/learn/#filter=tutorial'],
+  ['/try/create',       '/learn/#filter=tutorial'],
+  ['/try/properties',   '/learn/#filter=tutorial'],
+  ['/try/logic',        '/learn/#filter=tutorial'],
+  ['/try/events',       '/learn/#filter=tutorial'],
+  ['/try/style',        '/learn/#filter=tutorial'],
 
   ['/api/index.html',                                                       '/docs/v1/api/lit-element/LitElement/'],
   ['/api/globals.html',                                                     '/docs/v1/api/lit-element/LitElement/'],

packages/lit-dev-tests/known-good-urls.txt

@@ -463,6 +463,7 @@ https://lit.dev/docs/templates/expressions/#static-expressions
 https://lit.dev/docs/tools/development/#development-and-production-builds
 https://lit.dev/docs/getting-started/
 https://lit.dev/tutorials/
+https://lit.dev/learn/
 https://lit.dev/playground/
 https://github.com/lit/lit/pull/2034
 https://github.com/lit/lit/blob/main/packages/lit/CHANGELOG.md

packages/lit-dev-tests/src/check-redirects.ts

@@ -81,6 +81,9 @@ const checkRedirect = async (
 Searched for file ${indexHtmlPath} or ${directPath}`;
     }
     if (hash) {
+      if (pathname === '/learn/' && hash.includes('filter')) {
+        return OK;
+      }
       // Another hack. Just do a regexp search for e.g. id="somesection" instead
       // of DOM parsing. Should be good enough, especially given how regular our
       // Markdown generated HTML is.

packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-linux.png

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {test, expect} from '@playwright/test';
+import {preventGDPRBanner} from './util.js';
+
+test.describe('Learn catalog page', () => {
+  test('smoke test', async ({browser}) => {
+    const page = await browser.newPage({viewport: {width: 1920, height: 1080}});
+    await preventGDPRBanner(page);
+    await page.goto('/learn/');
+    await expect(await page.screenshot()).toMatchSnapshot('learnCatalog.png');
+  });
+});