From dbbdbc5a6015e1e7fd662cdca5018634eebbe7ba Mon Sep 17 00:00:00 2001 From: Agustina Date: Thu, 2 Feb 2023 20:51:43 +0100 Subject: [PATCH 01/45] feat: tolocars subpage --- base.css | 5 + public/tolocar_illustration_5.svg | 156 ++++++++++++++++++++++++++ public/truck.svg | 3 + src/assets/Cadus.svg | 7 ++ src/assets/HIWW.svg | 7 ++ src/assets/MitOst.svg | 3 + src/assets/Ostriv.svg | 19 ++++ src/assets/tolocar_underline_10.svg | 3 + src/components/CarCard.tsx | 35 ++++-- src/components/HeadlineUnderlined.tsx | 2 + src/components/TolocarsHeader.tsx | 46 ++++++++ src/components/index.tsx | 1 + src/layouts/TolocarsIndex.astro | 31 +++++ src/pages/en/_menu.mdx | 4 +- src/pages/en/index.mdx | 34 +----- src/pages/en/tolocars/index.mdx | 27 +++++ tailwind.config.cjs | 3 +- 17 files changed, 347 insertions(+), 39 deletions(-) create mode 100644 public/tolocar_illustration_5.svg create mode 100644 public/truck.svg create mode 100644 src/assets/Cadus.svg create mode 100644 src/assets/HIWW.svg create mode 100644 src/assets/MitOst.svg create mode 100644 src/assets/Ostriv.svg create mode 100644 src/assets/tolocar_underline_10.svg create mode 100644 src/components/TolocarsHeader.tsx create mode 100644 src/layouts/TolocarsIndex.astro create mode 100644 src/pages/en/tolocars/index.mdx diff --git a/base.css b/base.css index 9fc41cf2..50e1c75d 100644 --- a/base.css +++ b/base.css @@ -122,4 +122,9 @@ .background-position-2 { background-position: right -10px bottom -80px; } + + .background-fleet { + background-image: url("/truck.svg"); + background-size: 94.87px 75.38px; + } } diff --git a/public/tolocar_illustration_5.svg b/public/tolocar_illustration_5.svg new file mode 100644 index 00000000..ea8239f8 --- /dev/null +++ b/public/tolocar_illustration_5.svg @@ -0,0 +1,156 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/truck.svg b/public/truck.svg new file mode 100644 index 00000000..2d101f4d --- /dev/null +++ b/public/truck.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/Cadus.svg b/src/assets/Cadus.svg new file mode 100644 index 00000000..285a15b2 --- /dev/null +++ b/src/assets/Cadus.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/HIWW.svg b/src/assets/HIWW.svg new file mode 100644 index 00000000..ef004a6b --- /dev/null +++ b/src/assets/HIWW.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/MitOst.svg b/src/assets/MitOst.svg new file mode 100644 index 00000000..3cb89171 --- /dev/null +++ b/src/assets/MitOst.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/Ostriv.svg b/src/assets/Ostriv.svg new file mode 100644 index 00000000..b501e0e5 --- /dev/null +++ b/src/assets/Ostriv.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/tolocar_underline_10.svg b/src/assets/tolocar_underline_10.svg new file mode 100644 index 00000000..56de2513 --- /dev/null +++ b/src/assets/tolocar_underline_10.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx index 6184aa4e..de3a886c 100644 --- a/src/components/CarCard.tsx +++ b/src/components/CarCard.tsx @@ -5,6 +5,10 @@ import { ReactComponent as CogIcon } from "@assets/fa-cog.svg"; import { ReactComponent as HammerIcon } from "@assets/fa-hammer.svg"; import { ReactComponent as ToolboxIcon } from "@assets/fa-toolbox.svg"; import { ReactComponent as ScrewdriverIcon } from "@assets/fa-screwdriver.svg"; +import { ReactComponent as MitOstIcon } from "@assets/MitOst.svg"; +import { ReactComponent as CadusIcon } from "@assets/Cadus.svg"; +import { ReactComponent as HIWWIcon } from "@assets/HIWW.svg"; +import { ReactComponent as OstrivIcon } from "@assets/Ostriv.svg"; interface Props { className?: string; @@ -15,6 +19,7 @@ interface Props { operator: string; img: string; tagIcon?: "truck" | "hammer" | "cog" | "toolbox" | "screwdriver"; + operatorIcon?: "mitost" | "cadus" | "hiww" | "ostriv"; } const CarCard: React.FC = ({ @@ -25,6 +30,7 @@ const CarCard: React.FC = ({ tag, date, tagIcon, + operatorIcon, }: Props) => { const renderIcon = (icon) => { const iconMapping = { @@ -41,18 +47,29 @@ const CarCard: React.FC = ({ return ; }; + const renderOperatorIcon = (icon) => { + const operatorIconMapping = { + mitost: MitOstIcon, + cadus: CadusIcon, + hiww: HIWWIcon, + ostriv: OstrivIcon, + default: null, + }; + + const OperatorIconComponent = operatorIconMapping[icon || "default"]; + + return ; + }; + return (
-
-

- - {subtitle} - -
+
+ {subtitle} +

{title}

-
+
{tagIcon && renderIcon(tagIcon)} {tag}
@@ -60,6 +77,10 @@ const CarCard: React.FC = ({ {date}
+
+ Operated by +
{operatorIcon && renderOperatorIcon(operatorIcon)}
+

); diff --git a/src/components/HeadlineUnderlined.tsx b/src/components/HeadlineUnderlined.tsx index a1892644..56f92b88 100644 --- a/src/components/HeadlineUnderlined.tsx +++ b/src/components/HeadlineUnderlined.tsx @@ -8,6 +8,7 @@ import Underline6Svg from "@assets/tolocar_underline_6.svg"; import Underline7Svg from "@assets/tolocar_underline_7.svg"; import Underline8Svg from "@assets/tolocar_underline_8.svg"; import CircularUnderlineSvg from "@assets/tolocar_circular_underline.svg"; +import Underline10Svg from "@assets/tolocar_underline_10.svg"; interface Props { children: React.ReactNode; @@ -32,6 +33,7 @@ const underlineSvgAndClassesMapping = [ classes: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-x-125 scale-y-105 lg:scale-100", }, + { src: Underline10Svg, classes: "bottom-0" }, ]; const HeadlineUnderlined: React.FC = ({ diff --git a/src/components/TolocarsHeader.tsx b/src/components/TolocarsHeader.tsx new file mode 100644 index 00000000..55070abd --- /dev/null +++ b/src/components/TolocarsHeader.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { HeadlineUnderlined } from "@components"; + +interface Props { + className?: string; + title?: string; + text?: string; +} + +const TolocarsHeader: React.FC = ({ className, title, text }: Props) => { + return ( +
+
+
+ + {title} + +
+ {text} +
+
+
+

+ What is a Tolocar? +

+ + + A Tolocar is a converted van that offers the possibilities of a + makerspace or fablab on wheels. + {" "} + This means they bring the capacity of high end manufacturing or + diagnosis technologies to the point of need to enable communities to + replicate some of the capabilities and so to catalyze rebuilding + efforts and establish support networks. + +
+
+
+ ); +}; + +export default TolocarsHeader; diff --git a/src/components/index.tsx b/src/components/index.tsx index 7c2be5cb..c7d80967 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -26,3 +26,4 @@ export { default as ImpactListItem } from "@components/ImpactListItem"; export { default as CommunityBanner } from "@components/CommunityBanner"; export { default as CommunityGridCard } from "@components/CommunityGridCard"; export { default as CommunityHeader } from "@components/CommunityHeader"; +export { default as TolocarsHeader } from "@components/TolocarsHeader"; diff --git a/src/layouts/TolocarsIndex.astro b/src/layouts/TolocarsIndex.astro new file mode 100644 index 00000000..e18247af --- /dev/null +++ b/src/layouts/TolocarsIndex.astro @@ -0,0 +1,31 @@ +--- +import BaseLayout from "./BaseLayout.astro"; +import { ContentSection, Card, CardContainer } from "@components"; +const { frontmatter } = Astro.props; +--- + + + + +
+ + Schools, universities, NGOs, Startups and other organizations can reach + out to us to request the Tolocars for projects, workshops and trainings. + We are looking for Makers, FabLabs, Hackerspaces, Makerspaces and other + Communities who wants to partner with us in the Ukraine and + internationally over the internet. + + + diff --git a/src/pages/en/_menu.mdx b/src/pages/en/_menu.mdx index 41ba29f5..77154f70 100644 --- a/src/pages/en/_menu.mdx +++ b/src/pages/en/_menu.mdx @@ -4,8 +4,8 @@ menu: target: "en/#top" hideInFooter: true - - title: What is a Tolocar? - target: "/en/#what-is-a-tolocar" + - title: Tolocars + target: "/en/tolocars" - title: Community target: "/en/community" diff --git a/src/pages/en/index.mdx b/src/pages/en/index.mdx index b2b60e33..0c64f761 100644 --- a/src/pages/en/index.mdx +++ b/src/pages/en/index.mdx @@ -8,7 +8,6 @@ import { HeroImage, SideBySide, Card, - CarCard, HeadlineUnderlined, Footer, ImageGrid, @@ -23,6 +22,7 @@ import { WideCard, ImpactListItem } from "@components"; +import { ReactComponent as ArrowIcon } from "@assets/arrow.svg"; @@ -44,14 +44,9 @@ import {

A Tolocar is a converted van that offers the possibilities of a makerspace or fablab on wheels.

-
This means they bring the capacity of **high end manufacturing or diagnosis technologies to the point of need**. But crucially they remain plugged into a world wide community of diverse domain experts who can bring their collective intelligence to bear in ways that complement conventional relief or rebuilding efforts.

- The aim is to enable communities to replicate some of the capabilities and so to catalyze rebuilding efforts and establish support networks.
- {/* Waiting for Fleet Subpage */} - {/*
- */} +
This means they bring the capacity of **high end manufacturing or diagnosis technologies to the point of need**. But crucially they remain plugged into a world wide community of diverse domain experts who can bring their collective intelligence to bear in ways that complement conventional relief or rebuilding efforts.

+ The aim is to enable communities to replicate some of the capabilities and so to catalyze rebuilding efforts and establish support networks.

+
Discover our fleet
@@ -77,26 +72,7 @@ import { - -
-
- - -
-
-

Our fleet

-

Overview of all our past, current and planned Tolocars

- - -
-
- - -
-
- - - + What we do
diff --git a/src/pages/en/tolocars/index.mdx b/src/pages/en/tolocars/index.mdx new file mode 100644 index 00000000..e19c9a93 --- /dev/null +++ b/src/pages/en/tolocars/index.mdx @@ -0,0 +1,27 @@ +--- +layout: "@layouts/TolocarsIndex.astro" +title: Tolocars +darkNavigation: true +footerGrey: true +--- + +import { TolocarsHeader, ContentSection, CarCard } from "@components"; + + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
\ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index c8b56a24..3717811c 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -4,7 +4,7 @@ module.exports = { theme: { extend: { transitionProperty: { - 'height': 'height', + height: "height", }, opacity: { 15: ".15", @@ -35,6 +35,7 @@ module.exports = { "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.301) 30.5%, rgba(0, 0, 0, 0.7) 66.96%), url(/images/classroom.jpg)", "community-messages": "linear-gradient(-6.5deg, rgba(0, 150, 100, 1) 0%, rgba(0, 150, 100, 0) 31.54%, rgba(0, 150, 100, 0) 66.78%, rgba(0, 150, 100, 1) 100%), url(/community_messages.svg)", + "illustration-5": "url('/tolocar_illustration_5.svg')", }, }, colors: { From aedbc29b2c360c52ee6a57a77c28ca10bae5bb9b Mon Sep 17 00:00:00 2001 From: Agustina Date: Fri, 3 Feb 2023 11:22:45 +0100 Subject: [PATCH 02/45] feat: tolocars index layout --- src/components/CarCard.tsx | 48 ++++++--------------- src/components/Tag.tsx | 39 +++++++++++++++++ src/components/index.tsx | 1 + src/interfaces/ITolocars.ts | 10 +++++ src/layouts/TolocarsIndex.astro | 43 +++++++++++++++++- src/pages/en/tolocars/index.mdx | 21 --------- src/pages/en/tolocars/support-vehicle01.mdx | 12 ++++++ src/pages/en/tolocars/tolocar01.mdx | 12 ++++++ src/pages/en/tolocars/tolocar02.mdx | 12 ++++++ src/pages/en/tolocars/tolocar03.mdx | 11 +++++ src/pages/en/tolocars/tolocar04.mdx | 12 ++++++ src/pages/en/tolocars/tolocar05.mdx | 12 ++++++ src/util/ContentTransformer.ts | 16 +++++++ 13 files changed, 190 insertions(+), 59 deletions(-) create mode 100644 src/components/Tag.tsx create mode 100644 src/interfaces/ITolocars.ts create mode 100644 src/pages/en/tolocars/support-vehicle01.mdx create mode 100644 src/pages/en/tolocars/tolocar01.mdx create mode 100644 src/pages/en/tolocars/tolocar02.mdx create mode 100644 src/pages/en/tolocars/tolocar03.mdx create mode 100644 src/pages/en/tolocars/tolocar04.mdx create mode 100644 src/pages/en/tolocars/tolocar05.mdx diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx index de3a886c..4737002e 100644 --- a/src/components/CarCard.tsx +++ b/src/components/CarCard.tsx @@ -1,25 +1,14 @@ import React from "react"; import { ReactComponent as CalendarIcon } from "@assets/fa-calendar.svg"; -import { ReactComponent as TruckIcon } from "@assets/fa-truck.svg"; -import { ReactComponent as CogIcon } from "@assets/fa-cog.svg"; -import { ReactComponent as HammerIcon } from "@assets/fa-hammer.svg"; -import { ReactComponent as ToolboxIcon } from "@assets/fa-toolbox.svg"; -import { ReactComponent as ScrewdriverIcon } from "@assets/fa-screwdriver.svg"; import { ReactComponent as MitOstIcon } from "@assets/MitOst.svg"; import { ReactComponent as CadusIcon } from "@assets/Cadus.svg"; import { ReactComponent as HIWWIcon } from "@assets/HIWW.svg"; import { ReactComponent as OstrivIcon } from "@assets/Ostriv.svg"; +import type { ITolocarsFrontmatter } from "@interfaces/ITolocars"; +import { Tag } from "@components"; -interface Props { +interface Props extends ITolocarsFrontmatter { className?: string; - title: string; - subtitle: string; - tag: string; - date: string; - operator: string; - img: string; - tagIcon?: "truck" | "hammer" | "cog" | "toolbox" | "screwdriver"; - operatorIcon?: "mitost" | "cadus" | "hiww" | "ostriv"; } const CarCard: React.FC = ({ @@ -27,26 +16,10 @@ const CarCard: React.FC = ({ img, title, subtitle, - tag, + tags, date, - tagIcon, operatorIcon, }: Props) => { - const renderIcon = (icon) => { - const iconMapping = { - truck: TruckIcon, - cog: CogIcon, - hammer: HammerIcon, - toolbox: ToolboxIcon, - screwdriver: ScrewdriverIcon, - default: null, - }; - - const IconComponent = iconMapping[icon || "default"]; - - return ; - }; - const renderOperatorIcon = (icon) => { const operatorIconMapping = { mitost: MitOstIcon, @@ -69,10 +42,13 @@ const CarCard: React.FC = ({

{title}

-
- {tagIcon && renderIcon(tagIcon)} - {tag} -
+ {Boolean(tags.length) && ( +
+ {tags.map((tag, index) => ( + + ))} +
+ )}
{date} @@ -86,4 +62,4 @@ const CarCard: React.FC = ({ ); }; -export default CarCard; +export default CarCard; \ No newline at end of file diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx new file mode 100644 index 00000000..1a7f007f --- /dev/null +++ b/src/components/Tag.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { ReactComponent as TruckIcon } from "@assets/fa-truck.svg"; +import { ReactComponent as CogIcon } from "@assets/fa-cog.svg"; +import { ReactComponent as HammerIcon } from "@assets/fa-hammer.svg"; +import { ReactComponent as ToolboxIcon } from "@assets/fa-toolbox.svg"; +import { ReactComponent as ScrewdriverIcon } from "@assets/fa-screwdriver.svg"; + +interface Props { + className?: string; + title: string; + tagIcon?: "truck" | "hammer" | "cog" | "toolbox" | "screwdriver"; +} + +const Tag: React.FC = ({ className, title, tagIcon }: Props) => { + const renderIcon = (icon) => { + const iconMapping = { + transport: TruckIcon, + open_source: CogIcon, + handcraft: HammerIcon, + making: ToolboxIcon, + renovation: ScrewdriverIcon, + default: null, + }; + const IconComponent = iconMapping[icon || "default"]; + return ; + }; + return ( + + {tagIcon && (title === tagIcon ? renderIcon(tagIcon) : null)} + {title} + + ); +}; + +export default Tag; diff --git a/src/components/index.tsx b/src/components/index.tsx index c7d80967..51321123 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -27,3 +27,4 @@ export { default as CommunityBanner } from "@components/CommunityBanner"; export { default as CommunityGridCard } from "@components/CommunityGridCard"; export { default as CommunityHeader } from "@components/CommunityHeader"; export { default as TolocarsHeader } from "@components/TolocarsHeader"; +export { default as Tag } from "@components/Tag"; diff --git a/src/interfaces/ITolocars.ts b/src/interfaces/ITolocars.ts new file mode 100644 index 00000000..8a8bd57b --- /dev/null +++ b/src/interfaces/ITolocars.ts @@ -0,0 +1,10 @@ +export interface ITolocarsFrontmatter { + title: string; + subtitle?: string; + date?: string; + footerGrey?: boolean; + tags?: Array; + operatorIcon?: "mitost" | "cadus" | "hiww" | "ostriv"; + img?: string; + order?: number; +} diff --git a/src/layouts/TolocarsIndex.astro b/src/layouts/TolocarsIndex.astro index e18247af..2b9bdb05 100644 --- a/src/layouts/TolocarsIndex.astro +++ b/src/layouts/TolocarsIndex.astro @@ -1,11 +1,50 @@ --- import BaseLayout from "./BaseLayout.astro"; -import { ContentSection, Card, CardContainer } from "@components"; +import { ITolocarsFrontmatter } from "@interfaces/ITolocars"; +import { + TolocarsHeader, + CarCard, + ContentSection, + Card, + CardContainer, +} from "@components"; +import { trimAndSortTolocars } from "@util/ContentTransformer"; + const { frontmatter } = Astro.props; +const rawTolocarsContent = await Astro.glob( + "../pages/en/tolocars/*.mdx" +); + +const trimmedAndSorted = trimAndSortTolocars(rawTolocarsContent); --- - + +
+
+ { + trimmedAndSorted.map((tolocar) => ( + + )) + } +
+
diff --git a/src/pages/en/tolocars/index.mdx b/src/pages/en/tolocars/index.mdx index e19c9a93..7e9aed12 100644 --- a/src/pages/en/tolocars/index.mdx +++ b/src/pages/en/tolocars/index.mdx @@ -4,24 +4,3 @@ title: Tolocars darkNavigation: true footerGrey: true --- - -import { TolocarsHeader, ContentSection, CarCard } from "@components"; - - - -
-
-
- - -
-
- - -
-
- - -
-
-
\ No newline at end of file diff --git a/src/pages/en/tolocars/support-vehicle01.mdx b/src/pages/en/tolocars/support-vehicle01.mdx new file mode 100644 index 00000000..016d9d7c --- /dev/null +++ b/src/pages/en/tolocars/support-vehicle01.mdx @@ -0,0 +1,12 @@ +--- +layout: "@layouts/InterventionSingleView.astro" +title: The Cadus Supporter +subtitle: Support Vehicle 01 +tags: + - Staff transport + - Material transport +date: January to June 2022 +operatorIcon: cadus +img: images/cars/image2.jpg +order: 2 +--- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar01.mdx b/src/pages/en/tolocars/tolocar01.mdx new file mode 100644 index 00000000..86870a90 --- /dev/null +++ b/src/pages/en/tolocars/tolocar01.mdx @@ -0,0 +1,12 @@ +--- +layout: "@layouts/InterventionSingleView.astro" +title: The Cadus Crafter +subtitle: Tolocar 01 +tags: + - Renovation + - Handcraft +date: January to June 2022 +operatorIcon: cadus +img: images/cars/image4.jpg +order: 1 +--- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar02.mdx b/src/pages/en/tolocars/tolocar02.mdx new file mode 100644 index 00000000..f609ad32 --- /dev/null +++ b/src/pages/en/tolocars/tolocar02.mdx @@ -0,0 +1,12 @@ +--- +layout: "@layouts/InterventionSingleView.astro" +title: The MitOst Sprinter I +subtitle: Tolocar 02 +tags: + - Making + - Renovation +date: June 2022 - Open End +operatorIcon: ostriv +img: images/cars/image3.jpg +order: 3 +--- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar03.mdx b/src/pages/en/tolocars/tolocar03.mdx new file mode 100644 index 00000000..f2470a0c --- /dev/null +++ b/src/pages/en/tolocars/tolocar03.mdx @@ -0,0 +1,11 @@ +--- +layout: "@layouts/InterventionSingleView.astro" +title: The MitOst Sprinter II +subtitle: Tolocar 03 +tags: + - Making +date: September 2022 - Open End +operatorIcon: mitost +img: images/cars/image1.jpg +order: 4 +--- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar04.mdx b/src/pages/en/tolocars/tolocar04.mdx new file mode 100644 index 00000000..373a13c8 --- /dev/null +++ b/src/pages/en/tolocars/tolocar04.mdx @@ -0,0 +1,12 @@ +--- +layout: "@layouts/InterventionSingleView.astro" +title: The HIWW Van +subtitle: Tolocar 04 +tags: + - Making + - Open source +date: September 2022 - Open End +operatorIcon: hiww +img: images/cars/image5.jpg +order: 5 +--- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar05.mdx b/src/pages/en/tolocars/tolocar05.mdx new file mode 100644 index 00000000..418ad5eb --- /dev/null +++ b/src/pages/en/tolocars/tolocar05.mdx @@ -0,0 +1,12 @@ +--- +layout: "@layouts/InterventionSingleView.astro" +title: The HIWW Truck +subtitle: Tolocar 05 +tags: + - Making + - Open source +date: September 2022 - Open End +operatorIcon: hiww +img: images/cars/image7.jpg +order: 6 +--- \ No newline at end of file diff --git a/src/util/ContentTransformer.ts b/src/util/ContentTransformer.ts index ddf7ae91..2f048e25 100644 --- a/src/util/ContentTransformer.ts +++ b/src/util/ContentTransformer.ts @@ -2,6 +2,7 @@ import type { AcademyPageParent, AcademyPageFrontmatter, } from "@interfaces/IAcademy"; +import type { ITolocarsFrontmatter } from "@interfaces/ITolocars"; import type { MDXInstance } from "astro"; export function flatAcademyContentMap( @@ -66,3 +67,18 @@ export function transformAcademy(rawAcademyContent) { return coursesAndLessons; } + +export function trimAndSortTolocars( + rawTolocarsContent: MDXInstance[], + count?: number +) { + const rawSortedTolocarsContentWithoutIndex = rawTolocarsContent + .filter((tolocar) => !tolocar.file.includes("index.mdx")) + .sort((a, b) => b.frontmatter.order - a.frontmatter.order); + + const trimmedTolocars = count + ? rawSortedTolocarsContentWithoutIndex.slice(0, count) + : rawSortedTolocarsContentWithoutIndex; + + return trimmedTolocars; +} From d4892ff586c3ef5c1d925602ed3c33284c4e5cac Mon Sep 17 00:00:00 2001 From: Agustina Date: Fri, 3 Feb 2023 13:23:47 +0100 Subject: [PATCH 03/45] feat: tolocars single view layout --- base.css | 4 ++ src/components/CarCard.tsx | 38 ++++++++----- src/components/Tag.tsx | 2 +- src/components/TolocarsSingleViewHeading.tsx | 40 ++++++++++++++ src/components/index.tsx | 1 + src/interfaces/ITolocars.ts | 3 +- src/layouts/TolocarsIndex.astro | 17 +++--- src/layouts/TolocarsSingleView.astro | 57 ++++++++++++++++++++ src/pages/en/tolocars/support-vehicle01.mdx | 5 +- src/pages/en/tolocars/tolocar01.mdx | 5 +- src/pages/en/tolocars/tolocar02.mdx | 5 +- src/pages/en/tolocars/tolocar03.mdx | 5 +- src/pages/en/tolocars/tolocar04.mdx | 5 +- src/pages/en/tolocars/tolocar05.mdx | 15 ++++-- 14 files changed, 163 insertions(+), 39 deletions(-) create mode 100644 src/components/TolocarsSingleViewHeading.tsx create mode 100644 src/layouts/TolocarsSingleView.astro diff --git a/base.css b/base.css index 50e1c75d..2910414f 100644 --- a/base.css +++ b/base.css @@ -127,4 +127,8 @@ background-image: url("/truck.svg"); background-size: 94.87px 75.38px; } + + .default-prose { + @apply prose prose-lg prose-p:text-neutral-500 prose-li:text-neutral-500 prose-ol:text-neutral-500 prose-p:leading-7 prose-headings:font-aktiv prose-headings:font-semibold prose-strong:text-neutral-900; + } } diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx index 4737002e..383a0b96 100644 --- a/src/components/CarCard.tsx +++ b/src/components/CarCard.tsx @@ -9,16 +9,18 @@ import { Tag } from "@components"; interface Props extends ITolocarsFrontmatter { className?: string; + href?: string; } const CarCard: React.FC = ({ className, + href, img, title, - subtitle, tags, date, operatorIcon, + car, }: Props) => { const renderOperatorIcon = (icon) => { const operatorIconMapping = { @@ -36,30 +38,38 @@ const CarCard: React.FC = ({ return (
- + {href && ( + + + + )}
- {subtitle} + {car}

{title}

{Boolean(tags.length) && ( -
+
{tags.map((tag, index) => ( - + ))}
)} -
- - {date} -
-
- Operated by -
{operatorIcon && renderOperatorIcon(operatorIcon)}
-
+ {date && ( +
+ + {date} +
+ )} + {operatorIcon && ( +
+ Operated by +
{renderOperatorIcon(operatorIcon)}
+
+ )}
); }; -export default CarCard; \ No newline at end of file +export default CarCard; diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 1a7f007f..bec14cfa 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -26,7 +26,7 @@ const Tag: React.FC = ({ className, title, tagIcon }: Props) => { }; return ( diff --git a/src/components/TolocarsSingleViewHeading.tsx b/src/components/TolocarsSingleViewHeading.tsx new file mode 100644 index 00000000..9a2039b8 --- /dev/null +++ b/src/components/TolocarsSingleViewHeading.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import type { ITolocarsFrontmatter } from "@interfaces/ITolocars"; + +interface Props extends ITolocarsFrontmatter { + className?: string; +} + +const TolocarsSingleViewHeading: React.FC = ({ + className, + title, + subtitle, + img, +}: Props) => { + return ( +
+ {title && ( +

+ {title} + {subtitle && ( + + {subtitle} + + )} +

+ )} + + Tolocar +
+ ); +}; + +export default TolocarsSingleViewHeading; diff --git a/src/components/index.tsx b/src/components/index.tsx index 51321123..f9443cef 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -28,3 +28,4 @@ export { default as CommunityGridCard } from "@components/CommunityGridCard"; export { default as CommunityHeader } from "@components/CommunityHeader"; export { default as TolocarsHeader } from "@components/TolocarsHeader"; export { default as Tag } from "@components/Tag"; +export { default as TolocarsSingleViewHeading } from "@components/TolocarsSingleViewHeading"; diff --git a/src/interfaces/ITolocars.ts b/src/interfaces/ITolocars.ts index 8a8bd57b..000c782a 100644 --- a/src/interfaces/ITolocars.ts +++ b/src/interfaces/ITolocars.ts @@ -4,7 +4,8 @@ export interface ITolocarsFrontmatter { date?: string; footerGrey?: boolean; tags?: Array; - operatorIcon?: "mitost" | "cadus" | "hiww" | "ostriv"; + operatorIcon?: "mitost" | "cadus" | "hiww" | "ostriv"; img?: string; order?: number; + car?: string; } diff --git a/src/layouts/TolocarsIndex.astro b/src/layouts/TolocarsIndex.astro index 2b9bdb05..97cf29c2 100644 --- a/src/layouts/TolocarsIndex.astro +++ b/src/layouts/TolocarsIndex.astro @@ -10,7 +10,8 @@ import { } from "@components"; import { trimAndSortTolocars } from "@util/ContentTransformer"; -const { frontmatter } = Astro.props; +const { frontmatter, url, file, headings } = Astro.props; + const rawTolocarsContent = await Astro.glob( "../pages/en/tolocars/*.mdx" ); @@ -24,20 +25,16 @@ const trimmedAndSorted = trimAndSortTolocars(rawTolocarsContent); title="Our Fleet" text="Overview of our past, current and planned Tolocars" /> -
-
+
+
{ trimmedAndSorted.map((tolocar) => ( diff --git a/src/layouts/TolocarsSingleView.astro b/src/layouts/TolocarsSingleView.astro new file mode 100644 index 00000000..d826b044 --- /dev/null +++ b/src/layouts/TolocarsSingleView.astro @@ -0,0 +1,57 @@ +--- +import BaseLayout from "./BaseLayout.astro"; +import { ITolocarsFrontmatter } from "@interfaces/ITolocars"; +import { + TolocarsSingleViewHeading, + ContentSection, + CardContainer, + Card, +} from "@components"; + +const { frontmatter, url, file, headings } = Astro.props; + +const rawTolocarsContent = await Astro.glob( + "../pages/en/tolocars/*.mdx" +); + +const rawTolocarsContentWithoutIndex = rawTolocarsContent.filter( + (tolocar) => !tolocar.file.includes("index.mdx") +); +--- + + +
+ +
+ +
+ +
+ + +
+ + Schools, universities, NGOs, Startups and other organizations can reach + out to us to request the Tolocars for projects, workshops and trainings. + We are looking for Makers, FabLabs, Hackerspaces, Makerspaces and other + Communities who wants to partner with us in the Ukraine and + internationally over the internet. + + + diff --git a/src/pages/en/tolocars/support-vehicle01.mdx b/src/pages/en/tolocars/support-vehicle01.mdx index 016d9d7c..d3cf25f4 100644 --- a/src/pages/en/tolocars/support-vehicle01.mdx +++ b/src/pages/en/tolocars/support-vehicle01.mdx @@ -1,7 +1,8 @@ --- -layout: "@layouts/InterventionSingleView.astro" +layout: "@layouts/TolocarsSingleView.astro" title: The Cadus Supporter -subtitle: Support Vehicle 01 +car: Support Vehicle 01 +subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id tags: - Staff transport - Material transport diff --git a/src/pages/en/tolocars/tolocar01.mdx b/src/pages/en/tolocars/tolocar01.mdx index 86870a90..814aa56c 100644 --- a/src/pages/en/tolocars/tolocar01.mdx +++ b/src/pages/en/tolocars/tolocar01.mdx @@ -1,7 +1,8 @@ --- -layout: "@layouts/InterventionSingleView.astro" +layout: "@layouts/TolocarsSingleView.astro" title: The Cadus Crafter -subtitle: Tolocar 01 +car: Tolocar 01 +subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id tags: - Renovation - Handcraft diff --git a/src/pages/en/tolocars/tolocar02.mdx b/src/pages/en/tolocars/tolocar02.mdx index f609ad32..c6327459 100644 --- a/src/pages/en/tolocars/tolocar02.mdx +++ b/src/pages/en/tolocars/tolocar02.mdx @@ -1,7 +1,8 @@ --- -layout: "@layouts/InterventionSingleView.astro" +layout: "@layouts/TolocarsSingleView.astro" title: The MitOst Sprinter I -subtitle: Tolocar 02 +car: Tolocar 02 +subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id tags: - Making - Renovation diff --git a/src/pages/en/tolocars/tolocar03.mdx b/src/pages/en/tolocars/tolocar03.mdx index f2470a0c..6da20b11 100644 --- a/src/pages/en/tolocars/tolocar03.mdx +++ b/src/pages/en/tolocars/tolocar03.mdx @@ -1,7 +1,8 @@ --- -layout: "@layouts/InterventionSingleView.astro" +layout: "@layouts/TolocarsSingleView.astro" title: The MitOst Sprinter II -subtitle: Tolocar 03 +car: Tolocar 03 +subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id tags: - Making date: September 2022 - Open End diff --git a/src/pages/en/tolocars/tolocar04.mdx b/src/pages/en/tolocars/tolocar04.mdx index 373a13c8..12a93b9b 100644 --- a/src/pages/en/tolocars/tolocar04.mdx +++ b/src/pages/en/tolocars/tolocar04.mdx @@ -1,7 +1,8 @@ --- -layout: "@layouts/InterventionSingleView.astro" +layout: "@layouts/TolocarsSingleView.astro" title: The HIWW Van -subtitle: Tolocar 04 +car: Tolocar 04 +subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id tags: - Making - Open source diff --git a/src/pages/en/tolocars/tolocar05.mdx b/src/pages/en/tolocars/tolocar05.mdx index 418ad5eb..89a70074 100644 --- a/src/pages/en/tolocars/tolocar05.mdx +++ b/src/pages/en/tolocars/tolocar05.mdx @@ -1,7 +1,8 @@ --- -layout: "@layouts/InterventionSingleView.astro" +layout: "@layouts/TolocarsSingleView.astro" title: The HIWW Truck -subtitle: Tolocar 05 +car: Tolocar 05 +subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id tags: - Making - Open source @@ -9,4 +10,12 @@ date: September 2022 - Open End operatorIcon: hiww img: images/cars/image7.jpg order: 6 ---- \ No newline at end of file +--- + +## Introduction + +## Security measures + +## Setting up the software + +## Subheadline \ No newline at end of file From 789076cf1e3205c41eb58e97fa02b563b3db7a3e Mon Sep 17 00:00:00 2001 From: Agustina Date: Fri, 3 Feb 2023 19:30:56 +0100 Subject: [PATCH 04/45] feat: tag icon attached to tag component --- base.css | 5 - src/assets/fa-person-from-portal.svg | 3 + src/components/CarCard.tsx | 111 +++++++++++--------- src/components/CommunityGridCard.tsx | 4 +- src/components/LinkWrapper.tsx | 4 + src/components/Tag.tsx | 20 ++-- src/components/TolocarsHeader.tsx | 6 +- src/components/index.tsx | 1 + src/interfaces/ITolocars.ts | 3 +- src/layouts/TolocarsIndex.astro | 7 +- src/pages/en/tolocars/support-vehicle01.mdx | 3 +- src/pages/en/tolocars/tolocar01.mdx | 3 +- src/pages/en/tolocars/tolocar02.mdx | 4 +- src/pages/en/tolocars/tolocar03.mdx | 4 +- src/pages/en/tolocars/tolocar04.mdx | 3 +- src/pages/en/tolocars/tolocar05.mdx | 3 +- 16 files changed, 104 insertions(+), 80 deletions(-) create mode 100644 src/assets/fa-person-from-portal.svg create mode 100644 src/components/LinkWrapper.tsx diff --git a/base.css b/base.css index 2910414f..928d38bc 100644 --- a/base.css +++ b/base.css @@ -123,11 +123,6 @@ background-position: right -10px bottom -80px; } - .background-fleet { - background-image: url("/truck.svg"); - background-size: 94.87px 75.38px; - } - .default-prose { @apply prose prose-lg prose-p:text-neutral-500 prose-li:text-neutral-500 prose-ol:text-neutral-500 prose-p:leading-7 prose-headings:font-aktiv prose-headings:font-semibold prose-strong:text-neutral-900; } diff --git a/src/assets/fa-person-from-portal.svg b/src/assets/fa-person-from-portal.svg new file mode 100644 index 00000000..e642a665 --- /dev/null +++ b/src/assets/fa-person-from-portal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx index 383a0b96..25405114 100644 --- a/src/components/CarCard.tsx +++ b/src/components/CarCard.tsx @@ -1,11 +1,11 @@ import React from "react"; import { ReactComponent as CalendarIcon } from "@assets/fa-calendar.svg"; -import { ReactComponent as MitOstIcon } from "@assets/MitOst.svg"; -import { ReactComponent as CadusIcon } from "@assets/Cadus.svg"; -import { ReactComponent as HIWWIcon } from "@assets/HIWW.svg"; -import { ReactComponent as OstrivIcon } from "@assets/Ostriv.svg"; +import { ReactComponent as MitOstLogo } from "@assets/MitOst.svg"; +import { ReactComponent as CadusLogo } from "@assets/Cadus.svg"; +import { ReactComponent as HIWWLogo } from "@assets/HIWW.svg"; +import { ReactComponent as OstrivLogo } from "@assets/Ostriv.svg"; import type { ITolocarsFrontmatter } from "@interfaces/ITolocars"; -import { Tag } from "@components"; +import { Tag, LinkWrapper } from "@components"; interface Props extends ITolocarsFrontmatter { className?: string; @@ -19,56 +19,69 @@ const CarCard: React.FC = ({ title, tags, date, - operatorIcon, + operators, car, }: Props) => { - const renderOperatorIcon = (icon) => { - const operatorIconMapping = { - mitost: MitOstIcon, - cadus: CadusIcon, - hiww: HIWWIcon, - ostriv: OstrivIcon, - default: null, + const renderOperator = (logo) => { + const operatorsMapping = { + mitost: MitOstLogo, + cadus: CadusLogo, + hiww: HIWWLogo, + ostriv: OstrivLogo, }; - - const OperatorIconComponent = operatorIconMapping[icon || "default"]; - - return ; + const OperatorComponent = operatorsMapping?.[logo]; + return OperatorComponent ? ( + + ) : null; }; - return ( -
- {href && ( - - - - )} -
- {car} -

- {title} -

- {Boolean(tags.length) && ( -
- {tags.map((tag, index) => ( - - ))} -
- )} - {date && ( -
- - {date} -
- )} - {operatorIcon && ( -
- Operated by -
{renderOperatorIcon(operatorIcon)}
-
- )} + {children}} + > +
+ +
+ {car} +

+ {title} +

+ {Boolean(tags.length) && ( +
+ {tags.map((tag, index) => ( + + ))} +
+ )} + {date && ( +
+ + {date} +
+ )} + {operators.length && ( +
+ Operated by + {operators.map((operator, index) => { + const isLastOfMultiple = + operators.length > 1 && index === operators.length - 1; + return ( + <> + {isLastOfMultiple && "&"} +
+ {renderOperator(operator)} +
+ + ); + })} +
+ )} +
-
+ ); }; diff --git a/src/components/CommunityGridCard.tsx b/src/components/CommunityGridCard.tsx index c599495f..f7e0fc04 100644 --- a/src/components/CommunityGridCard.tsx +++ b/src/components/CommunityGridCard.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { LinkWrapper } from "@components"; interface Props { className?: string; @@ -43,7 +44,4 @@ const CommunityGridCard: React.FC = ({ ); }; -const LinkWrapper = ({ condition, wrapper, children }) => - condition ? wrapper(children) : children; - export default CommunityGridCard; diff --git a/src/components/LinkWrapper.tsx b/src/components/LinkWrapper.tsx new file mode 100644 index 00000000..049af87c --- /dev/null +++ b/src/components/LinkWrapper.tsx @@ -0,0 +1,4 @@ +const LinkWrapper = ({ condition, wrapper, children }) => + condition ? wrapper(children) : children; + +export default LinkWrapper; diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index bec14cfa..eda880bb 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -4,33 +4,35 @@ import { ReactComponent as CogIcon } from "@assets/fa-cog.svg"; import { ReactComponent as HammerIcon } from "@assets/fa-hammer.svg"; import { ReactComponent as ToolboxIcon } from "@assets/fa-toolbox.svg"; import { ReactComponent as ScrewdriverIcon } from "@assets/fa-screwdriver.svg"; +import { ReactComponent as PersonIcon } from "@assets/fa-person-from-portal.svg"; interface Props { className?: string; title: string; - tagIcon?: "truck" | "hammer" | "cog" | "toolbox" | "screwdriver"; } -const Tag: React.FC = ({ className, title, tagIcon }: Props) => { +const Tag: React.FC = ({ className, title }: Props) => { const renderIcon = (icon) => { const iconMapping = { - transport: TruckIcon, - open_source: CogIcon, + "staff transport": PersonIcon, + "material transport": TruckIcon, + "open source": CogIcon, handcraft: HammerIcon, making: ToolboxIcon, renovation: ScrewdriverIcon, - default: null, }; - const IconComponent = iconMapping[icon || "default"]; - return ; + const IconComponent = iconMapping?.[icon]; + return IconComponent ? ( + + ) : null; }; return ( - {tagIcon && (title === tagIcon ? renderIcon(tagIcon) : null)} + {renderIcon(title.toLowerCase())} {title} ); diff --git a/src/components/TolocarsHeader.tsx b/src/components/TolocarsHeader.tsx index 55070abd..b54814e2 100644 --- a/src/components/TolocarsHeader.tsx +++ b/src/components/TolocarsHeader.tsx @@ -23,11 +23,11 @@ const TolocarsHeader: React.FC = ({ className, title, text }: Props) => { {text}
-
-

+
+

What is a Tolocar?

- + A Tolocar is a converted van that offers the possibilities of a makerspace or fablab on wheels. diff --git a/src/components/index.tsx b/src/components/index.tsx index f9443cef..a690de51 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -29,3 +29,4 @@ export { default as CommunityHeader } from "@components/CommunityHeader"; export { default as TolocarsHeader } from "@components/TolocarsHeader"; export { default as Tag } from "@components/Tag"; export { default as TolocarsSingleViewHeading } from "@components/TolocarsSingleViewHeading"; +export { default as LinkWrapper } from "@components/LinkWrapper"; diff --git a/src/interfaces/ITolocars.ts b/src/interfaces/ITolocars.ts index 000c782a..6ddce22b 100644 --- a/src/interfaces/ITolocars.ts +++ b/src/interfaces/ITolocars.ts @@ -2,9 +2,8 @@ export interface ITolocarsFrontmatter { title: string; subtitle?: string; date?: string; - footerGrey?: boolean; tags?: Array; - operatorIcon?: "mitost" | "cadus" | "hiww" | "ostriv"; + operators?: Array; img?: string; order?: number; car?: string; diff --git a/src/layouts/TolocarsIndex.astro b/src/layouts/TolocarsIndex.astro index 97cf29c2..84f8c25a 100644 --- a/src/layouts/TolocarsIndex.astro +++ b/src/layouts/TolocarsIndex.astro @@ -25,18 +25,19 @@ const trimmedAndSorted = trimAndSortTolocars(rawTolocarsContent); title="Our Fleet" text="Overview of our past, current and planned Tolocars" /> -
+
{ trimmedAndSorted.map((tolocar) => ( )) } diff --git a/src/pages/en/tolocars/support-vehicle01.mdx b/src/pages/en/tolocars/support-vehicle01.mdx index d3cf25f4..0cd382c9 100644 --- a/src/pages/en/tolocars/support-vehicle01.mdx +++ b/src/pages/en/tolocars/support-vehicle01.mdx @@ -7,7 +7,8 @@ tags: - Staff transport - Material transport date: January to June 2022 -operatorIcon: cadus +operators: + - cadus img: images/cars/image2.jpg order: 2 --- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar01.mdx b/src/pages/en/tolocars/tolocar01.mdx index 814aa56c..97269c44 100644 --- a/src/pages/en/tolocars/tolocar01.mdx +++ b/src/pages/en/tolocars/tolocar01.mdx @@ -7,7 +7,8 @@ tags: - Renovation - Handcraft date: January to June 2022 -operatorIcon: cadus +operators: + - cadus img: images/cars/image4.jpg order: 1 --- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar02.mdx b/src/pages/en/tolocars/tolocar02.mdx index c6327459..586b7fde 100644 --- a/src/pages/en/tolocars/tolocar02.mdx +++ b/src/pages/en/tolocars/tolocar02.mdx @@ -7,7 +7,9 @@ tags: - Making - Renovation date: June 2022 - Open End -operatorIcon: ostriv +operators: + - mitost + - ostriv img: images/cars/image3.jpg order: 3 --- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar03.mdx b/src/pages/en/tolocars/tolocar03.mdx index 6da20b11..3e763fdd 100644 --- a/src/pages/en/tolocars/tolocar03.mdx +++ b/src/pages/en/tolocars/tolocar03.mdx @@ -6,7 +6,9 @@ subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut variu tags: - Making date: September 2022 - Open End -operatorIcon: mitost +operators: + - mitost + - ostriv img: images/cars/image1.jpg order: 4 --- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar04.mdx b/src/pages/en/tolocars/tolocar04.mdx index 12a93b9b..c5caac6f 100644 --- a/src/pages/en/tolocars/tolocar04.mdx +++ b/src/pages/en/tolocars/tolocar04.mdx @@ -7,7 +7,8 @@ tags: - Making - Open source date: September 2022 - Open End -operatorIcon: hiww +operators: + - hiww img: images/cars/image5.jpg order: 5 --- \ No newline at end of file diff --git a/src/pages/en/tolocars/tolocar05.mdx b/src/pages/en/tolocars/tolocar05.mdx index 89a70074..feb39f83 100644 --- a/src/pages/en/tolocars/tolocar05.mdx +++ b/src/pages/en/tolocars/tolocar05.mdx @@ -7,7 +7,8 @@ tags: - Making - Open source date: September 2022 - Open End -operatorIcon: hiww +operators: + - hiww img: images/cars/image7.jpg order: 6 --- From 2ea99b03c6b1b0712ebeb80a73c927314ea8e7da Mon Sep 17 00:00:00 2001 From: Agustina Date: Mon, 6 Feb 2023 09:26:38 +0100 Subject: [PATCH 05/45] fix: styling tolocar header --- src/components/TolocarsHeader.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/TolocarsHeader.tsx b/src/components/TolocarsHeader.tsx index b54814e2..142fa8ce 100644 --- a/src/components/TolocarsHeader.tsx +++ b/src/components/TolocarsHeader.tsx @@ -23,19 +23,19 @@ const TolocarsHeader: React.FC = ({ className, title, text }: Props) => { {text}
-
-

+
+

What is a Tolocar?

- - - A Tolocar is a converted van that offers the possibilities of a - makerspace or fablab on wheels. - {" "} - This means they bring the capacity of high end manufacturing or - diagnosis technologies to the point of need to enable communities to - replicate some of the capabilities and so to catalyze rebuilding - efforts and establish support networks. + + A Tolocar is a converted van that offers the possibilities of a + makerspace or fablab on wheels. + + This means they bring the capacity of high end manufacturing or + diagnosis technologies to the point of need to enable communities + to replicate some of the capabilities and so to catalyze + rebuilding efforts and establish support networks. +

From 37f4eb81c4b021565090be098390860508559800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Fri, 10 Feb 2023 16:12:28 +0100 Subject: [PATCH 06/45] fix: build errors --- src/components/CarCard.tsx | 4 ++-- src/components/index.tsx | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx index 25405114..ea4bf755 100644 --- a/src/components/CarCard.tsx +++ b/src/components/CarCard.tsx @@ -46,7 +46,7 @@ const CarCard: React.FC = ({

{title}

- {Boolean(tags.length) && ( + {Boolean(tags?.length) && (
{tags.map((tag, index) => ( @@ -59,7 +59,7 @@ const CarCard: React.FC = ({ {date}
)} - {operators.length && ( + {Boolean(operators?.length) && (
Operated by {operators.map((operator, index) => { diff --git a/src/components/index.tsx b/src/components/index.tsx index 1d5d7f85..05f04b54 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -27,3 +27,7 @@ export { default as CommunityBanner } from "@components/CommunityBanner"; export { default as CommunityGridCard } from "@components/CommunityGridCard"; export { default as CommunityHeader } from "@components/CommunityHeader"; export { default as LanguageSwitcher } from "@components/LanguageSwitcher"; +export { default as LinkWrapper } from "@components/LinkWrapper"; +export { default as Tag } from "@components/Tag"; +export { default as TolocarsHeader } from "@components/TolocarsHeader"; +export { default as TolocarsSingleViewHeading } from "@components/TolocarsSingleViewHeading"; From 6ab68d04e4571b07fbd6cbfba3f27b0f613a7ae1 Mon Sep 17 00:00:00 2001 From: Agustina Date: Tue, 14 Feb 2023 17:17:27 +0100 Subject: [PATCH 07/45] fix: tolocar banner, car cards grid styling --- src/components/CarCard.tsx | 6 ++++-- src/components/TolocarsHeader.tsx | 6 +++--- src/layouts/TolocarsIndex.astro | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx index ea4bf755..3df4c028 100644 --- a/src/components/CarCard.tsx +++ b/src/components/CarCard.tsx @@ -40,9 +40,11 @@ const CarCard: React.FC = ({ wrapper={(children) => {children}} >
- +
- {car} + + {car} +

{title}

diff --git a/src/components/TolocarsHeader.tsx b/src/components/TolocarsHeader.tsx index 142fa8ce..695d35f3 100644 --- a/src/components/TolocarsHeader.tsx +++ b/src/components/TolocarsHeader.tsx @@ -10,7 +10,7 @@ interface Props { const TolocarsHeader: React.FC = ({ className, title, text }: Props) => { return (
@@ -19,11 +19,11 @@ const TolocarsHeader: React.FC = ({ className, title, text }: Props) => { {title} -
+
{text}
-
+

What is a Tolocar?

diff --git a/src/layouts/TolocarsIndex.astro b/src/layouts/TolocarsIndex.astro index 84f8c25a..5aab21e2 100644 --- a/src/layouts/TolocarsIndex.astro +++ b/src/layouts/TolocarsIndex.astro @@ -25,7 +25,7 @@ const trimmedAndSorted = trimAndSortTolocars(rawTolocarsContent); title="Our Fleet" text="Overview of our past, current and planned Tolocars" /> -
+
{ trimmedAndSorted.map((tolocar) => ( From 7c6e1f056ba753084a0255d9fecaaac2c3334951 Mon Sep 17 00:00:00 2001 From: Anna2608 <132374175+Anna2608@users.noreply.github.com> Date: Mon, 15 May 2023 16:51:01 +0200 Subject: [PATCH 08/45] Delete tolocar02.mdx #TC2 no license plate --- src/pages/en/tolocars/tolocar02.mdx | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 src/pages/en/tolocars/tolocar02.mdx diff --git a/src/pages/en/tolocars/tolocar02.mdx b/src/pages/en/tolocars/tolocar02.mdx deleted file mode 100644 index 586b7fde..00000000 --- a/src/pages/en/tolocars/tolocar02.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: "@layouts/TolocarsSingleView.astro" -title: The MitOst Sprinter I -car: Tolocar 02 -subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id -tags: - - Making - - Renovation -date: June 2022 - Open End -operators: - - mitost - - ostriv -img: images/cars/image3.jpg -order: 3 ---- \ No newline at end of file From c841b8efa4fafc867be9c8d53c9ab666ce754129 Mon Sep 17 00:00:00 2001 From: Anna2608 <132374175+Anna2608@users.noreply.github.com> Date: Mon, 15 May 2023 16:52:39 +0200 Subject: [PATCH 09/45] Delete tolocar01.mdx The Cadus Crafter --- src/pages/en/tolocars/tolocar01.mdx | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 src/pages/en/tolocars/tolocar01.mdx diff --git a/src/pages/en/tolocars/tolocar01.mdx b/src/pages/en/tolocars/tolocar01.mdx deleted file mode 100644 index 97269c44..00000000 --- a/src/pages/en/tolocars/tolocar01.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: "@layouts/TolocarsSingleView.astro" -title: The Cadus Crafter -car: Tolocar 01 -subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id -tags: - - Renovation - - Handcraft -date: January to June 2022 -operators: - - cadus -img: images/cars/image4.jpg -order: 1 ---- \ No newline at end of file From 75fd509f22504ee4cd0cac530b03c4798407a66f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Thu, 9 Feb 2023 19:45:45 +0100 Subject: [PATCH 10/45] fix: close menu on resize (#88) --- src/components/Navigation.tsx | 18 ++++++++++++++++-- src/layouts/BaseLayout.astro | 2 +- src/util/useCurrentWidth.tsx | 36 +++++++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 src/util/useCurrentWidth.tsx diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index d7dd15ed..9d97bde7 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -3,6 +3,7 @@ import { ReactComponent as TolocarLogoSvg } from "@assets/tolocar_logo.svg"; import { ReactComponent as ArrowIcon } from "@assets/arrow.svg"; import type { IMenuItem } from "@interfaces/IMenu"; import { LanguageSwitcher } from "@components"; +import useCurrentWidth from "@util/useCurrentWidth"; interface Props { className?: string; @@ -28,6 +29,14 @@ const Navigation: React.FC = ({ const [hasWhiteBackground, setHasWhiteBackground] = useState(false); + const width = useCurrentWidth(); + + useEffect(() => { + if (width > 768) { + setShowOverlayMenu(false); + } + }, [width]); + useEffect(() => { const changeBackgroundColor = (e) => { setHasWhiteBackground(e.target.scrollTop > scrollThreshold); @@ -118,7 +127,12 @@ const Navigation: React.FC = ({ menu={menu} /> {showOverlayMenu && ( -
+
{ + setShowOverlayMenu(false); + }} + className="fixed top-0 left-0 w-full h-full md:hidden bg-black/60" + /> )}
@@ -218,7 +232,7 @@ const OverlayMenu: React.FC = ({ return (
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 836b7b27..e0ad9d32 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -65,7 +65,7 @@ const isProduction = import.meta.env.MODE === "production"; menu={menu} locale={localeFromUrl} dark={frontmatter?.darkNavigation || false} - client:load + client:only="react" />