Skip to content

Commit 8e4ac28

Browse files
FrontendlandFrontendland
committed
✨ Add Blog template
1 parent 831b8ef commit 8e4ac28

File tree

15 files changed

+529
-1
lines changed

15 files changed

+529
-1
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,5 +304,6 @@ import { Accordion } from 'webcoreui/react'
304304

305305
## Templates
306306

307+
- [Blog](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Blog)
307308
- [Portfolio](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Portfolio)
308309
- [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)

‎public/img/placeholder10.png

130 KB
Loading

‎public/img/placeholder11.png

124 KB
Loading

‎public/img/placeholder9.png

77.7 KB
Loading

‎public/img/templates/blog.png

89.2 KB
Loading

‎src/data.ts

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,19 @@ import ReactBox from '@static/Box.tsx'
1212
import logo from './assets/img/logo.svg?raw'
1313
import alertIcon from './icons/alert.svg?raw'
1414
import successIcon from './icons/circle-check.svg?raw'
15+
import copyIcon from './icons/copy.svg?raw'
1516
import gitHubIcon from './icons/github.svg?raw'
1617
import homeIcon from './icons/home.svg?raw'
1718
import infoIcon from './icons/info.svg?raw'
1819
import moonIcon from './icons/moon.svg?raw'
20+
import astroIcon from '@blocks/Icon/icons/astro.svg?raw'
1921
import componentsIcon from '@blocks/Icon/icons/components.svg?raw'
22+
import discordIcon from '@blocks/Icon/icons/discord.svg?raw'
2023
import fileIcon from '@blocks/Icon/icons/file.svg?raw'
24+
import rocketIcon from '@blocks/Icon/icons/rocket.svg?raw'
25+
import terminalIcon from '@blocks/Icon/icons/terminal.svg?raw'
2126

27+
import type { TilesProps } from '@blocks/Tiles/tiles'
2228
import type { PaginationProps } from 'webcoreui/astro'
2329

2430
export const accordionItems = [{
@@ -654,3 +660,118 @@ export const getPortfolioTemplateData = (theme = 'success') => ({
654660
]
655661
}
656662
})
663+
664+
export const getBlogTemplateData = (theme = 'success') => ({
665+
layout: {
666+
seo: {
667+
title: 'Blog Template - Webcore',
668+
url: 'https://webcoreui.dev/',
669+
description: 'A versatile and easy to use template for blogs.',
670+
faviconUrl: '/logo.svg'
671+
},
672+
menu: {
673+
logo: {
674+
html: logo
675+
},
676+
items: [
677+
{ name: '<- Back to templates', href: '/templates' }
678+
]
679+
},
680+
footer: {
681+
logo: {
682+
html: logo
683+
},
684+
columns: [
685+
{
686+
title: 'Sitemap',
687+
items: [
688+
{ name: 'Latest', href: '' },
689+
{ name: 'Contact', href: '' },
690+
{ name: 'RSS', href: '' }
691+
]
692+
},
693+
{
694+
title: 'Social',
695+
items: [
696+
{ name: 'LinkedIn', href: '' },
697+
{ name: 'Medium', href: '' },
698+
{ name: 'X', href: '' }
699+
]
700+
}
701+
],
702+
subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
703+
}
704+
},
705+
hero: {
706+
heading: 'Brand New Array Methods',
707+
subHeading: 'What\'s new in the latest version of JavaScript',
708+
buttons: [{ text: 'Read More' }],
709+
badge: {
710+
rounded: true,
711+
theme: theme as ButtonProps['theme'],
712+
text: 'in JavaScript'
713+
},
714+
image: {
715+
src: '/img/placeholder-hd1.png',
716+
alt: 'Banner',
717+
width: 500,
718+
height: 300
719+
}
720+
},
721+
tiles: {
722+
columns: 3 as TilesProps['columns'],
723+
items: [
724+
{ icon: astroIcon, label: 'Roadmaps', href: '#' },
725+
{ icon: copyIcon, label: 'Categories', href: '#' },
726+
{ icon: gitHubIcon, label: 'Projects', href: '#' },
727+
{ icon: rocketIcon, label: 'Product launches', href: '#' },
728+
{ icon: terminalIcon, label: 'Playgrounds', href: '#' },
729+
{ icon: discordIcon, label: 'Community', href: '#' }
730+
]
731+
},
732+
posts: Array
733+
.from({ length: 6 }, (_, i) => i + 2)
734+
.map(i => ({
735+
href: '#',
736+
img: {
737+
src: `/img/placeholder${i}.png`,
738+
alt: 'img',
739+
width: 200,
740+
height: 150
741+
},
742+
title: `Latest Post #${i}`,
743+
text: `Jan 01, ${new Date().getFullYear()} • ${i} min read`
744+
})),
745+
recommended: Array
746+
.from({ length: 3 }, (_, i) => i + 9)
747+
.map(i => ({
748+
href: '#',
749+
img: {
750+
src: `/img/placeholder${i}.png`,
751+
alt: 'img',
752+
width: 200,
753+
height: 150
754+
},
755+
title: `Recommended Post #${i - 8}`,
756+
text: `Jan 01, ${new Date().getFullYear()} • ${i} min read<br />Add a short description to cards to improve engagement.`,
757+
secondary: true
758+
})),
759+
author: {
760+
img: {
761+
src: '/img/avatar1.png',
762+
alt: 'avatar',
763+
size: 50
764+
},
765+
name: 'Jake Brown',
766+
role: 'Astro developer',
767+
description: 'A short description about the author. Should be concise yet engaging, giving readers a quick insight into who you are and why they should trust your content. For example: <i>"Frontend developer passionate about building fast, accessible web experiences. Sharing insights on React, Astro, and web performance."</i>',
768+
secondary: true,
769+
socials: {
770+
links: [
771+
'https://linkedin.com',
772+
'https://medium.com',
773+
'https://twitter.com'
774+
]
775+
}
776+
}
777+
})

