Skip to content

Commit 63c266c

Browse files
nygrenhnygrenh
committed
Implement material from markdown
1 parent 582bf1d commit 63c266c

12 files changed

Lines changed: 238 additions & 29 deletions

File tree

‎data/osa-1/5-ehtolauseet.md‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ path: "/osa-1/5-ehtolauseet"
33
title: "Ehtolauseet ja vaihtoehtoinen toiminta"
44
---
55

6+
7+
<programming-exercise name="Positiivinen luku" model_solution="50233">
8+
Tee ohjelma, joka kysyy käyttäjältä kokonaisluvun ja kertoo, onko se positiivinen (eli suurempi kuin nolla) vai ei.
9+
</programming-exercise>
10+
611
<% partial 'partials/learning_objectives', locals: { name: 'Oppimistavoitteet' } do %>
712

813
<ul>
@@ -31,20 +36,19 @@ title: "Ehtolauseet ja vaihtoehtoinen toiminta"
3136
Jotta ohjelman suoritus voisi <em>haarautua</em> esimerkiksi käyttäjän antaman syötteen perusteella, tarvitsemme käyttöömme <strong>ehtolauseen</strong>. Yksinkertaisin ehtolause on seuraavanlainen.
3237
</p>
3338

34-
35-
<% partial 'partials/code_highlight' do %>
36-
System.out.println("Hei maailma!");
37-
38-
if (true) {
39-
System.out.println("Et voi välttää tätä koodia!");
40-
}
41-
<% end %>
39+
```javascript
40+
System.out.println("Hei maailma!");
41+
if (true) {
42+
System.out.println("Et voi välttää tätä koodia!");
43+
}
44+
```
4245

4346
<% partial 'partials/sample_output' do %>
4447
Hei maailma!
4548
Et voi välttää tätä koodia!
4649
<% end %>
4750

51+
4852
<p>
4953
Ehtolause alkaa avainsanalla <code>if</code>, jota seuraa sulut. Sulkujen sisälle asetetaan lauseke, joka evaluoidaan kun ehtolause saavutetaan. Evaluoinnin tulos on totuusarvo, yllä evaluointia ei tehty, vaan ehtolauseessa käytettiin suoraan totuusarvoa.
5054
</p>
@@ -262,6 +266,10 @@ if (luku &gt; 5) {
262266
Huom! Jos et sisennä em. tavalla, tyylitarkastaja valittaa "Line xx: '}' should be on the same line."
263267
</p>
264268

269+
<programming-exercise name="Positiivinen luku", model_solution="50233">
270+
Tee ohjelma, joka kysyy käyttäjältä kokonaisluvun ja kertoo, onko se positiivinen (eli suurempi kuin nolla) vai ei.
271+
</programming-exercise>
272+
265273
<% partial 'partials/exercise', locals: { name: 'Positiivinen luku', model_solution: '50233' } do %>
266274

267275
<p>

‎data/osa-2/index.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,17 @@ title: "Osa 2"
55

66
Tässä osassa opit paljon.
77

8-
<pages-in-this-section>
8+
<pages-in-this-section></pages-in-this-section>
9+
10+
<test
11+
lolled="
12+
d\n
13+
">
14+
adsasadsa
15+
16+
d
17+
</test>
18+
19+
dsds
20+
21+
dsasadsa

‎gatsby-browser.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
* See: https://www.gatsbyjs.org/docs/browser-apis/
55
*/
66

7-
// You can delete this file if you're not using it
7+
// You can delete this file if you're not using it
8+
require("prismjs/themes/prism-solarizedlight.css")

‎gatsby-config.js‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,47 @@ module.exports = {
1212
name: 'markdown-pages',
1313
},
1414
},
15-
`gatsby-transformer-remark`,
15+
{
16+
resolve: `gatsby-transformer-remark`,
17+
options: {
18+
plugins: [
19+
{
20+
resolve: `gatsby-remark-prismjs`,
21+
options: {
22+
// Class prefix for <pre> tags containing syntax highlighting;
23+
// defaults to 'language-' (eg <pre class="language-js">).
24+
// If your site loads Prism into the browser at runtime,
25+
// (eg for use with libraries like react-live),
26+
// you may use this to prevent Prism from re-processing syntax.
27+
// This is an uncommon use-case though;
28+
// If you're unsure, it's best to use the default value.
29+
classPrefix: 'language-',
30+
// This is used to allow setting a language for inline code
31+
// (i.e. single backticks) by creating a separator.
32+
// This separator is a string and will do no white-space
33+
// stripping.
34+
// A suggested value for English speakers is the non-ascii
35+
// character '›'.
36+
inlineCodeMarker: null,
37+
// This lets you set up language aliases. For example,
38+
// setting this to '{ sh: "bash" }' will let you use
39+
// the language "sh" which will highlight using the
40+
// bash highlighter.
41+
aliases: {},
42+
// This toggles the display of line numbers alongside the code.
43+
// To use it, add the following line in src/layouts/index.js
44+
// right after importing the prism color scheme:
45+
// `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
46+
// Defaults to false.
47+
showLineNumbers: false,
48+
// If setting this to true, the parser won't handle and highlight inline
49+
// code used in markdown i.e. single backtick code like `this`.
50+
noInlineHighlight: false,
51+
},
52+
},
53+
],
54+
},
55+
},
1656
],
1757
}
58+

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@
88
"gatsby": "^2.0.56",
99
"gatsby-plugin-react-helmet": "^3.0.2",
1010
"gatsby-plugin-styled-components": "^3.0.3",
11+
"gatsby-remark-prismjs": "^3.1.0",
1112
"gatsby-source-filesystem": "^2.0.9",
1213
"gatsby-transformer-remark": "^2.1.13",
1314
"interactjs": "^1.3.4",
1415
"moment": "^2.22.2",
16+
"prismjs": "^1.15.0",
1517
"react": "^16.6.3",
1618
"react-dom": "^16.6.3",
1719
"react-helmet": "^5.2.0",

