generated from vincenzopalazzo/talks
official version of the presentation
Signed-off-by: Vincenzo Palazzo <vincenzopalazzodev@gmail.com>
This commit is contained in:
parent
eaad54ebdd
commit
0b0992839c
|
@ -1 +1,2 @@
|
||||||
node_modules
|
node_modules
|
||||||
|
.vercel
|
||||||
|
|
80
README.md
80
README.md
|
@ -1,79 +1,3 @@
|
||||||
# Reveal.js + Svelte + Vite
|
# Kangrejos-2023-RustForLinux-talk
|
||||||
|
|
||||||
![Svelte Slides logo](public/svelte-slides.jpg)
|
My presentation given at the Rust for Linux Kernel summit https://kangrejos.com/
|
||||||
|
|
||||||
This template should help get you started creating awesome slide decks using [Reveal.js](https://revealjs.com) with Svelte in Vite.
|
|
||||||
|
|
||||||
## How does it work?
|
|
||||||
|
|
||||||
- Your slides are both Svelte components and Reveal.js slides.
|
|
||||||
- You can have one or more slides (using `<section/>`) within a single Svelte component.
|
|
||||||
- Create new slides as Svelte components under `src/slides`
|
|
||||||
- Just import and include your components inside the `src/Presentation.svelte` component
|
|
||||||
- That's it, you are good to go.
|
|
||||||
|
|
||||||
## Configuring Reveal.js
|
|
||||||
|
|
||||||
You can customize the `Reveal.js` setup in `src/config.js`.
|
|
||||||
|
|
||||||
## Sample slide
|
|
||||||
|
|
||||||
### src/Title.svelte
|
|
||||||
|
|
||||||
You can insert code blocks using template literals inside `<pre>` and `<code>` elements.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<section>
|
|
||||||
<h1>This is a sample slide</h1>
|
|
||||||
<ul>
|
|
||||||
<li>Apples</li>
|
|
||||||
<li>Oranges</li>
|
|
||||||
<li>Grapes</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Sample code</h2>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code data-line-numbers data-trim data-no-escape>
|
|
||||||
{`
|
|
||||||
const name = "hello world";
|
|
||||||
if(name === 'hello') {
|
|
||||||
console.log('world');
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</section>
|
|
||||||
```
|
|
||||||
|
|
||||||
### src/Presentation.svelte
|
|
||||||
|
|
||||||
The slide order is the order in which you layout your Svelte components.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script>
|
|
||||||
import Title from "./slides/Title.svelte";
|
|
||||||
import Love from "./slides/Love.svelte";
|
|
||||||
import GettingStarted from "./slides/GettingStarted.svelte";
|
|
||||||
|
|
||||||
const partner = ["Svelte", "Reveal.js"];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<title />
|
|
||||||
<Love {partner} />
|
|
||||||
<GettingStarted />
|
|
||||||
```
|
|
||||||
|
|
||||||
## Inspiration
|
|
||||||
|
|
||||||
This project is inspired by [svelte-reveal-boilerplate](https://github.com/micschwarz/svelte-reveal-boilerplate/)
|
|
||||||
|
|
||||||
## Recommended IDE Setup
|
|
||||||
|
|
||||||
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
|
||||||
|
|
||||||
## References
|
|
||||||
|
|
||||||
- [Svelte](https://svelte.dev)
|
|
||||||
- [Vite.js](https://vitejs.dev)
|
|
||||||
- [Reveal.js](https://revealjs.com)
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -2,14 +2,8 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
href="https://brink.dev/assets/images/b_logo_whitebg.png"
|
|
||||||
/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Svelte + Reveal.js Boilerplate</title>
|
<script type="module" crossorigin src="/assets/index.9e11991c.js"></script>
|
||||||
<script type="module" crossorigin src="/assets/index.07220a6d.js"></script>
|
|
||||||
<link rel="stylesheet" href="/assets/index.f526871f.css">
|
<link rel="stylesheet" href="/assets/index.f526871f.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -2,13 +2,8 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
href="https://brink.dev/assets/images/b_logo_whitebg.png"
|
|
||||||
/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Svelte + Reveal.js Boilerplate</title>
|
<title>Rust for Linux kernel summit 2023 </title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
4
justfile
4
justfile
|
@ -20,5 +20,5 @@ check:
|
||||||
clean:
|
clean:
|
||||||
{{CC}} clean
|
{{CC}} clean
|
||||||
|
|
||||||
deply:
|
deploy:
|
||||||
@echo "I do not know how to deploy this stuff"
|
{{CC}} x vercel --prod
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -14,7 +14,7 @@
|
||||||
"prettier": "^2.8.3",
|
"prettier": "^2.8.3",
|
||||||
"prettier-plugin-svelte": "^2.9.0",
|
"prettier-plugin-svelte": "^2.9.0",
|
||||||
"svelte": "^3.49.0",
|
"svelte": "^3.49.0",
|
||||||
"vercel": "^28.13.2",
|
"vercel": "^28.20.0",
|
||||||
"vite": "^3.0.0"
|
"vite": "^3.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1,5 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import Title from "./slides/Title.svelte";
|
import Title from "./slides/Title.svelte";
|
||||||
|
import Intro from "./slides/Intro.svelte";
|
||||||
|
import NowOnTheKernel from "./slides/NowOnTheKernel.svelte";
|
||||||
|
import Solution from "./slides/Solution.svelte";
|
||||||
|
import UseCase from "./slides/UseCase.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Title />
|
<Title />
|
||||||
|
<Intro />
|
||||||
|
<NowOnTheKernel />
|
||||||
|
<Solution />
|
||||||
|
<UseCase />
|
||||||
|
|
|
@ -0,0 +1,80 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<p
|
||||||
|
style="background-color: #373A3C; color: #ADB5BD;border-radius:25px;width:30%;text-align:left;padding:8px"
|
||||||
|
>
|
||||||
|
<span style="color:green;diplay:flex;margin-left:14px">➜</span>
|
||||||
|
<span style="color:#ADB5BD">~</span> whoami
|
||||||
|
</p>
|
||||||
|
<q>Random Person with Ramdom Side Project!</q>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h4>Some of my Current Interest</h4>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment">
|
||||||
|
Working on the Rust compiler
|
||||||
|
<ul>
|
||||||
|
<li>Project Leader of <a href="#TODO">Macros Working Group</a></li>
|
||||||
|
<li>Project Member of <a href="#TODO">Async Working Group</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="fragment">
|
||||||
|
Working in the linux kernel through the <a
|
||||||
|
href="https://github.com/Rust-for-Linux">Rust for Linux</a
|
||||||
|
> Initiative;
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<q>C macros are difficult to read</q>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="https://cdn.pvs-studio.com/import/docx/blog/0583_Perl5/image2.png?ver=07-27-2023-02-50-27"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<pre>
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
while let Some(token) = body_it.next() {
|
||||||
|
match token {
|
||||||
|
TokenTree::Ident(ident) if ident.to_string() == "fn" => {
|
||||||
|
let fn_name = match body_it.next() {
|
||||||
|
Some(TokenTree::Ident(ident)) =>
|
||||||
|
ident.to_string(),
|
||||||
|
_ => continue,
|
||||||
|
};
|
||||||
|
functions.insert(fn_name);
|
||||||
|
}
|
||||||
|
// ...
|
||||||
|
_ => (),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<pre>
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
macro_rules! quote_spanned {
|
||||||
|
($span:expr => $($tt:tt)*) => {{
|
||||||
|
let mut tokens;
|
||||||
|
#[allow(clippy::vec_init_then_push)]
|
||||||
|
{
|
||||||
|
tokens = ::std::vec::Vec::new();
|
||||||
|
let span = $span;
|
||||||
|
quote_spanned!(@proc tokens span $($tt)*);
|
||||||
|
}
|
||||||
|
::proc_macro::TokenStream::from_iter(tokens)
|
||||||
|
}};
|
||||||
|
(@proc $v:ident $span:ident) => {};
|
||||||
|
....
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
</section>
|
|
@ -0,0 +1,56 @@
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<p
|
||||||
|
style="background-color: #373A3C; color: #ADB5BD;border-radius:25px;width:50%;text-align:left;padding:8px"
|
||||||
|
>
|
||||||
|
<span style="color:green;diplay:flex;margin-left:14px">➜</span>
|
||||||
|
<span style="color:#ADB5BD">~</span> ls -la linux/rust/macros
|
||||||
|
</p>
|
||||||
|
<h3>Into the Kernel Right Now</h3>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<ul>
|
||||||
|
<li>All the macros are defined in the same directory; (good for now)</li>
|
||||||
|
<li class="fragment">
|
||||||
|
All the macros are parsing almost the same syntax; (impl/struct)
|
||||||
|
</li>
|
||||||
|
<pre class="fragment">
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
#[proc_macro]
|
||||||
|
pub fn foo(body: TokenStream) -> TokenStream {
|
||||||
|
for tt in body.into_iter() {
|
||||||
|
match tt {
|
||||||
|
TokenTree::Ident(_) => eprintln!("Ident"),
|
||||||
|
TokenTree::Punct(_) => eprintln!("Punct"),
|
||||||
|
TokenTree::Literal(_) => eprintln!("Literal"),
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return TokenStream::new();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p><strong>Drawbacks</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>Code duplication</li>
|
||||||
|
<li class="fragment">
|
||||||
|
Bigger patch when there is a new syntax to support. (Good for seek jobs)
|
||||||
|
</li>
|
||||||
|
<li class="fragment">
|
||||||
|
There is no common pattern, so everyone use their own mental pattern for
|
||||||
|
parsing
|
||||||
|
</li>
|
||||||
|
<li class="fragment">
|
||||||
|
Copy and Paste do not work without <strong>eprintln</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</section>
|
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section>
|
<section>
|
||||||
<h3>Title of the presentation 🦀</h3>
|
<h3>Procedural Macro in the Linux Kernel 🦀</h3>
|
||||||
<img
|
<img
|
||||||
src="https://avatars.githubusercontent.com/u/17150045?v=4"
|
src="https://avatars.githubusercontent.com/u/17150045?v=4"
|
||||||
width="120"
|
width="120"
|
||||||
|
@ -16,14 +16,7 @@
|
||||||
>
|
>
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<p><small> Date x.x.x</small></p>
|
<p><small> Spain 17-09-2023 </small></p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h3>Overview</h3>
|
|
||||||
<ul>
|
|
||||||
<li> 🦕</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -0,0 +1,109 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<p
|
||||||
|
style="background-color: #373A3C; color: #ADB5BD;border-radius:25px;width:90%;text-align:left;padding:8px"
|
||||||
|
>
|
||||||
|
<span style="color:green;diplay:flex;margin-left:14px">➜</span>
|
||||||
|
<span style="color:#ADB5BD">~</span> cat kproc_macros/exaperiments/README.md
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Dogfooting</h3>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<pre>
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
let plugin = plugin! {
|
||||||
|
state: State::new(),
|
||||||
|
dynamic: true,
|
||||||
|
notification: [],
|
||||||
|
methods: [],
|
||||||
|
hooks: [],
|
||||||
|
};
|
||||||
|
plugin.start();
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<pre>
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
#[rpc_method(
|
||||||
|
rpc_name = "foo_macro",
|
||||||
|
description = "This is a simple and short description"
|
||||||
|
)]
|
||||||
|
pub fn foo_rpc(plugin: &mut Plugin<State>, request: Value) -> Result<Value, PluginError> {
|
||||||
|
let response = json!({"is_dynamic": plugin.dynamic, "rpc_request": request});
|
||||||
|
Ok(response)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
User library: <a src="https://github.com/rsmicro/lexopt-derive"
|
||||||
|
>lexopt-derive</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<pre>
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
pub fn generate_impl(struct_tok: &StructToken) -> TokenStream {
|
||||||
|
let gen = if let Some(str_gen) = &struct_tok.generics {
|
||||||
|
format!("{}", str_gen)
|
||||||
|
} else {
|
||||||
|
"".to_owned()
|
||||||
|
};
|
||||||
|
let name_attr = &struct_tok.fields[0].identifier;
|
||||||
|
let ty = struct_tok.fields[0].ty.to_string();
|
||||||
|
let code = format!(
|
||||||
|
"impl{} {}{} {{ \
|
||||||
|
fn get_{name_attr}(&self) -> {ty} {{ \
|
||||||
|
return self.{name_attr}.clone()\
|
||||||
|
}} \
|
||||||
|
\
|
||||||
|
fn set_{name_attr}(&self, inner: {ty}) {{ }}
|
||||||
|
}}",
|
||||||
|
gen, struct_tok.name, gen,
|
||||||
|
);
|
||||||
|
return code.parse().unwrap();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<pre>
|
||||||
|
<code data-trim data-noescape>
|
||||||
|
<script type="text/template">
|
||||||
|
editor!{
|
||||||
|
@foreach ${attributes} {
|
||||||
|
println!("{}", ${ir});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<p class="fragment">
|
||||||
|
Or just finish to implement <a
|
||||||
|
src="https://doc.rust-lang.org/proc_macro/fn.quote.html">quote</a
|
||||||
|
> in the std
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
Please complain at <a src="https://github.com/rsmicro/kproc-macros"
|
||||||
|
>https://github.com/rsmicro/kproc-macros</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h3>Thanks!</h3>
|
||||||
|
</section>
|
||||||
|
</section>
|
Loading…
Reference in New Issue