search

MERLCenter / MERL-Center-public

Website and public, open source content of the MERL Center. See website at https://merlcenter.org
MIT License
30 stars 22 forks source link

MERL Site Architecture #138

Closed ExperimentsInHonesty closed 1 year ago

ExperimentsInHonesty commented 1 year ago

Overview

REPLACE THIS TEXT -Text here that clearly states the purpose of this issue in 2 sentences or less.

Action Items

REPLACE THIS TEXT -If this is the beginning of the task this is most likely something to be researched and documented.

REPLACE THIS TEXT -If the issue has already been researched, and the course of action is clear, this will describe the steps. However, if the steps can be divided into tasks for more than one person, we recommend dividing it up into separate issues, or assigning it as a pair programming task.

Resources/Instructions

https://drive.google.com/drive/folders/1H-O9-Z9YUa1X_lGkDseLaOAE968T5-Q-

ExperimentsInHonesty commented 1 year ago

MERL Center Website Construction

Brief notes about the site is constructed, to be used later

Main Pages

Each main page has an html page in the root directory

Top Menu

The menu is structured in the header

Hero

Color

Would need to make a new hero color for the new section. Possibly the green

Image

There are two different hero images in the site. They are referred to as direction images

Filters

ExperimentsInHonesty commented 1 year ago

Presentations section

presentations.html the page that displays when you go to https://merlcenter.org/presentations/

contains an include: https://github.com/MERLTech/MERL-Center-public/blob/main/_includes/presentation.html

there is a collection folder called _presentations https://github.com/MERLTech/MERL-Center-public/tree/main/_presentations

MattPereira commented 1 year ago

Mozfest_2022-MERL_CENTER_presentation.md

---
anchor-tag: merl-center-presentation-2022
name: MERL Center Presentation 2022
authors:
  - author: Mala Kumar
    authorTitle: Director, Tech for Social Good, GitHub
    authorGitHubHandle: malakumar85
    authorGitHubID: 12953652
  - author: Ben Kinsella
    authorTitle: General Manager, Tribe AI
    authorGitHubHandle: bjk127
    authorGitHubID: 25569016
  - author: Stephanie Coker
    authorTitle: Evaluation & Learning Consultant, TCC Group
    authorGitHubHandle: scoker-me
    authorGitHubID: 55405623
  - author: Eric Jahn
    authorTitle: Founder, HSLynk
    authorGitHubHandle: eric-jahn
    authorGitHubID: 4115079
date: 2022-03-09
summary: Hear from four members of the MERL Center about data maturity, APIs for human services, and mapping MERL and tech workflows.
slides-url: /assets/img/MozFest-2022_MERLCenter.pdf
video-url: https://www.youtube.com/embed/IQdj4P6k9FA
event-presented-at: Mozfest 2022
event-general-name: Mozilla Festival
event-general-url: https://www.mozillafestival.org/
event-specific-name: MozFest 2022 announcement
event-specific-url: https://foundation.mozilla.org/en/blog/save-the-date-mozfest-2022/
---
MattPereira commented 1 year ago

_config.yml

# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.

# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: The official MERL open source community
email: contact@github.com
description: |
    MERL Center is an open source community creating resources for monitoring, evaluation, research and learning (MERL) practitioners of all technology capacities.
url: "https://merlcenter.org"
twitter_username: MERLTech
github_username:  MERLTech

# Build settings
markdown: kramdown

plugins:
  - jekyll-feed
  - jekyll-octicons
  - jekyll-seo-tag
  - jekyll-sitemap

# Exclude from processing.
# The following items will not be processed, by default. Create a custom list
# to override the default setting.

exclude:
  - README.md
  - Gemfile
  - Gemfile.lock
  - CNAME
  - script
  - vendor/gems
  - node_modules
  - node_modules/**/*.md
  - node_modules/**/CHANGELOG.md
  - CHANGELOG.md
  - gulpfile.js
  - package.json
  - package-lock.json
seo:

sass:
  style: :compressed
  # Where you keep your scss files
  sass_dir: assets/css/
  # Where sass should look for other scss
  load_paths:
    - node_modules/

collections:
  caseStudies:
    output: true
    permalink: /:collection/:title/
  guides:
    output: true
    permalink: /:collection/:title/
  presentations:
    output: true

feed:
  collections:
    caseStudies:
      path: "case-studies/feed.xml"

twitter:
  username: github

defaults:
  -
    scope:
      path: ""
    values:
      image: assets/img/social-card.png
      layout: default
      is_post: true
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      category: blog

google_analytics: G-2MNYD6Y5H2
MattPereira commented 1 year ago

_includes/presentation.html

