- 
-
@@ -77,26 +72,7 @@ import {
-
-
-
- {subtitle}
+
-
- {subtitle}
+ {children}}
+ >
+
+
+
+
+ {car}
-
- {title}
-
-
- {tagIcon && renderIcon(tagIcon)}
- {tag}
-
-
-
+ {title}
+
+ {Boolean(tags?.length) && (
+
+ {tags.map((tag, index) => (
+
+ {isLastOfMultiple && "&"}
+
+ {renderOperator(operator)}
+
+
+ );
+ })}
+
+ )}
-
+
);
};
diff --git a/src/components/CommunityGridCard.tsx b/src/components/CommunityGridCard.tsx
index 2b495399..e4a26af9 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;
@@ -54,7 +55,4 @@ const CommunityGridCard: React.FC = ({
);
};
-const LinkWrapper = ({ condition, wrapper, children }) =>
- condition ? wrapper(children) : children;
-
export default CommunityGridCard;
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/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
new file mode 100644
index 00000000..eda880bb
--- /dev/null
+++ b/src/components/Tag.tsx
@@ -0,0 +1,41 @@
+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";
+import { ReactComponent as PersonIcon } from "@assets/fa-person-from-portal.svg";
+
+interface Props {
+ className?: string;
+ title: string;
+}
+
+const Tag: React.FC = ({ className, title }: Props) => {
+ const renderIcon = (icon) => {
+ const iconMapping = {
+ "staff transport": PersonIcon,
+ "material transport": TruckIcon,
+ "open source": CogIcon,
+ handcraft: HammerIcon,
+ making: ToolboxIcon,
+ renovation: ScrewdriverIcon,
+ };
+ const IconComponent = iconMapping?.[icon];
+ return IconComponent ? (
+ = ({ 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/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}
+
+ )}
+
+ )}
+
+
+
+ );
+};
+
+export default TolocarsSingleViewHeading;
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";
diff --git a/src/interfaces/ITolocars.ts b/src/interfaces/ITolocars.ts
new file mode 100644
index 00000000..6ddce22b
--- /dev/null
+++ b/src/interfaces/ITolocars.ts
@@ -0,0 +1,10 @@
+export interface ITolocarsFrontmatter {
+ title: string;
+ subtitle?: string;
+ date?: string;
+ tags?: Array;
+ operators?: Array;
+ img?: string;
+ order?: number;
+ car?: string;
+}
diff --git a/src/layouts/TolocarsIndex.astro b/src/layouts/TolocarsIndex.astro
new file mode 100644
index 00000000..5aab21e2
--- /dev/null
+++ b/src/layouts/TolocarsIndex.astro
@@ -0,0 +1,68 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+import { ITolocarsFrontmatter } from "@interfaces/ITolocars";
+import {
+ TolocarsHeader,
+ CarCard,
+ ContentSection,
+ Card,
+ CardContainer,
+} from "@components";
+import { trimAndSortTolocars } from "@util/ContentTransformer";
+
+const { frontmatter, url, file, headings } = Astro.props;
+
+const rawTolocarsContent = await Astro.glob(
+ "../pages/en/tolocars/*.mdx"
+);
+
+const trimmedAndSorted = trimAndSortTolocars(rawTolocarsContent);
+---
+
+
+
+
+
+ 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/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/_menu.mdx b/src/pages/en/_menu.mdx
index 3bde0333..531e4238 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 2aa0e391..2a3fca4f 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 */}
- {/*
-
- Discover our fleet
-
+ The aim is to enable communities to replicate some of the capabilities and so to catalyze rebuilding efforts and establish support networks.
+
+
+
+
+
+ {car}
-
- {title} - -
- - {title} - -
- {tagIcon && renderIcon(tagIcon)}
- {tag}
-
-
-
+ {title} +
+ {Boolean(tags?.length) && ( +
+ {tags.map((tag, index) => (
+
+ )}
+ {date && (
+
+
+ )}
+ {Boolean(operators?.length) && (
+
+ Operated by
+ {operators.map((operator, index) => {
+ const isLastOfMultiple =
+ operators.length > 1 && index === operators.length - 1;
+ return (
+
+ {isLastOfMultiple && "&"}
+
+ );
+ })}
+
+ )}
+ {renderOperator(operator)}
+
+
+
+ );
+};
+
+export default TolocarsHeader;
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
+
+
+
+ {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. + + +
+ {title && (
+
+
+ );
+};
+
+export default TolocarsSingleViewHeading;
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";
diff --git a/src/interfaces/ITolocars.ts b/src/interfaces/ITolocars.ts
new file mode 100644
index 00000000..6ddce22b
--- /dev/null
+++ b/src/interfaces/ITolocars.ts
@@ -0,0 +1,10 @@
+export interface ITolocarsFrontmatter {
+ title: string;
+ subtitle?: string;
+ date?: string;
+ tags?: Array+ {title} + {subtitle && ( + + {subtitle} + + )} +
+ )} + +
+
+
+ {
+ trimmedAndSorted.map((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**. 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 */}
- {/* - 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
-
*/}
+ 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.
+
+ The aim is to enable communities to replicate some of the capabilities and so to catalyze rebuilding efforts and establish support networks.
+
-
-
-
-
-
- Our fleet
-Overview of all our past, current and planned Tolocars
-
-
-
diff --git a/src/pages/en/tolocars/index.mdx b/src/pages/en/tolocars/index.mdx
new file mode 100644
index 00000000..7e9aed12
--- /dev/null
+++ b/src/pages/en/tolocars/index.mdx
@@ -0,0 +1,6 @@
+---
+layout: "@layouts/TolocarsIndex.astro"
+title: Tolocars
+darkNavigation: true
+footerGrey: true
+---
diff --git a/src/pages/en/tolocars/support-vehicle01.mdx b/src/pages/en/tolocars/support-vehicle01.mdx
new file mode 100644
index 00000000..0cd382c9
--- /dev/null
+++ b/src/pages/en/tolocars/support-vehicle01.mdx
@@ -0,0 +1,14 @@
+---
+layout: "@layouts/TolocarsSingleView.astro"
+title: The Cadus Supporter
+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
+date: January to June 2022
+operators:
+ - cadus
+img: images/cars/image2.jpg
+order: 2
+---
\ 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..e50c753f
--- /dev/null
+++ b/src/pages/en/tolocars/tolocar03.mdx
@@ -0,0 +1,13 @@
+---
+layout: "@layouts/TolocarsSingleView.astro"
+title: The MitOst Sprinter II
+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
+operators:
+ - hiww
+img: images/cars/image1.jpg
+order: 4
+---
diff --git a/src/pages/en/tolocars/tolocar04.mdx b/src/pages/en/tolocars/tolocar04.mdx
new file mode 100644
index 00000000..c5caac6f
--- /dev/null
+++ b/src/pages/en/tolocars/tolocar04.mdx
@@ -0,0 +1,14 @@
+---
+layout: "@layouts/TolocarsSingleView.astro"
+title: The HIWW Van
+car: Tolocar 04
+subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id
+tags:
+ - Making
+ - Open source
+date: September 2022 - Open End
+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
new file mode 100644
index 00000000..feb39f83
--- /dev/null
+++ b/src/pages/en/tolocars/tolocar05.mdx
@@ -0,0 +1,22 @@
+---
+layout: "@layouts/TolocarsSingleView.astro"
+title: The HIWW Truck
+car: Tolocar 05
+subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu ut varius vulputate eget curabitur sagittis, id
+tags:
+ - Making
+ - Open source
+date: September 2022 - Open End
+operators:
+ - hiww
+img: images/cars/image7.jpg
+order: 6
+---
+
+## Introduction
+
+## Security measures
+
+## Setting up the software
+
+## Subheadline
\ 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;
+}
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: {