Skip to content

Commit 92af0be

Browse files
hperrinhperrin
committed
docs(site): add repo and source links to demo pages
Closes #95
1 parent a364a86 commit 92af0be

File tree

1 file changed

+81
-26
lines changed

1 file changed

+81
-26
lines changed

‎site/src/routes/_layout.svelte

Lines changed: 81 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,29 @@
88
{#if miniWindow}
99
<IconButton class="material-icons" on:click={() => drawerOpen = !drawerOpen}>menu</IconButton>
1010
{/if}
11-
<Title component={A} href="/" class="mdc-theme--primary" style="{miniWindow ? 'padding-left: 0;' : ''}">
11+
<Title component={A} href="/" on:click={() => activeSection = null} class="mdc-theme--primary" style="{miniWindow ? 'padding-left: 0;' : ''}">
1212
Svelte Material UI
1313
</Title>
1414
</Section>
1515
<Section align="end" toolbar>
16+
{#each repos as repo}
17+
<IconButton href={repo} title={`View Component: ${repo.split('/').slice(-1)[0]}`}>
18+
<Icon>
19+
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
20+
<path fill="#000000" d="{mdiFileDocument}" />
21+
</svg>
22+
</Icon>
23+
</IconButton>
24+
{/each}
25+
{#if activeSection}
26+
<IconButton href={`https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes${activeSection.route}.svelte`} title={`View Demo Code: ${activeSection.route.split('/').slice(-1)[0]}`}>
27+
<Icon>
28+
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
29+
<path fill="#000000" d="{mdiCodeTags}" />
30+
</svg>
31+
</Icon>
32+
</IconButton>
33+
{/if}
1634
<IconButton href="https://twitter.com/SciActive">
1735
<Icon>
1836
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
@@ -64,7 +82,7 @@
6482
<script>
6583
import {onMount} from 'svelte';
6684
import {stores} from '@sapper/app';
67-
import {mdiTwitter, mdiGithubCircle} from '@mdi/js';
85+
import {mdiFileDocument, mdiCodeTags, mdiTwitter, mdiGithubCircle} from '@mdi/js';
6886
6987
import './_app.scss';
7088
@@ -87,42 +105,50 @@
87105
{
88106
name: 'Buttons',
89107
route: '/demo/button',
90-
indent: 0
108+
indent: 0,
109+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/button']
91110
},
92111
{
93112
name: 'Floating Action Button',
94113
route: '/demo/fab',
95-
indent: 1
114+
indent: 1,
115+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/fab']
96116
},
97117
{
98118
name: 'Icon Buttons',
99119
route: '/demo/icon-button',
100-
indent: 1
120+
indent: 1,
121+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/icon-button']
101122
},
102123
{
103124
name: 'Cards',
104125
route: '/demo/card',
105-
indent: 0
126+
indent: 0,
127+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/card']
106128
},
107129
{
108130
name: 'Chips',
109131
route: '/demo/chips',
110-
indent: 0
132+
indent: 0,
133+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/chips']
111134
},
112135
{
113136
name: 'Data Tables',
114137
route: '/demo/data-table',
115-
indent: 0
138+
indent: 0,
139+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/data-table']
116140
},
117141
{
118142
name: 'Dialogs',
119143
route: '/demo/dialog',
120-
indent: 0
144+
indent: 0,
145+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/dialog']
121146
},
122147
{
123148
name: 'Drawers',
124149
route: '/demo/drawer',
125-
indent: 0
150+
indent: 0,
151+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/drawer']
126152
},
127153
{
128154
name: 'Elevation',
@@ -132,7 +158,8 @@
132158
{
133159
name: 'Image List',
134160
route: '/demo/image-list',
135-
indent: 0
161+
indent: 0,
162+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/image-list']
136163
},
137164
{
138165
name: 'Inputs and Controls',
@@ -142,7 +169,8 @@
142169
{
143170
name: 'Checkboxes',
144171
route: '/demo/checkbox',
145-
indent: 1
172+
indent: 1,
173+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/checkbox']
146174
},
147175
{
148176
name: 'Floating Label',
@@ -167,12 +195,14 @@
167195
{
168196
name: 'Radio Buttons',
169197
route: '/demo/radio',
170-
indent: 1
198+
indent: 1,
199+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/radio']
171200
},
172201
{
173202
name: 'Select Menus',
174203
route: '/demo/select',
175-
indent: 1
204+
indent: 1,
205+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/select']
176206
},
177207
{
178208
name: 'Select Helper Text',
@@ -187,17 +217,20 @@
187217
{
188218
name: 'Sliders',
189219
route: '/demo/slider',
190-
indent: 1
220+
indent: 1,
221+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/slider']
191222
},
192223
{
193224
name: 'Switches',
194225
route: '/demo/switch',
195-
indent: 1
226+
indent: 1,
227+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/switch']
196228
},
197229
{
198230
name: 'Text Field',
199231
route: '/demo/textfield',
200-
indent: 1
232+
indent: 1,
233+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/textfield']
201234
},
202235
{
203236
name: 'Text Field Character Count',
@@ -217,42 +250,58 @@
217250
{
218251
name: 'Linear Progress',
219252
route: '/demo/linear-progress',
220-
indent: 0
253+
indent: 0,
254+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/linear-progress']
221255
},
222256
{
223257
name: 'Lists',
224258
route: '/demo/list',
225-
indent: 0
259+
indent: 0,
260+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/list']
226261
},
227262
{
228263
name: 'Menu Surface',
229264
route: '/demo/menu-surface',
230-
indent: 0
265+
indent: 0,
266+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/menu-surface']
231267
},
232268
{
233269
name: 'Menus',
234270
route: '/demo/menu',
235-
indent: 0
271+
indent: 0,
272+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/menu']
236273
},
237274
{
238275
name: 'Paper',
239276
route: '/demo/paper',
240-
indent: 0
277+
indent: 0,
278+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/paper']
241279
},
242280
{
243281
name: 'Ripples',
244282
route: '/demo/ripple',
245-
indent: 0
283+
indent: 0,
284+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/ripple']
246285
},
247286
{
248287
name: 'Snackbars',
249288
route: '/demo/snackbars',
250-
indent: 0
289+
indent: 0,
290+
repos: [
291+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/snackbar',
292+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/snackbar/kitchen'
293+
]
251294
},
252295
{
253296
name: 'Tabs',
254297
route: '/demo/tabs',
255-
indent: 0
298+
indent: 0,
299+
repos: [
300+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/tab',
301+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/tab-bar',
302+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/tab-indicator',
303+
'https://github.com/hperrin/svelte-material-ui/tree/master/packages/tab-scroller'
304+
]
256305
},
257306
{
258307
name: 'Tab',
@@ -282,7 +331,8 @@
282331
{
283332
name: 'Top App Bar',
284333
route: '/demo/top-app-bar',
285-
indent: 0
334+
indent: 0,
335+
repos: ['https://github.com/hperrin/svelte-material-ui/tree/master/packages/top-app-bar']
286336
},
287337
{
288338
name: 'Typography',
@@ -291,6 +341,9 @@
291341
}
292342
];
293343
344+
let activeSection = sections.find(section => 'route' in section && section.route === $page.path);
345+
$: repos = (activeSection && 'repos' in activeSection) ? activeSection.repos : [];
346+
294347
onMount(setMiniWindow);
295348
296349
function pickSection(section) {
@@ -300,6 +353,8 @@
300353
// Svelte/Sapper is not updated the components correctly, so I need this.
301354
sections.forEach(section => section.component.$set({activated: false}));
302355
section.component.$set({activated: true});
356+
357+
activeSection = 'shortcut' in section ? sections.find(sec => sec.route === section.shortcut) : section;
303358
}
304359
305360
function setMiniWindow() {

0 commit comments

Comments
 (0)