Skip to content

Commit

Permalink
Events - Angular Superpowers to events routing (#1079)
Browse files Browse the repository at this point in the history
* Events - adding angular page

* Events - removing the schema to regenerate the auto generated files

* Events - adding new schema and page changes

* Adding banner image and events header component

* Banner - adding banner in middle of background

* UI - Updating based on Ken's feedback

* Icons - adding staging and days icons

* Adding - event content query

* Training header - reverting changes

* UI - adding new angular banner without offices

* Banners - adding banners for other events

* UI - adding underline as per Tiago's feedback

* Removing - Read more

* Underline - removing spacing from the location

* Content - fixing typo and adding more event's banners

* Content - icons and banners
  • Loading branch information
amankumarrr authored Jul 20, 2023
1 parent d9886ce commit 2283f4d
Show file tree
Hide file tree
Showing 35 changed files with 323 additions and 51 deletions.
2 changes: 1 addition & 1 deletion .tina/__generated__/_graphql.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .tina/__generated__/_lookup.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .tina/__generated__/_schema.json

Large diffs are not rendered by default.

60 changes: 60 additions & 0 deletions .tina/collections/events.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import type { Collection } from "tinacms";
import * as Schemas from "../../components/blocks";
import { eventsHeaderSchema } from "../../components/events/eventsHeader";
import { testimonialRowSchema } from "../../components/testimonials/TestimonialRow";
import { seoSchema } from "../../components/util/seo";
import { videoCardSchema } from "../../components/util/videoCards";

export const eventsSchema: Collection = {
label: "Events Pages",
name: "events",
format: "mdx",
path: "content/events",
ui: {
router: ({ document }) => {
console.log(document);
return `/events/${document._sys.filename}`;
},
},
fields: [
// @ts-ignore
seoSchema,
// @ts-ignore
eventsHeaderSchema,
// @ts-ignore
testimonialRowSchema,
{
type: "string",
name: "title",
label: "Title",
},
{
type: "boolean",
name: "showBreadcrumb",
label: "Show Breadcrumb",
},
{
type: "boolean",
name: "showTestimonials",
label: "Show Testimonials",
},
{
type: "object",
list: true,
name: "_body",
label: "Body",
ui: {
visualSelector: true,
},
templates: [...Schemas.pageBlocks],
},
{
type: "rich-text",
name: "footer",
label: "Footer",
templates: [...Schemas.pageBlocks],
},
// @ts-ignore
videoCardSchema,
],
};
2 changes: 2 additions & 0 deletions .tina/config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
consultingTagSchema,
} from "./collections/consulting";
import { employmentSchema } from "./collections/employment";
import { eventsSchema } from "./collections/events";
import { globalSchema } from "./collections/global";
import { industrySchema } from "./collections/industry";
import { locationSchema } from "./collections/location";
Expand Down Expand Up @@ -73,6 +74,7 @@ const config = defineStaticConfig({
presenterSchema,
locationSchema,
industrySchema,
eventsSchema,
],
},
});
Expand Down
7 changes: 7 additions & 0 deletions .tina/queries/queries.gql
Original file line number Diff line number Diff line change
Expand Up @@ -143,3 +143,10 @@ query industryContentQuery($relativePath: String!) {
...IndustryParts
}
}

query eventsContentQuery($relativePath: String!) {
...LayoutQueryFragment
events(relativePath: $relativePath) {
...EventsParts
}
}
25 changes: 4 additions & 21 deletions components/blocks/agenda.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,6 @@ import { verticalListItemSchema } from "../blocks/verticalListItem";
import { Container } from "../util/container";
import { Section } from "../util/section";

const alignmentClasses = {
center: "md:!text-center",
right: "md:!text-right",
left: "md:!text-left",
};

