Skip to content

Commit

Permalink
8 enable showing meetup description as rich content (#32)
Browse files Browse the repository at this point in the history
* added remark plugin

* Revert "added remark plugin"

This reverts commit a815b71.

* added tailwinds class that applied tailwind styling

* renamed logos to support adding in code. tuned test meetup.

* found way to overwrite tailwind styling (way too much margin)

* added heroimages. tuned meetups own page.

* top styling for meetu page layout

* aling top margins

* added placeholder text in meetup form textarea.

* had to add prettierignore cause it wants to format textarea so that placeholder wont show

* scratch the ignore file, just ignore that textarea
  • Loading branch information
JorgeX committed Aug 31, 2023
1 parent 8c04eaa commit a20f16d
Show file tree
Hide file tree
Showing 17 changed files with 148 additions and 96 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
2 changes: 1 addition & 1 deletion packages/site/src/components/MeetupCard.astro
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const {
<div class="flex-shrink-0">
<img
class="h-12 w-12 rounded-full"
src={`${import.meta.env.BASE_URL}images/dev-logo.jpg`}
src={`${import.meta.env.BASE_URL}images//logos/1-meetup-logo.jpg`}
alt="developer logo"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/site/src/components/MeetupListItem.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const { name, time, location, organizer, slug } = Astro.props;
<div class="flex gap-x-4">
<img
class="h-12 w-12 flex-none rounded-full bg-gray-50"
src={`${import.meta.env.BASE_URL}images/dev-logo.jpg`}
src={`${import.meta.env.BASE_URL}images//logos/1-meetup-logo.jpg`}
alt="generic developer logo"
/>
<div class="min-w-0 flex-auto">
Expand Down
192 changes: 113 additions & 79 deletions packages/site/src/components/MeetupPageCard.astro
Original file line number Diff line number Diff line change
@@ -1,94 +1,128 @@
---
const meetupProps = Astro.props;
const { location, locationLink, time, organizer, organizerLink, meetupLink } =
meetupProps.meetup.data;
const {
location,
locationLink,
time,
organizer,
organizerLink,
meetupLink,
image,
} = meetupProps.meetup.data;
const heroImage = image ? image : 'images/heroimages/1-meetup-image.jpg';
const { Content } = await meetupProps.meetup.render();
---

<div class="m-auto max-w-7xl overflow-hidden bg-white shadow sm:rounded-lg">
<!--card header -->
<div class="border-b border-gray-200 bg-sky-100 px-4 py-5 sm:px-6">
<div
class="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap"
>
<div class="ml-4 mt-4">
<div class="flex items-center">
<div class="flex-shrink-0">
<img
class="h-12 w-12 rounded-full"
src={`${import.meta.env.BASE_URL}images/dev-logo.jpg`}
alt="developer logo"
/>
<div class="mx-auto flex max-w-7xl flex-col sm:px-6 lg:px-8">
<div class="container mb-8">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative shadow-xl sm:rounded-2xl">
<div class="">
<img
class="sm:rounded-2xl"
width={1200}
height={600}
src={`${import.meta.env.BASE_URL}${heroImage}`}
alt="artistic picture Oulu meetup"
/>
</div>
</div>
</div>
</div>
<div class="m-auto max-w-7xl overflow-hidden bg-white shadow">
<div class="m-auto max-w-7xl overflow-hidden bg-white shadow">
<!--card header -->
<div class="border-b border-gray-200 bg-sky-100 px-4 py-5 sm:px-6">
<div
class="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap"
>
<div class="ml-4 mt-4">
<div class="flex items-center">
<div class="flex-shrink-0">
<img
class="h-12 w-12 rounded-full"
src={`${
import.meta.env.BASE_URL
}images//logos/1-meetup-logo.jpg`}
alt="developer logo"
/>
</div>
<div class="ml-4">
<h3 class="text-base font-semibold leading-6 text-gray-900">
Organized by
</h3>
<p class="text-sm text-gray-500">
<a href={organizerLink} target="_blank">{organizer}</a>
</p>
</div>
</div>
</div>
<div class="ml-4">
<h3 class="text-base font-semibold leading-6 text-gray-900">
Organized by
</h3>
<p class="text-sm text-gray-500">
<a href={organizerLink} target="_blank">{organizer}</a>
</p>
<div class="ml-4 mt-4 flex flex-shrink-0">
<button
type="button"
class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
<svg
class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z"
>
</path>
<path
d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z"
>
</path>
</svg>
<span>Sign up</span>
</button>
</div>
</div>
</div>
<div class="ml-4 mt-4 flex flex-shrink-0">
<button
type="button"
class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
<svg
class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z"
<!--card body -->
<div class="border-t border-gray-100">
<dl class="divide-y divide-gray-100">
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dd
class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0"
>
<article class="prose"><Content /></article>
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-900">When</dt>
<dd
class="mt-1 font-semibold leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
>
</path>
<path
d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z"
{time}
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-900">Where</dt>
<dd
class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
>
<a href={locationLink} target="_blank">{location}</a>
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-900">Sign up link</dt>
<dd
class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
>
</path>
</svg>
<span>Sign up</span>
</button>
<a href={meetupLink} target="_blank">{meetupLink}</a>
</dd>
</div>
</dl>
</div>
</div>
</div>
<!--card body -->
<div class="border-t border-gray-100">
<dl class="divide-y divide-gray-100">
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-900">When</dt>
<dd
class="mt-1 font-semibold leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
>
{time}
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-900">Where</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<a href={locationLink} target="_blank">{location}</a>
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-900">Sign up link</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<a href={meetupLink} target="_blank">{meetupLink}</a>
</dd>
</div>
<div
class="px-4 py-6 text-center sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900 sm:col-span-3">
Description
</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0">
<article><Content /></article>
</dd>
</div>
</dl>
</div>
</div>
<style>
:global(h2) {
margin-top: 2rem !important;
}
</style>
2 changes: 2 additions & 0 deletions packages/site/src/content/config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { defineCollection, z } from 'astro:content';

const meetups = defineCollection({
type: 'content',
schema: z.object({
name: z.string(),
description: z.string(),
Expand All @@ -11,6 +12,7 @@ const meetups = defineCollection({
organizer: z.string(),
organizerLink: z.string().optional(),
meetupLink: z.string(),
image: z.string().optional(),
}),
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,20 @@ organizer: 'Cloudamite'
organizerLink: 'https://cloudamite.com'
description: 'Join us for an evening of AI talks and discussions.'
meetupLink: 'https://meetup.com/great-ai-meetup'
image: 'images/heroimages/1-meetup-image.jpg'
---

## Internal 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?
Stable diffusion for the win. For images and animations. But what is facebook doing releasing their own models?

14 changes: 6 additions & 8 deletions packages/site/src/layouts/Meetup.astro
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ const { meetup } = Astro.props;
<body class="h-full">
<div class="min-h-full">
<Header headerText={meetup.data.name} />
<div class="py-10">
<main>
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<MeetupPageCard meetup={meetup} />
</div>
</main>
<Footer />
</div>
<main>
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<MeetupPageCard meetup={meetup} />
</div>
</main>
<Footer />
</div>
</body>
24 changes: 18 additions & 6 deletions packages/site/src/pages/submit.astro
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import Spinner from '../components/Spinner.astro';
<body class="h-full">
<div class="min-h-full">
<Header headerText="Submitting your own meetup" />
<div class="py-8">
<div class="py-4">
<main>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div
Expand Down Expand Up @@ -53,7 +53,7 @@ import Spinner from '../components/Spinner.astro';
autocomplete="title"
required
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Let's all learn JavaScript"
placeholder="Let's all learn AI programming"
/>
</div>
</div>
Expand Down Expand Up @@ -85,14 +85,26 @@ import Spinner from '../components/Spinner.astro';
Description
</label>
<div class="mt-2">
<!-- prettier-ignore -->
<textarea
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
id="description"
name="description"
rows="3"
rows="16"
required
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
>
</textarea>
placeholder="## 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?"
></textarea>
</div>
<p class="mt-3 text-sm leading-6 text-gray-600">
Tell us more about the meetup. What will attendees
Expand Down

0 comments on commit a20f16d

Please sign in to comment.