From 216cbe8e8cb69aef4604eb0ffa76c5ac35520973 Mon Sep 17 00:00:00 2001 From: Agustina Date: Tue, 7 Feb 2023 17:13:38 +0100 Subject: [PATCH 1/6] feat: projects index --- base.css | 10 ++++- public/tolocar_illustration_projects.svg | 36 ++++++++++++++++ src/assets/arrow-up.svg | 3 ++ src/components/LinkWrapper.tsx | 4 ++ src/components/ProjectCard.tsx | 44 ++++++++++++++++++++ src/components/ProjectsHeader.tsx | 29 +++++++++++++ src/components/index.tsx | 3 ++ src/interfaces/IProjects.ts | 6 +++ src/layouts/ProjectsIndex.astro | 53 ++++++++++++++++++++++++ src/pages/en/_menu.mdx | 3 ++ src/pages/en/projects/anderesbike.mdx | 6 +++ src/pages/en/projects/index.mdx | 6 +++ src/pages/en/projects/project4.mdx | 6 +++ src/pages/en/projects/projekt1.mdx | 6 +++ src/pages/en/projects/projekt435.mdx | 6 +++ src/pages/en/projects/xyzcargobike.mdx | 6 +++ src/pages/en/projects/xyzcargobike2.mdx | 6 +++ src/util/ContentTransformer.ts | 16 +++++++ tailwind.config.cjs | 3 +- 19 files changed, 250 insertions(+), 2 deletions(-) create mode 100644 public/tolocar_illustration_projects.svg create mode 100644 src/assets/arrow-up.svg create mode 100644 src/components/LinkWrapper.tsx create mode 100644 src/components/ProjectCard.tsx create mode 100644 src/components/ProjectsHeader.tsx create mode 100644 src/interfaces/IProjects.ts create mode 100644 src/layouts/ProjectsIndex.astro create mode 100644 src/pages/en/projects/anderesbike.mdx create mode 100644 src/pages/en/projects/index.mdx create mode 100644 src/pages/en/projects/project4.mdx create mode 100644 src/pages/en/projects/projekt1.mdx create mode 100644 src/pages/en/projects/projekt435.mdx create mode 100644 src/pages/en/projects/xyzcargobike.mdx create mode 100644 src/pages/en/projects/xyzcargobike2.mdx diff --git a/base.css b/base.css index b11ca71e..0cd8837a 100644 --- a/base.css +++ b/base.css @@ -127,8 +127,16 @@ @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; } - body :is(h1,h2,h3,h4,h5,h5) { + body :is(h1, h2, h3, h4, h5, h5) { @apply tracking-[-0.03em]; } + .projects-gradient { + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.217) 40.39%, + rgba(0, 0, 0, 0.7) 74.77% + ); + } } diff --git a/public/tolocar_illustration_projects.svg b/public/tolocar_illustration_projects.svg new file mode 100644 index 00000000..4b0d339b --- /dev/null +++ b/public/tolocar_illustration_projects.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/arrow-up.svg b/src/assets/arrow-up.svg new file mode 100644 index 00000000..53ad921f --- /dev/null +++ b/src/assets/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/LinkWrapper.tsx b/src/components/LinkWrapper.tsx new file mode 100644 index 00000000..8013bb24 --- /dev/null +++ b/src/components/LinkWrapper.tsx @@ -0,0 +1,4 @@ +const LinkWrapper = ({ condition, wrapper, children }) => + condition ? wrapper(children) : children; + +export default LinkWrapper; \ No newline at end of file diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx new file mode 100644 index 00000000..7c857744 --- /dev/null +++ b/src/components/ProjectCard.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import type { IProjectsFrontmatter } from "@interfaces/IProjects"; +import { ReactComponent as ArrowUpIcon } from "@assets/arrow-up.svg"; +import { LinkWrapper } from "@components"; + +interface Props extends IProjectsFrontmatter { + className?: string; + href?: string; +} + +const ProjectCard: React.FC = ({ + className, + title, + img, + teaser, + href, +}) => { + return ( + {children}} + > +
+ Project photo +
+
+ {title && ( +

+ {title} + +

+ )} + {teaser &&

{teaser}

} +
+
+ + ); +}; + +export default ProjectCard; diff --git a/src/components/ProjectsHeader.tsx b/src/components/ProjectsHeader.tsx new file mode 100644 index 00000000..709d6e94 --- /dev/null +++ b/src/components/ProjectsHeader.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { HeadlineUnderlined } from "@components"; + +interface Props { + className?: string; + title?: string; + text?: string; +} + +const ProjectsHeader: React.FC = ({ className, title, text }: Props) => { + return ( +
+
+ + {title} + +
+ {text} +
+
+
+ ); +}; + +export default ProjectsHeader; diff --git a/src/components/index.tsx b/src/components/index.tsx index 7c2be5cb..ed0d51b3 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -26,3 +26,6 @@ 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 ProjectsHeader } from "@components/ProjectsHeader"; +export { default as ProjectCard } from "@components/ProjectCard"; +export { default as LinkWrapper } from "@components/LinkWrapper"; diff --git a/src/interfaces/IProjects.ts b/src/interfaces/IProjects.ts new file mode 100644 index 00000000..1c5ff697 --- /dev/null +++ b/src/interfaces/IProjects.ts @@ -0,0 +1,6 @@ +export interface IProjectsFrontmatter { + title: string; + teaser?: string; + img?: string; + order?: number; + } \ No newline at end of file diff --git a/src/layouts/ProjectsIndex.astro b/src/layouts/ProjectsIndex.astro new file mode 100644 index 00000000..4e87df4d --- /dev/null +++ b/src/layouts/ProjectsIndex.astro @@ -0,0 +1,53 @@ +--- +import BaseLayout from "./BaseLayout.astro"; +import { IProjectsFrontmatter } from "@interfaces/IProjects"; +import { + ProjectsHeader, + ProjectCard, + ContentSection, + WideCard, +} from "@components"; +import { trimAndSortProjects } from "@util/ContentTransformer"; + +const { frontmatter, url, file, headings } = Astro.props; +const rawProjectsContent = await Astro.glob( + "../pages/en/projects/*.mdx" +); +const trimmedAndSorted = trimAndSortProjects(rawProjectsContent); +--- + + + +
+
+ { + trimmedAndSorted.map((project) => ( + + )) + } +
+
+ + +
+ + diff --git a/src/pages/en/_menu.mdx b/src/pages/en/_menu.mdx index 41ba29f5..2c00e8f7 100644 --- a/src/pages/en/_menu.mdx +++ b/src/pages/en/_menu.mdx @@ -7,6 +7,9 @@ menu: - title: What is a Tolocar? target: "/en/#what-is-a-tolocar" + - title: Projects + target: "/en/projects" + - title: Community target: "/en/community" diff --git a/src/pages/en/projects/anderesbike.mdx b/src/pages/en/projects/anderesbike.mdx new file mode 100644 index 00000000..a6f0919d --- /dev/null +++ b/src/pages/en/projects/anderesbike.mdx @@ -0,0 +1,6 @@ +--- +title: Anderes Bike +img: https://source.unsplash.com/random/1980×1080 +order: 3 +teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. +--- \ No newline at end of file diff --git a/src/pages/en/projects/index.mdx b/src/pages/en/projects/index.mdx new file mode 100644 index 00000000..5dca6185 --- /dev/null +++ b/src/pages/en/projects/index.mdx @@ -0,0 +1,6 @@ +--- +layout: "@layouts/ProjectsIndex.astro" +title: Projects +darkNavigation: true +footerGrey: true +--- \ No newline at end of file diff --git a/src/pages/en/projects/project4.mdx b/src/pages/en/projects/project4.mdx new file mode 100644 index 00000000..b9f4e968 --- /dev/null +++ b/src/pages/en/projects/project4.mdx @@ -0,0 +1,6 @@ +--- +title: Projekt 4 +img: https://source.unsplash.com/random/550×720 +order: 4 +teaser: Lorem ipsum +--- \ No newline at end of file diff --git a/src/pages/en/projects/projekt1.mdx b/src/pages/en/projects/projekt1.mdx new file mode 100644 index 00000000..ac651027 --- /dev/null +++ b/src/pages/en/projects/projekt1.mdx @@ -0,0 +1,6 @@ +--- +title: Projekt 1 +img: https://source.unsplash.com/random/1280×720 +order: 2 +teaser: Lorem ipsum +--- \ No newline at end of file diff --git a/src/pages/en/projects/projekt435.mdx b/src/pages/en/projects/projekt435.mdx new file mode 100644 index 00000000..800c64ef --- /dev/null +++ b/src/pages/en/projects/projekt435.mdx @@ -0,0 +1,6 @@ +--- +title: Projekt 435 +img: https://source.unsplash.com/random/1080×720 +order: 6 +teaser: Lorem ipsum +--- \ No newline at end of file diff --git a/src/pages/en/projects/xyzcargobike.mdx b/src/pages/en/projects/xyzcargobike.mdx new file mode 100644 index 00000000..ec016bec --- /dev/null +++ b/src/pages/en/projects/xyzcargobike.mdx @@ -0,0 +1,6 @@ +--- +title: XYZ Cargobike +img: https://source.unsplash.com/random/800×600 +order: 1 +teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. +--- diff --git a/src/pages/en/projects/xyzcargobike2.mdx b/src/pages/en/projects/xyzcargobike2.mdx new file mode 100644 index 00000000..534202fa --- /dev/null +++ b/src/pages/en/projects/xyzcargobike2.mdx @@ -0,0 +1,6 @@ +--- +title: XYZ Cargobike +img: https://source.unsplash.com/random/1200×675 +order: 5 +teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. +--- \ No newline at end of file diff --git a/src/util/ContentTransformer.ts b/src/util/ContentTransformer.ts index ddf7ae91..a431f285 100644 --- a/src/util/ContentTransformer.ts +++ b/src/util/ContentTransformer.ts @@ -3,6 +3,7 @@ import type { AcademyPageFrontmatter, } from "@interfaces/IAcademy"; import type { MDXInstance } from "astro"; +import type { IProjectsFrontmatter } from "@interfaces/IProjects"; export function flatAcademyContentMap( rawAcademyContent: MDXInstance[] @@ -66,3 +67,18 @@ export function transformAcademy(rawAcademyContent) { return coursesAndLessons; } + +export function trimAndSortProjects( + rawProjectsContent: MDXInstance[], + count?: number +) { + const rawSortedProjectsContentWithoutIndex = rawProjectsContent + .filter((project) => !project.file.includes("index.mdx")) + .sort((a, b) => a.frontmatter.order - b.frontmatter.order); + + const trimmedProjects = count + ? rawSortedProjectsContentWithoutIndex.slice(0, count) + : rawSortedProjectsContentWithoutIndex; + + return trimmedProjects; +} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index c8b56a24..09159715 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-projects": "url('/tolocar_illustration_projects.svg')", }, }, colors: { From 7b9f26d98a86b9ace0310c191786bf59ce50d39b Mon Sep 17 00:00:00 2001 From: Agustina Date: Wed, 8 Feb 2023 10:10:59 +0100 Subject: [PATCH 2/6] feat: projects single view --- src/components/ProjectsHeroImage.tsx | 35 +++++++++ src/components/TableOfContents.tsx | 7 +- src/components/index.tsx | 1 + src/layouts/ProjectsIndex.astro | 3 +- src/layouts/ProjectsSingleView.astro | 99 +++++++++++++++++++++++++ src/pages/en/projects/anderesbike.mdx | 15 +++- src/pages/en/projects/project4.mdx | 15 +++- src/pages/en/projects/projekt1.mdx | 15 +++- src/pages/en/projects/projekt435.mdx | 15 +++- src/pages/en/projects/xyzcargobike.mdx | 13 ++++ src/pages/en/projects/xyzcargobike2.mdx | 15 +++- 11 files changed, 223 insertions(+), 10 deletions(-) create mode 100644 src/components/ProjectsHeroImage.tsx create mode 100644 src/layouts/ProjectsSingleView.astro diff --git a/src/components/ProjectsHeroImage.tsx b/src/components/ProjectsHeroImage.tsx new file mode 100644 index 00000000..c7fb0633 --- /dev/null +++ b/src/components/ProjectsHeroImage.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import type { IProjectsFrontmatter } from "@interfaces/IProjects"; + +interface Props extends IProjectsFrontmatter { + className?: string; +} + +const ProjectsHeroImage: React.FC = ({ + className, + title, + teaser, + img, +}: Props) => { + return ( +
+
+

