Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c246e8e

Browse filesBrowse files
vadimkorrvadimkorr
committed
Add layouts
1 parent 8744669 commit c246e8e
Copy full SHA for c246e8e

File tree

3 files changed

+74
-2
lines changed
Filter options

3 files changed

+74
-2
lines changed

‎rollup.config.js

Copy file name to clipboardExpand all lines: rollup.config.js
+7-2Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { join } from 'path';
12
import svelte from 'rollup-plugin-svelte'
23
import commonjs from '@rollup/plugin-commonjs'
34
import resolve from '@rollup/plugin-node-resolve'
45
import livereload from 'rollup-plugin-livereload'
56
import { terser } from 'rollup-plugin-terser'
67
import css from 'rollup-plugin-css-only'
78
import { mdsvex } from 'mdsvex'
8-
import remarkEmoji from 'remark-emoji'
9+
// import remarkEmoji from 'remark-emoji'
910

1011
const production = !process.env.ROLLUP_WATCH
1112

@@ -52,7 +53,11 @@ export default {
5253
},
5354
remarkPlugins: [
5455
// remarkEmoji
55-
]
56+
],
57+
layout: {
58+
_: join(__dirname, './src/mdx-layouts/MainLayout.svelte'),
59+
menu: join(__dirname, './src/mdx-layouts/MenuLayout.svelte')
60+
}
5661
}),
5762
}),
5863

‎src/mdx-layouts/MainLayout.svelte

Copy file name to clipboard
+31Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script>
2+
export let subtitle = ''
3+
</script>
4+
<div class="main-container">
5+
<div class="header-container">
6+
<h1>Counter</h1>
7+
<h2>{subtitle}</h2>
8+
</div>
9+
<div class="content-container">
10+
<slot></slot>
11+
</div>
12+
</div>
13+
14+
<style>
15+
.main-container {
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
.header-container {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
height: 200px;
25+
width: 100%;
26+
background-color: yellowgreen;
27+
}
28+
.content-container {
29+
padding: 15px;
30+
}
31+
</style>

‎src/mdx-layouts/MenuLayout.svelte

Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
export let items = []
3+
</script>
4+
<div class="main-container">
5+
<div class="header-container">
6+
{#each items as { title, link }}
7+
<a target="_blank" href={link}>
8+
{title}
9+
</a>
10+
{/each}
11+
</div>
12+
<div class="content-container">
13+
<slot></slot>
14+
</div>
15+
</div>
16+
17+
<style>
18+
.main-container {
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
.header-container {
23+
display: flex;
24+
flex-direction: column;
25+
align-items: flex-start;
26+
justify-content: center;
27+
height: 200px;
28+
width: 100%;
29+
padding: 20px;
30+
box-sizing: border-box;
31+
background-color: yellowgreen;
32+
}
33+
.content-container {
34+
padding: 15px;
35+
}
36+
</style>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.