refactor: support client-side parsing

2024-05-31 22:59:55 +09:00 · 2024-05-31 22:59:55 +09:00 · e5eed06234
parent 7308ed4239
commit e5eed06234
7 changed files with 2501 additions and 2773 deletions
--- a/docs/events/index.mdx
+++ b/docs/events/index.mdx
@ -6,12 +6,9 @@ hude_title: true
 og:image_subtitle: Events
 ---

-import {
-  EventCardList,
-  InputCTASection,
-  Grid,
-  Box,
-} from '@site/src/components/mdx'
+
+import Events from '@site/src/components/Events'
+

 # Events

@ -19,99 +16,4 @@ import {
  <body className="events full-width event-details no-breadcrumbs" />
 </head>

-<EventCardList
-  upcoming={[
-      {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at WSAS',
-      date: 'May 7 - May 8\n2024',
-      location: 'Online',
-      href: '/events/eth-latam',
-    },
-        {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at ETHBratislava',
-      date: 'May 10 – May 11\n2024',
-      location: 'LKOVICOVA 2, Bratislava,\nSlovakia"',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at DLT 2024',
-      date: 'May 14 – May 15\n2024',
-      location: 'Turin,\nItaly"',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at Dappcon',
-      date: 'May 21 - May 23\n2024',
-      location: 'Radialsystem, Berlin,\nGermany',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at Web3PrivacyNow Berlin',
-      date: 'May 22\n2024',
-      location: 'Rungestraße 20, 10179 Berlin,\nGermany',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at ETHBerlin',
-      date: 'May 24 – May 26\n2024',
-      location: 'CIC Innovation Campus, Berlin,\nGermany',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at ETHPrague',
-      date: 'May 31 – June 2\n2024',
-      location: 'Prague,\nCzech Republic',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at Web3Privacy Now Prague',
-      date: 'May 30\n2024',
-      location: 'Prague,\nCzech Republic',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at ETHPrague',
-      date: 'May 31 – June 2\n2024',
-      location: 'Prague,\nCzech Republic',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at Web3Privacy Now Prague',
-      date: 'May 30\n2024',
-      location: 'Prague,\nCzech Republic',
-      href: '/events/eth-latam',
-    }
-  ]}
-  past={[
-      {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at ETHDam',
-      date: 'Apr 12 - Apr 14\n2024',
-      location: 'Amsterdam\nThe Netherlands',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Hack with Waku at ETHLATAM : First Waku sponsored hackathon of 2024',
-      date: 'Mar 13 - Mar 14\n2024',
-      location: 'San Pedro Sula\nHonduras',
-      href: '/events/eth-latam',
-    },
-    {
-      thumbnail: '/events/banner.png',
-      title: 'Waku at ETHTaipei',
-      date: 'Mar 21 - Mar 22\n2024',
-      location: 'Taipei city\nTaiwan',
-      href: '/events/eth-latam',
-    },
-  ]}
-/>
+<Events />
--- a/events.json
+++ b/events.json
@ -1,14 +1,16 @@
 [
  {
    "title": "Logos Assembly: Belgrade",
+    "date": "Jun 3, 6:30 PM GMT+2",
    "location": "Beograd",
-    "link": "/LA2",
+    "href": "https://lu.mahttps://lu.ma/LA2",
    "thumbnail": "https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=2,quality=75,width=180,height=180/event-covers/e9/6d3a2f12-1c8c-42e9-8196-c1d240948030"
  },
  {
    "title": "Logos Assembly: Brno",
+    "date": "Jun 13, 6:00 PM GMT+2",
    "location": "Studentský klub U Kachničky",
-    "link": "/la3",
+    "href": "https://lu.mahttps://lu.ma/la3",
    "thumbnail": "https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=2,quality=75,width=180,height=180/event-covers/16/6718e8d5-8ce9-4247-8dbb-4f6e8d60392d"
  }
 ]
--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "node scrape.js && docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
@ -26,6 +26,7 @@
    "clsx": "^1.2.1",
    "dotenv": "^16.0.3",
    "prism-react-renderer": "^1.3.5",
+    "puppeteer": "^22.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.62.1",
--- a/scrape.js
+++ b/scrape.js
@ -1,6 +1,5 @@
-const fetch = require('node-fetch')
 const fs = require('fs')
-const { JSDOM } = require('jsdom')
+const puppeteer = require('puppeteer')

 // URL to scrape
 const url = 'https://lu.ma/logosevents'
@ -8,40 +7,51 @@ const url = 'https://lu.ma/logosevents'
 // Function to fetch and parse HTML
 async function scrapeData() {
  try {
-    const response = await fetch(url)
-    const html = await response.text()
+    // Launch Puppeteer
+    const browser = await puppeteer.launch()
+    const page = await browser.newPage()
+    await page.goto(url, { waitUntil: 'networkidle2' })

-    const dom = new JSDOM(html)
-    const document = dom.window.document
+    // Wait for the required elements to load
+    await page.waitForSelector('a.event-link.content-link')

-    const events = []
+    // Scrape the data
+    const events = await page.evaluate(() => {
+      const eventLinks = document.querySelectorAll('a.event-link.content-link')
+      const events = []

-    // Select elements with the .event-link class
-    const eventLinks = document.querySelectorAll('a.event-link.content-link')
+      eventLinks.forEach(eventLink => {
+        const title = eventLink.getAttribute('aria-label')
+        const href = eventLink.href
+        const eventContent = eventLink.nextElementSibling
+        const location = eventContent
+          .querySelector('.attribute:nth-of-type(2) > .text-ellipses')
+          ?.textContent.trim()
+        const thumbnail = eventContent.querySelector('img')?.src

-    eventLinks.forEach(eventLink => {
-      const title = eventLink.getAttribute('aria-label')
-      const link = eventLink.href
+        const date = eventContent
+          .querySelector('.event-time .text-warning')
+          ?.textContent.trim()

-      const eventContent = eventLink.nextElementSibling
-      const location = eventContent
-        .querySelector('.attribute:nth-of-type(2) > .text-ellipses')
-        ?.textContent.trim()
-      const thumbnail = eventContent.querySelector('img')?.src
-
-      // Push the extracted data to the events array
-      events.push({
-        title,
-        location,
-        link,
-        thumbnail,
+        events.push({
+          title,
+          date,
+          location,
+          href: `https://lu.ma${href}`,
+          thumbnail,
+        })
      })
+
+      return events
    })

    // Write data to a JSON file
    fs.writeFileSync('events.json', JSON.stringify(events, null, 2))

    console.log('Data scraped and saved to events.json')
+
+    // Close Puppeteer
+    await browser.close()
  } catch (error) {
    console.error('Error scraping data:', error)
  }
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@ -0,0 +1,10 @@
+import { EventCardList } from './mdx'
+import React from 'react'
+//@ts-ignore
+import eventData from '/events.json'
+
+const Events = () => {
+  return <EventCardList upcoming={eventData} past={[]} />
+}
+
+export default Events
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@ -10,6 +10,10 @@ html {
  display: none;
 }

+.mdx-event-card__thumbnail {
+  height: unset !important;
+}
+
@media (max-width: 1200px) {
  .aside {
    grid-column: 1 / 4 !important;
@ -37,9 +41,9 @@ html {
    gap: 32px !important;
  }

-  .mdx-event-card__thumbnail {
-    height: 114px !important;
-  }
+  // .mdx-event-card__thumbnail {
+  //   height: 114px !important;
+  // }

  .mdx-event-card__title {
    font-size: var(--lsd-h2-fontSize) !important;
--- a/yarn.lock
+++ b/yarn.lock