/community page updates

.eleventy.js

@@ -1,12 +1,23 @@
 const lodashGet = require("lodash/get");
 const yaml = require("js-yaml");
+const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");
 
 module.exports = function (eleventyConfig) {
   // Support yaml data files
   eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents))
 
   eleventyConfig.addWatchTarget("src/site/survey/**/*.js");
 
+  // ODB for Discord events
+  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
+    name: "community",
+    functionsDir: './netlify/functions',
+    inputDir: "./src/site",
+    redirects: "netlify-toml-builders",
+    copy: ["algolia.config.js"]
+  });
+
+
   // pass images directly through to the output
   eleventyConfig.addPassthroughCopy("src/site/img");
   eleventyConfig.addPassthroughCopy({

.gitignore

@@ -19,3 +19,6 @@ dist
 
 # Environment variables
 .env
+
+netlify/functions/community/**
+!netlify/functions/community/index.js

netlify.toml

@@ -1,84 +1,114 @@
 [build]
-  command = "npm run build"
-  publish = "dist"
+command = "npm run build"
+publish = "dist"
 
-[build.environment]
+  [build.environment]
   NODE_VERSION = "12.16.2"
   NODE_ENV = "production"
 
 [dev]
-  command = "npm run start"
-  publish = "dist"
+command = "npm run start"
+publish = "dist"
+
+[functions]
+directory = "/netlify/functions"
+
+[[redirects]]
+from = "/community/"
+to = "/.netlify/builders/community"
+status = 200
+force = true
+_generated_by_eleventy_serverless = "community"
+
+[[redirects]]
+from = "/conference"
+to = "/conf"
+status = 301
+
+[[redirects]]
+from = "/discord"
+to = "https://discord.gg/jamstack"
+status = 302
+
+[[redirects]]
+from = "/conf"
+to = "https://jamstackconf.com/conf/"
+status = 200
+
+[[redirects]]
+from = "/conf/cfp"
+to = "https://docs.google.com/forms/d/e/1FAIpQLSc-z50GyD7zXzr_JCn2M1NBFZ-h65kSdu7zn43V1u2qAKO3ew/viewform"
+status = 302
 
 [[redirects]]
-  from = "/conference"
-  to = "/conf"
-  status = 301
+from = "/conf/*"
+to = "https://jamstackconf.com/conf/:splat"
+status = 200
 
 [[redirects]]
-  from = "/conf"
-  to = "https://jamstackconf.com/conf/"
-  status = 200
+from = "/discord"
+to = "https://discord.gg/jamstack"
+status = 302
 
 [[redirects]]
-  from = "/conf/cfp"
-  to = "https://docs.google.com/forms/d/e/1FAIpQLSc-z50GyD7zXzr_JCn2M1NBFZ-h65kSdu7zn43V1u2qAKO3ew/viewform"
-  status = 302
+from = "/women-of-jamstack/"
+to = "https://womenofjamstack.com"
+status = 302
 
 [[redirects]]
-  from = "/conf/*"
-  to = "https://jamstackconf.com/conf/:splat"
-  status = 200
+from = "/best-practices"
+to = "/resources"
+status = 301
 
 [[redirects]]
-  from = "/discord"
-  to = "https://discord.gg/jamstack"
-  status = 302
+from = "/diversity"
+to = "/code-of-conduct"
+status = 301
 
 [[redirects]]
-  from = "/women-of-jamstack/"
-  to = "https://womenofjamstack.com"
-  status = 302
+from = "/benefits"
+to = "/why-jamstack"
+status = 301
 
 [[redirects]]
-  from = "/best-practices"
-  to = "/resources"
-  status = 301
+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 = "/diversity"
-  to = "/code-of-conduct"
-  status = 301
+from = "/conf/"
+to = "https://jamstackconf.com/"
+status = 302
 
 [[redirects]]
-  from = "/benefits"
-  to = "/why-jamstack"
-  status = 301
+from = "/conf/cfp"
+to = "https://docs.google.com/forms/d/e/1FAIpQLSeR5W4m9owqDBJEq2EuRUNXFTOeLCxFPUn0qbuCE15o4SWDFg/viewform"
+status = 302
 
 [[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
+from = "/glossary/*"
+to = "/glossary/contribute/index.html"
+status = 404
 
 [[redirects]]
-  from = "/glossary/*"
-  to = "/glossary/contribute/index.html"
-  status = 404
+from = "/glossary/*"
+to = "/glossary/contribute/index.html"
+status = 404
 
 [[redirects]]
-  from = "/headless-cms/keystone-5/"
-  to = "/headless-cms/keystone/"
-  status = 301
+from = "/headless-cms/keystone-5/"
+to = "/headless-cms/keystone/"
+status = 301
 
 [[redirects]]
-  from = "/survey/"
-  to = "/survey/2021/"
-  status = 302
+from = "/survey/"
+to = "/survey/2021/"
+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
+from = "/survey/2020/"
+to = "https://www.netlify.com/blog/2020/05/27/state-of-the-jamstack-survey-2020-first-results/"
+status = 301
 
 [[plugins]]
-  package = "./plugins/keep-dot-cache-folder"
+package = "./plugins/keep-dot-cache-folder"

netlify/functions/community/index.js

@@ -0,0 +1,49 @@
+const { EleventyServerless } = require("@11ty/eleventy");
+
+// Explicit dependencies for the bundler from config file and global data.
+// The file is generated by the Eleventy Serverless Bundler Plugin.
+require("./eleventy-bundler-modules.js");
+
+async function handler(event) {
+  let elev = new EleventyServerless("community", {
+    path: new URL(event.rawUrl).pathname,
+    query: event.queryStringParameters,
+    functionsDir: "./netlify/functions",
+  });
+
+  try {
+    let [page] = await elev.getOutput();
+
+    // If you want some of the data cascade available in `page.data`, use `eleventyConfig.dataFilterSelectors`.
+    // Read more: https://www.11ty.dev/docs/config/#data-filter-selectors
+
+    return {
+      statusCode: 200,
+      headers: {
+        "Content-Type": "text/html; charset=UTF-8",
+      },
+      body: page.content,
+      ttl: 60 * 60 && 60 * 60 * 24, // 1 day
+    };
+  } catch (error) {
+    // Only console log for matching serverless paths
+    // (otherwise you’ll see a bunch of BrowserSync 404s for non-dynamic URLs during --serve)
+    if (elev.isServerlessUrl(event.path)) {
+      console.log("Serverless Error:", error);
+    }
+
+    return {
+      statusCode: error.httpStatusCode || 500,
+      body: JSON.stringify(
+        {
+          error: error.message,
+        },
+        null,
+        2
+      ),
+    };
+  }
+}
+
+const { builder } = require("@netlify/functions");
+exports.handler = builder(handler);

netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "2a399c17-6711-4037-b62e-65225fc6d475"
+}

package.json

@@ -23,22 +23,21 @@
   "dependencies": {
     "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-cache-assets": "^2.1.0",
+    "@netlify/functions": "^1.0.0",
     "@zachleat/filter-container": "^1.0.3",
     "autoprefixer": "^10.2.5",
     "cssnano": "^4.1.10",
     "d3": "^7.1.1",
     "dotenv": "^8.2.0",
     "fast-glob": "^3.2.5",
     "gray-matter": "^4.0.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",
-    "placename": "^1.1.2",
     "postcss": "^8.2.8",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^13.0.0",

src/css/tailwind.css

@@ -335,6 +335,52 @@ details[open] .summary-swap-open {
   display: none !important;
 }
 
+.event-card-component {
+  --img-ratio: 3/2;
+
+  display: flex;
+  flex-direction: column;
+  /* Supported for flexbox in modern browsers since April 2021 */
+  gap: 1rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35);  
+  @apply bg-white border-4 border-pink-700 rounded-xl;
+
+}
+
+.event-card-component > img {
+  aspect-ratio: var(--img-ratio);
+  object-fit: cover;
+  width: 100%;
+  @apply rounded-t-lg;
+}
+
+.event-card-component > img:first-child {
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.event-card-component > :not(img) {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.event-card-component > :not(img):first-child {
+  margin-top: 1rem;
+}
+
+/* Enhanced `:not()` accepts a selector list,
+but as a fallback you can chain `:not()` instead */
+.event-card-component > :last-of-type:not(img, h2, h3, h4) {
+  margin-bottom: 1rem;
+}
+
+.event-card-component > :not(h2, h3, h4) {
+  font-size: 0.9rem;
+}
+
+.event-card-component > a {
+  align-self: start;
+}
+
 /* Jamstack TV */
 .ais-SearchBox-input {
   @apply bg-blue-900;