Skip to content

Commit 79aa3b4

Browse files
sarjonasarjona
authored
Merge pull request #164 from andrewnicols/frontPage
[docs] Update front page with feedback from marketing team
2 parents 38c7ef6 + 4f4bf71 commit 79aa3b4

File tree

16 files changed

+419
-53
lines changed

16 files changed

+419
-53
lines changed

‎.editorconfig

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,7 @@ charset = utf-8
3232
# Use spaces for all indents with a width of 4 characters.
3333
indent_style = space
3434
indent_size = 4
35+
36+
37+
[*.css]
38+
indent_size = 2

‎config/footer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ module.exports = {
7272
items: [
7373
{
7474
label: 'GitHub',
75-
href: 'https://github.com/moodlehq',
75+
href: 'https://github.com/moodle',
7676
},
7777
{
7878
html: `

‎config/navbar.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
2222
);
2323

2424
const navbar = {
25-
title: 'Moodle',
25+
title: '',
2626
logo: {
2727
alt: '',
28-
src: 'img/Moodle_M_icon.svg',
29-
height: '32px',
30-
width: '32px',
28+
src: 'img/Moodle.svg',
29+
height: '35px',
30+
width: '138px',
3131
},
3232
items: [
3333
{
@@ -75,7 +75,7 @@ const navbar = {
7575
],
7676
},
7777
{
78-
href: 'https://github.com/moodle/moodle',
78+
href: 'https://github.com/moodle',
7979
label: 'GitHub',
8080
position: 'right',
8181
},

‎docusaurus.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ const getBaseUrl = () => {
5555

5656
/** @type {import('@docusaurus/types').Config} */
5757
const config = {
58-
title: 'Moodle',
59-
tagline: '(Un)official Developer Resources',
58+
title: 'Moodle Developer Resources',
59+
tagline: 'Nurturing Moodle Developers',
6060

6161
// url: 'https://develop.moodle.org',
6262
url: process.env?.URL || 'https://moodledev.io',

‎general/community/intro.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ There are many other people contributing to Moodle in many ways. For a full list
2323

2424
## How we develop the Roadmap
2525

26-
The [Roadmap](./roadmap.md) lists the new features being developed for the next major version. This list is derived mostly from the issues with large numbers of votes in the Moodle [Tracker](https://docs.moodle.org/dev/Tracker), so please vote for what you want! Other influences include general discussion, surveys and feature requests at Moodle Moots and in the Moodle forums.
26+
The [Roadmap](./roadmap.md) lists the new features being developed for the next major version. This list is derived mostly from the issues with large numbers of votes in the Moodle [Tracker](/general/development/tracker/guide), so please vote for what you want! Other influences include general discussion, surveys and feature requests at Moodle Moots and in the Moodle forums.
2727

2828
Component leads decide on features in individual components so make your case to them!
2929

‎src/components/HomepageFeatures/index.js

Lines changed: 57 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,67 +25,99 @@ import Link from '@docusaurus/Link';
2525
const FeatureList = [
2626
{
2727
link: '/general/development/gettingstarted',
28-
title: 'Quick start',
28+
title: 'Getting started',
2929
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
3030
description: (
3131
<>
3232
New to Moodle Development?
3333
<br />
34-
Read our quick start to Moodle Development.
34+
Our quick start guide helps you take your first steps.
3535
</>
3636
),
37+
linkText: 'Get started',
3738
},
3839
{
3940
link: '/general/development/policies/codingstyle',
4041
title: 'Coding standards',
4142
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
4243
description: (
4344
<>
44-
Learn about our coding standards, styles, and conventions.
45+
Read our style guidelines, including coding standards and naming conventions.
4546
</>
4647
),
48+
linkText: 'View standards',
4749
},
4850
{
4951
link: '/docs/apis',
50-
title: 'Read our API Guides',
52+
title: 'API guides',
5153
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
5254
description: (
5355
<>
54-
Want to learn more about our APIs?
55-
<br />
56-
Learn about them through our series of deep-dive guides, complete with examples and explanations.
56+
Learn all about Moodle APIs with our deep-dive guides, complete with examples and explanations.
5757
</>
5858
),
59+
linkText: 'Read API guides',
5960
},
6061
{
6162
link: '/general/community',
62-
title: 'Join our community',
63+
title: 'Developer community',
64+
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
65+
description: (
66+
<>
67+
Join the open source community that makes Moodle.
68+
</>
69+
),
70+
linkText: 'Discover communities',
71+
},
72+
{
73+
link: '/general/releases',
74+
title: 'Release notes',
6375
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
6476
description: (
6577
<>
66-
Discover our community, and learn about our mission, and our roadmap.
78+
Technical specs and new features of Moodle releases, supported versions and more.
6779
</>
6880
),
81+
linkText: 'Check the release notes',
82+
},
83+
{
84+
link: '/docs/moodleapp',
85+
title: 'Moodle App',
86+
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
87+
description: (
88+
<>
89+
Interested in app development? Learn how to get started working with the Moodle App.
90+
</>
91+
),
92+
linkText: 'Learn more',
6993
},
7094
];
7195

7296
function Feature({
73-
Svg, link, title, description,
97+
index, link, title, description, linkText,
7498
}) {
7599
return (
76-
<div className={clsx('col col--4 ') + styles['features-box']}>
77-
<div>
78-
<div className="text--center">
79-
<Svg className={styles['feature-svg']} role="img" />
80-
</div>
81-
<div className="text--center padding-horiz--md">
82-
<Link
83-
to={link}
84-
className={styles['feature-link']}
85-
>
86-
<h3>{title}</h3>
87-
</Link>
88-
<p>{description}</p>
100+
<div className={clsx('col col--4 ', styles.card, styles[`card-${index}`])}>
101+
<div className={styles['card-inner']}>
102+
<div className={styles['card-content']}>
103+
<div className={styles['card-corner']}>
104+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
105+
<circle cx="50" cy="50" r="50" />
106+
</svg>
107+
</div>
108+
<h2>{title}</h2>
109+
<div className={styles['card-description']}>
110+
{description}
111+
</div>
112+
<div className={styles['card-button']}>
113+
<Link
114+
to={link}
115+
>
116+
<span>
117+
{linkText}
118+
</span>
119+
</Link>
120+
</div>
89121
</div>
90122
</div>
91123
</div>
@@ -96,10 +128,9 @@ export default function HomepageFeatures() {
96128
return (
97129
<section className={styles.features}>
98130
<div className="container">
99-
<h2 className="text--center">Moodle Documentation</h2>
100-
<div className="row">
131+
<div className={clsx('row', styles.cards)}>
101132
{FeatureList.map((props, idx) => (
102-
<Feature key={idx} {...props} />
133+
<Feature key={idx} index={idx} {...props} />
103134
))}
104135
</div>
105136
</div>

‎src/components/HomepageFeatures/styles.module.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,127 @@
2323
z-index: 1;
2424
content: "";
2525
}
26+
27+
.cards {
28+
display: flex;
29+
flex-wrap: wrap;
30+
justify-content: center;
31+
}
32+
33+
.card {
34+
flex: 0 0 30%;
35+
padding: 1rem;
36+
max-width: none;
37+
}
38+
39+
.card .card-inner {
40+
display: flex;
41+
flex-direction: column;
42+
justify-content: center;
43+
min-height: 16rem;
44+
border-radius: 1rem;
45+
height: 100%;
46+
overflow: hidden;
47+
position: relative;
48+
}
49+
50+
.card-content {
51+
padding: 3rem;
52+
}
53+
54+
.card-content h2 {
55+
vertical-align: middle;
56+
padding: 2rem 0;
57+
height: 6rem;
58+
}
59+
60+
.card-description {
61+
min-height: 6rem;
62+
}
63+
64+
.card-button {
65+
margin-top: 2rem;
66+
}
67+
68+
.card-button a {
69+
background-color: #194866;
70+
color: #fff;
71+
border: solid 1px #194866;
72+
border-radius: 2rem;
73+
line-height: 2rem;
74+
padding: 1rem 2rem;
75+
display: inline-block;
76+
text-decoration: none;
77+
transition: border-color 0.2s, background-color 0.2s, color 0.2s, line-heifght 0.2s;
78+
width: auto;
79+
font-size: 1.1rem;
80+
text-align: left;
81+
font-weight: 600;
82+
}
83+
84+
.card-button a:hover {
85+
background-color: #f98012;
86+
border-color: #194866;
87+
}
88+
89+
.card-corner {
90+
shape-outside: circle(30%) margin-box;
91+
width: 180px;
92+
height: 180px;
93+
margin-top: -130px;
94+
margin-right: -120px;
95+
float: right;
96+
}
97+
98+
.card-corner svg {
99+
fill: var(--ifm-color-primary);
100+
}
101+
102+
.card-0 .card-inner {
103+
background-color: #194866;
104+
color: white;
105+
}
106+
107+
.card-0 .card-corner svg {
108+
fill: #69e0ff;
109+
}
110+
111+
.card-0 .card-button a {
112+
border-color: white;
113+
color: white;
114+
}
115+
116+
.card-1 .card-inner {
117+
background-color: #fedfc1;
118+
color: #545454;
119+
}
120+
121+
.card-1 .card-corner svg {
122+
fill: #bd5b00;
123+
}
124+
125+
.card-1 .card-button a {
126+
border-color: #545454;
127+
color: #545454;
128+
background-color: transparent;
129+
}
130+
131+
.card-2 .card-inner {
132+
border-color: #69e0ff;
133+
background-color: #69e0ff;
134+
color: #194866;
135+
}
136+
137+
.card-2 .card-corner svg {
138+
fill: #bd5b00;
139+
}
140+
141+
.card-3 .card-inner {
142+
border-color: #bd5b00;
143+
background-color: #bd5b00;
144+
color: #fff;
145+
}
146+
147+
.card-3 .card-corner svg {
148+
fill: #fedfc1;
149+
}

0 commit comments

Comments
 (0)