const textColorClasses = {
red: "text-sswRed",
grey: "text-gray-500",
Expand All @@ -40,17 +34,16 @@ export const Agenda = ({ data }) => {
<Container
padding={"md:px-8 px-2"}
size={"xsmall"}
className={"flex-1 pb-12"}
className={"flex-1 pb-8"}
>
<h3
<h2
className={classNames(
"my-0 py-5 text-center text-3xl md:text-left",
alignmentClasses[data.align],
"my-8 text-center",
textColorClasses[data.textColor]
)}
dangerouslySetInnerHTML={{ __html: data.header }}
data-tina-field={tinaField(data, agendaBlockConstant.header)}
></h3>
></h2>
<div
className={classNames(
"grid grid-cols-1 justify-between px-4 md:px-0",
Expand Down Expand Up @@ -93,16 +86,6 @@ export const agendaSchema: Template = {
label: "Header",
name: agendaBlockConstant.header,
},
{
type: "string",
label: "Align Header",
name: agendaBlockConstant.align,
options: [
{ label: "Center", value: "center" },
{ label: "Right", value: "right" },
{ label: "Left", value: "left" },
],
},
{
type: "string",
label: "Header Color",
Expand Down
51 changes: 51 additions & 0 deletions components/events/eventsHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import Image from "next/image";
import { Section } from "../util/section";

const EventsHeader = ({ data }) => {
return (
<Section
className="flex h-102 items-center justify-center border-b-8 border-sswRed bg-white bg-cover bg-no-repeat"
style={{
backgroundImage: `url(${
data?.heroBackground || "/images/polygonBackground.png"
})`,
}}
>
<div className="flex max-w-2xl lg:max-w-3xl">
<Image
src={data?.imgOverlay}
alt={data?.altText}
height={400}
width={680}
/>
</div>
</Section>
);
};

export const eventsHeaderSchema = {
type: "object",
label: "Events Header",
name: "eventHeader",
fields: [
{
type: "image",
label: "Hero Background",
name: "heroBackground",
uploadDir: () => "/background",
},
{
type: "string",
label: "Alt Text",
name: "altText",
},
{
type: "image",
label: "Image Overlay",
name: "imgOverlay",
uploadDir: () => "/background",
},
],
};

export default EventsHeader;
9 changes: 5 additions & 4 deletions components/training/eventBooking.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const classes = {

export const EventBooking: FC<EventBookingType> = ({ data }) => {
return (
<Container padding="md:px-8 px-6">
<Container padding="md:px-8 px-6 py-8">
{
<EventHeader
duration={data.duration}
Expand Down Expand Up @@ -109,12 +109,13 @@ const EventCard = ({ event, count, index, schema }) => {

<div className=" py-1 pr-0 text-xs ">
<a
className="flex items-center justify-end !no-underline md:justify-start"
className="sswUnderline flex items-center justify-end md:justify-start"
href="#location"
>
<MdLocationOn className="m-icon" />
{EventModel.SSW}
<span className="ml-1 capitalize">{event.city}</span>
<span className="capitalize">
{EventModel.SSW} {event.city}
</span>
</a>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions components/training/locationBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ const NumberOfLocationInRow = 4;
export const LocationBlock = ({ data }) => {
return (
<Container padding="md:px-8 px-6" size="custom" id="location">
<h4
className="py-2 text-sswRed"
<h2
className="my-6 py-2 text-center text-sswRed"
data-tina-field={tinaField(data, locationBlockConstant.title)}
>
{data.title}
</h4>
</h2>
<div className="mb-2 grid grid-cols-12">
{data.locationList?.map((location, index) => (
<LocationCard
Expand All @@ -26,10 +26,10 @@ export const LocationBlock = ({ data }) => {
/>
))}
</div>{" "}
<div className="py-1 text-center uppercase">
<div className="py-4 text-center uppercase">
<a
href={!data.chapelWebsite?.URL ? "" : data.chapelWebsite.URL}
className="inline-flex cursor-pointer items-center !no-underline hover:!underline"
className="sswUnderline inline-flex cursor-pointer items-center"
target="_blank"
rel="noopener noreferrer"
>
Expand Down Expand Up @@ -102,7 +102,7 @@ const LocationCard = ({ location, index, schema }) => {
<div className="py-1 text-xs">
<a
href={!location?.directionURL ? "" : location.directionURL}
className="inline-flex cursor-pointer items-center !no-underline hover:!underline"
className="sswUnderline inline-flex cursor-pointer items-center"
target="_blank"
rel="noopener noreferrer"
data-tina-field={tinaField(
Expand Down
4 changes: 2 additions & 2 deletions components/training/presenterBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const PresenterBlock = ({ data }) => {
>
<a
href={data.otherEvent.eventURL}
className="inline-flex cursor-pointer !no-underline hover:!underline"
className="sswUnderline inline-flex cursor-pointer"
target="_blank"
rel="noopener noreferrer"
>
Expand Down Expand Up @@ -77,7 +77,7 @@ const PresenterCard = ({ presenter, schema, index }) => {
</div>
<a
href={presenter?.presenter?.peopleProfileURL}
className="mt-4 min-h-16 !no-underline hover:!underline"
className="sswUnderline mt-4 min-h-16"
target="_blank"
rel="noopener noreferrer"
data-tina-field={tinaField(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ _body:
eventURL: 'https://www.ssw.com.au/ssw/Events/Training/Angular-Workshop.aspx'
_template: PresenterBlock
- prose: false
content: "<VideoEmbed url=\"https://youtu.be/X2ZQRz0YJqo\" />\n\n#### This 1-day course brings developers up-to-speed on the new features and benefits of using Angular to build awesome web applications.\n\nEverything has changed!Angular and modern web best practices involve massive changes in how we build modern web applications.\n\nAt SSW we have already gone through the hard work of implementing these new and exciting technologies in our projects for everything from small start-ups to enterprises and government agencies. View our\_[Angular consulting page](https://www.ssw.com.au/ssw/Consulting/Angular.aspx).\n\nCome watch our best Angular devs build an Angular application from scratch and take it all the way to an enterprise application using all the best tools and practices.\n\nDon't waste weeks learning Angular, the Angular CLI, RxJS, TypeScript, ngrx, NPM, WebPack, end to end testing and unit testing. Get your head around all the core concepts and get jump started in just one day.\n"
content: "<VideoEmbed url=\"https://youtu.be/X2ZQRz0YJqo\" />\n\n#### This 1-day course brings developers up-to-speed on the new features and benefits of using Angular to build awesome web applications.\n\nEverything has changed! Angular and modern web best practices involve massive changes in how we build modern web applications.\n\nAt SSW we have already gone through the hard work of implementing these new and exciting technologies in our projects for everything from small start-ups to enterprises and government agencies. View our\_[Angular consulting page](https://www.ssw.com.au/ssw/Consulting/Angular.aspx).\n\nCome watch our best Angular devs build an Angular application from scratch and take it all the way to an enterprise application using all the best tools and practices.\n\nDon't waste weeks learning Angular, the Angular CLI, RxJS, TypeScript, ngrx, NPM, WebPack, end to end testing and unit testing. Get your head around all the core concepts and get jump started in just one day.\n"
_template: ContentCard
- header: Agenda
textColor: red
Expand All @@ -41,9 +41,9 @@ _body:
body: |
<VerticalListItem
content={<>
Stage 1: Understanding Angular
Understanding Angular
</>}
icon="/images/icons/university_hat.png"
icon="/images/icons/1-icon.png"
afterBody={<>
* Angular in 20 minutes – the big picture
* Intro to the Angular CLI
Expand All @@ -53,7 +53,7 @@ _body:
body: |
<VerticalListItem
content={<>
Stage 2: Building A CRM Application
Building A CRM Application
</>}
afterBody={<>
* Building your first components
Expand All @@ -65,41 +65,41 @@ _body:
* Adding validation
* Simple State Management using RxJs
</>}
icon="/images/icons/university_hat.png"
icon="/images/icons/2-icon.png"
/>
- placeholder: Stage 3
body: |
<VerticalListItem
content={<>
Stage 3: Testing
Testing
</>}
afterBody={<>
* Unit testing with Jasmine
* End to end testing with Protractor
</>}
icon="/images/icons/university_hat.png"
icon="/images/icons/3-icon.png"
/>
- placeholder: Stage 4
body: |
<VerticalListItem
content={<>
Stage 4: Enterprise patterns with redux and ngrx
Enterprise patterns with redux and ngrx
</>}
afterBody={<>
* Implementing redux with ngrx
</>}
icon="/images/icons/university_hat.png"
icon="/images/icons/4-icon.png"
/>
- placeholder: Stage 5
body: |
<VerticalListItem
content={<>
Stage 5: Shipping to Production
Shipping to Production
</>}
afterBody={<>
* Building, bundling and deploying your application
</>}
icon="/images/icons/university_hat.png"
icon="/images/icons/5-icon.png"
/>
_template: Agenda
- title: Location Venues
Expand All @@ -115,10 +115,12 @@ _body:
footer: ''
trainingHeaderCarousel:
trainingHeaderCarouselItem:
- tagline: Dev SuperPowers Tour
secondaryTagline: Angular
heroBackground: /images/background/polygonBackground.png
- heroBackground: /images/background/polygonBackground.png
person: ''
centeredImg: /images/background/SuperPower-FBC-Angular.png
eventHeader:
heroBackground: /images/background/polygonBackground.png
imgOverlay: /images/background/DevSuperPowers-Angular.png
---


Expand All @@ -135,6 +137,11 @@ trainingHeaderCarousel:











Loading

0 comments on commit 2283f4d

Please sign in to comment.