‎src/pages/templates/blog/astro.astro

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import { getBlogTemplateData } from '@data'
3+
4+
import Blog from '@templates/Blog/Blog.astro'
5+
---
6+
7+
<Blog {...getBlogTemplateData()}>
8+
<h2>Main Content</h2>
9+
10+
<p>This is your main content. You can add components and HTML inside your <code>Blog</code> component. Consider adding additional engaging content to improve user experience and SEO, for example:</p>
11+
<ul>
12+
<li><b>Author Highlights:</b> Introduce yourself or key contributors to create a personal connection with the audience.</li>
13+
<li><b>Popular Topics / Tags:</b> Display trending topics or commonly searched tags to help users explore related content.</li>
14+
<li><b>Newsletter Signup:</b> Encourage visitors to subscribe for updates, which helps with retention and audience building.</li>
15+
<li><b>Reader Testimonials or Comments:</b> Show recent comments or feedback to build trust and community engagement.</li>
16+
<li><b>Call-to-Action:</b> Guide users toward an action, like exploring a specific topic, signing up, or following on social media.</li>
17+
<li><b>Social Proof / Community Engagement:</b> Display stats like total reads, shares, or community discussions to reinforce credibility.</li>
18+
</ul>
19+
</Blog>
20+

‎src/pages/templates/blog/react.astro

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import { getBlogTemplateData } from '@data'
3+
4+
import Blog from '@templates/Blog/Blog.tsx'
5+
---
6+
7+
<Blog {...getBlogTemplateData('info')}>
8+
<h2>Main Content</h2>
9+
10+
<p>This is your main content. You can add components and HTML inside your <code>Blog</code> component. Consider adding additional engaging content to improve user experience and SEO, for example:</p>
11+
<ul>
12+
<li><b>Author Highlights:</b> Introduce yourself or key contributors to create a personal connection with the audience.</li>
13+
<li><b>Popular Topics / Tags:</b> Display trending topics or commonly searched tags to help users explore related content.</li>
14+
<li><b>Newsletter Signup:</b> Encourage visitors to subscribe for updates, which helps with retention and audience building.</li>
15+
<li><b>Reader Testimonials or Comments:</b> Show recent comments or feedback to build trust and community engagement.</li>
16+
<li><b>Call-to-Action:</b> Guide users toward an action, like exploring a specific topic, signing up, or following on social media.</li>
17+
<li><b>Social Proof / Community Engagement:</b> Display stats like total reads, shares, or community discussions to reinforce credibility.</li>
18+
</ul>
19+
</Blog>
20+

