-
-
Notifications
You must be signed in to change notification settings - Fork 681
/
index.webc
178 lines (148 loc) · 8.84 KB
/
index.webc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
---js
// <script>
let headerTitle = "Eleventy is a simpler static site generator";
let layout = "layouts/main.njk";
let logoLink = "/docs/";
let useWebCBundle = true;
let skipLegacyBundle = true;
// Update the emoji in CSS
// let logoLink = "/blog/eleventy-v2/"
// let logoContent = "<span class='elv-hero-content'>2.0</span>"
let ignoreGitHubButtons = true;
let ignoreSupporters = true;
let ignoreSidebarCallout = true;
let searchTitle = "Eleventy is a simpler static site generator";
let eleventyImport = {
collections: ["blog"]
};
let eleventyComputed = {
social: {
description: () => "Eleventy is a simpler static site generator."
},
};
// </script>
---
<script webc:setup>
function getHighlightedBlogPostContent(collection) {
let posts = findBy(collection, 'data.blogHighlight', true);
if(!posts.length) {
return "";
}
posts.reverse();
let content = [];
let index = 0;
for(let post of posts) {
content.push(`<li><a href="${post.url}">${index === 0 ? `<strong>` : ""}${post.data.newstitle}${index === 0 ? `</strong>` : ""}</a> (<em>${newsDate(post.date)}</em>)</li>`);
index++;
}
// 10 hardcoded posts on the blog
content.push(`<li>…and <a href="/blog/">${collection.length + 10 - posts.length} more on the <strong>blog archives</strong></a>.</li>`)
return `${content.join("")}`;
}
function randomTestimonialLink(testimonials) {
let featuredOnly = testimonials.filter(entry => entry.featured && !entry.filteredFromRandomPick);
let random = randompick(featuredOnly);
let slug = slugify(random.name);
return `What is <a href="/docs/testimonials/#${slug}">${testimonialNameHtml(random)} saying about Eleventy?</a>`;
}
</script>
<!-- css-only components -->
<possum variant="home" webc:nokeep></possum>
<!-- this is a workaround for the layout used in the header -->
<flex-luthor webc:nokeep></flex-luthor>
<quick-start></quick-start>
<div webc:bucket="async">
<h2>News from the Blog</h2>
<ul @html="getHighlightedBlogPostContent(collections.blog)"></ul>
<sponsors-list></sponsors-list>
<h2>Why should you use Eleventy?</h2>
<ul>
<li>
Eleventy has <a href="/docs/performance/"><strong>fast builds and even faster web sites</strong></a>.
<is-land on:visible on:media="(prefers-reduced-motion: no-preference)">
<build-comparison variant="home"></build-comparison>
</is-land>
</li>
<li>
Eleventy is <strong>production ready</strong> and trusted by:
<is-land on:visible on:save-data="false">
<logo-cloud></logo-cloud>
</is-land>
<small>Eleventy has been downloaded <a href="/blog/eight-million/">over 8 million times</a> and is used on <a href="https://github.com/11ty/eleventy/network/dependents">70,000+ repositories on GitHub</a></a>.</small>
</li>
<li>
Eleventy offers <strong>full control over your project’s output</strong>. We don’t <a href="https://www.youtube.com/watch?v=b4frtsT4Cgo">inject our own markup into your pages</a>.
</li>
<li>
Eleventy has a <a href="/docs/community/">lovely community of folks</a> that really care about what they build. <em @html="randomTestimonialLink(testimonials)"></em>
</li>
<li>
<a href="/blog/stability/">Eleventy is <strong>stable</strong></a>. We’ve shipped <span @text="getsize(versions) - 1"></span> releases going back to the first version in December 2017 and only two of those releases have had Eleventy-specific changes requiring developer changes.
<blockquote>
<p>a11yproject.com launched with version 1.0.0 of Eleventy. […] It's been a little under three years and I haven't had to make any adjustments to its dependencies, and it can still install and run from a cold start with no complications. When I update the site to use version 2.0.0 I'll actually be removing dependencies, and not adding more. […] That's rare and special.—<a href="https://social.ericwbailey.website/@eric/109914908787346813"><img webc:is="indieweb-avatar" url="https://ericwbailey.design/"> Eric Bailey</a></p>
</blockquote>
</li>
<li>
Eleventy <strong>doesn’t track you</strong>. We <a href="https://www.zachleat.com/web/site-generator-review/#telemetry">don’t have or use telemetry nor require you to opt-out of data collection</a>.
</li>
<li>
Eleventy is <strong><a href="/docs/glossary/#zero-config" class="buzzword">zero-config</a></strong> to start and can be extended with flexible configuration options.
</li>
<li>
Eleventy <strong>works with multiple template languages</strong>. You can pick one or use them all together in a single project: <lists webc:nokeep><template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>{% templatelangs templatetypes, page %}</template></lists>
</li>
<li>
Eleventy uses <strong>independent template languages</strong>. We don’t want to hold your content hostage with a custom format. If you decide to use a different syntax later, having your content decoupled in this way will make migration easier.
</li>
<li>
Eleventy does <strong>not require that you use a JavaScript framework</strong>—that means <em>zero client-side JavaScript by default across the board</em>. We’re <strong>thinking long-term</strong> to opt-out of the framework rat race. The tool chain, modules, and components you use in your front end stack are decoupled from this tool. Work from a solid foundation of <a href="/docs/glossary/#pre-rendered-templates-by-default" class="buzzword">pre-rendered templates</a> that suit your project’s <a href="/docs/glossary/#progressive-enhancement" class="buzzword">progressive enhancement</a> baseline requirements.
</li>
<li>
Eleventy <strong>works with your project’s existing directory structure</strong>. The tool doesn’t require an <code>app</code> directory or a <code>pages</code> directory. Use the structure that you want.
</li>
<li>
Eleventy allows <strong>incremental adoption</strong>. We only <a href="/docs/config/#template-formats">look for the files</a> and <a href="/docs/config/#input-directory">directories</a> you specify. Further, with even more precision you can <a href="/docs/ignores/">opt-out or ignore specific files</a> in your project. You don’t need to start an Eleventy project from scratch. Eleventy is flexible enough to allow conversion of only a few templates at a time. Migrate as fast or as slow as you’d like.
</li>
</ul>
<p><a href="/docs/"><strong>Get started with Eleventy today!</strong></a> or read more about <a href="https://www.zachleat.com/web/introducing-eleventy/">Eleventy’s project goals</a>.</p>
<h2><a href="https://opencollective.com/11ty">Open Collective</a> Supporters</h2>
<is-land on:visible on:save-data="false">
<p><em>Loading…</em></p>
<template data-island="replace">
<facepile webc:nokeep>
<html-fetch src="/imports/supporters.html" show-gold-sponsors show-silver-sponsors></html-fetch>
</facepile>
</template>
</is-land>
<giant-docs-button></giant-docs-button>
<giant-docs-button-subtext></giant-docs-button-subtext>
<h2>Built With Eleventy</h2>
<sites-list-njk :@sites="builtwith"></sites-list-njk>
<is-land on:visible on:save-data="false">
<facepile>
<html-fetch src="/imports/facepile.html"></html-fetch>
</facepile>
</is-land>
<p>Sample of <code>110</code> authors shown. View the <a href="/speedlify/">full list of <code><span @text="getsize(objectFilterNot(builtwith, 'disabled'))" webc:nokeep></span></code> web sites</a>.</p>
<h2>Don’t take my word for it <emoji @char="🌈" @alt="Rainbow"></emoji></h2>
<p>Listen to what these <a href="/docs/testimonials/">happy developers</a> are saying about Eleventy:</p>
<testimonials-list :@testimonials="testimonials"></testimonials-list>
<p><a href="/docs/testimonials/">…and many more!</a></p>
<h2>Alternatives</h2>
<p>This project aims to directly compete with all other static site generators. We encourage you to try out a few others:</p>
<lists webc:nokeep>
<ul class="inlinelist">
<li class="inlinelist-item"><a href="https://jekyllrb.com/">Jekyll (Ruby)</a></li>
<li class="inlinelist-item"><a href="https://gohugo.io/">Hugo (Go)</a></li>
<li class="inlinelist-item"><a href="https://hexo.io/">Hexo (JavaScript)</a></li>
<li class="inlinelist-item"><a href="https://www.gatsbyjs.org/">Gatsby (JavaScript using React)</a></li>
<li class="inlinelist-item"><a href="https://nuxtjs.org/">Nuxt (JavaScript using Vue)</a></li>
<li class="inlinelist-item"><a href="https://nextjs.org/">Next.js (JavaScript using React)</a></li>
<li class="inlinelist-item"><a href="https://www.bridgetownrb.com/">Bridgetown (Ruby)</a></li>
<li class="inlinelist-item"><a href="https://astro.build/">Astro (JavaScript)</a></li>
<li class="inlinelist-item"><a href="https://remix.run/">Remix (JavaScript using React)</a></li>
<li class="inlinelist-item"><a href="https://kit.svelte.dev/">SvelteKit (JavaScript using Svelte)</a></li>
<li class="inlinelist-item"><a href="https://jamstack.org/generators/"><em>More at jamstack.org</em></a></li>
</ul>
</lists>
</div>