diff --git a/.eleventy.js b/.eleventy.js index 837e347cc..7dac6a2a5 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,21 +1,26 @@ +const lodashGet = require("lodash/get"); +const yaml = require("js-yaml"); +const { URL } = require("url"); -module.exports = function(eleventyConfig) { - +module.exports = function (eleventyConfig) { // Support yaml data files - const yaml = require("js-yaml"); eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents)) + eleventyConfig.addWatchTarget("src/site/survey/**/*.js"); + // pass images directly through to the output eleventyConfig.addPassthroughCopy("src/site/img"); eleventyConfig.addPassthroughCopy({ - "src/js": "js" + "src/js": "js", + "node_modules/@zachleat/filter-container/*.js": "js", + "src/css": "css", }); // Date helper const { DateTime } = require('luxon'); eleventyConfig.addFilter('formatDate', (dateObj, formatStr) => { // convert any date strings to read dates - if(typeof(dateObj) == "string") { + if (typeof (dateObj) == "string") { dateObj = new Date(dateObj); } const format = formatStr ? formatStr : 'LLLL d, y'; @@ -34,6 +39,10 @@ module.exports = function(eleventyConfig) { return md.render(content); }); + eleventyConfig.addFilter('absoluteUrl', (url, base) => { + return (new URL(url, base)).toString() || url + }) + eleventyConfig.addFilter('convertFromEpoc', (time) => { let date = new Date(0); @@ -41,7 +50,7 @@ module.exports = function(eleventyConfig) { }); - eleventyConfig.addCollection("resources", function(collectionApi) { + eleventyConfig.addCollection("resources", function (collectionApi) { return collectionApi.getFilteredByGlob("src/site/resources/*.md"); }); @@ -68,9 +77,37 @@ module.exports = function(eleventyConfig) { // filter a data array based on the value of a property eleventyConfig.addFilter('select', (array, clause) => { - const property = clause.split("=")[0]; - const value = clause.split("=")[1]; - return array.filter(item => item[property].includes(value)); + if (clause.indexOf("=") > -1) { + const property = clause.split("=")[0]; + const value = clause.split("=")[1]; + return array.filter(item => lodashGet(item, property).includes(value)); + } else { + return array.map(item => lodashGet(item, clause)); + } + }); + + eleventyConfig.addFilter('flatten', (array) => { + let results = []; + for (let result of array) { + if (result) { + if (Array.isArray(result)) { + results = [...results, ...result]; + } else { + results.push(result); + } + } + } + return results; + }); + + eleventyConfig.addFilter('unique', (array) => { + let caseInsensitive = {}; + for (let val of array) { + if (typeof val === "string") { + caseInsensitive[val.toLowerCase()] = val; + } + } + return Object.values(caseInsensitive); }); // Get a random selection of items from an array @@ -78,15 +115,15 @@ module.exports = function(eleventyConfig) { if (count > array.length) { count = array.length; } - const shuffled = array.sort( () => 0.5 - Math.random() ); + const shuffled = array.sort(() => 0.5 - Math.random()); return shuffled.slice(0, count); }); // Convert an associative array into an indexable, iterable array eleventyConfig.addFilter('iterable', (obj) => { var iterableArray = new Array(); - for (var item in obj){ - iterableArray.push( obj[item] ); + for (var item in obj) { + iterableArray.push(obj[item]); } return iterableArray; }); @@ -103,15 +140,70 @@ module.exports = function(eleventyConfig) { return yaml.safeDump(obj) }); + // sort an array of objects by one object key value + // can also get fancy and do a lodash.get selector string too + // see https://lodash.com/docs/4.17.15#get + eleventyConfig.addFilter('sortKey', (arr, selector) => { + return arr.sort((a, b) => { + let aKey = lodashGet(a, selector).toLowerCase(); + let bKey = lodashGet(b, selector).toLowerCase(); + if (aKey < bKey) { + return -1; + } else if (aKey > bKey) { + return 1; + } + return 0; + }); + }); + + eleventyConfig.addFilter('sortTools', (arr, githubData) => { + return arr.sort((a, b) => { + let aKey = githubData[a.data.repo] ? (githubData[a.data.repo].stars || 0) : 0; + let bKey = githubData[b.data.repo] ? (githubData[b.data.repo].stars || 0) : 0; + if (aKey < bKey) { + return 1; + } else if (aKey > bKey) { + return -1; + } + return 0; + }); + }); + + + // Format a path to avoid any Cloudinary URL API miss-steps. + eleventyConfig.addFilter("cloudinaryifyPath", (str) => { + + if (str) { + + // add generic url encoding + str = encodeURI(str); + + // we also need to double escape some characters which might appear in text + // but are meaningful in cloudinary URLs + str = str.replace(/,/g, '%252C'); + str = str.replace(/\//g, '%252F'); + + } + return str; + }); + + + // favicons files + eleventyConfig.addPassthroughCopy("src/site/browserconfig.xml"); + eleventyConfig.addPassthroughCopy("src/site/site.webmanifest"); + eleventyConfig.addPassthroughCopy("src/site/survey/2021/community-survey-2021-methodology.pdf"); + eleventyConfig.addPassthroughCopy("src/site/survey/2022/community-survey-2022-methodology.pdf"); - return { + return { dir: { input: "src/site", inludes: "_includes", output: "dist" }, - passthroughFileCopy: true + passthroughFileCopy: true, + markdownTemplateEngine: false, + htmlTemplateEngine: "njk" }; }; diff --git a/.github/ISSUE_TEMPLATE/meetup.md b/.github/ISSUE_TEMPLATE/meetup.md new file mode 100644 index 000000000..005dfd739 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/meetup.md @@ -0,0 +1,28 @@ +--- +name: Start a meetup +about: Talk to us about starting an official Jamstack meetup +title: 'Starting a meetup group in [this beautiful city]' +labels: 'community: new' +assignees: 'philhawksworth' +--- + +You're interested in starting a Jamstack community in your area? +AMAZING! We're keen to help. 🥳 + + +Read this first 👉 [The Handbook](https://netlify.notion.site/Jamstack-Meetup-Handbook-42a5bf83e4eb4034bb485d81f5129cfb) + + +## Now that you've read the handbook, pease tell us: + +1. **The city or region for you new Jamstack Community**: `Jamsville, Australia` +1. **When you plan to hold your first event**: `January 1st` +1. **How regulalry you plan to meet**: `Every other month` +1. **How else we might be able to help**: `Connect us with potential speakers` +1. **Give us the link to your meetup page: `https://meetup.com/jamstack-{your meetup city}` + + + +--- + +After your issue has been submitted we will review it and contact you as quickly as we can. Thanks for your patience as we work through the requests. diff --git a/.github/workflows/scheduled-build.yml b/.github/workflows/scheduled-build.yml new file mode 100644 index 000000000..b74d6797c --- /dev/null +++ b/.github/workflows/scheduled-build.yml @@ -0,0 +1,14 @@ +# via https://www.voorhoede.nl/en/blog/scheduling-netlify-deploys-with-github-actions/ + +name: Scheduled build +on: + schedule: + - cron: '0 14 * * *' +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Trigger our build webhook on Netlify + run: curl -s -X POST "https://api.netlify.com/build_hooks/${TOKEN}" + env: + TOKEN: ${{ secrets.NETLIFY_CRON_BUILD_HOOK }} diff --git a/.gitignore b/.gitignore index 805a5e3b1..6d3253786 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,4 @@ dist .cache # Environment variables -.env \ No newline at end of file +.env diff --git a/README.md b/README.md index aec14b9ca..7be0cd5b1 100644 --- a/README.md +++ b/README.md @@ -7,50 +7,28 @@ An entry-point for learning about this architectural model. A place to learn wha ## Contributing resources -The site includes a showcase of Jamstack examples sites. You can submit a site to be included in this list. We've also collected a set of videos, presentation, articles and other learning resources about Jamstack. You can contribute content to that pool of resources too. +We've collected a set of videos, presentations, articles and other learning resources about Jamstack. You can contribute content to that pool of resources! We accept contributions submitted as [pull requests](https://github.com/jamstack/jamstack.org/pulls). - -### Contribute a site example - -To contribute a site: - -1. Create a new yaml file in the [`src/site/_data/examples`](src/site/_data/examples) folder with a unique and descriptive name. Populate that file according to the structure shown below. -1. Add a thumbnail image to the [`src/site/_data/examples`](src/site/images/examples) folder. (Image should be a jpeg 596px wide and 396px tall) -1. Submit a pull request - -_example site yaml reference:_ -```yaml -title: Your site title -description: A short description of the site. -link: The URL of this site -thumbnailurl: /images/examples/this-site-thumbnail.jpg -tools: - - List - - of - - notable - - tools - - used -``` - - ### Contribute links to resources To contribute a link to a resource: -1. Create a new yaml file in the [`src/site/_data/resources`](src/site/_data/resources) folder with a unique and descriptive name. Populate that file according to the structure shown below. -1. For presentations and video, add an optional thumbnail image to the [`src/site/_data/resources`](src/site/images/resources) folder. (Image should be a jpeg 600px wide and 400px tall) +1. Create a new md file in the [`src/site/resources`](src/site/resources) folder with a unique and descriptive name. Populate that file according to the structure shown below. +1. For presentations and video, add an optional thumbnail image to the [`src/site/img/cms`](src/site/img/cms) folder. (Image should be a jpeg 600px wide and 400px tall) 1. Submit a pull request -_resource yaml reference:_ +_resource md reference:_ ```yaml +--- title: Resource title date: Publish date (YYYY-MM-DD) link: the URL of this resource -thumbnailurl: /images/resources/resource-thumbnail.jpg +thumbnailurl: /img/cms/resources/resource-thumbnail.jpg type: - article (Help us group and sort the resources by type article|video|presentation) +--- ``` Before submitting a pull request, or if you are suggesting/contributing code or content changes, it is wise to preview your change in a local build. We've tried to make the process of running a local build as low as possible. @@ -82,7 +60,7 @@ npm start ## Styling with TailwindCSS -This site uses [TailwindCSS](https://tailwindcss.com) to offer utility CSS classes and provide a rapid means to styling the site. This means that most styling can be done without writing any additional CSS. Instead, utility classes can be added directly to the HTML. This can provide some very rapid development and also offer surprising levels of familiarity for these used to working in this way (since the conventions and classes are not _per site_.) +This site uses [TailwindCSS](https://tailwindcss.com) to offer utility CSS classes and provide a rapid means to styling the site. This means that most styling can be done without writing any additional CSS. Instead, utility classes can be added directly to the HTML. This can provide some very rapid development and also offer surprising levels of familiarity for those used to working in this way (since the conventions and classes are not _per site_.) While running/developing locally, the `npm run start` command will generate the site including the CSS pipeline from Tailwind. @@ -100,7 +78,7 @@ During a production build, the CSS pipeline includes a step to remove all unused npm run build # Serve the build locally -npm run serve +npm run start ``` ## One-click clone and deploy @@ -108,3 +86,4 @@ npm run serve You can clone this repository and bootstrap it as a test site of your own, complete with the CI/CD build pipeline on [Netlify](https://netlify.com?utm_source=github&utm_medium=jamstackorg-pnh&utm_campaign=devex) by clicking the button below. (Requires free GitHub and Netlify accounts) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/jamstack/jamstack.org) + diff --git a/netlify.toml b/netlify.toml index 2ef6b49b2..15cd02e51 100644 --- a/netlify.toml +++ b/netlify.toml @@ -3,7 +3,7 @@ publish = "dist" [build.environment] - NODE_VERSION = "12.16.2" + NODE_VERSION = "22.17.1" NODE_ENV = "production" [dev] @@ -12,8 +12,19 @@ [[redirects]] from = "/conference" - to = "https://jamstackconf.com/" - status = 302 + to = "/conf" + status = 301 + +[[redirects]] + from = "/conf" + to = "https://jamstackconf.com/conf/" + status = 200 + + +[[redirects]] + from = "/conf/*" + to = "https://jamstackconf.com/conf/:splat" + status = 200 [[redirects]] from = "/best-practices" @@ -25,23 +36,51 @@ to = "/code-of-conduct" status = 301 +[[redirects]] + from = "/benefits" + to = "/why-jamstack" + status = 301 + +[[redirects]] + from = "/img/og/glossary/:term/:summary" + to = "https://res.cloudinary.com/netlify/image/fetch/c_fit,l_text:Roboto_56_bold::term,co_rgb:FFFFFF,g_north_west,y_75,x_100,w_1000/c_fit,l_text:Roboto_38_light::summary,co_rgb:FFFFFF,g_north_west,y_200,x_160,w_885/https://jamstack.org/img/og/glossary-card-bg.png" + status = 200 + +[[redirects]] + from = "/glossary/*" + to = "/glossary/contribute/index.html" + status = 404 + +[[redirects]] + from = "/headless-cms/keystone-5/" + to = "/headless-cms/keystone/" + status = 301 + +[[redirects]] + from = "/headless-cms/graphcms/" + to = "/headless-cms/hygraph/" + status = 301 + +[[redirects]] + from = "/survey/" + to = "/survey/2022/" + status = 302 + +[[redirects]] + from = "/survey/2020/" + to = "https://www.netlify.com/blog/2020/05/27/state-of-the-jamstack-survey-2020-first-results/" + status = 301 + +[[redirects]] + from = "/headless-cms/netlify-cms/" + to = "/headless-cms/decap-cms/" + status = 301 + +[[redirects]] + from = "/discord" + to = "https://answers.netlify.com/" + status = 302 -# Config for the Netlify Build Plugin: netlify-plugin-minify-html [[plugins]] - package = "netlify-plugin-minify-html" - - # Specify which deploy contexts we'll minify HTML in. - # Supports any Deploy Contexts available in Netlify. - # https://docs.netlify.com/site-deploys/overview/#deploy-contexts - [plugins.inputs] - contexts = [ - 'production', - 'branch-deploy', - 'deploy-preview' - ] - - # Optionally, override the default options for the minification - # https://github.com/kangax/html-minifier#options-quick-reference - [plugins.inputs.minifierOptions] - removeComments = true - collapseInlineTagWhitespace = false + package = "./plugins/keep-dot-cache-folder" + diff --git a/package.json b/package.json index 55f96b9b3..657cbc4e8 100644 --- a/package.json +++ b/package.json @@ -8,36 +8,42 @@ "type": "git", "url": "https://github.com/jamstack/jamstack.org" }, + "engines": { + "node": ">=22" + }, "scripts": { "build": "npm-run-all build:html build:css", "build:html": "eleventy", "build:css": "postcss src/css/tailwind.css -o dist/css/styles.css", - "watch:html": "ELEVENTY_ENV=dev eleventy --watch --quiet", + "watch:html": "ELEVENTY_ENV=dev eleventy --serve --port=8080 --quiet", "watch:css": "postcss src/css/tailwind.css -o dist/css/styles.css --watch", - "serve": "live-server dist --quiet --port=8090", - "start": "npm-run-all --parallel watch:html watch:css serve", + "start": "npm-run-all --parallel watch:html watch:css", "clean": "rm -rf dist" }, "dependencies": { - "@11ty/eleventy": "^0.11.0", - "@11ty/eleventy-cache-assets": "^2.0.3", - "@fullhuman/postcss-purgecss": "^1.3.0", - "autoprefixer": "^9.7.6", + "@11ty/eleventy": "^1.0.0", + "@11ty/eleventy-cache-assets": "^2.1.0", + "@zachleat/filter-container": "^1.0.3", + "autoprefixer": "^10.2.5", "cssnano": "^4.1.10", + "d3": "^7.1.1", + "d3-textwrap": "^3.0.0", "dotenv": "^8.2.0", - "fast-glob": "^3.2.4", + "fast-glob": "^3.2.5", "gray-matter": "^4.0.2", - "js-yaml": "^3.13.1", - "luxon": "^1.23.0", - "markdown-it": "^11.0.1", - "netlify-plugin-minify-html": "^0.2.2", + "i18n-iso-countries": "^6.5.0", + "js-yaml": "^3.14.0", + "lodash": "^4.17.21", + "luxon": "^1.26.0", + "markdown-it": "^12.0.4", + "netlify-plugin-minify-html": "^0.3.1", "node-fetch": "^2.6.1", "npm-run-all": "^4.1.5", - "postcss-cli": "^6.1.3", - "postcss-import": "^12.0.1", - "tailwindcss": "^1.8.10" - }, - "devDependencies": { - "live-server": "^1.2.1" + "placename": "^1.1.2", + "postcss": "^8.2.8", + "postcss-cli": "^8.3.1", + "postcss-import": "^13.0.0", + "spdx-correct": "^3.1.1", + "tailwindcss": "^3.1.8" } } diff --git a/plugins/keep-dot-cache-folder/index.js b/plugins/keep-dot-cache-folder/index.js new file mode 100644 index 000000000..5b7056114 --- /dev/null +++ b/plugins/keep-dot-cache-folder/index.js @@ -0,0 +1,15 @@ +module.exports = { + // Restore file/directory cached in previous builds. + // Does not do anything if: + // - the file/directory already exists locally + // - the file/directory has not been cached yet + async onPreBuild({ utils }) { + await utils.cache.restore('./.cache'); + }, + // Cache file/directory for future builds. + // Does not do anything if: + // - the file/directory does not exist locally + async onPostBuild({ utils }) { + await utils.cache.save('./.cache'); + } +}; \ No newline at end of file diff --git a/plugins/keep-dot-cache-folder/manifest.yml b/plugins/keep-dot-cache-folder/manifest.yml new file mode 100644 index 000000000..59d33520c --- /dev/null +++ b/plugins/keep-dot-cache-folder/manifest.yml @@ -0,0 +1 @@ +name: keep-dot-cache-folder \ No newline at end of file diff --git a/postcss.config.js b/postcss.config.js index 468f4bdda..2c0018b60 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,22 +1,7 @@ -// const purgecss = require('@fullhuman/postcss-purgecss')({ - -// // Specify the paths to all of the template files in the project -// content: [ -// './src/site/**/*.njk', -// './src/site/**/*.md' -// ], - -// // Include any special characters -// defaultExtractor: content => content.match(/[\w-/:]+(? .d3chart-legend { + position: absolute; + top: 0; + right: 0; +} + +.d3chart-legend { + display: flex; + justify-content: flex-end; + gap: 0.5em; + font-size: 0.8125em; /* 13px /16 */ + font-weight: 600; +} +.d3chart-legend button { + font-weight: inherit; +} +.d3chart-legend-wrap .d3chart-legend { + flex-wrap: wrap; + justify-content: center; + margin-left: auto; + margin-right: auto; +} +.d3chart + .d3chart-legend-placeholder .d3chart-legend { + justify-content: center; +} +.d3chart-legend > * { + border-radius: 0.25em; + padding: 0.25em 0.5em; +} + +.d3chart .tick text { + font-size: 1.3em; /* 13px /10 */ +} + +.d3chart .tick line { + shape-rendering: crispEdges; +} + +.d3chart .tick line { + stroke: rgba(22, 26, 42, 0.15); +} +.d3chart-bubble .tick:nth-child(2n) line { + stroke: rgba(22, 26, 42, 0.22); +} +.d3chart-bubble .tick:nth-child(2n + 1) line { + stroke: rgba(22, 26, 42, 0.1); +} + +.d3chart-bubble .d3chart-xaxis :first-child line, +.d3chart-bubble .d3chart-yaxis .tick:last-child line { + stroke: #737680; + stroke-width: 2px; +} +.d3chart-hbar .d3chart-xaxis .tick:first-child line, +.d3chart-vbar .d3chart-yaxis .tick:first-child line { + stroke: #c5c5c9; + stroke-width: 2px; +} +.d3chart-highlight-zero-axis .d3chart-xaxis :first-child line, +.d3chart-highlight-zero-axis .d3chart-yaxis .tick:last-child line { + stroke-width: 0; +} +.d3chart-hbar .d3chart-xaxis .tick:first-child line { + transform: translateX(-1px); +} +.d3chart-vbar .d3chart-yaxis .tick:first-child line { + transform: translateY(1px); +} +.d3chart-vbar .d3chart-xaxis text, +.d3chart-hbar .d3chart-yaxis text { + --d3chart-label-clamp: 2vw; + font-size: 12px; + font-size: clamp(12px, var(--d3chart-label-clamp), 14px); + font-weight: 600; +} + +.d3chart-bubble.d3chart-highlight-zero-axis [data-chart-value="0"] line { + stroke-width: 2px; + stroke: #737680; +} + +.d3chart-inlinebarvalue { + --d3chart-label-clamp: 2vw; + font-size: 12px; + font-size: clamp(11px, var(--d3chart-label-clamp), 16px); + font-weight: 600; + text-anchor: middle; +} +.d3chart-inlinebarvalue-h { + font-size: 16px; + font-weight: 600; + text-anchor: start; + dominant-baseline: central; + alignment-baseline: middle; +} +.d3chart-inlinebarvalue-h.inside { + text-anchor: end; +} +.d3chart-inlinebarvalue-h.inside-offset { + font-size: 14px; + text-anchor: end; +} + +/* Wrapped labels */ +.d3chart-yaxis text.d3chart-label-wrapped { + font-size: 13px; +} + +/* Axis labels */ +.d3chart-axislabel { + text-anchor: end; + font-weight: 700; +} +.d3chart-axislabel-center { + text-anchor: middle; +} + +/* Bubble charts */ +.d3chart-bubblelabel { + text-anchor: middle; + dominant-baseline: central; + font-size: 12px; + font-weight: 600; +} +.d3chart-bubblelabel.offset-l, +.d3chart-bubblelabel.offset-r { + font-weight: 700; + text-shadow: none; +} +.d3chart-bubblelabel.offset-l { + text-anchor: end; +} +.d3chart-bubblelabel.offset-r { + text-anchor: start; +} +.d3chart-bubblelabelbg.offset { + background-color: rgba(255, 255, 255, 0.4); +} +.d3chart-bubble circle { + fill-opacity: 0.85; +} +.d3chart-bubble .d3chart-yaxis .tick:last-child text { + display: none; +} +.d3chart-bubble .d3chart-xaxis .tick text { + transform: translateY(2px); +} + +/* Color gradients */ +.d3chart-color-0 { + fill: url(#gradient-sunrise-v); +} +.d3chart-hbar .d3chart-color-0 { + fill: url(#gradient-sunrise-h); +} +.d3chart-color-1 { + fill: url(#gradient-blue-v); +} +.d3chart-hbar .d3chart-color-1 { + fill: url(#gradient-blue-h); +} +.d3chart-color-2 { + fill: url(#gradient-sun-v); +} +.d3chart-hbar .d3chart-color-2 { + fill: url(#gradient-sun-h); +} +.d3chart-color-3 { + fill: url(#gradient-seamist-v); +} +.d3chart-hbar .d3chart-color-3 { + fill: url(#gradient-seamist-h); +} +.d3chart-color-4 { + fill: url(#gradient-hallows-v); +} +.d3chart-hbar .d3chart-color-4 { + fill: url(#gradient-hallows-h); +} +.d3chart-color-5 { + fill: url(#gradient-purple-v); +} +.d3chart-hbar .d3chart-color-5 { + fill: url(#gradient-purple-h); +} +.d3chart-color-6 { + fill: url(#gradient-bubblegum-v); +} +.d3chart-hbar .d3chart-color-6 { + fill: url(#gradient-bubblegum-h); +} +.d3chart-color-7 { + fill: url(#gradient-air-v); +} +.d3chart-hbar .d3chart-color-7 { + fill: url(#gradient-air-h); +} +.d3chart-color-8 { + fill: url(#gradient-pink-v); +} +.d3chart-hbar .d3chart-color-8 { + fill: url(#gradient-pink-h); +} +.d3chart-color-9 { + fill: url(#gradient-leaves-v); +} +.d3chart-hbar .d3chart-color-9 { + fill: url(#gradient-leaves-h); +} +.d3chart-color-10 { + fill: url(#gradient-haze-v); +} +.d3chart-hbar .d3chart-color-10 { + fill: url(#gradient-haze-h); +} +.d3chart-color-11 { + fill: url(#gradient-gnat-v); +} +.d3chart-hbar .d3chart-color-11 { + fill: url(#gradient-gnat-h); +} +.d3chart-color-12 { + fill: url(#gradient-fire-v); +} +.d3chart-hbar .d3chart-color-12 { + fill: url(#gradient-fire-h); +} +.d3chart-color-13 { + fill: url(#gradient-ocean-v); +} +.d3chart-hbar .d3chart-color-13 { + fill: url(#gradient-ocean-h); +} +.d3chart-color-14 { + fill: url(#gradient-night-v); +} +.d3chart-hbar .d3chart-color-14 { + fill: url(#gradient-night-h); +} +.d3chart-color-15 { + fill: url(#gradient-dusk-v); +} +.d3chart-hbar .d3chart-color-15 { + fill: url(#gradient-dusk-h); +} + +.d3chart-color-stroke-0 { + stroke: url(#gradient-sunrise-h); +} + +.d3chart-color-stroke-1 { + stroke: url(#gradient-blue-h); +} + +.d3chart-color-stroke-2 { + stroke: url(#gradient-sun-h); +} + +.d3chart-color-stroke-3 { + stroke: url(#gradient-seamist-h); +} + +.d3chart-color-stroke-4 { + stroke: url(#gradient-hallows-h); +} + +.d3chart-color-stroke-5 { + stroke: url(#gradient-bubblegum-h); +} + +.d3chart-color-stroke-6 { + stroke: url(#gradient-purple-h); +} + +.d3chart-color-stroke-7 { + stroke: url(#gradient-air-h); +} + +.d3chart-color-stroke-8 { + stroke: url(#gradient-pink-h); +} + +.d3chart-color-stroke-9 { + stroke: url(#gradient-leaves-h); +} + +.d3chart-color-stroke-10 { + stroke: url(#gradient-haze-h); +} + +.d3chart-color-stroke-11 { + stroke: url(#gradient-gnat-h); +} + +.d3chart-color-stroke-12 { + stroke: url(#gradient-fire-h); +} + +.d3chart-color-stroke-13 { + stroke: url(#gradient-ocean-h); +} + +.d3chart-color-stroke-14 { + stroke: url(#gradient-night-h); +} + +.d3chart-color-stroke-15 { + stroke: url(#gradient-dusk-h); +} + +.d3chart-colors-extended .d3chart-legend-16 { + color: #000; + background-image: linear-gradient(108deg, #f0185d, #ff668f); +} +.d3chart-colors-extended .d3chart-color-16 { + fill: url(#gradient-extended-16-v); +} + +.d3chart-colors-extended .d3chart-legend-17 { + color: #000; + background-image: linear-gradient(108deg, #448bd0, #80c0ff); +} +.d3chart-colors-extended .d3chart-color-17 { + fill: url(#gradient-extended-17-v); +} + +.d3chart-colors-extended .d3chart-legend-18 { + color: #000; + background-image: linear-gradient(108deg, #dbd600, #ffff54); +} +.d3chart-colors-extended .d3chart-color-18 { + fill: url(#gradient-extended-18-v); +} + +.d3chart-colors-extended .d3chart-legend-19 { + color: #000; + background-image: linear-gradient(108deg, #63edd7, #a1ffff); +} +.d3chart-colors-extended .d3chart-color-19 { + fill: url(#gradient-extended-19-v); +} + +.d3chart-colors-extended .d3chart-legend-20 { + color: #000; + background-image: linear-gradient(108deg, #cb5f00, #ff932f); +} +.d3chart-colors-extended .d3chart-color-20 { + fill: url(#gradient-extended-20-v); +} + +.d3chart-colors-extended .d3chart-legend-21 { + color: #000; + background-image: linear-gradient(108deg, #ff98a8, #ffd0df); +} +.d3chart-colors-extended .d3chart-color-21 { + fill: url(#gradient-extended-21-v); +} + +.d3chart-colors-extended .d3chart-legend-22 { + color: #fff; + background-image: linear-gradient(108deg, #a800dc, #e449ff); +} +.d3chart-colors-extended .d3chart-color-22 { + fill: url(#gradient-extended-22-v); +} + +.d3chart-colors-extended .d3chart-legend-23 { + color: #000; + background-image: linear-gradient(108deg, #00cfe4, #6affff); +} +.d3chart-colors-extended .d3chart-color-23 { + fill: url(#gradient-extended-23-v); +} + +.d3chart-colors-extended .d3chart-legend-24 { + color: #fff; + background-image: linear-gradient(108deg, #c5114c, #ff5a7c); +} +.d3chart-colors-extended .d3chart-color-24 { + fill: url(#gradient-extended-24-v); +} + +.d3chart-colors-extended .d3chart-legend-25 { + color: #000; + background-image: linear-gradient(108deg, #4af4b5, #8effed); +} +.d3chart-colors-extended .d3chart-color-25 { + fill: url(#gradient-extended-25-v); +} + +.d3chart-colors-extended .d3chart-legend-26 { + color: #000; + background-image: linear-gradient(108deg, #aa9ee9, #e2d5ff); +} +.d3chart-colors-extended .d3chart-color-26 { + fill: url(#gradient-extended-26-v); +} + +.d3chart-colors-extended .d3chart-legend-27 { + color: #000; + background-image: linear-gradient(108deg, #00c6c9, #57ffff); +} +.d3chart-colors-extended .d3chart-color-27 { + fill: url(#gradient-extended-27-v); +} + +.d3chart-colors-extended .d3chart-legend-28 { + color: #000; + background-image: linear-gradient(108deg, #e64b00, #ff8300); +} +.d3chart-colors-extended .d3chart-color-28 { + fill: url(#gradient-extended-28-v); +} + +/* Legend gradients */ +.d3chart-legend-0 { + color: #fff; + background: linear-gradient(352.65deg, #f0047f 1.39%, #fc814a 82.63%); +} +.d3chart-legend-1 { + color: #000; + background: linear-gradient(47.9deg, #0090ca 6.17%, #00bfad 79.63%); +} +.d3chart-legend-2 { + color: #000; + background: linear-gradient(180deg, #fc814a 0%, #ffc803 100%); +} +.d3chart-legend-3 { + color: #000; + background: linear-gradient(180deg, #78ecc2 0%, #00ffb2 100%); +} +.d3chart-legend-4 { + color: #000; + background: linear-gradient(108.82deg, #df4a1f 0%, #ffa278 90.74%); +} +.d3chart-legend-5 { + color: #000; + background: linear-gradient(108.82deg, #6b38fb 0%, #ccb4ff 90.74%); +} +.d3chart-legend-6 { + color: #000; + background: linear-gradient(108.82deg, #fd98bc 32.87%, #ffccde 90.74%); +} +.d3chart-legend-7 { + color: #000; + background: linear-gradient(108.82deg, #03d0d0 0%, #b5fff8 90.74%); +} +.d3chart-legend-8 { + color: #fff; + background: linear-gradient(108.82deg, #c40468 0%, #fc2796 90.74%); +} +.d3chart-legend-9 { + color: #000; + background: linear-gradient(180deg, #78f19a 0%, #13b110 100%); +} +.d3chart-legend-10 { + color: #000; + background: linear-gradient(108.82deg, #91a5ee 37.71%, #d6deff 90.74%); +} +.d3chart-legend-11 { + color: #000; + background: linear-gradient(108.82deg, #02c6b3 40.13%, #59f7e7 90.74%); +} +.d3chart-legend-12 { + color: #fff; + background: linear-gradient(108.82deg, #ff0f00 0%, #ff928a 90.74%); +} +.d3chart-legend-13 { + color: #000; + background: linear-gradient(180deg, #003edd 0%, #6cdcff 100%); +} +.d3chart-legend-14 { + color: #000; + background: linear-gradient(108.82deg, #02465f 3.38%, #6ad7ff 90.74%); +} +.d3chart-legend-15 { + color: #fff; + background: linear-gradient(108.82deg, #960000 0%, #e94242 92.82%); +} +.d3chart-legend-16 { + color: #fff; + background: linear-gradient(108.82deg, #ff72cf 0%, #c92ecc 90.74%); +} + +/* Overrides */ + +/* Dark mode */ +.dark .tick line { + stroke: rgba(255, 255, 255, 0.15); +} +.dark .d3chart-bubble .tick:nth-child(2n) line { + stroke: rgba(255, 255, 255, 0.22); +} +.dark .d3chart-bubble .tick:nth-child(2n + 1) line { + stroke: rgba(255, 255, 255, 0.1); +} + +.dark .d3chart-bubble.d3chart-highlight-zero-axis [data-chart-value="0"] line { + stroke: rgba(255, 255, 255, 0.75); +} + +.dark .d3chart-axislabel { + fill: #fff; +} + +.dark .d3chart-bubblelabel.offset-l { + filter: url(#offset-label-bg); +} diff --git a/src/css/tailwind.css b/src/css/tailwind.css index 530d8e755..58aacb659 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -1,11 +1,35 @@ /* import via postcss */ @import "../site/css/ticker.css"; +@import "../site/css/hubspot-form.css"; /* purgecss start ignore */ -@tailwind base; -@tailwind components; +@tailwind base; +@tailwind components; /* purgecss end ignore */ +@layer base { + h1, + h2, + h3 { + @apply text-blue-900 dark:text-white; + } + h1 { + @apply font-bold text-4xl leading-tight my-8; + } + @screen md { + h1 { + @apply text-5xl; + } + } + h2 { + @apply text-3xl font-bold leading-none mb-2; + } + @screen md { + h2 { + @apply text-3xl; + } + } +} /* Content sections conventions @@ -16,24 +40,22 @@ section { @apply mx-auto; } - -section a, -dd a { - @apply text-white; +:where(section a), +:where(dd a) { + @apply dark:text-white; @apply border-b; - @apply border-blue-100; + @apply border-blue-900 dark:border-blue-100; } -section:not(.cards) a:hover, -section:not(.cards) a:focus, +section:not(.cards):not(.no-underline) a:hover, +section:not(.cards):not(.no-underline) a:focus, dd a:hover, dd a:focus { @apply border-pink-500; } -p+p { +p + p { @apply mt-4; } - /* CTA links */ @@ -43,59 +65,33 @@ a.cta:visited { @apply bg-pink-900; @apply text-white; @apply rounded-full; - @apply text-xs; + @apply text-sm; @apply font-semibold; @apply px-4; @apply py-2; @apply border-none; @apply my-4; + @apply card-shadow; } a.cta:hover, a.cta:focus { - @apply bg-pink-500; + @apply bg-orange-500; + box-shadow: 0px 3px 15px rgba(241, 86, 77, 0.6); } - /* Footer links */ footer p a { @apply border-b; @apply border-blue-100; - @apply whitespace-no-wrap; + @apply whitespace-nowrap; } footer p a:hover, footer p a:focus { @apply border-red-500; } - -/* - Global headings conventions -*/ -h1.heading { - @apply text-white; - @apply text-5xl; - @apply leading-none; - @apply mb-2; -} -@screen md { - h1.heading { - @apply text-6xl; - @apply mt-12; - @apply mb-4; - } -} - -h2 { - @apply text-white; - @apply text-2xl; - @apply font-bold; - @apply leading-none; - @apply mb-2; -} - - /* left/right flip-flopping lists */ @@ -106,24 +102,39 @@ h2 { } } -/* -h3.heading { - @apply text-white; - @apply mt-10; - @apply mb-2; - @apply text-xl; - @apply leading-snug; +/* Color theme selector */ +.color-theme-selector-wrapper { + --padding-inline: 0.5rem; + --icon-size: 1rem; + + @apply invisible; + @apply relative w-32 h-8 flex items-center; + @apply rounded-default border border-gray-200 dark:border-transparent; + @apply bg-white; + @apply text-black; } -@screen md { - h3.heading { - @apply text-2xl; - @apply mt-16; - } + +.color-theme-selector-wrapper-icon { + width: var(--icon-size); + max-height: 100%; + margin-left: var(--padding-inline); } -*/ -.columns-3 { - columns: 3; +.color-theme-selector-wrapper::after { + position: absolute; + top: 50%; + right: var(--padding-inline); + transform: translateY(-50%); + content: ""; + width: var(--icon-size); + height: var(--icon-size); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); +} + +.color-theme-selector-wrapper select { + @apply absolute w-full flex items-center bg-transparent; + appearance: none; + padding-left: calc(var(--icon-size) + var(--padding-inline) + 0.5rem); } .videowrapper { @@ -141,27 +152,67 @@ h3.heading { /* purgecss start ignore */ .bg-gradient-jams { - background: #D1036F linear-gradient(91.78deg, #D1036F 2.57%, #B6005F 96.33%); + background: #d1036f linear-gradient(91.78deg, #d1036f 2.57%, #b6005f 96.33%); } .bg-gradient-pink-orange, .hover\:bg-gradient-pink-orange:hover, .hover\:bg-gradient-pink-orange:focus { - background: #E7017A linear-gradient(91.78deg, #E7017A 2.57%, #DF4A1F 96.33%); + background: #e7017a linear-gradient(91.78deg, #e7017a 2.57%, #df4a1f 96.33%); } .bg-gradient-blue-green { - background: #0090CA linear-gradient(101.87deg, #0090CA 0%, #00BFAD 105.55%); + background: #0090ca linear-gradient(101.87deg, #0090ca 0%, #00bfad 105.55%); } + .bg-gradient-card-sunrise { - --gradient-color-stops: #F0047F 0%, #FC814A 100%; + --tw-gradient-stops: #f0047f 0%, #fc814a 100%; } .bg-gradient-card-blue { - --gradient-color-stops: #04A2DD 0%, #4FF3EA 100%; + --tw-gradient-stops: #04a2dd 0%, #4ff3ea 100%; } .bg-gradient-card-seafoam { - --gradient-color-stops: #88F9ED 0%, #00FFB2 100%; + --tw-gradient-stops: #88f9ed 0%, #00ffb2 100%; } .bg-gradient-card-gold { - --gradient-color-stops: #FFC803 0%, #FC814A 100%; + --tw-gradient-stops: #ffc803 0%, #fc814a 100%; +} +.bg-gradient-card-blue-seafoam.bg-gradient-card-blue-seafoam { + background: linear-gradient(101.87deg, #0090ca 0%, #00bfad 105.55%), + linear-gradient(180deg, #009ddc 0%, #58fcec 100%); +} + +.card-shadow { + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +@supports (outline: none) { + .group:hover .group-hover\:card-shadow-blue-seafoam, + .group:focus .group-hover\:card-shadow-blue-seafoam, + .hover\:card-shadow-blue-seafoam:hover, + .hover\:card-shadow-blue-seafoam:focus { + outline: none; + box-shadow: 0px 3px 20px rgba(1, 159, 220, 0.6); + } + .group:hover .group-hover\:card-shadow-seafoam, + .group:focus .group-hover\:card-shadow-seafoam, + .hover\:card-shadow-seafoam:hover, + .hover\:card-shadow-seafoam:focus { + outline: none; + box-shadow: 0px 3px 20px rgba(135, 249, 237, 0.7); + } + .group:hover .group-hover\:card-shadow-sunrise, + .group:focus .group-hover\:card-shadow-sunrise, + .hover\:card-shadow-sunrise:hover, + .hover\:card-shadow-sunrise:focus { + outline: none; + box-shadow: 0px 3px 20px rgba(246, 62, 103, 0.6); + } + .group:hover .group-hover\:card-shadow-gold, + .group:focus .group-hover\:card-shadow-gold, + .hover\:card-shadow-gold:hover, + .hover\:card-shadow-gold:focus { + outline: none; + box-shadow: 0px 3px 20px rgba(255, 199, 4, 0.6); + } } .list-jams-logo > li, @@ -183,17 +234,17 @@ h3.heading { } .list-jams-logo > li:after { background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%235A5F75'/%3E%3C/svg%3E%0A"); - left: 2em; + left: 3em; } .list-jams-logo-pink > li:after { background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%23F0047F'/%3E%3C/svg%3E%0A"); - left: 1em; + left: 1.5em; } .list-jams-logo-border > li:before { @apply text-gray-400; content: ""; position: absolute; - left: 2.25em; /* 36px /16 */ + left: 3.25em; /* 36px /16 */ top: 0; bottom: 0; border-left: 1px solid; @@ -223,7 +274,7 @@ details[open] .summary-swap-open { display: block; } -@media (min-width: 640px) { +@media (min-width: 768px) { .sm\:page-layout { grid-template-columns: 16.875em minmax(0, 1fr); } @@ -234,6 +285,427 @@ details[open] .summary-swap-open { overflow: hidden; text-overflow: ellipsis; } + +/* Desktop sticky nav */ +@media (min-width: 768px) { /* 860px */ + .page-header { + position: sticky; + top: 0; + overflow-y: auto; + } + .page-nav { + justify-content: space-between; + /* Warning: this is the height of the logo */ + /* Workaround for an issue with
and `flex` */ + height: calc(100vh - 95px); + } +} + +/* special text treatment on home page */ +.hero-text { + font-size: 2.5em; +} +@media (min-width: 40em) { + /* 640px */ + .hero-text { + font-size: 3em; /* 48px /16 */ + } +} +@media (min-width: 64em) { + /* 1024px */ + .hero-text { + font-size: 4em; /* 64px /16 */ + } +} + +.rounded-xl-embed { + border-radius: 0.9375rem; /* 15px /16 */ +} + +/* Tool layout */ +.tool-content h1, +.tool-content h2, +.tool-content h3 { + margin: 0.5em 0; +} +.tool-content h1, +.tool-content h2, +.tool-content h3 { + font-size: 1.5em; + font-weight: 700; +} +.tool-content h1 ~ h2 { + font-size: 1.25em; +} +.tool-content h2 ~ h3 { + font-size: 1em; +} + +.tool-content a[href] { + text-decoration: underline; +} +.tool-content ul { + list-style: disc; + padding-left: 1.5em; +} +.tool-content img { + @apply my-8; +} + +/* Filters */ +.filter-form { + opacity: 0.4; + pointer-events: none; +} +.filter-container--js .filter-form { + opacity: 1; + pointer-events: auto; +} +.filter-opensource--hide, +.filter-typeofcms--hide, +.filter-language--hide, +.filter-template--hide, +.filter-license--hide, +.filter-country--hide { + display: none !important; +} + +/* Jamstack TV */ +.ais-SearchBox-input { + @apply bg-white dark:bg-blue-900; + @apply dark:text-white; + @apply font-bold; + @apply p-3; + @apply pl-14; + @apply mx-auto; + @apply border; + @apply border-gray-200 dark:border-gray-400; + @apply rounded-full; + @apply block; + @apply w-full; + background-image: url(/img/svg/icon-search.svg); + background-repeat: no-repeat; + background-position: 1em 50%; + position: relative; +} +.ais-SearchBox-input:before { + content: ""; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3em; + background-color: #2b3350; +} +@supports (box-shadow: none) { + .ais-SearchBox-input:focus { + outline: none; + box-shadow: 0 0 1px 4px #e7017a; + } +} + +.jamstacktv-link { + display: flex; + flex-wrap: wrap; +} +.jamstacktv-card { + flex-basis: 18.75em; /* 300px /16 */ +} +.jamstacktv-item { + flex-basis: 18.75em; /* 300px /16 */ + flex-grow: 3; +} +.jamstacktv-card, +.jamstacktv-img { + border-radius: 1em 0 1em 1em; +} +.jamstacktv-img { + width: 100%; +} +.jamstacktv-duration { + @apply inline-block; + @apply px-1; + @apply bg-black; + @apply text-sm; + @apply font-bold; + @apply text-blue-100; + position: absolute; + right: 0.4em; + top: 0.4em; +} +.jamstacktv-time { + display: inline-block; + margin-right: 0.25em; /* 4px /16 */ +} +.jamstacktv-time > b { + display: inline-block; + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 7px solid currentColor; +} +.jamstacktv-time > b + b { + margin-right: 3px; +} +.jamstacktv-item { + @apply p-4; + display: flex; + flex-direction: column; + justify-content: center; +} +.jamstacktv-item mark { + @apply bg-pink-900; + @apply text-white; +} +.jamstacktv-meta { + @apply leading-normal; +} +.jamstacktv-category:after { + content: ": "; +} +.jamstacktv-no-skip .jamstacktv-category:after { + content: ""; +} +.jamstacktv-no-skip .jamstacktv-category { + display: block; +} +.jamstacktv-caption { + @apply text-xl; + @apply font-normal; +} +.jamstacktv-caption-quote { + @apply italic; +} +.jamstacktv-caption-quote:before { + content: "“"; +} +.jamstacktv-caption-quote:after { + content: "”"; +} +.jamstacktv-no-skip .jamstacktv-title { + @apply text-2xl; + @apply font-bold; +} +.jamstacktv-no-skip .jamstacktv-caption { + display: none; +} +.js .jamstacktv-js { + display: none; +} +.jamstacktv-scrubber { + position: absolute; + bottom: 0; + width: 100%; + display: flex; + align-items: flex-end; + height: 1em; + border-radius: 0 0 1em 1em; + overflow: hidden; +} +.jamstacktv-scrubber > div { + height: 4px; + background-color: red; +} + +/* Survey */ +.chart-data-table-head { + @apply bg-gray-200 dark:bg-gray-700 border-b-2; +} + +.permalink-heading { + @apply flex items-center gap-x-2; +} + +.permalink-heading-anchor { + @apply border-0; +} + +.permalink-heading-icon { + @apply w-4; + @apply opacity-50; +} + +.permalink-heading-icon:hover { + @apply opacity-100; +} + +.survey-grid { + --gap: 2rem; + --full: minmax(var(--gap), 1fr); + --content: min(52rem, 100% - var(--gap) * 2); + --popout: minmax(0, 2rem); + --feature: minmax(0, 5rem); + + display: grid; + grid-template-columns: + [full-start] var(--full) + [feature-start] var(--feature) + [popout-start] var(--popout) + [content-start] var(--content) [content-end] + var(--popout) [popout-end] + var(--feature) [feature-end] + var(--full) [full-end]; +} + +.survey-grid > * { + grid-column: content; +} + +.stack > * + * { + margin-block-end: 0; + margin-block-start: var(--stack-space); +} + +:where(.survey) section { + padding: 0; + margin: 0; + max-width: none; +} + +:where(.survey) h1, +h2, +h3, +h4, +h5 { + margin: 0; +} + +.survey-intro-headings { + grid-column: popout; +} + +.survey-intro-heading { + max-width: 20ch; + @apply font-extrabold; +} + +.survey-intro-subheading { + margin-top: 1.5rem; + @apply leading-tight; +} + +.survey h3 { + @apply text-2xl font-semibold; +} + +.survey h4 { + @apply text-xl font-semibold; +} + +.survey h5 { + @apply text-lg font-semibold; +} + +.survey { + margin-block-start: 4.5rem; +} + +.survey > * + * { + margin-block-start: 6rem; +} + +.survey-toc, +.survey-toc + * { + margin-block-start: 3rem; +} + +.survey-section > * + * { + margin-block-start: 1.5rem; +} + +.survey-section:not(:first-of-type) { + padding-bottom: 6rem; +} + +.survey-section h3, +.survey-section h4, +.survey-section h5 { + margin-block-start: 3rem; +} + +.survey-chart h4, +.survey-chart h5 { + margin-block-start: 0; +} + +.survey-section .survey-chart, +.survey-section .survey-chart + * { + margin-block-start: 3rem; +} + +.survey-section .survey-chart-split, +.survey-section .survey-chart-split + * { + margin-block-start: 4.5rem; +} + +.survey-section ul { + list-style-position: inside; + list-style-type: disc; +} + +.survey-section ul > * + * { + margin-block-start: 0.375rem; +} + +.survey-chart > * + * { + margin-block-start: 1.5rem; +} + +.survey-chart > div:first-of-type { + column-gap: 1.5rem; +} + +.survey-section:first-of-type p:first-of-type { + margin-block-start: 4.5rem; +} + +.survey-chart-split { + display: flex; +} + +.survey-chart-split { + --min: 24rem; + --gap: 1.5rem; + + grid-column: feature; + display: grid; + grid-column-gap: var(--gap); + grid-row-gap: 4.5rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); +} + +.survey-chart-split .survey-chart { + margin-block-start: 0; +} + +.survey-chart-respondents { + @apply text-sm text-right text-gray-600 dark:text-gray-300; +} + +.survey-chart-subheading { + @apply text-gray-600 dark:text-gray-300 text-sm; + margin-top: 0.375rem; +} + +.survey .final-heading { + @apply font-extrabold bg-gradient-pink-orange text-white; + grid-column: full; + text-align: center; + margin: 2em 0 1em 0; + font-size: clamp(1.5rem, 0.7857rem + 3.5714vw, 4rem); + padding: 0.5em 1em; + line-height: 1.125; + margin-inline: auto; +} + +.survey table { + display: block; + max-width: fit-content; + overflow-x: auto; + white-space: nowrap; +} + /* purgecss end ignore */ @tailwind utilities; diff --git a/src/js/color-theme.js b/src/js/color-theme.js new file mode 100644 index 000000000..376ff85b8 --- /dev/null +++ b/src/js/color-theme.js @@ -0,0 +1,97 @@ +const htmlElement = document.documentElement; +const colorThemeSelector = document.querySelector( + "[data-color-theme-selector]" +); +const colorThemeSelectorInput = colorThemeSelector.querySelector("select"); +const colorThemeSelectorInputIcon = colorThemeSelector.querySelector('.color-theme-selector-wrapper-icon'); +const colorThemeSelectorInputIconSrc = colorThemeSelectorInputIcon.querySelector('use'); +const storedTheme = localStorage.theme; + +function setInputIcon(type) { + if(type === 'dark') { + colorThemeSelectorInputIconSrc.setAttribute('xlink:href', '#icon-color-theme-dark'); + } else if(type === 'light') { + colorThemeSelectorInputIconSrc.setAttribute('xlink:href', '#icon-color-theme-light'); + } else { + colorThemeSelectorInputIconSrc.setAttribute('xlink:href', '#icon-color-theme-system'); + } +} + +function setInputState(storedTheme) { + if (!!storedTheme) { + colorThemeSelectorInput.querySelector( + `[value="${storedTheme}"]` + ).selected = true; + + setInputIcon(storedTheme); + + htmlElement.classList.add(storedTheme); + } +} + +function displayThemeSelector() { + colorThemeSelector.style.visibility = 'visible'; +} + +function toggleThemeClass(type) { + if (type === "dark") { + if (htmlElement.classList.contains("light")) { + htmlElement.classList.remove("light"); + } + + htmlElement.classList.add("dark"); + } else if (type == "light") { + if (htmlElement.classList.contains("dark")) { + htmlElement.classList.remove("dark"); + } + + htmlElement.classList.add("light"); + } else { + // "System" mode - blanket remove all theme classes from the root element + if (htmlElement.classList.contains("dark")) { + htmlElement.classList.remove("dark"); + } + + if (htmlElement.classList.contains("light")) { + htmlElement.classList.remove("light"); + } + + // If the current system color scheme preference is dark, apply the .dark class + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + htmlElement.classList.add("dark"); + } + } +} + +function updateTheme(type) { + switch (type) { + case "dark": + toggleThemeClass("dark"); + + setInputIcon('dark'); + + localStorage.theme = "dark"; + break; + case "light": + toggleThemeClass("light"); + + setInputIcon('light'); + + localStorage.theme = "light"; + break; + default: + toggleThemeClass("system"); + + setInputIcon('system'); + + localStorage.removeItem("theme"); + break; + } +} + +setInputState(storedTheme); +displayThemeSelector(); + +colorThemeSelectorInput.addEventListener("change", (e) => { + updateTheme(e.target.value); +}); diff --git a/src/js/lazyiframe.js b/src/js/lazyiframe.js new file mode 100644 index 000000000..278213d26 --- /dev/null +++ b/src/js/lazyiframe.js @@ -0,0 +1,33 @@ +if( "forEach" in NodeList.prototype ) { + function iframeSwitch(el) { + if (!("fetch" in window) || "connection" in navigator && navigator.connection.saveData === true) { + return; + } + + let iframe = document.createElement("iframe"); + iframe.setAttribute("loading", "lazy"); + for(let attr of el.attributes) { + iframe.setAttribute(attr.name, attr.nodeValue); + } + el.replaceWith(iframe); + } + + if(typeof IntersectionObserver !== "undefined") { + var observer = new IntersectionObserver(function(changes) { + changes.forEach(function(change) { + if(change.isIntersecting) { + iframeSwitch(change.target); + observer.unobserve(change.target); + } + }); + }); + } + + document.querySelectorAll("div[data-lazyiframe]").forEach(function(element) { + if(typeof IntersectionObserver !== "undefined") { + observer.observe(element); + } else { + iframeSwitch(element); + } + }); +} diff --git a/src/js/sort-container.js b/src/js/sort-container.js new file mode 100644 index 000000000..5428a372d --- /dev/null +++ b/src/js/sort-container.js @@ -0,0 +1,54 @@ +class SortContainer extends HTMLElement { + constructor() { + super(); + this.attrs = { + select: "data-sort", + children: "data-sort-children", + }; + } + + connectedCallback() { + this.select = this.querySelector(`[${this.attrs.select}]`); + this.bindEvents(); + } + + bindEvents() { + this.select.addEventListener("change", e => { + this.sort(e.target.value); + }, false); + } + + sort(key) { + let container = this.querySelector(`[${this.attrs.children}]`); + // Thanks https://github.com/component/sort (MIT License) + let arr = [].slice.call(container.children).sort((a, b) => { + let aVal = a.getAttribute(`data-sort-${key}`); + let bVal = b.getAttribute(`data-sort-${key}`); + + // numeric sorts + if(key.endsWith("-numeric") || key.endsWith("-numeric-ascending") || key.endsWith("-numeric-descending")) { + aVal = parseFloat(aVal) || 0; + bVal = parseFloat(bVal) || 0; + + if(key.endsWith("-numeric-descending")) { + [aVal, bVal] = [bVal, aVal]; + } + return aVal - bVal; + } + + if(bVal < aVal) { + return 1; + } else if(aVal < bVal) { + return -1; + } + return 0; + }); + let frag = document.createDocumentFragment(); + for (let i = 0; i < arr.length; i++) { + frag.appendChild(arr[i]); + } + container.appendChild(frag); + } +} + +window.customElements.define("sort-container", SortContainer); \ No newline at end of file diff --git a/src/site/_data/announcementbar.json b/src/site/_data/announcementbar.json new file mode 100644 index 000000000..f399b0b95 --- /dev/null +++ b/src/site/_data/announcementbar.json @@ -0,0 +1,5 @@ +{ + "text": "Let’s talk about the Future of Jamstack —", + "cta": "Join us", + "url": "https://thefutureofjamstack.org/" +} diff --git a/src/site/_data/community.yaml b/src/site/_data/community.yaml index a331aef70..b46c22fd9 100644 --- a/src/site/_data/community.yaml +++ b/src/site/_data/community.yaml @@ -1,160 +1,139 @@ - - name: San Francisco - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-sf/ - feed: https://api.meetup.com/Jamstack-sf/events - - name: Austin - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Austin/ - feed: https://api.meetup.com/Jamstack-Austin/events - - name: Boston - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Boston/ - feed: https://api.meetup.com/Jamstack-Boston/events - - name: Porto - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Porto/ - feed: https://api.meetup.com/Jamstack-Porto/events - - name: New York city - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-nyc/ - feed: https://api.meetup.com/Jamstack-nyc/events - - name: London - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-London/ - feed: https://api.meetup.com/Jamstack-London/events - - name: Berlin - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack_berlin/ - feed: https://api.meetup.com/Jamstack_berlin/events - - name: Wrocław - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Wroclaw/ - feed: https://api.meetup.com/Jamstack-Wroclaw/events - - name: Portland - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Portland/ - feed: https://api.meetup.com/Jamstack-Portland/events - - name: Hamburg - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Hamburg/ - feed: https://api.meetup.com/Jamstack-Hamburg/events - - name: Bengaluru - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Bengaluru/ - feed: https://api.meetup.com/Jamstack-Bengaluru/events - - name: Paris - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/fr-FR/Jamstack-paris/ - feed: https://api.meetup.com/Jamstack-paris/events - - name: Seattle - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-seattle/ - feed: https://api.meetup.com/Jamstack-seattle/events - - name: Tokyo - themecolor: '#000' - btncopy: Join Now - link: https://Jamstack-tokyo.connpass.com/ - - name: Lisbon - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Lisbon/ - feed: https://api.meetup.com/Jamstack-Lisbon/events - - name: Istanbul - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack/ - - name: Oslo - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Oslo/ - feed: https://api.meetup.com/Jamstack-Oslo/events - - name: Atlanta - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Atlanta/ - feed: https://api.meetup.com/Jamstack-Atlanta/events - - name: Cincinnati - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Cincinnati/ - feed: https://api.meetup.com/Jamstack-Cincinnati/events - - name: Phoenix - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack_PHX/ - feed: https://api.meetup.com/Jamstack_PHX/events - - name: Minsk - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/ru-RU/Jamstack-Minsk/ - feed: https://api.meetup.com/Jamstack-Minsk/events - - name: Chicago - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Chicago/ - feed: https://api.meetup.com/Jamstack-Chicago/events - - name: Lagos - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Lagos/ - feed: https://api.meetup.com/Jamstack-Lagos/events - - name: Denver - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Denver/ - feed: https://api.meetup.com/Jamstack-Denver/events - - name: Israel - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-IL/ - feed: https://api.meetup.com/Jamstack-IL/events - - name: Yemen - themecolor: '#000' - btncopy: Join Now - link: https://www.facebook.com/groups/JamstackYemenMeetups - - name: Florence - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack_Florence/ - feed: https://api.meetup.com/Jamstack_Florence/events - - name: Detroit - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Detroit/ - feed: https://api.meetup.com/Jamstack-Detroit/events - - name: Singapore - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Singapore/ - feed: https://api.meetup.com/Jamstack-Singapore/events - - name: Abuja - themecolor: '#000' - btncopy: Join Now - link: https://www.meetup.com/Jamstack-Abuja/ - feed: https://api.meetup.com/Jamstack-Abuja/events - - name: Philadelphia - themecolor: '#000' - btncopy: Join Now - link: http://www.meetup.com/Jamstack-Philly/ - feed: http://api.meetup.com/Jamstack-Philly/events - - name: Ulaanbaatar - themecolor: '#000' - btncopy: Join Now - link: https://www.facebook.com/groups/JamstackUlaanbaatar/ - - name: Warri - themecolor: '#000' - btncopy: Join Now - link: https://m.facebook.com/groups/473905470150140 +- name: Kolachi + link: https://www.meetup.com/jamstack-kolachi/ + feed: https://api.meetup.com/jamstack-kolachi/events + country: Pakistan + +- name: San Francisco + link: https://www.meetup.com/Jamstack-sf/ + feed: https://api.meetup.com/Jamstack-sf/events + +- name: Austin + link: https://www.meetup.com/Jamstack-Austin/ + feed: https://api.meetup.com/Jamstack-Austin/events + +- name: Boston + link: https://www.meetup.com/Jamstack-Boston/ + feed: https://api.meetup.com/Jamstack-Boston/events + country: United States of America + +- name: Porto + link: https://www.meetup.com/Jamstack-Porto/ + feed: https://api.meetup.com/Jamstack-Porto/events + +- name: New York City + link: https://www.meetup.com/Jamstack-nyc/ + feed: https://api.meetup.com/Jamstack-nyc/events + +- name: London + link: https://www.meetup.com/Jamstack-London/ + feed: https://api.meetup.com/Jamstack-London/events + +- name: Berlin + link: https://www.meetup.com/Jamstack_berlin/ + feed: https://api.meetup.com/Jamstack_berlin/events + +- name: Wrocław + link: https://www.meetup.com/Jamstack-Wroclaw/ + feed: https://api.meetup.com/Jamstack-Wroclaw/events + +- name: Portland + link: https://www.meetup.com/Jamstack-Portland/ + feed: https://api.meetup.com/Jamstack-Portland/events + +- name: Hamburg + link: https://www.meetup.com/Jamstack-Hamburg/ + feed: https://api.meetup.com/Jamstack-Hamburg/events + +- name: Bengaluru + link: https://www.meetup.com/Jamstack-Bengaluru/ + feed: https://api.meetup.com/Jamstack-Bengaluru/events + +- name: Paris + link: https://www.meetup.com/fr-FR/Jamstack-paris/ + feed: https://api.meetup.com/Jamstack-paris/events + +- name: Seattle + link: https://www.meetup.com/Jamstack-seattle/ + feed: https://api.meetup.com/Jamstack-seattle/events + +- name: Lisbon + link: https://www.meetup.com/Jamstack-Lisbon/ + feed: https://api.meetup.com/Jamstack-Lisbon/events + +- name: Istanbul + link: https://www.meetup.com/Jamstack/ + feed: https://api.meetup.com/Jamstack/events + +- name: Oslo + link: https://www.meetup.com/Jamstack-Oslo/ + feed: https://api.meetup.com/Jamstack-Oslo/events + +- name: Atlanta + link: https://www.meetup.com/Jamstack-Atlanta/ + feed: https://api.meetup.com/Jamstack-Atlanta/events + +- name: Cincinnati + link: https://www.meetup.com/Jamstack-Cincinnati/ + feed: https://api.meetup.com/Jamstack-Cincinnati/events + +- name: Phoenix + link: https://www.meetup.com/Jamstack_PHX/ + feed: https://api.meetup.com/Jamstack_PHX/events + +- name: Minsk + link: https://www.meetup.com/ru-RU/Jamstack-Minsk/ + feed: https://api.meetup.com/Jamstack-Minsk/events + +- name: Chicago + link: https://www.meetup.com/b4974f5c-3d26-4bfb-8e24-6b670605fa9e/ + feed: https://api.meetup.com/b4974f5c-3d26-4bfb-8e24-6b670605fa9e/events + +- name: Lagos + link: https://www.meetup.com/Jamstack-Lagos/ + feed: https://api.meetup.com/Jamstack-Lagos/events + +- name: Denver + link: https://www.meetup.com/Jamstack-Denver/ + feed: https://api.meetup.com/Jamstack-Denver/events + +- name: Florence + link: https://www.meetup.com/Jamstack_Florence/ + feed: https://api.meetup.com/Jamstack_Florence/events + country: Italy + +- name: Detroit + link: https://www.meetup.com/Jamstack-Detroit/ + feed: https://api.meetup.com/Jamstack-Detroit/events + +- name: Philadelphia + link: https://www.meetup.com/jamstack-phl + feed: https://api.meetup.com/jamstack-phl/events + +- name: Mexico City + link: https://www.meetup.com/JAMstack-Mexico-City/ + feed: https://api.meetup.com/JAMstack-Mexico-City/events + +- name: Amsterdam + link: https://www.meetup.com/jamstack-amsterdam/ + feed: https://api.meetup.com/jamstack-amsterdam/events + +- name: Toronto + link: https://www.meetup.com/JAMstack-Toronto/ + feed: https://api.meetup.com/JAMstack-Toronto/events + +- name: Nuremberg + link: https://www.meetup.com/jamstack-nuremberg/ + feed: https://api.meetup.com/jamstack-nuremberg/events + +- name: Yerevan + link: https://www.meetup.com/jamstack-armenia/ + feed: https://api.meetup.com/jamstack-armenia/events + +- name: Stuttgart + link: https://www.meetup.com/jamstack-stuttgart/ + feed: https://api.meetup.com/jamstack-stuttgart/events + +- name: Barcelona + link: https://www.meetup.com/jamstack-barcelona/ + feed: https://api.meetup.com/jamstack-barcelona/events + diff --git a/src/site/_data/eleventyComputed.js b/src/site/_data/eleventyComputed.js new file mode 100644 index 000000000..7f73860a6 --- /dev/null +++ b/src/site/_data/eleventyComputed.js @@ -0,0 +1,40 @@ +const placename = require("placename"); +const lookupCountryName = require("i18n-iso-countries"); + +async function getCountryCode(searchTerm) { + return new Promise(resolve => { + placename(searchTerm, function (err, rows) { + if(rows.length) { + resolve(rows[0].country); + } else { + resolve(); + } + }) + }); +} + +function getCountryName(countryCode) { + if(countryCode) { + return lookupCountryName.getName(countryCode, "en", {select: "official"}); + } +} + +module.exports = { + community: async function(data) { + let community = data.community.filter(e => true); + for(let meetup of community) { + // skip if populated in the YAML file + if(meetup.country) { + continue; + } + + // sry for await in loop + let countryCode = await getCountryCode(meetup.name); + if(countryCode) { + meetup.country = getCountryName(countryCode); + } + } + + return community; + } +}; \ No newline at end of file diff --git a/src/site/_data/examples/a-saude.yaml b/src/site/_data/examples/a-saude.yaml deleted file mode 100644 index 0d5ee6c02..000000000 --- a/src/site/_data/examples/a-saude.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: a+ Saúde -description: An even better experience in using health services -link: 'https://www.amaissaude.com.br/' -thumbnailurl: /img/examples/amaissaude.jpg -tools: - - Gatsby.js - - React - - Cosmic - - Amazon S3 - - styled-components - - GitLab - - Cloudflare - diff --git a/src/site/_data/examples/amzscout-blog.yaml b/src/site/_data/examples/amzscout-blog.yaml deleted file mode 100644 index 02865e336..000000000 --- a/src/site/_data/examples/amzscout-blog.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: AMZScout Blog -description: AMZScout - Instant Amazon product research in your browser -link: 'https://amzscout.net/blog/' -thumbnailurl: /img/examples/amzscout-blog.jpg -tools: - - Gatsby.js - - React - - Contentful - - Styled Components - - Webhooks - - Disqus - diff --git a/src/site/_data/examples/antonin-nhek-portfolio.yaml b/src/site/_data/examples/antonin-nhek-portfolio.yaml deleted file mode 100644 index a1ef2824d..000000000 --- a/src/site/_data/examples/antonin-nhek-portfolio.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: Antonin Nhek Portfolio -description: 'The portfolio of Antonin Nhek, Visual Designer & Front-End Developer' -link: 'https://anhek.dev' -thumbnailurl: /img/examples/anhek.png -tools: - - React - - Gatsby.js - - Netlify - - Disqus - diff --git a/src/site/_data/examples/appristas.yaml b/src/site/_data/examples/appristas.yaml deleted file mode 100644 index de7708bda..000000000 --- a/src/site/_data/examples/appristas.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Appristas -description: Web and Mobile development team from Azerbaijan -link: 'https://www.appristas.io' -thumbnailurl: /img/examples/appristas.jpg -tools: - - Firebase Hosting - - Create React App - - React Snap - - Webpack - - GitLab - - Sass - - Custom API - diff --git a/src/site/_data/examples/armex-cnc.yaml b/src/site/_data/examples/armex-cnc.yaml deleted file mode 100644 index 5bd88779b..000000000 --- a/src/site/_data/examples/armex-cnc.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: ARMEX CNC -description: CNC machining company with headquarters in Poland. -link: 'https://www.armexcnc.com/en' -thumbnailurl: /img/examples/armexcnc.jpg -tools: - - DatoCMS - - Next.js - - Webpack - - Netlify - diff --git a/src/site/_data/examples/art-of-memory.yaml b/src/site/_data/examples/art-of-memory.yaml deleted file mode 100644 index 2f2d3edf4..000000000 --- a/src/site/_data/examples/art-of-memory.yaml +++ /dev/null @@ -1,14 +0,0 @@ -title: Art of Memory -description: Learn powerful memory techniques -link: 'https://artofmemory.com/' -thumbnailurl: /img/examples/art-of-memory.png -tools: - - Gatsby.js - - Netlify - - Firebase Functions - - Firebase Firestore - - GitLab - - Vue.js - - Cloudflare - - Nginx - diff --git a/src/site/_data/examples/assortment.yaml b/src/site/_data/examples/assortment.yaml deleted file mode 100644 index 6bb82013f..000000000 --- a/src/site/_data/examples/assortment.yaml +++ /dev/null @@ -1,16 +0,0 @@ - -title: Assortment -description: Web Development blog for the practical developer -link: 'https://assortment.io' -thumbnailurl: /img/examples/assortment.png -featured: true -tools: - - Gatsby.js - - React - - Netlify - - Netlify CMS - - GitHub - - Lunr.js - - Emotion - - Prism.js - diff --git a/src/site/_data/examples/bejamasio.yaml b/src/site/_data/examples/bejamasio.yaml deleted file mode 100644 index ad90f3410..000000000 --- a/src/site/_data/examples/bejamasio.yaml +++ /dev/null @@ -1,11 +0,0 @@ -title: Bejamas.io -description: "Bejamas - JAM Stack experts for hire website." -link: https://www.bejamas.io -thumbnailurl: /img/examples/bejamas.jpg -featured: true -tools: - - Gatsby.js - - Contentful - - Webpack - - Firebase - diff --git a/src/site/_data/examples/binaria.yaml b/src/site/_data/examples/binaria.yaml deleted file mode 100644 index 894a5d8a0..000000000 --- a/src/site/_data/examples/binaria.yaml +++ /dev/null @@ -1,19 +0,0 @@ - -title: Binaria -description: Digital product connecting technics & creativity -link: 'https://binaria.com/en/' -thumbnailurl: /img/examples/binaria.png -tools: - - Gatsby.js - - React - - Wordpress - - WPML - - Netlify - - Google Analytics - - React-spring - - GSAP - - Google Analytics - - GitLab - - styled-components - - Web App Manifest - diff --git a/src/site/_data/examples/bolajiayodeji.yaml b/src/site/_data/examples/bolajiayodeji.yaml deleted file mode 100644 index 9f0082549..000000000 --- a/src/site/_data/examples/bolajiayodeji.yaml +++ /dev/null @@ -1,19 +0,0 @@ - -title: BolajiAyodeji -description: Articles on web and frontend development written by Bolaji Ayodeji. -link: 'https://www.bolajiayodeji.com/' -thumbnailurl: /img/examples/bolajiayodeji.png -tools: - - Hugo - - Lunr.js - - Bootstrap - - Grunt - - Workbox - - CodeFund - - TinyLetter - - Disqus - - Cloudinary - - GitHub - - Netlify - - Google Analytics - diff --git a/src/site/_data/examples/browsersmart.yaml b/src/site/_data/examples/browsersmart.yaml deleted file mode 100644 index e934ff443..000000000 --- a/src/site/_data/examples/browsersmart.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: BrowserSmart -description: A pithy browser selection guide -link: 'https://browsersmart.com' -thumbnailurl: /img/examples/browsersmart.png -tools: - - Platframe - - Gulp - - Pug - - Stylus - - Platform.js - - GitLab - - Netlify - diff --git a/src/site/_data/examples/cafe-cuvee.yaml b/src/site/_data/examples/cafe-cuvee.yaml deleted file mode 100644 index 2becce80b..000000000 --- a/src/site/_data/examples/cafe-cuvee.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Café Cuvée -description: French/Swedish restaurant in Stockholm. -link: 'https://www.cafecuvee.se' -thumbnailurl: /img/examples/cafe-cuvee.jpg -tools: - - Netlify - - GitHub - - Jekyll - - jQuery - - Sass - - Zapier - - Mailchimp - - Google Analytics - diff --git a/src/site/_data/examples/camilia-coiffure.yaml b/src/site/_data/examples/camilia-coiffure.yaml deleted file mode 100644 index 2cd611558..000000000 --- a/src/site/_data/examples/camilia-coiffure.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Camilia Coiffure -description: 'Website for the Camilia Coiffure hair salon based in Lyon, France' -link: 'https://camilia-coiffure.fr' -thumbnailurl: /img/examples/camilia-coiffure.jpg -tools: - - React - - Gatsby.js - - Netlify - - GitHub - - Service Workers - - Tailwind CSS - - PurgeCSS - diff --git a/src/site/_data/examples/carrot-creative.yaml b/src/site/_data/examples/carrot-creative.yaml deleted file mode 100644 index 217d5a6d4..000000000 --- a/src/site/_data/examples/carrot-creative.yaml +++ /dev/null @@ -1,20 +0,0 @@ - -title: Carrot Creative -description: >- - Creative, technology, and distribution under one roof. Carrot is the - full-service digital agency within VICE. -link: 'https://carrot.is/' -thumbnailurl: /img/examples/carrot.jpg -tools: - - Roots - - Vue - - Stylus - - Coffeescript - - Pug - - Contentful - - Internal APIs - - Spike - - GitHub - - Netlify - - Google Analytics - diff --git a/src/site/_data/examples/changelog.yaml b/src/site/_data/examples/changelog.yaml deleted file mode 100644 index d5f36b0c3..000000000 --- a/src/site/_data/examples/changelog.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Changelog -description: Jekyll powered static site to host your product's changelog. -link: 'https://updates.changelog.site' -thumbnailurl: /img/examples/changelog.png -tools: - - Netlify - - Jekyll - - Netlify CMS - - Disqus - - Bootstrap - - Sass - diff --git a/src/site/_data/examples/cita.yaml b/src/site/_data/examples/cita.yaml deleted file mode 100644 index f3d567a48..000000000 --- a/src/site/_data/examples/cita.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: CiTA -description: Creative Internet Technology Agency -link: 'https://www.cita.hr' -thumbnailurl: /img/examples/cita.png -tools: - - Sass - - WebPack 2 - - Gulp - - Critical CSS - - BitBucket - - Netlify - diff --git a/src/site/_data/examples/city-of-boston-budget-site.yaml b/src/site/_data/examples/city-of-boston-budget-site.yaml deleted file mode 100644 index 311896031..000000000 --- a/src/site/_data/examples/city-of-boston-budget-site.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: City of Boston - Budget Site -description: Executive summary of the City of Boston’s fiscal year 2018 recommended budget. -link: 'https://budget.boston.gov' -thumbnailurl: /img/examples/boston-budget.jpg -featured: true -tools: - - Jekyll - - Gulp - - Chart.js - diff --git a/src/site/_data/examples/code-bushi.yaml b/src/site/_data/examples/code-bushi.yaml deleted file mode 100644 index 47f9e5eb6..000000000 --- a/src/site/_data/examples/code-bushi.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: Code Bushi -description: Web development tips and resources to elevate your coding journey. -link: 'https://codebushi.com' -thumbnailurl: /img/examples/code-bushi.jpg -tools: - - Gatsby.js - - React - - Webpack - - Sass - - Netlify - diff --git a/src/site/_data/examples/compare-ali.yaml b/src/site/_data/examples/compare-ali.yaml deleted file mode 100644 index 686303a3c..000000000 --- a/src/site/_data/examples/compare-ali.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: Compare Ali -description: Curated brand-name clothing on Ali Express. -link: 'https://compareali.com' -thumbnailurl: /img/examples/compareali.jpg -tools: - - Netlify - - Metalsmith - - Prismic.io - - Webpack - diff --git a/src/site/_data/examples/cstate.yaml b/src/site/_data/examples/cstate.yaml deleted file mode 100644 index c33325eb8..000000000 --- a/src/site/_data/examples/cstate.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: cState -description: 'Hugo status page. Fast, IE8+, and customizable.' -link: 'https://github.com/mistermantas/cstate' -thumbnailurl: /img/examples/cstate.jpg -tools: - - Netlify - - Hugo - - Netlify CMS - - GitHub - - Google Analytics - - Git - diff --git a/src/site/_data/examples/damian-nowak's-blog.yaml b/src/site/_data/examples/damian-nowak's-blog.yaml deleted file mode 100644 index b09f18123..000000000 --- a/src/site/_data/examples/damian-nowak's-blog.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Damian Nowak's Blog -description: Blog & Resume -link: 'https://www.nowaker.net/' -thumbnailurl: /img/examples/nowaker.png -tools: - - Middleman - - Slim - - Sprockets - - Sass (Sass) - - Bootstrap - - jQuery - - GitLab - - Firebase - diff --git a/src/site/_data/examples/data-science-workshops.yaml b/src/site/_data/examples/data-science-workshops.yaml deleted file mode 100644 index 0528093a6..000000000 --- a/src/site/_data/examples/data-science-workshops.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: Data Science Workshops -description: Let's level up your skills and knowledge -link: 'https://www.datascienceworkshops.com/' -thumbnailurl: /img/examples/data-science-workshops.jpg -tools: - - Jekyll - - Tailwind CSS - - Gulp - - Netlify - - ImageMagick - diff --git a/src/site/_data/examples/defiprime.yaml b/src/site/_data/examples/defiprime.yaml deleted file mode 100644 index a9c9a66af..000000000 --- a/src/site/_data/examples/defiprime.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: DeFiprime -description: Curated list of the best DeFi products -link: 'https://defiprime.com/' -thumbnailurl: /img/examples/defiprime.png -tools: - - Jekyll - - Sass - - GitHub - - Netlify - - Google Analytics - diff --git a/src/site/_data/examples/dev-podcasts.yaml b/src/site/_data/examples/dev-podcasts.yaml deleted file mode 100644 index 899191bad..000000000 --- a/src/site/_data/examples/dev-podcasts.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: Dev Podcasts -description: Programming podcast discovery service -link: 'https://devpodcasts.app/' -thumbnailurl: /img/examples/devpodcasts.png -tools: - - Netlify - - Gatsby.js - - Azure Search - - Bootstrap - - GitHub - diff --git a/src/site/_data/examples/developer-for-life.yaml b/src/site/_data/examples/developer-for-life.yaml deleted file mode 100644 index b5c03090a..000000000 --- a/src/site/_data/examples/developer-for-life.yaml +++ /dev/null @@ -1,17 +0,0 @@ - -title: Developer for Life -description: A blog covering cloud and developer-related topics -link: 'https://blog.jeremylikness.com/' -thumbnailurl: /img/examples/developerforlife.jpg -tools: - - Hugo - - Service Workers - - Cloudflare - - Disqus - - Google Analytics - - GitHub - - Azure Pipelines - - Azure Container Registry - - Azure Storage Static Website - - Docker - diff --git a/src/site/_data/examples/digital-continuum.yaml b/src/site/_data/examples/digital-continuum.yaml deleted file mode 100644 index 554e71ae1..000000000 --- a/src/site/_data/examples/digital-continuum.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Digital Continuum -description: >- - A knowledge base that documents how organizations can optimize all aspects of - their digital value delivery at the enterprise level. -link: 'https://www.digitalcontinuum.com/' -thumbnailurl: /img/examples/digital-continuum.jpg -tools: - - Hexo - - Contentful - - Sass - - Google Analytics - - Algolia - - Netlify - diff --git a/src/site/_data/examples/discoverit.yaml b/src/site/_data/examples/discoverit.yaml deleted file mode 100644 index 40b6927d8..000000000 --- a/src/site/_data/examples/discoverit.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: DiscoverIT -description: 'Digital Agency in Reading, UK' -link: 'https://discoverit.digital' -thumbnailurl: /img/examples/discoverit.png -tools: - - Vue.js - - Nuxt - - Kentico Cloud - - TeamCity - - Octopus Deploy - diff --git a/src/site/_data/examples/dreamhost.yaml b/src/site/_data/examples/dreamhost.yaml deleted file mode 100644 index c30c216bf..000000000 --- a/src/site/_data/examples/dreamhost.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: DreamHost -description: Web Hosting with Purpose -link: 'https://www.dreamhost.com/' -thumbnailurl: /img/examples/dreamhost.png -tools: - - Jekyll - - Sprockets - - Sass - - Bootstrap - - jQuery - - GitLab - - Google Analytics - - Locize - - Fastly diff --git a/src/site/_data/examples/dusk.yaml b/src/site/_data/examples/dusk.yaml deleted file mode 100644 index 6b714bc88..000000000 --- a/src/site/_data/examples/dusk.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: DUSK -description: >- - DUSK is a creative collective agency for web design, development, strategy & - branding built on jekyll using the Jamstack and Netlify CMS for content - management. -link: 'https://www.duskdigital.co/' -thumbnailurl: /img/examples/dusk.jpg -tools: - - Jekyll - - GitHub - - Netlify - - Sass - - Google Analytics - diff --git a/src/site/_data/examples/e-com-plus-storefront.yaml b/src/site/_data/examples/e-com-plus-storefront.yaml deleted file mode 100644 index ddc991708..000000000 --- a/src/site/_data/examples/e-com-plus-storefront.yaml +++ /dev/null @@ -1,19 +0,0 @@ - -title: E-Com Plus Storefront -description: Open source PWA & Jamstack ecommerce template for E-Com Plus stores -link: 'https://storefront-demo.e-com.plus/' -thumbnailurl: /img/examples/storefront.png -tools: - - Webpack - - Babel - - Vue.js - - EJS - - Netlify CMS - - Netlify - - GitHub - - Progressive Web App - - Sass - - Bootstrap - - E-Com Plus platform APIs - - Workbox - diff --git a/src/site/_data/examples/eden-yacht.yaml b/src/site/_data/examples/eden-yacht.yaml deleted file mode 100644 index 9cf44df22..000000000 --- a/src/site/_data/examples/eden-yacht.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Eden Yacht -description: Website for the Galapgos yacht Eden -link: 'http://galapagoseden.com/' -thumbnailurl: /img/examples/galapagoseden.jpg -tools: - - Nuxt - - Vue-bootsrap - - Flamelink.io - - Firebase - - Pm2 - - Nginx - - Varnish - - GitHub - diff --git a/src/site/_data/examples/education-lessons.yaml b/src/site/_data/examples/education-lessons.yaml deleted file mode 100644 index efda92a71..000000000 --- a/src/site/_data/examples/education-lessons.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Education Lessons -description: Education Made Easy -link: 'https://educationlessons.co.in/' -thumbnailurl: /img/examples/education-lessons.jpg -tools: - - Gatsby.js - - Netlify - - Netlify Functions - - Firebase - - Google Analytics - - Google Sheets API - - YouTube API - - GitLab - diff --git a/src/site/_data/examples/engin-polat.yaml b/src/site/_data/examples/engin-polat.yaml deleted file mode 100644 index e2a189384..000000000 --- a/src/site/_data/examples/engin-polat.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Engin Polat -description: Programcidan Programciya. -link: 'https://enginpolat.com/' -thumbnailurl: /img/examples/enginpolat.png -tools: - - GitHub - - GitHub Pages - - Jekyll - - Cloudflare - - Bootstrap - - Disqus - diff --git a/src/site/_data/examples/fabuwood-cabinetry.yaml b/src/site/_data/examples/fabuwood-cabinetry.yaml deleted file mode 100644 index 59e9f2a6b..000000000 --- a/src/site/_data/examples/fabuwood-cabinetry.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: Fabuwood Cabinetry -description: Fabuwood Cabinetry official website. -link: 'https://www.fabuwood.com' -thumbnailurl: /img/examples/fabuwood.jpg -tools: - - Metalsmith - - Webpack - - Prismic.io - - Netlify - - Browser Sync - diff --git a/src/site/_data/examples/fba-catalog.yaml b/src/site/_data/examples/fba-catalog.yaml deleted file mode 100644 index 561124662..000000000 --- a/src/site/_data/examples/fba-catalog.yaml +++ /dev/null @@ -1,17 +0,0 @@ - -title: FBA Catalog -description: Handbook for amazon sellers -link: 'https://www.fbacatalog.com' -thumbnailurl: /img/examples/fbacatalog.png -tools: - - Middleman - - Netlify - - Google Sheets - - Sheetsu - - Tailwind CSS - - jQuery - - Gulp - - PostCss - - GitHub - - Yarn - diff --git a/src/site/_data/examples/flamingo.yaml b/src/site/_data/examples/flamingo.yaml deleted file mode 100644 index a84c4be9b..000000000 --- a/src/site/_data/examples/flamingo.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Flamingo -description: 'E-commerce site for Flamingo, a women''s body care brand' -link: 'https://www.shopflamingo.com' -thumbnailurl: /img/examples/flamingo.png -featured: true -tools: - - Gatsby.js - - React - - Contentful - - Fastly - - Amazon S3 - - styled-components - diff --git a/src/site/_data/examples/flying-colours.yaml b/src/site/_data/examples/flying-colours.yaml deleted file mode 100644 index 49daa391f..000000000 --- a/src/site/_data/examples/flying-colours.yaml +++ /dev/null @@ -1,14 +0,0 @@ -title: Flying Colours -description: Website for Flying Colours Life financial advice services -link: 'https://www.flyingcolourslife.com' -thumbnailurl: /img/examples/flyingcolourslife.jpg -tools: - - Sculpin - - Amazon S3 - - CloudFront CDN - - Sass - - Foundation - - Mithril.js - - Netlify CMS - - BitBucket - diff --git a/src/site/_data/examples/fullstack-hq.yaml b/src/site/_data/examples/fullstack-hq.yaml deleted file mode 100644 index 29d5cec8d..000000000 --- a/src/site/_data/examples/fullstack-hq.yaml +++ /dev/null @@ -1,16 +0,0 @@ - -title: Fullstack HQ -description: >- - Get immediate access to a battle-tested team of designers and developers on a - pay-as-you-go monthly subscription. -link: 'https://fullstackhq.com' -thumbnailurl: /img/examples/fullstackhq.jpg -tools: - - Gatsby.js - - Netlify - - Netlify CMS - - Webpack - - Bootstrap - - Sass - - GitHub - diff --git a/src/site/_data/examples/greenorbit.yaml b/src/site/_data/examples/greenorbit.yaml deleted file mode 100644 index 465e9e702..000000000 --- a/src/site/_data/examples/greenorbit.yaml +++ /dev/null @@ -1,22 +0,0 @@ - -title: GreenOrbit -description: >- - Cloud-based intranet software. Get your people going with everything you need, - built in. -link: 'https://www.greenorbit.com' -thumbnailurl: /img/examples/greenrobit.jpg -tools: - - Serverless Framework - - Amazon S3azon S3 - - Amazon CloudFront - - Amazon API Gateway - - AWS Lambda - - AWS Lambda@Edge - - Git - - TeamCity - - React - - Gatsby.js - - GraphQL - - Sass - - ESLint - diff --git a/src/site/_data/examples/gridhaus.yaml b/src/site/_data/examples/gridhaus.yaml deleted file mode 100644 index acc0cec24..000000000 --- a/src/site/_data/examples/gridhaus.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Gridhaus -description: >- - Gridhaus is a branding and digital design consultancy based in Singapore and - Melbourne. -link: 'https://www.gridhaus.com' -thumbnailurl: /img/examples/gridhaus.jpg -tools: - - Netlify - - Prismic.io - - React - - GitLab - - Sass - - Webpack - diff --git a/src/site/_data/examples/han-han-xue.yaml b/src/site/_data/examples/han-han-xue.yaml deleted file mode 100644 index 3820ca0c4..000000000 --- a/src/site/_data/examples/han-han-xue.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Han Han Xue -description: 'https://hanhanxue.com/info/' -link: 'https://hanhanxue.com' -thumbnailurl: /img/examples/hanhanxue.png -tools: - - Middleman - - Sass - - Gulp - - Critical CSS - - BitBucket - - Netlify - diff --git a/src/site/_data/examples/harish-v.yaml b/src/site/_data/examples/harish-v.yaml deleted file mode 100644 index ec37f159b..000000000 --- a/src/site/_data/examples/harish-v.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Harish V -description: 'Personal website of Harish V, software engineer based in Singapore.' -link: 'https://harishv.me/' -thumbnailurl: /img/examples/harishv.jpg -tools: - - React - - Gatsby.js - - Markdown - - Disqus - - Google Analytics - - Netlify - - PurgeCSS - diff --git a/src/site/_data/examples/helenzys-inc.yaml b/src/site/_data/examples/helenzys-inc.yaml deleted file mode 100644 index 83331c283..000000000 --- a/src/site/_data/examples/helenzys-inc.yaml +++ /dev/null @@ -1,16 +0,0 @@ - -title: Helenzys Inc -description: A digital solutions agency dedicated to help find solutions to all your business challenges -link: https://helenzys.com/ -thumbnailurl: /img/examples/helenzys.jpg -tools: - - React - - Gatsby.js - - Wordpress CMS - - Webpack - - Bootstrap - - Less - - GitHub - - Amazon S3azon S3 - - Google Analytics - diff --git a/src/site/_data/examples/hotmart-maquina-de-videos.yaml b/src/site/_data/examples/hotmart-maquina-de-videos.yaml deleted file mode 100644 index e1f9fc662..000000000 --- a/src/site/_data/examples/hotmart-maquina-de-videos.yaml +++ /dev/null @@ -1,20 +0,0 @@ - -title: Hotmart - Máquina de Vídeos -description: >- - Contents chosen by experts that help users and break their objections - regarding the process of transforming their digital content into video - classes. -link: 'https://www.hotmart.com/maquinadevideos/' -thumbnailurl: /img/examples/hotmart-maquinadevideos.jpg -tools: - - Nuxt - - Sass - - Strapi.io - - GitHub - - Google Analytics - - Yandex.Metrika - - AWS ECS - - AWS Cloudfront - - AWS Route 53 - - AWS Amazon S3azon S3 - diff --git a/src/site/_data/examples/hyper-static.yaml b/src/site/_data/examples/hyper-static.yaml deleted file mode 100644 index 9d0439bf6..000000000 --- a/src/site/_data/examples/hyper-static.yaml +++ /dev/null @@ -1,18 +0,0 @@ - -title: Hyper Static -description: >- - Prescriptive marketing agency with an exclusive focus on Hugo and Static Site - Generators -link: 'https://www.gohyperstatic.com' -thumbnailurl: /img/examples/hyperstatic.png -tools: - - Hugo - - WebPack 2 - - Cloudflare - - Babel - - Critical CSS - - GitLab - - PostCSS - - Disqus - - Netlify - diff --git a/src/site/_data/examples/jake101.yaml b/src/site/_data/examples/jake101.yaml deleted file mode 100644 index 098110e41..000000000 --- a/src/site/_data/examples/jake101.yaml +++ /dev/null @@ -1,21 +0,0 @@ - -title: Jake101 -description: >- - API-powered design and front-end development portfolio with integrated links - and tools sections. -link: 'https://jake101.com' -thumbnailurl: /img/examples/jake101.jpg -tools: - - Nuxt - - Webpack - - Cloudinary - - Anime.js - - Sass - - Netlify - - BitBucket - - Google Analytics - - Cockpit - - FeathersJS - - Service Workers - - Web App Manifest - diff --git a/src/site/_data/examples/jfk-terminal-4.yaml b/src/site/_data/examples/jfk-terminal-4.yaml deleted file mode 100644 index b9ce129ca..000000000 --- a/src/site/_data/examples/jfk-terminal-4.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: JFK Terminal 4 -description: >- - T4 is the largest terminal at New York’s John F. Kennedy International Airport - and the only privately operated terminal in the United States. -link: 'https://www.jfkt4.nyc/' -thumbnailurl: /img/examples/jfkt4.png -featured: true -tools: - - TakeShape.io - - AWS Amazon S3azon S3azon S3 - - AWS Lambda - - Webpack - diff --git a/src/site/_data/examples/julian-gaviria.yaml b/src/site/_data/examples/julian-gaviria.yaml deleted file mode 100644 index 32d2c3509..000000000 --- a/src/site/_data/examples/julian-gaviria.yaml +++ /dev/null @@ -1,17 +0,0 @@ - -title: Julian Gaviria -description: >- - Front-end development and design blog with a focus on web performance, - testing, and the modern web. -link: 'https://julian.is' -thumbnailurl: /img/examples/julian.jpg -tools: - - Jekyll - - Grunt - - Cloudflare - - Sass - - Critical CSS - - GitHub - - Service Workers - - Web App Manifest - diff --git a/src/site/_data/examples/kentico-developer-community.yaml b/src/site/_data/examples/kentico-developer-community.yaml deleted file mode 100644 index 020a981f8..000000000 --- a/src/site/_data/examples/kentico-developer-community.yaml +++ /dev/null @@ -1,20 +0,0 @@ - -title: Kentico Developer Community -description: Official Kentico Developer Community site. -link: 'https://kentico.github.io' -thumbnailurl: /img/examples/devcommunitypage.png -tools: - - Gatsby.js - - React - - Kentico Kontent - - Travis - - Sass - - GitHub - - GitHub Pages - - GitHub API - - Azure Functions - - Azure Table Storage - - Google Analytics - - Service Workers - - Web App Manifest - diff --git a/src/site/_data/examples/leonardo-dicaprio-foundation.yaml b/src/site/_data/examples/leonardo-dicaprio-foundation.yaml deleted file mode 100644 index 8f50ddd3c..000000000 --- a/src/site/_data/examples/leonardo-dicaprio-foundation.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Leonardo DiCaprio Foundation -description: >- - In 1998, Leonardo DiCaprio established his foundation with the mission of - protecting the world’s last wild places. -link: 'https://www.leonardodicaprio.org/' -thumbnailurl: /img/examples/leonardo-dicaprio-foundation.png -tools: - - TakeShape.io - - AWS Amazon S3azon S3azon S3 - - Cloudflare - - Webpack - diff --git a/src/site/_data/examples/lodash.yaml b/src/site/_data/examples/lodash.yaml deleted file mode 100644 index dcc0621b8..000000000 --- a/src/site/_data/examples/lodash.yaml +++ /dev/null @@ -1,16 +0,0 @@ - -title: Lodash -description: >- - A JavaScript utility library delivering consistency, modularity, performance, - & extras. -link: 'https://lodash.com/' -thumbnailurl: /img/examples/lodash.jpg -tools: - - Grunt - - Babel - - Jekyll - - React - - Sass - - GitHub - - Netlify - diff --git a/src/site/_data/examples/loggermts.yaml b/src/site/_data/examples/loggermts.yaml deleted file mode 100644 index 04450e05e..000000000 --- a/src/site/_data/examples/loggermts.yaml +++ /dev/null @@ -1,10 +0,0 @@ - -title: LoggerMTS -description: International Transport company with headquarters in Poland. -link: 'https://www.loggermts.pl/en' -thumbnailurl: /img/examples/loggermts.jpg -tools: - - Hugo - - Webpack - - Netlify - diff --git a/src/site/_data/examples/love-nils.yaml b/src/site/_data/examples/love-nils.yaml deleted file mode 100644 index c02d107db..000000000 --- a/src/site/_data/examples/love-nils.yaml +++ /dev/null @@ -1,17 +0,0 @@ - -title: 'Love, Nils' -description: >- - Love, Nils is a non-profit organisation providing support to children with - cancer. -link: 'https://www.lovenils.org' -thumbnailurl: /img/examples/lovenils.jpg -featured: true -tools: - - Netlify - - Prismic.io - - React - - Redux - - GitLab - - Sass - - Webpack - diff --git a/src/site/_data/examples/mak-adr-carriage.yaml b/src/site/_data/examples/mak-adr-carriage.yaml deleted file mode 100644 index f902aa3cf..000000000 --- a/src/site/_data/examples/mak-adr-carriage.yaml +++ /dev/null @@ -1,10 +0,0 @@ - -title: MAK - ADR Carriage -description: MAK International Transport of ADR Goods. -link: 'https://www.mak-kk.eu/en' -thumbnailurl: /img/examples/mak.jpg -tools: - - Next.js - - Webpack - - Netlify - diff --git a/src/site/_data/examples/marvelsearch.yaml b/src/site/_data/examples/marvelsearch.yaml deleted file mode 100644 index 63a03910e..000000000 --- a/src/site/_data/examples/marvelsearch.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: MarvelSearch -description: Lightning fast search into all superheroes of the Marvel universe -link: 'https://community.algolia.com/marvel-search/' -thumbnailurl: /img/examples/marvel-search.jpg -tools: - - Brunch - - Babel - - GitHub Pages - - Algolia - - Cloudinary - - instantsearch.js - - Sass (Sass) - diff --git a/src/site/_data/examples/nico-van-zyl.yaml b/src/site/_data/examples/nico-van-zyl.yaml deleted file mode 100644 index 50ecb1d47..000000000 --- a/src/site/_data/examples/nico-van-zyl.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: Nico van Zyl -description: >- - Freelance Interface Architect/Developer with a passion for Design Systems, - Jamstack, PWAs, Vue.js, React Native and truly responsive interfaces. -link: 'https://www.nicovanzyl.com' -thumbnailurl: /img/examples/nvz.png -tools: - - Gridsome - - Vue - - Netlify - diff --git a/src/site/_data/examples/norden-soft.yaml b/src/site/_data/examples/norden-soft.yaml deleted file mode 100644 index bc73ad257..000000000 --- a/src/site/_data/examples/norden-soft.yaml +++ /dev/null @@ -1,17 +0,0 @@ - -title: Norden Soft -description: >- - Nordensoft løsninger= En Moderne Arkitektur. JAMStack, Gatsby.js, Netlify, - Netlify CMS, Sanity, Jekyll, Magento 2, Drupal, Wordpress design og udvikling. -link: 'https://www.nordensoft.dk' -thumbnailurl: /img/examples/norden-soft.jpg -tools: - - Gatsby.js - - React - - Sanity - - Netlify - - GitHub - - Bootstrap - - Git - - Google Analytics - diff --git a/src/site/_data/examples/nshipster.yaml b/src/site/_data/examples/nshipster.yaml deleted file mode 100644 index 2dfee9b01..000000000 --- a/src/site/_data/examples/nshipster.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: NSHipster -description: 'A journal of the overlooked bits in Objective-C, Swift, and Cocoa.' -link: 'https://nshipster.com' -thumbnailurl: /img/examples/nshipster.png -tools: - - Netlify - - Jekyll - - GitHub - - Jamalytics - diff --git a/src/site/_data/examples/official-nift-website.yaml b/src/site/_data/examples/official-nift-website.yaml deleted file mode 100644 index f20b1d233..000000000 --- a/src/site/_data/examples/official-nift-website.yaml +++ /dev/null @@ -1,18 +0,0 @@ - -title: Official Nift Website -description: Cross-Platform Open Source Website Generator -link: 'https://www.nift.cc/' -thumbnailurl: /img/examples/nift.png -tools: - - Nift - - Netlify - - BitBucket - - GitHub - - GitLab - - Markdown - - Showdown - - Google Analytics - - Google Code Prettify - - MathJax - - FontAwesome - diff --git a/src/site/_data/examples/path-to-product.yaml b/src/site/_data/examples/path-to-product.yaml deleted file mode 100644 index dbb9e99c6..000000000 --- a/src/site/_data/examples/path-to-product.yaml +++ /dev/null @@ -1,17 +0,0 @@ - -title: Path to Product -description: 'Discover over 1,000 product jobs at startups and tech companies' -link: 'https://www.pathtoproduct.com' -thumbnailurl: /img/examples/pathtoproduct.jpg -tools: - - Vue - - Nuxt - - Netlify - - Google Maps API - - Internal Rails API - - GitHub - - Service Workers - - Tailwind CSS - - Markdown - - PurgeCSS - diff --git a/src/site/_data/examples/postman.yaml b/src/site/_data/examples/postman.yaml deleted file mode 100644 index c18143d05..000000000 --- a/src/site/_data/examples/postman.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: Postman -description: Postman Learning Center -link: 'https://learning.getpostman.com/' -thumbnailurl: /img/examples/postman.jpg -tools: - - Gatsby.js - - Contentful - - GitHub - - AWS Amazon S3 - diff --git a/src/site/_data/examples/psd-wizard.yaml b/src/site/_data/examples/psd-wizard.yaml deleted file mode 100644 index af604e518..000000000 --- a/src/site/_data/examples/psd-wizard.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: PSD Wizard -description: On-demand Front-End Coding Service -link: 'https://psdwizard.com' -thumbnailurl: /img/examples/psdwizard.png -tools: - - Nuxt - - Vue - - Nuxtent - - Sass - - BitBucket - - HubSpot - - Netlify - - Google Analytics - diff --git a/src/site/_data/examples/psykose-or-bipolar.yaml b/src/site/_data/examples/psykose-or-bipolar.yaml deleted file mode 100644 index 6a95e058c..000000000 --- a/src/site/_data/examples/psykose-or-bipolar.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Psykose | bipolar -description: A website for TIPS Sør-Øst with support and advice about mental disorders -link: 'https://psykose-bipolar.no' -thumbnailurl: /img/examples/psykose-bipolar.png -tools: - - Metalsmith - - Contentful - - GitHub - - Travis - - Firebase - - Handlebars - diff --git a/src/site/_data/examples/rafart-music.yaml b/src/site/_data/examples/rafart-music.yaml deleted file mode 100644 index 656505252..000000000 --- a/src/site/_data/examples/rafart-music.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: Rafart Music -description: Chapman Stick player Rafart music project website -link: 'https://www.rafartmusic.com' -thumbnailurl: /img/examples/rafartmusic.jpg -tools: - - Netlify - - React - - Solidity.io - - Next.js - - GitHub - diff --git a/src/site/_data/examples/rebel.yaml b/src/site/_data/examples/rebel.yaml deleted file mode 100644 index 621e10082..000000000 --- a/src/site/_data/examples/rebel.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: REBEL -description: 'A blog about movies, series and pop culture' -link: 'https://rebelonline.nl' -thumbnailurl: /img/examples/rebelonline.jpg -tools: - - Hugo - - GitHub - - Netlify - - Disqus - - Google Analytics - diff --git a/src/site/_data/examples/right-from-basics.yaml b/src/site/_data/examples/right-from-basics.yaml deleted file mode 100644 index f7e74402d..000000000 --- a/src/site/_data/examples/right-from-basics.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Right From Basics -description: >- - The best way to learn anything - right from basics. Learn about Python, Golang - and how to land your next job in tech! -link: 'https://rightfrombasics.com/' -thumbnailurl: /img/examples/rightfrombasics.jpg -tools: - - Hugo - - Markdown - - Disqus - - Google Analytics - - Netlify - - GitHub - diff --git a/src/site/_data/examples/rye-and-beyond-cottages.yaml b/src/site/_data/examples/rye-and-beyond-cottages.yaml deleted file mode 100644 index f74a056b1..000000000 --- a/src/site/_data/examples/rye-and-beyond-cottages.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Rye and Beyond Cottages -description: A holiday rental property site -link: 'https://ryeandbeyondcottages.co.uk/' -thumbnailurl: /img/examples/ryeandbeyondcottages.png -tools: - - Gridsome - - Vue - - NetlifyCMS - - Netlify Functions - - Netlify Large Media - - Smoobu API - diff --git a/src/site/_data/examples/rzuc-okiem.yaml b/src/site/_data/examples/rzuc-okiem.yaml deleted file mode 100644 index 59090415c..000000000 --- a/src/site/_data/examples/rzuc-okiem.yaml +++ /dev/null @@ -1,10 +0,0 @@ - -title: Rzuć Okiem -description: Polish web design & development agency -link: 'https://www.rzucokiem.pl' -thumbnailurl: /img/examples/rzucokiem.jpg -tools: - - Next.js - - Webpack - - Netlify - diff --git a/src/site/_data/examples/scott-young.yaml b/src/site/_data/examples/scott-young.yaml deleted file mode 100644 index e453f5c60..000000000 --- a/src/site/_data/examples/scott-young.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Scott Young -description: 'The portfolio site of Scott Young, Sound Designer & Front-End Developer' -link: 'https://parodybiz.co.uk' -thumbnailurl: /img/examples/scott-young.jpg -tools: - - React - - Gatsby.js - - Netlify - - DatoCMS - - GitHub - - Matter.js - - Sass - diff --git a/src/site/_data/examples/sequoia-capital.yaml b/src/site/_data/examples/sequoia-capital.yaml deleted file mode 100644 index cd0a86ed7..000000000 --- a/src/site/_data/examples/sequoia-capital.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Sequoia Capital -description: Sequoia Capital help the daring build legendary companies. -link: 'https://www.sequoiacap.com/' -thumbnailurl: /img/examples/sequoia.jpg -tools: - - Middleman - - jQuery - - Sass - - Contentful - - fuse.js - - GitHub - - Netlify - - Google Analytics - diff --git a/src/site/_data/examples/serverless.yaml b/src/site/_data/examples/serverless.yaml deleted file mode 100644 index 96c323786..000000000 --- a/src/site/_data/examples/serverless.yaml +++ /dev/null @@ -1,19 +0,0 @@ - -title: Serverless -description: >- - Serverless Application Framework powered by AWS Lambda, Microsoft Azure, - Google Cloud Platform, and IBM OpenWhisk -link: 'http://www.serverless.com/' -thumbnailurl: /img/examples/serverless.jpg -tools: - - Webpack - - Babel - - Phenomic - - React - - CSS Modules - - PostCSS - - Disqus - - Auth0 - - GitHub - - Netlify - diff --git a/src/site/_data/examples/sharpen.yaml b/src/site/_data/examples/sharpen.yaml deleted file mode 100644 index c9e950e30..000000000 --- a/src/site/_data/examples/sharpen.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Sharpen -description: >- - A Visual Studio extension that intelligently introduces new C# features into - your existing code base. -link: 'https://sharpen.rocks' -thumbnailurl: /img/examples/sharpen.png -tools: - - Hugo - - Git - - Netlify - - Disqus - diff --git a/src/site/_data/examples/silvestar-bistrovic.yaml b/src/site/_data/examples/silvestar-bistrovic.yaml deleted file mode 100644 index 1fdfe52ef..000000000 --- a/src/site/_data/examples/silvestar-bistrovic.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Silvestar Bistrović -description: SB - Silvestar's personal website -link: 'https://www.silvestarbistrovic.from.hr' -thumbnailurl: /img/examples/silvestarbistrovic.png -tools: - - Hexo - - Sass - - Gulp - - Critical CSS - - BitBucket - - Netlify - - Cloudinary - diff --git a/src/site/_data/examples/skcript.yaml b/src/site/_data/examples/skcript.yaml deleted file mode 100644 index a7e5b406f..000000000 --- a/src/site/_data/examples/skcript.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: Skcript -description: We build Artificial Intelligence powered products for today’s businesses. -link: 'https://www.skcript.com/' -thumbnailurl: /img/examples/skcript.jpg -tools: - - Middleman - - Gulp - - GitHub - - Sass - - Service Workers - - Amazon S3 - - Progressive Web App - - Google Analytics - diff --git a/src/site/_data/examples/smokeyfro.yaml b/src/site/_data/examples/smokeyfro.yaml deleted file mode 100644 index 7b038b68e..000000000 --- a/src/site/_data/examples/smokeyfro.yaml +++ /dev/null @@ -1,22 +0,0 @@ -title: SmokeyFro -description: >- - The personal portfolio of Chris Rault (aka SmokeyFro), a front-end designer - and occasional entrepreneur working remotely from South Africa. -link: 'https://smokeyfro.com' -thumbnailurl: /img/examples/smokeyfro.jpg -tools: - - Vue - - Gridsome - - Zeit Now - - GitHub - - Ghost - - Cockpit - - Tailwind CSS - - PurgeCSS - - PostCSS - - Markdown - - JustComments - - Sendy - - Matamo - - PurgeCSS - diff --git a/src/site/_data/examples/sphero.yaml b/src/site/_data/examples/sphero.yaml deleted file mode 100644 index 88344b45c..000000000 --- a/src/site/_data/examples/sphero.yaml +++ /dev/null @@ -1,18 +0,0 @@ - -title: Sphero -description: >- - Sphero fuses physical robotic toys, digital apps, and entertainment - experiences to unlock the true potential of play and inspire tomorrow’s - creators. -link: 'http://www.sphero.com/' -thumbnailurl: /img/examples/sphero.jpg -tools: - - Angular - - Jekyll - - Grunt - - Contentful - - Vero API - - Sass - - GitHub - - Netlify - diff --git a/src/site/_data/examples/stackery.yaml b/src/site/_data/examples/stackery.yaml deleted file mode 100644 index 154c32f62..000000000 --- a/src/site/_data/examples/stackery.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Stackery -description: >- - Build production-ready applications with Stackery's complete serverless - toolkit. -link: 'https://www.stackery.io/' -thumbnailurl: /img/examples/stackery.jpg -tools: - - GitHub - - Lambda - - Jekyll - - Amazon S3 - - jQuery - diff --git a/src/site/_data/examples/syntac-studio.yaml b/src/site/_data/examples/syntac-studio.yaml deleted file mode 100644 index c08857f37..000000000 --- a/src/site/_data/examples/syntac-studio.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: Syntac Studio -description: We Bring Miracles to your Website & Mobile App. -link: 'https://syntac.co/' -thumbnailurl: /img/examples/syntac.png -tools: - - Jekyll - - Sass - - Bootstrap - - GitHub - - Netlify - - Netlify CMS - diff --git a/src/site/_data/examples/takeshapeio.yaml b/src/site/_data/examples/takeshapeio.yaml deleted file mode 100644 index 948b9cf6e..000000000 --- a/src/site/_data/examples/takeshapeio.yaml +++ /dev/null @@ -1,11 +0,0 @@ - -title: TakeShape.io -description: Headless Cloud CMS + SSG -link: 'https://www.takeshape.io' -thumbnailurl: /img/examples/takeshape.png -tools: - - TakeShape.io - - AWS Amazon S3 - - Webpack - - Sass - diff --git a/src/site/_data/examples/tech-confessions.yaml b/src/site/_data/examples/tech-confessions.yaml deleted file mode 100644 index 1a21763f8..000000000 --- a/src/site/_data/examples/tech-confessions.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Tech Confessions -description: "A guilt-free place for us to confess our tech sins \U0001F64F" -link: 'https://confessions.tech' -thumbnailurl: /img/examples/techconfessions.jpg -tools: - - Gatsby.js - - Netlify - - Contentful - - Styled Components - - GraphQL - - GitHub - - Disqus - diff --git a/src/site/_data/examples/tim-benniks.yaml b/src/site/_data/examples/tim-benniks.yaml deleted file mode 100644 index 2f0d447e4..000000000 --- a/src/site/_data/examples/tim-benniks.yaml +++ /dev/null @@ -1,19 +0,0 @@ - -title: Tim Benniks -description: >- - The personal website of Tim Benniks. Director of front-end at Valtech and - conference speaker. -link: 'https://timbenniks.nl' -thumbnailurl: /img/examples/timbenniks.jpg -tools: - - Nuxt - - Vue - - Service Workers - - Cloudflare - - GitLab - - Netlify - - Netlify CMS - - TwicPics - - Sass - - Google Analytics - diff --git a/src/site/_data/examples/tntux-digital-agency.yaml b/src/site/_data/examples/tntux-digital-agency.yaml deleted file mode 100644 index c25cbb9f7..000000000 --- a/src/site/_data/examples/tntux-digital-agency.yaml +++ /dev/null @@ -1,13 +0,0 @@ - -title: TNTUX Digital Agency -description: We design and code websites. -link: 'https://www.tntux.com' -thumbnailurl: /img/examples/tntux.jpg -tools: - - Hugo - - GitHub - - Netlify - - NetlifyCMS - - Disqus - - Crisp - diff --git a/src/site/_data/examples/trinet.yaml b/src/site/_data/examples/trinet.yaml deleted file mode 100644 index 02e5bae91..000000000 --- a/src/site/_data/examples/trinet.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: TriNet -description: HR expertise tailored to thousands of small and medium size businesses -link: 'https://www.trinet.com' -thumbnailurl: /img/examples/trinet.jpg -tools: - - Netlify - - Vue.js - - Nuxt - - Contentstack - - GitLab - - Sass - - Vuetify - diff --git a/src/site/_data/examples/uicardio.yaml b/src/site/_data/examples/uicardio.yaml deleted file mode 100644 index 71f6c9aea..000000000 --- a/src/site/_data/examples/uicardio.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: UICardio -description: >- - A place where you can find beautifully designed and coded bootstrap templats, - UI Kits, Admin Dashboards. -link: 'https://uicard.io/' -thumbnailurl: /img/examples/uicardio.jpg -tools: - - Hugo - - Git - - Netlify - - Google Analytics - - Sass - diff --git a/src/site/_data/examples/universal-mind.yaml b/src/site/_data/examples/universal-mind.yaml deleted file mode 100644 index 401e12e01..000000000 --- a/src/site/_data/examples/universal-mind.yaml +++ /dev/null @@ -1,16 +0,0 @@ - -title: Universal Mind -description: >- - A digital solutions agency focused on services from innovation and design - through development -link: 'http://www.universalmind.com/' -thumbnailurl: /img/examples/universalmind.jpg -tools: - - Hexo - - Contentful - - Sass - - Amazon S3 - - Google Analytics - - Algolia - - Netlify - diff --git a/src/site/_data/examples/vas.yaml b/src/site/_data/examples/vas.yaml deleted file mode 100644 index 9280417e2..000000000 --- a/src/site/_data/examples/vas.yaml +++ /dev/null @@ -1,15 +0,0 @@ - -title: VAS -description: VAS - At the heart of your dairy -link: 'http://web.vas.com/' -thumbnailurl: /img/examples/vas.png -tools: - - Roots - - Stylus - - Coffeescript - - Pug - - Contentful - - GitHub - - Netlify - - Google Analytics - diff --git a/src/site/_data/examples/william-oliveira-blog.yaml b/src/site/_data/examples/william-oliveira-blog.yaml deleted file mode 100644 index 473e35896..000000000 --- a/src/site/_data/examples/william-oliveira-blog.yaml +++ /dev/null @@ -1,12 +0,0 @@ - -title: William Oliveira Blog -description: 'A blog about software development, career, communities and more.' -link: 'https://woliveiras.com.br/' -thumbnailurl: /img/examples/william-oliveira.png -tools: - - Jekyll - - GitHub Pages - - Cloudflare - - Disqus - - Sass - diff --git a/src/site/_data/examples/winkt.yaml b/src/site/_data/examples/winkt.yaml deleted file mode 100644 index d296642de..000000000 --- a/src/site/_data/examples/winkt.yaml +++ /dev/null @@ -1,14 +0,0 @@ - -title: Winkt -description: Entertainment site for tattoo inspiration -link: 'https://www.winkt.io' -thumbnailurl: /img/examples/winkt.jpg -tools: - - Next.js - - React - - Apollo - - GraphQL - - CSS Modules - - Express - - MongoDB - diff --git a/src/site/_data/github.js b/src/site/_data/github.js index dd52869b8..9db2517cc 100644 --- a/src/site/_data/github.js +++ b/src/site/_data/github.js @@ -24,6 +24,16 @@ Sample return data: } */ async function githubRequest(user, repo) { + let errorData = { + stars: "", + forks: "", + issues: "", + }; + + if(process.env.ELEVENTY_ENV == 'dev' || !process.env.GITHUB_READ_TOKEN) { + return errorData; + } + const query = ` query { repository(owner: "${user}", name: "${repo}") { @@ -55,16 +65,14 @@ async function githubRequest(user, repo) { fetchOptions }; - let errorData = { - stars: "", - forks: "", - issues: "", - }; let req; try { req = await CacheAsset(url, opts); if(req.errors && req.errors.length) { - console.log( "Error", req.errors ); + console.log( "GitHub Data Source Error from API", req.errors ); + if(req.errors.filter(e => e.type === "RATE_LIMITED").length > 0) { + throw new Error("Failing the build due to GitHub API rate limiting."); + } return errorData; } @@ -74,7 +82,8 @@ async function githubRequest(user, repo) { issues: req.data.repository.issues.totalCount, } } catch(e) { - console.log( "Error", e ); + console.log( "GitHub Data Source Error", e ); + return errorData; } } @@ -93,11 +102,13 @@ async function getReposFromMarkdown(glob) { let split = fullRepo.split("/"); let user = split[0]; let repo = split[1]; - if(!matter.data.repohost || matter.data.repohost === "github") - repos.push({ user, repo }); - } else { - // TODO maybe just log this in production? - // console.log( "GitHub full repo not found for", ssg ); + + if(!matter.data.repohost || matter.data.repohost === "github") { + if(matter.data.disabled) { + continue; + } + repos.push({ user, repo }); + } } } diff --git a/src/site/_data/glossary.yaml b/src/site/_data/glossary.yaml index cf05e0604..d747f4dd4 100644 --- a/src/site/_data/glossary.yaml +++ b/src/site/_data/glossary.yaml @@ -1,33 +1,127 @@ + +# Summary and term values are used in both the page meta tags and also the auto generated +# open graph and twitter card images. Those 2 fields should not exceed the following character counts: +# term: 35 +# summary: 250 + +- term: 'Atomic deploys' + id: 'atomic' + summary: 'Contained and complete deploys, which begin being served only when all of their assets and config are complete and totally in place.' + definition: 'The word "atomic" is used to describe deploys which include no interim state or maintenance window. With atomic deploys, all of the code, assets and configuration of a site are updated at once so that a website cannot be served in a partially updated state. + + + While deploying and updating sites via FTP was once popular this would result in some updated files being present on the server and ready to serve while others were still in transit. Modern platforms avoid this situation by providing atomic deploys where the new version of the site only begins receiving request when all assets and configurations are available. See also [Immutable deploys](/glossary/immutable).' + +- term: 'Immutable deploys' + id: 'immutable' + summary: 'Once created, an immutable deploy of a website becomes an artifact which will not change. It is a known version of the site which can be redeployed with ease.' + definition: 'While a "mutable" item can change (be mutated) over time, an "immutable" item cannot. Once created, an immutable deploy of a website becomes an artifact which will not change. Instead, deploys result in new versions or instances of the site, and traffic is routed to them accordingly. + + + When paired with [atomic deploys](/glossary/atomic), immutable builds make it possible for sites to enjoy abilities such as instant rollbacks and versioning, and help to ensure that the code and assets of a website can be maintained in a known state.' + + - term: 'CDN (Content Delivery Network)' id: 'cdn' - definition: 'A distributed network optimized for serving assets to users. By being geographically distributed, a CDN can provide redundancy adn also improve delovery performance as a result of servicing requests from the infrastructure closest to the user making the request.' + summary: 'A network optimized for serving assets to users. A CDN can provide redundancy and also improve delivery performance as a result of being geographically distributed.' + definition: 'A distributed network optimized for serving assets to users. By being geographically distributed, a CDN can provide redundancy and also improve delivery performance as a result of servicing requests from the infrastructure closest to the user making the request.' + +- term: 'DPR (Distributed Persistent Rendering)' + id: 'dpr' + summary: 'An approach to sharing the work of rendering page views and persisting them as part of the latest deploy. Some pages are rendered as part of a build, others are rendered when first requested via their URL' + definition: 'An approach to sharing the work of rendering page views and persisting them as part of the latest deploy. Some pages are rendered as part of a build, others are rendered on demand when first requested via their URL. In this way, build times can be kept manageable for even very large sites as nominated pages can have their rendering deferred until first requested. + + + Since the pages rendered on demand become part of the latest deployment, key Jamstack principles and advantages such as [Immutable deploys](/glossary/immutable) and [atomic deploys](/glossary/atomic) are preserved. + + + This approach, [discussed in this RFC](https://github.com/jamstack/jamstack.org/discussions/549), can also populate pages with content not available at the time of the site build. Such as content contributed by users. + + + Read more details about [DPR in this post on the Netlify blog](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/?utm_source=jamstackorg&utm_medium=define-dpr&utm_campaign=devex-ph)' + + - term: 'Edge Network' id: 'edge-network' - term: 'Serverless' + summary: 'Serverless functions are a means of providing a run-time environment for code without the need for knowledge of, or control over, the underlying environment.' + definition: '"Serverless" or "serverless functions" are a means of providing a run-time environment for code without the need for knowledge of, or control over, the underlying environment. [It allows event-driven logic on the server without setting up infrastructure](https://twitter.com/sarah_edo/status/1361692489384517634). + + + Common confusion over the term stems from the observation that "there is still a server somewhere", which is true, but no servers are present in the problem space of those working with serverless functions. In a similar way, a wireless router will have wires for power and connectivity, but no wires exist in the domain of the devices utilizing a wireless router to connect to the internet.' id: 'serverless' - term: 'Pre-render / Pre-generate' id: 'pre-render' - definition: 'To generate the markup which represents a view in advance of when it is required. This happens during a build rather than on-demand so that web servers do not need to perform this activity for each request recieved.' + summary: 'To generate the markup which represents a view of in advance of when it is required instead of just-in-time in response to requests.' + definition: 'To generate the markup which represents a view in advance of when it is required. This happens during a build rather than on-demand so that web servers do not need to perform this activity for each request received.' - term: 'Server render' id: 'server-render' + summary: 'To generate markup on the server rather than on the client. Server render usually refers to the process happening at request time, rather than in advance at build time.' definition: 'To generate markup on the server rather than on the client. Server render usually refers to the process happening at request time, rather than at build time. Some do use this term as a catch all for any rendering taking place on a server, and so disambiguation is often sensible.' - term: 'Static site generator' id: 'ssg' + summary: 'A tool which can transform content, data, and templates into files that can be deployed to a hosting environment as a ready-to-serve web site.' definition: "A tool which can be run as part of a build to transform content, data, and templates into files which can be deployed to a hosting environment as a ready-to-serve web site. Find a more detailed description in this article: What is a Static Site Generator? And 3 ways to find the best one." -- term: 'Headless Technology' +- term: 'Headless technology' id: 'headless-technology' + summary: 'Often referring to decoupled content management systems, headless tools have no responsibility for generating the view or presentation of content, but instead focus on the management of and access to content via APIs.' definition: 'The term "headless" refers to removing the dependency of knowing where data will be displayed and instead just holding the data to be used wherever the developer chooses. This is often used to describe a CMS where content can be entered, held, then where and how that content is displayed is decided separately.' - term: 'Client render' id: 'client-render' + summary: 'To generate the view of content, or update user interface elements, in the browser using JavaScript.' definition: 'To generate the view of content in the browser using JavaScript. This often involves transmitting data to the browser rather than markup which is ready for the browser to display, and then using JavaScript to transform that data into a view by modifying the DOM' - term: 'Hydration' id: 'hydration' +- term: 'Decoupling' + id: 'decoupling' + summary: 'Creating a distinct separation between systems or services. By decoupling the services needed to operate a site, each component part can be more easily swapped out, upgraded, and understood.' + definition: 'Decoupling is the process of creating a clean separation between systems or services. By decoupling the services needed to operate a site, each component part can become easier to reason about, can be independently swapped out or upgraded, and can be designated the purview of dedicated specialists either within an organization, or as a third party.' + +- term: 'Dynamic server' + id: 'dynamic-server' + +- term: 'API' + id: 'api' + summary: 'API is the acronym for Application Programming Interface. It defines interactions that allows two applications to talk to each other.' + definition: 'API is the acronym for Application Programming Interface. It defines interactions that allows two applications to talk to each other.' + +- term: 'API Economy' + id: 'api-economy' + summary: 'A term that has come to mean the depth and breadth of APIs that are available for developers to use in the current landscape.' + definition: 'A term that has come to mean the depth and breadth of APIs that are available for developers to use in the current landscape.' + +- term: 'Microservice' + id: 'microservice' + summary: 'A programming paradigm where many parts of a large application are broken down into various units that have smaller responsibility.' + definition: 'A programming paradigm where many parts of a large application are broken down into various units that have smaller responsibility. We can use Serverless or APIs for this, but it''s not that APIs or Serverless are necessarily Microservices, it''s that we have split apart what we want to access, and that modularity is what we call Microservices.' + +- term: 'Jamstack' + id: 'jamstack' + summary: Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.' + definition: 'Jamstack is an architectural approach that [decouples](/glossary/decoupling) the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability. Jamstack removes the need for business logic to dictate the web experience. + + + It enables a composable architecture for the web where custom logic and 3rd party services are consumed through [APIs](/glossary/api).' + +- term: 'Monolith' + id: 'monolith' + +- term: 'Monorepo' + id: 'monorepo' + +- term: 'Markup' + id: 'Markup' + +- term: 'Markdown' + id: 'Markdown' + + diff --git a/src/site/_data/meta.js b/src/site/_data/meta.js new file mode 100644 index 000000000..92780ca8b --- /dev/null +++ b/src/site/_data/meta.js @@ -0,0 +1,4 @@ +module.exports = { + lang: "en", + url: process.env.URL || "http://localhost:8080", +}; diff --git a/src/site/_data/netlify.js b/src/site/_data/netlify.js new file mode 100644 index 000000000..4243a2afe --- /dev/null +++ b/src/site/_data/netlify.js @@ -0,0 +1,14 @@ +const PROD_URL = "https://www.jamstack.org"; + +module.exports = { + /* + See also Netlify ENV variables: + process.env.CONTEXT === "production" || + process.env.CONTEXT === "deploy-preview" || + process.env.CONTEXT === "branch-deploy" + + via https://docs.netlify.com/configure-builds/environment-variables/ + + */ + deployUrl: process.env.CONTEXT === "production" ? PROD_URL : process.env.DEPLOY_PRIME_URL +}; diff --git a/src/site/_data/tools.js b/src/site/_data/tools.js deleted file mode 100644 index fdb903ecc..000000000 --- a/src/site/_data/tools.js +++ /dev/null @@ -1,20 +0,0 @@ -const yaml = require('js-yaml'); -const fs = require('fs'); - -// Collect a unique, sorted list of all the tools mentioned in all the examples -module.exports = () => { - - try { - const path = './src/site/_data/examples/'; - let tools = []; - fs.readdirSync(path).forEach(file => { - let example = yaml.safeLoad(fs.readFileSync(`${path}${file}`, 'utf8')); - tools = [...tools, ...example.tools]; - }); - let filteredTools = [...new Set(tools)]; - return filteredTools.sort(); - } catch (err) { - console.log(err); - } - -} diff --git a/src/site/_getting-started.njk b/src/site/_getting-started.njk index d794de44f..169145165 100644 --- a/src/site/_getting-started.njk +++ b/src/site/_getting-started.njk @@ -1,11 +1,12 @@ --- title: Getting started layout: layouts/base.njk +excludeFromSitemap: true ---

Getting started

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam temporibus in dignissimos rem aliquam at sunt voluptate nostrum voluptatem est, repudiandae veniam officia iste voluptatum eius possimus non atque praesentium?

diff --git a/src/site/_includes/banner.njk b/src/site/_includes/banner.njk index 65cfda2af..9ed3b47e3 100644 --- a/src/site/_includes/banner.njk +++ b/src/site/_includes/banner.njk @@ -1,3 +1,5 @@ - - Join us at Jamstack Conf Virtual, October 6-7. Register now! +{% if announcementbar.text %} + + {{ announcementbar.text }} {% if announcementbar.cta %}{{ announcementbar.cta }}{% endif %} +{% endif %} diff --git a/src/site/_includes/components/cards-meetup.njk b/src/site/_includes/components/cards-meetup.njk new file mode 100644 index 000000000..73f1ba51c --- /dev/null +++ b/src/site/_includes/components/cards-meetup.njk @@ -0,0 +1,10 @@ +{% macro card(name, url, theme ) %} + + +

+ + {{ name }} → +
+ + +{% endmacro %} diff --git a/src/site/_includes/components/cards.njk b/src/site/_includes/components/cards.njk index 4768a173d..c7dc2f0f2 100644 --- a/src/site/_includes/components/cards.njk +++ b/src/site/_includes/components/cards.njk @@ -1,16 +1,28 @@ {% macro repo(item, loopIndex, githubData) %} -
+
-
+ {%- if item.data.opensource === "Yes" or item.data.opensource === "YES" or item.data.opensource === "yes" -%} +
+ Open Source +
+ {% endif %} {{ item.data.title }}
- {%- if githubData[item.data.repo] %} + {%- if githubData[item.data.repo] and githubData[item.data.repo].stars !== "" and githubData[item.data.repo].forks !== "" and githubData[item.data.repo].issues !== "" %}
{%- if githubData[item.data.repo].stars !== "" %}
@@ -35,23 +47,36 @@ {%- endif %}
{%- endif %} +
{{ item.data.description | safe }}
-
Language
+ {%- if item.data.language %} +
Language:
{{ item.data.language }}
- {% if item.data.templates %} -
Templates
+ {%- endif %} + {%- if item.data.templates and item.data.templates.length > 0 %} +
Templates:
{{ item.data.templates | join(", ") }}
- {% endif %} -
License
-
{{ item.data.license }}
+ {%- endif %} + {%- if item.data.license and item.data.license.length > 0 %} +
License:
+
{{ item.data.license | join(", ") }}
+ {%- endif %} + {%- if item.data.typeofcms %} +
Type:
+
{{ item.data.typeofcms }}
+ {%- endif %} + {%- if item.data.supportedgenerators %} +
Supported Site Generators:
+
{{ item.data.supportedgenerators | join(", ") }}
+ {%- endif %}
{% if item.data.startertemplaterepo %} - + Deploy to Netlify diff --git a/src/site/_includes/components/color-theme-selector.njk b/src/site/_includes/components/color-theme-selector.njk new file mode 100644 index 000000000..c55dc4f7e --- /dev/null +++ b/src/site/_includes/components/color-theme-selector.njk @@ -0,0 +1,13 @@ +
+ +
\ No newline at end of file diff --git a/src/site/_includes/components/example-link.njk b/src/site/_includes/components/example-link.njk index bdd6d52b1..ca5fb6950 100644 --- a/src/site/_includes/components/example-link.njk +++ b/src/site/_includes/components/example-link.njk @@ -1,12 +1,6 @@ {% include "components/example-thumbnail.njk" %} -

{{ item.title }} →

-{% if item.date %} - -{% endif %} -

{{ item.link | domain}}

    {% for tool in item.tools | sort %}
  • {{ tool }}
    • {% endfor %} -
- + \ No newline at end of file diff --git a/src/site/_includes/components/example-thumbnail.njk b/src/site/_includes/components/example-thumbnail.njk index 279da56de..a237adffd 100644 --- a/src/site/_includes/components/example-thumbnail.njk +++ b/src/site/_includes/components/example-thumbnail.njk @@ -1,5 +1,8 @@ - - Screenshot of {{ item.title}} - - - + + Screenshot of {{ item.title}} + +

{{ item.title }} →

+{% if item.date %} + +{% endif %} +

{{ item.link | domain}}

\ No newline at end of file diff --git a/src/site/_includes/components/join-the-movement.njk b/src/site/_includes/components/join-the-movement.njk index f2369eff7..d2950df58 100644 --- a/src/site/_includes/components/join-the-movement.njk +++ b/src/site/_includes/components/join-the-movement.njk @@ -1,22 +1,22 @@ {% import "components/zinger-cta.njk" as zinger %}
-

Join the Movement

+

Join the Movement

The conversation about Jamstack is happening right now. Join thousands of developers on Twitter, in global meetup groups and in the official Jamstack community slack.

{{ zinger.cta( - "Join the Slack", - "https://jamstack.org/slack", - "bg-gradient-pink-orange", - "#logo-slack" + "Join the Discord", + "https://discord.gg/jamstack", + "bg-gradient-card-sunrise card-shadow hover:card-shadow-sunrise", + "#logo-discord" ) }} {{ zinger.cta( "Join Upcoming Events", "/community", - "bg-gradient-blue-green", + "bg-gradient-card-blue-seafoam card-shadow hover:card-shadow-blue-seafoam", "#gem-jamstack" ) }} diff --git a/src/site/_includes/components/meetup-link.njk b/src/site/_includes/components/meetup-link.njk index c69ce5899..5eb123664 100644 --- a/src/site/_includes/components/meetup-link.njk +++ b/src/site/_includes/components/meetup-link.njk @@ -1,6 +1,6 @@ -
  • -

    {{ item.group.name }}

    -

    {{ item.venue.name }}

    - starting at -

    {{ item.name }}

    -
    • + + Group: {{ item.group.name }} + Name: {{ item.name }} + Venue: {{ item.venue.name }} + Date/Time: starting at + \ No newline at end of file diff --git a/src/site/_includes/components/permalink-heading.njk b/src/site/_includes/components/permalink-heading.njk new file mode 100644 index 000000000..07d39ab55 --- /dev/null +++ b/src/site/_includes/components/permalink-heading.njk @@ -0,0 +1,22 @@ +{% macro render(level, text, headingClasses, id) %} + <{{level}} id="{% if id %}{{ id }}{% else %}{{ text | slugify }}{% endif %}" class="permalink-heading {{ headingClasses }}"> + {{ text }} + + Permalink + + + +{% endmacro %} diff --git a/src/site/_includes/components/section-heading.njk b/src/site/_includes/components/section-heading.njk index ce92cd169..25fa3a2ee 100644 --- a/src/site/_includes/components/section-heading.njk +++ b/src/site/_includes/components/section-heading.njk @@ -1,9 +1,9 @@ {% macro heading(title, icon, description ) %} -

    +

    {{ title }}

    -

    +

    {{ description | safe }}

    {% endmacro %} @@ -12,15 +12,18 @@ {% macro benefit(title, icon, description ) %} -
    -
    + + {% if icon %} + -
    -

    + {% endif %} +
    +

    {{ title }}

    -
    +
    {{ description | safe }}
    @@ -31,7 +34,7 @@ {% macro icons() %} -
    - -
    - {{ iconsMarkup() }} +
    +
    + {{ iconsMarkup() }} +
    +
    -
    - {{ iconsMarkup() }} -
    -
    {% endmacro %} {% macro iconsMarkup() %} - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endmacro %} {% macro icons() %} - {% endmacro %} \ No newline at end of file diff --git a/src/site/_includes/components/zinger-cta.njk b/src/site/_includes/components/zinger-cta.njk index 1abb3d74e..6b0fac2a4 100644 --- a/src/site/_includes/components/zinger-cta.njk +++ b/src/site/_includes/components/zinger-cta.njk @@ -1,8 +1,8 @@ {% macro cta(text, url, theme, icon ) %} - - -

    + + {% if icon %}{% endif %} +

    {{ text }}

    diff --git a/src/site/_includes/footer.njk b/src/site/_includes/footer.njk index 1232e9fa2..ca474f434 100644 --- a/src/site/_includes/footer.njk +++ b/src/site/_includes/footer.njk @@ -1,10 +1,16 @@
    -
    diff --git a/src/site/_includes/header.njk b/src/site/_includes/header.njk index 3330d43c9..e8202b172 100644 --- a/src/site/_includes/header.njk +++ b/src/site/_includes/header.njk @@ -1,52 +1,62 @@ - {% set linkList = [ - { "url": "/resources" , "text": "Learn" , "children": [ - { "url": "/what-is-jamstack/", "text": "What is the Jamstack?" }, - { "url": "/why-jamstack/", "text": "Why Jamstack?" }, - { "url": "/best-practices/", "text": "Jamstack best practices" }, - { "url": "/glossary/", "text": "Glossary" } - ]}, - { "url": "/generators/" , "text": "Site Generators" }, - { "url": "/headless-cms/" , "text": "Headless CMS" }, - { "url": "/community/" , "text": "Community" } + { "url": "/", "text": "Home" }, + { "url": "/glossary/", "text": "Glossary" }, + { "url": "/tv/", "text": "Jamstack TV" }, + { "url": "/generators/", "text": "Site Generators" }, + { "url": "/headless-cms/", "text": "Headless CMS" }, + { "url": "/survey/2022/", "text": "Community Survey", "children": [ + { "url": "/survey/2022/#whos-doing-the-building", "text": "Who’s doing the building?" }, + { "url": "/survey/2022/#what-is-the-jamstack-community-building", "text": "What is the Jamstack Community building?" }, + { "url": "/survey/2022/#how-are-we-building", "text": "How are we building?" }, + { "url": "/survey/2022/#emerging-trends-in-the-jamstack-community", "text": "Emerging Trends in the Jamstack Community" } + ] } ] %} -
    - - +
    + + + Jamstack
    - + data-force-state-closed="(max-width: 47.9375em)" + class="md:flex-grow"> + - - - + + + + - - + + Menu - {% include "navigation-links.njk" %} - Jamstack Conference +
    diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk index 9a08030dd..f270239b1 100644 --- a/src/site/_includes/layouts/base.njk +++ b/src/site/_includes/layouts/base.njk @@ -1,74 +1,101 @@ --- title: Jamstack | JavaScript, APIs, and Markup description: What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it's the best approach for building faster, more secure websites. +ogimage: "/img/og/default-og-image.png" --- + - + +{%- for url in stylesheets %} + +{%- endfor %} {{ title }} | Jamstack + + + + + + + +{%- for url in preconnect %} + +{%- endfor %} - + - + - + - + + + + {%- for url in javascripts %} + + {%- endfor %} - + -
    -
    +
    +
    {% include "header.njk" %}
    {% include "banner.njk" %} + {% include "components/color-theme-selector.njk" %} {{ content | safe }} -
    +
    {% include "footer.njk" %}
    + + + + + {%- for path in javascriptIncludes %} + {% include path %} + {%- endfor %} diff --git a/src/site/_includes/layouts/tool.njk b/src/site/_includes/layouts/tool.njk new file mode 100644 index 000000000..6b648dc57 --- /dev/null +++ b/src/site/_includes/layouts/tool.njk @@ -0,0 +1,100 @@ +--- +layout: layouts/base.njk +--- +
    +

    {{ title }}

    + + {%- if github[repo] and github[repo].stars !== "" and github[repo].forks !== "" and github[repo].issues !== "" %} +
    + {%- if github[repo].stars !== "" %} +
    + + {{ github[repo].stars }} + star{%- if github[repo].stars != 1 %}s{% endif %} +
    + {%- endif %} + {%- if github[repo].forks !== "" %} +
    + + {{ github[repo].forks }} + fork{%- if github[repo].forks != 1 %}s{% endif %} +
    + {%- endif %} + {%- if github[repo].issues !== "" %} +
    + + {{ github[repo].issues }} + issue{%- if github[repo].issues != 1 %}s{% endif %} +
    + {%- endif %} +
    + {%- endif %} + +
    + {%- if homepage %} +
    Home page
    +
    + + {{ homepage }} +
    + {%- endif %} + {%- if repo %} +
    Repository
    +
    + + {{ repo }} +
    + {%- endif %} + {%- if twitter %} +
    Twitter
    +
    + + @{{ twitter }} +
    + {%- endif %} +
    +
    + {%- if opensource === "Yes" or opensource === "YES" or opensource === "yes" %} +
    Open Source
    +
    Yes
    + {%- endif %} + {%- if language %} +
    Language:
    +
    {{ language }}
    + {%- endif %} + {%- if license and license.length > 0 %} +
    License:
    +
    {{ license | join(", ") }}
    + {%- endif %} + {%- if templates and templates.length > 0 %} +
    Templates:
    +
    {{ templates | join(", ") }}
    + {%- endif %} + {%- if typeofcms %} +
    Type:
    +
    {{ typeofcms }}
    + {%- endif %} + {%- if supportedgenerators %} +
    Supported Site Generators:
    +
    {{ supportedgenerators | join(", ") }}
    + {%- endif %} +
    + +
    + {% for img in images %} + {{ img.alt }} + {% endfor %} + {{ content | safe }} +
    + + + {% if startertemplaterepo %} + + + Deploy to Netlify + + {% endif %} +

    + Find more {% if page.url.includes("/generators/") %}static site generators{% else %}headless content management systems{% endif %}. +

    +
    diff --git a/src/site/_includes/navigation-links.njk b/src/site/_includes/navigation-links.njk index 8a787633b..05e53ab67 100644 --- a/src/site/_includes/navigation-links.njk +++ b/src/site/_includes/navigation-links.njk @@ -1,24 +1,24 @@ - \ No newline at end of file diff --git a/src/site/_includes/survey/2021/adoption.njk b/src/site/_includes/survey/2021/adoption.njk new file mode 100644 index 000000000..f37d36edb --- /dev/null +++ b/src/site/_includes/survey/2021/adoption.njk @@ -0,0 +1,283 @@ +

    The purpose behind developers’ Jamstack sites

    + +

    Jamstack sites are used for real business needs.

    + +

    We’re always interested in what the websites you’re building are for. Are you putting together a personal site to show off your work? Making an e-commerce play? Or building an enterprise application? Our 2021 categories were a little different from the ones we used in 2020, so the results aren’t precisely comparable. But they’re still fascinating. Since people work on many sites over the course of a year, we allowed respondents to pick more than one option.

    + +
    +

    What is the purpose of the sites you work on?

    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + +
    Years of ExperienceRemote
    Personal blog/portfolio37%
    B2B software35%
    E-commerce34%
    Consumer software33%
    Informational33%
    Lead capture/landing pages29%
    Internal tools29%
    Enterprise software25%
    Documentation16%
    Retail12%
    News/Entertainment12%
    Social media9%
    Other7%
    Games7%
    Streaming media6%
    Politics/activism5%
    +
    + +

    Personal websites dominate, just like last year. Whatever else you build, you’re always building your own website too!

    + +

    E-commerce is a huge driver, with a surprisingly strong showing by enterprise software at 25%.

    + +

    Developers are serving audiences of millions

    + +

    Though developers use Jamstack to build websites for audiences of all sizes, a third build the biggest websites in the world.

    + +

    We asked developers how many users the sites they build are intended to serve. Unsurprisingly, most devs work on websites for relatively small audiences. But one stat did energize us—32% of developers are working on sites that serve audiences of millions of users.

    + +
    +

    How many users are your sites intended to serve?

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + +
    Number of usersMost sitesSome sites
    Tens28%38%
    Hundred31%45%
    Thousands42%37%
    100 Thousands22%32%
    Millions12%19%
    +
    + +

    Breakout 3: Specialization differentiates developers who work at big websites from smaller ones.

    + +

    With 32% of developers saying they work on the very biggest websites, which have audiences in the millions of users, we wanted to see if this group differed substantially from the average developer.

    + +
    +

    Job titles of devs who work on very large websites

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020–2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + +
    Frequency of large sitesContent producerBack-endFront-endFull stack
    Never1.48%3.18%31.18%48.75%
    Sometimes2.24%4.08%29.25%45.98%
    Mostly2.58%4.37%34.92%39.88%
    +
    + +

    The trend we’ve noticed here is specialization. In other words, the more likely you are to work on a big website as a developer, the more likely you are to be a specialist. Small teams don’t have dedicated content producers and are more likely to have full-stack developers. But those who work on big sites are more likely to specialize in back-end or front-end development.

    + +

    We found another trend when we asked developers focused on large sites how important mobile devices are as a target. The more likely you are to work on large websites, the more likely you are to target mobile devices, and the more likely you are to consider them “very” important rather than just “somewhat” important.

    + +
    +

    How important are mobile devices for you as a target?

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + +
    How frequently do you build sites for audiences of millionsSomewhatVery
    Never68%25%
    Sometimes76%21%
    Mostly83%14%
    +
    + +

    Industries

    + +

    Every major industry uses Jamstack—not just tech-forward sectors.

    + +

    Every year, we ask developers what industry their company is in. Big companies often compete in more than one industry, so respondents can pick several industries.

    + +

    Similar to last year, the top 10 companies reflect some obvious categories but also some surprises.

    + +

    Advertising, marketing, media and publishing all seem like tech-forward industries you’d expect to find on the Jamstack. Education, finance, and healthcare, on the other hand, aren’t known for being early adopters.

    + +
    +

    Top 10 industries for Jamstack development

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    IndustryPercentage
    Advertising & Marketing18.4%
    Education15.9%
    Finance & Financial Services12%
    Media & Publishing11.8%
    Business Support & Logistics10.2%
    Healthcare & Pharmaceuticals9.5%
    Entertainment & Leisure9.4%
    Nonprofit8.7%
    Telecommunications & Networking8.3%
    Retail & Consumer Durables8.3%
    N/A (Student/Unemployed/etc.)7.7%
    Government6.9%
    Food & Beverages5.8%
    Real Estate5.3%
    Manufacturing5%
    Transportation & Delivery4.6%
    Utilities Energy and Extraction4.5%
    Construction Machinery and Homes4.4%
    Insurance4.4%
    Automotive4.1%
    Consumer electronics3.7%
    Agriculture3.3%
    Airlines & Aerospace (including Defense)2.9%
    +
    + +

    How Jamstack developers use server-side technologies

    + +

    Functions are becoming as ubiquitous as containers.

    + +

    Jamstack isn’t all client-side, so we asked about the popularity of some major server-side technologies as well. We were particularly interested in how much adoption serverless functions are seeing compared to other server-side technologies.

    + +

    Awareness was high for most techniques—over 75% in most cases—while usage was below half for each.

    + +
    +

    Server-side technologies by usage and awareness

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TechniquePercentage of respondents who use thisSatisfaction scoreMost aware
    1. Containers49%3.194%
    2. Microservices44%4.989%
    3. Orchestration27%2.489%
    4. Functions as a service46%8.787%
    5. Gateways42%6.480%
    6. Event Hubs14%2.368%
    +
    + +

    Containers like Kubernetes are popular, and container orchestration is only used by half as many developers.

    + +

    Functions as a service, like Netlify functions, are now almost as ubiquitous a technology as containers.

    + +

    We’ll keep an eye on how functions usage has grown when we ask this question next year.

    \ No newline at end of file diff --git a/src/site/_includes/survey/2021/choices.njk b/src/site/_includes/survey/2021/choices.njk new file mode 100644 index 000000000..2b5a7d6df --- /dev/null +++ b/src/site/_includes/survey/2021/choices.njk @@ -0,0 +1,983 @@ +

    Which content management systems were devs’ favorites in 2021?

    + +

    2021 was a breakout year for Sanity and Strapi.

    + +
    +

    CMS usage vs. satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    CMSUsageSatisfactionAwareness
    1. WordPress39.43%0.393.32%
    2. Contentful22.13%2.270.13%
    3. WordPress (Headless)21.57%1.186.67%
    4. Strapi17.89%2.964.28%
    5. Drupal13.36%0.483.95%
    6. Sanity12.72%3.254.13%
    7. Prismic12.31%2.053.79%
    8. Wix11.4%0.586.47%
    9. Ghost10.44%1.363.67%
    10. Webflow10.38%1.162.92%
    11. Squarespace10.22%0.574.67%
    12. Forestry9.32%1.548.39%
    13. Weebly5.77%0.661.35%
    14. Contentstack5.45%1.035.28%
    15. Agility CMS5.33%1.638.84%
    16. Builder5.13%1.231.03%
    +
    + +

    Content management systems: Can’t live with them, can’t live without them. We asked developers to tell us a lot about CMSes: Whether they were aware of them, whether they used them, and whether they wanted to use them more or less.

    + +

    We turned the ratio of “people who want to use it more” vs. “people who want to use it less” into something we call our “satisfaction score,” and you’ll see us use it a few times.

    + +

    A score of less than one in “satisfaction” means more people want to stop using a technology than want to continue using it.

    + +

    If you compare usage against satisfaction, you begin to see some clear takeaways:

    + +
      +
    • WordPress is a clear leader as a content management system, but it is not well-loved, with a score of 0.3, significantly less than 1. However, using WordPress as a headless content manager to a hosting provider like Netlify, while less common, is an arrangement with a much higher satisfaction score.
      • +
    • Several well-known content management systems have scores well below one.
      • +
    + + +
    +

    CMS changes in usage and satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    CMSUsage change (%)Satisfaction changeUsage
    1. WordPress-10.08%0.239.43%
    2. Contentful5.58%0.322.13%
    3. WordPress (Headless)7.26%0.221.57%
    4. Strapi102.15%-1.217.89%
    5. Drupal-10.09%0.213.36%
    6. Sanity48.08%-3.512.72%
    7. Prismic43.98%-0.312.31%
    8. Wix95.54%0.211.4%
    9. Ghost-2.06%-0.310.44%
    10. Webflow77.44%0.210.38%
    11. Squarespace-2.06%0.210.22%
    12. Forestry-3.82%-0.59.32%
    13. Weebly130.80%0.35.77%
    +
    + +

    We asked the same question last year about many of the same systems, allowing us this year to show a new visualization: How these things are changing over time.

    + +
      +
    • In the top right quadrant are systems that are both getting more popular and more loved at the same time. Good going, Weebly, on more than doubling usage!
      • +
    • In the bottom right, we see systems that became more popular but less well-loved. Sanity and Strapi, as we saw above, still have exceptionally high satisfaction scores, but as they’ve gained in popularity, we’ve seen a trend we’ve observed previously: Their user base no longer exclusively consists of super-fan early adopters, so their stratospheric scores from last year have dropped. However, their users are still some of the happiest around and they’ve seen huge jumps in usage.
      • +
    • In the top left are systems that are getting less popular but more loved. How do we explain this trend? Well, it’s the inverse of what’s happening to Sanity and Strapi. As people migrate away from older systems like Drupal and WordPress, their remaining users tend to be super-fans who are on average happier with them.
      • +
    • Finally in the bottom left is a quadrant of systems that are both becoming less popular and less loved at the same time.
      • +
    + +

    And Jamstack’s top programming languages are…

    + +

    TypeScript is gaining at JavaScript’s expense.

    + +

    JavaScript is unsurprisingly the primary language for the majority of developers at 55%. However, this is down since last year, from 63%.

    + +

    Where are those points going? To TypeScript, mostly, which 15% of developers now report as their primary language, not just one they use. Python also went up, from 5% to 7%.

    + +

    Separate from devs’ primary programming language, we asked about all languages. First, let’s look at their absolute usage and satisfaction:

    + +
    +

    Programming languages by usage and satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LanguageUsageSatisfactionAwareness
    1. JavaScript96.48%4.299.76%
    2. SQL67.1%1.698.18%
    3. TypeScript60.37%7.697.85%
    4. Shell (Bash)52.08%1.595.98%
    5. PHP46.42%0.597.41%
    6. Python42.41%2.898.03%
    7. Java25%0.696.9%
    8. C#21.5%1.497%
    9. Ruby16.78%195.22%
    10. C/C++16.17%0.996.92%
    11. Go15.23%3.494.37%
    12. Swift9.42%2.992.06%
    13. Rust8.91%4.091.89%
    14. Visual Basic7.84%0.591.37%
    15. Objective-C6.38%0.591.11%
    16. Perl5.22%0.591.73%
    17. Elixir4.83%2.477.97%
    +
    + +

    In absolute terms, JavaScript continues to dominate. Workhorse languages like SQL, Bash, and Python remain very heavily used, with TypeScript positioned as a newcomer to the big languages for web developers, with the happiest user base by some distance.

    + +

    Smaller, newer languages like Rust, Go, Swift, and Elixir are in a cluster of small but happy user communities.

    + +

    The cut-off line for satisfaction is 1.0, so below that line you see languages with unhappy users: PHP, Java, Perl, Objective-C, and all the C variants, except C#.

    + +

    But now let’s look at annual changes:

    + +
    +

    Programming languages by 1-year change in usage and satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    CMSUsage change (%)Satisfaction changeUsage
    1. JavaScript-0.7%-1.696.48%
    2. SQL4.2%0.467.1%
    3. TypeScript14.1%1.960.37%
    4. Shell (Bash)-2.7%0.152.08%
    5. PHP-0.2%0.246.42%
    6. Python7.4%0.542.41%
    7. Java2.2%0.325%
    8. C#4.6%021.5%
    9. Ruby-1.4%-0.116.78%
    10. C/C++6.3%0.216.17%
    11. Go1.2%0.915.23%
    12. Swift2.3%-0.59.42%
    13. Rust4.0%-3.58.91%
    14. Visual Basic3.6%0.37.84%
    15. Objective-C1.4%0.26.38%
    +
    + +

    TypeScript has seen a huge leap in usage (bigger than the change in people who call it their primary language). Its usage increased from 46% to 60%. Even more surprisingly, it experienced a jump in satisfaction—usually as something gets more popular, satisfaction falls, since the user base has expanded beyond the super-satisfied early adopters.

    + +

    In the top right, you can see languages that experienced an increase in usage and satisfaction. Python and Go are represented in this area, which is great news for them, as they are also big and popular.

    + +

    The languages with unhappy users (shown in the previous graph) are also mostly in this top right quadrant: Visual Basic, Java, SQL, and the C variants. Their users aren’t happy, but they’re happier than last year.

    + +

    In the top left are languages with increased satisfaction scores but decreased usage. You’d expect to see legacy languages with fans who are hanging on here, and so here we find PHP and Bash.

    + +

    In the bottom right are languages that experienced more usage, but are less popular. As expected, up-and-coming languages, like Swift and Rust, are represented here. Go is not here, which is a surprise. It managed to make its users happier even as it grew.

    + +

    Finally, the bottom left includes languages that lost both usage and popularity: Ruby is here, and so is JavaScript. Keep in mind that JavaScript is still far and away the most-used language, but its dominance is not so total as it was.

    + +

    Jamstack devs’ favorite frameworks revealed

    + +

    React is most popular, and Next.js is a big deal.

    + +

    We asked about an enormous number of frameworks—over 30 of them. Visualizing so many frameworks at once is a challenge, so we split them into two groups: Major frameworks, where the cut-off is at least 10% usage, and then minor frameworks, where usage is less than 10% (keep in mind, developers use multiple frameworks and could mark all the frameworks they used, so these percentages add up to well over 100%).

    +

    The major frameworks have a lot of surprises. React is the most frequent choice, as it has been for a long time, and its satisfaction score remains high. Vue has higher satisfaction but roughly half the usage.

    +

    Next.js has stellar satisfaction and is really big these days, and Nuxt.js is a little smaller. If you were looking for a safe pick for a new kitchen-sink framework based on this data, Next or Nuxt are where to go.

    +

    The big legacy frameworks, jQuery and Express, aren’t going anywhere. But with a satisfaction score below 1.0, jQuery users seem to wish it would.

    +

    Relative newcomers Svelte and 11ty are doing very well, with 11ty continuing a strong showing despite relatively low awareness. Early-ish adopters, check these out.

    +

    Both flavors of Angular have scores under 1.0, despite maintaining growth.

    + +
    +

    Major frameworks by usage and satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FrameworkPercentage of respondents who use thisSatisfaction scoreAwareness
    1. React68.1%4.398.4%
    2. Express51.3%1.991.5%
    3. jQuery50.8%0.297.5%
    4. Next.js43.2%7.093.9%
    5. Vue39.4%5.294.8%
    6. Gatsby36.9%1.991.7%
    7. Nuxt.js24.8%5.584.6%
    8. Angular 2+19.9%0.895.3%
    9. 11ty17.4%5.960.9%
    10. Jekyll16.5%0.580.8%
    11. Angular 1.x15.3%0.294.4%
    12. Hugo14.8%1.373.6%
    13. Svelte14.4%5.582%
    14. Vite14.2%9.659.3%
    15. Preact10.5%2.774.4%
    +
    + +

    Let’s look at the next group with under 10% usage. SvelteKit, with huge satisfaction and riding the coattails of Svelte over in the major frameworks group, looks likely to break out by next year.

    + +

    Bad news for those under 1.0: Dojo, Hexo, Ember, Meteor and Backbone, with small and unhappy user bases, might be frameworks you consider moving away from.

    + +
    +

    Minor frameworks by usage and satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FrameworkPercentage of respondents who use thisSatisfaction scoreAwareness
    1. Nest8.8%2.659.9%
    2. VuePress8.8%2.462.3%
    3. Gridsome8.5%1.654.2%
    4. SvelteKit8.1%6.058.1%
    5. Backbone7.8%0.376.5%
    6. Meteor6.5%0.569.5%
    7. Docusaurus6.2%1.950.5%
    8. Sapper6.1%1.245.1%
    9. Hapi5.6%1.352.7%
    10. Ember5.3%0.778.2%
    11. Stencil4.3%1.843.8%
    12. RedwoodJS4.3%1.848.9%
    13. Clojure3.6%1.568.1%
    14. Hexo3.4%0.843.2%
    15. Blitz.js3.3%2.050.3%
    16. Dojo2.9%0.951.5%
    17. Remix2.4%1.443.0%
    +
    + +

    We didn’t ask about every framework this year last year as well, but we did for a lot of them, allowing us to show an annual changes chart.

    + +
    +

    Frameworks by 1-year change in usage and satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    CMSUsage change (%)Satisfaction changeUsage
    1. React5.7%0.268.1%
    2. Express5.3%-0.451.3%
    3. jQuery-1.2%0.150.8%
    4. Next.js22.2%0.943.2%
    5. Vue1.9%-0.639.4%
    6. Gatsby-2.9%-2.536.9%
    7. Nuxt.js5.2%24.8%
    8. Angular 2+1.8%0.219.9%
    9. 11ty7.0%-7.217.4%
    10. Jekyll-2.4%-0.116.5%
    11. Angular 1.x-0.7%0.115.3%
    12. Hugo0.1%-0.414.8%
    13. Svelte3.4%-1.414.4%
    14. Preact2.9%-4.010.5%
    15. Nest4.5%-5.38.8%
    16. VuePress1.1%-2.58.8%
    +
    + +

    Here you can see a clear trend mentioned several times. The more your usage grows, the more your satisfaction falls, as your user base expands beyond early adopters. As we saw, 11ty broke into major territory for the first time this year. It has a great satisfaction score, but it’s much lower than last year. This is true, to some degree, for all the growing frameworks. VuePress, Preact, Nest and 11ty form a straight line going down and to the right: the more users they gained, the less happy they were.

    + +

    There are a few obvious exceptions. Next.js, despite growing enormously, also improved its satisfaction score.

    + +

    React managed to keep its score steady. No small feat when you’re the biggest framework by a long shot.

    + +

    Gatsby lost in both usage and satisfaction, an unfortunate outcome for that team.

    + +

    The top third-party services Jamstack developers use

    + +

    Jamstack devs are using third-party services and CMSes to make their lives easier.

    + +

    Jamstack is all about APIs, and many third-party APIs exist to make life easier for developers.

    + +

    The most popular third-party service is authentication, which is unsurprising—using an existing login reduces signup friction and the security challenges associated with maintaining your own authentication.

    + +

    CMS services are likewise very popular. Why build a rich text editor when one already exists?

    + +
    +

    Third party services by usage

    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    APIMost used
    User authentication55%
    Headless CMS53%
    Asset/Image management45%
    Headless database36%
    Headless e-commerce24%
    +
    diff --git a/src/site/_includes/survey/2021/conclusion.njk b/src/site/_includes/survey/2021/conclusion.njk new file mode 100644 index 000000000..38d5ed2b1 --- /dev/null +++ b/src/site/_includes/survey/2021/conclusion.njk @@ -0,0 +1,17 @@ +

    The world is changing, and the Jamstack—and the developers who use it—is changing with it. Based on what you’ve told us this year, we’ve observed shifts within our developer community. What these changes tell us paints a picture of a world in which more people are coming to our community as new developers, often as students; some of the largest web sites and apps are built on the Jamstack; and more and more industries are represented in Jamstack development.

    + +

    In other words, the Jamstack is touching all industries. We’ve gone mainstream as more developers learn about Jamstack. It’s the new way to build applications and websites, and it’s where the industry is going. Even more, it’s a thriving community that is growing fast as a wave of mainstream adoption continues, driven by fantastic scaling, high performance, and workflows and tooling that developers love.

    + +

    Thank you for being part of the Jamstack community again this year. Join us and thousands of developers virtually at Jamstack Conf 2021 to learn how Jamstack started, where it’s going, and what’s next for our community.

    + +

    Learn more:

    + + + +To review the in-depth methodology, review this document. \ No newline at end of file diff --git a/src/site/_includes/survey/2021/demographics.njk b/src/site/_includes/survey/2021/demographics.njk new file mode 100644 index 000000000..04f925d48 --- /dev/null +++ b/src/site/_includes/survey/2021/demographics.njk @@ -0,0 +1,164 @@ +

    Jobs

    + +

    Jamstack has become the way students learn to deploy.

    + +

    Between 2020 and 2021, we didn’t see much change in our mix of developer and non-developer respondents. That’s good news—it means we’re sampling the same population both years, and the changes we’re noticing in other parts of the survey are real changes, and not just statistical noise.

    + +
    +

    Developers and non-developers

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + +
    People20202021
    Developers79%81%
    Non-developers21%19%
    +
    + +

    This year, we asked respondents to specifically identify themselves as front-end, back-end, or full-stack developers. It’s not surprising that in a Jamstack survey, the vast majority of devs identified as front-end or full-stack.

    + +
    +

    Job title

    +

    Percentage of survey participants

    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Job TitlePercentage of Survey Participants
    Developer: Front-end45%
    Developer: Full Stack32%
    Management6%
    Other5%
    Developer: Back-end5%
    Designer4%
    Content Producer2%
    DevOps2%
    +
    + +

    Here’s where we saw a huge change. When we asked about people’s employment status, we saw a big shift in 2021—the portion of our respondents who are students nearly doubled. We’ll discuss the reasons for this change later on in the report, but needless to say, the effects of the pandemic are one factor responsible for the increase in students.

    + +
    +

    Employment Status

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Employment Status20202021
    Full-time69%60%
    Student9%16%
    Contractor11%10%
    Part-time4%5%
    Unemployed4%5%
    Between jobs4%3%
    Retired0%1%
    +
    + +

    We found more interesting data in job statistics in two other breakouts:

    + + \ No newline at end of file diff --git a/src/site/_includes/survey/2021/experience.njk b/src/site/_includes/survey/2021/experience.njk new file mode 100644 index 000000000..608c9ff47 --- /dev/null +++ b/src/site/_includes/survey/2021/experience.njk @@ -0,0 +1,356 @@ +

    A changing landscape of developer experience

    + +

    Newer developers are becoming much more geographically diverse.

    + +

    In both 2020 and 2021, we asked developers how many years of experience relevant to their job they have. We noticed a shift to lower levels of experience this year.

    +

    Our category of newest developers, those with less than one year of experience, jumped from just 4% to 13% of respondents, and those with 1-2 years rose from 13% to 19%. All categories of those with more experience fell. Because we saw such a surge of students in our breakdown by job title, this makes sense—students have less experience, after all.

    + +
    +

    Years of Experience, 2020 vs. 2021

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + +
    Years of Experience20202021
    < 14%13%
    1–213%19%
    3–420%18%
    5–615%12%
    7–89%7%
    9–1012%8%
    11–125%5%
    13–145%3%
    15+17%14%
    +
    + +

    To confirm this, we looked further into this question in breakout 1: experience levels of students vs. non-student.

    + +

    This year, we also asked developers where they were in the world, split into major geographical regions.

    + +

    The data was unsurprising—mostly Europe and North America—until we split up the region data by the number of years of experience of the developers. We excluded students when doing the geographical breakout.

    + +

    We noticed a clear trend: Newer developers are significantly more geographically diverse than more experienced developers. In the most experienced category, only 15% of developers don’t come from Europe or North America. But with the newest developers, that number more than triples to 48%. Our hope is that when people work from more diverse places, this fosters greater diversity of other kinds as well.

    + +
    +

    Years of Experience, by region

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Years of ExperienceAfricaAsia PacificCaribbeanCentral AmericaEastern AsiaEuropeMiddle EastNorth AmericaSouth AmericaSouthern Asia
    < 15.32%17.02%0.53%2.13%2.13%27.66%0%23.94%8.51%12.77%
    1–27.49%12.75%0.81%1.21%2.43%32.39%0.81%25.91%7.69%8.5%
    3–45.09%9.86%1.11%1.11%1.75%38.16%1.43%28.78%5.88%6.84%
    5–62.48%9.5%0.41%0.62%0.41%44.01%1.45%32.85%4.13%4.13%
    7–81.28%8.97%0.64%0.00%1.28%42.31%0.96%34.62%7.05%2.88%
    9–102.88%5.48%0.29%0.58%0.86%46.11%1.73%34.87%5.19%2.02%
    11–121.35%9.01%0%1.8%0.45%43.24%0.45%37.84%4.95%0.9%
    13–140.76%9.09%0%0.76%0%40.91%2.27%40.91%3.79%1.52%
    15+1.08%6.92%0.15%0.46%0.77%45.08%1.23%40.15%2.77%1.38%
    +
    + +

    Breakout 1: An uptick in students in 2021 led to a shift in experience levels.

    + +

    To confirm that our changes to experience levels were caused by an uptick in students, we broke out students from full-timers and then looked at their experience levels.

    +

    Sure enough: students were concentrated heavily into the first two years of experience.

    + +
    +

    Experience levels, full-timers vs. students

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + +
    Years of ExperienceFull-timeStudents
    < 16%41%
    1–214%38%
    3–419%15%
    5–614%3%
    7–89%1%
    9–1010%1%
    11–127%0%
    13–144%0%
    15+16%1%
    +
    + +

    This leads to the next question: Where did all these students come from? One potential explanation is that as Jamstack has continued to go mainstream, it’s become the default way of teaching new developers to launch their websites. In turn, that’s been increasing the percentage of students in the Jamstack community. We’ll dig more in future surveys to confirm this effect, but having a huge new population of new developers is a great sign for the community—the more, the merrier!

    + +

    How the pandemic affected working life

    + +

    Many developers shifted to remote work, and they don’t plan to return to the office.

    + +

    In 2020 and 2021, everyone’s life was affected by the COVID-19 pandemic in some way—for the purposes of our survey, we focused on how it changed developers’ working lives. What we found surprised us.

    + +
    +

    How did the pandemic change your working life?

    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + +
    Pandemic effect
    None of the above38%
    Kept job—went fully remote31%
    Kept job—went part-time remote14%
    Lost a job9%
    Took remote job that wouldn't have been feasible in-person9%
    Moved to take advantage of remote work8%
    Quit job to take care of family3%
    +
    + +

    The biggest change we noticed was that 31% of developers said their job, previously not remote, went fully remote and will stay remote foreseeably—even after the pandemic ends. This represents a huge shift in working patterns for web developers. We also discovered interesting correlations to developers’ level of experience and their job title, which you can investigate in our breakout.

    + +

    8% of developers said they moved to a new place to take advantage of remote work.

    + +

    The other notable change we observed was 9% of developers said they lost a job. In section 1 we noted that the number of people reporting themselves as full-time employed had fallen, and the number of students had risen. It’s possible that some developers who lost their jobs moved into education.

    + +

    Breakout 2: A third of developers went remote during the pandemic, and don’t plan on coming back.

    + +

    As mentioned, a whopping 31% of developers said they went remote in the pandemic, and plan to stay remote after the pandemic. We wanted to know more about those people.

    +

    First, we split up the respondents by experience. There was a notable effect here: The newest developers were much less likely to have “kept their job and gone remote” because they were more likely to have lost their job in the pandemic.

    +

    Twelve percent of those with less than 1 year of experience reported losing a job to the pandemic, and 10% of those with less than 2 years did too.

    +

    Excluding those with less than 2 years of experience, the percentage of developers who’d gone remote was even higher—40%! But that number didn’t change with further experience.

    + +
    +

    Developers who went remote during the pandemic, by years of experience

    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + +
    Years of ExperienceRemote
    < 117%
    1–232%
    3–440%
    5–640%
    7–840%
    9–1041%
    11–1242%
    13–1441%
    15+39%
    +
    + +

    Excluding those first two categories, we proceeded to look at job titles, and we noticed some substantial differences. Nearly 50% of DevOps respondents reported going full-time remote, while only 36% of managers said they did.

    + +

    Front-end developers were more likely to go remote than full-stack developers, even though the data tells us that full-stack devs report having more experience on average than front-end ones.

    + +

    We wanted to know why that happened. Initially, we thought it might be that the most experienced people were most likely to choose to work remotely. But, apart from full-stack and front-end not matching that pattern, the data indicated that management has even more experience, but is less likely to go remote.

    + +

    Our conclusion is that we’re not sure what causes this. Could it be related to the number of meetings you have? Which jobs are harder to hire for? We will have to investigate further.

    + +
    +

    Who went remote?

    +

    Percentage of workers by job title who went full-time remote, excluding those with less than 2 years’ experience

    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + +
    Years of ExperienceRemote
    DevOps50%
    Back-end45%
    Front-end43%
    Full stack39%
    Designer37%
    Management36%
    Content29%
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2021/workflows.njk b/src/site/_includes/survey/2021/workflows.njk new file mode 100644 index 000000000..fab1d1c79 --- /dev/null +++ b/src/site/_includes/survey/2021/workflows.njk @@ -0,0 +1,220 @@ +

    Devices you target

    + +

    The desktop still reigns

    + +

    Industry thought leaders have been beating the “mobile-first” drum for years now, but is the industry actually listening? We asked how important it is for the sites devs build to work on four main categories of devices.

    + +
    +

    Most targeted devices: How important are these device types for you?

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + +
    TargetVerySomewhat
    Desktop browsers84%14%
    Phones71%24%
    Tablets41%50%
    Watches / IoT7%18%
    +
    + +

    Despite the talk of “mobile-first,” desktop remains Jamstack devs’ most-targeted category, although phones are close behind. The gap between the two has narrowed very slightly since 2020.

    +

    Another interesting finding is how priorities shift. Desktops are very important for nearly everybody, but when it comes to tablets, more than half of developers who pay attention to them as a target think they’re only somewhat important.

    +

    In our breakout on people who build large websites, we found an interesting correlation to the importance of mobile devices as a target.

    + +

    Priorities

    + +

    Jamstack developers are taking security more seriously

    + +

    All developers will agree that it’s important that your website is fast, secure, and has high uptime. But a different question to ask is: Which of these is the most important quality?

    + +
    +

    What is the most important when building a website?

    +
    +
    + +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + +
    PriorityScore
    Performance4.54
    Uptime3.87
    Security3.61
    Dev Speed3.38
    Compliance3.08
    Avoid lock-in2.56
    +
    + +

    Last year, we noted that speed of development was a higher priority than security. This year, in a statistically significant shift, those factors were reversed. Jamstack developers are taking security more seriously than they did a year ago.

    + +

    Performance and uptime continue to be the top priorities for developers.

    + +

    Which design tool stands out for Jamstack designers?

    + +

    There’s no contest. Jamstack designers love Figma.

    + +

    A substantial population of designers responded to our survey, so in addition to asking about development tools, we also ask about design tools. The story in 2021 is the same as last year: Everybody uses Figma, and everybody loves it.

    + +

    60% of respondents use Figma. Its satisfaction score is 8.8, meaning 8 times more people want to increase their usage than want to stop using it.

    + +

    It’s getting kind of embarrassing for everyone clustered over there in the bottom left…

    + +
    +

    Design tools: usage vs. satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Design toolPercentage of respondents who use thisSatisfaction scoreAwareness
    1. Figma62.3%8.890.49%
    2. Framer10.82%2.252.67%
    3. Adobe XD36.27%1.488.07%
    4. Balsamiq14.46%1.058.27%
    5. Sketch32.59%1.081.69%
    6. Zeplin20.11%0.955.92%
    7. InVision24.90%0.867.19%
    +
    + +

    Developers’ favorite code editors

    + +

    An ambiguous question unintentionally gave us valuable insights. Jamstack developers love CMS editors.

    + +

    This is the first year we’ve asked about the kinds of editors developers use. We were curious about the growth in popularity of web-based code editors, including products like Glitch and GitHub’s Codespace.

    + +

    However, we mistakenly presented an ambiguous question. A “web-based editor” can also mean a CMS editor, like WordPress. And since CMSes are very popular, developers answering that question dominated the results: The more you use a CMS, the more likely you are to answer that you used a web-based editor.

    + +

    But this in itself is a fun result! The popularity of CMSes means more people use web-based editors than traditional editors like Vim.

    + +

    However, integrated development environments (IDEs) are by far the most popular option and have the highest levels of satisfaction by a long shot.

    + +
    +

    Types of editors: usage vs. satisfaction

    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2021
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    EditorPercentage of respondents who use thisSatisfaction scoreAwareness
    1. IDEs95.89%15.699.3%
    2. Web-based47.47%2.697.28%
    3. Vim etc.42.32%1.496.98%
    4. Plain text25.66%0.794.12%
    +
    diff --git a/src/site/_includes/survey/2022/how-are-we-building/cms-usage-vs-satisfaction.njk b/src/site/_includes/survey/2022/how-are-we-building/cms-usage-vs-satisfaction.njk new file mode 100644 index 000000000..794a81414 --- /dev/null +++ b/src/site/_includes/survey/2022/how-are-we-building/cms-usage-vs-satisfaction.njk @@ -0,0 +1,125 @@ +
    +
    + + {{ permalinkHeading.render('h4', "Content Management Systems") }} +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    CMSUsed on "some" or "many" projectsSatisfaction score
    1. WordPress37%0.5
    2. Notion26%2.3
    3. WordPress (Headless)22%1.0
    4. Contentful19%1.4
    5. Strapi18%2.0
    6. Sanity16%3.0
    7. Drupal14%0.6
    8. Wix13%0.6
    9. Webflow12%1.0
    10. Prismic11%1.8
    11. Squarespace11%0.6
    12. Ghost10%1.5
    13. Storyblok9%2.0
    14. Builder8%1.0
    15. Forestry8%1.0
    16. Agility CMS7%0.8
    17. Weebly7%0.8
    18. ButterCMS6%1.0
    19. Contentstack6%1.0
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/how-are-we-building/frameworks-usage-vs-satisfaction-changes.njk b/src/site/_includes/survey/2022/how-are-we-building/frameworks-usage-vs-satisfaction-changes.njk new file mode 100644 index 000000000..fb14f6a99 --- /dev/null +++ b/src/site/_includes/survey/2022/how-are-we-building/frameworks-usage-vs-satisfaction-changes.njk @@ -0,0 +1,191 @@ +
    +
    + {{ permalinkHeading.render('h4', 'Frameworks by 1-year change in usage and satisfaction') }} +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2021—2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FrameworkUsage change (%)Satisfaction changeUsage
    1. React2.9%-1.471%
    2. Express-2.3%-0.249%
    3. Next.js3.8%-2.847%
    4. jQuery-6.8%0.144%
    5. Vue-6.4%-2.133%
    6. Vite17.8%0.132%
    7. Gatsby-8.9%-1.028%
    8. Nuxt.js-2.8%-2.922%
    9. Angular 2+0.1%-0.220%
    10. 11ty1.6%-2.219%
    11. Svelte4.6%-0.219%
    12. SvelteKit6.9%-2.015%
    13. Jekyll-2.5%-0.114%
    14. Angular 1.x-1.3%0.114%
    15. Hugo-1.8%-0.113%
    16. Preact1.5%-0.712%
    17. Remix7.7%0.910%
    18. Nest0.2%-0.69%
    19. VuePress-0.8%-0.78%
    20. Gridsome-1.5%-0.97%
    21. Docusaurus0.8%0.67%
    22. Hapi0.4%-0.36%
    23. Sapper-1.1%-0.55%
    24. Stencil0.7%-0.35%
    25. RedwoodJS-0.3%1.24%
    26. Blitz.js0.7%1.04%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/how-are-we-building/frameworks-usage-vs-satisfaction.njk b/src/site/_includes/survey/2022/how-are-we-building/frameworks-usage-vs-satisfaction.njk new file mode 100644 index 000000000..392823a9b --- /dev/null +++ b/src/site/_includes/survey/2022/how-are-we-building/frameworks-usage-vs-satisfaction.njk @@ -0,0 +1,179 @@ +
    +
    + {{ permalinkHeading.render('h4', 'Frameworks by usage and satisfaction') }} +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LanguageUsed on "some" or "many" projectsSatisfaction score
    1. React71%2.9
    2. Express49%1.7
    3. Next.js47%4.2
    4. jQuery44%0.3
    5. Vue33%3.1
    6. Vite32%9.7
    7. Gatsby28%0.9
    8. Nuxt.js22%2.7
    9. Angular 2+20%0.7
    10. 11ty19%3.8
    11. Svelte19%5.3
    12. SvelteKit15%4.0
    13. Jekyll14%0.4
    14. Angular 1.x14%0.3
    15. Hugo13%1.2
    16. Preact12%2.0
    17. Astro11%4.5
    18. Remix10%2.3
    19. Nest9%2.0
    20. VuePress8%1.7
    21. Gridsome7%0.8
    22. Docusaurus7%2.5
    23. Hapi6%1.0
    24. SolidJS6%2.0
    25. Sapper5%0.7
    26. Stencil5%1.5
    27. Quasar4%1.0
    28. RedwoodJS4%3.0
    29. Blitz.js4%3.0
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/how-are-we-building/index.njk b/src/site/_includes/survey/2022/how-are-we-building/index.njk new file mode 100644 index 000000000..290136c48 --- /dev/null +++ b/src/site/_includes/survey/2022/how-are-we-building/index.njk @@ -0,0 +1,268 @@ +
    + {{ + permalinkHeading.render( + "h2", + "How are we building?", + "", + "how-are-we-building" + ) + }} + +

    + Our largest set of questions revolve around technical choices. It’s easy for + this kind of data to turn into a popularity contest, so we should be clear: + the most popular choice is not always the best choice for you. As we’ll see + shortly, your use case matters much more than total adoption of a + technology. However, within the bounds of a use case, popularity can help. + Open source technology benefits from more contributors: bugs are fixed + faster, documentation is better, rough edges are smoothed away more quickly, + and there will be more plugins and third-party integrations. +

    + + {{ + permalinkHeading.render( + "h3", + "A note on how to read Usage + Satisfaction graphs" + ) + }} + +

    + This section contains a number of graphs like the one below. On the + horizontal axis, we measure the usage of a technology, as measured by the + number of people who say they have used that technology in the last year on + “some projects” or “many projects”. We do not count people who say they use + a technology “rarely”, so we believe our “some+many” number represents real, + regular usage. +

    + +

    + At the same time as we ask people how often they use a technology, we ask + them whether they would like to use it more or less in the coming year. We + take the ratio of the “want to use it more” and the “want to use it less” + numbers to create our vertical axis, which we call the “Satisfaction score”. + A score of 1.0 or more means the technology’s users are on balance + enthusiastic about it, while under 1.0 it means they are not. In the three + years of our survey, a satisfaction score under 1.0 has been strongly (but + not perfectly) predictive of a loss in usage the following year, which high + satisfaction scores correlate well to growth in share. +

    + + {{ permalinkHeading.render("h3", "Content Management Systems (CMS)") }} + +

    + The decoupled nature of frontend and backend code in the Jamstack ecosystem + means that CMS are a big component of many of the websites we build. As + anyone who’s built a site with one knows, once a CMS has become embedded + into your company’s culture and workflows it can be hard to get it out + again, so this is a critical choice for many people. +

    + +
      +
    • + The overall leader in the CMS space remains WordPress, as it has been for + many years. However, with a satisfaction score of just 0.5, unenthusiastic + users of WordPress outnumber enthusiastic ones 2-to-1, and WordPress has + lost usage share over the course of our surveys. +
      • +
    • + WordPress used as an API (“headless” mode) has more enthusiastic users + than WordPress in traditional mode, and a substantial 22% share, but this + share has been growing only slowly. +
      • +
    • + Notion is something of an outlier in this data: certainly some people are + using it via its API to power websites, but we believe many people who + answered yes to this option are using it for internal content. We intend + to run a small follow-up survey to confirm this. +
      • +
    • + Given high satisfaction scores, Sanity and Strapi were our choices in last + year’s survey to be breakout contenders in this year's, and they both grew + share, though not as much as we had expected. Contentful lost usage share + in this year’s survey compared to last year’s. +
      • +
    • + Of the smaller CMS systems, Storyblok is notable for high satisfaction. + This is the first year we’ve tracked it and it came in at 8% share, so + we’ll be looking for it to grow. +
      • +
    + + {% include './cms-usage-vs-satisfaction.njk' %} + + {{ permalinkHeading.render("h3", "Programming languages") }} + +

    + There are not a lot of surprises in this year’s programming language data if + you have seen our previous surveys. One note: when we show programming + languages, we should be clear that this data is about their popularity + within the Jamstack community; in more general computing surveys Java is a + much more popular choice. +

    + +
      +
    • + JavaScript remains the near-universal choice, with 96% of respondents + saying they have used it in some or many projects in the last year. +
      • +
    • + TypeScript continues rapid growth, hitting 67% usage this year, overtaking + SQL as the second-most used language. +
      • +
    • + When asked about their primary programming language, 53% + of people still say JavaScript, a number that has declined in all 3 years + of our survey, while 21% say TypeScript is their primary language, more + than doubling its usage as a primary language. The continuing migration + from JavaScript to TypeScript is a trend we are following closely. +
      • +
    + + {% include './programming-language-usage-vs-satisfaction.njk' %} + + {{ permalinkHeading.render("h3", "Web frameworks") }} + +

    + Always our largest section, we tracked 29 frameworks this year, with a few + that we have tracked in previous years falling out of the survey (our + cut-off for frameworks that are not growing quickly is 4% share). +

    + + {{ permalinkHeading.render("h4", "React and Next.js") }} + +

    + The most obvious story in our framework data is the continued growth of + React. With high satisfaction scores last year, we predicted it would + continue to grow and that was borne out this year, hitting a new record of + 71% share, the highest of any framework we’ve tracked in all 3 years. While + there are many options for building a reactive web app, the enormous + ecosystem around React continues to make it an easy choice for many. +

    + +

    + Riding the tails of React’s popularity is Next.js, a full featured “kitchen + sink” framework based on React. This year 47%, or nearly 1 in 2 developers + say they used Next.js in some or many projects, and with a satisfaction + score over 4.0 we expect to see it continue to grow. +

    + + {{ permalinkHeading.render("h4", "Vite") }} + +

    + Although we have been tracking it in our frameworks data, Vite is more of a + bundler, competing with choices such as Webpack and Babel. It has been + adopted as the default bundler for several other frameworks including Nuxt + and SvelteKit, contributing to its high share, but its stellar satisfaction + score is all its own. +

    + + {% include './frameworks-usage-vs-satisfaction.njk' %} + + {{ permalinkHeading.render("h4", "Zooming in on smaller frameworks") }} + +

    + Looking at the crowded bottom-left corner of the overall frameworks graph + can hide some detail, so we take a closer look at frameworks at 10% share or + less. In here are some older frameworks such as Hapi and Gridsome, but also + some new entrants. +

    + +
      +
    • + Remix jumped from 2% share in last year’s survey to 10% this year, and is + an exciting new contender in the space. At the end of October Remix + announced they have been + acquired by Shopify + so it will be interesting to see what effect that has on their trajectory. +
      • +
    • + Docusaurus does one thing very well and has been rewarded with + consistently high satisfaction scores and modest growth. +
      • +
    • SolidJS, a new entry to our survey, clocks in at 6% share.
      • +
    + + {% include './smaller-frameworks-usage-vs-satisfaction.njk' %} + + {{ permalinkHeading.render("h4", "Tracking usage and satisfaction changes") }} + +

    + We have found it instructive to look at how usage and satisfaction scores in + our survey have changed from year to year. Keep in mind that these are + changes; Next.js and Nuxt.js for example both have high + satisfaction scores overall, just lower than last year. We split this graph + into four quadrants. +

    + + {{ permalinkHeading.render("h5", "Bottom-right: regular growth") }} + +

    + A pattern we have seen every year is that frameworks that grow share usually + lose satisfaction score while doing so. This makes sense: as more people + adopt a technology, there are fewer enthusiastic early adopters, and more + people using the framework for use cases that are outside of its sweet spot. +

    + +
      +
    • + React and Next.js both show growth in share and loss in satisfaction, as + expected. +
      • +
    • + Svelte and SvelteKit, another component-framework pair, did the same. +
      • +
    • + 11ty was the only purely static site generator (SSG) in our survey to show + growth in usage share. For this reason we think 11ty is now the clear + choice if a static site is your use case. +
      • +
    + + {{ permalinkHeading.render("h5", "Top right: early adoption") }} + +

    + Technologies in the early phases of adoption tend to see rapid growth and + users who get happier year on year. +

    + +
      +
    • + As mentioned, Vite is seeing huge growth – it more than doubled its usage + share from last year, while maintaining its high satisfaction score. +
      • +
    • + Remix, already mentioned, jumped from 2% to 10% share and increased + satisfaction. +
      • +
    + + {{ permalinkHeading.render("h5", "Top left: core users") }} + +

    + Occupying a quadrant almost by itself is jQuery. Anyone still using jQuery + in 2022 is heavily invested in doing so and it shows. +

    + + {{ permalinkHeading.render("h5", "Bottom left: danger zone") }} + +

    + Losing usage share and satisfaction score at the same time is bad news for + project maintainers. +

    + +
      +
    • + Gatsby has lost share in all 3 years of our survey, and its 0.9 + satisfaction score indicates this trend is likely to continue. +
      • +
    • + Vue and Nuxt.js are new to this quadrant; in last year’s survey they were + still growing. The continued growth of React and Next.js makes it + difficult for similar alternatives to compete. +
      • +
    + + {% include './frameworks-usage-vs-satisfaction-changes.njk' %} +
    diff --git a/src/site/_includes/survey/2022/how-are-we-building/programming-language-usage-vs-satisfaction.njk b/src/site/_includes/survey/2022/how-are-we-building/programming-language-usage-vs-satisfaction.njk new file mode 100644 index 000000000..dfc28aeba --- /dev/null +++ b/src/site/_includes/survey/2022/how-are-we-building/programming-language-usage-vs-satisfaction.njk @@ -0,0 +1,113 @@ +
    +
    + {{ permalinkHeading.render('h4', 'Programming languages by usage and satisfaction') }} +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LanguageUsed on "some" or "many" projectsSatisfaction score
    1. JavaScript96%3.0
    2. TypeScript67%7.4
    3. SQL64%1.8
    4. Shell (Bash)53%1.5
    5. Python42%2.2
    6. PHP42%0.6
    7. Java26%0.6
    8. C#21%1.1
    9. Ruby18%1.0
    10. C/C++17%1.1
    11. Go16%2.2
    12. Rust12%3.0
    13. Visual Basic10%0.7
    14. Swift9%2.0
    15. Objective-C6%0.5
    16. Perl6%0.5
    17. Elixir6%1.5
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/how-are-we-building/smaller-frameworks-usage-vs-satisfaction.njk b/src/site/_includes/survey/2022/how-are-we-building/smaller-frameworks-usage-vs-satisfaction.njk new file mode 100644 index 000000000..8407a6390 --- /dev/null +++ b/src/site/_includes/survey/2022/how-are-we-building/smaller-frameworks-usage-vs-satisfaction.njk @@ -0,0 +1,94 @@ +
    +
    + {{ permalinkHeading.render('h4', 'Smaller frameworks by usage and satisfaction') }} +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FrameworkUsed on "some" or "many" projectsSatisfaction score
    1. Remix10%2.3
    2. Nest9%2.0
    3. VuePress8%1.7
    4. Gridsome7%0.8
    5. Docusaurus7%2.5
    6. Hapi6%1.0
    7. SolidJS6%2.0
    8. Sapper5%0.7
    9. Stencil5%1.5
    10. Quasar4%1.0
    11. RedwoodJS4%3.0
    12. Blitz.js4%3.0
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/what-are-we-building/audience-sizes.njk b/src/site/_includes/survey/2022/what-are-we-building/audience-sizes.njk new file mode 100644 index 000000000..0321629d1 --- /dev/null +++ b/src/site/_includes/survey/2022/what-are-we-building/audience-sizes.njk @@ -0,0 +1,62 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "How many users are the websites you're building meant to serve?") }} +

    Percentage of respondents

    +
    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    202020212022
    10s of users63%65%64%
    100s of users78%77%74%
    1000s of users83%79%75%
    100-000s of users58%55%55%
    1-000-000s of users32%32%36%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/what-are-we-building/index.njk b/src/site/_includes/survey/2022/what-are-we-building/index.njk new file mode 100644 index 000000000..ea36e74f3 --- /dev/null +++ b/src/site/_includes/survey/2022/what-are-we-building/index.njk @@ -0,0 +1,84 @@ +
    + {{ + permalinkHeading.render( + "h2", + "What is the Jamstack Community building?", + "", + "what-is-the-jamstack-community-building" + ) + }} + +

    Moving on from demographics, let’s look at what we’re building in 2022.

    + + {{ permalinkHeading.render("h3", "Purposes of websites built") }} + +

    + Most people build lots of sites in a year, so we allowed people to give + multiple answers to our question about what the sites they built were for. + The results were similar to last year: the single most common answer was + personal websites (such as blogs or resumes). Consumer software, B2B + software and e-commerce remained major areas of focus. +

    + + {% include './what-is-the-purpose-of-the-sites-you-built-in-2022.njk' %} + + {{ permalinkHeading.render("h3", "Application types") }} + +

    + Another question we repeated from last year was asking people what kinds of + websites they built. As was the case in 2021, Single Page Apps (SPAs) were + popular, but a majority were various levels of static websites – either + fully or mostly static. This is unsurprising, since the core of Jamstack has + always been progressive enhancement of static websites. +

    + +

    + Fully dynamic websites remain popular for some applications, and this time + we asked about a new category: edge-dynamic sites, which we’re defining here + as sites that are fully dynamic, and render all their content at the edge + (i.e. using serverless functions or edge functions). This is a pretty new + category and so it was also the smallest, but nearly half (47%) said they’d + built at least one website of this kind this year. This tracks the + growth in serverless + we saw in later questions. +

    + + {% include './types-of-sites-built-last-12-months.njk' %} + + {{ permalinkHeading.render("h3", "Target devices") }} + +

    + Another standard question we ask every year is about what devices your work + targets. We’ve used this previously to point out that while “mobile-first” + has been the mantra of the industry for a long time, desktop devices still + have a small edge in terms of being the most important target for our work, + with tablets third. +

    + +

    + However, over the last 3 years our “everything else” category, called + “device-specific browsers” (we suggested things like Internet of Things + devices, or smart watches) has been steadily growing and now fully one-third + of people say this somewhat poorly defined fourth category is at least + somewhat important. This was a surprise! We’ll be conducting follow-up + surveys to discover what exactly the folks who call these devices important + were talking about. +

    + + {% include './target-devices-by-type.njk' %} + + {{ permalinkHeading.render("h3", "Audience sizes") }} + +

    + Our final question about the goals of our websites in 2022 was about + audience sizes: how big is the audience your website serves? This is another + question where we have data from all 3 years of the survey and are able to + see a trend, although not much has changed. The most common type of website + remains one built for a relatively small audience – hundreds, or a few + thousand users. But more than a third of people say they’ve built websites + this year intended for audiences of millions, and this category grew in + 2022. +

    + + {% include './audience-sizes.njk' %} +
    diff --git a/src/site/_includes/survey/2022/what-are-we-building/target-devices-by-type.njk b/src/site/_includes/survey/2022/what-are-we-building/target-devices-by-type.njk new file mode 100644 index 000000000..a2f09aa19 --- /dev/null +++ b/src/site/_includes/survey/2022/what-are-we-building/target-devices-by-type.njk @@ -0,0 +1,62 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "Target devices by type, 2020-2022", 'text-xl font-semibold') }} +

    Percentage of respondents saying these targets were somewhat or very important

    +
    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2020—2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Type202020212022
    Desktops99%98%97%
    Phones95%94%94%
    Tablets92%91%90%
    Device-specific browsers18%25%34%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/what-are-we-building/types-of-sites-built-last-12-months.njk b/src/site/_includes/survey/2022/what-are-we-building/types-of-sites-built-last-12-months.njk new file mode 100644 index 000000000..88dcca2bb --- /dev/null +++ b/src/site/_includes/survey/2022/what-are-we-building/types-of-sites-built-last-12-months.njk @@ -0,0 +1,73 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "Types of websites built in the last 12 months") }} +

    Percentage of respondents

    +
    +
    +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NoneA few projectsMany projectsMost projectsAll
    SPA20%41%15%16%8%
    Fully dynamic28%36%15%15%6%
    Edge-dynamic53%30%9%6%3%
    Mostly static26%43%17%11%3%
    Fully static30%40%15%11%4%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/what-are-we-building/what-is-the-purpose-of-the-sites-you-built-in-2022.njk b/src/site/_includes/survey/2022/what-are-we-building/what-is-the-purpose-of-the-sites-you-built-in-2022.njk new file mode 100644 index 000000000..08341a4b6 --- /dev/null +++ b/src/site/_includes/survey/2022/what-are-we-building/what-is-the-purpose-of-the-sites-you-built-in-2022.njk @@ -0,0 +1,84 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "What is the purpose of the websites you built in 2022?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    PurposePercentage of Survey Participants
    Personal websites45%
    Consumer software40%
    B2B software39%
    E-commerce38%
    Informational38%
    Internal tools37%
    Documentation29%
    Lead capture29%
    Enterprise software26%
    News/Entertainment14%
    Social media14%
    Retail13%
    Games11%
    Streaming media9%
    Politics/Activism5%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/where-are-we-going/index.njk b/src/site/_includes/survey/2022/where-are-we-going/index.njk new file mode 100644 index 000000000..541dd8064 --- /dev/null +++ b/src/site/_includes/survey/2022/where-are-we-going/index.njk @@ -0,0 +1,158 @@ +
    + {{ + permalinkHeading.render( + "h2", + "Emerging Trends in the Jamstack Community", + "", + "emerging-trends-in-the-jamstack-community" + ) + }} + +

    + In addition to the current state of the Jamstack community, we also gathered + some data about emerging trends, and tried to use our data to make some + predictions about where we expect things will go in 2023. +

    + + {{ permalinkHeading.render("h3", "Trends in web frameworks") }} + +

    + The continued dominance of React in the web framework landscape seems set to + continue, and we expect further growth from React and its allied Next.js in + 2023. But React is only one of many possible ways to build a useful website. +

    + +

    + If you’re looking for interactivity with high performance and a low resource + footprint, such as if your user base is primarily mobile, you might want to + look at Astro or Sveltekit. +

    + +

    + As we mentioned already, if you’re building a static or nearly-static site, + we continue to think 11ty is an excellent choice given its growth relative + to other SSGs in the space. +

    + + {{ permalinkHeading.render("h3", "Is Web3 the future?") }} + +

    + We heard a great deal on social media in 2022 about Web3, so we included a + couple of specific questions about Web3 technologies in this year’s survey + (after running a small pre-survey, we did not include the Metaverse in our + definition of Web3, as a majority of respondents did not think of it as part + of Web3). +

    + +

    + Overall, only about 10% of respondents said they had tried out any of the + Web3 technologies we asked about. Applying the same “some or many projects” + standard that we do when counting web frameworks, Web3 technologies did not + cross 3% usage. +

    + + {% include './web3-usage.njk' %} + +

    + Low usage is to be expected in an early technology, so we also asked + sentiment questions. 13% of respondents did not know what Web3 was, while + another third were neutral towards it. Of those who expressed feelings about + Web3, those who were negative about it (31%) slightly outnumbered those who + were positive about it (28%). If we translate this into the satisfaction + score we use elsewhere in the survey, it would be 0.9, and we would expect + Web3 to lose usage share in the coming year. +

    + + {% include './web3-feelings.njk' %} + + {{ permalinkHeading.render("h3", "Web Components have arrived") }} + +

    + Browser-native Web Components were introduced 11 years ago but lacked + support from all major browsers until roughly + 2018. Since then, their adoption has accelerated notably, and while they are + still not in use by the majority of our respondents we believe we can call + them a solid choice in 2022. +

    + +

    + Using the same standards we apply to web frameworks, native Web Components + have usage of 32%. Even more positively, their Satisfaction Score is 4.3, so + we expect rapid growth in the adoption of web components in 2023. +

    + + {% include './web-components.njk' %} + + {{ permalinkHeading.render("h3", "Jamstack is Increasingly Serverless") }} + +

    + The final trend we covered was the growth in serverless technology, + sometimes also called edge computing. Last year we were taken somewhat by + surprise to learn that serverless adoption had hit 46%, so this year we made + sure to ask a more detailed question. +

    + +

    + Using the standard we used last year of any adoption at all, serverless + usage jumped from 46% to 71%. We expected growth, but that was much faster + than we predicted. Applying our usual standard of “some+many” projects we + use for web frameworks, serverless technology is at 35% adoption, which + relative to frameworks would make it bigger than Vue but smaller than + Next.js. +

    + +

    + We mentioned above that there was a big shift in the last year of people + describing themselves as “full stack” developers from “front end” + developers. We think the big jump in serverless adoption may be the + explanation: serverless lets front-end developers build full-stack + applications with a minimum of fuss, and the adoption has been so fast it’s + changing how we describe ourselves. +

    + +

    + Given the rapid growth since last year, we expect to see further growth in + adoption and especially users moving from the “few projects” category into + more serious usage. +

    + + {% include './serverless.njk' %} + +

    + Jamstack remains the standard architecture of the web +

    + +

    + The evolution of the web as a platform continues to be rapid and exciting, + with new technologies pushing the boundaries of what the web can do and how + quickly developers can ship. We’ve also learned more about our community as + human beings: where they are, who they are, and what motivates them. +

    + +

    + We hope giving you a sense of the community you’re part of and the + technologies that your peers use gives you a sense of place and some ideas + about where you should put your time and energy in the next year. +

    + +

    + Once again, we’d like to thank everybody who participated in the community + survey. +

    + + +
    diff --git a/src/site/_includes/survey/2022/where-are-we-going/serverless.njk b/src/site/_includes/survey/2022/where-are-we-going/serverless.njk new file mode 100644 index 000000000..b0c42ca28 --- /dev/null +++ b/src/site/_includes/survey/2022/where-are-we-going/serverless.njk @@ -0,0 +1,45 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "How many websites you've built this year have used serverless functions?") }} +

    Percentage of respondents

    +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Count
    None30%
    A few projects36%
    Some projects18%
    Many projects12%
    All5%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/where-are-we-going/web-components.njk b/src/site/_includes/survey/2022/where-are-we-going/web-components.njk new file mode 100644 index 000000000..09fbf9448 --- /dev/null +++ b/src/site/_includes/survey/2022/where-are-we-going/web-components.njk @@ -0,0 +1,52 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "How much have you used Web Components in the last 12 months?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Count
    Not aware of them23%
    Rarely and don't want to16%
    Rarely but want more29%
    Some and want fewer5%
    Some and want more19%
    Many and want fewer1%
    Many and want more7%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/where-are-we-going/web3-feelings.njk b/src/site/_includes/survey/2022/where-are-we-going/web3-feelings.njk new file mode 100644 index 000000000..c3afe692b --- /dev/null +++ b/src/site/_includes/survey/2022/where-are-we-going/web3-feelings.njk @@ -0,0 +1,48 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "In general, how do you feel about Web3?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    In general, how do you feel about Web3?Count
    I don't know what it is13%
    Strongly negative18%
    Negative13%
    Neutral29%
    Positive20%
    Strongly positive8%
    +
    +
    diff --git a/src/site/_includes/survey/2022/where-are-we-going/web3-usage.njk b/src/site/_includes/survey/2022/where-are-we-going/web3-usage.njk new file mode 100644 index 000000000..6e579c002 --- /dev/null +++ b/src/site/_includes/survey/2022/where-are-we-going/web3-usage.njk @@ -0,0 +1,89 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "Which Web3 technologies did you use in the last 12 months?") }} +

    Percentage of respondents

    +
    +
    +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NoneA few projectsMany projectsMost projectsAll
    Bitcoin89%7%1%1%1%
    Ethereum87%9%1%1%1%
    Solana93%4%1%1%1%
    Other blockchain89%7%1%1%1%
    DAOs93%4%1%1%1%
    Other dApps90%6%2%1%1%
    NFTs86%10%2%1%1%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/employment-status.njk b/src/site/_includes/survey/2022/whos-doing-the-building/employment-status.njk new file mode 100644 index 000000000..18263c682 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/employment-status.njk @@ -0,0 +1,52 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "What's your employment status?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Employment StatusPercentage of Survey Participants
    Full-time50%
    Student21%
    Self-employed13%
    Contractor6%
    Part-time5%
    Between jobs5%
    Retired1%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/experience-by-region.njk b/src/site/_includes/survey/2022/whos-doing-the-building/experience-by-region.njk new file mode 100644 index 000000000..88238164d --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/experience-by-region.njk @@ -0,0 +1,155 @@ +
    +
    +
    + {{ permalinkHeading.render('h5', "Experience by region") }} +

    Percentage of respondents

    +
    +
    +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Years of experienceAfricaAsia PacificCentral AmericaEastern AsiaEuropeMiddle EastNorth AmericaSouth AmericaSouthern AsiaCaribbean
    < 19.3%21.1%0.5%3.6%21.7%2.1%21.7%7.2%12.9%0.0%
    1-212.4%16.4%1.2%0.7%27.9%0.9%21.6%5.9%12.0%0.9%
    3-48.4%13.1%1.3%2.2%37.4%2.2%24.5%4.5%5.4%1.1%
    5-65.7%12.9%2.5%2.0%34.5%2.2%28.3%6.2%3.7%2.0%
    7-83.7%6.7%0.7%1.9%39.6%0.7%37.0%3.0%5.6%1.1%
    9-102.5%5.8%1.1%0.4%42.4%0.7%40.6%4.7%1.1%0.7%
    11-123.8%5.0%0.6%1.3%51.9%1.3%32.5%3.1%0.6%0.0%
    13-143.5%8.1%0.0%0.0%39.1%5.8%35.6%2.3%5.8%0.0%
    15+0.7%8.0%0.5%1.1%40.3%1.5%44.1%2.0%1.3%0.5%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/experience-increasing-over-time.njk b/src/site/_includes/survey/2022/whos-doing-the-building/experience-increasing-over-time.njk new file mode 100644 index 000000000..34acd9653 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/experience-increasing-over-time.njk @@ -0,0 +1,94 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "Experience increasing over time") }} +

    Years of experience relevant to current job, 2020-2022

    +
    +

    Percentage of respondents

    +
    + +
    + +
    +
    +
    + + +
    Source: Jamstack Community Survey 2020—2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Years of experience202020212022
    < 14%13%8%
    1-213%19%16%
    3-420%18%16%
    5-615%12%14%
    7-89%7%9%
    9-1012%8%9%
    11-128%5%5%
    13-145%3%3%
    15+14%14%19%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/have-you-changed-jobs-in-the-last-12-months.njk b/src/site/_includes/survey/2022/whos-doing-the-building/have-you-changed-jobs-in-the-last-12-months.njk new file mode 100644 index 000000000..48fd52739 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/have-you-changed-jobs-in-the-last-12-months.njk @@ -0,0 +1,32 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "Have you changed jobs in the last 12 months?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + +
    Have you changed jobs in the last 12 months?Count
    No67%
    Yes33%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/i-changed-jobs-to-work-remotely-more-often.njk b/src/site/_includes/survey/2022/whos-doing-the-building/i-changed-jobs-to-work-remotely-more-often.njk new file mode 100644 index 000000000..c1e4dceb6 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/i-changed-jobs-to-work-remotely-more-often.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "I changed jobs to work remotely more often") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Percentage of Survey Participants
    Strongly disagree23%
    Somewhat disagree8%
    Neither agree nor disagree34%
    Somewhat agree12%
    Strongly agree23%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/i-enjoy-remote-work.njk b/src/site/_includes/survey/2022/whos-doing-the-building/i-enjoy-remote-work.njk new file mode 100644 index 000000000..cabec9216 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/i-enjoy-remote-work.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "I enjoy remote work") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Percentage of Survey Participants
    Strongly disagree3%
    Somewhat disagree4%
    Neither agree nor disagree7%
    Somewhat agree26%
    Strongly agree61%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/i-would-like-to-work-remote-more-often.njk b/src/site/_includes/survey/2022/whos-doing-the-building/i-would-like-to-work-remote-more-often.njk new file mode 100644 index 000000000..a41891b56 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/i-would-like-to-work-remote-more-often.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "I would like to work remotely more often") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Percentage of Survey Participants
    Strongly disagree5%
    Somewhat disagree8%
    Neither agree nor disagree28%
    Somewhat agree16%
    Strongly agree43%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/i-would-quit-my-job-if-in-person-was-more-often.njk b/src/site/_includes/survey/2022/whos-doing-the-building/i-would-quit-my-job-if-in-person-was-more-often.njk new file mode 100644 index 000000000..dafbc7cec --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/i-would-quit-my-job-if-in-person-was-more-often.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "I would quit my job if they made me work in person more often") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Percentage of Survey Participants
    Strongly disagree12%
    Somewhat disagree12%
    Neither agree nor disagree20%
    Somewhat agree27%
    Strongly agree28%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/i-would-quit-my-job-if-remote-was-more-often.njk b/src/site/_includes/survey/2022/whos-doing-the-building/i-would-quit-my-job-if-remote-was-more-often.njk new file mode 100644 index 000000000..8132c1a68 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/i-would-quit-my-job-if-remote-was-more-often.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "I would quit my job if they made me work remotely more often") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Percentage of Survey Participants
    Strongly disagree65%
    Somewhat disagree11%
    Neither agree nor disagree13%
    Somewhat agree5%
    Strongly agree6%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/index.njk b/src/site/_includes/survey/2022/whos-doing-the-building/index.njk new file mode 100644 index 000000000..0305bd1a9 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/index.njk @@ -0,0 +1,235 @@ +
    + + {{ permalinkHeading.render("h2", "Who’s doing the building?", "", "whos-doing-the-building") }} + +

    + As usual, we kick off by looking at the demographics of our community. Who + are we, exactly? +

    + + + {{ permalinkHeading.render("h3", "Job titles") }} + +

    + There was not much change in the breakdown of reported job titles in our + survey this year: as usual, nearly everyone (84%) who responded considers + themselves to be an engineer of some kind. There was one curious change, + however: the number of people calling themselves “full stack” versus “front + end” has almost exactly flipped, from 32% full stack and 45% front end last + year to 44% full stack and 33% front end in the 2022 survey. None of the + other demographic markers we tracked changed very much, so we believe this + is a real shift in how the community thinks of itself. We have two theories + about why this might be the case, and we’ll discuss them in the sections on + job changes and serverless. +

    + + + {% include "./job-title-2021-vs-2022.njk" %} + + + {{ permalinkHeading.render("h3", "Employment status") }} + +

    + This year when asking about employment status we added a new category, + “self-employed”, which meant that the results are not totally comparable to + last year. A bunch of people who last year described themselves as + “full-time” switched to the “self-employed” category, which probably doesn’t + describe an actual change in status but more accurately describes what they + already were. Students continue to be the second-biggest group in the + community, at 21% of all respondents. As we said last year, this is a + solidly positive sign for a community: the Jamstack remains a popular way to + on-board students at bootcamps into deploying websites for the first time, + and becoming the “default” way to build a website means the Jamstack can + expect to enjoy growth for years to come. +

    + + + {% include "./employment-status.njk" %} + + {{ permalinkHeading.render("h3", "Working experience") }} + +

    + When asking about our community’s level of working experience, we saw a + continuing trend from 2020 and 2021: the community is slowly increasing in + experience. 2021 was our biggest year for new community members, and you can + see that cohort moving up by 1 year of experience in this chart. In 2022, + nearly 1 in 5 developers say they have been working in their current career + for 15 or more years. +

    + + + {% include "./experience-increasing-over-time.njk" %} + + + {{ permalinkHeading.render("h4", "Increasing geographical diversity") }} + +

    + Repeating a phenomenon we first noticed last year, the geographical + diversity of our respondents has a strong correlation to their level of + career experience. In the most experienced group, 84% of respondents come + from either North America or Europe. In our newest group, those with less + than a year of experience, that falls to just 43%. That means in 2022 for + the first time, more than half of people who joined the Jamstack community + came from outside of the two big regions! +

    + +

    + An explanation for this correlation that we find persuasive is that access + to technology is continuing to improve worldwide, leading to increased + geographical diversity. We think this is an encouraging trend, and hope that + it will lead to greater diversity in other dimensions as well. +

    + + + {% include "./experience-by-region.njk" %} + +

    + Every region outside of Europe and North America grew in share. The + fastest-growing region was Africa, which jumped from 4% of respondents to 8% + from 2021 to 2022. This author is also delighted to note that his home + region, the Caribbean, went from 0.5% to 1% in the same period. +

    + + + {% include "./respondents-by-region.njk" %} + + + {{ permalinkHeading.render("h3", "The Great Resignation") }} + +

    + A phenomenon that gained a great deal of attention in 2021 was a spike in + the number of people changing jobs, which has become known as The Great + Resignation. We were interested to get hard numbers on the reality of this + change, and we were not disappointed: fully one-third of our respondents + reported that they changed jobs in the last year, a huge shift. In our job + titles data we saw a big change in job titles, with 11% switching from + front-end to full-stack roles, a change that seems totally plausible in the + context of a community where 33% of people changed jobs. +

    + + + {% include "./have-you-changed-jobs-in-the-last-12-months.njk" %} + + + {{ permalinkHeading.render("h4", "Why people stay") }} + +

    + We had a second question about the great resignation asking people what + motivated their behavior – either why they stayed, or why they left. The + biggest reason people kept their jobs will be no surprise: people stay if + they like their team. Humans are social animals, and a team you love makes + work more bearable. +

    + +

    + A more surprising finding was that the number two reason, as measured by + those who called it “extremely important”, was remote work. People really, + really like working remotely. Money was important, but it was only the + fifth-biggest reason people stayed where they were. Career growth was also a + very important reason to stay. +

    + + + {% include "./what-influenced-staying.njk" %} + + + {{ permalinkHeading.render("h4", "Why people leave") }} + +

    + Why people left jobs was even heavier on remote work: being able to work + remotely at the new job was the number one reason people left their jobs in + our community, as measured by the number of people saying it was an + “extremely important” reason. Growing in your career came in second when + measured in this way, though if you include people who called things “very” + important in addition to “extremely” important it came first. Company + culture, bad teams, and not enough money came next. +

    + + + {% include "./what-influenced-leaving.njk" %} + + + {{ permalinkHeading.render("h3", "Remote work") }} + +

    + Given that one-third of respondents changed jobs in the last year and many + indicated that remote work was their primary reason for either staying or + leaving a company, our next finding makes sense: a startling 83% of our + respondents say they work remotely at least half of the time. Three in five + (62%) work remotely at least 90% of the time, which we’re going to call + “full time remote”. In last year’s survey about a third said their job had + gone full-time remote, and we know from earlier surveys (such as + GitHub’s Octoverse report) that about a third of people were already working remotely before the + pandemic, so this is roughly double the pre-pandemic numbers. +

    + + + {% include "./remote-frequency.njk" %} + + + {{ permalinkHeading.render("h4", "Changes in remote work") }} + +

    + Since a lot of remote work was driven by the pandemic and offices around the + world are still in the process of reopening, we thought it was fair to ask + whether or not this new state was going to be permanent, or whether people + were returning to offices, but slowly. +

    + +

    + The clear response was that remote work is here to stay. A solid majority + (76%) of respondents said their frequency of remote work had either stayed + the same or increased in the last year. Indeed the strongest signal is that + this is the new normal: 52% of people said nothing changed about their + remote working situation, and the ratio of those working remotely more often + versus less often was just 1.04, meaning only a small net change. +

    + + + {% include "./remote-changes.njk" %} + + + {{ permalinkHeading.render("h4", "Attitudes to remote work") }} + +

    + We also asked our community about their attitudes to various aspects of + remote work. 87% of respondents say they enjoy remote work, but only 71% say + their company has remote work “figured out”, which implies there’s 16% of + people enjoying remote work even though they believe their company doesn’t + do it very well. +

    + +
    + + {% include "./i-enjoy-remote-work.njk" %} + {% include "./my-company-has-remote-work-figured-out.njk" %} +
    + +

    + As we suspected from the job change data, the number of people who would + like to work remotely even more often than they currently do is high: 59%. + And the number saying they changed jobs specifically to be able to work + remotely more often is 35%. That is a huge amount of change, and a strong + motivator. +

    + +
    + + {% include "./i-would-like-to-work-remote-more-often.njk" %} + {% include "./i-changed-jobs-to-work-remotely-more-often.njk" %} +
    + +

    + Our final pair of questions about remote work determined two things: first, + we confirmed that it’s not just that people hate when their working + conditions change: asked if they would quit their jobs if asked to work + remotely more often, only 11% said they would, while 55% of respondents said + they would quit their jobs rather than work remotely less often. +

    + +
    + + {% include "./i-would-quit-my-job-if-remote-was-more-often.njk" %} + {% include "./i-would-quit-my-job-if-in-person-was-more-often.njk" %} +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/job-title-2021-vs-2022.njk b/src/site/_includes/survey/2022/whos-doing-the-building/job-title-2021-vs-2022.njk new file mode 100644 index 000000000..d1bd78961 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/job-title-2021-vs-2022.njk @@ -0,0 +1,68 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', 'Job titles, 2021 vs. 2022') }} +

    Percentage of respondents

    +
    +
    +
    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Job Title20212022
    Developer (full-stack)32%44%
    Developer (front-end)45%33%
    Developer (back-end)5%5%
    Designer4%4%
    Manager6%4%
    Executive/Business owner4%
    Content producer2%3%
    DevOps2%2%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/my-company-has-remote-work-figured-out.njk b/src/site/_includes/survey/2022/whos-doing-the-building/my-company-has-remote-work-figured-out.njk new file mode 100644 index 000000000..2a412e928 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/my-company-has-remote-work-figured-out.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "My company has remote work figured out") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Percentage of Survey Participants
    Strongly disagree6%
    Somewhat disagree9%
    Neither agree nor disagree14%
    Somewhat agree32%
    Strongly agree39%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/remote-changes.njk b/src/site/_includes/survey/2022/whos-doing-the-building/remote-changes.njk new file mode 100644 index 000000000..4d812daa1 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/remote-changes.njk @@ -0,0 +1,44 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "Has your frequency of remote work changed in the last 12 months?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FrequencyPercentage of Survey Participants
    Lots more in office7%
    Slightly more in office16%
    No changes52%
    Slighty more remote9%
    Lots more remote15%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/remote-frequency.njk b/src/site/_includes/survey/2022/whos-doing-the-building/remote-frequency.njk new file mode 100644 index 000000000..e3ad238ee --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/remote-frequency.njk @@ -0,0 +1,56 @@ +
    +
    +
    + {{ permalinkHeading.render('h4', "What percentage of your time do you work remotely?") }} +

    Percentage of respondents

    +
    +
    +
    +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FrequencyPercentage of Survey Participants
    0%3%
    1-9%4%
    10-24%5%
    25-49%5%
    50-74%9%
    75-89%12%
    90-99%23%
    100%39%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/respondents-by-region.njk b/src/site/_includes/survey/2022/whos-doing-the-building/respondents-by-region.njk new file mode 100644 index 000000000..74ca67f4e --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/respondents-by-region.njk @@ -0,0 +1,82 @@ +
    +
    +
    + {{ permalinkHeading.render("h5", "Respondents by region") }} +

    Percentage of respondents

    +
    + +
    +
    +
    +
    Source: Jamstack Community Survey 2021—2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Employment Status20212022
    Europe39%33%
    North America31%28%
    All Asia18%19%
    Asia Pacific11%12%
    Africa4%8%
    Southern Asia6%8%
    South America5%5%
    Eastern Asia1%2%
    Middle East1%2%
    Central America1%1%
    Caribbean1%1%
    +
    +
    diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/what-influenced-leaving.njk b/src/site/_includes/survey/2022/whos-doing-the-building/what-influenced-leaving.njk new file mode 100644 index 000000000..94e15ccdd --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/what-influenced-leaving.njk @@ -0,0 +1,114 @@ +
    +
    +
    + {{ permalinkHeading.render('h5', "Why did you leave your job?") }} +

    Percentage of respondents

    +
    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Not at all importantSlightly importantModerately importantVery importantExtremely important
    Remote work6%6%18%30%41%
    Career growth3%5%18%35%39%
    Company culture4%6%21%38%31%
    Team4%6%21%38%31%
    Money4%5%20%40%30%
    My manager6%9%24%34%26%
    Corporate ethics6%9%25%36%25%
    Technology choices4%7%25%42%22%
    Environmental impact15%16%30%25%14%
    Involuntary36%10%28%15%11%
    +
    +
    \ No newline at end of file diff --git a/src/site/_includes/survey/2022/whos-doing-the-building/what-influenced-staying.njk b/src/site/_includes/survey/2022/whos-doing-the-building/what-influenced-staying.njk new file mode 100644 index 000000000..2e1377e18 --- /dev/null +++ b/src/site/_includes/survey/2022/whos-doing-the-building/what-influenced-staying.njk @@ -0,0 +1,114 @@ +
    +
    +
    + {{ permalinkHeading.render('h5', "Why did you stay in your job?") }} +

    Percentage of respondents

    +
    +
    + +
    + +
    +
    +
    + +
    Source: Jamstack Community Survey 2022
    + +
    + Show Chart Data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Not at all importantSlightly importantModerately importantVery importantExtremely important
    Team3%5%19%40%34%
    Remote work5%9%22%32%32%
    Career growth3%6%21%39%31%
    Company culture4%8%21%38%29%
    Money3%6%25%39%28%
    Corporate ethics6%9%24%37%25%
    My manager6%7%24%38%24%
    Technology choices2%7%24%44%23%
    Environmental impact14%16%30%26%14%
    Involuntary31%10%34%15%10%
    +
    +
    \ No newline at end of file diff --git a/src/site/styleguide.njk b/src/site/_styleguide.njk similarity index 90% rename from src/site/styleguide.njk rename to src/site/_styleguide.njk index fa61400ec..37447e90d 100644 --- a/src/site/styleguide.njk +++ b/src/site/_styleguide.njk @@ -4,8 +4,8 @@ layout: layouts/base.njk --- -
    -

    Jamstack

    +
    +

    Jamstack

    Create fast and secure sites and dynamic apps with pre-rendered resources served directly from a CDN, removing the requirement to manage or run web servers.

    diff --git a/src/site/best-practices.njk b/src/site/best-practices.njk deleted file mode 100644 index ff2b4ce46..000000000 --- a/src/site/best-practices.njk +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Jamstack Best Practices -description: Learn about optimizing your Jamstack setup - for speed atop a CDN, build/deploy improvements, git workflow tips, and other best practices when building with the Jamstack. -layout: layouts/base.njk ---- - -{% import "components/section-heading.njk" as section %} - -
    -

    Best Practices

    -

    - When building Jamstack projects, you can really get the most out of the stack if you stick to a few best practices. -

    -
    - -
    - - {{ section.benefit( - "Entire Project on a CDN", - "icon-disc-security.svg", - "

    - Because Jamstack projects don’t rely on server-side code, they can be distributed instead of living on a single server. Serving directly from a CDN unlocks speeds and performance that can’t be beat. The more of your app you can push to the edge, the better the user experience. -

    ") - }} - - {{ section.benefit( - "Modern Build Tools", - "icon-disc-security.svg", - "

    - Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends. -

    ") - }} - - {{ section.benefit( - "Automated Builds", - "icon-disc-security.svg", - "

    - Because Jamstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically. -

    ") - }} - - {{ section.benefit( - "Atomic Deploys", - "icon-disc-security.svg", - "

    - As Jamstack projects grow really large, new changes might require re-deploying hundreds of files. Uploading these one at a time can cause inconsistent state while the process completes. You can avoid this with a system that lets you do “atomic deploys,” where no changes go live until all changed files have been uploaded. -

    ") - }} - - {{ section.benefit( - "Instant Cache Invalidation", - "icon-disc-security.svg", - "

    - When the build-to-deploy cycle becomes a regular occurrence, you need to know that when a deploy goes live, it really goes live. Eliminate any doubt by making sure your CDN can handle instant cache purges. -

    ") - }} - - {{ section.benefit( - "Everything Lives in Git", - "icon-disc-security.svg", - "

    - With a Jamstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction, and also simplifies staging and testing workflows. -

    ") - }} - -
    diff --git a/src/site/browserconfig.xml b/src/site/browserconfig.xml new file mode 100644 index 000000000..5242639c8 --- /dev/null +++ b/src/site/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #F0047F + + + diff --git a/src/site/code-of-conduct.njk b/src/site/code-of-conduct.njk index 9f1735751..05a0825d9 100644 --- a/src/site/code-of-conduct.njk +++ b/src/site/code-of-conduct.njk @@ -5,14 +5,14 @@ layout: layouts/base.njk ---
    -

    Code of Conduct

    -

    +

    Code of Conduct

    +

    Jamstack is an inclusive philosophy and an inclusive community.

    -

    Welcome!

    +

    Welcome!

    We strive to create a friendly, welcoming, judgement- and harassment-free place for individuals to learn, connect, and grow together.

    @@ -20,33 +20,27 @@ layout: layouts/base.njk We are a diverse, global community. We have members from every gender, sexuality, gender expression, race, ethnicity, tribal background, religious affiliation, citizenship and nationality, age, physical ability, educational background, experience level that you can think of - and want everyone to feel welcome!

    - Whether it is contributing to our website, connecting in our slack, or attending conferences and independently organized meetings, it's not only our hope, but our expectation, that you'll abide by these three basic ground rules: + Whether it is contributing to our website or attending conferences and independently organized meetings, it's not only our hope, but our expectation, that you'll abide by these three basic ground rules:

    -
      -
    • -

      We approach interactions with thoughtfulness and care.

      -

      +

        +
      • +

        We approach interactions with thoughtfulness and care.

        We are patient & kind to others. We don't dismiss someone because they have a different level of experience, are of a different background, or have a difference of opinion than us. -

        • -
      • -

        We are respectful when we disagree with someone.

        -

        +

      • +

        We are respectful when we disagree with someone.

        There is a human in front of us. We don’t allow frustration to turn into a personal attack. A community where people feel uncomfortable or threatened is not a productive one. We are collectively responsible for each other. -

        • -
      • -

        We work to correct mistakes when they occur.

        -

        +

      • +

        We work to correct mistakes when they occur.

        No one is expected to always be perfect or to know everything - sometimes even good intentions have unwanted outcomes. But how we respond to criticism is important. If someone criticizes our conduct, or points out ways we have harmed someone, we listen without taking it personally, and work towards a resolution - together. -

    -

    We will not tolerate the following:

    +

    We will not tolerate the following:

    • Violent threats or language.
    • Discriminatory or derogatory jokes and language.
      • @@ -58,26 +52,24 @@ layout: layouts/base.njk
    • Advocating for or encouraging any of the above behaviors.

    - If soeone has said or done something that violates this code of conduct, please refer to the Resolving Code of Conduct Violations section. + If someone has said or done something that violates this code of conduct, please refer to the Resolving Code of Conduct Violations section.

    -

    Contributing to jamstack.org

    +

    Contributing to jamstack.org

    In addition to the above, we expect that you'll consider:

    • English is not everyone's first language! Be careful when pointing out language mistakes, typos or similar.
    • Follow the contribution process and guidelines described in the ReadMe of this site's code repository.
    • Contributions should be pertinent to the Jamstack approach to web development, and Jamstack ecosystem.
      • -
    • Sharing information about a suitable service is fine, but avoid pushy or spammy contributions which might be construed as a hard sell for your site, service or
      • product. -
    • Example sites might be large or small, but we will not include examples which we feel convey offensive or inappropriate content.
      • -
    • Examples site which include bitcoin mining scripts or other malicious or antisocial code will not be accepted. If you observe any such sites being listed please let is
      • know by opening an issue, or contacting us via [jamstack.org/slack](http://jamstack.org/slack) +
    • Sharing information about a suitable service is fine, but avoid pushy or spammy contributions which might be construed as a hard sell for your site, service or
      • product.
    • The order in which contributions are listed on the site may change over time. Expect some ordering such as alphabetical order of the site name, publish date or other.
    -
    -

    Slack Code of Conduct

    +{#
    +

    Discord Code of Conduct

    • Written communication is easy to misinterpret. Ask for clarification before jumping to conclusions.
    • Respect and use the correct pronouns for people when referring to them. Ask if you are not sure.
      • @@ -87,10 +79,10 @@ layout: layouts/base.njk
    • Limit your use of `@channel` and `@here` as this notifies everyone across global timezones.
    • Select the most appropriate channel for your conversation and avoid reposting the same messages across many channels in ways which may feel spammy.
    -
    +
    #}
    -

    Group Meeting Code of Conduct

    +

    Group Meeting Code of Conduct

    Group meetups are dedicated to providing a harassment-free experiences for everyone. We consider "group meetings" self-organized meetings in your city, as well as social events that may take place afterward, or adjacent to conferences we organize.

    @@ -108,21 +100,27 @@ layout: layouts/base.njk
    -

    Resolving Code of Conduct Violations

    +

    Resolving Code of Conduct Violations

    If something has happened that excludes you or is making you have a bad experience, here is what should happen next.

      -

    • In the moment:

      Are you safe? If not, get to a safe place. Can you talk to someone you trust about what happened?
      • -

    • As soon as possible:

      evaluate the situation - is it safe to talk to the person directly about this incident? +
    • +

      In the moment:

      Are you safe? If not, get to a safe place. Can you talk to someone you trust about what happened?
      • +
    • +

      As soon as possible:

      evaluate the situation - is it safe to talk to the person directly about this incident?
        -

      • If it seems safe

        , try and speak with the person privately, in person if you can. Try and work to a resolution together. If it goes well, great! If it does not go well, please speak to an organizer as soon as you can. -

      • If it does not seem safe

        , or the conversation did not go well, speak to an organizer about what happened as soon as you can.
        • +
      • +

        If it seems safe

        , try and speak with the person privately, in person if you can. Try and work to a resolution together. If it goes well, great! If it does not go well, please speak to an organizer as soon as you can. + + +
      • +

        If it does not seem safe

        , or the conversation did not go well, speak to an organizer about what happened as soon as you can.
    • -

      After the fact:

      Organizers are familiar with this Code of Conduct and will take reports of CoC violations seriously. They will ask you details such as: +

      After the fact:

      Organizers are familiar with this Code of Conduct and will take reports of CoC violations seriously. They will ask you details such as:
      • time / place / manner of the alleged violation.
      • whether there were additional witnesses or other people involved.
        • @@ -138,7 +136,7 @@ layout: layouts/base.njk
    -

    Enforcement

    +

    Enforcement

    This Code of Conduct covers a variety of different spaces of interaction.

    @@ -146,13 +144,7 @@ layout: layouts/base.njk
    • - in the Jamstack Slack, please speak to Phil Hawksworth, Perry Eising, or Ashlynn Polini by contacting us in the Jamstack slack . Please do note we may be out of your timezone, but we will respond. -
      • -
    • - on Jamstack.org, for example in a PR, please speak to Phil Hawksworth or Perry Eising by contacting us in the Jamstack slack or via email. Our emails are our first names @ netlify.com -
      • -
    • - at an in person meeting that is organized by your local city, please speak with the organizers, who will reach out to us via Slack or email. + at an in person meeting that is organized by your local city, please speak with the organizers, who will reach out to us via Discord or email.
    • at a Jamstack conference, please speak to any Netlify staff member, who will locate those of us who are trained to take statements, dm us, or talk to us via email. @@ -165,4 +157,4 @@ layout: layouts/base.njk

      Depending on the severity of the issue, the person may receive a last-chance warning, may be asked to leave the activity/group, or may receive a future ban. In very severe cases, we reserve the right to involve law enforcement should we feel it necessary. Tickets or other participation fees won't be refunded for people who are removed for CoC violations.

      -
    +
    \ No newline at end of file diff --git a/src/site/community.njk b/src/site/community.njk index 23d54327c..ca9e577e5 100644 --- a/src/site/community.njk +++ b/src/site/community.njk @@ -4,37 +4,19 @@ description: Find Jamstack meetups, upcoming events, and keep up-to-date with th layout: layouts/base.njk --- - {% import "components/zinger-cta.njk" as zinger %} +{% import "components/cards-meetup.njk" as meetup %}
    -

    Join the global community

    +

    Join the global community

    Our community members gather in many channels, online and in-person around the world, to learn about modern web development techniques and emerging technologies. Join the community to exchange ideas, find new opportunities and help build a better web.

    - -
    - {{ zinger.cta( - "Join the Slack", - "https://jamstack.org/slack", - "bg-gradient-pink-orange", - "#logo-slack" - ) - }} - {{ zinger.cta( - "JamstackConf Twitter", - "https://twitter.com/jamstackconf", - "bg-gradient-blue-green", - "#logo-twitter" - ) - }} -
    -

    +

    To participate in our community channels, it’s important to read and follow our Code of Conduct

    -
    -

    Community Mission

    +

    Community Mission

    Jamstack community members have a common mission to promote a web that is:

    @@ -46,41 +28,48 @@ layout: layouts/base.njk
    +
    +

    Find a Local User Group

    + +
    +
    + Filter + +
    + +
    +
      + {% set themes = [ + "bg-gradient-card-sunrise hover:card-shadow-sunrise", + "bg-gradient-card-blue hover:card-shadow-blue-seafoam", + "bg-gradient-card-seafoam hover:card-shadow-seafoam", + "bg-gradient-card-gold hover:card-shadow-gold"] + %} + {%- for item in community | sort(false, false, 'name') %} -
      -

      Upcoming Events

      -
        - {% for meetup, data in meetups %} - {% set item = meetup%} - {% include "components/meetup-link.njk" %} - {% endfor %} -
      -
      - - -
      -

      Find a Local User Group

      - + {# chose a pseudorandom theme based on the city name #} + {% set theme = item.name.length % 4 %} +
    • + {{ meetup.card( item.name, item.link, themes[theme] ) }} +
      • + {%- endfor %} +
    +
    -

    Start a Jamstack User Group

    +

    Start a Jamstack User Group

    Don’t see a group near you? We love to support new user group leaders and help grow the community. We can connect you with other user group leaders to share content ideas, provide stickers and swag, and get you listed on the user group page.

    - Contact Us -
    - + Learn how to get started +
    \ No newline at end of file diff --git a/src/site/css/hubspot-form.css b/src/site/css/hubspot-form.css new file mode 100644 index 000000000..b9ab33639 --- /dev/null +++ b/src/site/css/hubspot-form.css @@ -0,0 +1,61 @@ +.hs-form .hs-input { + @apply mb-3; + @apply p-2; + @apply dark:bg-gray-400; + @apply w-full; + + @apply dark:text-white; +} + +.hs-form .hs-form-required { + @apply hidden; +} + +.hs-form .hs-form-field label { + @apply block; + @apply mb-1; + @apply font-bold; +} + +.hs-form .hs-form-field label.hs-error-msg { + @apply text-red-500 dark:text-red-300; + @apply text-sm; + @apply font-normal; +} + +.hs-form .hs-button { + @apply inline-block; + @apply bg-pink-900; + @apply text-white; + @apply rounded-full; + @apply font-semibold; + @apply px-4; + @apply py-2; + @apply border-none; + @apply my-4; + @apply card-shadow; +} + +.hs-form .hs-button:hover, +.hs-form .hs-button:focus { + @apply bg-orange-500; + box-shadow: 0px 3px 15px rgba(241, 86, 77, 0.6); +} + +.survey-form .hs-form { + @apply grid; + @apply grid-cols-1; + grid-gap: 1em; +} + +@media (min-width: 40em) { /* 640px */ + .survey-form .hs-form { + grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); + } +} + +.survey-form .hs_email, +.survey-form .hs_jamstack_survey_promo, +.survey-form .hs_address { + @apply col-span-full; +} \ No newline at end of file diff --git a/src/site/css/ticker.css b/src/site/css/ticker.css index 82d4f194b..150cbf566 100644 --- a/src/site/css/ticker.css +++ b/src/site/css/ticker.css @@ -1,39 +1,46 @@ .logos-ticker { --speed: 90s; + --gap: 3em; display: flex; - flex-wrap: nowrap; overflow: hidden; - position: relative; -} - -.logos-ticker-fade { - background: linear-gradient(to right, rgba(14, 24, 42, 1) 0%, rgba(14, 24, 42, .01) 20%, rgba(14, 24, 42, .01) 80%, rgba(14, 24, 42, 1) 100%); - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 2; + user-select: none; + gap: var(--gap); + mask-image: linear-gradient( + to right, + hsl(0 0% 0% / 0), + hsl(0 0% 0% / 1) 20%, + hsl(0 0% 0% / 1) 80%, + hsl(0 0% 0% / 0) + ); } .logos-ticker-container { + flex-shrink: 0; display: flex; align-items: center; - justify-content: center; + justify-content: space-around; + gap: var(--gap); + min-width: 100%; animation: slide var(--speed) linear infinite; } + .logos-ticker-container svg { - fill: #646E73; - margin: 0 1.5em; + flex: 0 0 auto; + fill: #646e73; } -@keyframes slide { - 0% { - transform: translate3d(0, 0, 0); +@media (prefers-reduced-motion: reduce) { + .logos-ticker-container { + animation-play-state: paused; } +} - 100% { - transform: translate3d(-100%, 0, 0); +@keyframes slide { + from { + transform: translateX(0); + } + to { + transform: translateX(calc(-100% - var(--gap, 0px))); } } diff --git a/src/site/examples.njk b/src/site/examples.njk deleted file mode 100644 index f16aa0c02..000000000 --- a/src/site/examples.njk +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Jamstack Showcase and Examples -description: Check out a showcase of a variety of Jamstack-drive web properties and examples. Get inspired about building your next web project on the modern web architecture. -layout: layouts/base.njk ---- - -
    -

    Gallery and Examples

    -

    - There are examples from around the community and industry -

    -

    - Explore a selection of example Jamstack sites contributed by the community. You can also submit your own to be included in this list. -

    -
    - -
    -

    Featured

    -

    - Some great reference examples of Jamstack sites -

    -
    - {% for item in examples | iterable | selectattr("featured") | luckydip(6) %} -
    - {% include "components/example-link.njk" %} -
    - {% endfor %} -
    -
    - -
    -

    More examples

    -

    - Explore all the submitted examples -

    -
    - {% for item in examples | iterable %} -
    - {% include "components/example-link.njk" %} -
    - {% endfor %} -
    -
    - -
    -

    Contribute

    -

    - Should your site be featuired here in this gallery? Let us know about it by opening a pull request. -

    -
    - diff --git a/src/site/generators.njk b/src/site/generators.njk index 9c6514fbc..966b189ab 100644 --- a/src/site/generators.njk +++ b/src/site/generators.njk @@ -6,24 +6,77 @@ layout: layouts/base.njk {% import "components/cards.njk" as cards %}
    -

    Site Generators

    -

    +

    Site Generators

    +

    A List of Static Site Generators for Jamstack Sites

    -
    - {% for item in collections.generators %} - {{ cards.repo(item, loop.index0, github) }} - {% endfor %} -
    + + +
    +
    +
    +
    + Filter + +
    + + + +
    +
    +
    + Sort +
    + +
    +
    +
    +
    + {% for item in collections.generators | sortTools(github) %} + {{ cards.repo(item, loop.index0, github) }} + {% endfor %} +
    +     +
    -

    Contribute

    +

    Contribute

    - Should your site be featuired here in this gallery? Let us know about it by opening a pull request. + Should your site be featured here in this gallery? Let us know about it by opening a pull request.

    diff --git a/src/site/generators/20ful.md b/src/site/generators/20ful.md index a79cc4e08..8ddf9b42c 100644 --- a/src/site/generators/20ful.md +++ b/src/site/generators/20ful.md @@ -17,7 +17,7 @@ templates: - Sass - Stylus description: Universal static site generator -startertemplaterepo: punund/20ful-example +startertemplaterepo: https://github.com/punund/20ful-example --- Static site generator that includes preprocessors of HTML, CSS, and JavaScript. Written in LiveScript. Features navigation and asset cache busting. Controlled diff --git a/src/site/generators/AspNetStatic.md b/src/site/generators/AspNetStatic.md new file mode 100644 index 000000000..608d7d14d --- /dev/null +++ b/src/site/generators/AspNetStatic.md @@ -0,0 +1,31 @@ +--- +title: AspNetStatic +repo: ZarehD/AspNetStatic +homepage: https://github.com/ZarehD/AspNetStatic +language: + - C# + - .Net +license: + - Apache-2.0 +templates: + - Razor (.cshtml, .razor) +description: Transforms ASP.NET Core into a Static Site Generator +--- + +### Transform ASP.NET Core into a Static Site Generator + +Use AspNetStatic to create a static website with the same ASP.NET Core tools you love and use every day. Just add the module and tell it which routes (page, css, js, etc.) to process. + +AspNetStatic works equally well with Blazor (SSR), Razor Pages, and MVC (conrollers + views). + +### No Frameworks. No Engines. No Opinions! + +Build your ASP.NET site the way you always have. +AspNetStatic doesn't have any opinions about how you should structure your server-rendered site. +AspNetStatic is not a framework. It's not a CMS. There's no blog engine. It has no templating system. +AspNetStatic does just one thing; create static files for selected routes in your ASP.NET Core project. +That means you can use whatever framework, component, package, or architectural style you like. +Want to use a blog engine? No problem. Want to use a CMS? No problem. Want to create a documentation site using a markdown processor to render page content? No problem! +AspNetStatic doesn't care; it will **create optimized static files no matter how the content is produced by the server**. + +Visit the [Github repo](https://github.com/ZarehD/AspNetStatic) for more details. diff --git a/src/site/generators/abell.md b/src/site/generators/abell.md index 34733d238..6eed66047 100644 --- a/src/site/generators/abell.md +++ b/src/site/generators/abell.md @@ -8,35 +8,38 @@ license: - MIT templates: - Abell -description: A JavaScript based static-site-generator to help you create JSON, Markdown, or static-data based websites. +description: A Low Level, Framework Agnostic, Vite powered Static Site Generator for JavaScript Developers twitter: AbellLand -startertemplaterepo: abelljs/abell-starter-minima +startertemplaterepo: https://github.com/abelljs/abell-starter-minima --- -Abell is a Node.js based static-site-generator to help you create JSON, Markdown, or static-data based websites. +Abell is a low-level static-site-generator built on top of Vite to give high flexibility while keeping the setup closer to vanilla HTML, CSS, JS ### Installation -You can boilerplate a starter template using `create-abell-app` +You can boilerplate a starter template using `create-abell` ```sh -npx create-abell-app my-blog --template https://github.com/abelljs/abell-starter-minima +npx create-abell my-blog --template abelljs/abell-starter-minima cd my-blog npm run dev ``` -And boom🎉 You will have a live server running. +And tada 🎉 You will have a live server running. ### Hello World in Abell -Abell is built on top of a new templating language `.abell` which lets you write Node.js code inside HTML like syntax which is executed during the build time. +With Abell, you can write JavaScript inside HTML. This gets executed on build time. **Input:** ```html -{{ const greet = 'Hello, World!' }} +{{ + /** @declaration */ + const greet = 'Hello, World!'; +}} {{ greet.toUpperCase() }} @@ -50,5 +53,4 @@ Abell is built on top of a new templating language `.abell` which lets you write ``` - -Check out https://abelljs.org for detailed documentation. \ No newline at end of file +Check out https://abelljs.org for detailed documentation. diff --git a/src/site/generators/ago.md b/src/site/generators/ago.md index 2fe2376d2..be110c2bb 100644 --- a/src/site/generators/ago.md +++ b/src/site/generators/ago.md @@ -5,9 +5,8 @@ homepage: https://github.com/dvwallin/ago language: - Go license: - - MIT License -templates: - - None + - MIT +templates: [] description: A static blog generator script without any fuzz --- diff --git a/src/site/generators/amagaki.md b/src/site/generators/amagaki.md new file mode 100644 index 000000000..10130827f --- /dev/null +++ b/src/site/generators/amagaki.md @@ -0,0 +1,66 @@ +--- +title: Amagaki +repo: blinkk/amagaki +homepage: https://amagaki.dev +language: + - TypeScript +license: + - MIT +templates: + - Nunjucks + - React + - Closure Templates +startertemplaterepo: https://github.com/blinkk/amagaki-starter +description: A TypeScript site generator for hand-coding interactive marketing sites. +--- + +Amagaki is a TypeScript site generator specifically made for hand-coding high fidelity interactive marketing sites. It's smaller than Next.js or Gatsby, and offers more than Jekyll. It facilitates best practices for building content-heavy marketing sites, and it's fast. + +## Key concepts + +- TypeScript and Node +- Minimal core dependencies +- Inbuilt build metrics (memory usage, generated file size, routes, locales, translations) +- A static site generator (not a frontend framework) +- Renders pages at request time (unlike other static generators which watch and rebuild) +- Localization is an inbuilt feature +- Custom YAML types for extending the content layer +- Benchmarking inbuilt +- Separate your content (YAML, Markdown) from your templates with ease + +## Plugin system + +- Extensive hook system for adding steps throughout the lifecycle +- Multiple template languages (Nunjucks as default, React, Closure Templates plugins available) +- Supports CMS integration via dynamic routing +- Google Sheets plugin for managing content within Google Sheets + +## Quick start + +Amagaki is distributed as an npm package. We recommend using our starter when building marketing websites from scratch. + +```shell +git clone https://github.com/blinkk/amagaki-starter +npm install + +# Start the dev server +npm run dev + +# Build the site +npm run build +``` + +If you are integrating into an existing project, you can install Amagaki directly. + +```shell +# Install Amagaki +npm install --save @amagaki/amagaki + +# Start the dev server +npx amagaki serve + +# Build the site +npx amagaki build +``` + +Check out the full documentation at [amagaki.dev](https://amagaki.dev/). diff --git a/src/site/generators/analog.md b/src/site/generators/analog.md new file mode 100644 index 000000000..01990348e --- /dev/null +++ b/src/site/generators/analog.md @@ -0,0 +1,47 @@ +--- +title: Analog +repo: analogjs/analog +homepage: https://analogjs.org/ +language: + - TypeScript +license: + - MIT +templates: + - Angular +description: Analog is a fullstack meta-framework for building applications and websites with Angular +twitter: analogjs +--- + +Analog is a fullstack meta-framework for building applications and websites with Angular, powered by Vite. + +## Features + +- Hybrid SSR/SSG support +- File-based routing +- Support for using markdown as content routes +- Support for API/server routes + +## Configuration + +SSR and SSG can be enabled in the `vite.config.ts` using the `analog()` plugin. + +```javascript +import { defineConfig } from 'vite'; +import analog from '@analogjs/platform'; + +// https://vitejs.dev/config/ +export default defineConfig(({ mode }) => ({ + plugins: [analog({ + ssr: true, // enables server side rendering + static: true, // enables static site generation + prerender: { // configure routes to be rendered at build time + routes: async () => [ + '/', + '/about', + '/blog', + '/blog/posts/2023-02-01-my-first-post', + ], + }, + })], +})); +``` \ No newline at end of file diff --git a/src/site/generators/anodize.md b/src/site/generators/anodize.md index c4b2eb64d..97dd4f57a 100644 --- a/src/site/generators/anodize.md +++ b/src/site/generators/anodize.md @@ -13,8 +13,4 @@ description: Generate modern pages from minimal source files. Anodize exists because I was too lazy to learn how to use Jekyll. Its continuing mission: to boldly generate functional, SE-optimized websites from as little source data as possible. -Anodize currently powers Sid Mani's blog at [www.sidmani.com](https://www.sidmani.com). - -You can get anodize as a command-line tool on [npm](https://www.npmjs.com/package/anodize): -`$ npm install -g anodize` -`$ anodize init` +Anodize currently powers Sid Mani's blog at [www.sidmani.com](https://www.sidmani.com). \ No newline at end of file diff --git a/src/site/generators/astro.md b/src/site/generators/astro.md new file mode 100644 index 000000000..78e476e35 --- /dev/null +++ b/src/site/generators/astro.md @@ -0,0 +1,26 @@ +--- +title: Astro +repo: withastro/astro +homepage: https://astro.build +language: + - JavaScript + - TypeScript +license: + - MIT +templates: + - Svelte + - React + - Preact + - Vue + - SolidJS + - Lit + - AlpineJS + - HTML + - Markdown + - MDX +description: Build faster websites with less client-side Javascript +startertemplaterepo: https://github.com/netlify-templates/astro-platform-starter +--- +Astro is a fresh but familiar approach to building websites. +Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. +Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default. diff --git a/src/site/generators/atas.md b/src/site/generators/atas.md new file mode 100644 index 000000000..873a8e993 --- /dev/null +++ b/src/site/generators/atas.md @@ -0,0 +1,14 @@ +--- +title: Ata's SSG +repo: atas/ssg +homepage: https://github.com/atas/ssg +language: + - PHP +license: + - MIT +templates: + - HTML +description: Simple PHP Static Site Generator for GitHub Pages. +--- + +Ata's SSG is a simple static site generator written in PHP which deploys to GitHub Pages by default. It doesn't use frameworks, just uses vanilla PHP and vanilla HTML. It supports both markdown and PHP pages There is a simple blog support through the markdown files. It provides instant previews using the built-in web server. It's incredibly simple, flexible, just requires basic knowledge of PHP, HTML and deploys to free GitHub pages (if your repo is public). diff --git a/src/site/generators/bagatto.md b/src/site/generators/bagatto.md new file mode 100644 index 000000000..5ee0867ed --- /dev/null +++ b/src/site/generators/bagatto.md @@ -0,0 +1,35 @@ +--- +title: Bagatto +homepage: https://bagatto.co +language: + - Janet +license: + - BSD-3 +templates: + - Temple +description: A transparent, extensible static site generator. +--- + +![Il Mago](https://git.sr.ht/~subsetpark/bagatto/blob/master/assets/logo-trans.png) + +## A transparent, extensible static site generator + +Bagatto is a static site generator written in [Janet][janet]. + +It is inspired most directly by Garrett Smith's [LambdaPad][lp], a SSG +in Erlang. LambdaPad falls more to code side of the config--code +spectrum, and Bagatto follows that philosophy. Thus, it's designed to +expose the full expressive power and extensiblity of the language it's +written in. Janet is a lisp that's designed for simplicity and ease of +embedding, and thus it's a very good fit for this model. + +[janet]: https://janet-lang.org/index.html +[lp]: https://github.com/gar1t/lambdapad + +To create a Bagatto website, you should create a single Janet source +file. Because you're writing normal source code, you have the full +power of the Janet language at your disposal. Bagatto tries to keep +the "magic" to a minimum; in all cases, it tries to make the process +of loading source files and of generating new files completely +transparent, inspectable and extensible. + diff --git a/src/site/generators/bashblog-ng.md b/src/site/generators/bashblog-ng.md index 1b4028e46..bc1a50023 100644 --- a/src/site/generators/bashblog-ng.md +++ b/src/site/generators/bashblog-ng.md @@ -6,8 +6,7 @@ language: - Bash license: - GPL-3.0-only -templates: - - None +templates: [] description: Bash script to create and manage blogs. --- diff --git a/src/site/generators/bashblog.md b/src/site/generators/bashblog.md index 52652f4a4..dfd827d9b 100644 --- a/src/site/generators/bashblog.md +++ b/src/site/generators/bashblog.md @@ -6,8 +6,7 @@ language: - Bash license: - GPL-3.0-only -templates: - - None +templates: [] description: A single Bash script to create blogs. --- diff --git a/src/site/generators/basildon.md b/src/site/generators/basildon.md index e8b2c0a2f..a0c88349e 100644 --- a/src/site/generators/basildon.md +++ b/src/site/generators/basildon.md @@ -9,6 +9,7 @@ license: templates: - Twig description: Generates HTML, PDF (via LaTeX), and any other text output from Markdown content and Twig templates. +startertemplaterepo: https://github.com/samwilson/basildon-skeleton --- Basildon has three key differences from other similar static site generators that are based around Markdown and Yaml frontmatter: diff --git a/src/site/generators/beautiful-jekyll.md b/src/site/generators/beautiful-jekyll.md new file mode 100644 index 000000000..424b2445a --- /dev/null +++ b/src/site/generators/beautiful-jekyll.md @@ -0,0 +1,14 @@ +--- +title: beautiful-jekyll +repo: daattali/beautiful-jekyll +homepage: https://beautifuljekyll.com/ +language: + - HTML +license: + - MIT +templates: + - Custom +description: A beautiful Jekyll based static site generator +--- + +Beautiful Jekyll is a ready-to-use template to help you create a beautiful website quickly. Perfect for personal sites, blogs, or simple project websites. \ No newline at end of file diff --git a/src/site/generators/bestatic.md b/src/site/generators/bestatic.md new file mode 100644 index 000000000..22f489456 --- /dev/null +++ b/src/site/generators/bestatic.md @@ -0,0 +1,50 @@ +--- +title: Bestatic +repo: tatsatb/bestatic +homepage: https://www.bestaticpy.com/ +language: + - Python +license: + - GPL-3.0-or-later +templates: + - Jinja2 +description: A simple but feature-rich static site generator, written in Python and Jinja2. +--- + +# Bestatic + +![Screenshot](https://raw.githubusercontent.com/tatsatb/bestatic/main/favicon_package/Bestatic_Logo_svg.svg) + +## Detailed documentation is available on the [official website](https://www.bestaticpy.com/). + +Bestatic is a simple but powerful static-site generator that you can install graphically without worrying about dependencies. It can simply turn your text files into fully functional websites and blogs. + +It is really minimal yet feature-rich. Like every other static-site generator, +it can generate a complete website by processing a bunch of markdown files. As a result, +it eliminates the need for server-side programming, databases, and constant security updates. The site that _Bestatic_ generates can be served from any web server or host (or even from Git-based platforms, for completely free). + +Some salient features of _Bestatic_ that are probably worth highlighting: + +- **Blog-aware**. You can easily create your blog/news page along with your website. Customizable list pages for blog posts, reverse chronological order of posts, tags, comments (using Giscus or Disqus), URL customizations, RSS feeds - All standard good stuff are already included. + + +- **Feature-rich**. Want LaTeX support? Syntax highlighting for code? Powerful search functionality? Auto-reloading server? We have all these things out-of-the box. + + + +- **Flexible**. Want to configure things? Use simple yaml file. Want to use command line? Use our CLI options. Want to theme in your own way? Use standard Jinja2 templating to design freely. + + +- **Scalable**. Bestatic ultimately builds a bunch of static files. So, no need for database management, server maintenance, or constant security updates. A hassle-free way to manage large-scale websites. + +- **Free and open-source**. Of course, Bestatic is free and open-source, licensed under GNU GPL-3.0. This will remain free and open-source forever. + + +- **Simple**. Making things simple for you is our goal. Be it via graphical installation, OS compatibility, dedicated quickstart, or in-depth documentation: We just want to make your Bestatic journey easy and enjoyable for the beginning! + + +## Getting started + +Want to try Bestatic? Download and install it from the [release page](https://github.com/tatsatb/bestatic/releases/latest), or [Snap store](https://snapcraft.io/bestatic), or [Flathub](https://flathub.org/apps/com.bestaticpy.bestatic), or [PyPI](https://pypi.org/project/Bestatic/). You can use Bestatic on Windows, Linux, and macOS. + +Detailed installation instructions, quickstart guide, and user manual are available on our [official documentation](https://www.bestaticpy.com/docs/). diff --git a/src/site/generators/blazorstatic.md b/src/site/generators/blazorstatic.md new file mode 100644 index 000000000..9a86eb83c --- /dev/null +++ b/src/site/generators/blazorstatic.md @@ -0,0 +1,21 @@ +--- +title: BlazorStatic +repo: tesar-tech/BlazorStatic +homepage: https://github.com/tesar-tech/BlazorStatic +language: + - C# + - .Net +license: + - AGPL-3.0 license +templates: + - Razor +description: Transform your Blazor app into a static site generator +--- + +Embrace the capabilities of Blazor on .NET 8 to craft static websites. + +## Recommended Starting Point + +Fork or clone [BlazorStaticMinimalBlog](https://github.com/tesar-tech/BlazorStaticMinimalBlog). If offers a quick and convenient way to deploy your site within minutes. + +Dive deeper into BlazorStatic and discover its full capabilities! Visit the [BlazorStatic repository](https://github.com/tesar-tech/BlazorStatic) for a comprehensive breakdown of its features and functionalities. diff --git a/src/site/generators/blog.sh.md b/src/site/generators/blog.sh.md deleted file mode 100644 index 875e3e999..000000000 --- a/src/site/generators/blog.sh.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: blog.sh -repo: thalios1973/blog.sh -homepage: https://github.com/thalios1973/blog.sh -language: - - Bash -license: - - MIT -templates: - - Custom -description: A simple static blog generation tool in bash that supports markdown. ---- - -blog.sh is a relatively simple static blog generation tool written in bash. It supports markdown (via pandoc, but other converters could be used) and a very basic templating system. It is designed for simplicity and easy of hacking. - -## Features - -- Create new -- Save to draft -- Edit existing or draft -- Complete rebuild of site (good for updating template) -- Basic templating -- RSS 2.0 - -## Planned (aka things I haven't found time for) - -- Default .config file -- Default basic template (one doesn't exist) -- Static page support -- Document classes and ids available for CSS -- Delete post - -blog.sh was heavily inspired by Carlos Fenollosa's [bashblog](https://github.com/cfenollosa/bashblog). diff --git a/src/site/generators/blogc.md b/src/site/generators/blogc.md index 82f278370..1ec25bcf8 100644 --- a/src/site/generators/blogc.md +++ b/src/site/generators/blogc.md @@ -9,7 +9,7 @@ license: templates: - Custom description: A blog compiler. -startertemplaterepo: blogc/blogc-netlify +startertemplaterepo: https://github.com/blogc/blogc-netlify --- blogc is a blog compiler. It converts source files and templates into blog/website resources. It is designed to be used with `make` or any other similar build tool. It is also stateless and idempotent, no state is shared between blogc binary calls. diff --git a/src/site/generators/blogcpp.md b/src/site/generators/blogcpp.md new file mode 100644 index 000000000..b8276daa0 --- /dev/null +++ b/src/site/generators/blogcpp.md @@ -0,0 +1,16 @@ +--- +title: BlogC++ +repo: dertuxmalwieder/blogcpp +homepage: https://blogcpp.org +language: + - C++ +license: + - WTFPL +templates: + - Jinja2 +description: 'A static blog generator, written in C++17.' +--- + +BlogC++ is yet another static blog generator, written in C++17. + +It aims to provide a decent feature set without requiring too much configuration. diff --git a/src/site/generators/blogdown-r.md b/src/site/generators/blogdown-r.md index 143dd19ab..5e043bc9f 100644 --- a/src/site/generators/blogdown-r.md +++ b/src/site/generators/blogdown-r.md @@ -7,7 +7,8 @@ language: license: - GPL-3 templates: - - R, R Markdown + - R + - R Markdown description: Create Blogs and Websites with R Markdown --- diff --git a/src/site/generators/bloggrify.md b/src/site/generators/bloggrify.md new file mode 100644 index 000000000..7982e222b --- /dev/null +++ b/src/site/generators/bloggrify.md @@ -0,0 +1,30 @@ +--- +title: Bloggrify +repo: hlassiege/bloggrify +homepage: https://bloggrify.com +language: + - TypeScript +license: + - MIT +templates: + - Markdown +description: A static blog generator built on top of Nuxt-content +--- + +Bloggrify is built on top of +* Nuxt.js +* Tailwind CSS +* Nuxt-Content +* and other cool stuff (Hyvor Talk, mailerlite, etc...) + +It is a static blog generator that uses markdown files to generate blog posts. + +### Features + +- Flexible file structure +- Extended Markdown +- RSS feed +- Comment system +- 100/100 pagespeed results +- SEO best practices + sitemap generation +- Templating system diff --git a/src/site/generators/cactus.md b/src/site/generators/cactus.md index 7ed062049..a3243fdee 100644 --- a/src/site/generators/cactus.md +++ b/src/site/generators/cactus.md @@ -9,7 +9,7 @@ license: templates: - Django description: Static site generator for designers. -startertemplaterepo: netlify-templates/cactus-base +startertemplaterepo: https://github.com/netlify-templates/cactus-base --- Cactus is a simple but powerful [static website generator](https://davidwalsh.name/introduction-static-site-generators) using Python and the [Django template system](http://docs.djangoproject.com/en/dev/topics/templates/). Cactus also makes it easy to develop locally and deploy your site to S3 directly. It works great for company, portfolio, personal, support websites and blogs. diff --git a/src/site/generators/capri.md b/src/site/generators/capri.md new file mode 100644 index 000000000..e4369cd84 --- /dev/null +++ b/src/site/generators/capri.md @@ -0,0 +1,19 @@ +--- +title: Capri +repo: capri-js/capri +homepage: https://capri.build +language: + - TypeScript +license: + - MIT +templates: + - React + - Preact + - SolidJS +description: Build static sites with interactive islands. +--- +Capri is a static site generator with a component-based workflow. Websites +built with Capri ship zero KB of JavaScript to the browser by default. You can +selectively add interactive islands that get hydrated when the page loads. +Capri supports live CMS previews by generating an SPA right next to the +static pages. diff --git a/src/site/generators/cecil.md b/src/site/generators/cecil.md index 454eeed17..303353fa3 100644 --- a/src/site/generators/cecil.md +++ b/src/site/generators/cecil.md @@ -9,7 +9,7 @@ license: templates: - Twig description: Your content driven static site generator. -startertemplaterepo: Cecilapp/the-butler +startertemplaterepo: https://github.com/Cecilapp/the-butler twitter: Cecil_Static --- diff --git a/src/site/generators/charge.md b/src/site/generators/charge.md index 51e5c34fc..33c5e1c0f 100644 --- a/src/site/generators/charge.md +++ b/src/site/generators/charge.md @@ -8,6 +8,7 @@ license: - MIT templates: - React + - MDX - JSX description: An opinionated, zero-config static site generator --- diff --git a/src/site/generators/cleaver.md b/src/site/generators/cleaver.md index 411d47ef1..cec7fa8ac 100644 --- a/src/site/generators/cleaver.md +++ b/src/site/generators/cleaver.md @@ -1,7 +1,7 @@ --- title: Cleaver +homepage: https://usecleaver.com/ repo: aschmelyun/cleaver -homepage: https://usecleaver.com language: - PHP license: diff --git a/src/site/generators/cmints.md b/src/site/generators/cmints.md index b3bd0fa67..3f6feca93 100644 --- a/src/site/generators/cmints.md +++ b/src/site/generators/cmints.md @@ -9,7 +9,7 @@ license: templates: - EJS description: CMS and Static Site Generator for single and multi-language websites creation. -startertemplaterepo: cmints/multi-lang-starter +startertemplaterepo: https://github.com/cmints/multi-lang-starter --- [CMintS](https://cmints.io/) is a CMS and Static Site Generator for single and diff --git a/src/site/generators/codedoc.md b/src/site/generators/codedoc.md index 7623ae0a2..eeb73193a 100644 --- a/src/site/generators/codedoc.md +++ b/src/site/generators/codedoc.md @@ -7,7 +7,9 @@ language: license: - MIT templates: - - Markdown, JSX/TSX + - Markdown + - JSX + - TSX description: Beautiful, component-based JAMStack sites for software docs/wiki --- diff --git a/src/site/generators/coppersmith.md b/src/site/generators/coppersmith.md index 05b9e7cdc..3280779ba 100644 --- a/src/site/generators/coppersmith.md +++ b/src/site/generators/coppersmith.md @@ -1,7 +1,7 @@ --- title: CopperSmith repo: charlgottschalk/coppersmith -homepage: http://charlgottschalk.co.za/projects/coppersmith +homepage: https://charlgottschalk.github.io/coppersmith/docs/ language: - JavaScript license: diff --git a/src/site/generators/coralite.md b/src/site/generators/coralite.md new file mode 100644 index 000000000..ee3cb5b9c --- /dev/null +++ b/src/site/generators/coralite.md @@ -0,0 +1,15 @@ +--- +title: Coralite +repo: tjdav/coralite +homepage: https://coralite.io +language: + - JavaScript + - TypeScript +license: + - AGPL-3.0 +templates: + - HTML + - Web Components +description: Build for the Web, With the Web! +--- +Build with HTML Modules. Coralite is a static site generator for web developers who prefer native technologies. Create websites using standard HTML, CSS, and JavaScript – no new syntax to learn. Coralite features a flexible templating system with custom elements, powerful data handling, and extendable plugins for automated content organization and more.` \ No newline at end of file diff --git a/src/site/generators/curvenote.md b/src/site/generators/curvenote.md new file mode 100644 index 000000000..8c7ee4b8f --- /dev/null +++ b/src/site/generators/curvenote.md @@ -0,0 +1,36 @@ +--- +title: Curvenote +repo: curvenote/curvenote +homepage: http://curvenote.com/docs/web +language: + - Javascript +license: + - MIT +templates: + - React +description: A website generator for scientific and technical articles +--- + +Curvenote allows you to easily publish scientific content on the web as a +fast, optimized website using Markdown (MyST) and Jupyter Notebooks. + +### Features + +- Write content in Markdown extended with [MyST directives](https://myst-parser.readthedocs.io/) +- Create pages using Jupyter Notebooks +- Latex based inline math and equations +- Figures from images or Jupyter Notebook outputs, with captions and numbering +- Include interactive plots using Altair, Ploty or Bokeh +- Citations and References lists +- numbering and cross referencing for equations, tables and figures +- Optionally work in an [online visual editor](https://curvenote.com) and update local content from the command line +- [Start from a GitHub repo](https://try.curvenote.com/) + +### Examples + +- [Technical Blogging](https://www.stevejpurves.com/blog) +- [Climasoma Synthesis Report](https://climasoma.curve.space/) +- [Transform 22 Conference](https://transform.softwareunderground.org/overview) +- [SIMPEG Research Seminars](https://seminars.simpeg.xyz/) +- [A PhD Thesis](https://phd.row1.ca/phd) +- [La Palma Eruption Preprint](https://www.stevejpurves.com/la-palma-earthquakes) diff --git a/src/site/generators/cuttlebelle.md b/src/site/generators/cuttlebelle.md index 8ab79c7fa..ca838a149 100644 --- a/src/site/generators/cuttlebelle.md +++ b/src/site/generators/cuttlebelle.md @@ -9,7 +9,7 @@ license: templates: - React description: The react static site generator that separates editing and code concerns -startertemplaterepo: cuttlebelle/website +startertemplaterepo: https://github.com/cuttlebelle/website --- > The react static site generator that separates editing and code concerns diff --git a/src/site/generators/django-distill.md b/src/site/generators/django-distill.md index bae7cd5ce..3782bf0e7 100644 --- a/src/site/generators/django-distill.md +++ b/src/site/generators/django-distill.md @@ -1,7 +1,7 @@ --- title: django-distill -repo: mgrp/django-distill -homepage: https://github.com/mgrp/django-distill +repo: meeb/django-distill +homepage: https://github.com/meeb/django-distill language: - Python license: @@ -11,23 +11,27 @@ templates: description: django-distill lets you to create and publish a static website from any Django project. --- -django-distill is a simple to implement static site generator for Django. It +`django-distill` is a simple to implement static site generator for Django. It is fully compatible with all Django projects and works with existing complex Django applications without interfering. It does not require modifications to existing apps and only small per-URL functions need to be created. -django-distill is designed to integrate with existing Django projects and does +`django-distill` is designed to integrate with existing Django projects and does not require learning any new framework or file structures to use. +A fully working example of using `django-distill` with a Django blog is available here +[https://github.com/meeb/django-distill-example](https://github.com/meeb/django-distill-example) + ### Features - Full compatibility with all Django projects - No overhead when added to existing projects - Trivial to add to existing Django sites +- Easy to integrate into CI/CD processes - Uses the standard Django project structure and does not require learning a new sub-framework - Can generate static pages for all or just part of your project -- Full support for publishing to S3 and Rackspace Cloud Files with remote checks -- Validation of remote containers on S3 and Rackspace Cloud Files +- Full support for publishing to S3, Google Cloud Storage and Rackspace Cloud Files with remote checks +- Validation of remote containers on S3, Google Cloud Storage and Rackspace Cloud Files - Generation is identical to the output of existing dynamic Django content - Simple to implement and debug - Only modification required is to `urls.py` and `settings.py` diff --git a/src/site/generators/docpad.md b/src/site/generators/docpad.md index 47bac764b..e40c627d5 100644 --- a/src/site/generators/docpad.md +++ b/src/site/generators/docpad.md @@ -41,7 +41,7 @@ Discover my features below, or skip ahead to the installation instructions to ge - Use the [Partials Plugin](http://docpad.org/plugin/partials) to abstract common pieces of code into their own individual file that can be included as much as you want - Syntax highlight code blocks automatically with either our [Highlight.js Plugin](http://docpad.org/plugin/highlightjs/) or [Pygments Plugin](http://docpad.org/plugin/pygments/) - Get SEO friendly clean URLs with our [Clean URLs Plugin](http://docpad.org/plugin/cleanurls/) (dynamic deployments only) -- Lint your code automatically with our Lint Plugins: [jshint](https://github.com/jking90/docpad-plugin-jshint) and [coffeelint](https://github.com/jking90/docpad-plugin-coffeelint) +- Lint your code automatically with our Lint Plugins: [jshint](https://github.com/docpad/docpad-plugin-jshint) and [coffeelint](https://github.com/docpad/docpad-plugin-coffeelint) - Concatenate and minify your JavaScript and CSS assets making page loads faster for your users with our Minify Plugins: [htmlmin](https://github.com/robloach/docpad-plugin-htmlmin) and [grunt](https://gist.github.com/balupton/3898915) - Install common javascript libraries like jQuery, Backbone and Underscore directly from the command line - under construction, coming soon - Automatically translate your entire website into other languages with our Translation Plugin - under construction, coming soon diff --git a/src/site/generators/docsify.md b/src/site/generators/docsify.md index eb6c07597..42fd59ae6 100644 --- a/src/site/generators/docsify.md +++ b/src/site/generators/docsify.md @@ -22,4 +22,4 @@ Multiple themes - [CLI](https://github.com/docsifyjs/docsify-cli) - CDN: [UNPKG](https://unpkg.com/docsify/) | [jsDelivr](https://cdn.jsdelivr.net/npm/docsify/) | [cdnjs](https://cdnjs.com/libraries/docsify) - [Awesome docsify](https://github.com/docsifyjs/awesome-docsify) -- [Community chat](https://gitter.im/docsifyjs/Lobby) +- [Community chat](https://discord.gg/3NwKFyR) diff --git a/src/site/generators/docsy.md b/src/site/generators/docsy.md new file mode 100644 index 000000000..184190bd6 --- /dev/null +++ b/src/site/generators/docsy.md @@ -0,0 +1,18 @@ +--- +title: Docsy +repo: google/docsy +homepage: https://www.docsy.dev/ +language: + - Go +license: + - Apache License 2.0 +templates: + - Go +description: A Hugo theme for creating great technical documentation sites +startertemplaterepo: https://github.com/google/docsy/tree/main/layouts +twitter: docsydocs +--- + +Docsy is a pre-configured Hugo theme that provides the core features and behaviors needed to create a technical documentation site. + +Use Docsy to set up your documentation website, including an optional Blog section, and then spend your time focusing on authoring technical content. Depending on how you choose to configure Docsy and whether you use a hosting service that supports continuous builds, you can even just add your Markdown or HTML content file into a folder on your source repository, and then sit back while it automatically gets added to your site - complete with updated menus. diff --git a/src/site/generators/docusaurus.md b/src/site/generators/docusaurus.md index d933d7f2b..c0c73f6dd 100644 --- a/src/site/generators/docusaurus.md +++ b/src/site/generators/docusaurus.md @@ -10,7 +10,7 @@ templates: - React - Markdown description: 'Build optimized websites quickly, focus on your content' -startertemplaterepo: anishkny/docusaurus-base +startertemplaterepo: https://github.com/anishkny/docusaurus-base twitter: docusaurus --- diff --git a/src/site/generators/dssg.md b/src/site/generators/dssg.md index 500c37864..1cf27e97a 100644 --- a/src/site/generators/dssg.md +++ b/src/site/generators/dssg.md @@ -9,7 +9,7 @@ license: templates: - Mustache description: A static site generator with a different approach -startertemplaterepo: kambrium/dssg-example +startertemplaterepo: https://github.com/kambrium/dssg-example --- Unlike other static site generators, DSSG doesn't differentiate between front matter and a content section in its content files. This makes it very easy to create web pages based on templates with multiple content sections. diff --git a/src/site/generators/elderjs.md b/src/site/generators/elderjs.md index 794950eda..df75354d6 100644 --- a/src/site/generators/elderjs.md +++ b/src/site/generators/elderjs.md @@ -5,7 +5,7 @@ homepage: https://elderguide.com/tech/elderjs/ language: - JavaScript license: - - MIT License + - MIT templates: - Svelte description: An opinionated, SEO focused, static site generator for Svelte. diff --git a/src/site/generators/eleventy.md b/src/site/generators/eleventy.md index c12fe4a26..2d7716b07 100644 --- a/src/site/generators/eleventy.md +++ b/src/site/generators/eleventy.md @@ -18,7 +18,7 @@ templates: - HTML - Markdown description: A simpler static site generator -startertemplaterepo: 11ty/eleventy-base-blog +startertemplaterepo: https://github.com/netlify-templates/eleventy-blog-starter twitter: eleven_ty --- diff --git a/src/site/generators/elm-pages.md b/src/site/generators/elm-pages.md index dd4002605..e746897fd 100644 --- a/src/site/generators/elm-pages.md +++ b/src/site/generators/elm-pages.md @@ -9,7 +9,7 @@ license: templates: - Elm description: Build fast, modern sites with Elm's delightful type system to help you! 📚 -startertemplaterepo: dillonkearns/elm-pages-starter +startertemplaterepo: https://github.com/dillonkearns/elm-pages-starter twitter: elm_pages --- diff --git a/src/site/generators/elm-starter.md b/src/site/generators/elm-starter.md index 06684306e..9bda6e00e 100644 --- a/src/site/generators/elm-starter.md +++ b/src/site/generators/elm-starter.md @@ -8,7 +8,7 @@ license: - BSD-3-Clause templates: - Elm -startertemplaterepo: lucamug/elm-starter +startertemplaterepo: https://github.com/lucamug/elm-starter description: An Elm-based bootstrapper for Elm applications that supports server side rendering --- diff --git a/src/site/generators/ema.md b/src/site/generators/ema.md new file mode 100644 index 000000000..6cb67b68a --- /dev/null +++ b/src/site/generators/ema.md @@ -0,0 +1,16 @@ +--- +title: Ema +repo: srid/ema +homepage: https://ema.srid.ca +language: + - Haskell +license: + - AGPL +templates: + - User's choice +description: Haskell static site generator with hot reload +--- + +Ema is a next-gen Haskell library toolkit for building jamstack-style static sites. Ema sites are change-aware; in addition to good ol’ static site generation, it provides a live server supporting fast hot-reload in the browser on code or data change. + +Ema is designed to facilitate creation of apps whose data is normally edited via traditional mechanisms (eg: text editor) but rendered as a delightful web page - so as to provide an economical read-only view of your data on desktop & mobile. diff --git a/src/site/generators/empress-blog.md b/src/site/generators/empress-blog.md index f5f7bd50e..824d06290 100644 --- a/src/site/generators/empress-blog.md +++ b/src/site/generators/empress-blog.md @@ -10,7 +10,7 @@ templates: - Ember - Markdown description: Fully-functional, SEO friendly static site implementation of a blog system built on Ember -startertemplaterepo: empress/empress-blog-netlify-casper-template +startertemplaterepo: https://github.com/empress/empress-blog-netlify-casper-template --- This project is designed to be a fully-functional, static site implementation of a blog system that is mostly compatible with [Ghost](https://ghost.org/) and is built on EmberJS with fully working out of the box SEO friendly output. diff --git a/src/site/generators/endurojs.md b/src/site/generators/endurojs.md index a6b6f4947..67b02c744 100644 --- a/src/site/generators/endurojs.md +++ b/src/site/generators/endurojs.md @@ -9,7 +9,7 @@ license: templates: - Handlebars description: 'Minimalistic, lean & mean, node.js static page generator' -startertemplaterepo: gottwik/enduro_mirror +startertemplaterepo: https://github.com/gottwik/enduro_mirror --- ## Built for speed diff --git a/src/site/generators/engineer.md b/src/site/generators/engineer.md new file mode 100644 index 000000000..b402b4c88 --- /dev/null +++ b/src/site/generators/engineer.md @@ -0,0 +1,45 @@ +--- +title: Engineer +repo: tylerbutler/engineer +homepage: https://engineer.readthedocs.io/en/master/index.html +language: + - Python +license: + - MIT +templates: + - Jinja2 +description: 'Featureless static website generator' +--- +## Overview + +At its core, Engineer is a static website generator. In other words, Engineer let’s you build a website from a bunch of files - articles written in Markdown, templates, and other stuff - and outputs another bunch of files - HTML, mostly - that you can then copy wherever you want. + +Engineer was inspired by Brent Simmons, Marco Arment’s Second Crack, Jekyll, Octopress, and Hyde. + +## Features + +- Write posts from anywhere + - Posts can be written/edited in Markdown and stored/synchronized using Dropbox or another file synchronization solution. +- Preview your site locally + - Engineer includes a small development web server that you can use to preview your site locally without deploying anywhere. +- Manage your site remotely + - Even baked sites need a little management, and many existing static generators require you to load up the terminal and execute a command to rebuild your site. Engineer lets you do that of course, but also provides Emma, a built-in mini management site (optional) that lets you do most of the common management tasks remotely. +- Themes make it easy to change your site’s appearance + - Themes provide flexibility in the site look and feel without starting from scratch or rewriting a bunch of content. You can write your own Themes as well. +- Use LESS instead of CSS + Engineer lets you use LESS instead of CSS if you’d like. LESS can either be preprocessed on the server (requires that lessc be installed on non-Windows systems) or processed client-side using less.js. +- It’s fast + - Engineer outputs content quickly (and I’m working to make it even faster), and because the output content is completely static, it is blazingly fast to serve, scales up very well, and is completely independent of any specific web server or technology. Once generated, you can copy your site anywhere and use any web server you like. In addition, Engineer can optimize your JavaScript and CSS/LESS to minimize their size. Engineer is all about speed. + +## Caveats + +Despite all of these great features, there are some things that you might not like: + +- Dynamic things require a bit more work + - Static sites can feel limited if you’re accustomed to doing something super-dynamic every time a page is loaded. Most of these things can be handled using either client-side JavaScript (e.g. timeago.js) or clever uses of the Jinja 2 template system (see the navigation highlighting functionality in Engineer itself for an example of things that can be done). +- Might not fit your site’s needs + - If you have a lot of one-off pages (Template Pages or other such things) then managing them can get a bit cumbersome. Engineer really excels when a majority of your site’s content has a similar look and feel and you can leverage the Metadata for a majority of your content. Engineer isn’t limited to blogs, per se, but it does make some assumptions that most of your content comes in the form of articles. +- Only supports Markdown and Jinja 2 + - While ideally this will not always be true, currently Engineer requires your posts be written in Markdown and any templates you create be written in Jinja 2. This may change in the future, but for now you have to use those two languages. +- Engineer is not a CMS + - If you’re looking for a full-blown content management system, then... keep looking. Engineer is decidedly not what you want. Engineer operates on the basic principle that your content is stored in text files with minimal metadata in the files themselves, so if you’re looking for rich URL management, image/file manipulation capabilities, etc., Engineer will make you very sad. It’s not designed to do that stuff. diff --git a/src/site/generators/expansive.md b/src/site/generators/expansive.md index 0836d9cb0..96d4ec623 100644 --- a/src/site/generators/expansive.md +++ b/src/site/generators/expansive.md @@ -7,7 +7,7 @@ language: - Ejscript license: - GPL-2.0-only - - Commercial + - Embedthis Commercial templates: - Ejscript description: Expansive is a static site generator. It is written in Ejscript, and is blazing fast. diff --git a/src/site/generators/finch.md b/src/site/generators/finch.md new file mode 100644 index 000000000..2e5a74ff6 --- /dev/null +++ b/src/site/generators/finch.md @@ -0,0 +1,16 @@ +--- +title: finch +repo: roddyyaga/finch +homepage: https://roddyyaga.github.io/finch/ +language: + - OCaml +license: + - MIT +templates: + - Jingoo +description: A really fast and simple static site generator in OCaml +--- + +Finch is a simple static site generator written in OCaml. It builds sites from content in the standard Markdown plus +YAML frontmatter format, with the OCaml version of Jinja for templating. It is very fast: about twice the speed of Hugo +to build a simple site with ~100k pages in informal benchmarking. \ No newline at end of file diff --git a/src/site/generators/fornax.md b/src/site/generators/fornax.md new file mode 100644 index 000000000..bec04b196 --- /dev/null +++ b/src/site/generators/fornax.md @@ -0,0 +1,21 @@ +--- +title: Fornax +repo: ionide/Fornax +homepage: https://ionide.io/Tools/fornax.html +language: + - F# +license: + - MIT +templates: + - Type Safe F# DSL +description: Scriptable static site generator using type safe F# DSL to define page templates. +--- + +Fornax is a scriptable static site generator using type safe F# DSL to define page layouts. + +## Working features + +* Creating custom data loaders using `.fsx` files, meaning you can use anything you can imagine as a source of data for your site, not only predefined `.md` or `.yml` files +* Creating custom generators using `.fsx` files, meaning you can generate any type of output you want +* Dynamic configuration using `.fsx` file +* Watch mode that rebuilds your page whenever you change data, or any script file. diff --git a/src/site/generators/fossfolio.md b/src/site/generators/fossfolio.md new file mode 100644 index 000000000..0a0bae12c --- /dev/null +++ b/src/site/generators/fossfolio.md @@ -0,0 +1,23 @@ +--- +title: Fossfolio +repo: fossworx-labs/fossfolio +homepage: http://fossworx-labs.github.io/fossfolio +language: + - Python +license: + - MIT +templates: + - Jinja2 +description: Probably the simplest static site generator in the world! +--- + +FOSSFolio is a Free and Open Source Software (FOSS) meant for developers to create their own static websites (mostly portfolios), with fine-grained control. It's built on Python 3.9 with Markdown and Jinja2 templating support, with minimal dependencies. +Intended for developers who want a quick setup for their static sites, FOSSFolio offers an intuitive, easy to understand and (possibly) limitless extensibility. + +## Spotlight + +- **Fully Hackable(!)** +- **Plugins to extend functionalities of basic templates:** A plugin can be anything- from replacing a simple placeholder with some simple value, to some complex JavaScript embedding beast, you can do anything with plugins, as long as you follow the rules for [Plugin Development](https://github.com/fossworx-labs/fossfolio/blob/main/README.md#plugin-development) +- **Seamless Jinja2 templating (under development):** You can use the full power of Jinja templating for all your themes, as well as create themes based on it! +- **Flexible page structure:** Whatever page structure you want, you can have it 😃, as long as you place it inside the `content/` folder, directly or indirectly. You just need to have a theme for it (or customize your theme accordingly). +- **Automatic sitemap generation on-the-fly**: Yes, I know that getting the SEO right is a pain. So I implemented an automated sitemap generator, which generates readable sitemaps (to the best of my knowledge) that can be easily crawled by Search Engine Bots 🥳. diff --git a/src/site/generators/franklin.md b/src/site/generators/franklin.md index 1b475a893..66b5ad4d7 100644 --- a/src/site/generators/franklin.md +++ b/src/site/generators/franklin.md @@ -6,7 +6,7 @@ language: - Julia license: - MIT -templates: +templates: [] description: A simple, customisable static site generator oriented towards technical blogging and light, fast-loading pages. --- diff --git a/src/site/generators/fresh.md b/src/site/generators/fresh.md new file mode 100644 index 000000000..da92d5961 --- /dev/null +++ b/src/site/generators/fresh.md @@ -0,0 +1,25 @@ +--- +title: fresh +repo: denoland/fresh +homepage: https://fresh.deno.dev +language: + - node-fetch + - typescript +license: + - MIT +templates: + - next-sh + - tailwindcss +description: Fresh is a next generation web framework, built for speed, reliability, and simplicity +--- + +Fresh is a next generation web framework, built for speed, reliability, and simplicity. Some stand out features: + +- Just-in-time rendering on the edge. +- Island based client hydration for maximum interactivity. +- Zero runtime overhead: no JS is shipped to the client by default. +- No build step. +- No configuration necessary. +- TypeScript support out of the box. + +Fresh embraces the tried and true design of server side rendering and progressive enhancement on the client side. diff --git a/src/site/generators/gatsby.md b/src/site/generators/gatsby.md index 2e6ecbdb3..33ad88994 100644 --- a/src/site/generators/gatsby.md +++ b/src/site/generators/gatsby.md @@ -9,7 +9,7 @@ license: templates: - React description: Build blazing fast, modern apps and websites with React -startertemplaterepo: gatsbyjs/gatsby-starter-default +startertemplaterepo: https://github.com/gatsbyjs/gatsby-starter-default twitter: gatsbyjs --- diff --git a/src/site/generators/generators.11tydata.js b/src/site/generators/generators.11tydata.js index 2e93feb70..03d979c09 100644 --- a/src/site/generators/generators.11tydata.js +++ b/src/site/generators/generators.11tydata.js @@ -1,4 +1,11 @@ +const correctLicense = require("../../11ty/normalizeLicense"); + module.exports = { - layout: "layouts/base.njk", - tags: ["generators"] + layout: "layouts/tool.njk", + tags: ["generators"], + eleventyComputed: { + license: (data) => { + return (data.license || []).map(license => correctLicense(license, data.title)); + } + } } \ No newline at end of file diff --git a/src/site/generators/gopablo.md b/src/site/generators/gopablo.md index ea4293093..c6cc2ed78 100644 --- a/src/site/generators/gopablo.md +++ b/src/site/generators/gopablo.md @@ -1,7 +1,7 @@ --- title: GoPablo repo: luangjokaj/gopablo -homepage: hhttps://www.gopablo.co +homepage: https://www.gopablo.co language: - JavaScript license: diff --git a/src/site/generators/grazedocs.md b/src/site/generators/grazedocs.md new file mode 100644 index 000000000..cc45e03d3 --- /dev/null +++ b/src/site/generators/grazedocs.md @@ -0,0 +1,31 @@ +--- +title: GrazeDocs +repo: mikoskinen/GrazeDocs +homepage: https://grazedocs.io/ +language: + - C# +license: + - MIT +templates: + - Razor +description: 'GrazeDocs is a static site generator for creating documentation for your projects.' +--- +``` +dotnet tool install -g GrazeDocs +``` + +GrazeDocs is a static site generator for creating documentation for your projects. The content is created using Markdown which GrazeDocs converts into a beautiful web site. GrazeDocs provides a live preview feature which allows you to focus on writing your content. + +The default theme is optimized for technical documentation sites. GrazeDocs is open source and MIT licensed. + +Source code is available through https://github.com/mikoskinen/GrazeDocs + +## Features + +- Open source with MIT license +- Clean and light default theme +- Markdown to documentation +- Automatically generated table of contents +- Single or multi-page documentations +- Live preview +- Razor based themes diff --git a/src/site/generators/greenwood.md b/src/site/generators/greenwood.md new file mode 100644 index 000000000..15528944f --- /dev/null +++ b/src/site/generators/greenwood.md @@ -0,0 +1,16 @@ +--- +title: Greenwood +repo: ProjectEvergreen/greenwood +homepage: https://www.greenwoodjs.io +language: + - JavaScript +license: + - MIT +templates: + - HTML + - Web Components +description: Your workbench for the web. +--- +Greenwood embraces web standards to keep the focus on your work, not the framework. Unbundled local development, file based routing, and as simple to start as an index.html or markdown file. From static to serverless, Greenwood is your workbench for the web. + +Checkout out our [Getting Started guide](https://www.greenwoodjs.io/getting-started/) to get started with Greenwood today! \ No newline at end of file diff --git a/src/site/generators/gridsome.md b/src/site/generators/gridsome.md index 5cb280e1f..dd5d7192c 100644 --- a/src/site/generators/gridsome.md +++ b/src/site/generators/gridsome.md @@ -9,7 +9,7 @@ license: templates: - Vue description: Build blazing fast websites for any CMS or data with Vue.js -startertemplaterepo: gridsome/gridsome-starter-default +startertemplaterepo: https://github.com/gridsome/gridsome-starter-default twitter: gridsome --- diff --git a/src/site/generators/gssg.md b/src/site/generators/gssg.md index d332aa36f..63de9fe35 100644 --- a/src/site/generators/gssg.md +++ b/src/site/generators/gssg.md @@ -10,7 +10,7 @@ templates: - HTML description: This is a Generic Static Site Generator, It is written in JavaScript, It can be used to create static websites twitter: Generic_SSG -startertemplaterepo: theabbie/Generic-Static-Site-Generator +startertemplaterepo: https://github.com/theabbie/Generic-Static-Site-Generator --- # Generic Static Site Generator diff --git a/src/site/generators/gustwind.md b/src/site/generators/gustwind.md new file mode 100644 index 000000000..7bddb6421 --- /dev/null +++ b/src/site/generators/gustwind.md @@ -0,0 +1,22 @@ +--- +title: Gustwind +repo: gustwindjs/gustwind +homepage: https://gustwind.js.org/ +language: + - JavaScript (Deno) +license: + - MIT +templates: + - JSON +description: 🐳💨 Deno powered JSON oriented site generator 🦕 +--- + +**🐳💨 Gustwind** is an experimental site generator built on top of Deno. As you might have guessed, it's as fast as the wind itself. + +It has been built on top of JSON based templates. Although this might sound backwards, the approach enables features such as in-site editors (you can edit the site on itself (poc level)) and composition while providing high performance. + +Architecturally Gustwind has been divided into several parts to consider aspects such as routing, data fetching/extraction/manipulation, and layouting. + +It works well with the utility CSS approach (i.e. Tailwind or Twind) and HTML based state managers such as Sidewind or Alpine.js. + +Technically it's in an early stage and only a few sites have been developed using it. While relying on JSON for defining the entire site except for content might feel constraining, it also has surprising benefits as you can literally render the site in-browser (enables the development of and editor on the site itself). diff --git a/src/site/generators/harold.md b/src/site/generators/harold.md new file mode 100644 index 000000000..2405cf96f --- /dev/null +++ b/src/site/generators/harold.md @@ -0,0 +1,21 @@ +--- +title: Harold +repo: juliancwirko/create-harold-app +homepage: https://www.haroldjs.com +language: + - JavaScript +license: + - MIT +templates: + - Handlebars +description: Harold (create-harold-app) is a simple tool that provides ready-to-use templates for creating your static websites and blogs, equipped with search functionality. +twitter: juliancwirko +--- + +Harold (create-harold-app) is a simple tool that provides a ready-to-use template for creating your static websites and blogs. It is based on well-known Handlebars, Markdown and Scss to be simple to use and start. + +By default, you have access to JSON data with all posts. It is useful when you want to do something dynamic using JavaScript. For example, 'load more' functionality or search. The search system is implemented already in the default template. + +``` +npm init harold-app my-app +``` diff --git a/src/site/generators/hastie.md b/src/site/generators/hastie.md index a490a042c..21cd42f22 100644 --- a/src/site/generators/hastie.md +++ b/src/site/generators/hastie.md @@ -3,17 +3,20 @@ title: Hastie repo: mkaz/hastie homepage: https://github.com/mkaz/hastie language: - - Go + - Python license: - MIT templates: - - Go -description: A static site generator written in Go + - Jinja2 +description: A static site generator in Python --- -Hastie is a static site generator, written in Golang, relatively compatible with -jekyll format. Use markdown for posts, supports RSS and simple Go templates. +Hastie is a static site generator, it processes a folder of markdown text files, applies a template, and generates an HTML site. ### Why the name "Hastie"? The name Hastie is from a character in the novel Dr. Jekyll and Mr. Hyde. + +### History + +Hastie started as a Go project, but rewritten to Python. diff --git a/src/site/generators/haunt.md b/src/site/generators/haunt.md index f2064ce66..336449c9a 100644 --- a/src/site/generators/haunt.md +++ b/src/site/generators/haunt.md @@ -1,9 +1,8 @@ --- title: Haunt -repo: guildhall/guile-haunt homepage: https://dthompson.us/projects/haunt.html language: - - Scheme + - Guile license: - GPL-3.0-or-later templates: diff --git a/src/site/generators/hepek.md b/src/site/generators/hepek.md index f012da56a..1dac6eedd 100644 --- a/src/site/generators/hepek.md +++ b/src/site/generators/hepek.md @@ -9,7 +9,7 @@ license: templates: - Scala description: Render Scala objects into files -startertemplaterepo: sake92/hepek-starter +startertemplaterepo: https://github.com/sake92/hepek-starter --- Hepek is a tool that turns Scala `object`s into files. diff --git a/src/site/generators/hexo.md b/src/site/generators/hexo.md index 3e7de9690..ee6ab9ad2 100644 --- a/src/site/generators/hexo.md +++ b/src/site/generators/hexo.md @@ -14,15 +14,15 @@ templates: - Nunjucks - Mustache - Handlebars - - Twig - Marko description: 'Hexo is a fast, simple and powerful blog framework.' twitter: hexojs -startertemplaterepo: hexojs/hexo-starter +startertemplaterepo: https://github.com/hexojs/hexo-starter --- -A fast, simple & powerful blog framework, powered by [Node.js](https://nodejs.org) and NPM. +A fast, simple & powerful blog framework, powered by [Node.js](https://nodejs.org) and [NPM](https://www.npmjs.com/). +- [Hexo Official website](https://hexo.io/) - [Themes](https://hexo.io/themes) - [Plugins](https://hexo.io/plugins) - [Deploy to Netlify ⭐️](https://hexo.io/docs/one-command-deployment#Netlify) @@ -32,14 +32,14 @@ A fast, simple & powerful blog framework, powered by [Node.js](https://nodejs.or We want to solve issues **fast**! [Please contribute](https://github.com/hexojs/hexo/issues) by answering questions or providing peer review on PRs! Thank you 🤗 -** Blazing Fast ** +**Blazing Fast** Hexo is powered by Node.js and supports multi-thread generating. Hundreds of files take only seconds to generate. -** Easy Writing ** +**Easy Writing** Hexo supports GitHub Flavored Markdown and all Octopress plugins and highly Jekyll/Octopress compatible. -** Extensibility ** +**Extensibility** Hexo supports most of the popular template languages and CSS preprocessors. You can install [plugins](https://hexo.io/plugins) for Haml, Pug, Less, Stylus, Sass, AsciiDoc, or anything. The community is writing new plugins every day. diff --git a/src/site/generators/hindsite.md b/src/site/generators/hindsite.md new file mode 100644 index 000000000..ac4a09e6a --- /dev/null +++ b/src/site/generators/hindsite.md @@ -0,0 +1,38 @@ +--- +title: Hindsite +repo: srackham/hindsite +homepage: https://srackham.github.io/hindsite/ +language: + - Go +license: + - MIT +templates: + - Go +description: A fast static site Generator. +--- + +## Overview +Hindsite is a +[fast](https://srackham.github.io/hindsite/faq.html#how-fast-is-hindsite), +lightweight static website generator. It builds static websites with optional +document and tag indexes from [Markdown](https://en.wikipedia.org/wiki/Markdown) +and [Rimu](https://github.com/srackham/rimu) source documents. + +The Hindsite stand-alone executable includes: + +- Built-in site templates to get you up and running quickly. +- A development web server with live reload and incremental rebuilds. +- A linter for validating generated webpages. + +## Quick Start +1. [Install Hindsite](https://srackham.github.io/hindsite/index.html#installation). + +2. Create a fully functional blog and newsletter website with just two hindsite + commands: + + mkdir myblog + cd myblog + hindsite init -from blog + hindsite serve -launch + +3. Read the [Hindsite documentation](https://srackham.github.io/hindsite/) to learn more. \ No newline at end of file diff --git a/src/site/generators/htmlbuilder.md b/src/site/generators/htmlbuilder.md new file mode 100644 index 000000000..1cf5766a8 --- /dev/null +++ b/src/site/generators/htmlbuilder.md @@ -0,0 +1,24 @@ +--- +title: HtmlBuilder +repo: ArtNazarov/HtmlBuilder +homepage: https://htmlbuilder.artnazarov.ru/ +language: + - Object Pascal (Lazarus) +license: + - MIT +description: Static website generator with GUI, local webserver and ftp updater +--- + +Static site generator for impatient craftsmen but friendly to the average novice user. +HtmlBuilder use own custom tags for generating web resource with different programming languages. +Current binaries can be found here: [Releases at Github](https://github.com/ArtNazarov/HtmlBuilder/releases) + +# Features + +- GUI interface with editors with syntax highlight and autocompletion +- Backup/restore +- Customizing page structure +- Plugins for publication via NodeJS/PHP endpoints (docker images available) +- Wysiwyg editor via NodeJS plugin +- Easy creation plugins in any programming language or markup languages for page processing +(Php support https://nazarow.ru/phpx-module-htmlbuilder.html, adding LaTeX https://nazarow.ru/using_latex_in_htmlbuilder.html etc) diff --git a/src/site/generators/hubpress.md b/src/site/generators/hubpress.md index 5c9779fb1..1e8ae2e5f 100644 --- a/src/site/generators/hubpress.md +++ b/src/site/generators/hubpress.md @@ -9,7 +9,7 @@ license: templates: - Handlebars description: A web application to build your Blog on GitHub. -startertemplaterepo: HubPress/hubpress.io +startertemplaterepo: https://github.com/HubPress/hubpress.io twitter: HubPressIO --- diff --git a/src/site/generators/hugo.md b/src/site/generators/hugo.md index 407334b1c..af1ea63ff 100644 --- a/src/site/generators/hugo.md +++ b/src/site/generators/hugo.md @@ -9,7 +9,7 @@ license: templates: - Go description: A Fast and Flexible Static Site Generator. -startertemplaterepo: netlify/victor-hugo +startertemplaterepo: https://github.com/netlify-templates/hugo-quickstart twitter: GoHugoIO --- diff --git a/src/site/generators/hyde.md b/src/site/generators/hyde.md deleted file mode 100644 index 64bc03dc3..000000000 --- a/src/site/generators/hyde.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Hyde -repo: hyde/hyde -homepage: http://hyde.github.io/ -language: - - Python -license: - - MIT -templates: - - Jinja2 -description: Jekyll's evil Python powered twin ---- - -Hyde is a static website generator written in python. While Hyde took life as awesome Jekyll's evil twin, it has since been completely consumed by the dark side and has an identity of its own. - -Hyde desires to fulfill the lofty goal of removing the pain points involved in creating and maintaining static websites. - -### Spotlight - -- Support for powerful template languages like Jinja2 complemented with custom tags and filters. -- Rich object model and overridable hierarchical metadata thats available for use in templates. -- Configurable sorting, tagging and grouping support. -- Extensible plugin architecture with text preprocessing and HTML postprocessing support for complex content transformations. -- Instant preview using built-in webserver that regenerates content if needed. diff --git a/src/site/generators/hydephp.md b/src/site/generators/hydephp.md new file mode 100644 index 000000000..6c2c5e041 --- /dev/null +++ b/src/site/generators/hydephp.md @@ -0,0 +1,84 @@ +--- +title: HydePHP +repo: hydephp/hyde +homepage: https://hydephp.com +language: + - PHP +license: + - MIT +templates: + - Blade, Markdown +description: Elegant and Powerful Static Site Generator +twitter: HydeFramework +--- + +Create websites, blogs, documentation sites, and more, with the power of Laravel and the simplicity of Markdown. Your next website is minutes away from becoming a reality. + +### About HydePHP + +HydePHP is a content-first Laravel-powered console application that allows you to create static HTML pages, blog posts, and documentation sites, +using your choice of Markdown and/or Blade - the tools you already know and love. + +Build sites in record-time with a full batteries-included TailwindCSS frontend that just works without any fuzz. + +### Speed & simplicity first, full control when you need it. + +Hyde is all about letting you get started quickly by giving you a full-featured frontend starter kit, while also giving you the power and freedom of doing things the way you want to. + +Markdown purist? That's all you need. Blade artisan? Go for it. +Hyde comes with hand-crafted frontend templates, so you can focus on your content. +You don't _need_ to customize anything. But you _can_ customize everything. + +See the documentation and learn more at https://hydephp.com/docs + + +## Features + +### Content Creation + +- Create blog posts using Markdown and Front Matter. +- Create documentation pages from plain Markdown, no front matter needed! +- Create simple pages using Markdown, or create advanced ones using Laravel Blade. +- You can scaffold blog posts and Markdown pages to automatically fill in the front matter. +- You can also scaffold Blade pages to automatically use the default layout. + +### Built-in Frontend + +- Hyde comes with a TailwindCSS starter kit, so you can start making content right away. +- The starter kit is fully responsive, has a dark mode theme, and is customizable. +- The frontend is accessible to screen-readers and rich with semantic HTML and microdata. +- Hyde automatically chooses the right layout to use depending on the content being rendered. +- Hyde also fills in and creates content like navigation menus and sidebars automatically. + +### Easy Asset Managing + +- The Hyde starter comes with [HydeFront](https://github.com/hydephp/hydefront) to serve the base stylesheet and JavaScript through the jsDelivr CDN. +- Hyde ships with precompiled and minified TailwindCSS styles in the app.css file, you can also load them through the CDN. +- This means that all the styles you need are already installed. However, if you want to customize the included Tailwind config, or if you add new Tailwind classes through Blade files, you can simply run the `npm run dev` command to recompile the styles using the pre-configured Laravel Mix package. + +### Customization + +- You don't need to configure anything as Hyde is shipped with sensible defaults. +- You can, however, customize nearly everything. Here are just a few out of many examples: +- All frontend components and page layouts are created with Blade, so you + can publish the vendor views, just like in Laravel. +- Override many of the dynamic content features like the menus and footer. + + +## Getting Started - High-level overview + +> See [Installation Guide](https://hydephp.com/docs/1.x/installation) and [Getting Started](https://hydephp.com/docs/1.x/getting-started) for the full details. + +It's a breeze to get started with Hyde. Create a new Hyde project using Composer: + +```bash +composer create-project hyde/hyde +``` + +Next, place your Markdown files in one of the content directories: `_posts`, `_docs`, and `_pages` which also accepts Blade files. You can also use the `hyde:make` commands to scaffold them. + +When you're ready, run the build command to compile your static site which will save your HTML files in the `_site` directory. + +```bash +php hyde build +``` diff --git a/src/site/generators/hydrogen.md b/src/site/generators/hydrogen.md index a636e0b4c..bc2391972 100644 --- a/src/site/generators/hydrogen.md +++ b/src/site/generators/hydrogen.md @@ -1,7 +1,7 @@ --- title: Hydrogen repo: ShailenNaidoo/hydrogen -homepage: https://hydrogen-cli.netlify.com +homepage: https://hydrogen-js.netlify.app/ language: - TypeScript license: diff --git a/src/site/generators/iles.md b/src/site/generators/iles.md new file mode 100644 index 000000000..3d7b5b0e5 --- /dev/null +++ b/src/site/generators/iles.md @@ -0,0 +1,22 @@ +--- +title: iles +repo: ElMassimo/iles +homepage: https://iles.pages.dev +language: + - JavaScript + - TypeScript +license: + - MIT +templates: + - Vue + - Preact + - Svelte + - Solid + - HTML +description: The Joyful Site Generator. Islands of Interactivity with Vue, Preact, Svelte, and more. +--- +îles is a static-site generator with great support for partial hydration, supporting all major frameworks. + +During development, build your site enjoying the smooth dx provided by Vite. + +In production, ship JS only for the interactive bits. By default, that's zero. diff --git a/src/site/generators/intu-dev.md b/src/site/generators/intu-dev.md index d6f9a5f08..d7f6cdd71 100644 --- a/src/site/generators/intu-dev.md +++ b/src/site/generators/intu-dev.md @@ -1,7 +1,7 @@ --- title: INTUITION.DEV repo: intuition-dev/INTUITION -homepage: https://www.INTUITION.DEV +homepage: https://intuition-dev.github.io/intuDocs/#/ language: - TypeScript license: diff --git a/src/site/generators/jamstackpy.md b/src/site/generators/jamstackpy.md new file mode 100644 index 000000000..1d36f6577 --- /dev/null +++ b/src/site/generators/jamstackpy.md @@ -0,0 +1,20 @@ +--- +title: Jamstackpy +repo: jamstackpy/jamstack +homepage: https://jamstackpy.github.io/ +language: + - Python +license: + - Apache-2.0 +templates: + - Python +description: Python-powered static site maker powering multiple realworld sites +--- + +Jamstack spawns an scalable, easy to extend structure with it's generate function + +Some sites using jamstackpy + +- [DeliciousPy Telegram Channel](https://deliciouspy.github.io/) +- [The Flask Community Work Group](https://flaskcwg.github.io/) +- [A Personal Site](https://compileralchemy.github.io/) diff --git a/src/site/generators/jekyll.md b/src/site/generators/jekyll.md index 216bd8401..d71cbfe32 100644 --- a/src/site/generators/jekyll.md +++ b/src/site/generators/jekyll.md @@ -1,7 +1,7 @@ --- title: Jekyll repo: jekyll/jekyll -homepage: http://jekyllrb.com +homepage: https://jekyllrb.com language: - Ruby license: @@ -10,10 +10,9 @@ templates: - Liquid description: A simple, blog-aware, static site generator. twitter: jekyllrb -startertemplaterepo: netlify-templates/jekyll-base --- -Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind [GitHub Pages](http://pages.github.com), which you can use to host sites right from your GitHub repositories. +Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind [GitHub Pages](https://pages.github.com), which you can use to host sites right from your GitHub repositories. ### Philosophy diff --git a/src/site/generators/jungle.md b/src/site/generators/jungle.md index b6cc62bad..7024b9887 100644 --- a/src/site/generators/jungle.md +++ b/src/site/generators/jungle.md @@ -9,7 +9,8 @@ license: templates: - Svelte description: JungleJS is a new static site generator that uses Svelte and GraphQL. -startertemplaterepo: junglejs/template +startertemplaterepo: https://github.com/junglejs/template +twitter: jungle_js --- JungleJS is a new static site generator that uses Svelte and GraphQL. It also has a handy routing feature akin to NextJS and Sapper. diff --git a/src/site/generators/kaktos.md b/src/site/generators/kaktos.md new file mode 100644 index 000000000..ab7b639d0 --- /dev/null +++ b/src/site/generators/kaktos.md @@ -0,0 +1,30 @@ +--- +title: Kaktos +repo: paulocoutinhox/kaktos +homepage: https://kaktos.netlify.app/ +language: + - Python +license: + - MIT +templates: + - Jinja2 +startertemplaterepo: https://github.com/paulocoutinhox/kaktos +description: Kaktos is a python static site generator +--- + +Kaktos is a python static site generator. + +- The idea is create a simple static site generator for people that don't need server-side languages. +- Designers can use it too, since it don't need people that know a programming language. +- Easy extendable to include new features. + +### Features + +Kaktos currently supports: + +- Any css/javascript framework +- Command line interface to execute everything +- Easy deploy to Netlify +- Easy deploy to AWS Amplify +- Don't require any framework +- Create any kind of site or blog diff --git a/src/site/generators/keystone.md b/src/site/generators/keystone.md index c92acb86f..928f0a964 100644 --- a/src/site/generators/keystone.md +++ b/src/site/generators/keystone.md @@ -8,7 +8,7 @@ license: - ISC templates: - Custom -startertemplaterepo: CTNicholas/keystone-ssg-example +startertemplaterepo: https://github.com/CTNicholas/keystone-ssg-example description: Zero config static-site generator & dev server. Templates, partials, routing, Babel, SCSS/SASS, Markdown, bundling, minifying, dynamic linking, search indexing. --- diff --git a/src/site/generators/kotsu.md b/src/site/generators/kotsu.md index bdbfb54bc..601c488e4 100644 --- a/src/site/generators/kotsu.md +++ b/src/site/generators/kotsu.md @@ -9,7 +9,7 @@ license: templates: - Nunjucks description: An extremely simple, pluggable static site generator. -startertemplaterepo: LotusTM/Kotsu +startertemplaterepo: https://github.com/LotusTM/Kotsu --- Static site generator and opinionated advanced web starter kit. Silently powers both large and small commercial projects. diff --git a/src/site/generators/krems.md b/src/site/generators/krems.md new file mode 100644 index 000000000..2f3593167 --- /dev/null +++ b/src/site/generators/krems.md @@ -0,0 +1,15 @@ +--- +title: Krems +repo: mreider/krems +homepage: https://github.com/mreider/krems +language: + - Go +license: + - MIT +templates: + - Markdown + - CSS +description: Krems static site generator +--- + +A simple, lightweight static site generator written in Go. It converts Markdown files into responsive HTML pages, complete with navigation menus, optional blog listings, and an RSS feed. Think of it like Hugo or Jekyll, but stripped down to the essentials. diff --git a/src/site/generators/landspout.md b/src/site/generators/landspout.md deleted file mode 100644 index e432ff814..000000000 --- a/src/site/generators/landspout.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Landspout -repo: gmr/landspout -homepage: https://github.com/gmr/landspout -language: - - Python -license: - - BSD-3-Clause -templates: - - Tornado -description: A simple static site generation tool ---- - -Landspout is a static website generation tool, using [Tornado Templates](http://www.tornadoweb.org/en/stable/). Create your template structure, and your content, and point landspout at it. - -Landspout has three operational modes: - -- **Build**: generate the static site -- **Watch**: when working on the site, run a blocking process that watches for changes of content or templates and generates the static site -- **Serve**: when working on the site, run a HTTP server that also watches for changes of content or templates and generates the static site - -## Installation - -```bash -pip3 install landspout -``` diff --git a/src/site/generators/linkfree-gen.md b/src/site/generators/linkfree-gen.md new file mode 100644 index 000000000..c3c5fa7b5 --- /dev/null +++ b/src/site/generators/linkfree-gen.md @@ -0,0 +1,14 @@ +--- +title: LinkFree Generator +repo: chriskthomas/linkfree-generator +homepage: https://ckt.im/linkfree/ +language: + - PHP +license: + - Apache-2.0 +description: Generate one page websites without use of the command line. +--- + +Online form that allows you to generate a simple one page "linktree-like" website without the use of the command line. The output comes in the form of a single `index.html` file which can easily be hosted publicly. + +LinkFree Generator is designed to be the most beginner-friendly way for people to make their own websites without any proprietary lock-in. diff --git a/src/site/generators/log4brains.md b/src/site/generators/log4brains.md new file mode 100644 index 000000000..8dd4f561c --- /dev/null +++ b/src/site/generators/log4brains.md @@ -0,0 +1,44 @@ +--- +title: Log4brains +repo: thomvaill/log4brains +homepage: https://github.com/thomvaill/log4brains +language: + - JavaScript +license: + - Apache-2.0 +templates: + - Markdown +description: Docs-as-code knowledge base to manage Architecture Decision Records (ADR) for your project and publish them automatically as a static website +--- + +Log4brains is a docs-as-code knowledge base for your development and infrastructure projects. +It enables you to write and manage [Architecture Decision Records](https://adr.github.io/) (ADR) right from your IDE, and to publish them automatically as a static website. + +It performs Static Site Generation from markdown files thanks to [Next.js](https://jamstack.org/generators/next/). + +## Install + +From your project's root directory: + +```sh +npm install -g log4brains +log4brains init +``` + +## Local preview + +```sh +log4brains preview +``` + +## Build and deploy + +```sh +log4brains build +``` + +See [Log4brains documentation](https://github.com/thomvaill/log4brains) for more information. + +## Example + +[Log4brains' own architecture knowledge base](https://thomvaill.github.io/log4brains/adr/) diff --git a/src/site/generators/luapress.md b/src/site/generators/luapress.md deleted file mode 100644 index 90ef9d804..000000000 --- a/src/site/generators/luapress.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Luapress -repo: Fizzadar/Luapress -homepage: http://luapress.org/ -language: - - Lua -license: - - MIT -templates: - - Mustache - - LHTML -description: Luapress is *yet another* static blog generator, written in Lua. ---- - -# Luapress v1.1.0 - -Luapress is _yet another_ static blog generator, written in Lua, with posts in markdown. - -**How-To:** - - # - # Luapress v1.1.0 - # Usage: ./press.lua - # Example: ./press.lua - # Example: ./press.lua http://example.com - # Example: ./press.lua nocache http://example.com - # Example: ./press.lua clean http://example.com - # For more details: https://github.com/Fizzadar/Luapress - # diff --git a/src/site/generators/lume.md b/src/site/generators/lume.md new file mode 100644 index 000000000..d9ac1aad8 --- /dev/null +++ b/src/site/generators/lume.md @@ -0,0 +1,27 @@ +--- +title: Lume +repo: lumeland/lume +homepage: https://lume.land/ +language: + - JavaScript (Deno) +license: + - MIT +templates: + - Nunjucks + - JSX + - ETA + - JavaScript + - Typescript + - HTML + - Markdown + - Yaml +description: 🔥 Easy and flexible static site generator for Deno 🦕 +--- + +**🔥 Lume** is the galician word for *fire,* but also a (yet another) static site generator for Deno. + +It's inspired in other general purpose static site generators such Jekyll or Eleventy but it's simpler and easier to use and configure, besides being super flexible. + +- Support for **multiple file formats** like `markdown`, `yaml`, `javascript`, `typescript`, `jsx`, `nunjucks` and it's easy to extend. +- You can hook **any processor** to transform assets, like `sass` or `postcss` for CSS. +- It's Deno: forget about manage thousand of packages in `node_modules` or complex bundlers. Lume only install that you need. Clean, fast and secure. diff --git a/src/site/generators/makestaticsite.md b/src/site/generators/makestaticsite.md new file mode 100644 index 000000000..1f761365d --- /dev/null +++ b/src/site/generators/makestaticsite.md @@ -0,0 +1,43 @@ +--- +title: MakeStaticSite +repo: paultraf/makestaticsite +homepage: https://makestaticsite.sh/ +language: + - Bash +license: + - AGPL-3.0-only +templates: [] +description: Generate and deploy static websites with Bash. +--- + +A set of Bash scripts to generate static snapshots of (dynamic) websites, +refine and deploy them using Wget and other open source tools. + +Features: + +- A straightforward command line interface +- A setup script that guides users through the creation of a configuration file +through a simple interactive dialogue; manual editing is not required +- Support for multiple sites, each with custom settings defined in their own +configuration file (multiple config files can also be used for any given site). +- Suitable for batch processes, allowing operations to be scaled up so that any +or all of the sites are updated in one process. +- Support for CMS logins, which paves the way for converting your existing site +whilst maintaining the WordPress installation in situ. +- Runtime options, such as verbosity, to configure the level of output; and +whether to archive each build +- Option of providing a downloadable copy of the entire site as a zip file +which can be used offline, e.g., off a memory stick, making your site portable. +- Local and remote (server) deployment options, including rsync over ssh and +Netlify. +- For WordPress installations, WP-CLI is used to prepare the site for mirroring +plus a drop-in search replacement (WP Offline Search plugin) that works +offline. +- Snippets – an experimental facility to tweak any page and provide offline +variants using chunks of HTML. +- Support for custom attributes using post-processing – by creating a list of +URLs unaccounted for and then re-running Wget on them +- W3C standards compliance. Whilst this really depends on the source, pages may +be cleaned up by HTML Tidy. The system also generates a sitemap XML and +robots.txt file to match the outputted files. + diff --git a/src/site/generators/markbind.md b/src/site/generators/markbind.md index 2bacde02f..d512ac27b 100644 --- a/src/site/generators/markbind.md +++ b/src/site/generators/markbind.md @@ -9,7 +9,7 @@ license: templates: - Custom description: Optimized for generating technical documentation and educational websites from Markdown text. -startertemplaterepo: MarkBind/init-typical-netlify +startertemplaterepo: https://github.com/MarkBind/init-typical-netlify --- MarkBind is a website generator that can generate a website from markdown documents. While there are other markdown-to-html website generators around, MarkBind can generate more dynamic websites, as opposed to one-size-fits-all static content. MarkBind is particularly suitable to create content-heavy websites e.g., eLearning websites, online instruction manuals, project documentation etc. that aim for self-directed consumption. diff --git a/src/site/generators/mdBook.md b/src/site/generators/mdBook.md index 5960e50c5..6910863cc 100644 --- a/src/site/generators/mdBook.md +++ b/src/site/generators/mdBook.md @@ -7,7 +7,7 @@ language: license: - MPL-2.0 templates: - - Handlebars + - Markdown description: GitBook alternative implemented in Rust. --- diff --git a/src/site/generators/metalsmith.md b/src/site/generators/metalsmith.md index 259a51a29..167813aae 100644 --- a/src/site/generators/metalsmith.md +++ b/src/site/generators/metalsmith.md @@ -1,6 +1,6 @@ --- title: Metalsmith -repo: segmentio/metalsmith +repo: metalsmith/metalsmith homepage: http://www.metalsmith.io/ language: - JavaScript @@ -10,7 +10,7 @@ templates: - Handlebars - Any JS description: An extremely simple, pluggable static site generator. -startertemplaterepo: andreasvirkus/metalsmith-boilerplate +startertemplaterepo: https://github.com/andreasvirkus/metalsmith-boilerplate --- An extremely simple, _pluggable_ static site generator. @@ -46,7 +46,7 @@ Each plugin is invoked with the contents of the source directory, and each file } ``` -...which any of the plugins can then manipulate however they want. And writing the plugins is incredibly simple, just take a look at the [example drafts plugin](https://github.com/segmentio/metalsmith-drafts/blob/master/lib/index.js). +...which any of the plugins can then manipulate however they want. And writing the plugins is incredibly simple, just take a look at the [example drafts plugin](https://github.com/metalsmith/drafts/blob/master/lib/index.js). Of course they can get a lot more complicated too. That's what makes Metalsmith powerful; the plugins can do anything you want! diff --git a/src/site/generators/middleman.md b/src/site/generators/middleman.md index 208f6d894..70bd9e20d 100644 --- a/src/site/generators/middleman.md +++ b/src/site/generators/middleman.md @@ -11,7 +11,7 @@ templates: - Tilt - Haml description: Hand-crafted, modern frontend development. -startertemplaterepo: wallin/middleman-template +startertemplaterepo: https://github.com/wallin/middleman-template twitter: middlemanapp --- diff --git a/src/site/generators/mini-site-generator.md b/src/site/generators/mini-site-generator.md index 385f70607..dabd9d760 100644 --- a/src/site/generators/mini-site-generator.md +++ b/src/site/generators/mini-site-generator.md @@ -9,7 +9,7 @@ license: templates: - JavaScript description: It's just javascript! -startertemplaterepo: ijmccallum/msg-starter +startertemplaterepo: https://github.com/ijmccallum/msg-starter --- MSG is used in the food industry as a flavor enhancer with an umami taste that intensifies the meaty, savory flavor of - jkjkjk! I kid. It's literally just JavaScript. diff --git a/src/site/generators/minissg.md b/src/site/generators/minissg.md new file mode 100644 index 000000000..5e73d1aa7 --- /dev/null +++ b/src/site/generators/minissg.md @@ -0,0 +1,21 @@ +--- +title: Mini SSG +repo: hilmanski/mini-SSG/ +homepage: https://minissg.vercel.app/ +language: + - JavaScript + - Node.js +templates: + - HTML +description: simple and beautiful static site generator +--- + +Mini SSG helps you write reusable html files + +### Features + +- Layout +- Imports +- Dev server +- Component +- Component with named slots diff --git a/src/site/generators/mkdocs.md b/src/site/generators/mkdocs.md index 7649d2e11..61b3732ac 100644 --- a/src/site/generators/mkdocs.md +++ b/src/site/generators/mkdocs.md @@ -9,7 +9,7 @@ license: templates: - Jinja2 description: Project documentation with Markdown. -startertemplaterepo: netlify-templates/mkdocs-base +startertemplaterepo: https://github.com/netlify-templates/mkdocs-base twitter: MkDocsProject --- diff --git a/src/site/generators/mkws.md b/src/site/generators/mkws.md index f69748c6d..36aa5a5e0 100644 --- a/src/site/generators/mkws.md +++ b/src/site/generators/mkws.md @@ -1,6 +1,6 @@ --- title: mkws(1) -repo: adriangrigore/mkws +repo: mkws-1/mkws-1 homepage: https://mkws.sh language: - Bash @@ -8,74 +8,14 @@ license: - ISC templates: - Bash -description: POSIX compliant, sh(1) static site generator +description: Efficient Static Site Generator +startertemplaterepo: https://github.com/mkws-1/netlify-blank +twitter: mkws_1 --- -fast, extensible, simple static site generator +Efficient Static Site Generator +Simple, One Language (POSIX shell), Blazing Fast, Highly Extensible +static site generator. -## Simple - -[`mkws(1)`](https://mkws.sh) is as simple as it gets when it comes to -static site generators -while staying very powerful, it uses [`pp(1)`](https://mkws.sh/pp.html) -under the hood which leverages the power of the -[`sh(1)`](https://pubs.opengroup.org/onlinepubs/9699919799/utilities/sh.html) -command language interpreter. - -## One Language - -Forget custom languages, custom templates, -CSS -preprocessing languages, write all your -HTML -templates, unpreprocessed -CSS or any other templating -needs in [POSIX](https://pubs.opengroup.org/onlinepubs/9699919799) -compliant -[`sh(1)`](https://pubs.opengroup.org/onlinepubs/9699919799/utilities/sh.html). -For small, simple websites, it's enough. - -## Blazing Fast - -Blazing fast both in rendering and development speed. Because -[`pp(1)`](https://mkws.sh/pp.html) uses -[`sh(1)`](https://pubs.opengroup.org/onlinepubs/9699919799/utilities/sh.html) -you already have a -REPL -in your terminal, that means you can -test your commands there and just paste them in your templates. Also, -your experience with the -UNIX -environment will translate. Rendering -means just translating your templates to -[`sh(1)`](https://pubs.opengroup.org/onlinepubs/9699919799/utilities/sh.html). -code and running it. - -## Highly Extensible - -Running on -[`pp(1)`](https://mkws.sh/pp.html) templates, -[`mkws(1)`](https://mkws.sh) can use any -UNIX -utility inside its templates. You can use existing ones, or write your -own. Also, you can modify the generator or extend it yourself, in fact -it's recommended. - -## Minimal Dependencies - -[`mkws(1)`](https://mkws.sh)'s only dependencies are -[`pp(1)`](https://mkws.sh/pp.html) -and -[OpenBSD](https://openbsd.org/) -[`stat(1)`](https://man.openbsd.org/stat.1) -both of which are included in the download archives as statically -compiled portable binaries. - -## POSIX Compliant* - - [`mkws(1)`](https://mkws.sh) is POSIX compliant and highly portable. - -\* The only non portable component is [OpenBSD](https://openbsd.org/) -[`stat(1)`](https://man.openbsd.org/stat.1) which comes bundled -in the download archive statically compiled. \ No newline at end of file +Maybe fastest from nil to online! \ No newline at end of file diff --git a/src/site/generators/modulojs.md b/src/site/generators/modulojs.md new file mode 100644 index 000000000..f4aab93d2 --- /dev/null +++ b/src/site/generators/modulojs.md @@ -0,0 +1,34 @@ +--- +title: Modulo.js +repo: modulojs/modulo +homepage: https://modulojs.org/ +language: + - JavaScript +license: + - LGPL 3.0 +templates: + - Modulo (similar to Liquid or Jinja) +description: An easy-to-use, zero-dependency Jamstack framework in 2000 lines +startertemplaterepo: https://github.com/modulojs/modulo-jamstack-deploy +--- + +**The lightest, dependency-free way to start a Jamstack project:** + +``` +npm init modulo +``` + +Say goodbye to slow builds and heavy dependencies, `node_modules`, and build +servers: Get work done without that! + +[Documentation on Modulo Jamstack is available here.](https://modulojs.org/tutorial/building-apps/part1.html) + + +The Moduolo.js Jamstack template includes: Netlify / Decap CMS ready-to-go, +most of the features you'd expect with React.js or Vue.js, including state, +props, directives, templating, data binding and reactive forms, templating, +global store and sub/pub, hydration, DOM reconciliation tools, and more, **all +with zero dependencies** save for the 2000 line file. The integrated Markdown, +Decap CMS, Netlify-safe SSR, and is already setup, with local or `unpkg`-based +dependencies. + diff --git a/src/site/generators/nanogen.md b/src/site/generators/nanogen.md index 7f180fe11..5b56d516d 100644 --- a/src/site/generators/nanogen.md +++ b/src/site/generators/nanogen.md @@ -9,7 +9,7 @@ license: templates: - EJS description: A minimalist static site generator in Node.js. -startertemplaterepo: doug2k1/nanogen-template +startertemplaterepo: https://github.com/doug2k1/nanogen-template --- Minimalist static site generator written in Node.js. diff --git a/src/site/generators/next.md b/src/site/generators/next.md index 216964d67..9f6bc9359 100644 --- a/src/site/generators/next.md +++ b/src/site/generators/next.md @@ -8,8 +8,9 @@ license: - MIT templates: - React -startertemplaterepo: netlify-templates/next-starter-jamstack +startertemplaterepo: https://github.com/netlify-templates/next-platform-starter description: A framework for statically-exported React apps (supports server side rendering) +twitter: nextjs --- Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps. diff --git a/src/site/generators/nift.md b/src/site/generators/nift.md index a429f3484..063836786 100644 --- a/src/site/generators/nift.md +++ b/src/site/generators/nift.md @@ -1,7 +1,7 @@ --- title: Nift repo: nifty-site-manager/nsm -homepage: https://nift.cc +homepage: https://nift.dev language: - C++ license: @@ -10,7 +10,7 @@ templates: - Custom description: A cross-platform open source git-like and LaTeX-like site manager. twitter: nifty_site_man -startertemplaterepo: nsm-templates/basic-site +startertemplaterepo: https://github.com/nsm-templates/basic-site --- Nift, short for nifty site manager, is a cross-platform open source git-like and LaTeX-like site manager. You should be able to create any site you want (both static and non-static/dynamic) using Nift, though will need some kind of web server such as Apache, NGinx, a LAMP stack, etc. to host non-static/dynamic sites, whereas static sites can easily be hosted with platforms like BitBucket, GitHub, GitLab and Netlify. diff --git a/src/site/generators/nuxt.md b/src/site/generators/nuxt.md index 967e67c0d..7826797b4 100644 --- a/src/site/generators/nuxt.md +++ b/src/site/generators/nuxt.md @@ -1,7 +1,7 @@ --- title: Nuxt -repo: nuxt/nuxt.js -homepage: https://nuxtjs.org/ +repo: nuxt/nuxt +homepage: https://nuxt.com/ language: - JavaScript license: @@ -9,11 +9,11 @@ license: templates: - Vue description: A minimalistic framework for serverless Vue.js applications. -startertemplaterepo: martinx3/nuxt-starter +startertemplaterepo: https://github.com/netlify-templates/nuxt-starter twitter: nuxt_js --- -An easy way to export your Vue.js Web Application into a static website. +Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. ## Easy to use @@ -33,8 +33,9 @@ Nuxt will help you generate and deploy a Vue.js Web Application faster than befo [Vue SSR](https://vuejs.org/v2/guide/ssr.html) is used to generate pages for both client and server; It's called Isomorphic/ Universal rendering. -Then you can run `nuxt generate` to generate your static website into a ./dist forlder and deploy it everywhere: -Netlify, Githup pages, Gitlab, AWS3, etc. +Then you can run `nuxt generate` to generate your static website into a ./dist folder and deploy it everywhere: + +Netlify, GitHub Pages, GitLab, AWS3, etc. ## Setup a project in a minute diff --git a/src/site/generators/orchid.md b/src/site/generators/orchid.md index fd1c1851c..d0d936faf 100644 --- a/src/site/generators/orchid.md +++ b/src/site/generators/orchid.md @@ -10,7 +10,7 @@ license: templates: - Pebble description: A beautiful and truly unique documentation engine and static site generator. -startertemplaterepo: JavaEden/OrchidStarter +startertemplaterepo: https://github.com/JavaEden/OrchidStarter twitter: OrchidSSG --- diff --git a/src/site/generators/orison.md b/src/site/generators/orison.md index 07340518e..24b157ac8 100644 --- a/src/site/generators/orison.md +++ b/src/site/generators/orison.md @@ -9,7 +9,7 @@ license: templates: - lit-html description: Create pages, layouts, partials, and contextual data using lit-html -startertemplaterepo: megazear7/orison-netlify-starter-kit +startertemplaterepo: https://github.com/megazear7/orison-netlify-starter-kit --- OrisonJS is a static site generator built on top of lit-html. diff --git a/src/site/generators/passage.md b/src/site/generators/passage.md new file mode 100644 index 000000000..f744a1e1c --- /dev/null +++ b/src/site/generators/passage.md @@ -0,0 +1,16 @@ +--- +title: Passage +repo: reactivematter/passage +homepage: https://github.com/ReactiveMatter/passage/ +language: + - PHP +license: + - GPL-3.0-or-later +templates: + - PHP +description: A highly customizable and minimalistic PHP based static site generator. +--- + +Passage is a PHP based static site generator. It is highly customizable and easy. It uses PHP for creating templates, hence no need to learn a new templating language (as PHP itself is a templating language). + +It uses Parsedown and Symphony YAML component to generate static html files. \ No newline at end of file diff --git a/src/site/generators/pft.md b/src/site/generators/pft.md index 1b08760c5..8257e66a2 100644 --- a/src/site/generators/pft.md +++ b/src/site/generators/pft.md @@ -1,7 +1,7 @@ --- title: PFT repo: dacav/App-PFT -homepage: http://dacav.roundhousecode.com/pages/pft.html +homepage: https://dacav.roundhousecode.com/tags/pft.html language: - Perl license: diff --git a/src/site/generators/phenomic.md b/src/site/generators/phenomic.md index 653682ba5..0cf907637 100644 --- a/src/site/generators/phenomic.md +++ b/src/site/generators/phenomic.md @@ -9,7 +9,7 @@ license: templates: - React description: A modern static website generator to create dynamic website using React components. -startertemplaterepo: capriosa/phenomic-cms +startertemplaterepo: https://github.com/capriosa/phenomic-cms twitter: Phenomic_app --- diff --git a/src/site/generators/platframe.md b/src/site/generators/platframe.md index fad75f3cc..1fb1233dd 100644 --- a/src/site/generators/platframe.md +++ b/src/site/generators/platframe.md @@ -10,7 +10,7 @@ templates: - Pug - Jade description: A structured, scalable and modular platform for web and frontend development. -startertemplaterepo: platframe/platframe +startertemplaterepo: https://github.com/platframe/platframe twitter: platframe --- diff --git a/src/site/generators/pollen.md b/src/site/generators/pollen.md index 017ce0f4b..ff5957d9c 100644 --- a/src/site/generators/pollen.md +++ b/src/site/generators/pollen.md @@ -6,6 +6,7 @@ language: - Racket license: - LGPL-3.0-only +templates: [] description: A web book-publishing system written in Racket with static html as default output target. --- diff --git a/src/site/generators/primo.md b/src/site/generators/primo.md new file mode 100644 index 000000000..a8872fd50 --- /dev/null +++ b/src/site/generators/primo.md @@ -0,0 +1,24 @@ +--- +title: Primo +repo: primo-af/primo +homepage: https://primo.so +language: + - Svelte +license: + - AGPL-3.0-or-later +templates: + - Svelte +description: An all-in-one static site builder +twitter: primo_af +--- + +Primo is a new approach to web development that combines everything you need to develop, manage, and publish websites. It includes an IDE, a multi-language CMS, a component library, a static site generator, and publishes directly to Netlify. + +## Why Primo +Traditional site-builders like Wix and Squarespace make content management easier, but at the expense of the customization, functionality, and site performance expected by Developers. Modern frontend frameworks and static site generators give developers superpowers, but at the expense of increased setup time and poor content management. Primo combines the quick setup and easy content management of a site builder with the performance and freedom of a framework, making it possible for developers of any level and background to publish fast-loading, mobile-optimized, customizable websites. + +## How it works +Primo's an all-in-one application - combining a development environment with an internationalized content management system with a component library with a static site generator that publishes directly to your favorite web host*. Primo pages are built one section at a time, and sections can contain either WISIWYG content written directly on the page or components. Primo gives you a set of components to use out of the box - you can use them as-is or edit their code directly from Primo. Although Primo components appear on the surface to be written with basic HTML, CSS, and JavaScript, they're actually written in Svelte: a compiled language which builds on the fundamental web languages while enabling templating, style encapsulation, and reactivity, among other things. Component fields can be added from the component editor and integrated with Svelte's templating tags. To publish the site, a web host can be connected using an API token, and after a click Primo creates and uploads the site bundle to your chosen host. Each page of the site is made of static HTML and CSS, and any necessary JS gets downloaded as a module after the page loads and hydrates its respective component. + +## How to install +Primo is available for download on Windows, Mac, and Linux from [primo.so](https://primo.so). diff --git a/src/site/generators/publican.md b/src/site/generators/publican.md new file mode 100644 index 000000000..a58b1fdd7 --- /dev/null +++ b/src/site/generators/publican.md @@ -0,0 +1,31 @@ +--- +title: Publican +repo: craigbuckler/publican +homepage: https://publican.dev/ +language: + - JavaScript +license: + - MIT +templates: + - HTML + - JavaScript +description: A simple HTML-first static site generator for Node.js +startertemplaterepo: https://github.com/craigbuckler/publican.theme.basic +--- + +A minimal Node.js (ES modules) static site generator for HTML-first server-rendered pages. + +## Key features + +* lightweight with simple JavaScript configuration +* no templating syntax to learn: use HTML with JavaScript `${ "template literals" }` +* process any content: markdown, HTML, CSS, JavaScript, TXT, SVG, RSS, XML, etc. +* clean URL routing +* automated navigation, pagination, directory, and tag index pages +* built-in syntax highlighting +* virtual content and templates +* extendable function hooks +* use whatever client-side frameworks you like +* fast site build and file watch rebuild +* optional [StaticSearch search engine](https://publican.dev/tools/staticsearch/) and [hot-reload development server](https://publican.dev/tools/livelocalhost/) +* [full documentation](https://publican.dev/docs/quickstart/concepts/) and [starter themes](https://publican.dev/themes/) diff --git a/src/site/generators/publii.md b/src/site/generators/publii.md index 7cee40cd6..f82967c09 100644 --- a/src/site/generators/publii.md +++ b/src/site/generators/publii.md @@ -12,7 +12,7 @@ description: Desktop-based CMS for creating static websites. twitter: getpublii --- -Publii is a desktop-based CMS for Windows and Mac that makes creating static websites fast and hassle-free, even for beginners. +Publii is a desktop-based CMS for Windows, Mac and Linux that makes creating static websites fast and hassle-free, even for beginners. Unlike static-site generators that are often unwieldy and difficult to use, Publii provides an easy-to-understand UI much like server-based CMSs such as WordPress or Joomla!, where users can create posts and other site content, and style their site using a variety of built-in themes and options. Users can enjoy the benefits of a super-fast and secure static website, with all the convenience that a CMS provides. diff --git a/src/site/generators/qgoda.md b/src/site/generators/qgoda.md index dae76e82e..3b45e3564 100644 --- a/src/site/generators/qgoda.md +++ b/src/site/generators/qgoda.md @@ -9,7 +9,7 @@ license: templates: - Template Toolkit 2 description: A sophisticated, blog-aware static site generator with unprecedented multi-language features -startertemplaterepo: gflohr/qgoda-multilang +startertemplaterepo: https://github.com/gflohr/qgoda-multilang --- Qgoda is a sophisticated static site generator following the Do-The-Right-Thing™ philosophy. Micro-sites require zero-configuration, a blog is easily started with one of the sample themes, but you can always grow with your needs and create arbitrarily complex sites with Qgoda. diff --git a/src/site/generators/qpage.md b/src/site/generators/qpage.md index 47bbc4a24..9b603d14b 100644 --- a/src/site/generators/qpage.md +++ b/src/site/generators/qpage.md @@ -6,8 +6,7 @@ language: - Python license: - MIT -templates: - - None +templates: [] description: 'QPage or QuickPage is a free project for creating academic homepage without any code' --- diff --git a/src/site/generators/quarkus-roq.md b/src/site/generators/quarkus-roq.md new file mode 100644 index 000000000..4aed114be --- /dev/null +++ b/src/site/generators/quarkus-roq.md @@ -0,0 +1,27 @@ +--- +title: Quarkus Roq +repo: quarkiverse/quarkus-roq +homepage: https://docs.quarkiverse.io/quarkus-roq/dev/index.html +language: + - Java +license: + - Apache 2.0 +templates: + - Tera +description: Roq allows to easily create a static website or blog using Quarkus super-powers. +--- + +Static site generator written in Java and leveraging the power of Quarkus. + +### Features + +Knowing that you don’t need to learn Quarkus or Java to use Roq, consider the following advantages: + +- **Quarkus-based:** Since Roq is just a very thin layer on top of Quarkus, it ensures that the tool stays up to date and benefits from the robust support provided by the Quarkus ecosystem. +- **For everyone:** It is very easy to use with any level of knowledge. You can start with an existing theme (as a dependency) and only write Markdown or Asciidoc content, or customize everything. +- **Reproducibility Across Platforms:** Unlike some other SSG, Roq offers better reproducibility across multiple platforms, ensuring more consistent and predictable results when building or deploying. +- **Easy to maintain:** Managing dependencies and updates is easier with Roq thanks to Maven and Gradle. Other systems such as Go or Ruby can be difficult to maintain and make reproducible across environments. +- **Speed:** Roq is using Quarkus for dev and build. Quarkus is famous for being supersonic and subatomic, with one example showing a Roq site build in just 20 milliseconds, greatly reducing build times compared to traditional generators. +- **Type Safety (via Qute templates):** Roq leverages Quarkus Qute’s type safety in templates and posts, making it easier to handle links, data injection, and other dynamic content with confidence. +- **Local Development Experience:** Roq provides a smoother local development experience without the need to "test in production," as is often necessary with other SSGs due to its difficulties in running locally. +- **Code Completion:** Thanks to Qute, Roq offers code completion, which is beneficial when working in templates, helping to reduce errors and improve developer productivity. diff --git a/src/site/generators/quarto.md b/src/site/generators/quarto.md new file mode 100644 index 000000000..087aa8c50 --- /dev/null +++ b/src/site/generators/quarto.md @@ -0,0 +1,59 @@ +--- +title: Quarto +repo: quarto-dev/quarto-cli +homepage: https://quarto.org/ +language: + - TypeScript + - JavaScript +license: + - GPL-2.0-only +templates: + - Markdown + - Jupyter + - Python + - R + - Julia + - Observable + - Dot + - Mermaid +description: Quarto® is an open-source scientific and technical publishing system built on Pandoc +twitter: quarto_pub +--- + +## Features + +- Create dynamic content with Python, R, Julia, and Observable. + +- Author documents as plain text markdown or Jupyter notebooks. + +- Publish high-quality articles, reports, presentations, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more. + +- Author with scientific markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more. + +[![Quarto | Get Started](https://quarto.org/docs/tools/images/vscode-render.png)](https://quarto.org/docs/get-started/) + +## Dynamic Documents + +Generate dynamic output using Python, R, Julia, and Observable. Create reproducible documents that can be regenerated when underlying assumptions or data change. + +## Beautiful Publications + +Publish high-quality articles, reports, presentations, websites, and books in HTML, PDF, MS Word, ePub, and more. Use a single source document to target multiple formats. + +## Scientific Markdown + +Pandoc markdown has excellent support for LaTeX equations and citations. Quarto adds extensions for cross-references, figure panels, callouts, advanced page layout, and more. + +## Authoring Tools + +Use your favorite tools including VS Code, RStudio, Jupyter Lab, or any text editor. Use the Quarto visual markdown editor for long-form documents. + +## Interactivity + +Engage readers by adding interactive data exploration to your documents using Jupyter Widgets, htmlwidgets for R, Observable JS, and Shiny. + +## Websites and Books + +Publish collections of documents as a blog or full website. Create books and manuscripts in both print formats (PDF and MS Word) and online formats (HTML and ePub). + +View the [Gallery](https://quarto.org/docs/gallery/) to see more of what Quarto can do! diff --git a/src/site/generators/react-static.md b/src/site/generators/react-static.md index 71c8b4fe3..aec740953 100644 --- a/src/site/generators/react-static.md +++ b/src/site/generators/react-static.md @@ -9,7 +9,7 @@ license: templates: - React description: A progressive static-site framework for React. -startertemplaterepo: tannerlinsley/react-static-starter +startertemplaterepo: https://github.com/tannerlinsley/react-static-starter --- React-Static is a fast, lightweight, and powerful toolkit for building static-progressive React applications and websites. Inspired by create-react-app, it's been carefully designed to meet the highest standards of **SEO, site performance, and user/developer experience**. [**Read the introduction article on Medium**](https://medium.com/@tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc) diff --git a/src/site/generators/record-collector.md b/src/site/generators/record-collector.md index 94a7196f5..9e1a16929 100644 --- a/src/site/generators/record-collector.md +++ b/src/site/generators/record-collector.md @@ -3,21 +3,26 @@ title: Record Collector repo: krompaco/record-collector homepage: https://record-collector.net/en/ language: + - .Net - C# license: - MIT templates: - Razor -description: An ASP.NET Core MVC 3.1 static site toolkit. + - Markdown + - HTML +description: A modern .NET static site toolkit. twitter: rcssgdotnet --- This project is heavily inspired by Hugo and tries to be somewhat compatible with the same content structure and support parsing of TOML, YAML and JSON front matter. -The content file layer is converted to C# lists and objects and then used in a regular ASP.NET Core MVC project which is also where you can work live on both content preview and templating. This means you now can use your existing ASP.NET MVC and C# skills creating static site templates! +The content file layer is converted to C# lists and objects and then used in a regular ASP.NET MVC project which is also where you can work live on both content preview and templating. This means you now can use your existing ASP.NET MVC and C# skills creating static site templates! In this setup the generation process work using the WebApplicationFactory from the Microsoft.AspNetCore.Mvc.Testing package so it doesn't have to fall back to a console application or custom web servers for crunching the files and templates which is the norm for static site generation. -Easy to deploy to Netlify and repo also has examples for various Docker scenarios. +Easy to deploy to Netlify and repo also has examples for various Docker Linux scenarios and GitHub Actions. -It can also run as a regular .NET Core MVC application with real-time rendering. +It can also run as a regular ASP.NET MVC application with real-time rendering and Hot Reload. + +Repo has ready-made frontend setups including Simple.css without any JS or Tailwind CSS with Hotwire (Turbo and Stimulus). \ No newline at end of file diff --git a/src/site/generators/remix.md b/src/site/generators/remix.md new file mode 100644 index 000000000..5b3d32636 --- /dev/null +++ b/src/site/generators/remix.md @@ -0,0 +1,28 @@ +--- +title: Remix +repo: remix-run/remix +homepage: https://remix.run/ +language: + - JavaScript +license: + - MIT +templates: + - React +description: Build Better Websites. Create modern, resilient user experiences with web fundamentals. +startertemplaterepo: https://github.com/netlify-templates/remix-admin-template +twitter: remix_run +--- + +[Remix](https://remix.run) is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers. + +Want to know more? Read the [Technical Explanation of Remix](https://remix.run/discussion/introduction). + +## Documentation + +[Remix Documentation](https://remix.run/docs). + +Remix [community on Discord](https://rmx.as/discord). + +## Contributing + +If you're interested in contributing code and/or documentation, please see [contributing guide](https://remix.run/guides/contributing). diff --git a/src/site/generators/rmarkdown.md b/src/site/generators/rmarkdown.md index 2bcf9a79d..41e3052ab 100644 --- a/src/site/generators/rmarkdown.md +++ b/src/site/generators/rmarkdown.md @@ -7,7 +7,8 @@ language: license: - GPL-3 templates: - - R, R Markdown + - R + - R Markdown description: Dynamic Documents for R --- diff --git a/src/site/generators/routify.md b/src/site/generators/routify.md index 01537a565..008ff76f5 100644 --- a/src/site/generators/routify.md +++ b/src/site/generators/routify.md @@ -9,7 +9,8 @@ license: templates: - Svelte description: Routes for Svelte, automated by your file structure. -startertemplaterepo: roxiness/routify-starter +startertemplaterepo: https://github.com/roxiness/routify-starter +twitter: routifyjs --- Routify offers a great developer experience to build the routes for your Svelte app. diff --git a/src/site/generators/rspress.md b/src/site/generators/rspress.md new file mode 100644 index 000000000..7a554b453 --- /dev/null +++ b/src/site/generators/rspress.md @@ -0,0 +1,21 @@ +--- +title: rspress +repo: web-infra-dev/rspress +homepage: https://rspress.dev/ +language: + - Rust +license: + - MIT +templates: + - MDX +description: Simple, efficient and easy to extend. +--- + +Use react components to expand the generator. + +Highlights: + +- Allows you to use react components in Markdown +- Fast compile time +- Built-in full-text search +- Simpler I18n solution diff --git a/src/site/generators/saber.md b/src/site/generators/saber.md index 77fba5ec2..3601e8303 100644 --- a/src/site/generators/saber.md +++ b/src/site/generators/saber.md @@ -1,6 +1,6 @@ --- title: Saber -repo: egoist/saber +repo: saberland/saber homepage: https://saber.land/ language: - JavaScript diff --git a/src/site/generators/saga.md b/src/site/generators/saga.md new file mode 100644 index 000000000..e102d914a --- /dev/null +++ b/src/site/generators/saga.md @@ -0,0 +1,15 @@ +--- +title: Saga +repo: loopwerk/Saga +homepage: https://github.com/loopwerk/Saga +language: + - Swift +license: + - MIT +templates: + - Markdown +description: A static site generator written in Swift. +twitter: kevinrenskers +--- + +Saga is a static site generator, written in Swift, allowing you to supply your own metadata types for your items. Saga uses a system of extensible readers, writers and renderers supporting things like Atom feeds, paginating and strongly typed HTML templates. It comes with a development server which watches for changes in your content, rebuilds your website and refreshes your browser. diff --git a/src/site/generators/sapper.md b/src/site/generators/sapper.md index b32f79ade..7a45a9c1c 100644 --- a/src/site/generators/sapper.md +++ b/src/site/generators/sapper.md @@ -9,7 +9,7 @@ license: templates: - Svelte description: Sapper is a framework for building high-performance universal web apps. -startertemplaterepo: sveltejs/sapper-template +startertemplaterepo: https://github.com/sveltejs/sapper-template --- Sapper is a framework for building high-performance universal web apps. [Read the guide](https://sapper.svelte.dev/docs) or the [introductory blog post](https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework) to learn more. diff --git a/src/site/generators/sasige.md b/src/site/generators/sasige.md deleted file mode 100644 index 32a50c2c1..000000000 --- a/src/site/generators/sasige.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Sasige -repo: brainfoolong/sasige -homepage: http://sasige.0x.at -language: - - PHP -license: - - MIT -templates: - - PHP -description: One word, TextToWebsite. Sasige will generate static html files and a combination of these is your website. -startertemplaterepo: brainfoolong/sasige-starter ---- - -In one word: `TextToWebsite`. Sasige will generate static html files and a combination of these is your website. We give you the tools to make a blog alike website, to make a documentation website, to make what every you can imagine. This documentation website you currently read is, for sure, generated with Sasige. - -## Why Sasige? - -We know that we are not the only one that give you such tool. But, we are the one (the only?) that use `PHP` is the script language. You probably know PHP. It's an easy to use and even easier to learn script language. It has the power to do everything. PHP was always designed to use it in combination with websites, so why not using it to generate a static website? If it's not enough, here some more advantages: - -- Static sites - Can be hosted everywhere without security concerns -- Themeable - With SCSS support -- Markdown / Html / PHP to website for most flexible content -- Both windows and linux support for the generator -- Multilanguage - Yes, every page could be written in multiple languages if required -- Multiple Pagination - You are not limited to have a single pagination method -- Pagesets - Group pages in custom list's with different filters and sorting -- Continuous integration - Automatic generation when you update your repository, as we do with [Sasige Docs](https://travis-ci.org/brainfoolong/sasige-docs) -- Fully batchable -- Minimum system requirements - Exactly one dependency: PHP, available for every OS diff --git a/src/site/generators/sblg.md b/src/site/generators/sblg.md index 1dd37c9fc..9ab62f261 100644 --- a/src/site/generators/sblg.md +++ b/src/site/generators/sblg.md @@ -6,8 +6,7 @@ language: - C license: - ISC -templates: - - None +templates: [] description: simple off-line blog utility --- diff --git a/src/site/generators/scalatic.md b/src/site/generators/scalatic.md index 48d8dd5e8..2073c77b9 100644 --- a/src/site/generators/scalatic.md +++ b/src/site/generators/scalatic.md @@ -6,6 +6,7 @@ language: - Scala license: - MIT +templates: [] description: Dead simple static blog generator written in Scala. --- diff --git a/src/site/generators/scroll.md b/src/site/generators/scroll.md new file mode 100644 index 000000000..2e14826a3 --- /dev/null +++ b/src/site/generators/scroll.md @@ -0,0 +1,21 @@ +--- +title: Scroll +repo: breck7/scroll +homepage: https://scroll.pub +language: + - JavaScript +license: + - Scroll is Public Domain +templates: + - Scroll + - HTML + - JavaScript +description: Scroll is a language and static site generator for scientists of all ages. +twitter: breckyunits +--- + +Scroll is a language and static site generator for scientists of all ages. + +Scroll includes a command line app that builds static blogs, websites, CSVs, text files, and more. + +Scroll is used for blogs, knowledge bases, static sites, scientific journals, ebooks, and more. diff --git a/src/site/generators/sculpin.md b/src/site/generators/sculpin.md index b03673673..cc4a73864 100644 --- a/src/site/generators/sculpin.md +++ b/src/site/generators/sculpin.md @@ -8,6 +8,8 @@ license: - MIT templates: - Twig + - HTML + - Markdown description: Sculpin is a static site generator written in PHP --- diff --git a/src/site/generators/sergey.md b/src/site/generators/sergey.md index 0f8c4d335..7c1db22e8 100644 --- a/src/site/generators/sergey.md +++ b/src/site/generators/sergey.md @@ -9,7 +9,7 @@ license: templates: - HTML description: The little static site generator -startertemplaterepo: trys/sergey-netlify +startertemplaterepo: https://github.com/trys/sergey-netlify --- Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to sit atop your already brilliant HTML. In essence, Sergey is HTML + partials with slots (named and default) & opt-in Markdown thrown in for good measure. diff --git a/src/site/generators/simple-website.md b/src/site/generators/simple-website.md deleted file mode 100644 index 3e9e69358..000000000 --- a/src/site/generators/simple-website.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: simple-website -repo: alexanderte/simple-website -homepage: https://github.com/alexanderte/simple-website -language: - - Go -license: - - MIT -templates: - - Markdown -description: simple-website is a static site generator written in Go ---- - -simple-website is a static site generator written in Go. It takes Markdown as input, and gives you a static, simple, and responsive website as output. Posts and pages are supported. - -simple-website has been designed with technical simplicity and readability in mind – there are no configuration options and no themes to choose from. The workflow is simple – initialize a website using `simple-website`, create and/or edit Markdown files, run `simple-website` again – and publish. - -## Get it - - go get github.com/alexanderte/simple-website - -## Initialize website - - mkdir title-of-website - cd title-of-website - $GOPATH/bin/simple-website - -## Create content - - $EDITOR _sections/header.md - $EDITOR _posts/YYYY-MM-DD-title-of-post.md - $EDITOR _pages/title-of-page.md - -## Regenerate - - $GOPATH/bin/simple-website - -## MIT License - -Copyright © 2018 Alexander Teinum - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/src/site/generators/simplest.md b/src/site/generators/simplest.md new file mode 100644 index 000000000..5a6696ee3 --- /dev/null +++ b/src/site/generators/simplest.md @@ -0,0 +1,45 @@ +--- +title: Simplest +repo: ciscoheat/simplest-sitegen +homepage: https://github.com/ciscoheat/simplest-sitegen +language: + - TypeScript +license: + - MIT +templates: + - HTML + - Markdown + - Pug + - CSS + - Sass + - PHP +description: The simplest static sitegen there is. Build a modern, fully working website using only HTML. +--- +## Do you recognize this: + +- You are comfortable with html and want to build a relatively simple, modern static site. +- You look at the jamstack site generators, but they always seem a bit too complicated. Too much configuration, too much scaffolding, too many themes, too much documentation. +- You don't want to get into all that *again*, because you have tested a few of them. + +## Don't despair, the solution is in front of you! + +Introducing **simplest**. It's true, it really is the simplest static sitegen, while still being quite able. + +Only HTML needed. No markdown, no yaml, no template languages, no huge documentation, and a one-step build process. + +## Support for + +- Pure HTML templating +- Sass +- Automatic cache-busting +- Multiple templates +- Live reload dev server +- Highly configurable +- Plugins for parsing custom files +- Can optionally use PHP for easy server-side power + +## Test it out + +Take it for a spin immediately with + +`npm create simplest-sitegen` diff --git a/src/site/generators/simplified-saaze.md b/src/site/generators/simplified-saaze.md new file mode 100644 index 000000000..228b71f37 --- /dev/null +++ b/src/site/generators/simplified-saaze.md @@ -0,0 +1,47 @@ +--- +title: Simplified Saaze +repo: eklausme/saaze +homepage: https://eklausmeier.goip.de/blog/2021/10-31-simplified-saaze/ +language: + - PHP +license: + - MIT +templates: + - PHP +description: An easy-to-use generator supporting MathJax and other embeds, faster than Hugo and Zola +twitter: eklausmeier +startertemplaterepo: https://github.com/eklausme/saaze-example +--- + +_Simplified Saaze_ is a static site generator. I.e., it takes Markdown files as input and generates fixed HTML files. _Simplified Saaze_ is a simplified version of [Saaze](https://saaze.dev) from [Gilbert Pellegrom](https://gilbitron.me). Large parts of this document are taken from the [Saaze documentation](https://saaze.dev/docs). _Simplified Saaze_ is roughly 90% compatible with Saaze. _Simplified Saaze_ is built on below principles. + +__1. Easy to run.__ _Simplified Saaze_ is built in PHP with some small parts in C. PHP is roughly used by 80% of all web-sites on the internet. _Simplified Saaze_ needs _no_ other PHP framework and only one PECL library. + +__2. Easy to host.__ Static sites are great for being fast and easy to deploy. However, sometimes you need dynamic aspects to your site (e.g., contact forms, custom scripts, etc). _Simplified Saaze_ gives you the choice depending on what makes most sense. + +__3. Easy to edit.__ Markdown has become the de-facto way to edit content for the internet. It's simple to understand and write. So _Simplified Saaze_ uses Markdown with a sprinkle of Yaml frontmatter to manage your content. + +__4. Easy to theme.__ _Simplified Saaze_ uses plain PHP/HTML to theme. Any PHP code is a valid theme and can be checked with `php -l`. + +__5. Fast and secure.__ _Simplified Saaze_ works with ordinay files in your filesystem. No database required. This means less setup and maintenance, better security and more speed. Generating static files is faster than Hugo or Zola by a [factor](https://eklausmeier.goip.de/blog/2021/11-13-performance-comparison-saaze-vs-hugo-vs-zola/), it is therefore faster than Eleventy by an order of magnitude. + +__6. Simple to understand.__ _Simplified Sazze_ deliberately has a stupidly simple architecture: Everything is a collection of entries. Pages, posts, docs, recipes, whatever. It all works in the same, simple way. Supports multiple blogs under the same URL out of the box. + +__7. All-inclusive.__ Developing your site should be painless. No external tools required. + +_Simplified Saaze_ defines some special tags for various social media. Furthermore, [MathJax](https://www.mathjax.org) is fully supported. + +Nr | Function | Syntax | Example +---|-----------------|----------------------------|--------- + 1 | YouTube | `[youtube] xxx [/youtube]` | `[youtube]nvlAW6P5PmE[/youtube]` + 2 | Vimeo | `[vimeo] xxx [/vimeo]` | `[vimeo]126529871[/vimeo]` + 3 | Twitter | `[twitter] xxx [/twitter]` | `[twitter]https://twitter.com/eklausmeier/status/1352896936051937281[/twitter]` + 4 | CodePen | `[codepen] user/hash [/codepen]` | `[codepen] thebabydino/eJrPoa [/codepen]` + 5 | WordPress Video | `[wpvideo] code w=x h=y ]` | `[wpvideo RLkLgz2V w=400 h=224]` + 6 | [Mermaid](https://mermaid-js.github.io/mermaid) | `[mermaid] xxx [/mermaid]`, where xxx is the Mermaid code | `[mermaid]flowchart LR Start --> Stop[/mermaid]` + 7 | Inline math | `$ formula $` | `$a^2+b^2=c^2$` + 8 | Display math | `$$ display formula $$` | `$$ \int_1^\infty {1\over x^2} $$` + + + + diff --git a/src/site/generators/skua.md b/src/site/generators/skua.md index d5abfe65f..854ca5c3e 100644 --- a/src/site/generators/skua.md +++ b/src/site/generators/skua.md @@ -9,7 +9,7 @@ license: templates: - Jinja2 description: A configurable Pythonic static site generator. -startertemplaterepo: teymour-aldridge/skua-starter-project +startertemplaterepo: https://github.com/teymour-aldridge/skua-starter-project --- Skua is a static site generator written in Python. Unlike many static site generators Skua doesn't offer a command-line interface – instead Skua projects are written using regular Python code which allows users to more easily customise their sites. diff --git a/src/site/generators/slate.md b/src/site/generators/slate.md index a6033d56f..913183aee 100644 --- a/src/site/generators/slate.md +++ b/src/site/generators/slate.md @@ -9,7 +9,7 @@ license: templates: - Markdown description: Beautiful static documentation for your API -startertemplaterepo: slatedocs/slate +startertemplaterepo: https://github.com/slatedocs/slate --- **Slate** helps you create beautiful, intelligent, responsive API documentation. diff --git a/src/site/generators/slick.md b/src/site/generators/slick.md new file mode 100644 index 000000000..0e663d326 --- /dev/null +++ b/src/site/generators/slick.md @@ -0,0 +1,37 @@ +--- +title: Slick +repo: ChrisPenner/slick +homepage: https://github.com/ChrisPenner/slick +language: + - Haskell +license: + - BSD-3-Clause +templates: + - Mustache +description: Slick is a static site generator written and configured using Haskell. It's the spiritual successor to my previous static-site generator project SitePipe; but is faster, simpler, and more easily used in combination with other tools. +--- + +Slick provides a small set of tools and combinators for building static +websites on top of the [Shake](https://shakebuild.com/) build system. Shake is +adaptable, fast, reliable, and caches aggressively so it's a sensible tool for +static-site builds, but figuring out how to get started can be a bit abstract. Slick aims to answer the question of +'how do I get a site building?' while giving you the necessary tools and examples to figure out how to accomplish your +goals. + +Here's a quick overview of what Slick can do: + +- Slick uses the Shake build tool; the same used by ghcide! We recommend using `Development.Shake.Forward`; it auto-discovers which resources it should cache as you go! This means a blazing fast static site builder without all the annoying dependency tracking. +- Slick provides helpers for loading in blog-post-like things using Pandoc under the hood; + - This means that if Pandoc can read it, you can use it with Slick! + - Write your blog posts in Markdown or LaTeX and render it to + syntax-highlighted HTML! + - Slick processes Pandoc (and LaTeX) metadata into a usable form (as an + [Aeson](https://hackage.haskell.org/package/aeson) Value object) which you can manipulate as you please. +- Slick provides combinators for rendering [Mustache templates](https://mustache.github.io/) + - Slick wraps Justus Adam's [Mustache](http://hackage.haskell.org/package/mustache-2.3.0/docs/Text-Mustache.html) + library and provides cached template rendering with awareness of changes to templates, partials, and Mustache + objects. + - It's a thin wrapper so you can still use things like Mustache functions, etc. if you like! +- Provides only the individual tools without opinions about how to wire them up; if you want to load blog posts from + a database and render them out using Blaze html; well go ahead, we can help with that! +- Provides caching of arbitrary (JSON serializable) objects using Shake resulting in super-fast rebuild times! diff --git a/src/site/generators/soupault.md b/src/site/generators/soupault.md index 28dd8b910..6921135d7 100644 --- a/src/site/generators/soupault.md +++ b/src/site/generators/soupault.md @@ -1,26 +1,64 @@ --- title: soupault repo: dmbaturin/soupault -homepage: https://soupault.neocities.org +homepage: https://soupault.app language: - OCaml license: - MIT templates: - HTML + - Jingoo description: Website generator based on HTML rewriting instead of template processing. Single binary, extensible with Lua plugins. +startertemplaterepo: https://github.com/dmbaturin/soupault-sample-blog --- -Soupault is a static website generator and HTML processor based on element tree rewriting, -similar to DOM manipulation, but without a browser. Instead of using a template processsor, -it parses your HTML and transforms it. +## Based on element tree rewriting -You can tell it where to insert content using CSS3 selectors. The workflow is defined in a single configuration file -in the TOML format, `soupault.conf`. HTML transformation "widgets" form a pipeline where output of one widget can be used -as input for another, and you can specify their execution order explicitly. You can also limit widgets to specific pages -or sections. +Soupault is an automated HTML _editor_ rather than a just _generator_. It can parse HTML into an element tree, +manipulate it and save to a file. Like DOM manipulation, but without a browser. -For example, this snippet will insert the content of `includes/menu.html` inside `