Skip to content

Commit f0faafa

Browse files
TinasheMTaperaTinasheMTapera
committed
Added May newsletter Newsletter Draft: May 2025 TinasheMTapera#10
This draft includes the following improvements: Use of an *unsplash* free image for the header for presentation and visual appeal (hopefully will show up in hyperlinks) Start using Unsplash for images TinasheMTapera#3 Addition of a rolling carousel for images to make the newsletter more visually appealing and engaging. This adds about 0.5 seconds to the load time.
1 parent 9f30c4c commit f0faafa

17 files changed

+736
-22
lines changed

‎.github/ISSUE_TEMPLATE/newsletter-draft.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ body:
5757
- [ ] Open PR into `develop` with `[WIP] Newsletter [Month Year]`
5858
- [ ] Create HackMD mirror and paste link below
5959
- [ ] Collect input and finalize sections by [insert target date]
60+
- [ ] Develop content for headline
61+
- [ ] Gather Steering Committee updates
62+
- [ ] Update community call details and youtube links
63+
- [ ] Forward previous month's events and opportunities
64+
- [ ] Clear slack list triage
65+
- [ ] Get new events and opportunities from slack #events & #general
66+
- [ ] Check job posting links
6067
- [ ] Finalize and merge to `main`
6168
6269
- type: input

