Upload proposal

gems-cyberlang · Oct 12, 2024 · 7ead810 · 7ead810
1 parent 21445bd
commit 7ead810
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 84 deletions.
diff --git a/public/files/Proposal.pdf b/public/files/Proposal.pdf
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -53,14 +53,14 @@ import { CONTACT_EMAIL, CONTACT_NAME, SOCIAL_MEDIA_LINKS } from "../consts";
   }
 
   .social-links {
+    font-size: 1.1rem;
+
     // For phones, Follow us is below Contact. But for laptops, they're side-by-side,
     // so the Follow us section needs to be right-aligned
     @media (min-width: $tabletMinWidth) {
       margin-left: auto;
     }
 
-    font-size: 1.1rem;
-
     a {
       text-decoration: none !important;
     }

diff --git a/src/components/timeline/Timeline.astro b/src/components/timeline/Timeline.astro
@@ -0,0 +1,15 @@
+---
+---
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    width: 100%;
+  }
+</style>
diff --git a/src/layouts/TimelineLayout.astro → src/components/timeline/TimelineItem.astro b/src/layouts/TimelineLayout.astro → src/components/timeline/TimelineItem.astro
@@ -1,26 +1,19 @@
 ---
-import BaseLayout from "./BaseLayout.astro";
-
-const { frontmatter } = Astro.props;
+const { title } = Astro.props;
 ---
 
-<BaseLayout title={frontmatter.title}><slot /></BaseLayout>
+<div>
+  <h2>{title}</h2>
+  <slot />
+</div>
 
 <style lang="scss">
   $dotSize: 12px;
   $row-gap: 1rem;
   $col-gap: 1rem;
   $borderWidth: 4px;
 
