Skip to content

Commit 7b72741

Browse files
estruyfestruyf
committed
Added themes
1 parent 35a3a95 commit 7b72741

File tree

4 files changed

+74
-13
lines changed

4 files changed

+74
-13
lines changed

‎pages/showcase/index.tsx

Lines changed: 66 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Layout } from '../../components/Page/Layout';
55
import { Extension } from '../../constants/extension';
66
import featured from '../../featured.json';
77
import showcases from '../../showcases.json';
8+
import themes from '../../themes.json';
89
import Image from 'next/image';
910

1011
const shimmer = (w: number, h: number) => `
@@ -51,18 +52,23 @@ export default function Home({ showcases, featured }: any) {
5152

5253
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{strings(`showcase_page_description`) as string}</p>
5354

54-
<div className="mt-8 text-sm">
55+
<div className="mt-8 text-base">
5556
<p>Want to add your site or article/video/... to our showcase page? Great, open a showcase on <a className="text-teal-500 hover:text-teal-900" href={Extension.showcaseLink} target="_blank" rel="noopener noreferrer">Github</a>!</p>
5657
</div>
5758
</div>
5859

5960
<div>
6061
<h2 className="text-3xl xl:text-4xl mt-8 tracking-tight font-extrabold sm:leading-none">{strings(`showcase_featured_title`) as string}</h2>
6162

62-
<div className={`py-8 grid grid-cols-1 lg:grid-cols-2 gap-8`}>
63+
<div className={`py-8 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16`}>
6364
{allFeatured.sort(sortTitle).map((feature: any) => (
6465
<div key={feature.title}>
65-
<a className="group space-y-2 md:space-y-5 relative" href={feature.link} title={feature.title} target="_blank" rel={`noopener noreferrer`}>
66+
<a
67+
className="group space-y-2 md:space-y-5 relative hover:text-teal-700"
68+
href={feature.link}
69+
title={feature.title}
70+
target="_blank"
71+
rel={`noopener noreferrer`}>
6672
<figure className={`relative overflow-hidden grayscale group-hover:grayscale-0 text-center`}>
6773
<Image
6874
className={`w-full object-cover object-left-top`}
@@ -76,15 +82,15 @@ export default function Home({ showcases, featured }: any) {
7682
/>
7783
</figure>
7884

79-
<h2 className="text-3xl tracking-tight font-extrabold sm:leading-none lg:text-3xl xl:text-4xl">{feature.title}</h2>
85+
<h2 className="text-xl lg:text-2xl tracking-tight font-extrabold sm:leading-none">{feature.title}</h2>
8086
</a>
8187

8288
{
8389
feature.author && (
84-
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
90+
<p className="text-base text-whisper-700 mt-1">
8591
{
8692
feature.author?.link ? (
87-
<a className="text-teal-500 hover:text-teal-900" href={feature.author.link} title={feature.author.name} target="_blank" rel="noopener noreferrer">{feature.author.name}</a>
93+
<a className="text-whisper-900 hover:text-yellow-700" href={feature.author.link} title={feature.author.name} target="_blank" rel="noopener noreferrer">{feature.author.name}</a>
8894
) : (
8995
feature.author.name
9096
)
@@ -126,14 +132,22 @@ export default function Home({ showcases, featured }: any) {
126132
</div>
127133

128134
<div>
129-
<h2 className="text-3xl xl:text-4xl mt-8 tracking-tight font-extrabold sm:leading-none">Showcases</h2>
135+
<h2 className="text-3xl xl:text-4xl mt-8 tracking-tight font-extrabold sm:leading-none">
136+
Websites managed by Front Matter CMS
137+
</h2>
130138

131-
<div className={`py-8 grid grid-cols-1 lg:grid-cols-2 gap-8`}>
139+
<div className={`py-8 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-16`}>
132140
{showcases.filter((showcase: any) => showcase.image).sort(sortTitle).map((showcase: any) => (
133-
<a key={showcase.title} className="group space-y-2 md:space-y-5 relative" href={showcase.link} title={showcase.title} target="_blank" rel={`noopener noreferrer`}>
134-
<figure className={`relative h-64 lg:h-[25rem] overflow-hidden grayscale group-hover:grayscale-0 text-center`}>
141+
<a
142+
key={showcase.title}
143+
className="group relative hover:text-teal-700"
144+
href={showcase.link}
145+
title={showcase.title}
146+
target="_blank"
147+
rel={`noopener noreferrer`}>
148+
<figure className={`relative h-64 lg:h-[16rem] overflow-hidden grayscale group-hover:grayscale-0 text-center`}>
135149
<Image
136-
className={`w-full object-cover object-left-top`}
150+
className={`w-full h-full object-cover object-left-top`}
137151
src={`/showcases/${showcase.image}`}
138152
alt={showcase.title}
139153
loading={`lazy`}
@@ -144,9 +158,48 @@ export default function Home({ showcases, featured }: any) {
144158
/>
145159
</figure>
146160

147-
<h2 className="text-3xl tracking-tight font-extrabold sm:leading-none lg:text-3xl xl:text-4xl">{showcase.title}</h2>
161+
<h3 className="mt-2 text-xl tracking-tight font-extrabold sm:leading-none lg:text-xl xl:text-2xl">
162+
{showcase.title}
163+
</h3>
164+
165+
<p className="mt-1 text-base text-whisper-700">{showcase.description}</p>
166+
</a>
167+
))}
168+
</div>
169+
</div>
170+
171+
<div>
172+
<h2 className="text-3xl xl:text-4xl mt-8 tracking-tight font-extrabold sm:leading-none">
173+
Templates/themes with Front Matter CMS integration
174+
</h2>
175+
176+
<div className={`py-8 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-16`}>
177+
{themes.filter((theme: any) => theme.image).sort(sortTitle).map((theme: any) => (
178+
<a
179+
key={theme.title}
180+
className="group relative hover:text-teal-700"
181+
href={theme.link}
182+
title={theme.title}
183+
target="_blank"
184+
rel={`noopener noreferrer`}>
185+
<figure className={`relative h-64 lg:h-[16rem] overflow-hidden grayscale group-hover:grayscale-0 text-center`}>
186+
<Image
187+
className={`w-full h-full object-cover object-left-top`}
188+
src={`/showcases/themes/${theme.image}`}
189+
alt={theme.title}
190+
loading={`lazy`}
191+
placeholder="blur"
192+
blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(592, 400))}`}
193+
width={592}
194+
height={400}
195+
/>
196+
</figure>
197+
<h3 className="mt-2 text-xl tracking-tight font-extrabold sm:leading-none lg:text-xl xl:text-2xl">
198+
{theme.title}
199+
</h3>
148200

149-
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{showcase.description}</p>
201+
<p className="mt-1 text-base text-whisper-700">SSG: {theme.generator}</p>
202+
<p className="mt-1 text-base text-whisper-700">{theme.description}</p>
150203
</a>
151204
))}
152205
</div>

‎public/showcases/themes/elva.png

318 KB
Loading

‎public/showcases/themes/pacamara.png

5.29 MB
Loading

‎themes.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[{
2+
"title": "Elva",
3+
"link": "https://github.com/scottsweb/elva",
4+
"description": "A multilingual, clean, green, 11ty starter theme.",
5+
"generator": "11ty",
6+
"author": "Scott Evans",
7+
"image": "elva.png"
8+
}]

0 commit comments

Comments
 (0)