json page

tinkerhub · Mar 13, 2024 · d2e9d32 · d2e9d32
1 parent b2aedb9
commit d2e9d32
Show file tree

Hide file tree

Showing 6 changed files with 488 additions and 6 deletions.
diff --git a/src/json.ts b/src/json.ts
@@ -0,0 +1,111 @@
+import valueToHTML from "./utils/toJson";
+import {data} from "./utils/jsonData";
+
+document.getElementById("json").innerHTML = valueToHTML(data);
+
+let collapsers, $selectedLI;
+
+function init() {
+    collapsers = document.querySelectorAll('#json .collapsible .collapsible')
+
+    for (const $collapser of collapsers) {
+        const $parent = $collapser.parentElement
+        const id = Math.random().toString(36);
+        $parent.id = id
+        $parent.dataset.status = 'expanded'
+        $parent.onclick = e => {
+            onToggle(e, id, $collapser)
+        }
+    }
+
+    const $copyPath = document.createElement('div')
+    $copyPath.className = 'copy-path'
+
+    const $toolbox = document.createElement('div')
+    $toolbox.className = 'toolbox'
+
+    const $expand = document.createElement('button')
+    $expand.id = 'expand_all'
+    $expand.textContent = '+'
+
+    const $reduce = document.createElement('button')
+    $reduce.id = 'reduce_all'
+    $reduce.textContent = '-'
+
+    $toolbox.append($expand)
+    $toolbox.append($reduce)
+
+    document.body.append($toolbox)
+    document.body.onclick = onMouseClick
+
+    $expand.onclick = onExpand
+    $reduce.onclick = onReduce
+}
+
+function onToggle(e, id, $collapser) {
+    e.preventDefault()
+    e.stopPropagation()
+    const $parent = $collapser.parentElement
+    if ($parent.id === id) {
+        switch ($parent.dataset.status) {
+            case 'expanded':
+                reduce($collapser)
+                break
+            case 'reduced':
+                expand($collapser)
+                break
+            default:
+                $parent.dataset.status = 'expanded'
+                reduce($collapser)
+        }
+    }
+}
+
+function onExpand() {
+    for (const $collapsed of collapsers) {
+        expand($collapsed)
+    }
+}
+
+function expand($collapsed) {
+    const $parent = $collapsed.parentElement
+    if ($parent.dataset.status !== 'reduced') return
+
+    $parent.classList.remove('collapsed')
+    $parent.dataset.status = 'expanded'
+}
+
+function onReduce() {
+    for (const $collapsed of collapsers) {
+        reduce($collapsed)
+    }
+}
+
+function reduce($collapsed) {
+    const $parent = $collapsed.parentElement
+    if ($parent.dataset.status !== 'expanded') return
+
+    const $ellipsis = $parent.querySelector('.ellipsis')
+    if ($ellipsis) $ellipsis.dataset.value = `${$collapsed.childElementCount}`
+    $parent.classList.add('collapsed')
+    $parent.dataset.status = 'reduced'
+}
+
+function getParentLI($element) {
+    if ($element && $element.tagName === 'LI') return $element
+
+    while ($element && $element.tagName !== 'LI') {
+        $element = $element.parentElement
+    }
+
+    return $element
+}
+
+function onMouseClick(e) {
+    if ($selectedLI) $selectedLI.firstElementChild.classList.remove('selected')
+
+    $selectedLI = getParentLI(e.target)
+    if ($selectedLI) $selectedLI.firstElementChild.classList.add('selected')
+}
+
+init();
diff --git a/src/sections/guests.ts b/src/sections/guests.ts
@@ -20,7 +20,7 @@ function makeCard(name = "", title = "", description = "", image = "/img/guests/
 
 const cardsContainer = document.getElementById("guestCards");
 
-const guests = [
+export const Guests = [
     ['Athira T J ', 'Data Associate', 'Reap Benefit', '/img/guests/athira.jpeg'],
     ['Akhila ', 'Co-Founder', 'Tech4Good Community', '/img/guests/akhila.jpeg'],
     ['Vidya ', 'Ex Data Scientist', 'Tech4Good Community', '/img/guests/vidya.jpeg'],
@@ -32,6 +32,5 @@ const guests = [
     ['G G'],
 ];
 
-cardsContainer.innerHTML = guests.map((row) => makeCard(...row)).join("\n");
-
-export {};
+if (cardsContainer)
+    cardsContainer.innerHTML = Guests.map((row) => makeCard(...row)).join("\n");
diff --git a/src/sections/schedule.ts b/src/sections/schedule.ts
@@ -85,12 +85,13 @@ function makeDay(day: string) {
     <p class="text-2xl font-bold py-10">${day}</p>
         <!-- card-container -->
         <div class="grid grid-cols-2 md:grid-cols-7  gap-3">
-            ${Schedule[day].map((event, i) => makeEvent(event, i+1)).join('')}
+            ${Schedule[day].map((event, i) => makeEvent(event, i + 1)).join('')}
         </div>
     </p>
     `
 }
 
 const scheduleContainer = document.getElementById("scheduleContainer");
 
-scheduleContainer.innerHTML = Object.keys(Schedule).map(day => makeDay(day)).join('');
+if (scheduleContainer)
+    scheduleContainer.innerHTML = Object.keys(Schedule).map(day => makeDay(day)).join('');
diff --git a/src/templates/json.html b/src/templates/json.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+
+    <meta name="title" content="Women Maker Celebration"/>
+    <meta name="description" content="Women Maker Celebration is a two-day ,un-conference style gathering of women around technology."/>
+    <meta
+            name="keywords"
+            content="conference, technology,hardware, software, kochi, kerala, tinkerhub "
+    />
+
+    <meta name="robots" content="index, follow"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="language" content="English"/>
+    <meta name="revisit-after" content="60 days"/>
+    <meta name="author" content="Rohit T P"/>
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://wmc.tinkerhub.org/"/>
+    <meta property="og:title" content="Women Maker Celebration"/>
+    <meta
+            property="og:description"
+            content="Women Maker Celebration is a two-day ,un-conference style gathering of women around technology."
+    />
+    <meta
+            property="og:image"
+            content="https://rohittp.imgix.net/index/hero-background.webp"
+    />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image"/>
+    <meta property="twitter:url" content="https://witc.tinkerhub.org/"/>
+    <meta property="twitter:title" content="Women Maker Celebration"/>
+    <meta property="twitter:description" content="Women Maker Celebration"/>
+
+    <style>
+        body {
+            margin-bottom: 23px;
+            white-space: normal !important;
+        }
+
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0 0 0 26px;
+        }
+
+        li {
+            position: relative;
+        }
+
+        .hoverable {
+            transition: background-color .2s ease-out 0s;
+            -webkit-transition: background-color .2s ease-out 0s;
+            display: inline-block;
+        }
+
+        .hovered {
+            transition-delay: .2s;
+            -webkit-transition-delay: .2s;
+        }
+
+        .selected {
+            outline: dotted 1px;
+        }
+
+        .collapsed > .collapsible {
+            display: none;
+        }
+
+        .ellipsis {
+            display: none;
+        }
+
+        .collapsed > .ellipsis {
+            display: inherit;
+        }
+
+        .collapser {
+            position: absolute;
+            top: 1px;
+            left: -1.5em;
+            cursor: default;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+
+        .status {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            min-width: 628px;
+            border: 1px solid #c2c2c2;
+            border-bottom-width: 0;
+            border-left-width: 0;
+            border-top-right-radius: 4px;
+            height: 16px;
+            padding: 2px 7px 2px 4px;
+            font-family: sans-serif;
+            font-size: 12px;
+            opacity: 0;
+            background-color: #d2d2f6;
+            color: #696969;
+            transition: opacity .2s ease-out;
+            -webkit-transition: opacity .2s ease-out;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+
+        .status:not(:empty ) {
+            opacity: 1;
+        }
+
+        .toolbox {
+            font-family: sans-serif;
+            background-color: #d2d2f6;
+            position: fixed;
+            right: 20px;
+            top: 20px;
+            border: 0 solid #c2c2c2;
+            border-bottom-width: 1px;
+            border-left-width: 1px;
+            border-bottom-left-radius: 4px;
+            padding-bottom: 3px;
+            transition: opacity .2s ease-out;
+            -webkit-transition: opacity .2s ease-out;
+            cursor: default;
+            user-select: none;
+            -webkit-user-select: none;
+            padding-left: 2px;
+        }
+
+        .toolbox > * {
+            padding: 4px 12px;
+            font-size: 25px;
+            margin: 3px;
+        }
+    </style>
+
+    <style>
+        body {
+            white-space: pre;
+            font-family: monospace;
+        }
+
+        .property {
+            font-weight: bold;
+            color: magenta;
+        }
+
+        .type-null {
+            color: gray;
+        }
+
+        .type-boolean {
+            color: firebrick;
+        }
+
+        .type-number {
+            color: blue;
+        }
+
+        .type-string {
+            color: green;
+        }
+
+        .callback-function {
+            color: gray;
+        }
+
+        .collapser:after {
+            font-size: 13px;
+            content: "-";
+        }
+
+        .collapsed > .collapser:after {
+            font-size: 13px;
+            content: "+";
+        }
+
+        .ellipsis:after {
+            content: attr(data-value);
+        }
+
+        .collapsible {
+            margin-left: 2em;
+        }
+
+        .hoverable {
+            padding: 1px 2px;
+            border-radius: 2px;
+            width: 100%;
+        }
+
+        .hovered {
+            background-color: rgba(235, 238, 249, 1);
+        }
+
+        .collapser {
+            padding-right: 6px;
+            padding-left: 6px;
+        }
+    </style>
+
+    <title>WMC</title>
+</head>
+<body>
+<div id="json">
+</div>
+</body>
+</html>
diff --git a/src/utils/jsonData.ts b/src/utils/jsonData.ts
@@ -0,0 +1,25 @@
+import {Guests} from "../sections/guests";
+import {Schedule} from "../sections/schedule";
+
+export const data = {
+    WomenMakerCelebration: {
+        About: 'Join us for an inspiring day filled with learning, networking, and celebration. Registration is now open for March 23rd but will be subject to a shortlisting process to ensure a deeply engaging and personalized experience for all attendees.'.replaceAll(" ", "\n"),
+        Registration: {
+            Link: "https://airtable.com/app5Zrc5Yh9ThtD60/shrLIICJd6IC1RkKE",
+            Note: "Shortlisted attendees will be notified via email with further details.".replaceAll(" ", "\n")
+        },
+        Why: {
+            Context: 'The Women Makers Celebration is not just a conference; it\'s a platform for creating an inclusive and diverse tech industry in Kerala and beyond. Our mission is to'.replaceAll(" ", "\n"),
+            Missions: [
+                'Inspire with stories from the successful Tink-Her-Hack initiative and other remarkable women in tech.'.replaceAll(" ", "\n"),
+                'Educate through hands-on workshops and sessions led by industry experts.'.replaceAll(" ", "\n"),
+                'Connect attendees with mentors, peers, and potential employers, fostering a vibrant community of women makers.'.replaceAll(" ", "\n")
+                ]
+        },
+        Guests,
+        Schedule,
+        ContactUs:{
+            Email: "[email protected]",
+        }
+    }
+}