From fed3c371c7b141fd79f1f39893911d065b5f1a3e Mon Sep 17 00:00:00 2001 From: Nicolas Doby Date: Tue, 18 Oct 2022 16:53:51 +0200 Subject: [PATCH] feat: add figure support --- eleventy.config.js | 11 +++++++++++ fr/blog/exemple.md | 2 ++ package.json | 7 ++++--- public/css/index.css | 15 +++++++++++++++ public/img/.gitkeep | 0 5 files changed, 32 insertions(+), 3 deletions(-) delete mode 100644 public/img/.gitkeep diff --git a/eleventy.config.js b/eleventy.config.js index 5bf20cd..fb15cf6 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -8,6 +8,15 @@ const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginNavigation = require("@11ty/eleventy-navigation"); const { EleventyI18nPlugin, EleventyHtmlBasePlugin } = require("@11ty/eleventy"); const languageStrings = require("./i18n.js"); +let markdownIt = require("markdown-it"); +let options = { + // whatever options you have set for the library here +}; +let mdfigcaption = require('markdown-it-image-figures'); +let figoptions = { + figcaption: true +}; +const mdLib = markdownIt(options).use(mdfigcaption, figoptions); const manifestPath = path.resolve(__dirname, "_site", "assets", "manifest.json"); const manifest = JSON.parse( @@ -17,6 +26,8 @@ const manifest = JSON.parse( module.exports = function(eleventyConfig) { eleventyConfig.ignores.add("README.md"); + eleventyConfig.setLibrary("md", mdLib); + // Adds a universal shortcode to return the URL to a webpack asset. In Nunjack templates: // {% webpackAsset 'main.js' %} or {% webpackAsset 'main.css' %} eleventyConfig.addShortcode("webpackAsset", function(name) { diff --git a/fr/blog/exemple.md b/fr/blog/exemple.md index f80b0df..b7a4359 100644 --- a/fr/blog/exemple.md +++ b/fr/blog/exemple.md @@ -13,6 +13,8 @@ layout: layouts/post.njk Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh. to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. +![Un chaton](http://placekitten.com/400/300 "Un chaton tout mignon 😍") + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh. ## Partie une diff --git a/package.json b/package.json index 31c1efc..c6b4a25 100644 --- a/package.json +++ b/package.json @@ -17,20 +17,21 @@ "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", - "luxon": "^3.0.1", - "markdown-it-anchor": "^8.6.4", - "rosetta": "^1.1.0", "@babel/core": "^7.10.2", "@babel/preset-env": "^7.10.2", "autoprefixer": "^9.8.0", "babel-loader": "^8.1.0", "css-loader": "^3.5.3", "cssnano": "^4.1.10", + "luxon": "^3.0.1", + "markdown-it-anchor": "^8.6.4", + "markdown-it-image-figures": "^2.1.0", "mini-css-extract-plugin": "^0.9.0", "npm-run-all": "^4.1.5", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", + "rosetta": "^1.1.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", "webpack-manifest-plugin": "^2.2.0" diff --git a/public/css/index.css b/public/css/index.css index 4eaa1ae..0462f3c 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -146,6 +146,21 @@ hr { margin: 4rem 15vw; } +figure { + text-align: center; + margin: 0; +} + +figure img { + box-shadow: 8px 5px 5px rgba(0,0,10,.20); +} + +figure figcaption { + margin-top: 6px; + font-size: 0.8125em; /* 13px /16 */ + color: rgba(0,0,10,.55); +} + /* Header */ .main-header { background: #fff; diff --git a/public/img/.gitkeep b/public/img/.gitkeep deleted file mode 100644 index e69de29..0000000