49 create own some cards for meetup pages (#51)

* meetuppage metadata * creating and trimming shortDesc * use shortener in frontpage meetupcard too * submit page meta desc
PlanBee-dev · Sep 12, 2023 · d7fbc09 · d7fbc09
1 parent bad0fcc
commit d7fbc09
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 14 deletions.
diff --git a/packages/site/src/components/BaseHead.astro b/packages/site/src/components/BaseHead.astro
@@ -10,6 +10,10 @@ interface Props {
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const development = process.env.NODE_ENV === 'development';
+const baseUrl = development
+  ? `http://localhost:${Astro.url.port}/`
+  : 'https://www.ouludevmeetup.com/';
 
 const {
   title,
@@ -41,11 +45,11 @@ const {
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+<meta property="og:image" content={new URL(image, baseUrl)} />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta property="twitter:image" content={new URL(image, baseUrl)} />
diff --git a/packages/site/src/layouts/Meetup.astro b/packages/site/src/layouts/Meetup.astro
@@ -1,15 +1,18 @@
 ---
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import BaseHead from '../components/BaseHead.astro';
 import MeetupPageCard from '../components/MeetupPageCard.astro';
+import { createShortDescription } from '../utils';
 
 const { meetup } = Astro.props;
+const title = meetup.data.title;
+const description = createShortDescription(meetup.body);
+const image = meetup.data.image;
 ---
 
 <head>
-  <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  <BaseHead title={title} description={description} image={image} />
 </head>
 <body class="h-full">
   <div class="min-h-full">

diff --git a/packages/site/src/pages/index.astro b/packages/site/src/pages/index.astro
@@ -7,19 +7,13 @@ import BaseHead from '../components/BaseHead.astro';
 import MeetupCard from '../components/MeetupCard.astro';
 import { getCollection } from 'astro:content';
 import { getMeetupsCollectionName } from '../content/config';
-import { getNextMeetup } from '../utils';
+import { createShortDescription, getNextMeetup } from '../utils';
 
 const collectionName = getMeetupsCollectionName();
 const meetups: any = await getCollection(collectionName);
 
 const nextMeetup = getNextMeetup(meetups);
 
-const createDescription = (meetup: any) => {
-  if (meetup.body.length > 100) {
-    return meetup.body.substring(0, 100) + '...';
-  } else return meetup.body;
-};
-
 const meetupDetails = nextMeetup
   ? {
       name: nextMeetup.data.title,
@@ -30,7 +24,7 @@ const meetupDetails = nextMeetup
       organizerLink: nextMeetup.data.organizerLink,
       signupLink: nextMeetup.data.signupLink,
       slug: nextMeetup.slug,
-      description: createDescription(nextMeetup),
+      description: createShortDescription(nextMeetup.body),
     }
   : null;
 ---

diff --git a/packages/site/src/pages/submit.astro b/packages/site/src/pages/submit.astro
@@ -1,13 +1,13 @@
 ---
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import { SITE_TITLE } from '../consts';
 import BaseHead from '../components/BaseHead.astro';
 import Spinner from '../components/Spinner.astro';
 ---
 
 <head>
-  <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  <BaseHead title={SITE_TITLE} description={'Submit your own meetup here'} />
 </head>
 <body class="h-full">
   <div class="min-h-full">

diff --git a/packages/site/src/utils.ts b/packages/site/src/utils.ts
@@ -12,6 +12,8 @@ export type Meetup = {
     signupLink: string;
     image?: string | null;
   };
+  slug: string;
+  body: string;
 };
 
 export const checkMeetupData = (meetup: Meetup['data']) => {
@@ -69,3 +71,18 @@ export const getNextMeetup = (meetups: Meetup[]) => {
   });
   return futureMeetups[0];
 };
+
+export const createShortDescription = (descriptionToCut: string) => {
+  const description = descriptionToCut.trimStart();
+  console.log('SHORTING', description.at(0));
+
+  let shortDesc =
+    description.length > 150
+      ? description.substring(0, 150) + '...'
+      : description;
+  if (shortDesc.startsWith('#')) {
+    console.log('CUTTING DESCRIPTION STARTING WITH #', shortDesc);
+    shortDesc = shortDesc.substring(description.indexOf(' ') + 1);
+  }
+  return shortDesc;
+};
diff --git a/packages/site/test/utils.test.ts b/packages/site/test/utils.test.ts
@@ -1,6 +1,7 @@
 import {
   Meetup,
   checkMeetupData,
+  createShortDescription,
   getNextMeetup,
   getRandomLogonumber,
   parseMeetupDate,
@@ -28,6 +29,8 @@ meetups.push({
     signupLink: 'https://www.meetup.com/react',
     image: 'react-meetup.jpg',
   },
+  slug: 'd',
+  body: 'x',
 });
 meetups.push({
   data: {
@@ -41,6 +44,8 @@ meetups.push({
     signupLink: 'https://www.meetup.com/vitest',
     image: 'vitest-meetup.jpg',
   },
+  slug: 'd',
+  body: 'x',
 });
 meetups.push({
   data: {
@@ -55,6 +60,8 @@ meetups.push({
     signupLink: 'https://meetup.com/local-aws-meetup',
     image: 'images/heroimages/4-meetup-image.jpg',
   },
+  slug: 'W',
+  body: 'x',
 });
 
 test('random randomnumber returns number between 1-5', () => {
@@ -107,6 +114,8 @@ test('check and fix meetup datas urls', () => {
       location: 'Elektroniikkatie 2',
       locationLink: '',
     },
+    slug: 'x',
+    body: 'x',
   };
 
   checkMeetupData(meetup.data);
@@ -123,3 +132,19 @@ test('check and fix meetup datas urls', () => {
     'https://www.google.com/maps/place/Kirkkokatu,+Oulu+Finland',
   );
 });
+
+test('short the description text', () => {
+  const description =
+    '         ## Great AI meetup   Join us for an evening of AI talks and discussions, while our seasoned and awesome developers' +
+    ' share their experiences and insights about latest AI tools.   ## Coding helpers     - [CoPilot](https://github.com/features/copilot)  ' +
+    '- [Whisperer](https://aws.amazon.com/pm/codewhisperer/)   - [Cody AI](https://about.sourcegraph.com/demo/cody)    ' +
+    "There are so much more options nowadays than just github's copilot. Like Amazon's code whisperer on sourcegraph's Cody AI. " +
+    'Or you can just ask chatGPT(-4).   ## Do art! With open source  Stable diffusion for the win. For images and animations. ' +
+    'But what is facebook doing releasing their own models?';
+
+  const shortDesc = createShortDescription(description);
+  expect(shortDesc.length).toBe(150);
+  expect(shortDesc).toBe(
+    'Great AI meetup   Join us for an evening of AI talks and discussions, while our seasoned and awesome developers share their experiences and insight...',
+  );
+});