-  :global(.timeline) {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-
-    width: 100%;
-  }
-
-  :global(.timeline-item) {
+  div {
     display: block;
     position: relative;
     min-width: 50%;
@@ -44,7 +37,7 @@ const { frontmatter } = Astro.props;
     background-color: var(--bg-color);
   }
 
-  :global(.timeline-item:nth-child(odd)) {
+  div:nth-child(odd) {
     text-align: right;
     margin-left: 0;
     margin-right: auto;
@@ -58,7 +51,7 @@ const { frontmatter } = Astro.props;
     }
   }
 
-  :global(.timeline-item:nth-child(even)) {
+  div:nth-child(even) {
     text-align: left;
     margin-left: auto;
     margin-right: 0;
@@ -72,8 +65,8 @@ const { frontmatter } = Astro.props;
     }
   }
 
-  .timeline-item > h2 {
+  h2 {
     font-weight: 600;
-    font-size: large;
+    font-size: 1.7rem;
   }
 </style>
diff --git a/src/consts.ts b/src/consts.ts
@@ -27,6 +27,8 @@ interface SocialMediaLink {
   footerText: string;
 }
 
+export const RSS_LINK = "/feed.xml";
+
 export const SOCIAL_MEDIA_LINKS: SocialMediaLink[] = [
   {
     faClass: "fab fa-github",
@@ -42,8 +44,15 @@ export const SOCIAL_MEDIA_LINKS: SocialMediaLink[] = [
   },
   {
     faClass: "fa-solid fa-rss",
-    link: "/feed.xml",
+    link: RSS_LINK,
     hoverText: "RSS feed for our blog",
     footerText: "RSS feed",
   },
 ];
+
+export const Files = {
+  /**
+   * The Spring 2023 paper (the one we defended)
+   */
+  Proposal: "/files/Proposal.pdf",
+};
diff --git a/src/content/blog/2023-07-14-another-test.md b/src/content/blog/2023-07-14-another-test.md
diff --git a/src/content/blog/2023-08-15-test.md b/src/content/blog/2023-08-15-test.md
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -6,6 +6,7 @@ const blog = defineCollection({
   schema: z.object({
     title: z.string(),
     description: z.string(),
+    author: z.string(),
     // Transform string to Date object
     pubDate: z.coerce.date(),
     updatedDate: z.coerce.date().optional(),

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -5,7 +5,8 @@ import BaseLayout from "./BaseLayout.astro";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, author, pubDate, updatedDate, heroImage } =
+  Astro.props;
 ---
 
 <BaseLayout title={title} description={description}>
@@ -15,8 +16,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
     </div>
     <div class="prose">
       <div class="title">
+        <h1>{title}</h1>
+        Author: {author}
         <div class="date">
-          <FormattedDate date={pubDate} />
+          Published <FormattedDate date={pubDate} />
           {
             updatedDate && (
               <div class="last-updated-on">
@@ -25,7 +28,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
             )
           }
         </div>
-        <h1>{title}</h1>
         <hr />
       </div>
       <slot />
@@ -49,26 +51,19 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
     box-shadow: var(--box-shadow);
   }
   .prose {
-    width: 720px;
-    max-width: calc(100% - 2em);
     margin: auto;
     padding: 1em;
     color: rgb(var(--gray-dark));
   }
   .title {
     margin-bottom: 1em;
-    padding: 1em 0;
+    padding-top: 1em 0;
     text-align: center;
     line-height: 1;
   }
-  .title h1 {
-    margin: 0 0 0.5em 0;
-  }
   .date {
-    margin-bottom: 0.5em;
+    margin-top: 0.5em;
     color: rgb(var(--gray));
-  }
-  .last-updated-on {
     font-style: italic;
   }
 </style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -2,6 +2,7 @@
 import { getCollection } from "astro:content";
 import FormattedDate from "../../components/FormattedDate.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
+import { RSS_LINK } from "../../consts";
 
 const posts = (await getCollection("blog")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
@@ -10,7 +11,10 @@ const posts = (await getCollection("blog")).sort(
 
 <BaseLayout title="Blog">
   <h1>Blog</h1>
-  <p>This is where we post about our progress and findings. Stay tuned!</p>
+  <p>
+    This is where we post about our progress and findings.
+    If you want updates, you can track our <a href={RSS_LINK}>RSS feed</a>.
+  </p>
   <ul>
     {
       posts.map((post) => (

diff --git a/src/pages/timeline.mdx b/src/pages/timeline.mdx
@@ -1,44 +1,39 @@
 ---
-layout: ../layouts/TimelineLayout.astro
 title: Timeline
+layout: ../layouts/BaseLayout.astro
 ---
+import Timeline from "../components/timeline/Timeline.astro"
+import TimelineItem from "../components/timeline/TimelineItem.astro"
+import { Files } from "../consts"
 
 Gemstone is a 4-year program, so we plan to finish our research by spring 2026.
 Below is a rough expected timeline of our research.
 
-todo make cards with multiple bullet points per semester instead?
+{/* todo make cards with multiple bullet points per semester instead? */}
 
-<div class="timeline">
-  <div class="timeline-item">
-    <h2>December 2023</h2>
-    Proposal draft (todo upload our proposal draft and link to it?)
-  </div>
-  <div class="timeline-item">
-    <h2>February 2024</h2>
-    Proposal defense
-  </div>
-  <div class="timeline-item">
-    <h2>Fall 2024</h2>
+<Timeline>
+  <TimelineItem title="December 2023">
+    Proposal draft
+  </TimelineItem>
+  <TimelineItem title="February 2024">
+    Proposal defense. Our proposal is <a href={Files.Proposal}>here</a>.
+  </TimelineItem>
+  <TimelineItem title="Fall 2024">
     Data collection
-  </div>
-  <div class="timeline-item">
-    <h2>Spring 2025</h2>
+  </TimelineItem>
+  <TimelineItem title="Spring 2025">
     Data analysis
-  </div>
-  <div class="timeline-item">
-    <h2>Late Spring 2025</h2>
+  </TimelineItem>
+  <TimelineItem title="Late Spring 2025">
     Start thesis
-  </div>
-  <div class="timeline-item">
-    <h2>Fall 2025</h2>
+  </TimelineItem>
+  <TimelineItem title="Fall 2025">
     Finish thesis
-  </div>
-  <div class="timeline-item">
-    <h2>Late Fall 2025</h2>
+  </TimelineItem>
+  <TimelineItem title="Late Fall 2025">
     Publish thesis and apply to conferences
-  </div>
-  <div class="timeline-item">
-    <h2>May 2026</h2>
+  </TimelineItem>
+  <TimelineItem title="Spring 2026">
     Gemstone thesis conference
-  </div>
-</div>
+  </TimelineItem>
+</Timeline>