-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #254 from ocftw/cms/pages/cards
- Loading branch information
Showing
15 changed files
with
356 additions
and
314 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
unique_slug: cards | ||
name: Cards | ||
layout_list: | ||
- type: layout_headline | ||
title: Card Introduction | ||
- type: layout_cards | ||
card_type: project | ||
title: Project Card | Open Government | ||
card_tags: | ||
- open gov | ||
- type: layout_cards | ||
title: Project Card | Open Data | ||
card_type: project | ||
card_tags: | ||
- open data | ||
- type: layout_cards | ||
title: Project Card | Open Source | ||
card_type: project | ||
card_tags: | ||
- open source | ||
- type: layout_cards | ||
title: Job Card | ||
card_type: job | ||
- type: layout_cards | ||
title: Event Card | ||
card_type: event | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
unique_slug: cards | ||
name: 卡片頁 | ||
layout_list: | ||
- type: layout_headline | ||
title: 卡片介紹 | ||
- type: layout_cards | ||
card_type: project | ||
title: 專案卡 | 開放政府專案 | ||
card_tags: | ||
- open gov | ||
- type: layout_cards | ||
title: 專案卡 | 開放資料專案 | ||
card_type: project | ||
card_tags: | ||
- open data | ||
- type: layout_cards | ||
title: 專案卡 | 開放原始碼專案 | ||
card_type: project | ||
card_tags: | ||
- open source | ||
- type: layout_cards | ||
title: 人力卡 | ||
card_type: job | ||
- type: layout_cards | ||
title: 事件卡 | ||
card_type: event | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { ParseMarkdownAndHtml } from './parseMarkdownAndHtml'; | ||
|
||
const Cards = ({ id, title, cards }) => { | ||
return ( | ||
<div className="section" id={id}> | ||
<div className="container"> | ||
<div className="section-head"> | ||
<h2>{title}</h2> | ||
</div> | ||
<div className="row"> | ||
{cards.map((card) => ( | ||
<Card key={card.data.id} card={card} /> | ||
))} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
const Card = ({ card }) => ( | ||
<div className="col-md-4 mb-3" id={card.data.id}> | ||
<div className="section-main"> | ||
<h3>{card.data.title}</h3> | ||
<div> | ||
<img src={card.data.image} alt={card.data.title} /> | ||
<strong>{card.data.description}</strong> | ||
<ParseMarkdownAndHtml markdown={true}> | ||
{card.content} | ||
</ParseMarkdownAndHtml> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
|
||
export default Cards; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
import { titleToAnchorId } from './titleToAnchorId'; | ||
|
||
const removeUndefined = (obj) => { | ||
const newObj = {}; | ||
Object.keys(obj).forEach((key) => { | ||
if (obj[key] !== undefined) { | ||
newObj[key] = obj[key]; | ||
} | ||
}); | ||
return newObj; | ||
}; | ||
|
||
export const componentTypes = { | ||
Banner: 'Banner', | ||
Headline: 'Headline', | ||
OneColumn: 'OneColumn', | ||
TwoColumns: 'TwoColumns', | ||
ThreeColumns: 'ThreeColumns', | ||
ImageAndText: 'ImageAndText', | ||
Cards: 'Cards', | ||
}; | ||
|
||
export const componentMapper = (layout, cards = []) => { | ||
let type = ''; | ||
let props = {}; | ||
switch (layout.type) { | ||
case 'layout_banner': { | ||
type = componentTypes.Banner; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
subtitle: layout.subtitle, | ||
heroImage: layout.hero_image, | ||
highlights: layout.highlights, | ||
}; | ||
break; | ||
} | ||
case 'layout_headline': { | ||
type = componentTypes.Headline; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
subtitle: layout.subtitle, | ||
}; | ||
break; | ||
} | ||
case 'layout_image_text': { | ||
type = componentTypes.ImageAndText; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
subtitle: layout.subtitle, | ||
image: layout.image, | ||
content: layout.text, | ||
highlights: layout.highlights, | ||
markdown: true, | ||
}; | ||
break; | ||
} | ||
case 'layout_section': { | ||
if (layout.columns?.length <= 1) { | ||
type = componentTypes.OneColumn; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
subtitle: layout.columns?.[0]?.title, | ||
image: layout.columns?.[0]?.image, | ||
content: layout.columns?.[0]?.text, | ||
markdown: true, | ||
}; | ||
break; | ||
} else if (layout.columns?.length === 2) { | ||
type = componentTypes.TwoColumns; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
columns: layout.columns, | ||
markdown: true, | ||
}; | ||
break; | ||
} else if (layout.columns?.length >= 3) { | ||
type = componentTypes.ThreeColumns; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
columns: layout.columns, | ||
markdown: true, | ||
}; | ||
break; | ||
} | ||
} | ||
case 'layout_cards': { | ||
let filteredCards = cards; | ||
// filter cards by card_type | ||
if (layout.card_type) { | ||
filteredCards = cards.filter( | ||
(card) => layout.card_type === card.data.type, | ||
); | ||
} | ||
// filter cards by card_tags | ||
if (layout.card_tags && layout.card_tags.length > 0) { | ||
filteredCards = filteredCards.filter((card) => | ||
layout.card_tags.every((tag) => card.data.tags?.includes(tag)), | ||
); | ||
} | ||
|
||
type = componentTypes.Cards; | ||
props = { | ||
id: titleToAnchorId(layout.title), | ||
title: layout.title, | ||
cards: filteredCards, | ||
}; | ||
break; | ||
} | ||
} | ||
|
||
return { | ||
type, | ||
props: removeUndefined(props), | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { remark } from 'remark'; | ||
import html from 'remark-html'; | ||
|
||
export async function markdownToHtml(markdown) { | ||
const result = await remark().use(html).process(markdown); | ||
return result.toString(); | ||
} |
Oops, something went wrong.