mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
65
src/blocks/GuideListing.tsx
Normal file
65
src/blocks/GuideListing.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
import { getGuideListing } from '../../static/data/guides.js'
|
||||
import featuredGuides from '../../static/data/featuredGuides.json'
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid'
|
||||
import { Section } from '../components/layout/Section/Section'
|
||||
import { GuideCard } from '../components/cards/GuideCard/GuideCard'
|
||||
|
||||
interface GuideListingProps {
|
||||
title: string
|
||||
hasNoLink: boolean
|
||||
isFeaturedOnly: boolean
|
||||
}
|
||||
|
||||
export function GuideListing({
|
||||
title,
|
||||
hasNoLink,
|
||||
isFeaturedOnly,
|
||||
}: GuideListingProps) {
|
||||
if (isFeaturedOnly) {
|
||||
return (
|
||||
<Section
|
||||
title={title}
|
||||
linkHref={!hasNoLink ? 'docs/learn' : null}
|
||||
linkLabel={!hasNoLink ? 'View all' : null}
|
||||
>
|
||||
<Grid layout={GridLayout.Half} hasEqualHeightItems>
|
||||
{featuredGuides.map((guide) => {
|
||||
return (
|
||||
<GuideCard
|
||||
key={guide.title}
|
||||
imageUrl={guide.imageUrl}
|
||||
title={guide.title}
|
||||
description={guide.description}
|
||||
href={guide.href}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
} else {
|
||||
return getGuideListing().map((category) => (
|
||||
<Section
|
||||
key={category.key}
|
||||
title={category.title}
|
||||
linkHref={null}
|
||||
linkLabel={null}
|
||||
>
|
||||
<Grid layout={GridLayout.Half} hasEqualHeightItems>
|
||||
{category.items.map((guide) => {
|
||||
return (
|
||||
<GuideCard
|
||||
key={guide.key}
|
||||
imageUrl={guide.imageUrl}
|
||||
title={guide.title}
|
||||
description={guide.description}
|
||||
href={guide.href}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
))
|
||||
}
|
||||
}
|
||||
68
src/blocks/HeroBlock.tsx
Normal file
68
src/blocks/HeroBlock.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import React from 'react'
|
||||
import { Section } from '../components/layout/Section/Section'
|
||||
import { Title, TitleSize } from '../components/typography/Title/Title'
|
||||
import { Text } from '../components/typography/Text/Text'
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid'
|
||||
import {
|
||||
YouTubeEmbed,
|
||||
YouTubeEmbedProps,
|
||||
} from '../components/common/YouTubeEmbed/YouTubeEmbed'
|
||||
import { LinkCard, LinkCardProps } from '../components/cards/LinkCard/LinkCard'
|
||||
|
||||
interface IHeroBlockYoutube extends YouTubeEmbedProps {
|
||||
type: 'youtube'
|
||||
}
|
||||
|
||||
interface IHeroBlockLink extends LinkCardProps {
|
||||
type: 'link'
|
||||
}
|
||||
|
||||
interface HeroBlockProps {
|
||||
title: string
|
||||
text: string
|
||||
gridItems: (IHeroBlockLink | IHeroBlockYoutube)[]
|
||||
}
|
||||
|
||||
export function HeroBlock({ title, text, gridItems }: HeroBlockProps) {
|
||||
return (
|
||||
<Section hasNoHeader>
|
||||
<Title size={TitleSize.Large} headingLevel={1}>
|
||||
{title}
|
||||
</Title>
|
||||
|
||||
<Text>{text}</Text>
|
||||
|
||||
<Grid layout={GridLayout.Grid_2_1_1} hasEqualHeightItems>
|
||||
{gridItems.map((item, i) => {
|
||||
switch (item.type) {
|
||||
case 'youtube':
|
||||
return (
|
||||
<YouTubeEmbed
|
||||
key={i + item.videoId}
|
||||
videoId={item.videoId}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'link':
|
||||
return (
|
||||
<LinkCard
|
||||
key={i + item.label}
|
||||
colorVariable={item.colorVariable}
|
||||
label={item.label}
|
||||
href={item.href}
|
||||
backgroundImage={item.backgroundImage}
|
||||
playIcon={item.playIcon}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
return (
|
||||
<Text key={i}>
|
||||
Error: Wrong item type provided.
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
29
src/blocks/LinkButtonGrid.tsx
Normal file
29
src/blocks/LinkButtonGrid.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
ButtonCard,
|
||||
ButtonCardProps,
|
||||
} from '../components/cards/ButtonCard/ButtonCard'
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid'
|
||||
import { Section } from '../components/layout/Section/Section'
|
||||
|
||||
interface LinkButtonGridProps {
|
||||
title?: string
|
||||
links: ButtonCardProps[]
|
||||
}
|
||||
|
||||
export function LinkButtonGrid({ title, links }: LinkButtonGridProps) {
|
||||
return (
|
||||
<Section title={title} linkLabel={null}>
|
||||
<Grid layout={GridLayout.Thirds} hasEqualHeightItems>
|
||||
{links.map((link) => (
|
||||
<ButtonCard
|
||||
key={link.href}
|
||||
title={link.title}
|
||||
href={link.href}
|
||||
onClick={link.onClick}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
55
src/blocks/ModuleListing.tsx
Normal file
55
src/blocks/ModuleListing.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { Section } from '../components/layout/Section/Section';
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid';
|
||||
import modules from '../../static/library/modules/index.json';
|
||||
import featuredModuleIds from '../../static/data/featuredModules.json';
|
||||
import { ModuleCard } from '../components/cards/ModuleCard/ModuleCard';
|
||||
|
||||
const featuredModules = featuredModuleIds.map((moduleId) =>
|
||||
modules.find((module) => module.label === moduleId)
|
||||
);
|
||||
|
||||
interface ModuleListingProps {
|
||||
title: string;
|
||||
hasNoLink?: boolean;
|
||||
isFeaturedOnly: boolean;
|
||||
}
|
||||
|
||||
export function ModuleListing({
|
||||
title,
|
||||
hasNoLink,
|
||||
isFeaturedOnly,
|
||||
}: ModuleListingProps) {
|
||||
const renderedModules = isFeaturedOnly ? featuredModules : modules;
|
||||
|
||||
return (
|
||||
<Section
|
||||
title={title}
|
||||
linkHref={hasNoLink ? undefined : '/library/modules/overview'}
|
||||
linkLabel={hasNoLink ? false : 'View all'}
|
||||
>
|
||||
<Grid layout={GridLayout.Thirds} hasEqualHeightItems>
|
||||
{renderedModules.map((module) => {
|
||||
if (!module) return null;
|
||||
|
||||
return (
|
||||
<ModuleCard
|
||||
key={module.label}
|
||||
title={module.label}
|
||||
description={module.desc}
|
||||
readMoreUrl={module.docs}
|
||||
thumbUrl={module.icon}
|
||||
importArgs={{
|
||||
path: module.project,
|
||||
options: {
|
||||
thumb: module.icon,
|
||||
name: module.label,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
55
src/blocks/PrefabListing.tsx
Normal file
55
src/blocks/PrefabListing.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { Section } from '../components/layout/Section/Section';
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid';
|
||||
import modules from '../../static/library/prefabs/index.json';
|
||||
import featuredModuleIds from '../../static/data/featuredPrefabs.json';
|
||||
import { ModuleCard } from '../components/cards/ModuleCard/ModuleCard';
|
||||
|
||||
const featuredModules = featuredModuleIds.map((moduleId) =>
|
||||
modules.find((module) => module.label === moduleId)
|
||||
);
|
||||
|
||||
interface ModuleListingProps {
|
||||
title: string;
|
||||
hasNoLink?: boolean;
|
||||
isFeaturedOnly: boolean;
|
||||
}
|
||||
|
||||
export function PrefabListing({
|
||||
title,
|
||||
hasNoLink,
|
||||
isFeaturedOnly,
|
||||
}: ModuleListingProps) {
|
||||
const renderedModules = isFeaturedOnly ? featuredModules : modules;
|
||||
|
||||
return (
|
||||
<Section
|
||||
title={title}
|
||||
linkHref={hasNoLink ? undefined : '/library/prefabs/overview'}
|
||||
linkLabel={hasNoLink ? false : 'View all'}
|
||||
>
|
||||
<Grid layout={GridLayout.Thirds} hasEqualHeightItems>
|
||||
{renderedModules.map((module) => {
|
||||
if (!module) return null;
|
||||
|
||||
return (
|
||||
<ModuleCard
|
||||
key={module.label}
|
||||
title={module.label}
|
||||
description={module.desc}
|
||||
readMoreUrl={module.docs}
|
||||
thumbUrl={module.icon}
|
||||
importArgs={{
|
||||
path: module.project,
|
||||
options: {
|
||||
thumb: module.icon,
|
||||
name: module.label,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
37
src/blocks/ProjectListing.tsx
Normal file
37
src/blocks/ProjectListing.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid'
|
||||
import { Section } from '../components/layout/Section/Section'
|
||||
import featuredProjects from '../../static/data/featuredProjects.json'
|
||||
import projects from '../../static/data/projects.json'
|
||||
import { ProjectCard } from '../components/cards/ProjectCard/ProjectCard'
|
||||
|
||||
export function ProjectListing({ title, hasNoLink, isFeaturedOnly }) {
|
||||
const renderedProjects = useMemo(
|
||||
() => (isFeaturedOnly ? featuredProjects : projects),
|
||||
[isFeaturedOnly]
|
||||
)
|
||||
|
||||
return (
|
||||
<Section
|
||||
title={title}
|
||||
linkHref={hasNoLink ? null : 'library/examples/overview'}
|
||||
linkLabel={hasNoLink ? null : 'View all'}
|
||||
>
|
||||
<Grid layout={GridLayout.Thirds} hasEqualHeightItems>
|
||||
{renderedProjects.map((project) => {
|
||||
return (
|
||||
<ProjectCard
|
||||
key={project.title}
|
||||
title={project.title}
|
||||
description={project.description}
|
||||
backend={project.backend}
|
||||
href={project.href}
|
||||
imageUrl={project.imageUrl}
|
||||
project={project.project}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
49
src/blocks/VideoListing.tsx
Normal file
49
src/blocks/VideoListing.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import { VideoLinkCard } from '../components/cards/VideoLinkCard/VideoLinkCard'
|
||||
import { Grid, GridLayout } from '../components/layout/Grid/Grid'
|
||||
import { Section } from '../components/layout/Section/Section'
|
||||
import videos from '../../static/data/youtubeVideos.json'
|
||||
import featuredVideoIds from '../../static/data/featuredVideos.json'
|
||||
|
||||
const featuredVideos = featuredVideoIds.map((id) =>
|
||||
videos.find((video) => video.videoId === id)
|
||||
)
|
||||
|
||||
interface VideoListingProps {
|
||||
title: string
|
||||
hasNoLink?: boolean
|
||||
isFeaturedOnly: boolean
|
||||
}
|
||||
|
||||
export function VideoListing({
|
||||
title,
|
||||
hasNoLink,
|
||||
isFeaturedOnly,
|
||||
}: VideoListingProps) {
|
||||
const renderedVideos = isFeaturedOnly ? featuredVideos : videos
|
||||
return (
|
||||
<Section
|
||||
title={title}
|
||||
linkHref={
|
||||
hasNoLink
|
||||
? null
|
||||
: 'https://www.youtube.com/channel/UCLkJ8XYV1J1RqrZKY-o1YWg'
|
||||
}
|
||||
linkLabel={hasNoLink ? false : 'View all'}
|
||||
>
|
||||
<Grid layout={GridLayout.Half} hasEqualHeightItems>
|
||||
{renderedVideos.map((video) => {
|
||||
return (
|
||||
<VideoLinkCard
|
||||
key={video.videoId}
|
||||
title={video.title}
|
||||
description={video.description}
|
||||
videoLength={video.videoLength}
|
||||
videoId={video.videoId}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user