README.md

Eko's Website & Blog on Jamstack

The Eko website & blog built with Eleventy. Uses reusable component and simple configurations to automate page creation.

---

🌟 Features

1. Built with Eleventy! (docs)
2. Netlify CMS: easy blog & website configuration management.
3. Reusable components for faster development (src/_includes).
4. Simple configuration files for creating retail/API product pages (src/_data).
5. Simple stack. Minification/bundling using internal 11ty plugins.

🔗 Table Of Contents

1. Getting Started
2. Project Structure
3. How to add a new blog post?
4. How to add or edit a Retail-product page?
5. How to add or edit an API-product page?
6. How to add a custom page?
7. How to add redirections to support old links?

🏁 Getting Started (Development Setup)

1. Install node/npm & git
2. Clone this Repository: git clone https://github.com/ekoindia/eko-website
3. Navigate to the directory: cd eko-website
4. Install dependencies: npm install
5. Copy .env.example to a new .env file and setup your own defaults
6. Build and host locally for local development: npm start Checkout in the browser: localhost:8080

🗃 Project Structure

• 📄🔧 .eleventy.js All project technical configurations go here
• 📂 src/ Main source directory. Top-level/custom webpages are created right here
  • 📄 index.njk The home page
  • 📂✍ blog/ Create blog posts here
    • 📄 index.njk The blog listing page
    • 📄 blog-tag-pages.njk Page template to list posts for individual tags
  • 📂🔧 _data All the website configuration and data go here
    • 📄🔧 website.yaml Top configurations, like, domain, logo, title, SEO, etc
    • 📑🔧 products.yaml The retail products listing. Pages automatically created and added to menu
    • 📑🔧 developers.yaml The API products listing. Pages automatically created and added to menu
    • 📑🔧 ekoUniversity.yaml The video listing for the Eko University section
    • 📄🔧 footer.yaml Configure footer links
    • 📄🔧 env.yaml Secret configurations as envoirnment variables
  • 📂👩‍💻 _layouts Reusable templates for various page types
    • 📄⭐ base.njk Main template with outermost common code used by all pages
    • 📄 product_page.njk Template for retail product pages
    • 📄 developer_page.njk Template for API product pages
    • 📄 blog_post.njk Template for blog post pages ideally written in markdown
    • 📄 page.njk Template for normal pages ideally written in markdown
    • 📄 ekoUniversity.njk For the Eko University page
  • 📂🧩 _includes All build-time reusable components go here
    • 📓 section_*.njk Full width reusable UI components that compose the index & product pages
    • 📄 navigation.njk Top navigation bar in every page
    • 📄 footer.njk Footer section at the bottom of every page
    • 📄 blogslist.njk List of all blog posts with pagination
    • 📄 form.njk Visitor sign-up form
    • 📂🎨 css CSS files - inlined into HTML during build
      • 📄 base.css Common CSS rules used in every page
      • 📄 blog.css CSS rules for pages using the 'blog' or 'page' template
      • 📄 nav.css CSS rules for top navigation menu
      • 📄 footer.css CSS rules for footer section
      • 📄 flex.css Helper classes for CSS Flexbox
      • 📄 carousel.css CSS rules for the carousel section
      • 📄 section_components.css CSS rules for the section_*.njk reusable components
    • 📁 js Javascript files - inlined into HTML during build
  • 📁🖼 assets Static assets like images, icons, etc
• 📂 utils/ 11ty build-time custom utilities...
  • 📄 shortcodes.js Reusable short markup (HTML) snippets (docs)
  • 📄 filters.js Custom filters for 11ty to be used in templates to manipulate data (docs)

❓ How to add a new blog post?

1. Add a new file in the src/blog/ folder (or, copy an existing file).
2. File name becomes the URL of the blog-post (without the extension).
3. Easiest way to write the post is to use Markdown (.md). Any other file format can be used (eg: Nunjucks, HTML, Liquid, Javascript).
   1. Check EXAMPLE-POST.md for an example page and a quick guide to markdown.
4. Add other page info (like title, description, image, etc) in the top section of the page between the two '---' lines.
   1. Make the first paragraph of the post an excerpt by add a <!-- excerpt --> comment after it. This will be shown as the post description.
   2. Alternatively, add a description field in the top section of the page between the two '---' lines.
   3. Check EXAMPLE-POST.md for a quick example.
5. You can also use the graphical admin interface (provided by Netlify CMS) to easily add/edit blog posts.

❓ How to add or edit a Retail-product page?

1. Retail product pages can by added without coding by just adding the product details to the configuration file!
2. All configuration files reside in the src/_data/ folder.
3. Configuration files are simple text files written in YAML format.
   1. It is a simple format to understand and write manually.
   2. Just ensure proper indentation and spaces!
4. Open the src/_data/products.yaml file.
5. Add a new product by copying configuration of an existing product and changing it's values!
6. Any new product page is automatically added to the navigation menu!

❓ How to add or edit an API-product page?

1. API product pages can by added without coding by just adding the product details to the configuration file!
2. All configuration files reside in the src/_data/ folder.
3. Configuration files are simple text files written in YAML format.
   1. It is a simple format to understand and write manually.
   2. Just ensure proper indentation and spaces!
4. Open the src/_data/developers.yaml file.
5. Add a new product by copying configuration of an existing product and changing it's values!
6. Any new product page is automatically added to the navigation menu!

❓ How to add a custom page?

1. Add a new file in the src/ folder (or, copy an existing file).
   1. File name becomes the URL of the blog-post (without the extension).
   2. You can also create the file under a sub-directory, if required. The page URL will reflect the sub-directory in the path.
2. Easiest way to write the post is to use Markdown (.md). Any other file format can be used (eg: Nunjucks, HTML, Liquid, Javascript).
   1. Check EXAMPLE-POST.md for an example page and a quick guide to markdown.
3. For full customization, create a Nunjucks file (.njk) and write any custom HTML.
4. Add other page info (like description, social image, etc) at the top of the page between the two '---' lines.
5. Add to navigation menu in the src/_includes/navigation.njk file.

❓ How to add redirections to support old links?

1. Add an entry in the src/_redirects file.
2. Example and documentation in the file.

❓ How to add a new env variable?

1. Checkout the file src/_data/env.js
2. Add a new env variable name in this file
3. Now this variable can be accessed anywhere using env.<VARIABLE_NAME>