Skip to content

Commit c07d84b

Browse files
freenandesfreenandes
committed
Video include
1 parent c65abb4 commit c07d84b

File tree

10 files changed

+424
-394
lines changed

10 files changed

+424
-394
lines changed

‎package-lock.json‎

Lines changed: 267 additions & 336 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@jsplumb/browser-ui": "^6.2.9",
14-
"astro": "^4.0.7",
14+
"astro": "^4.5.1",
1515
"autoprefixer": "^10.4.14",
1616
"lozad": "^1.16.0",
1717
"panzoom": "^9.4.3",

‎public/videos/showreel.mp4‎

1.56 MB
Binary file not shown.

‎src/components/webzineCard.astro‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
---
2+
23
const { customClasses, url, title, imageSrc, imageAlt } = Astro.props;
3-
import { Image } from "astro:assets";
4+
import {Image} from "astro:assets";
5+
46
---
7+
58
<li class={ `webzineCard ${customClasses}` }>
6-
<a href={ url } class="delayed">
7-
<h2>{ title }</h2>
8-
<Image src={ imageSrc } alt={ imageAlt } />
9+
<a href={url} class="delayed">
10+
<h2>{title}</h2>
11+
<Image src={imageSrc} alt={imageAlt} />
912
</a>
1013
</li>