‎src/partials/CodeHighLight.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react'
2+
import PagesContext from '../contexes/PagesContext'
3+
4+
export default () => <div>Test</div>

‎src/partials/ProgrammingExercise.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react'
2+
import PagesContext from '../contexes/PagesContext'
3+
import styled from 'styled-components'
4+
5+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6+
import { faPencilAlt as icon } from '@fortawesome/free-solid-svg-icons'
7+
8+
const accentColor = '#FAAA38'
9+
10+
const Wrapper = styled.div`
11+
padding 1rem;
12+
margin-bottom: 2rem;
13+
border-left: 0.2rem solid ${accentColor};
14+
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
15+
border-radius: 4px;
16+
`
17+
18+
const StyledIcon = styled(FontAwesomeIcon)`
19+
vertical-align: middle;
20+
margin-right: 1rem;
21+
margin-left: 0.5rem;
22+
color: ${accentColor};
23+
`
24+
25+
const Header = styled.h3`
26+
font-size: 1.3rem;
27+
font-weight: normal;
28+
padding-bottom: 1rem;
29+
border-bottom: 1px solid #f7f7f9;
30+
`
31+
32+
const HeaderMuted = styled.span`
33+
color: #818a91 !important;
34+
font-size: 80%;
35+
font-weight: 400;
36+
margin-right: 0.2rem;
37+
`
38+
39+
const Body = styled.div`
40+
padding-bottom: 0.5rem;
41+
`
42+
43+
export default props => {
44+
return (
45+
<Wrapper>
46+
<Header>
47+
<StyledIcon icon={icon} size="1x" />
48+
<HeaderMuted>Tehtävä: </HeaderMuted>
49+
{props.name}
50+
</Header>
51+
<Body>{props.children}</Body>
52+
</Wrapper>
53+
)
54+
}

‎src/partials/Test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import PagesContext from '../contexes/PagesContext'
33

4-
export default () => (
5-
<PagesContext.Consumer>{value => <div>{JSON.stringify(value)}</div>}</PagesContext.Consumer>
6-
)
4+
export default (props) => {
5+
return <pre>{JSON.stringify(props, null, 2)}</pre>
6+
}

‎src/partials/Test2.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
import React from 'react'
22

3-
export default () => <div>This is test 2.</div>
3+
export default props => {
4+
console.log('props', props)
5+
return <div>{props.children}</div>
6+
}

0 commit comments

Comments
 (0)