Skip to content

Commit

Permalink
Use page layout (#53)
Browse files Browse the repository at this point in the history 
* added base layout

* submit page uses layout

* index page uses layout

* meetups list page uses layout

* meetup page uses layout

* success page uses layout
  • Loading branch information
@JorgeX
JorgeX committed Sep 18, 2023
1 parent 183b213 commit 491118f
Show file tree
Hide file tree
Showing 7 changed files with 442 additions and 479 deletions.
7 changes: 2 additions & 5 deletions packages/site/src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@
import HeaderLink from './HeaderLink.astro';
let { headerText } = Astro.props;
if (!headerText) {
headerText = 'Developer meetups in Oulu area';
}
---

<script>
const button = document.querySelector('#mobile-menu-button');
button.addEventListener('click', () => {
button!.addEventListener('click', () => {
const menu = document.querySelector('#mobile-menu');
menu.classList.toggle('hidden');
menu!.classList.toggle('hidden');
});
</script>
<header>
Expand Down
26 changes: 10 additions & 16 deletions packages/site/src/layouts/Meetup.astro
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
---
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import BaseHead from '../components/BaseHead.astro';
import PageLayout from './PageLayout.astro';
import MeetupPageCard from '../components/MeetupPageCard.astro';
import { createShortDescription } from '../utils';
Expand All @@ -11,17 +9,13 @@ const description = createShortDescription(meetup.body);
const image = meetup.data.image;
---

<head>
<BaseHead title={title} description={description} image={image} />
</head>
<body class="h-full">
<div class="min-h-full">
<Header headerText={meetup.data.title} />
<main>
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<MeetupPageCard meetup={meetup} />
</div>
</main>
<Footer />
<PageLayout
title={title}
description={description}
image={image}
headerText={meetup.data.title}
>
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<MeetupPageCard meetup={meetup} />
</div>
</body>
</PageLayout>
37 changes: 37 additions & 0 deletions packages/site/src/layouts/PageLayout.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
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';
interface Props {
title?: string;
description?: string;
headerText?: string;
image?: string;
}
const {
title = SITE_TITLE,
description = SITE_DESCRIPTION,
headerText = 'Developer meetups in Oulu area',
image,
} = Astro.props;
---

<html class="h-full">
<head>
<BaseHead title={title} description={description} image={image} />
</head>
<body class="h-full">
<div class="min-h-full">
<Header headerText={headerText} />
<div class="py-4">
<main>
<slot />
</main>
<Footer />
</div>
</div>
</body>
</html>
66 changes: 24 additions & 42 deletions packages/site/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
---
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import PageLayout from '../layouts/PageLayout.astro';
import Intro from '../components/Intro.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import BaseHead from '../components/BaseHead.astro';
import MeetupCard from '../components/MeetupCard.astro';
import { getCollection } from 'astro:content';
import { getMeetupsCollectionName } from '../content/config';
Expand All @@ -29,44 +26,29 @@ const meetupDetails = nextMeetup
: null;
---

<html class="h-full">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body class="h-full">
<div class="min-h-full">
<Header />
<div class="py-4">
<main>
<div class="mx-auto flex max-w-7xl flex-col sm:px-6 lg:px-8">
<div class="container">
<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
}images/oulu-devmeetups-hero.jpg`}
alt="artistic picture of Oulu castle"
/>
</div>
</div>
</div>
</div>
<div class="m-4 text-center">
<Intro />
</div>
<div class="m-4 text-center text-2xl">
<h2>What is coming next?</h2>
</div>
{meetupDetails && <MeetupCard {...meetupDetails} />}
<PageLayout>
<div class="mx-auto flex max-w-7xl flex-col sm:px-6 lg:px-8">
<div class="container">
<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}images/oulu-devmeetups-hero.jpg`}
alt="artistic picture of Oulu castle"
/>
</div>
</main>
<Footer />
</div>
</div>
</div>
</body>
</html>
<div class="m-4 text-center">
<Intro />
</div>
<div class="m-4 text-center text-2xl">
<h2>What is coming next?</h2>
</div>
{meetupDetails && <MeetupCard {...meetupDetails} />}
</div>
</PageLayout>
60 changes: 22 additions & 38 deletions packages/site/src/pages/meetups/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
---
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 PageLayout from '../../layouts/PageLayout.astro';
import { getCollection } from 'astro:content';
import MeetupListItem from '../../components/MeetupListItem.astro';
import { getMeetupsCollectionName } from '../../content/config';
Expand All @@ -15,39 +12,26 @@ meetups.sort((a: any, b: any) => {
});
---

<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body class="h-full">
<div class="min-h-full">
<Header />
<div class="py-4">
<main>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div
class="mx-auto max-w-4xl rounded-xl border border-gray-400 bg-gray-50 p-8 sm:px-24"
>
<main>
<section>
<ul role="list" class="divide-y divide-gray-100">
{
meetups.map((meetup: any) => (
<MeetupListItem
name={meetup.data.title}
location={meetup.data.location}
time={meetup.data.date}
organizer={meetup.data.organizer}
slug={meetup.slug}
/>
))
}
</ul>
</section>
</main>
</div>
</div>
</main>
<Footer />
<PageLayout>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div
class="mx-auto max-w-4xl rounded-xl border border-gray-400 bg-gray-50 p-8 sm:px-24"
>
<section>
<ul role="list" class="divide-y divide-gray-100">
{
meetups.map((meetup: any) => (
<MeetupListItem
name={meetup.data.title}
location={meetup.data.location}
time={meetup.data.date}
organizer={meetup.data.organizer}
slug={meetup.slug}
/>
))
}
</ul>
</section>
</div>
</div>
</body>
</PageLayout>
Loading

0 comments on commit 491118f

Please sign in to comment.