‎_includes/carousel.html‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n" %}
2+
{% assign letters = letterstring | split: ',' %}
3+
{% assign number = include.number | minus: 1 %}
4+
<div class="carousel__holder">
5+
<div id="carousel{{ number }}" class="carousel">
6+
{% for item in page.carousels[number].images %}
7+
<input class="carousel__activator" type="radio" name="carousel{{ number }}" id="{{ number }}{{ letters[forloop.index0] }}" {% if forloop.first %}checked="checked"{% endif %} />
8+
{% endfor %}
9+
{% for item in page.carousels[number].images %}
10+
{% if forloop.index == forloop.length %}
11+
{% assign nextindex = 0 %}
12+
{% else %}
13+
{% assign nextindex = forloop.index0 | plus: 1 %}
14+
{% endif %}
15+
{% assign nextletter = letters[nextindex] %}
16+
{% if forloop.index0 == 0 %}
17+
{% assign previndex = forloop.length | minus: 1 %}
18+
{% else %}
19+
{% assign previndex = forloop.index0 | minus: 1 %}
20+
{% endif %}
21+
{% assign prevletter = letters[previndex] %}
22+
<div class="carousel__controls">
23+
<label class="carousel__control carousel__control--backward" for="{{ number }}{{ prevletter }}"></label>
24+
<label class="carousel__control carousel__control--forward" for="{{ number }}{{ nextletter }}"></label>
25+
</div>
26+
{% endfor %}
27+
<div class="carousel__track">
28+
<ul>
29+
{% for item in page.carousels[number].images %}
30+
<li class="carousel__slide">
31+
<img src="{{ item.image | relative_url }}" alt="{{ item.alt | default: 'carousel image' }}">
32+
</li>
33+
{% endfor %}
34+
</ul>
35+
</div>
36+
<div class="carousel__indicators">
37+
{% for item in page.carousels[number].images %}
38+
<label class="carousel__indicator" for="{{ number }}{{ letters[forloop.index0] }}"></label>
39+
{% endfor %}
40+
</div>
41+
</div>
42+
</div>
43+
44+
<style>
45+
.carousel__holder {
46+
max-width: 960px;
47+
width: 100%;
48+
margin: 2rem auto;
49+
position: relative;
50+
padding-bottom: {{ include.height | default: "50.00" }}{{ include.unit | default: "%" }};
51+
overflow: hidden;
52+
}
53+
.carousel {
54+
height: 100%;
55+
width: 100%;
56+
overflow: hidden;
57+
text-align: center;
58+
position: absolute;
59+
padding: 0;
60+
}
61+
.carousel__controls,
62+
.carousel__activator {
63+
display: none;
64+
}
65+
{% for item in page.carousels[number].images %}
66+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track {
67+
-webkit-transform: translateX(-{{ forloop.index0 }}00%);
68+
transform: translateX(-{{ forloop.index0 }}00%);
69+
}
70+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__slide:nth-of-type({{ forloop.index }}) {
71+
transition: opacity 0.5s, -webkit-transform 0.5s;
72+
transition: opacity 0.5s, transform 0.5s;
73+
transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
74+
top: 0;
75+
left: 0;
76+
right: 0;
77+
opacity: 1;
78+
-webkit-transform: scale(1);
79+
transform: scale(1);
80+
}
81+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__controls:nth-of-type({{ forloop.index }}) {
82+
display: block;
83+
opacity: 1;
84+
}
85+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
86+
opacity: 1;
87+
}
88+
{% endfor %}
89+
90+
.carousel__control {
91+
height: 30px;
92+
width: 30px;
93+
margin-top: -15px;
94+
top: 50%;
95+
position: absolute;
96+
display: block;
97+
cursor: pointer;
98+
border-width: 5px 5px 0 0;
99+
border-style: solid;
100+
border-color: #4e4e4e;
101+
opacity: 0.35;
102+
opacity: 1;
103+
outline: 0;
104+
z-index: 3;
105+
}
106+
.carousel__control:hover {
107+
opacity: 1;
108+
}
109+
.carousel__control--backward {
110+
left: 20px;
111+
-webkit-transform: rotate(-135deg);
112+
transform: rotate(-135deg);
113+
}
114+
.carousel__control--forward {
115+
right: 20px;
116+
-webkit-transform: rotate(45deg);
117+
transform: rotate(45deg);
118+
}
119+
.carousel__indicators {
120+
position: absolute;
121+
bottom: 20px;
122+
width: 100%;
123+
text-align: center;
124+
}
125+
.carousel__indicator {
126+
height: 15px;
127+
width: 15px;
128+
border-radius: 100%;
129+
display: inline-block;
130+
z-index: 2;
131+
cursor: pointer;
132+
opacity: 0.35;
133+
margin: 0 2.5px 0 2.5px;
134+
}
135+
.carousel__indicator:hover {
136+
opacity: 0.75;
137+
}
138+
.carousel__track {
139+
position: absolute;
140+
top: 0;
141+
right: 0;
142+
bottom: 0;
143+
left: 0;
144+
padding: 0;
145+
margin: 0;
146+
transition: -webkit-transform 0.5s ease 0s;
147+
transition: transform 0.5s ease 0s;
148+
transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
149+
}
150+
.carousel__track .carousel__slide {
151+
display: block;
152+
top: 0;
153+
left: 0;
154+
right: 0;
155+
opacity: 1;
156+
}
157+
{% for item in page.carousels[number].images %}
158+
.carousel__track .carousel__slide:nth-of-type({{ forloop.index }}) {
159+
-webkit-transform: translateX({{ forloop.index0 }}00%);
160+
transform: translateX({{ forloop.index0 }}00%);
161+
}
162+
{% endfor %}
163+
164+
.carousel--scale .carousel__slide {
165+
-webkit-transform: scale(0);
166+
transform: scale(0);
167+
}
168+
.carousel__slide {
169+
height: 100%;
170+
width: 100%;
171+
position: absolute;
172+
opacity: 0;
173+
background-size: contain;
174+
background-repeat: no-repeat;
175+
background-position: center;
176+
}
177+
.carousel__slide .overlay {height: 100%;}
178+
.carousel--thumb .carousel__indicator {
179+
height: 30px;
180+
width: 30px;
181+
}
182+
.carousel__indicator {
183+
background-color: #fafafa;
184+
}
185+
.carousel__slide {
186+
display: flex;
187+
justify-content: center; /* centers image horizontally */
188+
align-items: center; /* centers image vertically */
189+
position: absolute;
190+
top: 0; left: 0; right: 0; bottom: 0;
191+
opacity: 0;
192+
transition: opacity 0.5s ease;
193+
padding: 1rem; /* optional: adds some breathing room */
194+
text-align: center; /* for fallback or alt text */
195+
background-color: #f8f8f8; /* optional: neutral background for portrait images */
196+
}
197+
198+
.carousel__slide img {
199+
max-width: 100%;
200+
max-height: 100%;
201+
object-fit: contain;
202+
display: block;
203+
margin: 0 auto;
204+
}
205+
{% for item in page.carousels[number].images %}
206+
.carousel__slide:nth-of-type({{ forloop.index }}),
207+
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
208+
background-size: cover;
209+
background-position: center;
210+
}
211+
{% endfor %}
212+
</style>
213+
214+
<script>
215+
function isVisible(el) {
216+
while (el) {
217+
if (el === document) {
218+
return true;
219+
}
220+
221+
var $style = window.getComputedStyle(el, null);
222+
223+
if (!el) {
224+
return false;
225+
} else if (!$style) {
226+
return false;
227+
} else if ($style.display === 'none') {
228+
return false;
229+
} else if ($style.visibility === 'hidden') {
230+
return false;
231+
} else if (+$style.opacity === 0) {
232+
return false;
233+
} else if (($style.display === 'block' || $style.display === 'inline-block') &&
234+
$style.height === '0px' && $style.overflow === 'hidden') {
235+
return false;
236+
} else {
237+
return $style.position === 'fixed' || isVisible(el.parentNode);
238+
}
239+
}
240+
}
241+
{% if include.duration %}
242+
setInterval(function(){
243+
var j=0;
244+
var elements = document.querySelectorAll('#carousel{{ number}} .carousel__control--forward');
245+
for(i=(elements.length - 1);i>-1;i--) {
246+
if(isVisible(elements[i])) j=i;
247+
}
248+
elements[j].click();
249+
},{{ include.duration }}000);
250+
{% endif %}
251+
</script>

