Skip to content

Commit

Permalink
Implement table of contents on markdown layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonappah
jasonappah committed Jun 30, 2024
1 parent ded2f80 commit c16375c
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 58 deletions.
4 changes: 2 additions & 2 deletions src/components/home/division.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,12 @@ const {

<div
style={{
display: 'flex',
display: 'grid',
justifyItems: 'center',
width: '100%',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: '1rem',
}}
class="mobile-column"
>
{
images.map((img) => (
Expand Down
8 changes: 2 additions & 6 deletions src/components/home/summary.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div
style="width: 100%; padding: 4rem 3rem; background-color: var(--primary);" class="font-unbounded mobile-column"
style="width: 100%; padding: 4rem 3rem; background-color: var(--primary);" class="font-unbounded"
>
<style>
img {
Expand All @@ -13,16 +13,12 @@
}
}
</style>
<div style="display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: 75rem; margin: auto">
<div class="mobile-column" style="display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: 75rem; margin: auto">
<div style="display: flex; font-size: 1.25rem; flex-direction: column;" >
<p>
We are a group of students who are passionate about all things robots - from the mechanical aspects, to writing software, and all the things in between.
</p>
<br />
<p>
Our goal is to promote robotics at UT Dallas and in the surrounding area through outreach, projects and workshops.
</p>
<br />
<p>
Every Monday<a style="color: inherit;" href="#meeting-footnote"><sup>*</sup></a> at 7pm, we meet to learn and build all sorts of robots - for fun, and to compete in a variety of events.
</p>
Expand Down
126 changes: 77 additions & 49 deletions src/layouts/markdown.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,13 @@ type Props = MarkdownLayoutProps<{
const { title, subtitle } = Astro.props.frontmatter || Astro.props;
const toc = Astro.props.headings.filter(h=>h.depth == 1)
const toc = Astro.props.headings.filter(h=>h.depth <= 2)
const renderTOC = toc.length > 1
// TODO: TOC
---
<BaseLayout title={title}>
<div
class="main-container"
style="padding: 120px 2rem; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column; text-align: center;"
style="padding: 120px 1rem; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column; text-align: center;"
>
<div
style="display: flex; flex-direction:column; margin: auto; gap: 0.5rem; align-items: center;"
Expand All @@ -32,55 +31,84 @@ const renderTOC = toc.length > 1
{subtitle}
</h3>
</div>
<div class="md-container"
>
<style is:global>
.md-container {
text-align: left;
background-color: var(--text);
margin: auto;
margin-top: 5em;
min-width: 10rem;
max-width: 75rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 3.5em;
background-color: white;
border-radius: 1em;
}

.md-container > h1 {
color: var(--primary);
padding-top: 1rem;
font-family: 'Mashine', sans-serif;
}

.md-container p, .md-container h2, .md-container h3, .md-container h4, .md-container h5, .md-container h6, .md-container ol, .md-container ul {
color: var(--text-dark);
{renderTOC && <style>
#content-container {
display: grid;
column-gap: 1rem;
row-gap: 4rem;
}

@media (min-width: 900px) {
#content-container {
grid-template-columns: 1fr minmax(0, 3fr);
}

.md-container p, .md-container ol, .md-container ul {
font-size: 1.33rem;
line-height: 1.5;
#content-container > ol {
position: sticky;
top: 130px;
height: min-content;
max-height: calc(100vh - 130px);
overflow: scroll;
}

.md-container h2, .md-container h3, .md-container h4, .md-container h5, .md-container h6 {
font-family: 'Unbounded Variable', sans-serif;
font-weight: 500;
}

.end {
margin: 2rem 0;
background-color: var(--primary);
width: 2rem;
height: 0.5rem;
}
</style>
<slot />
<span class="end"/>
</div>
}
</style>}

<div id="content-container" style="margin: 5em auto;">
{renderTOC && <ol class="font-unbounded" style="padding: 0; text-align: left; display: flex; gap: 0.35rem; flex-direction: column; padding-left: 2rem;">
{toc.map(entry=>(
<li style={`font-weight: ${entry.depth === 1 ? 600 : 400}; list-style-type: none;`}>
<a class="font-unbounded no-decoration" href={`#${entry.slug}`} style="color: #E1AAAF; ">
{entry.text}
</a>
</li>
))}
</ol>}
<article class="markdown">
<style is:global>
.markdown {
text-align: left;
max-width: 75rem;
background-color: var(--text);
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 3.5em;
background-color: white;
border-radius: 1em;
}

.markdown > h1 {
color: var(--primary);
padding-top: 1rem;
font-family: 'Mashine', sans-serif;
}

.markdown p, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6, .markdown ol, .markdown ul {
color: var(--text-dark);
}

.markdown p, .markdown ol, .markdown ul {
font-size: 1.33rem;
line-height: 1.5;
}

.markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
font-family: 'Unbounded Variable', sans-serif;
font-weight: 500;
}

.end {
margin: 2rem 0;
background-color: var(--primary);
width: 2rem;
height: 0.5rem;
}
</style>
<slot />
<span class="end"/>
</article>
</div >
</div>
<Join theme="dark" />
</BaseLayout>
2 changes: 1 addition & 1 deletion src/pages/about.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: ../layouts/markdown.astro
title: About
subtitle: More about the club and its history
---
import {leadership} from '../data'
import { leadership } from '../data'

# Who we are

Expand Down

0 comments on commit c16375c

Please sign in to comment.