AnalyzePlatypus / AhavasChayaSite

Static site for Ahavas Chaya

Ahavas Chaya Site

My personal starter for Eleventy sites.

📱 Live demo ›

Features

Performance

• 100% Lighthouse score
• Optimized Font Loading (self-hosted Google Fonts)
• Optimized Image loading (<picture> with avif & webp)
• Cache-busting with ?=version
• Optimized Netlify build time with the Netlify Cache plugin
• Quicklink

Robustness

• Asset Retry

SEO ready

• SEO ready with OpenGraph & Twitter meta tags
• Open Graph card image & Favicon ready
• SEO with JSON-LD

Embedding:

• JSON embedding
• YouTube embedding
• ENV VAR embedding
• SVG embedding

Included libraries

• Tailwind CSS
• Alpine.js JS microframework
• Phosphor icons

Eleventy Plugins

• nbsp filter
• Emoji Read Time

Monitoring:

• Fathom Analytics privacy-respecting analytics
• Honeybadger error monitoring
• Fullstory simulated video monitoring

Launch checklist

• Set up Honeybadger deploy tracking

To-do

• Update manifest.json from seo.json
• Fix footer
• Fix JSON-LD for FAQs (diy's in the front matter of index.njk)

Components

• Hero
• Navbar
• Sticky navbar
• Mega bullets
• Article CTA
• FAQ - [NEW] - collapsable on mobile!
• Footer
• Footer social links
• Footer links
• Footer link badges
• Mailing list signup
• Mobile Menu toggle
• Mobile Menu
• Section background images
• Navbar dropdown
• Navbar mega dropdown
• Slider with lightbox
• Gallery
• Logo Cloud
• Testimonial cloud
• Contact Us
• Contact Form
• Blog snippets
• Blog page
• Search

Someday

• Service Worker?

Other

• Auto-updating copyright year
• Open Graph image
• Favicons

Getting Started

1. Copy .env.example. Rename to .env, then fill out all values.
2. Generate Favicons with https://realfavicongenerator.net. Place the files in /public
3. Run fonts through https://google-webfonts-helper.herokuapp.com and add them to /fonts. Then update styles/tailwind.config.js to use the new font.

Other features

Canonical URLs

To add a canonical URL to a blog post, add the canonicalUrl property to your front matter.

Shortcodes

Link

{% link {
 url: "", 
 label: "",
 ariaLabel: "",
 cssClasses: "",
 inlineStyles: "",
 attributes: "",
 openInNewTab: false,
 download: false,
 protectFromScrapers: false,
 fathomClickId: ""
} %}
{% endlink %}

Embed an SVG

{{ '/images/backgrounds/Background Ellipse 1.svg' | svgContents(".css_classes") | safe }}

Embed an Icon

	{{ '/phosphor-icons/regular/caret-left.svg' | svgContents("icon-lg") | safe }}

Embed a responsive image

	{% image {src: partner.imagePath, alt: partner.imageDescription, widths: [600, 320, 300, 160], cssSizes: '(max-width: 639px) 160px, 300px', cssClass: ''} %}

Rellax: Parallax

rellax data-rellax-speed='-1' data-rellax-desktop-speed='-3'

Other

Logo SVG Viewbox

For some reason, the SVG logos have huge amounts of padding. This can be fixed by manually changing the viewBox attribute on the svg element to this value:

viewBox="520 650 2030 560"

Using JSON-LD

{% jsonLdScript meta, type, tags %}

type is a String that can be "page", "post", or "product". Anything else will be silently ignored. Default is "page" tags is an Array[String]. It only has an effect on the "post" type. Otherwise it'll be ignored.

The generated JSON LD will try to render:

• organization
• breadcrumbs
• website
• faq

Depending on type it'll also render a "page", "post", or "product".

Thank You

• Original theme by Greg Wolanski

License

This repository is property of Ahavas Chaya Inc. All rights reserved.

See LICENSE for more information.