const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

const pluginRss = require("@11ty/eleventy-plugin-rss");

const embedYouTube = require("eleventy-plugin-youtube-embed");

const striptags = require("striptags");

const markdownIt = require("markdown-it");

const markdownItAnchor = require("markdown-it-anchor");

const pluginTOC = require('eleventy-plugin-toc');

require("dotenv").config();

const AUTHORS = require("./src/data/AUTHORS.json");

const EXCERPT_LENGTH = 200;

function extractImage(article, prefix = "") {

if (!article.hasOwnProperty("templateContent")) {

console.warn(

'Failed to extract excerpt: Document has no property "templateContent".'

);

return "";

}

const match = article.templateContent.match(

/<img src="([^"]+)" alt="([^"]+)"/

);

if (match) {

return `<img src="${prefix}${match[1]}" alt="${match[2]}" loading="lazy"></img>`;

}

return "";

}

function extractExcerpt(article) {

if (!article.hasOwnProperty("templateContent")) {

console.warn(

'Failed to extract excerpt: Document has no property "templateContent".'

);

return null;

}

let excerpt = null;

const content = article.templateContent;

excerpt = striptags(content)

.substring(0, EXCERPT_LENGTH)

.replace(/^\s+|\s+$|\s+(?=\s)/g, "")

.trim()

.concat("...");

return excerpt;

}

module.exports = function (eleventyConfig) {

const markdownLibrary = markdownIt({

html: true,

breaks: true,

linkify: true

}).use(markdownItAnchor, {

permalink: true,

permalinkClass: "direct-link",

permalinkSymbol: "#"

});

eleventyConfig.setLibrary("md", markdownLibrary);

eleventyConfig.addPassthroughCopy("src/assets");

eleventyConfig.addPassthroughCopy("src/guides/**/*.{png,jpg,jpeg,gif,svg}");

eleventyConfig.addPassthroughCopy("src/sw.js");

eleventyConfig.addPassthroughCopy("src/manifest.json");

eleventyConfig.addPassthroughCopy("src/.well-known");

eleventyConfig.addPassthroughCopy("CNAME");

eleventyConfig.addFilter("processBrowserTagName", function (name) {

return name.split(":")[1];

});

eleventyConfig.addFilter("onlyTags", function (tags) {

return tags.filter((tag) => !tag.startsWith("browser:") && tag !== "tip");

});

eleventyConfig.addFilter("onlyBrowsers", function (browsers) {

return browsers.filter((browser) => browser.startsWith("browser:"));

});

eleventyConfig.addShortcode("excerpt", (article) => extractExcerpt(article));

eleventyConfig.addShortcode("mainImage", (article) => extractImage(article));

eleventyConfig.addShortcode("lastTipDate", (collection) => {

let lastDate = null;

for (const post of collection) {

if (!lastDate || post.date > lastDate) {

lastDate = post.date;

}

}

return lastDate.toISOString();

});

eleventyConfig.addShortcode("formatAuthors", (authors) => {

const authorArray = Array.isArray(authors)

? authors

: authors.split(",").map((a) => a.trim());

return authorArray

.map((author) =>

AUTHORS[author] ? `<a href="${AUTHORS[author]}">${author}</a>` : author

)

.join(", ");

});

eleventyConfig.addPlugin(syntaxHighlight);

eleventyConfig.addPlugin(pluginRss);

eleventyConfig.addPlugin(embedYouTube);

eleventyConfig.addPlugin(pluginTOC, {

tags: ['h2'],

wrapper: 'div'

});

eleventyConfig.addTransform("fix-tip-urls", function (content) {

if (this.inputPath.includes("/src/tips/en/")) {

// Replace all relative links to other tips with their absolute links.

// This is needed because we want relative file links in dev, in order

// to benefit from markdown preview. But we want absolute links in prod.

content = content.replace(

/href="\.\/([^.]+)\.md"/g,

'href="/tips/en/$1"'

);

// Also replace all relative image links with their absolute versions.

content = content.replace(

/src="\.\.\/\.\.\/assets\/img\//g,

'src="/assets/img/'

);

}

return content;

});

// A hacky way to get all tips. We don't actually use this collection.

// We just use this callback to store the tips in an array.

const allTips = [];

eleventyConfig.addCollection("allTips", function (collectionApi) {

return collectionApi.getAll().filter(function (item) {

allTips.push(item);

return item.inputPath.includes("/src/tips/en/");

});

});

eleventyConfig.addShortcode("insertTip", (slug) => {

const tipData = allTips.find((tip) => tip.fileSlug === slug);

if (!tipData) {

return `Tip not found: ${slug}`;

}

// We're generating HTML in MD, so we need to avoid leading

// whitespaces at the beginning of each line. Otherwise, it will

// be rendered as code.

return [

`<div class="tip tip-in-guide">`,

`<span class="tip-title">See also: <a href="/tips/en/${slug}">${tipData.data.title}</a></span>`,

`<a href="/tips/en/${slug}" class="tip-image">${extractImage(

tipData,

"../"

)}</a>`,

`<div class="tip-excerpt">`,

extractExcerpt(tipData),

` <a href="/tips/en/${slug}">Read more</a>`,

`</div>`,

`</div>`,

].join("");

});

return {

dir: {

input: "src",

output: "dist",

data: "data",

layouts: "layouts",

includes: "includes",

},

};

};