Skip to content

Commit c27c77b

Browse files
chrisorbanchrisorban
committed
tinkering with social media feed
1 parent edcad71 commit c27c77b

File tree

8 files changed

+264
-32
lines changed

8 files changed

+264
-32
lines changed

‎assets/js/emfed.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { loadAll } from "./core.js";
2+
loadAll();

‎assets/toots.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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+
aspect-ratio: 16 / 9;
99+
border-radius: 4px;
100+
}
101+
102+
.toot .attachment img {
103+
width: 100%;
104+
height: 100%;
105+
object-fit: cover;
106+
}

‎docs/assets/js/emfed.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { loadAll } from "./core.js";
2+
loadAll();

‎docs/assets/toots.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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+
aspect-ratio: 16 / 9;
99+
border-radius: 4px;
100+
}
101+
102+
.toot .attachment img {
103+
width: 100%;
104+
height: 100%;
105+
object-fit: cover;
106+
}

‎docs/feed.html‎

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

161161

162-
<!--
163-
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="600" height="600" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=100&header=false&replies=false&boosts=true"></iframe>
164-
-->
165-
<!--
166-
<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=150&header=false&replies=false&boosts=true" style="width: 100%; height: 800px; border: 1px solid #ccc; border-radius: 8px;"></iframe>
167-
-->
168-
<center>
169-
<iframe allowfullscreen="" sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="50%" height="2000" 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">
170-
</iframe>
171-
</center>
172-
<!--
173-
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" style="max-width:100vw;max-height:100vh;" width="100%" height="10000" src="https://www.mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=200&header=true&replies=false&boosts=false"></iframe>
174-
-->
162+
<p><link rel="stylesheet" type="text/css" href="./assets/toots.css"></p>
163+
<style>
164+
/* Customize the overall width and text size of the feed */
165+
.toots {
166+
max-width: 100%; /* Adjust this value (e.g., 600px, 80%) as needed */
167+
margin: 0 auto !important; /* Centers the feed on the page */
168+
font-size: 1.1rem; /* Increases the text size of the feed */
169+
}
170+
171+
/* Customize the vertical size of each individual toot */
172+
.toot {
173+
padding-top: 2rem !important; /* Increases the top padding */
174+
padding-bottom: 2rem !important; /* Increases the bottom padding */
175+
min-height: 1000px; Uncomment this if you want to force a specific minimum height */
176+
}
177+
</style>
178+
<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.js"></script>
175180

176181

177182

‎docs/search.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1776,5 +1776,12 @@
17761776
"title": "WeTeach_CS 2025 Summer Teacher Training Schedule",
17771777
"section": "Week 2, Wednesday",
17781778
"text": "Week 2, Wednesday\n\nAny extra questions about activities covered, or activities we did not have time to go over (1 hour)\nZoom breakouts / check ins / individual plans to do more data science and CS in their classes + any extra questions about any activities covered (2.5 hours)"
1779+
},
1780+
{
1781+
"objectID": "feed.html",
1782+
"href": "feed.html",
1783+
"title": "Social Media Feed",
1784+
"section": "",
1785+
"text": "STEM Coding Mastodon feed"
17791786
}
17801787
]

‎feed.qmd‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
title: "Social Media Feed"
33
---
44

5-
<!--
6-
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="600" height="600" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=100&header=false&replies=false&boosts=true"></iframe>
7-
-->
85

9-
<!--
10-
<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=150&header=false&replies=false&boosts=true" style="width: 100%; height: 800px; border: 1px solid #ccc; border-radius: 8px;"></iframe>
11-
-->
126

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

14-
<center>
15-
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="50%" height="2000" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=100&header=false&replies=false&boosts=true"></iframe>
16-
</center>
9+
<style>
10+
/* Customize the overall width and text size of the feed */
11+
.toots {
12+
max-width: 100%; /* Adjust this value (e.g., 600px, 80%) as needed */
13+
margin: 0 auto !important; /* Centers the feed on the page */
14+
font-size: 1.1rem; /* Increases the text size of the feed */
15+
}
1716

17+
/* Customize the vertical size of each individual toot */
18+
.toot {
19+
padding-top: 2rem !important; /* Increases the top padding */
20+
padding-bottom: 2rem !important; /* Increases the bottom padding */
21+
min-height: 1000px; Uncomment this if you want to force a specific minimum height */
22+
}
23+
</style>
24+
25+
<a class="mastodon-feed"
26+
href="https://mastodon.social/@stemcoding"
27+
data-toot-limit="20"
28+
data-exclude-replies="true"
29+
>STEM Coding Mastodon feed</a>
30+
31+
<script type="module" src="/assets/js/emfed.js"></script>
1832

19-
<!--
20-
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" style="max-width:100vw;max-height:100vh;" width="100%" height="10000" src="https://www.mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.social%2Fusers%2Fstemcoding&theme=light&size=200&header=true&replies=false&boosts=false"></iframe>
21-
-->

‎feed.qmd.orig‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)