Skip to content

Commit 18b4d51

Browse files
rupertnashrupertnash
committed
do setup and style
1 parent ed95776 commit 18b4d51

7 files changed

+307
-158
lines changed

‎CWL-Logo-Header.png

4.66 KB
Loading

‎index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Supercomputing with MPI meets the Common Workflow Language standards</title>
5+
<meta charset="utf-8">
6+
7+
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
8+
<script src="vestec-cwl-theme.js"></script>
9+
</head>
10+
11+
<body>
12+
13+
<script>
14+
vestec_cwl.install();
15+
var slideshow = remark.create({sourceUrl: 'presentation.md'});
16+
</script>
17+
18+
</body>
19+
</html>

‎presentation.md

+4-158
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,8 @@
1-
---
2-
title: MPI + CWL WORKS Workshop presentation
3-
tags: Templates, Talk
4-
description: View the slide with "Slide Mode".
5-
---
6-
7-
# Unleash the power!
8-
9-
<!-- Put the link to this slide here so people can follow -->
10-
slide: https://hackmd.io/p/template-Talk-slide
11-
12-
---
13-
14-
We have a collaborative session
15-
16-
please prepare laptop or smartphone to join!
17-
18-
---
19-
20-
## Who am I?
21-
22-
- Front-end developer
23-
- VSCode :heart:
24-
- I use tabs. :cat:
25-
26-
---
27-
28-
### 70% of our users are developers. Developers :heart: GitHub.
29-
30-
---
31-
32-
{%youtube E8Nj7RwXf0s %}
33-
34-
---
35-
36-
### Usage flow
37-
38-
---
39-
40-
41-
```graphviz
42-
digraph {
43-
compound=true
44-
rankdir=RL
45-
46-
graph [ fontname="Source Sans Pro", fontsize=20 ];
47-
node [ fontname="Source Sans Pro", fontsize=18];
48-
edge [ fontname="Source Sans Pro", fontsize=12 ];
49-
50-
51-
subgraph core {
52-
c [label="Hackmd-it \ncore"] [shape=box]
53-
}
54-
55-
c -> sync [ltail=session lhead=session]
56-
57-
subgraph cluster1 {
58-
concentrate=true
59-
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
60-
b [label="HackMD Editor"] [shape=box]
61-
sync [label="sync" shape=plaintext ]
62-
b -> sync [dir="both"]
63-
sync -> a [dir="both"]
64-
label="An edit session"
65-
}
66-
}
67-
```
68-
69-
---
70-
71-
### Architecture of extension
72-
73-
---
74-
75-
![](https://i.imgur.com/ij69tPh.png)
1+
template: titleslide
762

77-
---
78-
79-
## Content script
80-
81-
- Bind with each page
82-
- Manipulate DOM
83-
- Add event listeners
84-
- Isolated JavaScript environment
85-
- It doesn't break things
86-
87-
---
88-
89-
# :fork_and_knife:
90-
91-
---
92-
93-
<style>
94-
code.blue {
95-
color: #337AB7 !important;
96-
}
97-
code.orange {
98-
color: #F7A004 !important;
99-
}
100-
</style>
101-
102-
- <code class="orange">onMessage('event')</code>: Register event listener
103-
- <code class="blue">sendMessage('event')</code>: Trigger event
3+
# Supercomputing with MPI meets the Common Workflow Language standards
4+
# An experience report
5+
## Rupert W. Nash, Michael R. Crusoe, Max Kontak, Nick Brown
1046

1057
---
1068

107-
# :bulb:
108-
109-
---
110-
111-
- Dead simple API
112-
- Only cares about application logic
113-
114-
---
115-
116-
```typescript
117-
import * as Channeru from 'channeru'
118-
119-
// setup channel in different page environment, once
120-
const channel = Channeru.create()
121-
```
122-
123-
---
124-
125-
```typescript
126-
// in background script
127-
const fakeLogin = async () => true
128-
129-
channel.answer('isLogin', async () => {
130-
return await fakeLogin()
131-
})
132-
```
133-
134-
<br>
135-
136-
```typescript
137-
// in inject script
138-
const isLogin = await channel.callBackground('isLogin')
139-
console.log(isLogin) //-> true
140-
```
141-
142-
---
143-
144-
# :100: :muscle: :tada:
145-
146-
---
147-
148-
### Wrap up
149-
150-
- Cross envornment commnication
151-
- A small library to solve messaging pain
152-
- TypeScript Rocks :tada:
153-
154-
---
155-
156-
### Thank you! :sheep:
157-
158-
You can find me on
159-
160-
- GitHub
161-
- Twitter
162-
- or email me

‎style.css

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
2+
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
3+
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
4+
5+
body { font-family: 'Droid Serif'; }
6+
h1, h2, h3 {
7+
color: rgb(69,88,115);
8+
font-family: 'Yanone Kaffeesatz';
9+
font-weight: normal;
10+
}
11+
.remark-code, .remark-inline-code {
12+
font-family: 'Ubuntu Mono';
13+
}
14+
15+
/* VESTEC blue = rgb(69,88,115) */
16+
17+
h1 {
18+
position: relative;
19+
z-index: 10;
20+
}
21+
22+
.remark-slide-number {
23+
color: rgb(69,88,115);
24+
opacity: 1.0;
25+
}
26+
27+
.remark-code {
28+
font-size: 16px;
29+
}
30+
.remark-slide-content {
31+
padding: 1em 2em 1em 2em;
32+
}
33+
34+
/* Fix the footer bar in position */
35+
div.footer {
36+
position: fixed;
37+
bottom: 0px;
38+
left: 0px;
39+
height: 60px;
40+
width: 100%;
41+
text-align: left;
42+
}
43+
44+
div.footer:before {
45+
content: "";
46+
display: inline-block;
47+
height: 100%;
48+
vertical-align: middle;
49+
}
50+
51+
div.footer img {
52+
vertical-align: middle;
53+
max-height: 60px;
54+
padding-left: 20px;
55+
}
56+
57+
div.footer p {
58+
position: relative;
59+
left: 20px;
60+
bottom: 8px;
61+
font-size: smaller;
62+
}
63+
64+
/* Make title box VESTEC blue */
65+
div.titlebox {
66+
background-color: rgb(69,88,115);
67+
color: white;
68+
padding: 1em 0;
69+
}
70+
/* And the text in it white */
71+
div.titlebox h1, h2, h3 {
72+
color: white;
73+
}
74+
75+
/* Fix footnotes box to just above foot box */
76+
div.footnotes {
77+
position: fixed;
78+
bottom: 40px;
79+
font-size: smaller;
80+
}
81+
82+
/* Enable two column layout */
83+
.columns {
84+
display: flex;
85+
}
86+
.col {
87+
width: 50%;
88+
padding: 0 1%;
89+
box-sizing: border-box;
90+
}
91+
92+
93+
@page {
94+
size: 908px 681px;
95+
margin: 0;
96+
}
97+
98+
@media print {
99+
.remark-slide-scaler {
100+
width: 100% !important;
101+
height: 100% !important;
102+
transform: scale(1) !important;
103+
top: 0 !important;
104+
left: 0 !important;
105+
}
106+
}

‎templates.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: base
2+
layout: true
3+
<div class="footer">![:footer]()</div>
4+
5+
---
6+
7+
name: titleslide
8+
template: base
9+
layout: true
10+
class: center, middle
11+
.titlebox[
12+
{{content}}
13+
]
14+
15+
---
16+
17+
name: slide
18+
template: base
19+
layout: true
20+
21+
---

0 commit comments

Comments
 (0)