feat: label un-audited challenges (#41002)

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
Co-authored-by: Mrugesh Mohapatra <me@raisedadead.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
This commit is contained in:
Oliver Eyton-Williams
2021-02-11 13:40:32 +01:00
committed by GitHub
parent c9de726d6a
commit 6c1f6bebed
20 changed files with 268 additions and 189 deletions

View File

@ -5,7 +5,6 @@
const introSchema = {
'responsive-web-design': {
title: 'Responsive Web Design',
isTranslated: true,
intro: [
"In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
"First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
@ -84,7 +83,6 @@ const introSchema = {
},
'javascript-algorithms-and-data-structures': {
title: 'JavaScript Algorithms and Data Structures',
isTranslated: true,
intro: [
"While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
"Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@ -179,7 +177,6 @@ const introSchema = {
},
'front-end-libraries': {
title: 'Front End Development Libraries',
isTranslated: true,
intro: [
"Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
@ -242,7 +239,6 @@ const introSchema = {
},
'data-visualization': {
title: 'Data Visualization',
isTranslated: true,
intro: [
"Data is all around us, but it doesn't mean much without shape or context.",
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@ -281,7 +277,6 @@ const introSchema = {
},
'apis-and-microservices': {
title: 'APIs and Microservices',
isTranslated: true,
intro: [
"Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
'Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.',
@ -323,7 +318,6 @@ const introSchema = {
},
'quality-assurance': {
title: 'Quality Assurance',
isTranslated: true,
intro: [
"As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@ -357,7 +351,6 @@ const introSchema = {
},
'scientific-computing-with-python': {
title: 'Scientific Computing with Python',
isTranslated: true,
intro: [
'Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.',
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@ -380,7 +373,6 @@ const introSchema = {
},
'data-analysis-with-python': {
title: 'Data Analysis with Python',
isTranslated: true,
intro: [
'Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.',
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@ -411,7 +403,6 @@ const introSchema = {
},
'information-security': {
title: 'Information Security',
isTranslated: true,
intro: [
"With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@ -443,7 +434,6 @@ const introSchema = {
},
'machine-learning-with-python': {
title: 'Machine Learning with Python',
isTranslated: true,
intro: [
'Machine learning has many practical applications that you can use in your projects or on the job.',
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@ -474,7 +464,6 @@ const introSchema = {
},
'coding-interview-prep': {
title: 'Coding Interview Prep',
isTranslated: true,
intro: [
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.'
@ -523,9 +512,7 @@ const introSchema = {
'Browse our other free certifications\n(we recommend doing these in order)',
courses: 'Courses',
expand: 'Expand',
collapse: 'Collapse',
'translation-banner': "We're still translating this certification.",
'translation-help': 'You can help here'
collapse: 'Collapse'
}
};
exports.introSchema = introSchema;

View File

@ -1,7 +1,6 @@
{
"responsive-web-design": {
"title": "响应式网页设计",
"isTranslated": true,
"intro": [
"在响应式网页设计认证中你将学习开发者用来编写网页的语言HTML超文本标记语言用于创建内容CSS级联样式表用于样式设计。",
"首先,你将通过编写一个展示猫咪图片的应用,学习 HTML 和 CSS 的基本知识。 然后,通过画企鹅来学习像 CSS 变量这样的现代技术,以及通过构建网页表单来学习无障碍的最佳实践。",
@ -80,7 +79,6 @@
},
"javascript-algorithms-and-data-structures": {
"title": "JavaScript 算法和数据结构",
"isTranslated": false,
"intro": [
"HTML 和 CSS 控制页面的内容和样式JavaScript 则用于页面交互。在 JavaScript 算法和数据结构认证中,你将学习 JavaScript 的基础知识,包括变量、 数组、 对象、 循环和函数。",
"打好基础之后,你将会通过创建算法来操作字符串、进行阶乘运算甚至计算国际空间站的轨道来应用这些知识。",
@ -175,7 +173,6 @@
},
"front-end-libraries": {
"title": "前端开发库",
"isTranslated": false,
"intro": [
"你已经熟悉了 HTML、CSS 和 JavaScript。现在学习行业中一些流行的前端库来提升你的技能吧。",
"在前端库认证中,你将学习如何使用 Bootstrap 快速设置网站样式,以及如何在 CSS 样式中添加逻辑,并使用 Sass 对其进行扩展。",
@ -238,7 +235,6 @@
},
"data-visualization": {
"title": "Data Visualization",
"isTranslated": false,
"intro": [
"Data is all around us, but it doesn't mean much without shape or context.",
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@ -277,7 +273,6 @@
},
"apis-and-microservices": {
"title": "APIs and Microservices",
"isTranslated": false,
"intro": [
"Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
"Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@ -319,7 +314,6 @@
},
"quality-assurance": {
"title": "Quality Assurance",
"isTranslated": false,
"intro": [
"As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@ -353,7 +347,6 @@
},
"scientific-computing-with-python": {
"title": "Scientific Computing with Python",
"isTranslated": false,
"intro": [
"Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@ -376,7 +369,6 @@
},
"data-analysis-with-python": {
"title": "Data Analysis with Python",
"isTranslated": false,
"intro": [
"Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@ -407,7 +399,6 @@
},
"information-security": {
"title": "Information Security",
"isTranslated": false,
"intro": [
"With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@ -439,7 +430,6 @@
},
"machine-learning-with-python": {
"title": "Machine Learning with Python",
"isTranslated": false,
"intro": [
"Machine learning has many practical applications that you can use in your projects or on the job.",
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@ -470,7 +460,6 @@
},
"coding-interview-prep": {
"title": "Coding Interview Prep",
"isTranslated": false,
"intro": [
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
"This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
@ -518,8 +507,6 @@
"browse-other": "浏览我们的其他免费认证\n我们建议你按顺序学习",
"courses": "课程",
"expand": "展开",
"collapse": "折叠",
"translation-banner": "我们正在翻译此认证的课程。",
"translation-help": "你可以帮助我们翻译。"
"collapse": "折叠"
}
}

View File

@ -291,7 +291,9 @@
"code": "码",
"tests": "测验",
"preview": "预习"
}
},
"help-translate": "We are still translating the following certifications.",
"help-translate-link": "Help us translate."
},
"donate": {
"title": "支持我们的非营利组织",
@ -374,7 +376,8 @@
"update-email-2": "在这里更新你的邮件地址:",
"email": "邮箱",
"and": "和",
"change-theme": "登录以更改主题。"
"change-theme": "登录以更改主题。",
"translation-pending": "Help us translate"
},
"icons": {
"gold-cup": "金奖杯",

View File

@ -1,7 +1,6 @@
{
"responsive-web-design": {
"title": "Responsive Web Design",
"isTranslated": true,
"intro": [
"In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
"First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
@ -80,7 +79,6 @@
},
"javascript-algorithms-and-data-structures": {
"title": "JavaScript Algorithms and Data Structures",
"isTranslated": true,
"intro": [
"While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
"Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@ -175,7 +173,6 @@
},
"front-end-libraries": {
"title": "Front End Development Libraries",
"isTranslated": true,
"intro": [
"Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
@ -238,7 +235,6 @@
},
"data-visualization": {
"title": "Data Visualization",
"isTranslated": true,
"intro": [
"Data is all around us, but it doesn't mean much without shape or context.",
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@ -277,7 +273,6 @@
},
"apis-and-microservices": {
"title": "APIs and Microservices",
"isTranslated": true,
"intro": [
"Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
"Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@ -319,7 +314,6 @@
},
"quality-assurance": {
"title": "Quality Assurance",
"isTranslated": true,
"intro": [
"As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@ -353,7 +347,6 @@
},
"scientific-computing-with-python": {
"title": "Scientific Computing with Python",
"isTranslated": true,
"intro": [
"Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@ -376,7 +369,6 @@
},
"data-analysis-with-python": {
"title": "Data Analysis with Python",
"isTranslated": true,
"intro": [
"Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@ -407,7 +399,6 @@
},
"information-security": {
"title": "Information Security",
"isTranslated": true,
"intro": [
"With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@ -439,7 +430,6 @@
},
"machine-learning-with-python": {
"title": "Machine Learning with Python",
"isTranslated": true,
"intro": [
"Machine learning has many practical applications that you can use in your projects or on the job.",
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@ -470,7 +460,6 @@
},
"coding-interview-prep": {
"title": "Coding Interview Prep",
"isTranslated": true,
"intro": [
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
"This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
@ -518,8 +507,6 @@
"browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
"courses": "Courses",
"expand": "Expand",
"collapse": "Collapse",
"translation-banner": "We're still translating this certification.",
"translation-help": "You can help here"
"collapse": "Collapse"
}
}

View File

@ -291,7 +291,9 @@
"code": "Code",
"tests": "Tests",
"preview": "Preview"
}
},
"help-translate": "We are still translating the following certifications.",
"help-translate-link": "Help us translate."
},
"donate": {
"title": "Support our nonprofit",
@ -374,7 +376,8 @@
"update-email-2": "Update your email address here:",
"email": "Email",
"and": "and",
"change-theme": "Sign in to change theme."
"change-theme": "Sign in to change theme.",
"translation-pending": "Help us translate"
},
"icons": {
"gold-cup": "Gold Cup",

View File

@ -1,7 +1,6 @@
{
"responsive-web-design": {
"title": "Diseño web responsivo",
"isTranslated": true,
"intro": [
"En esta Certificación de Diseño Web Responsivo, aprenderás los lenguajes que los desarrolladores utilizan para construir páginas web: HTML (lenguaje de marcado de hipertexto) para el contenido, y CSS (Hojas de estilo en cascada) para el diseño.",
"Primero, crearás una aplicación de fotos de gatos para aprender los conceptos básicos de HTML y CSS. Más adelante, aprenderá técnicas modernas como variables CSS mediante la construcción de un pingüino, y las mejores prácticas para la accesibilidad mediante la construcción de un formulario web.",
@ -80,7 +79,6 @@
},
"javascript-algorithms-and-data-structures": {
"title": "JavaScript Algorithms and Data Structures",
"isTranslated": false,
"intro": [
"While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
"Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@ -175,7 +173,6 @@
},
"front-end-libraries": {
"title": "Front End Development Libraries",
"isTranslated": false,
"intro": [
"Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
@ -238,7 +235,6 @@
},
"data-visualization": {
"title": "Data Visualization",
"isTranslated": false,
"intro": [
"Data is all around us, but it doesn't mean much without shape or context.",
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@ -277,7 +273,6 @@
},
"apis-and-microservices": {
"title": "APIs and Microservices",
"isTranslated": false,
"intro": [
"Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
"Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@ -319,7 +314,6 @@
},
"quality-assurance": {
"title": "Quality Assurance",
"isTranslated": false,
"intro": [
"As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@ -353,7 +347,6 @@
},
"scientific-computing-with-python": {
"title": "Scientific Computing with Python",
"isTranslated": false,
"intro": [
"Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@ -376,7 +369,6 @@
},
"data-analysis-with-python": {
"title": "Data Analysis with Python",
"isTranslated": false,
"intro": [
"Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@ -407,7 +399,6 @@
},
"information-security": {
"title": "Information Security",
"isTranslated": false,
"intro": [
"With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@ -439,7 +430,6 @@
},
"machine-learning-with-python": {
"title": "Machine Learning with Python",
"isTranslated": false,
"intro": [
"Machine learning has many practical applications that you can use in your projects or on the job.",
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@ -470,7 +460,6 @@
},
"coding-interview-prep": {
"title": "Coding Interview Prep",
"isTranslated": false,
"intro": [
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
"This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
@ -518,8 +507,6 @@
"browse-other": "Explora otras de nuestras certificaciones gratuitas\n (recomendamos hacerlas en orden)",
"courses": "Cursos",
"expand": "Expandir",
"collapse": "Colapso",
"translation-banner": "Aún estamos traduciendo esta certificación",
"translation-help": "Puedes ayudar aquí"
"collapse": "Colapso"
}
}

View File

@ -291,7 +291,9 @@
"code": "Código",
"tests": "Pruebas",
"preview": "Avance"
}
},
"help-translate": "We are still translating the following certifications.",
"help-translate-link": "Help us translate."
},
"donate": {
"title": "Apoya a nuestra organización sin fines de lucro",
@ -374,7 +376,8 @@
"update-email-2": "Actualiza tu correo electrónico aquí:",
"email": "Correo electrónico",
"and": "y",
"change-theme": "Inicia sesión para cambiar el tema."
"change-theme": "Inicia sesión para cambiar el tema.",
"translation-pending": "Help us translate"
},
"icons": {
"gold-cup": "Copa de Oro",

View File

@ -91,7 +91,7 @@ const noEmptyObjectValues = (obj, namespace = '') => {
emptyKeys.push(
noEmptyObjectValues(obj[key], namespace ? `${namespace}.${key}` : key)
);
} else if (!obj[key] && typeof obj[key] !== 'boolean') {
} else if (!obj[key]) {
emptyKeys.push(namespace ? `${namespace}.${key}` : key);
}
}

View File

@ -340,7 +340,9 @@ const translationsSchema = {
code: 'Code',
tests: 'Tests',
preview: 'Preview'
}
},
'help-translate': 'We are still translating the following certifications.',
'help-translate-link': 'Help us translate.'
},
donate: {
title: 'Support our nonprofit',
@ -445,7 +447,8 @@ const translationsSchema = {
'update-email-2': 'Update your email address here:',
email: 'Email',
and: 'and',
'change-theme': 'Sign in to change theme.'
'change-theme': 'Sign in to change theme.',
'translation-pending': 'Help us translate'
},
icons: {
'gold-cup': 'Gold Cup',

View File

@ -308,7 +308,7 @@
}
}
@media (max-width: 680px) {
@media (max-width: 600px) {
.nav-list {
min-width: 100%;
top: calc(var(--header-height) * 2);

View File

@ -4,10 +4,12 @@ import { graphql, useStaticQuery } from 'gatsby';
import i18next from 'i18next';
import { generateIconComponent } from '../../assets/icons';
import { Link } from '../helpers';
import { Link, Spacer } from '../helpers';
import LinkButton from '../../assets/icons/LinkButton';
import { dasherize } from '../../../../utils/slugs';
import './map.css';
import { isAuditedCert } from '../../../../utils/is-audited';
import { curriculumLocale } from '../../../../config/env.json';
const propTypes = {
currentSuperBlock: PropTypes.string,
@ -53,7 +55,7 @@ function renderLandingMap(nodes) {
function renderLearnMap(nodes, currentSuperBlock = '') {
nodes = nodes.filter(node => node.superBlock !== currentSuperBlock);
return (
return curriculumLocale === 'english' ? (
<ul data-test-label='learn-curriculum-map'>
{nodes.map((node, i) => (
<li key={i}>
@ -69,6 +71,55 @@ function renderLearnMap(nodes, currentSuperBlock = '') {
</li>
))}
</ul>
) : (
<ul data-test-label='learn-curriculum-map'>
{nodes
.filter(node =>
isAuditedCert(curriculumLocale, dasherize(node.superBlock))
)
.map((node, i) => (
<li key={i}>
<Link
className='btn link-btn btn-lg'
to={`/learn/${dasherize(node.superBlock)}/`}
>
<div style={linkSpacingStyle}>
{generateIconComponent(node.superBlock, 'map-icon')}
{createSuperBlockTitle(node.superBlock)}
</div>
</Link>
</li>
))}
<hr />
<div style={{ textAlign: 'center' }}>
<p style={{ marginBottom: 0 }}>{i18next.t('learn.help-translate')} </p>
<Link
external={true}
sameTab={false}
to='https://contribute.freecodecamp.org/#/how-to-translate-files'
>
{i18next.t('learn.help-translate-link')}
</Link>
<Spacer />
</div>
{nodes
.filter(
node => !isAuditedCert(curriculumLocale, dasherize(node.superBlock))
)
.map((node, i) => (
<li key={i}>
<Link
className='btn link-btn btn-lg'
to={`/learn/${dasherize(node.superBlock)}/`}
>
<div style={linkSpacingStyle}>
{generateIconComponent(node.superBlock, 'map-icon')}
{createSuperBlockTitle(node.superBlock)}
</div>
</Link>
</li>
))}
</ul>
);
}

View File

@ -17,6 +17,12 @@ const propTypes = {
function ChallengeTitle({ block, children, isCompleted, superBlock }) {
return (
<div className='challenge-title-wrap'>
<Link
className='title-translation-cta'
to='https://contribute.freecodecamp.org/#/how-to-translate-files'
>
{i18next.t('misc.translation-pending')}
</Link>
<div className='challenge-title-breadcrumbs'>
<Link
className='breadcrumb-left'
@ -38,12 +44,14 @@ function ChallengeTitle({ block, children, isCompleted, superBlock }) {
</Link>
</div>
<div className='challenge-title'>
<b>{children}</b>
{isCompleted ? (
<GreenPass
style={{ height: '15px', width: '15px', marginLeft: '7px' }}
/>
) : null}
<div className='title-text'>
<b>{children}</b>
{isCompleted ? (
<GreenPass
style={{ height: '15px', width: '15px', marginLeft: '7px' }}
/>
) : null}
</div>
</div>
</div>
);

View File

@ -4,6 +4,12 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
<div
className="challenge-title-wrap"
>
<a
className="title-translation-cta"
href="https://contribute.freecodecamp.org/#/how-to-translate-files"
rel="noopener noreferrer"
target="_blank"
/>
<div
className="challenge-title-breadcrumbs"
>
@ -31,67 +37,71 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
<div
className="challenge-title"
>
<b>
title text
</b>
<span
className="sr-only"
<div
className="title-text"
>
icons.passed
</span>
<svg
height="50"
style={
Object {
"height": "15px",
"marginLeft": "7px",
"width": "15px",
<b>
title text
</b>
<span
className="sr-only"
>
icons.passed
</span>
<svg
height="50"
style={
Object {
"height": "15px",
"marginLeft": "7px",
"width": "15px",
}
}
}
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
icons.passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="95"
stroke="var(--primary-color)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
transform="rotate(-45, 120, 106.321)"
width="128.85878"
x="55.57059"
y="91.32089"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
transform="rotate(45, 66.75, 123.75)"
width="80.66548"
x="26.41726"
y="108.75"
/>
</g>
</svg>
viewBox="0 0 200 200"
width="50"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<title>
icons.passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="95"
stroke="var(--primary-color)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
transform="rotate(-45, 120, 106.321)"
width="128.85878"
x="55.57059"
y="91.32089"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
transform="rotate(45, 66.75, 123.75)"
width="80.66548"
x="26.41726"
y="108.75"
/>
</g>
</svg>
</div>
</div>
</div>
`;

View File

@ -4,6 +4,11 @@
}
.challenge-title {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 16px;
height: 25px;
margin: 20px 0px 15px;
}
@ -71,3 +76,38 @@
text-decoration: underline;
background-color: var(--secondary-background);
}
.title-text {
text-decoration: none;
min-width: 25px;
display: inline-block;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
max-height: 25px;
word-wrap: none;
white-space: nowrap;
flex-grow: 1;
flex-shrink: 1;
padding: 0px 3px;
}
.title-translation-cta {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 16px;
height: 25px;
text-decoration: none;
color: var(--highlight-color);
background-color: var(--highlight-background);
margin-bottom: 10px;
}
.title-translation-cta:hover,
.title-translation-cta:focus {
text-decoration: none;
color: var(--highlight-background);
background-color: var(--highlight-color);
}

View File

@ -15,7 +15,7 @@ import CertChallenge from './components/CertChallenge';
import SuperBlockIntro from './components/SuperBlockIntro';
import { dasherize } from '../../../../utils/slugs';
import Block from './components/Block';
import { Spacer, Link } from '../../components/helpers';
import { Spacer } from '../../components/helpers';
import {
currentChallengeIdSelector,
userFetchStateSelector,
@ -127,33 +127,17 @@ export class SuperBlockIntroductionPage extends Component {
const nodesForSuperBlock = edges.map(({ node }) => node);
const blockDashedNames = uniq(nodesForSuperBlock.map(({ block }) => block));
const superBlockIntroObj = t(`intro:${superBlockDashedName}`);
const { title: i18nSuperBlock, isTranslated } = superBlockIntroObj;
const translationBannerText = t(`intro:misc-text.translation-banner`);
const translationBannerHelpText = t(`intro:misc-text.translation-help`);
const i18nSuperBlock = t(`intro:${superBlockDashedName}.title`);
return (
<>
<Helmet>
<title>{i18nSuperBlock} | freeCodeCamp.org</title>
</Helmet>
{isTranslated ? (
''
) : (
<Link
className='translation-banner'
external={true}
to='https://contribute.freecodecamp.org/#/how-to-translate-files'
>
<p>
{translationBannerText} <span>{translationBannerHelpText}</span>.
</p>
</Link>
)}
<Grid>
<Row className='super-block-intro-page'>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer size={isTranslated ? 2 : 3} />
<Spacer size={2} />
<SuperBlockIntro superBlock={superBlock} />
<Spacer size={2} />
<h2 className='text-center big-subheading'>

View File

@ -11,6 +11,9 @@ import Challenges from './Challenges';
import Caret from '../../../assets/icons/Caret';
import GreenPass from '../../../assets/icons/GreenPass';
import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
import { isAuditedCert } from '../../../../../utils/is-audited';
import { curriculumLocale } from '../../../../../config/env.json';
import { Link } from '../../../components/helpers/';
const mapStateToProps = (state, ownProps) => {
const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
@ -130,7 +133,19 @@ export class Block extends Component {
return isProjectBlock ? (
<div className='block'>
<h3 className='big-block-title'>{blockTitle}</h3>
<div className='block-title-wrapper'>
<h3 className='big-block-title'>{blockTitle}</h3>
{!isAuditedCert(curriculumLocale, superBlockDashedName) && (
<div className='block-cta-wrapper'>
<Link
className='block-title-translation-cta'
to='https://contribute.freecodecamp.org/#/how-to-translate-files'
>
{t('misc.translation-pending')}
</Link>
</div>
)}
</div>
{this.renderBlockIntros(blockIntroArr)}
<Challenges
challengesWithCompleted={challengesWithCompleted}
@ -139,7 +154,19 @@ export class Block extends Component {
</div>
) : (
<div className={`block ${isExpanded ? 'open' : ''}`}>
<h3 className='big-block-title'>{blockTitle}</h3>
<div className='block-title-wrapper'>
<h3 className='big-block-title'>{blockTitle}</h3>
{!isAuditedCert(curriculumLocale, superBlockDashedName) && (
<div className='block-cta-wrapper'>
<Link
className='block-title-translation-cta'
to='https://contribute.freecodecamp.org/#/how-to-translate-files'
>
{t('misc.translation-pending')}
</Link>
</div>
)}
</div>
{this.renderBlockIntros(blockIntroArr)}
<button
aria-expanded={isExpanded}

View File

@ -8,11 +8,40 @@
overflow-wrap: break-word;
}
.block-title-wrapper {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.big-block-title {
font-size: 1.5rem;
overflow-wrap: break-word;
}
.block-title-translation-cta {
white-space: nowrap;
padding: 0.2em 0.5em;
color: var(--highlight-color);
background-color: var(--highlight-background);
}
.block-title-translation-cta:hover,
.block-title-translation-cta:focus {
text-decoration: none;
padding: 0.2em 0.5em;
color: var(--highlight-background);
background-color: var(--highlight-color);
}
.block-cta-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 15px 10px 0px;
margin: 0 0 0.6rem;
}
.course-title {
font-size: 1.13rem;
overflow-wrap: break-word;
@ -178,39 +207,6 @@ button.map-title {
margin-bottom: 0;
}
a.translation-banner {
position: fixed;
top: var(--header-height);
background-color: var(--blue-dark);
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 100vw;
font-weight: 700;
font-size: 1rem;
z-index: 10;
color: var(--gray-00);
text-decoration: none;
}
a.translation-banner * {
margin: 0px;
color: var(--gray-00);
}
a.translation-banner span {
text-decoration: underline;
}
a.translation-banner:hover {
text-decoration: none;
}
a.translation-banner:hover span {
text-decoration: none;
}
@media screen and (max-width: 500px) {
.super-block-intro-page p {
font-size: 1rem;

View File

@ -300,6 +300,8 @@ ${getFullPath('english')}
challenge.time = time;
challenge.helpCategory =
challenge.helpCategory || helpCategoryMap[dasherize(blockName)];
challenge.translationPending =
lang !== 'english' && !isAuditedCert(lang, superBlock);
return prepareChallenge(challenge);
}

View File

@ -102,7 +102,8 @@ const schema = Joi.object()
),
template: Joi.string().allow(''),
time: Joi.string().allow(''),
title: Joi.string().required()
title: Joi.string().required(),
translationPending: Joi.bool()
})
.xor('helpCategory', 'isPrivate');

View File

@ -5,7 +5,7 @@
// through from Crowdin whenever they are done, but we don't show them on the
// client until we decide the entire cert is ready.
// NOTE: certificates themselves (.markdown files) are not currently being
// NOTE: certificates themselves (.yml files) are not currently being
// translated, but when they are they can be included by adding 'certificates'
// to the arrays below