+ {title} +

+ {teaser && ( +

+ {teaser} +

+ )} +
+
+ ); +}; + +export default ProjectsHeroImage; diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx index fd3cafe4..e34966a1 100644 --- a/src/components/TableOfContents.tsx +++ b/src/components/TableOfContents.tsx @@ -1,11 +1,10 @@ -import type { MarkdownHeading } from 'astro'; +import type { MarkdownHeading } from "astro"; interface Props { title: string; headlines: Array; } - const buildTocList = (input: Array) => { // Create a ordered list of depth and remove duplicates let map = new Map( @@ -37,7 +36,9 @@ const TableOfContents: React.FC = ({ title, headlines }) => { const leftPadding = paddingMapping[headline.depth]; return (
  • - {headline.text} + + {headline.text} +
    • ); })} diff --git a/src/components/index.tsx b/src/components/index.tsx index ed0d51b3..a0e3432d 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 ProjectsHeader } from "@components/ProjectsHeader"; export { default as ProjectCard } from "@components/ProjectCard"; export { default as LinkWrapper } from "@components/LinkWrapper"; +export { default as ProjectsHeroImage } from "@components/ProjectsHeroImage"; diff --git a/src/layouts/ProjectsIndex.astro b/src/layouts/ProjectsIndex.astro index 4e87df4d..e62349ff 100644 --- a/src/layouts/ProjectsIndex.astro +++ b/src/layouts/ProjectsIndex.astro @@ -27,8 +27,7 @@ const trimmedAndSorted = trimAndSortProjects(rawProjectsContent); { trimmedAndSorted.map((project) => ( ( + "../pages/en/projects/*.mdx" +); + +const baseUrl = CommonUtils.getBaseUrl(false); +const { frontmatter, url, file, headings } = Astro.props; + +const statsMtime = fs.statSync(file).mtime; +const editDate = new Date(statsMtime); + +const parentPage = getParentPage(rawProjectsContent, url); +--- + + +
    + Back to Project Overview +
    +
    + +
    +
    +
    + +
    + Last updated
    + { + editDate.toLocaleDateString("en", { + timeZone: "Europe/Berlin", + day: "numeric", + month: "long", + year: "numeric", + }) + } + +
    +
    +
    + +
    +
    + {!frontmatter.disableComments && } + + +
    +
    + + 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/projects/anderesbike.mdx b/src/pages/en/projects/anderesbike.mdx index a6f0919d..d8ce9d32 100644 --- a/src/pages/en/projects/anderesbike.mdx +++ b/src/pages/en/projects/anderesbike.mdx @@ -3,4 +3,17 @@ title: Anderes Bike img: https://source.unsplash.com/random/1980×1080 order: 3 teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. ---- \ No newline at end of file +layout: "@layouts/ProjectsSingleView.astro" +--- + +## Introduction + +In this part you'll learn how a 3D FDM printer works, the different types of FDM printers and the applications 3D printing is used for. + +GitHub Pages has access to your HTTP request, the website request required to view this website or any other website. This request includes your IP address and a user agent, a string with the name of your browser and the version you are using. + +## Security measures + +## Setting up the software + +### Subheadline \ No newline at end of file diff --git a/src/pages/en/projects/project4.mdx b/src/pages/en/projects/project4.mdx index b9f4e968..040f669e 100644 --- a/src/pages/en/projects/project4.mdx +++ b/src/pages/en/projects/project4.mdx @@ -3,4 +3,17 @@ title: Projekt 4 img: https://source.unsplash.com/random/550×720 order: 4 teaser: Lorem ipsum ---- \ No newline at end of file +layout: "@layouts/ProjectsSingleView.astro" +--- + +## Introduction + +In this part you'll learn how a 3D FDM printer works, the different types of FDM printers and the applications 3D printing is used for. + +GitHub Pages has access to your HTTP request, the website request required to view this website or any other website. This request includes your IP address and a user agent, a string with the name of your browser and the version you are using. + +## Security measures + +## Setting up the software + +### Subheadline \ No newline at end of file diff --git a/src/pages/en/projects/projekt1.mdx b/src/pages/en/projects/projekt1.mdx index ac651027..a7496d3f 100644 --- a/src/pages/en/projects/projekt1.mdx +++ b/src/pages/en/projects/projekt1.mdx @@ -3,4 +3,17 @@ title: Projekt 1 img: https://source.unsplash.com/random/1280×720 order: 2 teaser: Lorem ipsum ---- \ No newline at end of file +layout: "@layouts/ProjectsSingleView.astro" +--- + +## Introduction + +In this part you'll learn how a 3D FDM printer works, the different types of FDM printers and the applications 3D printing is used for. + +GitHub Pages has access to your HTTP request, the website request required to view this website or any other website. This request includes your IP address and a user agent, a string with the name of your browser and the version you are using. + +## Security measures + +## Setting up the software + +### Subheadline \ No newline at end of file diff --git a/src/pages/en/projects/projekt435.mdx b/src/pages/en/projects/projekt435.mdx index 800c64ef..8d50593f 100644 --- a/src/pages/en/projects/projekt435.mdx +++ b/src/pages/en/projects/projekt435.mdx @@ -3,4 +3,17 @@ title: Projekt 435 img: https://source.unsplash.com/random/1080×720 order: 6 teaser: Lorem ipsum ---- \ No newline at end of file +layout: "@layouts/ProjectsSingleView.astro" +--- + +## Introduction + +In this part you'll learn how a 3D FDM printer works, the different types of FDM printers and the applications 3D printing is used for. + +GitHub Pages has access to your HTTP request, the website request required to view this website or any other website. This request includes your IP address and a user agent, a string with the name of your browser and the version you are using. + +## Security measures + +## Setting up the software + +### Subheadline \ No newline at end of file diff --git a/src/pages/en/projects/xyzcargobike.mdx b/src/pages/en/projects/xyzcargobike.mdx index ec016bec..48683a27 100644 --- a/src/pages/en/projects/xyzcargobike.mdx +++ b/src/pages/en/projects/xyzcargobike.mdx @@ -3,4 +3,17 @@ title: XYZ Cargobike img: https://source.unsplash.com/random/800×600 order: 1 teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. +layout: "@layouts/ProjectsSingleView.astro" --- + +## Introduction + +In this part you'll learn how a 3D FDM printer works, the different types of FDM printers and the applications 3D printing is used for. + +GitHub Pages has access to your HTTP request, the website request required to view this website or any other website. This request includes your IP address and a user agent, a string with the name of your browser and the version you are using. + +## Security measures + +## Setting up the software + +### Subheadline \ No newline at end of file diff --git a/src/pages/en/projects/xyzcargobike2.mdx b/src/pages/en/projects/xyzcargobike2.mdx index 534202fa..3416ebc9 100644 --- a/src/pages/en/projects/xyzcargobike2.mdx +++ b/src/pages/en/projects/xyzcargobike2.mdx @@ -3,4 +3,17 @@ title: XYZ Cargobike img: https://source.unsplash.com/random/1200×675 order: 5 teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. ---- \ No newline at end of file +layout: "@layouts/ProjectsSingleView.astro" +--- + +## Introduction + +In this part you'll learn how a 3D FDM printer works, the different types of FDM printers and the applications 3D printing is used for. + +GitHub Pages has access to your HTTP request, the website request required to view this website or any other website. This request includes your IP address and a user agent, a string with the name of your browser and the version you are using. + +## Security measures + +## Setting up the software + +### Subheadline \ No newline at end of file From 8e096008084921c506ad4774acc57d3ac167fb34 Mon Sep 17 00:00:00 2001 From: Agustina Date: Fri, 10 Feb 2023 16:24:47 +0100 Subject: [PATCH 3/6] fix: update conditional link wrapper component --- src/components/CommunityGridCard.tsx | 8 +++----- src/components/ConditionalLinkWrapper.tsx | 4 ++++ src/components/LinkWrapper.tsx | 4 ---- src/components/ProjectCard.tsx | 6 +++--- src/components/index.tsx | 2 +- 5 files changed, 11 insertions(+), 13 deletions(-) create mode 100644 src/components/ConditionalLinkWrapper.tsx delete mode 100644 src/components/LinkWrapper.tsx diff --git a/src/components/CommunityGridCard.tsx b/src/components/CommunityGridCard.tsx index c599495f..120ba0b0 100644 --- a/src/components/CommunityGridCard.tsx +++ b/src/components/CommunityGridCard.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { ConditionalLinkWrapper } from "@components"; interface Props { className?: string; @@ -15,7 +16,7 @@ const CommunityGridCard: React.FC = ({ }: Props) => { return (
    -     + ); }; -const LinkWrapper = ({ condition, wrapper, children }) => - condition ? wrapper(children) : children; - export default CommunityGridCard; diff --git a/src/components/ConditionalLinkWrapper.tsx b/src/components/ConditionalLinkWrapper.tsx new file mode 100644 index 00000000..4e381687 --- /dev/null +++ b/src/components/ConditionalLinkWrapper.tsx @@ -0,0 +1,4 @@ +const ConditionalLinkWrapper = ({ condition, wrapper, children }) => + condition ? wrapper(children) : children; + +export default ConditionalLinkWrapper; diff --git a/src/components/LinkWrapper.tsx b/src/components/LinkWrapper.tsx deleted file mode 100644 index 8013bb24..00000000 --- a/src/components/LinkWrapper.tsx +++ /dev/null @@ -1,4 +0,0 @@ -const LinkWrapper = ({ condition, wrapper, children }) => - condition ? wrapper(children) : children; - -export default LinkWrapper; \ No newline at end of file diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx index 7c857744..acf25637 100644 --- a/src/components/ProjectCard.tsx +++ b/src/components/ProjectCard.tsx @@ -1,7 +1,7 @@ import React from "react"; import type { IProjectsFrontmatter } from "@interfaces/IProjects"; import { ReactComponent as ArrowUpIcon } from "@assets/arrow-up.svg"; -import { LinkWrapper } from "@components"; +import { ConditionalLinkWrapper } from "@components"; interface Props extends IProjectsFrontmatter { className?: string; @@ -16,7 +16,7 @@ const ProjectCard: React.FC = ({ href, }) => { return ( - {children}} > @@ -37,7 +37,7 @@ const ProjectCard: React.FC = ({ {teaser &&

    {teaser}

    } - + ); }; diff --git a/src/components/index.tsx b/src/components/index.tsx index 9e1ef744..f3e72474 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -28,6 +28,6 @@ export { default as CommunityGridCard } from "@components/CommunityGridCard"; export { default as CommunityHeader } from "@components/CommunityHeader"; export { default as ProjectsHeader } from "@components/ProjectsHeader"; export { default as ProjectCard } from "@components/ProjectCard"; -export { default as LinkWrapper } from "@components/LinkWrapper"; +export { default as ConditionalLinkWrapper } from "@components/ConditionalLinkWrapper"; export { default as ProjectsHeroImage } from "@components/ProjectsHeroImage"; export { default as LanguageSwitcher } from "@components/LanguageSwitcher"; From 4c2a2f8c6feca040b322798ede58c9b176954405 Mon Sep 17 00:00:00 2001 From: Agustina Date: Fri, 10 Feb 2023 17:32:00 +0100 Subject: [PATCH 4/6] feat: projects section in homepage --- src/components/ButtonLink.tsx | 3 +- src/components/ProjectsSection.astro | 55 ++++++++++++++++++++++++++++ src/components/index.tsx | 1 + src/pages/en/index.mdx | 7 +++- src/util/ContentTransformer.ts | 2 +- 5 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 src/components/ProjectsSection.astro diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index dfa7e14c..bae2a191 100644 --- a/src/components/ButtonLink.tsx +++ b/src/components/ButtonLink.tsx @@ -20,7 +20,7 @@ const ButtonLink: React.FC = ({ const classes = { light: "bg-white z-10 text-tolo-green flex gap-2 justify-center items-center px-3 py-2 rounded-full font-semibold text-lg lg:mt-4 h-10 w-44", - dark: "bg-black z-10 text-white flex gap-2 justify-center items-center px-3 rounded-full font-semibold text-lg lg:mt-4 h-10 w-44", + dark: "bg-neutral-700 z-10 text-white flex gap-2.5 justify-center items-center px-6 rounded-full font-semibold lg:text-lg lg:leading-6 text-base leading-[22px] h-10 w-fit", search: "bg-black z-10 inline-flex items-center bg-opacity-20 opacity-90 rounded-full py-4 px-5 mt-8", github: @@ -39,6 +39,7 @@ const ButtonLink: React.FC = ({ {variant === "search" && ( )} + {variant === "dark" && } ); }; diff --git a/src/components/ProjectsSection.astro b/src/components/ProjectsSection.astro new file mode 100644 index 00000000..0dead7b4 --- /dev/null +++ b/src/components/ProjectsSection.astro @@ -0,0 +1,55 @@ +--- +import { IProjectsFrontmatter } from "@interfaces/IProjects"; +import { ProjectCard, ButtonLink } from "@components"; +import { trimAndSortProjects } from "@util/ContentTransformer"; +const rawProjectsContent = await Astro.glob( + "../pages/en/projects/*.mdx" +); +const projectCount = 3; +const trimmedAndSorted = trimAndSortProjects(rawProjectsContent, projectCount); +--- + +
    +
    +
    + Latest projects +
    +
    + Within the Tolocar Project + we support different projects with our equipment, knowledge and + capacities. +
    +
    + The projects are in areas like insulation, energy supply, connectivity and + sewage water. +
    +
    +
    + { + trimmedAndSorted.map((project) => ( + + )) + } +
    +
    + +
    +
    diff --git a/src/components/index.tsx b/src/components/index.tsx index f3e72474..583fcfdc 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -31,3 +31,4 @@ export { default as ProjectCard } from "@components/ProjectCard"; export { default as ConditionalLinkWrapper } from "@components/ConditionalLinkWrapper"; export { default as ProjectsHeroImage } from "@components/ProjectsHeroImage"; export { default as LanguageSwitcher } from "@components/LanguageSwitcher"; +export { default as ProjectsSection } from "@components/ProjectsSection.astro"; diff --git a/src/pages/en/index.mdx b/src/pages/en/index.mdx index ceb96227..f412f658 100644 --- a/src/pages/en/index.mdx +++ b/src/pages/en/index.mdx @@ -21,7 +21,8 @@ import { NewsItem, CommunityCard, WideCard, - ImpactListItem + ImpactListItem, + ProjectsSection } from "@components"; @@ -122,6 +123,10 @@ import { + + + +
    diff --git a/src/util/ContentTransformer.ts b/src/util/ContentTransformer.ts index a431f285..7982ba7c 100644 --- a/src/util/ContentTransformer.ts +++ b/src/util/ContentTransformer.ts @@ -74,7 +74,7 @@ export function trimAndSortProjects( ) { const rawSortedProjectsContentWithoutIndex = rawProjectsContent .filter((project) => !project.file.includes("index.mdx")) - .sort((a, b) => a.frontmatter.order - b.frontmatter.order); + .sort((a, b) => b.frontmatter.order - a.frontmatter.order); const trimmedProjects = count ? rawSortedProjectsContentWithoutIndex.slice(0, count) From 9a079f9b79a64622728bc2f6d9142bf166091211 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Tue, 30 May 2023 10:31:49 +0200 Subject: [PATCH 5/6] fix: links --- src/pages/en/_menu.mdx | 12 +++++------- src/pages/en/projects/anderesbike.mdx | 2 +- src/pages/en/projects/project4.mdx | 2 +- src/pages/en/projects/projekt1.mdx | 2 +- src/pages/en/projects/projekt435.mdx | 2 +- src/pages/en/projects/xyzcargobike.mdx | 2 +- src/pages/en/projects/xyzcargobike2.mdx | 2 +- 7 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/pages/en/_menu.mdx b/src/pages/en/_menu.mdx index 2c00e8f7..a117ee96 100644 --- a/src/pages/en/_menu.mdx +++ b/src/pages/en/_menu.mdx @@ -5,24 +5,22 @@ menu: hideInFooter: true - title: What is a Tolocar? - target: "/en/#what-is-a-tolocar" + target: "en/#what-is-a-tolocar" - title: Projects - target: "/en/projects" + target: "en/projects" - title: Community - target: "/en/community" + target: "en/community" - title: Makerspace Academy - target: "/en/academy" + target: "en/academy" - title: Jobs - target: "/en/jobs" + target: "en/jobs" hideInHeader: true - title: Contact target: "mailto:info@tolocar.org" hideInHeader: true - - --- diff --git a/src/pages/en/projects/anderesbike.mdx b/src/pages/en/projects/anderesbike.mdx index d8ce9d32..baffc978 100644 --- a/src/pages/en/projects/anderesbike.mdx +++ b/src/pages/en/projects/anderesbike.mdx @@ -1,6 +1,6 @@ --- title: Anderes Bike -img: https://source.unsplash.com/random/1980×1080 +img: https://picsum.photos/id/237/640/480 order: 3 teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. layout: "@layouts/ProjectsSingleView.astro" diff --git a/src/pages/en/projects/project4.mdx b/src/pages/en/projects/project4.mdx index 040f669e..728324d5 100644 --- a/src/pages/en/projects/project4.mdx +++ b/src/pages/en/projects/project4.mdx @@ -1,6 +1,6 @@ --- title: Projekt 4 -img: https://source.unsplash.com/random/550×720 +img: https://picsum.photos/id/217/640/480 order: 4 teaser: Lorem ipsum layout: "@layouts/ProjectsSingleView.astro" diff --git a/src/pages/en/projects/projekt1.mdx b/src/pages/en/projects/projekt1.mdx index a7496d3f..7285646b 100644 --- a/src/pages/en/projects/projekt1.mdx +++ b/src/pages/en/projects/projekt1.mdx @@ -1,6 +1,6 @@ --- title: Projekt 1 -img: https://source.unsplash.com/random/1280×720 +img: https://picsum.photos/id/27/640/480 order: 2 teaser: Lorem ipsum layout: "@layouts/ProjectsSingleView.astro" diff --git a/src/pages/en/projects/projekt435.mdx b/src/pages/en/projects/projekt435.mdx index 8d50593f..56bf93af 100644 --- a/src/pages/en/projects/projekt435.mdx +++ b/src/pages/en/projects/projekt435.mdx @@ -1,6 +1,6 @@ --- title: Projekt 435 -img: https://source.unsplash.com/random/1080×720 +img: https://picsum.photos/id/72/640/480 order: 6 teaser: Lorem ipsum layout: "@layouts/ProjectsSingleView.astro" diff --git a/src/pages/en/projects/xyzcargobike.mdx b/src/pages/en/projects/xyzcargobike.mdx index 48683a27..d816f6ad 100644 --- a/src/pages/en/projects/xyzcargobike.mdx +++ b/src/pages/en/projects/xyzcargobike.mdx @@ -1,6 +1,6 @@ --- title: XYZ Cargobike -img: https://source.unsplash.com/random/800×600 +img: https://picsum.photos/id/89/640/480 order: 1 teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. layout: "@layouts/ProjectsSingleView.astro" diff --git a/src/pages/en/projects/xyzcargobike2.mdx b/src/pages/en/projects/xyzcargobike2.mdx index 3416ebc9..798b3289 100644 --- a/src/pages/en/projects/xyzcargobike2.mdx +++ b/src/pages/en/projects/xyzcargobike2.mdx @@ -1,6 +1,6 @@ --- title: XYZ Cargobike -img: https://source.unsplash.com/random/1200×675 +img: https://picsum.photos/id/21/640/480 order: 5 teaser: The XYZ CARGO BIKE is a two-wheeled cargo-cycle for transporting persons or goods in a fast way. layout: "@layouts/ProjectsSingleView.astro" From 22fdc8be561bb8d4de20c1c8d7bf20cd06bef085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Tue, 30 May 2023 10:39:48 +0200 Subject: [PATCH 6/6] fix: menu links --- src/layouts/BaseLayout.astro | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 836b7b27..2fc15d24 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -22,9 +22,9 @@ const localeFromUrl = Astro?.url?.pathname .filter(Boolean)[0] .toLowerCase(); -const rawMenu = await Astro.glob("../pages/**/_menu.mdx"); +const rawMenus = await Astro.glob("../pages/**/_menu.mdx"); -const menu = rawMenu.find((rawMenu) => +const translatedMenu = rawMenus.find((rawMenu) => rawMenu.url .split("/") .filter(Boolean) @@ -32,8 +32,12 @@ const menu = rawMenu.find((rawMenu) => .includes(localeFromUrl) ).frontmatter?.menu; -const isProduction = import.meta.env.MODE === "production"; +const translatedAndRebasedMenu = translatedMenu.map((menuItem) => ({ + ...menuItem, + target: baseUrl + menuItem.target, +})); +const isProduction = import.meta.env.MODE === "production"; --- @@ -48,12 +52,16 @@ const isProduction = import.meta.env.MODE === "production"; content="The Tolocar project sends mobile makerspaces into Ukraine to help, empower, equip and train local communities through open technology, knowledge and innovation." /> - {isProduction && } + { + isProduction && ( +