Skip to content

Commit 9d2c4f0

Browse files
chrisorbanchrisorban
committed
add social media feed to landing page
1 parent 70c54d0 commit 9d2c4f0

File tree

7 files changed

+127
-2
lines changed

7 files changed

+127
-2
lines changed

‎_quarto.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ format:
3737
theme: cosmo
3838
css: styles.css
3939
toc: true
40+
sidebar:
41+
- id: main-sidebar
42+
contents:
43+
- section: "On this page"
44+
contents: auto
45+
- section: "Social Feed"
46+
contents: |
47+
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="100%" height="400" 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="border: 1px solid #ccc; border-radius: 8px;"></iframe>
4048
4149
4250

‎docs/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,24 @@ <h2 class="anchored" data-anchor-id="welcome-to-the-stemcoding-landing-page">Wel
160160
<iframe style="display: block; margin-left: auto; margin-right: auto;" width="560" height="315" src="https://www.youtube.com/embed/pqXiZLnXe2U?si=0nSckcTS2osfQXVF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
161161
</iframe>
162162
<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>
163+
<div class="margin-sidebar-content">
164+
<p>Social Media Feed <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;"></iframe></p>
165+
</div>
166+
<script>
167+
document.addEventListener('DOMContentLoaded', function() {
168+
// Find the margin sidebar
169+
const marginSidebar = document.getElementById('quarto-margin-sidebar');
170+
const socialFeedDiv = document.querySelector('.margin-sidebar-content');
171+
172+
if (marginSidebar && socialFeedDiv) {
173+
// Move the social feed div to the margin sidebar
174+
marginSidebar.appendChild(socialFeedDiv);
175+
// Remove it from the main content
176+
socialFeedDiv.remove();
177+
marginSidebar.appendChild(socialFeedDiv);
178+
}
179+
});
180+
</script>
163181

164182

165183
</section>

‎docs/search.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
"href": "index.html",
55
"title": "STEMcoding",
66
"section": "",
7-
"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!"
7+
"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\nSocial Media Feed"
88
},
99
{
1010
"objectID": "index.html#welcome-to-the-stemcoding-landing-page",
1111
"href": "index.html#welcome-to-the-stemcoding-landing-page",
1212
"title": "STEMcoding",
1313
"section": "",
14-
"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!"
14+
"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\nSocial Media Feed"
1515
},
1616
{
1717
"objectID": "people.html",

‎docs/styles.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,30 @@
11
/* css styles */
2+
3+
/* Make the margin sidebar wider */
4+
#quarto-margin-sidebar {
5+
width: 400px !important;
6+
min-width: 400px !important;
7+
}
8+
9+
/* Adjust the main content area to accommodate wider sidebar */
10+
.page-columns .page-full {
11+
grid-template-columns: 1fr 400px !important;
12+
}
13+
14+
/* For larger screens, make it even wider */
15+
@media (min-width: 1400px) {
16+
#quarto-margin-sidebar {
17+
width: 500px !important;
18+
min-width: 500px !important;
19+
}
20+
21+
.page-columns .page-full {
22+
grid-template-columns: 1fr 500px !important;
23+
}
24+
}
25+
26+
/* Ensure the iframe fits nicely in the wider sidebar */
27+
.margin-sidebar-content iframe {
28+
width: 100% !important;
29+
max-width: none !important;
30+
}

‎index.qmd‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,24 @@ We are very proud of the [STEMcoding youtube channel!](http://youtube.com/STEMco
1616
<iframe style="display: block; margin-left: auto; margin-right: auto;" width="560" height="315" src="https://www.youtube.com/embed/pqXiZLnXe2U?si=0nSckcTS2osfQXVF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
1717

1818
We hope you enjoy this site! Check out our [Social Media Feed](feed.qmd) to see what we've been up to lately, or our [Calendar](calendar.qmd) to see upcoming events and trainings. Please join our [Discord](https://discord.gg/bsWgqcqwCE) to reach out or ask questions!
19+
20+
<div class="margin-sidebar-content">
21+
Social Media Feed
22+
<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>
23+
</div>
24+
25+
<script>
26+
document.addEventListener('DOMContentLoaded', function() {
27+
// Find the margin sidebar
28+
const marginSidebar = document.getElementById('quarto-margin-sidebar');
29+
const socialFeedDiv = document.querySelector('.margin-sidebar-content');
30+
31+
if (marginSidebar && socialFeedDiv) {
32+
// Move the social feed div to the margin sidebar
33+
marginSidebar.appendChild(socialFeedDiv);
34+
// Remove it from the main content
35+
socialFeedDiv.remove();
36+
marginSidebar.appendChild(socialFeedDiv);
37+
}
38+
});
39+
</script>

‎index.qmd.old‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
execute:
3+
freeze: auto # re-render only when source changes
4+
---
5+
6+
## Welcome to the STEMcoding Landing Page!
7+
8+
The STEMcoding project is a partnership between [faculty members and students](people.qmd) at [Ohio State University](http://osu.edu) and the [University of Mount Union](http://mountunion.edu)
9+
10+
The STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our [activities](activities.qmd) are used in intro level college courses and high school courses.
11+
12+
We love to create activities that <b>*each*</b> align with relevant math, [science](http://go.osu.edu/ngss) <b>*and*</b> 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.
13+
14+
We are very proud of the [STEMcoding youtube channel!](http://youtube.com/STEMcoding) We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.
15+
16+
<iframe style="display: block; margin-left: auto; margin-right: auto;" width="560" height="315" src="https://www.youtube.com/embed/pqXiZLnXe2U?si=0nSckcTS2osfQXVF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
17+
18+
We hope you enjoy this site! Check out our [Social Media Feed](feed.qmd) to see what we've been up to lately, or our [Calendar](calendar.qmd) to see upcoming events and trainings. Please join our [Discord](https://discord.gg/bsWgqcqwCE) to reach out or ask questions!
19+
20+
<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="position: fixed; bottom: 20px; right: 20px; width: 25vw; height: 60vh; z-index: 1000; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); min-width: 300px; max-width: 500px;"></iframe>

‎styles.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,30 @@
11
/* css styles */
2+
3+
/* Make the margin sidebar wider */
4+
#quarto-margin-sidebar {
5+
width: 400px !important;
6+
min-width: 400px !important;
7+
}
8+
9+
/* Adjust the main content area to accommodate wider sidebar */
10+
.page-columns .page-full {
11+
grid-template-columns: 1fr 400px !important;
12+
}
13+
14+
/* For larger screens, make it even wider */
15+
@media (min-width: 1400px) {
16+
#quarto-margin-sidebar {
17+
width: 500px !important;
18+
min-width: 500px !important;
19+
}
20+
21+
.page-columns .page-full {
22+
grid-template-columns: 1fr 500px !important;
23+
}
24+
}
25+
26+
/* Ensure the iframe fits nicely in the wider sidebar */
27+
.margin-sidebar-content iframe {
28+
width: 100% !important;
29+
max-width: none !important;
30+
}

0 commit comments

Comments
 (0)