add mixes

blog/app/mix/[fullname]/fix.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+
+// TODO without this, Vanilla Extract styles are not embeded in the given page
+export const nothing = style({
+  display: "none",
+});

blog/app/mix/[fullname]/page.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from "react";
+import Link from "next/link";
+import type { Metadata } from "next";
+
+import { Mix, Content, excerpt } from "@cmd/posts";
+
+import { Item } from "@cmd/ui-article";
+import * as Layout from "@cmd/ui-layout";
+import { Code } from "@cmd/ui-text";
+
+import { Preview } from "@cmd/ui-player";
+import { Header, Nav } from "@cmd/ui-header";
+
+import * as SiteMetadata from "../../../metadata";
+import { Footer } from "../../../components/Footer";
+import { components } from "../../../components/MDXComponents";
+
+import * as styles from "./fix.css";
+
+export async function generateStaticParams() {
+  const params = Mix.all.map((post) => ({
+    fullName: post.id,
+  }));
+
+  return params;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { fullname: string };
+}): Promise<Metadata> {
+  const post = Mix.fromId(params.fullname);
+
+  if (!post) {
+    throw new Error(`Post not found: ${params.fullname}`);
+  }
+
+  const url = `${SiteMetadata.site.url}${SiteMetadata.contentRelativeUrl(
+    post
+  )}`;
+  const imageUrl = `${SiteMetadata.site.url}${post.image.src}`;
+
+  const title = `${post.title} - ${SiteMetadata.site.name}`;
+  const description = await excerpt(post);
+
+  return {
+    title,
+    openGraph: {
+      type: "article",
+      url,
+      title,
+      description,
+      images: imageUrl,
+    },
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: { fullname: string };
+}) {
+  const mix = Mix.fromId(params.fullname);
+
+  if (!mix) {
+    throw new Error(`Post not found: ${params.fullname}`);
+  }
+
+  return (
+    <div>
+      <Layout.Wrapper>
+        <Header />
+
+        <Nav>
+          <Nav.Item as={Link} href="/">
+            le dernier <Code>cmd</Code>
+          </Nav.Item>
+          <Nav.Item as={Link} href="/posts">
+            les <Code>cmd</Code> passés
+          </Nav.Item>
+          <Nav.Item as={Link} href="/mixes">
+            les mixes
+          </Nav.Item>
+        </Nav>
+
+        <Item
+          key={mix.id}
+          post={mix}
+          content={<Content post={mix} components={components} />}
+        />
+
+        <Footer />
+
+        <span className={styles.nothing} />
+      </Layout.Wrapper>
+
+      <Preview />
+    </div>
+  );
+}

blog/app/mixes/fix.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+
+// TODO without this, Vanilla Extract styles are not embeded in the given page
+export const nothing = style({
+  display: "none",
+});

blog/app/mixes/page.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from "react";
+
+import { Mix, Content } from "@cmd/posts";
+import { Item } from "@cmd/ui-article";
+import { H2, Paragraph, Code } from "@cmd/ui-text";
+
+import * as Layout from "@cmd/ui-layout";
+
+import { Preview } from "@cmd/ui-player";
+
+import Link from "next/link";
+import { Header, Nav } from "@cmd/ui-header";
+import { Footer } from "../../components/Footer";
+import { components } from "../../components/MDXComponents";
+
+import * as BlogMetadata from "../../metadata";
+
+import * as styles from "./fix.css";
+
+export const metadata = {
+  title: `Tous les mixes - ${BlogMetadata.site.name}`,
+};
+
+export default async function Page() {
+  return (
+    <div>
+      <Layout.Wrapper>
+        <Header />
+
+        <Nav>
+          <Nav.Item as={Link} href="/">
+            le dernier <Code>cmd</Code>
+          </Nav.Item>
+          <Nav.Item as={Link} href="/posts">
+            les <Code>cmd</Code> passés
+          </Nav.Item>
+          <Nav.Item active as={Link} href="/mixes">
+            les mixes
+          </Nav.Item>
+        </Nav>
+
+        <H2>
+          <Code>cmd</Code> mixes
+        </H2>
+
+        <Paragraph>
+          Quelques mixes fait à droite à gauche, dans la pure tradition{" "}
+          <Code>cmd</Code> bien entendu.
+        </Paragraph>
+
+        {Mix.all.map((mix) => (
+          <Item
+            key={mix.id}
+            post={mix}
+            content={<Content post={mix} components={components} />}
+          />
+        ))}
+
+        <Footer />
+
+        <span className={styles.nothing} />
+      </Layout.Wrapper>
+
+      <Preview />
+    </div>
+  );
+}

blog/app/page.tsx