<div class="mb-5">
  <!-- title section -->
  <div>
    <h2 class="h2 mb-2" id="{{ presentation.anchor-tag }}">
      {{ presentation.name }}
    </h2>
  </div>
  <!-- authors appearing - KEEP -->
  {% assign authCount = presentation.authors|size %}
  <!--  -->
  {% if authCount == 1 %}
  <!--  -->
  {% for author in presentation.authors %}
  <div class="author my-4">
    <div style="width: 38px" class="d-none d-md-flex">
      {% include authorImg.html %}
    </div>
    <div class="ml-1">
      <p>{{ author.author }}</p>
    </div>
  </div>
  {% endfor %} {% else %}
  <div class="author my-4">
    {% for author in presentation.authors %}
    <figure class="d-none d-md-flex">{% include authorImg.html %}</figure>
    {% endfor %}
    <div>
      <p>
        {% for author in presentation.authors %} {{ author.author }} {% if
        forloop.last %}{% else %}, {% endif %}{% endfor %}
      </p>
    </div>
  </div>
  {% endif %}

  <!-- Summary -->
  <div class="mb-3">
    <p>{{ presentation.summary }}</p>
  </div>

  <!-- Video Embed-->
  <div
    class="mb-2"
    style="position: relative; width: 100%; padding-top: 56.25%"
  >
    <iframe
      style="
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
      "
      src="{{ presentation.video-url }}"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>

  <!-- event-general and specific links-->
  <div>
    <p>
      <a href="{{ presentation.event-general-url }}"
        >{{ presentation.event-general-name }}</a
      >
      |
      <a href="{{ presentation.event-specific-url }}"
        >{{ presentation.event-specific-name }}</a
      >
    </p>
  </div>

  <!-- Watch info -->
  <div class="rte">
    <p>
      Watch: <a href="{{ presentation.video-url }}">Video</a> |
      <a href="{{ presentation.slides-url }}">PDF</a>
    </p>
  </div>
</div>
MattPereira commented 1 year ago

_includes/authorImg.html

{% if author.authorGitHubID %}
<img
  class="left-img circle my-0"
  src="https://avatars.githubusercontent.com/u/{{ author.authorGitHubID }}?s=72"
  alt="{{ author.author }}"
  data-animate-in="fade"
  data-animate-in-delay="110"
/>
{% else %}
<img
  class="left-img circle my-0"
  src="{{ '/assets/img/author-fallback.png' | relative_url }}"
  alt="{{ author.author }}"
  data-animate-in="fade"
  data-animate-in-delay="110"
/>
{% endif %}
MattPereira commented 1 year ago

presentations.html

---
layout: default
title: Member Presentations
id: presentations
permalink: /presentations/
---
<div class="hero">
  <div class="wrapper">
    <div class="hero__content" data-animate-in="fade" data-animate-in-delay="110">

      <h1 class="h1 mb-3">Member Presentations</h1>
      <p class="p-lg">MERL Center members present on topics at the intersection of MERL and open source, data science or human-centered design at conferences held around the globe.</p>
    </div>
  </div>

  <figure class="hero__pattern" data-animate-in="fade" data-animate-in-delay="150">
    <img src="{{ '/assets/img/direction/merl-pattern.svg' | relative_url }}" alt="pattern" />
  </figure>
</div>

<div class="wrapper my-6">
  <hr class="hr-thin" />

  <div class="my-6">
    <h2 class="h6 mb-4">Explore Member Presentations</h2>
    <div class="rte">
    </div>
  </div>
  <hr/>
  <div class="d-flex flex-justify-center">
    <div class="col-12 col-md-10 col-lg-8">
      <div class="my-6">
        <h3 class="h6 mb-4">Upcoming Presentations</h2>
        <div class="rte">
          <p>We don't have any upcoming presentations scheduled. If you know of any conferences that MERL Center should present at with members, please add it our M & E Conference Event List
        </div>
      </div>
      <div class="my-6">
        <h3 class="h6 mb-4">Past Presentations</h2>
        <div class="rte">
  <section id="past-presentations">
    {% for presentation in site.presentations reversed %}
      <div>
      {% include presentation.html %}
      </div>
    {% endfor %}
  </section>
        </div>
      </div>
    </div>
  </div>
</div>
ExperimentsInHonesty commented 1 year ago

@MattPereira please put a screenshot of what you are getting on the presentations page mockup you did.

ExperimentsInHonesty commented 1 year ago

SAMEA_2022_MERL_Center_presentation.md

anchor-tag: SAMEA-2022-MERL-Center-presentation name: SAMEA Presentation: HCD approaches to M&E Capacity Development authors:

MattPereira commented 1 year ago

@ExperimentsInHonesty

screencapture-localhost-4000-presentations-2023-02-13-09_01_49