add columns

robotframework · Sep 22, 2024 · dbdeee9 · dbdeee9
1 parent 605fcc5
commit dbdeee9
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 43 deletions.
diff --git a/docs/assets/index-uf88RFse.js → docs/assets/index-BVnGV-ih.js b/docs/assets/index-uf88RFse.js → docs/assets/index-BVnGV-ih.js
diff --git a/docs/assets/index-BW0xLFLI.css b/docs/assets/index-BW0xLFLI.css
diff --git a/docs/assets/index-CcbfNexT.css b/docs/assets/index-CcbfNexT.css
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
-    <script type="module" crossorigin src="/assets/index-uf88RFse.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BW0xLFLI.css">
+    <script type="module" crossorigin src="/assets/index-BVnGV-ih.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CcbfNexT.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/css/grid.css b/src/assets/css/grid.css
@@ -35,6 +35,10 @@
   position: sticky;
 }
 
+.gap-sm {
+  gap: var(--size-small);
+}
+
 .row {
   box-sizing: border-box;
   display: -webkit-box;

diff --git a/src/components/SectionColumns.vue b/src/components/SectionColumns.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="columns-container row gap-sm mt-large">
+    <div class="col-sm-12 col-md-6">
+      <RichTextRenderer
+        :document="left"
+        :nodeRenderers="renderNodes()"
+        :markRenderers="renderMarks()" />
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <RichTextRenderer
+        :document="right"
+        :nodeRenderers="renderNodes()"
+        :markRenderers="renderMarks()" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import type { Document } from "@contentful/rich-text-types";
+import RichTextRenderer from 'contentful-rich-text-vue-renderer';
+import { renderNodes, renderMarks } from 'Content/renderContent';
+
+defineProps({
+  left: Object as PropType<Document>,
+  right: Object as PropType<Document>
+})
+</script>
+
+<style scoped>
+@media screen and (min-width: 768px) {
+  .columns-container {
+    flex-wrap: nowrap;
+  }
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
@@ -5,6 +5,7 @@ import Navbar from './Navbar.vue'
 import NavMobile from './NavMobile.vue'
 import PageSection from './PageSection.vue'
 import SectionRow from './SectionRow.vue'
+import SectionColumns from './SectionColumns.vue'
 import TabBox from './TabBox.vue'
 import Sponsors from './Sponsors.vue'
 import TicketItem from './TicketItem.vue'
@@ -34,6 +35,7 @@ export {
   NavMobile,
   PageSection,
   SectionRow,
+  SectionColumns,
   TabBox,
   Sponsors,
   TicketItem,

diff --git a/src/content/renderContent.ts b/src/content/renderContent.ts
@@ -1,7 +1,7 @@
 import type { Node } from '@contentful/rich-text-types';
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
 import { endOfDay, isWithinInterval, startOfDay } from 'date-fns'
-import { PageSection, TicketItem, SponsorItem, SectionRow, Banner, CardItem } from 'Components'
+import { PageSection, TicketItem, SponsorItem, SectionRow, Banner, CardItem, SectionColumns } from 'Components'
 import { h } from 'vue'
 import type { Entry } from 'contentful';
 
@@ -13,6 +13,12 @@ export const renderNodes = () => {
       if (type === 'pageSection') {
         return h(PageSection, { content: node.data.target })
       }
+      if (type === 'columns') {
+        return h(SectionColumns, {
+          left: node.data.target.fields.left,
+          right: node.data.target.fields.right
+        })
+      }
       if (type === 'row') {
         return h(SectionRow, { content: node.data.target.fields.content, class: 'm-large pb-small' })
       }