From da316d2ca330b0b4b5d0825dd5158abbb110c5fb Mon Sep 17 00:00:00 2001 From: dwkns Date: Sun, 16 Mar 2025 12:46:39 +0000 Subject: [PATCH] Add Eleventy Framework guide --- .../framework-guides/eleventy.tsx | 163 ++++++++++++++++++ .../installation/framework-guides/index.ts | 1 + src/docs/img/guides/eleventy-white.react.svg | 7 + 3 files changed, 171 insertions(+) create mode 100644 src/app/(docs)/docs/installation/framework-guides/eleventy.tsx create mode 100644 src/docs/img/guides/eleventy-white.react.svg diff --git a/src/app/(docs)/docs/installation/framework-guides/eleventy.tsx b/src/app/(docs)/docs/installation/framework-guides/eleventy.tsx new file mode 100644 index 000000000..6804b3650 --- /dev/null +++ b/src/app/(docs)/docs/installation/framework-guides/eleventy.tsx @@ -0,0 +1,163 @@ +import { css, html, js, Page, shell, Step, Tile } from "./utils"; +import Logo from "@/docs/img/guides/eleventy-white.react.svg"; + +export let tile: Tile = { + title: "Eleventy", + description: "Eleventy is a simpler static site generator", + Logo, +}; + +export let page: Page = { + title: "Install Tailwind CSS with Eleventy", + description: "Setting up Tailwind CSS in an Eleventy project.", +}; + +export let steps: Step[] = [ + { + title: "Create your project", + body: ( +

+ Start by creating a new Eleventy project if you don’t have one set up already. The most common approach is outlined in their{" "} + getting started guide. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + mkdir my-project + cd my-project + npm init -y + npm pkg set type="module" + npm install @11ty/eleventy + mkdir src + touch src/index.html + `, + }, + }, + { + title: "Install Tailwind CSS", + body: ( +

+ Install @tailwindcss/vite and its peer dependencies via npm. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm install tailwindcss @tailwindcss/vite + `, + }, + }, + { + title: "Install the Eleventy Vite Plugin", + body: ( +

+ Install @11ty/eleventy-plugin-vite and its peer dependencies via npm. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm install @11ty/eleventy-plugin-vite + `, + }, + }, + { + title: "Import Tailwind CSS", + body: ( +

+ Create src/styles.css file and add an @import for Tailwind CSS. +

+ ), + code: { + name: "src/styles.css", + lang: "css", + code: css` + @import "tailwindcss"; + `, + }, + }, + { + title: "Configure Eleventy", + body: ( +

+ Create a eleventy.config.js file in your project root, and add the @11ty/eleventy-plugin-vite{" "} and @11ty/eleventy-plugin-vite{" "} + plugin. Include an addPassthroughCopy to copy your CSS to the output folder. +

+ ), + code: { + name: "eleventy.config.js", + lang: "js", + code: js` + import EleventyVitePlugin from "@11ty/eleventy-plugin-vite"; + import tailwindcss from '@tailwindcss/vite' + + export default (eleventyConfig) => { + eleventyConfig.addPassthroughCopy("src/styles.css"); + + eleventyConfig.addPlugin(EleventyVitePlugin, { + viteOptions: { + plugins: [ tailwindcss() ] + } + }); + }; + + export const config = { + dir: { + input: "src", + }, + }; + `, + }, + }, + + { + title: "Start your build process", + body: ( +

+ Run your build process with npx eleventy --serve. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npx eleventy --serve + `, + }, + }, + { + title: "Start using Tailwind in your project", + body: ( +

+ Add your CSS file to the {""} and start using Tailwind’s utility classes to style your + content. +

+ ), + code: { + name: "src/index.html", + lang: "html", + code: html` + + + + + + + + + + +

+ + Hello world! +

+ + + `, + }, + }, +]; diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts index 14f5a4b35..4766ebd1e 100644 --- a/src/app/(docs)/docs/installation/framework-guides/index.ts +++ b/src/app/(docs)/docs/installation/framework-guides/index.ts @@ -26,6 +26,7 @@ const guides: Guide[] = await create({ astro: () => import("./astro"), qwik: () => import("./qwik"), rspack: () => import("./rspack"), + eleventy: () => import("./eleventy"), }); async function create(list: Record Promise>): Promise { diff --git a/src/docs/img/guides/eleventy-white.react.svg b/src/docs/img/guides/eleventy-white.react.svg new file mode 100644 index 000000000..fcc917e0a --- /dev/null +++ b/src/docs/img/guides/eleventy-white.react.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file