chore: first commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = true
+trim_trailing_whitespace = false

.eleventy.js

@@ -0,0 +1,16 @@
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+module.exports = (eleventyConfig) => {
+    eleventyConfig.setQuietMode(false);
+    eleventyConfig.addPassthroughCopy("src/assets")
+
+    eleventyConfig.addWatchTarget("./src/styles")
+    eleventyConfig.setWatchThrottleWaitTime(100)
+    return {
+        dir: {
+            input: "src",
+            output: "dist",
+            includes: '_includes',
+        },
+        // templateFormats: ["html", "pug"]
+    }
+}

.gitignore

@@ -0,0 +1,3 @@
+/dist
+/node_modules
+notes.md

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "all",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": false,
+    "bracketSpacing": false
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "editions",
+  "version": "1.0.0",
+  "description": "",
+  "main": "eleventy.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:stylus": "stylus --compress ./src/styles/ --out ./dist/styles/",
+    "watch:stylus": "stylus --watch ./src/styles/ --out ./dist/styles/",
+    "build:11ty": "eleventy",
+    "watch:11ty": "eleventy --watch --serve --port=8081",
+    "build": "concurrently \"npm:build:*\"",
+    "dev": "concurrently \"npm:watch:*\"",
+    "debug": "DEBUG=Eleventy* yarn dev"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@11ty/eleventy": "^2.0.1",
+    "concurrently": "^8.2.1",
+    "stylus": "^0.60.0"
+  }
+}

src/404.md

@@ -0,0 +1,6 @@
+---
+title: À propos
+layout: layout.pug
+---
+
+Cette page n'existe pas

src/_includes/home.pug

@@ -0,0 +1,7 @@
+extends /layout.pug
+
+block content
+  .lead !{content}
+
+block footer
+  include partials/catalog

src/_includes/layout.pug

@@ -0,0 +1,38 @@
+doctype html
+html
+  head
+    meta(charset="utf-8")
+    meta(name="viewport",content="width=device-width, initial-scale=1")
+    title=title
+    link(rel="stylesheet", href="/styles/main.css")
+
+  //- string interpolation below
+  //- https://pugjs.org/language/interpolation.html#string-interpolation-unescaped
+  body
+    .wrapper
+      header 
+        .title
+          .logo
+            img(src="/assets/image.jpg", alt="logo")
+          h1 
+            a(href="/") éditions ryogasp!
+          p auto-édition et petits tirages
+        nav
+          ul.nodots
+            li
+              a(href="/about") à propos
+
+      main
+        .content
+          block content
+            div !{content}
+
+      footer
+        block footer
+          div(class="update") Date de dernière mise à jour : 
+            span #{page.date.toISOString().substring(0, 10)}
+        nav
+          ul.nodots
+            li
+              a(href="/about") à propos
+

src/_includes/partials/catalog.pug

@@ -0,0 +1,14 @@
+ul.nodots.catalog
+  each product in collections.product.sort((a,b) => a.data.date - b.data.date)
+    if product.data.status === 'purchasable'
+      li(class=page.url == product.url ? 'active' : '')
+        a(href=product.url,class='product')
+          if product.data.cover
+            .cover
+              img(src=`/assets/catalog/${product.data.cover}`, alt=product.data.title)
+          .legend
+            div.title
+              = product.data.title
+            if product.data.author
+              div.author
+                = product.data.author

src/_includes/product.pug

@@ -0,0 +1,23 @@
+extends /layout.pug
+
+block content
+  article
+    .aside
+      img(src=`/assets/catalog/${cover}`, alt=title)
+      if status == 'purchasable'
+        .buy
+          .price
+            span=(price/100)
+            | €
+          a.button(href=payment) acheter
+          
+    .description
+      h2=title
+      h3
+        span=author
+        span=` – `
+        span=year
+      !=content
+      div publié le 
+        time(datetime=page.date)=page.date.toLocaleDateString('fr-FR')
+  

src/about.md