‎src/components/webzineView.astro‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
---
2-
const { parentFolder, author, pubDate } = Astro.props;
32
3+
const { parentFolder, author, pubDate } = Astro.props;
44
function formatDate(isoDateString: string): string {
55
const date = new Date(isoDateString);
66
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
77
return date.toLocaleDateString('en-US', options);
88
}
99
const formattedPubDate = formatDate(pubDate);
10+
1011
---
12+
1113
<div id="webzineView">
1214
<header>
1315
<a href={ parentFolder } class="delayed">Back to list</a>
@@ -24,8 +26,11 @@ const formattedPubDate = formatDate(pubDate);
2426
<small>Created by { author } in { formattedPubDate }</small>
2527
</footer>
2628
</div>
29+
2730
<style is:global>
31+
2832
/* Global Styles */
33+
2934
@font-face {
3035
font-family: "Park";
3136
src:
@@ -50,6 +55,7 @@ html[class*="wz-"] body {
5055
}
5156

5257
/* Header & Footer */
58+
5359
header,
5460
footer {
5561
display: flex;
@@ -67,9 +73,9 @@ footer small {
6773
font-size: 0.75em;
6874
text-decoration: none;
6975
display: inline-block;
70-
border-radius: var(--sf);
76+
border-radius: var(--s16p);
7177
color: transparent;
72-
background-color: var(--blackLight);
78+
background-color: var(--cru);
7379
}
7480
header a,
7581
header a:visited,
@@ -93,6 +99,7 @@ footer small {
9399
}
94100

95101
/* Buttons */
102+
96103
button:hover,
97104
button:active {
98105
padding: 0 0.75em;
@@ -111,12 +118,12 @@ button.nav {
111118
text-align: center;
112119
width: 1.5em;
113120
padding: 0.25em;
114-
border-radius: var(--sz);
121+
border-radius: var(--s32p);
115122
}
116123
button.nav:hover,
117124
footer small:hover,
118125
button:hover {
119-
color: var(--blackMedium);
126+
color: var(--ink);
120127
}
121128
button.nav#prev,
122129
button.nav#next {
@@ -131,6 +138,7 @@ button.nav#next {
131138
}
132139

133140
/* Reel & Slides */
141+
134142
main {
135143
position: relative;
136144
margin-bottom: 1em;
@@ -149,7 +157,7 @@ main {
149157
position: relative;
150158
width: 100%;
151159
aspect-ratio: 1 / 1;
152-
border-radius: var(--sf);
160+
border-radius: calc(var(--s8p) + 0.5vw);
153161
overflow: hidden;
154162
}
155163
[slide]:not(:last-child) {
@@ -162,10 +170,10 @@ main {
162170
[slide] img {
163171
position: absolute;
164172
display: block;
165-
top: 0;
166-
left: 0;
167-
width: 100%;
168-
height: 100%;
173+
top: -1px;
174+
left: -1px;
175+
width: calc(100% + 2px);
176+
height: calc(100% + 2px);
169177
object-fit: cover;
170178
cursor: var(--cursorDefault);
171179
}
@@ -196,14 +204,15 @@ blockquote {
196204
left: 1rem;
197205
padding: 0.75em 1em;
198206
margin: 0;
199-
border-radius: var(--sc);
207+
border-radius: 0.5vw;
200208
background-color: var(--paper);
201209
}
202210
blockquote p {
203211
hyphens: none;
204212
text-align: center;
213+
margin-bottom: 0;
205214
}
206-
blockquote > *:not(:last-child) {
215+
blockquote p:not(:last-child):not(:only-child) {
207216
margin-bottom: 0.5em;
208217
}
209218

@@ -298,5 +307,33 @@ document.addEventListener('DOMContentLoaded', function() {
298307
}
299308
});
300309
});
310+
window.addEventListener('load', function() {
311+
// Delayed buttons/links
312+
const reel = document.getElementById('reel');
313+
const DELAY = 500;
314+
const clickableElements = document.querySelectorAll<HTMLAnchorElement | HTMLButtonElement>('a.delayed, #langToggle');
315+
clickableElements.forEach(element => {
316+
element.addEventListener('click', function(e) {
317+
e.preventDefault();
318+
element.classList.add('visible');
319+
setTimeout(() => {
320+
element.classList.remove('visible');
321+
if (element instanceof HTMLAnchorElement) {
322+
window.location.href = element.href;
323+
} else if (element.id === 'langToggle') {
324+
// Language toggle
325+
const langAttribute = reel ? reel.getAttribute('lang') : null;
326+
if (langAttribute === 'en') {
327+
reel?.setAttribute('lang', 'pt');
328+
element.textContent = 'Read in English';
329+
} else {
330+
reel?.setAttribute('lang', 'en');
331+
element.textContent = 'Read in Portuguese';
332+
}
333+
}
334+
}, DELAY);
335+
});
336+
});
337+
});
301338

302339
</script>

‎src/content/dor-cronica/drive.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ description: "This is my first story"
44
pubDate: 2023-07-09
55
cover: "../../assets/dor-cronica/drive/cover.svg"
66
coverAlt: "This is the cover image"
7+
customClasses: "dark"
78
---
89
<div slide="cover">
910

@@ -35,10 +36,10 @@ coverAlt: "This is the cover image"
3536

3637
> — What do you think happened here?
3738
>
38-
> — I'm not sure...
39+
> — I’m not sure…
3940
4041
> — O que achas que aconteceu aqui?
4142
>
42-
> — Não tenho a certeza...
43+
> — Não tenho a certeza…
4344
4445
</div>

‎src/content/extra/pmcf-intro.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
---
22
title: "Pedro, O Designer"
33
---
4-
Hi! I’m Pedro, a product designer in Lisbon, Portugal, dreaming about e-societies. I want to design interfaces that help people embrace technology, evolve, express creatively, and live better lives. [Jump directly into my contacts](#contact) or keep reading about my skills up next.
4+
Hi! I’m Pedro, a product designer in Lisbon, Portugal, dreaming about e-societies. I want to design interfaces that help people embrace technology, evolve, express creatively, and live better lives. [Jump to contacts](#contact) or keep reading about the work I do.

‎src/pages/dor-cronica.astro‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,55 @@
11
---
2-
const title = "Dor Crónica";
3-
const description = "Short stories about living as a coward. A webzine by Pedro MC Fernandes.";
4-
const customClass = "dor-cronica";
5-
const metaImage = "/meta.png";
6-
import Shell from '../layouts/Shell.astro';
7-
import WebzineCard from '../components/webzineCard.astro';
82
9-
// Content
3+
// Imports
4+
5+
import PMCF from '../layouts/PMCF.astro';
6+
import WebzineCard from '../components/webzineCard.astro';
107
import { getCollection } from 'astro:content';
118
const allZines = await getCollection('dor-cronica');
9+
10+
// Content
11+
12+
const title = "Dor Crónica";
13+
const description = "Short stories about living as a coward. A webzine by Pedro MC Fernandes.";
14+
1215
---
13-
<Shell title={ title } description={ description } customClass={ customClass } metaImage={ metaImage }>
16+
17+
<PMCF title={title} description={description}>
1418
<div id="webzineList">
15-
<h1>{ title }</h1>
19+
<h1>{title}</h1>
1620
<ul>
17-
{
18-
allZines.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
19-
.map((post) =>
20-
<WebzineCard customClasses={post.data.customClasses} url={`/${post.collection}/${post.slug}`} title={post.data.title} imageSrc={post.data.cover} imageAlt={post.data.coverAlt} />
21-
)
21+
{ allZines.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
22+
.map((post) =>
23+
<WebzineCard
24+
customClasses={post.data.customClasses}
25+
url={`/${post.collection}/${post.slug}`}
26+
title={post.data.title}
27+
imageSrc={post.data.cover}
28+
imageAlt={post.data.coverAlt} />
29+
)
2230
}
2331
</ul>
2432
</div>
25-
</Shell>
33+
</PMCF>
34+
2635
<style is:global>
36+
2737
#webzineList {
2838
box-sizing: border-box;
2939
text-align: center;
3040
width: 100%;
31-
max-width: 40em;
41+
max-width: 50em;
3242
padding: 1.5em 1em 1em;
3343
margin: 0 auto;
3444
}
35-
#webzineList > h1 {
36-
margin-bottom: 0.5em;
45+
h1 {
46+
margin: 0.25em 0 0.5em;
47+
}
48+
h2 {
49+
font-family: var(--ffLexendPeta);
50+
font-size: var(--fsBase);
51+
margin: 0;
52+
cursor: inherit;
3753
}
3854
#webzineList > ul {
3955
list-style-type: none;
@@ -60,27 +76,19 @@ const allZines = await getCollection('dor-cronica');
6076
left: 0;
6177
width: 100%;
6278
height: 100%;
63-
border-radius: var(--se);
79+
border-radius: calc(var(--s8p) + 0.5vw);
6480
overflow: hidden;
6581
text-decoration: none;
66-
color: var(--charcoal);
67-
transition: all 200ms ease-out;
82+
color: var(--ink);
83+
transition: all 0.2s ease-in;
6884
}
6985
.webzineCard.dark a {
7086
color: var(--paper);
7187
}
7288
.webzineCard a:hover {
7389
color: var(--paper);
74-
background-color: var(--blackStrong);
75-
}
76-
.webzineCard h2 {
77-
font-size: 1.5em;
78-
cursor: inherit;
79-
transition: font-size 1s linear, opacity 1s linear;
80-
}
81-
.webzineCard a.visible h2 {
82-
font-size: 8em;
83-
opacity: 0;
90+
background-color: var(--ink);
91+
opacity: 1;
8492
}
8593
.webzineCard img {
8694
position: absolute;
@@ -106,4 +114,5 @@ const allZines = await getCollection('dor-cronica');
106114
max-width: none;
107115
}
108116
}
117+
109118
</style>

‎src/pages/dor-cronica/[...slug].astro‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
2-
import Shell from '../../layouts/Shell.astro';
2+
3+
import PMCF from '../../layouts/PMCF.astro';
34
import WebzineView from '../../components/webzineView.astro';
45
import { getCollection } from 'astro:content';
56
export async function getStaticPaths() {
@@ -10,9 +11,18 @@ export async function getStaticPaths() {
1011
};
1112
const { entry } = Astro.props;
1213
const { Content } = await entry.render();
14+
1315
---
14-
<Shell title={ entry.data.title } description={ entry.data.description } author={ entry.data.author } customClass={ `wz-${entry.slug}` }>
15-
<WebzineView parentFolder={`/${entry.collection}`} author={entry.data.author} pubDate={entry.data.pubDate}>
16+
17+
<PMCF
18+
title={entry.data.title}
19+
description={entry.data.description}
20+
author={entry.data.author}
21+
customClass={`wz-${entry.slug}`}>
22+
<WebzineView
23+
parentFolder={`/${entry.collection}`}
24+
author={entry.data.author}
25+
pubDate={entry.data.pubDate}>
1626
<Content />
1727
</WebzineView>
18-
</Shell>
28+
</PMCF>

0 commit comments

Comments
 (0)