‎src/pages/templates/blog/svelte.astro

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import { getBlogTemplateData } from '@data'
3+
4+
import Blog from '@templates/Blog/Blog.svelte'
5+
---
6+
7+
<Blog {...getBlogTemplateData('alert')}>
8+
<h2>Main Content</h2>
9+
10+
<p>This is your main content. You can add components and HTML inside your <code>Blog</code> component. Consider adding additional engaging content to improve user experience and SEO, for example:</p>
11+
<ul>
12+
<li><b>Author Highlights:</b> Introduce yourself or key contributors to create a personal connection with the audience.</li>
13+
<li><b>Popular Topics / Tags:</b> Display trending topics or commonly searched tags to help users explore related content.</li>
14+
<li><b>Newsletter Signup:</b> Encourage visitors to subscribe for updates, which helps with retention and audience building.</li>
15+
<li><b>Reader Testimonials or Comments:</b> Show recent comments or feedback to build trust and community engagement.</li>
16+
<li><b>Call-to-Action:</b> Guide users toward an action, like exploring a specific topic, signing up, or following on social media.</li>
17+
<li><b>Social Proof / Community Engagement:</b> Display stats like total reads, shares, or community discussions to reinforce credibility.</li>
18+
</ul>
19+
</Blog>
20+

‎src/pages/templates/index.astro

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import BlogCard from '@blocks/BlogCard/BlogCard.astro'
55
66
const templates = [
77
{ name: 'Product Page', url: 'product-page' },
8-
{ name: 'Portfolio', url: 'portfolio' }
8+
{ name: 'Portfolio', url: 'portfolio' },
9+
{ name: 'Blog', url: 'blog' }
910
]
1011
---
1112

‎src/templates/Blog/Blog.astro

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
import type { BlogProps } from './blog'
3+
4+
import Author from '@blocks/Author/Author.astro'
5+
import BlogCard from '@blocks/BlogCard/BlogCard.astro'
6+
import Hero from '@blocks/Hero/Hero.astro'
7+
import Layout from '@blocks/Layout/Layout.astro'
8+
import Tiles from '@blocks/Tiles/Tiles.astro'
9+
10+
import styles from './blog.module.scss'
11+
12+
import { ConditionalWrapper } from 'webcoreui/astro'
13+
14+
interface Props extends BlogProps {}
15+
16+
const {
17+
layout,
18+
hero,
19+
tilesTitle = 'Explore',
20+
tiles,
21+
postsTitle = 'Latest Articles',
22+
posts,
23+
recommendedTitle = 'Recommended',
24+
recommended,
25+
authorTitle = 'About the Author',
26+
author,
27+
...rest
28+
} = Astro.props
29+
---
30+
31+
<Layout {...layout} {...rest} className="flex column">
32+
{Astro.slots.has('menu') && (
33+
<div slot="menu">
34+
<slot name="menu" />
35+
</div>
36+
)}
37+
38+
{hero && (
39+
<div slot="atf" class={styles.hero}>
40+
<Hero {...hero} className={styles.container} />
41+
</div>
42+
)}
43+
44+
{!!tiles?.items?.length && (
45+
<ConditionalWrapper condition={!!tilesTitle}>
46+
<section slot="wrapper">children</section>
47+
{tilesTitle && (
48+
<h2>{tilesTitle}</h2>
49+
)}
50+
<Tiles {...tiles} />
51+
</ConditionalWrapper>
52+
)}
53+
54+
{!!posts?.length && (
55+
<ConditionalWrapper condition={!!postsTitle}>
56+
<div slot="wrapper">children</div>
57+
{postsTitle && (
58+
<h2>{postsTitle}</h2>
59+
)}
60+
<div class="grid sm-2 lg-3">
61+
{posts.map(post => <BlogCard {...post} />)}
62+
</div>
63+
</ConditionalWrapper>
64+
)}
65+
66+
<ConditionalWrapper condition={!!recommended?.length}>
67+
<section slot="wrapper" class="flex column md-row">
68+
children
69+
</section>
70+
{Astro.slots.default && (
71+
<section class={styles.main}>
72+
<slot />
73+
</section>
74+
)}
75+
{!!recommended?.length && (
76+
<section class={styles.recommended}>
77+
<h2>{recommendedTitle}</h2>
78+
<div class="grid">
79+
{recommended.map(post => <BlogCard {...post} />)}
80+
</div>
81+
</section>
82+
)}
83+
</ConditionalWrapper>
84+
85+
{author && (
86+
<div>
87+
<h2>{authorTitle}</h2>
88+
<Author {...author} />
89+
</div>
90+
)}
91+
</Layout>

0 commit comments

Comments
 (0)