Skip to content

Commit f500797

Browse files
marshmallowrobotmarshmallowrobot
authored
375-static-workbook-images (InnerSourceCommons#524)
* new workbook image template HTML file * update generation script and section data to include workbook images
1 parent 7ee5c57 commit f500797

File tree

3 files changed

+85
-1
lines changed

3 files changed

+85
-1
lines changed

‎scripts/generate_learning_path_markdown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const getYouTubeImage = (youTubeCode) => {
9898
const workbookFrontMatter = {
9999
title: 'Workbook',
100100
contributors,
101-
image: section.image,
101+
image: section.workbookImage,
102102
weight: workbookPosition
103103
}
104104

‎scripts/section_data.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,31 @@
33
"learning_path_group": "Introduction",
44
"dirName": "introduction",
55
"workbook": "01-introduction.asciidoc",
6+
"workbookImage": "images/learn/workbooks/Learning Path-Introduction Workbook-image.png",
67
"image": "images/learn/LP_thumbnail_introduction.jpg",
78
"renderArticles": true
89
},
910
{
1011
"learning_path_group": "Trusted Committer",
1112
"dirName": "trusted-committer",
1213
"workbook": "02-trusted-committer.asciidoc",
14+
"workbookImage": "images/learn/workbooks/Learning Path-Trusted Committer Workbook-image.png",
1315
"image": "images/learn/LP_thumbnail_trustedcommitter.jpg",
1416
"renderArticles": true
1517
},
1618
{
1719
"learning_path_group": "Contributor",
1820
"dirName": "contributor",
1921
"workbook": "04-contributor.asciidoc",
22+
"workbookImage": "images/learn/workbooks/Learning Path-Contributor Workbook-image.png",
2023
"image": "images/learn/LP_thumbnail_contributor.jpg",
2124
"renderArticles": true
2225
},
2326
{
2427
"learning_path_group": "Product Owner",
2528
"dirName": "product-owner",
2629
"workbook": "03-product-owner.asciidoc",
30+
"workbookImage": "images/learn/workbooks/Learning Path-Product Owner Workbook-image.png",
2731
"image": "images/learn/LP_thumbnail_productowner.jpg",
2832
"renderArticles": false
2933
}

‎workbook/workbook-image-template.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<!--
3+
This file is for developer reference only! It is not displayed in the public facing website.
4+
Modify this file until you're happy with the end result in your browser.
5+
Then take a screenshot of the page and add the image to scource control.
6+
7+
Remember to:
8+
- Preserve current image dimensions 1024 x 576
9+
- If the dimensions cannot be preserved, maintain 16:9 aspect ratio
10+
- Use the same font face and theme colors as the website
11+
-->
12+
<html>
13+
<head>
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro&family=PT+Sans&display=swap" rel="stylesheet">
17+
<style>
18+
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;700&family=PT+Sans:wght@400;700&display=swap');
19+
* {
20+
margin: 0;
21+
padding: 0;
22+
box-sizing: border-box;
23+
}
24+
html {
25+
font-family: 'PT Sans';
26+
font-size: 12px;
27+
color: white;
28+
}
29+
body {
30+
min-height: 576px;
31+
min-width: 1024px;
32+
}
33+
.workbook-image-container {
34+
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/A_laptop_and_a_notebook_on_the_wooden_table_%28Pixabay%29.jpg/1024px-A_laptop_and_a_notebook_on_the_wooden_table_%28Pixabay%29.jpg');
35+
background-repeat: no-repeat;
36+
display: flex;
37+
flex-direction: row;
38+
height: 576px;
39+
width: 1024px;
40+
}
41+
.color-field {
42+
border-bottom: 576px solid #8BAB84;
43+
border-right: 180px solid transparent;
44+
position: relative;
45+
width: 512px;
46+
z-index: 0;
47+
}
48+
.isc-logo {
49+
margin: 2rem 0 0 2rem;
50+
position: absolute;
51+
z-index: 1;
52+
}
53+
.isc-logo img {
54+
width: 256px;
55+
}
56+
.module-name {
57+
font-family: 'Source Serif Pro', serif;
58+
font-size: 5rem;
59+
margin: 26rem 0 0 2rem;
60+
position: absolute;
61+
z-index: 1;
62+
}
63+
.workbook-title {
64+
font-family: 'PT Sans', sans-serif;
65+
font-size: 2.2rem;
66+
position: absolute;
67+
margin: 32rem 0 0 2rem;
68+
z-index: 1;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<div class="workbook-image-container">
74+
<div class="color-field"></div>
75+
<span class="isc-logo"><img src="https://innersourcecommons.org/images/logo.png" alt="InnerSource Commons"></span>
76+
<span class="module-name">Learning Path</span>
77+
<span class="workbook-title">The Trusted Committer Workbook</span>
78+
</div>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)