@@ -0,0 +1,10 @@
+---
+title: À propos
+layout: layout.pug
+---
+
+Les éditions ryogasp! sont la lente maturation du site [ryogasp.com](https://ryogasp.com) depuis le début des années 2000. Site personnel des deux compères Richard Cornu (RYoGA) et Gaspard Beernaert (Gasp), cet espace de jeu est un journal de bord qui a entre autre pris la forme d'un blog BD à partir de 2004. Pendant plusieurs années, RYoGA a publié des centaines et des centaines de bande-dessinées sous forme de strips bd à un rythme régulier. Il est un des auteurs à l'origine de la fameuse vague créative des blogs BD, qui ont eu entre autre leur propre festival sur Paris entre 2005 et 2015, le Festival des Blogs BD. A cette époque, RYoGA publie rarement son travail sur papier, préférant la simplicité et la liberté offerte par la publication en ligne. Avec le temps, il revient sur son travail et confectionne des recueils. Le premier qu'il propose aujourd'hui au sein des éditions ryogasp! est "Objectif Marathon !", les préoccupations sportives de son auteur. Ce livre est le premier volume d'une série de travaux anciens et futurs à venir.
+
+Les éditions ryogasp! proposent des ouvrages en auto-édition, en auto-financement et en petits tirages. Nous expédions les colis nous-même, chacun étant, après échanges de quelques mots avec le futur lecteur, personnalisé par une dédicace (sauf demande contraire bien entendu).
+
+??? L'espace de vente vous propose également des originaux de l'auteur, planches de bande-dessinées et croquis aquarelle.

src/catalog/objectif-marathon.md

@@ -0,0 +1,30 @@
+---
+title: Objectif Marathon
+description: Livre Broché
+author: RYoGA
+date: 2023-11-01
+year: 2023
+edition: 2023-2
+layout: product.pug
+cover: objectif-marathon-2023.png
+status: purchasable
+price: 2000
+id: objectif-marathon-2023
+payment: https://buy.stripe.com/7sI9CT7bW9t9cko289
+tags:
+  - product
+  - multiple
+---
+
+Comment se préparer au marathon ? RYoGA vous propose de découvrir son entraînement intensif ! Mais tout n’est pas gagné... Réussira-t-il à dépasser ses limites physiques et mentales, et à atteindre son objectif ?
+
+Objectif-Marathon est une mini-série publiée en ligne sur [le blog de RYoGA](https://ryogasp.com/blog/objectif-marathon/) entre 2015 et 2017, maintenant édité et adapté au format papier.
+
+Retrouvez dans cette bande dessinée les aventures sportives de l’illustrateur RYoGA, mais aussi quelques tranches de vie.
+
+124 pages
+couleur
+18×18 cm
+Couverture souple
+20 euros
+Dédicace sur demande

src/index.md

@@ -0,0 +1,21 @@
+---
+title: éditions ryogasp!
+layout: home.pug
+---
+
+Vous pouvez enfin lire sur papier et commander le livre "Objectif Marathon !" !
+
+Après des années de publication de bande-dessinées sur son blog bd en ligne, RYoGA avait envie de pouvoir montrer son travail en vrai. Jusqu'ici il donnait une url, sortait son smartphone ou se calait derrière un ordinateur pour montrer la multitude d'archives. On se serait cru à une soirée diapo.
+
+C'est ainsi que dans un souci de faire perdurer la paix des ménages que naquit "Objectif Marathon !" Lorsque le livre sorti, c'était alors à un nombre tout à fait confidentiel d'exemplaires. Et pour cause, imprimé dans un lointain pays d'Europe du Nord, le prix du livre concurrençait furieusement le cours du pétrole. Personne ne roulant sur l'or, il fut décidé par accord tacite que l'on en resterait là.
+
+RYoGA partageait ainsi la lecture de son unique exemplaire, à défaut de pouvoir le vendre. Le nombre d'intéressés monta clairement d'un cran alors que la clientèle de l'hôtel où il travaillait demandait quasiment systématiquement à se procurer le livre. Composée à majorité de sportifs faisant l'ascension du Mont Ventoux, il était en effet un parfait souvenir de leur fabuleux périple ascensionnel.
+
+C'est ainsi que, trouvant une maison d'impression adéquate, et soutenu par ses pairs, RYoGA pu enfin proposer le livre au plus grand nombre. A l'hôtel, les livres dédicacés à même le comptoir de la réception partirent comme des petits pains, juste après les croissants du petit déjeuner.
+
+Mais rassurez-vous, pas besoin de monter le Ventoux ou de passer une nuit à l'hôtel pour se procurer l'ouvrage ! Désormais, et grâce à la magie des éditions ryogasp et de son webmaster Gasp! - une vraie onomatopée celui-là - vous pouvez commander le livre ici-même.
+
+Avec cette auto-édition de "Objectif Marathon !", c'est évidemment tout un travail de sélection et de réadaptation qui a été fait. Rien ne vous empêche d'aller rechercher le contenu sur le blog en ligne et d'en profiter avec la petite molette de votre souris. Vous vous replongerez dans cette période 2.0 où le scrolling était un art de vivre et un parti pris artistique à part entière. Ici vous tournerez des pages carrées et serez libre de vous arrêter après chacune d'elle si le coeur vous en dit... elle sera toujours là à votre retour, quelle sérénité !
+Note de l'auteur : pensez à proposer des marques page !
+
+Nous vous souhaitons une bonne lecture avec ce merveilleux objet d'évasion qu'est "Objectif Marathon !"

src/styles/base.styl

@@ -0,0 +1,13 @@
+hr
+  margin-top 25px
+  margin-bottom 25px
+  border 0
+  border-top 1px solid #eee
+
+ul.nodots
+  list-style-type none
+  margin 0
+  padding-left 0
+
+.lead
+  margin-top 3em

src/styles/catalog.styl

@@ -0,0 +1,21 @@
+a.product
+  width 256px
+  display block
+  border 3px solid #222
+
+  color #222
+  text-decoration none
+  &:hover
+    color #333
+    text-decoration none
+  .cover
+    border-bottom 3px solid #222
+    img
+      display block
+      width 256px
+  .legend
+    padding 10px
+    .title
+      font-size 1.5em
+      margin 0
+      font-weight bold

src/styles/layout.styl

@@ -0,0 +1,67 @@
+
+body
+  margin 0
+  padding 0
+  background-color #fff 
+
+.wrapper
+  max-width 1024px
+  margin auto
+
+header
+  margin-top 1.5rem
+  border 1px solid purple
+  background-color #fff
+  color #333
+  padding 10px
+  display flex
+  justify-content space-between
+  align-items baseline
+  .title
+    .logo, h1
+      display inline-block
+      margin 0
+    .logo img
+      height 1.5rem
+    h1
+      margin-bottom .5rem
+    p
+      margin 0
+      margin-left 2rem
+header, footer
+  nav ul
+    display flex
+    li
+      margin-left 1rem
+  a
+    color #333
+    text-decoration none
+    &:hover
+      color #222
+      text-decoration none
+footer nav
+  margin 1rem
+  ul
+    justify-content flex-end
+
+.content
+  max-width 55em
+  margin auto
+main 
+  border 1px solid red
+  padding 1rem 1rem
+
+
+footer
+  .update
+    font 0.75em/1.5em 'Monaco', monospace
+    color #eee
+
+
+@media all and (min-width:560px)
+  footer nav
+    display none
+
+@media all and (max-width:560px)
+  header nav
+    display none

src/styles/main.styl

@@ -0,0 +1,6 @@
+// needs to be refacto into layout typography
+@import "base.styl"
+@import "typography.styl"
+@import "layout.styl"
+@import "catalog.styl"
+@import "product.styl"

src/styles/product.styl

@@ -0,0 +1,58 @@
+article
+    display flex
+    flex-direction row
+    align-items flex-start
+    justify-content flex-start
+    .aside
+      margin-bottom 1rem
+      margin-right 1rem
+      padding-top 1.8em
+      padding-right 1rem
+      border-right 3px solid #222
+      width 13rem
+      img
+        width 100%
+        max-width 13rem
+        height auto
+      .buy
+        font-family 'Open Sans', sans-serif
+        margin-top 1em
+        display flex
+        flex-direction row
+        flex-wrap nowrap
+        justify-content space-between
+        align-items baseline
+        .button
+          text-decoration none
+          border-radius 1em
+          border none
+          background-color #fff
+          color #222
+          padding .3em .6em
+          cursor pointer
+          border-width 3px
+          border-style solid
+          border-color  #222
+          font-weight bold
+          transition color .3s
+          transition background-color .2s linear .1s
+          &:hover
+            background-color #222
+            color #fff
+
+    .description
+      max-width 40rem
+      h2
+        margin-bottom .3em
+      h3
+        margin-top 0
+      color #222
+
+@media all and (max-width: 900px)
+  article
+    flex-direction column
+    .aside
+        padding-right inherit
+        border-right none
+        width auto
+

src/styles/typography.styl

@@ -0,0 +1,112 @@
+/* bitter-regular - latin */
+@font-face {
+  font-display swap;
+  font-family 'Bitter';
+  font-style normal;
+  font-weight 400;
+  src url('/assets/fonts/bitter-v33-latin-regular.woff2') format('woff2'),
+       url('/assets/fonts/bitter-v33-latin-regular.ttf') format('truetype');
+}
+/* bitter-600 - latin */
+@font-face {
+  font-display swap;
+  font-family 'Bitter';
+  font-style normal;
+  font-weight 600;
+  src url('/assets/fonts/bitter-v33-latin-600.woff2') format('woff2'),
+       url('/assets/fonts/bitter-v33-latin-600.ttf') format('truetype');
+}
+/* bitter-600italic - latin */
+@font-face {
+  font-display swap;
+  font-family 'Bitter';
+  font-style italic;
+  font-weight 600;
+  src url('/assets/fonts/bitter-v33-latin-600italic.woff2') format('woff2'),
+       url('/assets/fonts/bitter-v33-latin-600italic.ttf') format('truetype');
+}
+
+/* crimson-text-regular - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Crimson Text';
+  font-style normal;
+  font-weight 400;
+  src url('/assets/fonts/crimson-text-v19-latin-regular.woff2') format('woff2'), 
+       url('/assets/fonts/crimson-text-v19-latin-regular.ttf') format('truetype'); 
+}
+/* crimson-text-italic - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Crimson Text';
+  font-style italic;
+  font-weight 400;
+  src url('/assets/fonts/crimson-text-v19-latin-italic.woff2') format('woff2'), 
+       url('/assets/fonts/crimson-text-v19-latin-italic.ttf') format('truetype'); 
+}
+/* crimson-text-600 - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Crimson Text';
+  font-style normal;
+  font-weight 600;
+  src url('/assets/fonts/crimson-text-v19-latin-600.woff2') format('woff2'), 
+       url('/assets/fonts/crimson-text-v19-latin-600.ttf') format('truetype'); 
+}
+/* crimson-text-600italic - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Crimson Text';
+  font-style italic;
+  font-weight 600;
+  src url('/assets/fonts/crimson-text-v19-latin-600italic.woff2') format('woff2'), 
+       url('/assets/fonts/crimson-text-v19-latin-600italic.ttf') format('truetype'); 
+}
+/* crimson-text-700 - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Crimson Text';
+  font-style normal;
+  font-weight 700;
+  src url('/assets/fonts/crimson-text-v19-latin-700.woff2') format('woff2'), 
+       url('/assets/fonts/crimson-text-v19-latin-700.ttf') format('truetype'); 
+}
+/* crimson-text-700italic - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Crimson Text';
+  font-style italic;
+  font-weight 700;
+  src url('/assets/fonts/crimson-text-v19-latin-700italic.woff2') format('woff2'), 
+       url('/assets/fonts/crimson-text-v19-latin-700italic.ttf') format('truetype'); 
+}
+
+/* open-sans-regular - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Open Sans';
+  font-style normal;
+  font-weight 400;
+  src url('../fonts/open-sans-v36-latin-regular.woff2') format('woff2'),
+       url('../fonts/open-sans-v36-latin-regular.ttf') format('truetype');
+}
+/* open-sans-700 - latin */
+@font-face {
+  font-display swap; 
+  font-family 'Open Sans';
+  font-style normal;
+  font-weight 700;
+  src url('../fonts/open-sans-v36-latin-700.woff2') format('woff2'),
+       url('../fonts/open-sans-v36-latin-700.ttf') format('truetype');
+}
+
+h1, h2, h3, h4
+  font-family "Bitter", Georgia, Serif;
+  font-weight 600
+  line-height 1.1;
+  font-size 38px;
+body
+  font-family "Crimson Text", "Hoefler Text", "Georgia", serif;
+  font-size 18px;
+  line-height 1.428571429;
+  color #333;