@@ -42,6 +42,9 @@ export default async function Home() {
           <Nav.Item as={Link} href="/posts">
             les <Code>cmd</Code> passés
           </Nav.Item>
+          <Nav.Item as={Link} href="/mixes">
+            les mixes
+          </Nav.Item>
         </Nav>
 
         <Suspense fallback={null}>

blog/app/post/[fullname]/page.tsx

@@ -80,6 +80,9 @@ export default async function Page({
           <Nav.Item as={Link} href="/posts">
             les <Code>cmd</Code> passés
           </Nav.Item>
+          <Nav.Item as={Link} href="/mixes">
+            les mixes
+          </Nav.Item>
         </Nav>
 
         <Suspense fallback={null}>

blog/app/posts/page.tsx

@@ -41,6 +41,9 @@ export default async function Page() {
           <Nav.Item active as={Link} href="/posts">
             les <Code>cmd</Code> passés
           </Nav.Item>
+          <Nav.Item as={Link} href="/mixes">
+            les mixes
+          </Nav.Item>
         </Nav>
 
         <H2>

posts/content/mixes/2023-10-20-iss-S07E03.md

@@ -0,0 +1,14 @@
+---
+title: 'ISS S07E03'
+image:
+  src: '/images/mix-1.png'
+  alt: 'Gradient abstrait'
+  caption: ''
+externalUrl: 'https://www.prun.net/emission/8MNV-iss/gaye-iss-s07e03-mix-en-tout-genre'
+---
+
+Un mix en tout genre pour [ISS sur Prun](https://www.prun.net/emission/8MNV-iss), l'émission des musiques planantes.
+
+_Laurie Spiegel / Baron Rétif & Concepción Perez / Yussef Dayes / claire rousay / Conny Frischauf / Shida Shahabi / Cotton Mouth / Aphex Twin / Tortoise / Yoshihiro Sawasaki / Greg Foat / Agusa / Takahiro Oisi / Christina Chatfield / DAVi MUSiC / Richard H. Kirk / Chassol / James Heather_
+
+_Ambient / Jazz / Funk / Techno / Experimental / Psychedelic Rock / Krautrock_

posts/content/mixes/2023-11-26-iss-S07E08.md

@@ -0,0 +1,14 @@
+---
+title: 'ISS S07E08'
+image:
+  src: '/images/mix-2.png'
+  alt: 'Gradient abstrait'
+  caption: ''
+externalUrl: 'https://www.prun.net/emission/8MNV-iss/aJlO-iss-s07e08-mix-automnal'
+---
+
+Pour [ISS sur Prun](https://www.prun.net/emission/8MNV-iss), l'émission des musiques planantes.
+
+_Gacha Bakradze / DJ Nobu / Dan Ar Braz / Les Agamemnonz / Yussef Kamaal / Suzanne Ciani / Jonathan Fitoussi / Grails / Bogdan Raczynski / Hiroshi Yoshimura / Philip Glass / Tatsuro Murakami / L'Impératrice / Quince_
+
+_Ambient / IDM / Techno / Experimental / Psychedelic Rock / Electro / Deep House / Classic / Jazz / Synth Pop_ 

ui/article/src/Item.css.ts

@@ -0,0 +1,77 @@
+import { style } from "@vanilla-extract/css";
+import { vars, mediaQueries } from "@cmd/ui-theme";
+
+export const grid = style({
+  display: "grid",
+  gridColumnGap: vars.sizes.m,
+  gridRowGap: vars.sizes.s,
+  gridTemplateColumns: "1fr",
+  gridTemplateRows: "1fr",
+  gridTemplateAreas: `
+        "content"
+        "action"
+      `,
+  alignItems: "center",
+
+  marginTop: `${vars.sizes.l}`,
+
+  "@media": {
+    ...mediaQueries.forDesktopOnly({
+      gridTemplateColumns: "2fr 4fr 1fr",
+      gridTemplateRows: "1fr",
+      gridTemplateAreas: `
+    "image content action"
+  `,
+    }),
+  },
+});
+
+export const image = style({
+  gridArea: "image",
+  display: "none",
+
+  "@media": {
+    ...mediaQueries.forDesktopOnly({
+      display: "block",
+    }),
+  },
+});
+export const nextImage = style({
+  width: "100%",
+  objectFit: "contain",
+  objectPosition: "top",
+  height: "auto",
+});
+
+export const content = style({
+  gridArea: "content",
+});
+
+export const action = style({
+  gridArea: "action",
+});
+
+export const button = style({
+  border: `1px solid ${vars.colors.buttonBackground}`,
+  outline: "inherit",
+  borderRadius: "20px",
+  textDecoration: "none",
+  padding: `${vars.sizes.s}`,
+  whiteSpace: "nowrap",
+
+  selectors: {
+    "&:visited": {
+      color: vars.colors.text,
+    },
+
+    "&:hover, &:focus": {
+      cursor: "pointer",
+      backgroundColor: vars.colors.buttonBackground,
+      color: vars.colors.background,
+    },
+
+    "&:active": {
+      borderColor: vars.colors.background,
+    },
+  },
+});

ui/article/src/Item.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import NextImage from "next/image";
+import { Mix } from "@cmd/domain-content";
+import { Small } from "@cmd/ui-text";
+import { format, parseISO } from "date-fns";
+import * as styles from "./Item.css";
+
+export function Item({
+  post,
+  content,
+}: {
+  post: Mix.Mix;
+  content: React.ReactNode;
+}) {
+  const publicationDate = format(parseISO(post.publishedAt), "dd/MM/yyyy");
+
+  return (
+    <article className={styles.grid}>
+      <div className={styles.image}>
+        <NextImage
+          className={styles.nextImage}
+          src={post.image.src}
+          alt={post.image.alt}
+          width={600}
+          height={600}
+        />
+      </div>
+      <div className={styles.content}>
+        <h2>{post.title}</h2>
+
+        {content}
+
+        <Small>Publié le {publicationDate}</Small>
+      </div>
+      <div className={styles.action}>
+        <a
+          className={styles.button}
+          href={post.externalUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
+          Écouter ↗
+        </a>
+      </div>
+    </article>
+  );
+}

ui/article/src/index.ts

@@ -1,4 +1,5 @@
 import { Article } from "./Article";
 import { Mosaic } from "./Mosaic";
+import { Item } from "./Item";
 
-export { Article, Mosaic };
+export { Article, Mosaic, Item };