‎_includes/head.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
99
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/reboot.css">
1010
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/bootstrap.css">
11-
11+
12+
1213
{% if page.redirect %}<meta http-equiv="refresh" content="0;url={{ site.baseurl }}{{ page.redirect }}"/>{% endif %}
1314
{% unless site.hide_share_buttons %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css">{% endunless %}
1415
{% include metatags.html %}

‎_posts/2025-05-27-madren-community-travel-funds-report.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
layout: post
3+
title: "Daniel Madren's Community and Travel Funds Report: Indiana Regional Group Inaugural Meetup"
4+
tags: [community-awards, usrse, travel-fund, networking, affinity-group]
5+
author: Daniel Madren
6+
date: 2025-05-27
7+
image: /assets/img/newsletter-202505/IMG_2725 (1).jpg
8+
carousels:
9+
- images:
10+
- image: /assets/img/newsletter-202505/IMG_2725 (1).jpg
11+
- image: /assets/img/newsletter-202505/IMG_7213.jpg
12+
- image: /assets/img/newsletter-202505/IMG_1849.jpg
13+
- image: /assets/img/newsletter-202505/IMG_1846.jpg
14+
- image: /assets/img/newsletter-202505/IMG_1842.jpg
15+
- image: /assets/img/newsletter-202505/IMG_1839.jpg
16+
- image: /assets/img/newsletter-202505/IMG_1836.jpg
17+
- image: /assets/img/newsletter-202505/IMG_1833.jpg
18+
---
19+
20+
Thanks to the US-RSE Community and Travel Funds program, supported by the Alfred P. Sloan Foundation, I had the chance to bring together RSE team members from Purdue, Indiana University, and the University of Notre Dame for a meetup in Indianapolis. We wanted to better understand how each of our teams operate, where we’re running into the same challenges, and how we might work together to build something more intentional: a sustainable, connected US-RSE Indiana Regional Group.
21+
22+
[Notre Dame CRC](https://crc.nd.edu/) | [Purdue RCAC](https://www.rcac.purdue.edu/) | [IU UITS Research Technologies](https://uits.iu.edu/services/technology-for-research/index.html)
23+
24+
We started by grounding ourselves in the mission and community of US-RSE, including its working groups, affinity groups, and the upcoming 2025 conference in Philadelphia. From there, we dove into how each of our institutions fund and organize RSE work, how we intake and prioritize projects, and how we support our team members’ growth and success. What stood out most was how much common ground we share. From hiring struggles and questions about career progression to finding the right balance of visibility and support, it became clear that we weren’t alone in what we were experiencing. We also recognized that each team had developed unique strategies, workflows, and tools that others could benefit from and that we have much to learn from one another if we stay connected.
25+
26+
To explore what that could look like, we held a breakout session using easel pads, markers, and sticky notes. Everyone had a chance to vote on the ideas they felt most excited about. The most popular ideas? Regular meetups and knowledge-sharing events, a focus on building regional support groups, and more in-person connections at conferences and symposiums. We also discussed shared documentation, training opportunities, and ways to keep in touch, including launching our shared regional slack channel!
27+
28+
One of the biggest highlights of the day was that we were able to co-locate this meetup with Purdue’s 2025 Research Computing Cyberinfrastructure Symposium. Because of the travel support, folks from Notre Dame and IU could take part in the symposium, attend the RSE meetup, and build relationships all in one trip! Personally, this experience has been transformational. As a program manager, I’ve gained new insights into how RSE operations work across institutions, but more than that, I’ve found a sense of community. These meetups reminded me that we don’t have to go it alone. We’re not competitors, we’re collaborators. We’re all trying to build something sustainable, meaningful, and supportive. And now, thanks to this initiative, I know I can reach out to any one of these folks and get thoughtful, honest feedback and support.
29+
30+
For anyone considering organizing a similar meetup, my advice is simple....just start! The US-RSE Community Funds program helps break down the barriers of institutional silos. It’s one thing to talk about how a center operates, it’s another to experience it firsthand. Through USRSE networking like this, teams from Notre Dame have visited Purdue to tour our data center and the Envision Center, and our team has supported Notre Dame’s own RSE Mini-Con. These kinds of exchanges build trust, empathy, and shared purpose. My advice for those applying for community funds is to focus on depth over formality. Prioritize face-to-face conversations, make time for open brainstorming, and listen for the ideas that resonate most across institutions. With even modest support, you can plant seeds for a thriving, collaborative RSE community.
31+
32+
- Daniel
33+
34+
{% include carousel.html height="45" unit="%" duration="10" number="1" %}

‎_posts/newsletters/2025-04-28-newsletter.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -480,14 +480,15 @@ These opportunities were recently posted to the [RSE Opportunities page](https:/
480480

481481
<!--Insert RSE specific job postings here-->
482482

483-
{% assign today = 'now' | date: "%Y-%m-%d" %}
483+
{% assign today = site.time | date: "%Y-%m-%d" %}
484484
<ul>
485485
{% for job in site.data.jobs %}
486-
{% if job.expires | date: "%Y-%m-%d" >= today %}
486+
{% assign job_expiry = job.expires | date: "%Y-%m-%d" %}
487+
{% if job_expiry >= today %}
487488
<li>
488489
<strong><a href="{{ job.url }}" target="_blank" rel="noopener">{{ job.name }}</a></strong><br>
489490
📍 {{ job.location }}<br>
490-
🗓️ Posted: {{ job.posted }} &nbsp; | &nbsp; Expires: {{ job.expires }}
491+
🗓️ Posted: {{ job.posted }} | Expires: {{ job.expires }}
491492
</li>
492493
{% endif %}
493494
{% endfor %}

0 commit comments

Comments
 (0)