Add /news/ section (#437)

This adds a **News** section to the website. 

- Each news post lives in `/news/yyyy-mm-dd-slug/` in an `index.md`
file and all local resources like images in the same folder.

![Screenshot 2025-03-18 at 19 27
36](https://github.com/user-attachments/assets/5d85133b-3051-4968-8a2d-f02b5b21639a)
- I didn't manage to make the slug work in the `/news/` landing page.
I think somehow Jekyll doesn't actually recognize my collection. As a
current workaround, the raw path works. Someone more familiar with
Jekyll internals may know how to fix this.

![Screenshot 2025-03-18 at 19 28
11](https://github.com/user-attachments/assets/45b6c962-8add-416e-b795-a367aa3c12b4)

@lukewagner and @rossberg, does this approach work for your
(time-critical) needs?

Author: tomayac

_config.yml

@@ -33,7 +33,17 @@ destination: docs
 
 permalink: pretty
 
+collections:
+  news:
+    output: true
+    permalink: /news/:path/
+
 defaults:
+  - scope:
+      path: 'news'
+      type: 'news'
+    values:
+      layout: 'news'
   - scope:
       path: 'design'
     values:

_includes/header.html

@@ -38,6 +38,9 @@
           <a class="site-nav-item btn" href="/community/resources/"
             >Community</a
           >
+          <a class="site-nav-item btn" href="/news/"
+            >News</a
+          >
         </nav>
       </div>
     </header>

_layouts/news.html

@@ -0,0 +1,7 @@
+{% include header.html %}
+<section>
+  <div class="container">
+    {{content}}
+  </div>
+</section>
+{% include footer.html %}

css/custom.css

@@ -298,6 +298,12 @@ nav a:hover {
   clear: both;
 }
 
+.container img,
+.container video {
+  max-width: 100%;
+  height: auto;
+}
+
 @media (min-width: 544px) {
   .container {
     /* max-width:576px; */
@@ -340,7 +346,7 @@ nav a:hover {
   margin-right: auto;
   padding-left: 15px;
   padding-right: 15px;
-  max-width: 800px;
+  max-width: 900px;
 }
 
 .container-narrow::after {

news/2025-03-19-new-news-section/index.md

@@ -0,0 +1,9 @@
+---
+title: "Big News!"
+date: 2025-03-19
+layout: news
+---
+
+We launched something new 🎉! A [News](/news/) section for the WebAssembly homepage!
+
+![Two cups with the WebAssembly logo](wasm-cups.png)

news/2025-03-19-new-news-section/wasm-cups.png

@@ -0,0 +1,14 @@
+---
+layout: news
+title: News
+---
+<h1>News</h1>
+<ul>
+  {% for page in site.pages %}
+  {% if page.path contains 'news/20' %}
+  <li>
+    <a href="{{ page.url }}">{{ page.url }}</a>
+  </li>
+  {% endif %}
+  {% endfor %}
+</ul>