Create components for header and footer

[oferb]

Example code: components.zip

After we do this, make the logo point to the home page. Set "Sensory Interface" alt text on the logo image.

[S0AndS0]

Components can be written in Liquid, compiled server/dev side, and served to clients statically.

GitHub Pages makes using Liquid very simple by adding a Jekyll config, _config.yml file to be precise and doing a little reorganizing...

_config.yml

title: Sensory Interface
description: >- # this means to ignore newlines until "baseurl:"
  The Sensory Interface project aims to help people with blindness access data such as graphs and other complex numerical data
# baseurl: "" # the subpath of your site, e.g. /blog or /public
url: 'https://hasadna.github.io'

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-github-metadata

collections_dir: public
collections:
  about:
    output: true
    permalink: /:collection/:name/
  tutorial:
    output: true
    permalink: /:collection/:name/
  index:
    output: true
    permalink: /:collection/:name/

... which will also make maintaining translations of pages much simpler, because content will be in in .md files separate from CSS, HTML, JS, etc. meaning that anyone wanting to help with translation need not have any coding experience. Plus this would make maintaining and changing the site significantly easier.

The directory/file structure could be similar to...

_layouts/
  default.html

_includes/
  head.html
  header.html
  footer.html

_scss/
  main.scss
  header.scss
  content.scss
  footer.scss

assets/
  css/
    # ... where SCSS build process outputs to

  images/
    icons/
      graph.svg
      hand.svg
      paper.svg

    logo/
      s-logo-blue.svg
      s-logo-white.svg

    team/
      mohamd.svg
      ofer.svg

    back.svg
    heart.svg
    illustration.svg
    product.svg
    social-image.svg

  piano/
    # *.mp3

  js/

public/
  _about/
    index.html
    index.he.html

  _tutorial/
    index.html
    index.he.html

  _index/
    index.html
    index.he.html

ts/
  bulder/
    bulder.ts

  languages/
    i18n.ts

  view/
    audio.ts
    braille_controller.ts
    view.ts

  scripts.ts
  utils.ts

This would better organize things and make the site's components (header, footer, etc.) the same across all pages, plus there is the added bonus of having scripted logic build HTML and CSS for clients. Which should all equate to a better experience for both contributors and clients.

[oferb]

Thanks for the suggestion. I think we'll stay with the components in the zip file, they seem easier.

[S0AndS0]

Doing things the correct way does not always seem easy, however, in the long-term it is not only easier but also less fragile.

Using JavaScript for client-side dynamic content, and/or things that CSS or HTML cannot do is a correct way to utilize JavaScript.

Using PHP for server-side dynamic content is a correct way to utilize PHP.

Using a static site builder for static content is the correct way to utilize tools such as Jekyll, MustacheJS, etc.

Different tools are designed to solve different problems.