Skip to content

Commit 2d8828f

Browse files
chrisorbanchrisorban
committed
improve social media feeds
1 parent 222ac5e commit 2d8828f

File tree

9 files changed

+1305
-13
lines changed

9 files changed

+1305
-13
lines changed

assets/js/emfed-bundle.js renamed to assets/js/emfed-bundle-v2.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1031,7 +1031,7 @@ function renderToot(toot) {
10311031
};
10321032
toot = toot.reblog;
10331033
}
1034-
const date = new Date(toot.created_at).toLocaleString();
1034+
const date = new Date(toot.created_at).toLocaleDateString();
10351035
const images = toot.media_attachments.filter((att) => att.type === "image");
10361036
return html`<li class="toot">
10371037
<a class="permalink" href="${toot.url}">

assets/toots.css renamed to assets/toots-v2.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,11 @@
9595
.toot .attachment {
9696
display: block;
9797
width: 100%;
98-
aspect-ratio: 16 / 9;
9998
border-radius: 4px;
10099
}
101100

102101
.toot .attachment img {
103102
width: 100%;
104-
height: 100%;
105-
object-fit: cover;
103+
height: auto;
104+
object-fit: contain;
106105
}

‎docs/assets/js/emfed-bundle-v2.js‎

Lines changed: 1098 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/assets/toots-v2.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.toots {
2+
max-width: 400px;
3+
list-style: none;
4+
padding: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
6+
}
7+
8+
.toot {
9+
border-bottom: 1px solid #ccc;
10+
padding: 1rem;
11+
}
12+
13+
/* Posting user. */
14+
.toot .user {
15+
display: flex;
16+
flex-flow: column wrap;
17+
justify-content: space-evenly;
18+
align-content: flex-start;
19+
height: 46px; /* Avatar height. */
20+
column-gap: 0.5rem;
21+
22+
text-decoration: none;
23+
color: inherit;
24+
}
25+
26+
.toot .avatar {
27+
border-radius: 4px;
28+
}
29+
30+
.toot .display-name {
31+
font-weight: bold;
32+
display: block;
33+
}
34+
35+
.toot .user:hover .display-name {
36+
text-decoration: underline;
37+
}
38+
39+
.toot .username {
40+
display: block;
41+
margin-right: 1em;
42+
color: #999;
43+
}
44+
45+
/* Boosting user is smaller and above the posting user. */
46+
.toot .boost {
47+
height: 23px;
48+
margin-bottom: 0.25rem;
49+
column-gap: 0.25rem;
50+
}
51+
52+
.toot .boost:before {
53+
content: "♺";
54+
font-size: 140%;
55+
}
56+
57+
.toot .boost .username {
58+
display: none;
59+
}
60+
61+
.toot .permalink {
62+
text-decoration: none;
63+
display: block;
64+
color: #999;
65+
float: right;
66+
}
67+
68+
.toot .permalink:hover {
69+
text-decoration: underline;
70+
}
71+
72+
.toot .body {
73+
clear: both;
74+
margin-top: 1em;
75+
}
76+
77+
.toot .body a {
78+
overflow-wrap: anywhere;
79+
}
80+
81+
/* Weird trick to keep the text in the page but not display it. */
82+
.toot .body .invisible {
83+
display: inline-block;
84+
font-size: 0;
85+
line-height: 0;
86+
width: 0;
87+
height: 0;
88+
position: absolute;
89+
}
90+
91+
.toot .body .ellipsis::after {
92+
content: "…";
93+
}
94+
95+
.toot .attachment {
96+
display: block;
97+
width: 100%;
98+
border-radius: 4px;
99+
}
100+
101+
.toot .attachment img {
102+
width: 100%;
103+
height: auto;
104+
object-fit: contain;
105+
}

‎docs/feed.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ <h1 class="title">Social Media Feed</h1>
159159
</header>
160160

161161

162-
<p><link rel="stylesheet" type="text/css" href="./assets/toots.css"></p>
162+
<p><link rel="stylesheet" type="text/css" href="./assets/toots-v2.css"></p>
163163
<style>
164164
/* Customize the overall width and text size of the feed */
165165
.toots {
@@ -174,9 +174,14 @@ <h1 class="title">Social Media Feed</h1>
174174
padding-bottom: 2rem !important; /* Increases the bottom padding */
175175
min-height: 1000px; Uncomment this if you want to force a specific minimum height */
176176
}
177+
178+
/* Hide the @username handle, leaving only the display name */
179+
.toot .username {
180+
display: none !important;
181+
}
177182
</style>
178183
<p><a class="mastodon-feed" href="https://mastodon.social/@stemcoding" data-toot-limit="20" data-exclude-replies="true">STEM Coding Mastodon feed</a></p>
179-
<script type="module" src="./assets/js/emfed-bundle.js"></script>
184+
<script type="module" src="./assets/js/emfed-bundle-v2.js"></script>
180185

181186

182187

‎docs/index.html‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,44 @@ <h2 class="anchored" data-anchor-id="welcome-to-the-stemcoding-landing-page">Wel
160160
<p>We hope you enjoy this site! Check out our <a href="./feed.html">Social Media Feed</a> to see what we’ve been up to lately, or our <a href="./calendar.html">Calendar</a> to see upcoming events and trainings. Please join our <a href="https://discord.gg/bsWgqcqwCE">Discord</a> to reach out or ask questions!!!</p>
161161
<div class="margin-sidebar-content">
162162
<p><br> <br> <br> <br> <br> <br> <br></p>
163-
<iframe allowfullscreen="" sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&amp;theme=light&amp;size=100&amp;header=false&amp;replies=false&amp;boosts=true" style="width: 100%; height: 800px; border: 1px solid #ccc; border-radius: 8px;">
164-
</iframe>
163+
<p><link rel="stylesheet" type="text/css" href="./assets/toots-v2.css"></p>
164+
<style>
165+
/* Customize the overall width and text size of the feed */
166+
.toots {
167+
max-width: 100%; /* Adjust this value (e.g., 600px, 80%) as needed */
168+
margin: 0 auto !important; /* Centers the feed on the page */
169+
font-size: 1.1rem; /* Increases the text size of the feed */
170+
}
171+
172+
/* Customize the vertical size of each individual toot */
173+
.toot {
174+
padding-top: 2rem !important; /* Increases the top padding */
175+
padding-bottom: 2rem !important; /* Increases the bottom padding */
176+
min-height: 1000px; /*Uncomment this if you want to force a specific minimum height */
177+
}
178+
179+
/* Hide the @username handle, leaving only the display name */
180+
.toot .username {
181+
display: none !important;
182+
}
183+
184+
/* Container to make the feed scrollable */
185+
.feed-container {
186+
height: 2000px;
187+
overflow-y: scroll !important; /* Force scrollbar */
188+
overscroll-behavior: contain;
189+
border: 1px solid #ccc;
190+
border-radius: 8px;
191+
padding: 10px;
192+
pointer-events: auto; /* Ensure the container can receive scroll events */
193+
position: relative;
194+
z-index: 100;
195+
}
196+
</style>
197+
<div class="feed-container">
198+
<p><a class="mastodon-feed" href="https://mastodon.social/@stemcoding" data-toot-limit="20" data-exclude-replies="true">STEM Coding Mastodon feed</a></p>
199+
<script type="module" src="./assets/js/emfed-bundle-v2.js"></script>
200+
</div>
165201
</div>
166202
<script>
167203
document.addEventListener('DOMContentLoaded', function() {

‎docs/search.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -991,14 +991,14 @@
991991
"href": "index.html",
992992
"title": "STEMcoding",
993993
"section": "",
994-
"text": "The STEMcoding project is a partnership between faculty members and students at Ohio State University and the University of Mount Union\nThe STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our activities are used in intro level college courses and high school courses.\nWe love to create activities that each align with relevant math, science and computer science standards. Some of our physical science activities appear on the “model curriculum” examples distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long data science curriculum.\nWe are very proud of the STEMcoding youtube channel! We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.\n\n\nWe hope you enjoy this site! Check out our Social Media Feed to see what we’ve been up to lately, or our Calendar to see upcoming events and trainings. Please join our Discord to reach out or ask questions!!!"
994+
"text": "The STEMcoding project is a partnership between faculty members and students at Ohio State University and the University of Mount Union\nThe STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our activities are used in intro level college courses and high school courses.\nWe love to create activities that each align with relevant math, science and computer science standards. Some of our physical science activities appear on the “model curriculum” examples distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long data science curriculum.\nWe are very proud of the STEMcoding youtube channel! We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.\n\n\nWe hope you enjoy this site! Check out our Social Media Feed to see what we’ve been up to lately, or our Calendar to see upcoming events and trainings. Please join our Discord to reach out or ask questions!!!\n\n \n\n\n\nSTEM Coding Mastodon feed"
995995
},
996996
{
997997
"objectID": "index.html#welcome-to-the-stemcoding-landing-page",
998998
"href": "index.html#welcome-to-the-stemcoding-landing-page",
999999
"title": "STEMcoding",
10001000
"section": "",
1001-
"text": "The STEMcoding project is a partnership between faculty members and students at Ohio State University and the University of Mount Union\nThe STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our activities are used in intro level college courses and high school courses.\nWe love to create activities that each align with relevant math, science and computer science standards. Some of our physical science activities appear on the “model curriculum” examples distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long data science curriculum.\nWe are very proud of the STEMcoding youtube channel! We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.\n\n\nWe hope you enjoy this site! Check out our Social Media Feed to see what we’ve been up to lately, or our Calendar to see upcoming events and trainings. Please join our Discord to reach out or ask questions!!!"
1001+
"text": "The STEMcoding project is a partnership between faculty members and students at Ohio State University and the University of Mount Union\nThe STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our activities are used in intro level college courses and high school courses.\nWe love to create activities that each align with relevant math, science and computer science standards. Some of our physical science activities appear on the “model curriculum” examples distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long data science curriculum.\nWe are very proud of the STEMcoding youtube channel! We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.\n\n\nWe hope you enjoy this site! Check out our Social Media Feed to see what we’ve been up to lately, or our Calendar to see upcoming events and trainings. Please join our Discord to reach out or ask questions!!!\n\n \n\n\n\nSTEM Coding Mastodon feed"
10021002
},
10031003
{
10041004
"objectID": "datascience.html",

‎feed.qmd‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: "Social Media Feed"
44

55

66

7-
<link rel="stylesheet" type="text/css" href="/assets/toots.css">
7+
<link rel="stylesheet" type="text/css" href="/assets/toots-v2.css">
88

99
<style>
1010
/* Customize the overall width and text size of the feed */
@@ -20,6 +20,11 @@ title: "Social Media Feed"
2020
padding-bottom: 2rem !important; /* Increases the bottom padding */
2121
min-height: 1000px; Uncomment this if you want to force a specific minimum height */
2222
}
23+
24+
/* Hide the @username handle, leaving only the display name */
25+
.toot .username {
26+
display: none !important;
27+
}
2328
</style>
2429

2530
<a class="mastodon-feed"
@@ -28,5 +33,5 @@ title: "Social Media Feed"
2833
data-exclude-replies="true"
2934
>STEM Coding Mastodon feed</a>
3035
31-
<script type="module" src="/assets/js/emfed-bundle.js"></script>
36+
<script type="module" src="/assets/js/emfed-bundle-v2.js"></script>
3237

‎index.qmd‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,52 @@ We hope you enjoy this site! Check out our [Social Media Feed](feed.qmd) to see
2626
<br>
2727
<br>
2828

29+
<link rel="stylesheet" type="text/css" href="/assets/toots-v2.css">
30+
31+
<style>
32+
/* Customize the overall width and text size of the feed */
33+
.toots {
34+
max-width: 100%; /* Adjust this value (e.g., 600px, 80%) as needed */
35+
margin: 0 auto !important; /* Centers the feed on the page */
36+
font-size: 1.1rem; /* Increases the text size of the feed */
37+
}
38+
39+
/* Customize the vertical size of each individual toot */
40+
.toot {
41+
padding-top: 2rem !important; /* Increases the top padding */
42+
padding-bottom: 2rem !important; /* Increases the bottom padding */
43+
min-height: 1000px; /*Uncomment this if you want to force a specific minimum height */
44+
}
45+
46+
/* Hide the @username handle, leaving only the display name */
47+
.toot .username {
48+
display: none !important;
49+
}
50+
51+
/* Container to make the feed scrollable */
52+
.feed-container {
53+
height: 2000px;
54+
overflow-y: scroll !important; /* Force scrollbar */
55+
overscroll-behavior: contain;
56+
border: 1px solid #ccc;
57+
border-radius: 8px;
58+
padding: 10px;
59+
pointer-events: auto; /* Ensure the container can receive scroll events */
60+
position: relative;
61+
z-index: 100;
62+
}
63+
</style>
64+
65+
<div class="feed-container">
66+
<a class="mastodon-feed"
67+
href="https://mastodon.social/@stemcoding"
68+
data-toot-limit="20"
69+
data-exclude-replies="true"
70+
>STEM Coding Mastodon feed</a>
71+
72+
<script type="module" src="/assets/js/emfed-bundle-v2.js"></script>
73+
</div>
2974

30-
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=100&header=false&replies=false&boosts=true" style="width: 100%; height: 800px; border: 1px solid #ccc; border-radius: 8px;"></iframe>
3175
</div>
3276

3377
<script>

0 commit comments

Comments
 (0)