Skip to content

Commit 4570726

Browse files
NullVoxPopuliNullVoxPopuli
committed
wip
1 parent 46db1f4 commit 4570726

File tree

5 files changed

+110
-78
lines changed

5 files changed

+110
-78
lines changed

‎frontend/app/services/editor.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,12 @@ export default class EditorService extends Service {
111111

112112
@action
113113
_updateSnippet() {
114+
this.makeComponent();
115+
114116
let qps = buildQP(this.text);
115117
let base = this.router.currentURL.split('?')[0];
116118
let next = `${base}?${qps}`;
117119

118-
this.makeComponent();
119-
120120
this.router.replaceWith(next);
121121
}
122122
}

‎frontend/app/snippets.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const ALL = [
3131
{ label: 'With inline Templates', path: '/samples/live-hbs.md' },
3232
{ label: 'Styleguide Demo', path: '/samples/styleguide-demo.md' },
3333
{ label: 'Build your own REPL', path: '/samples/repl.md' },
34+
{ label: 'ember-styleguide/docs/card.md', path: '/samples/card.md' },
3435
] as const;
3536

3637
export const NAMES = ALL.map((demo) => demo.label);

‎frontend/app/styles/app.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@
1313
touch-action: manipulation;
1414
}
1515

16+
/* remove styles from ember-styleguide... */
17+
.grid > * {
18+
grid-column: unset;
19+
align-items: unset;
20+
}
21+
.grid {
22+
grid-gap: unset;
23+
}
24+
1625
/**
1726
* https://www.w3schools.com/howto/howto_css_loader.asp
1827
*/

‎frontend/ember-cli-build.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ module.exports = function (defaults) {
88
let isProduction = environment === 'production';
99

1010
let SOURCEMAPS = yn(process.env.SOURCEMAPS) ?? false;
11-
let MAXIMUM_STATIC = yn(process.env.MAXIMUM_STATIC) ?? true;
11+
// embroider doesn't know to parse markdown files in the public folder
12+
// ... yet?
13+
let MAXIMUM_STATIC = false; // yn(process.env.MAXIMUM_STATIC) ?? true;
1214
let MINIFY = yn(process.env.MINIFY) ?? isProduction;
1315

1416
console.info(`

‎frontend/public/samples/card.md‎

Lines changed: 95 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,95 +4,115 @@ A card component that serves as a content container for images, text and links.
44

55
Here is an example of a card
66

7-
```html
8-
<ul class="list-unstyled layout">
9-
<EsCard class="lg:col-2">
10-
This is a card
11-
</EsCard>
12-
</ul>
7+
```gjs live preview
8+
import EsCard from 'ember-styleguide/components/es-card';
9+
10+
<template>
11+
<ul class="list-unstyled layout">
12+
<EsCard class="lg:col-2">
13+
This is a card
14+
</EsCard>
15+
</ul>
16+
</template>
1317
```
1418

1519
You can also add an image to the card using the `@image` parameter:
1620

17-
```html
18-
<ul class="list-unstyled layout">
19-
<EsCard @image={{hash src="/ember-logo.png"}} class="lg:col-2">
20-
This is a card
21-
</EsCard>
22-
</ul>
21+
```gjs live preview
22+
import EsCard from 'ember-styleguide/components/es-card';
23+
24+
<template>
25+
<ul class="list-unstyled layout">
26+
<EsCard @image={{hash src="/ember-logo.png"}} class="lg:col-2">
27+
This is a card
28+
</EsCard>
29+
</ul>
30+
</template>
2331
```
2432

2533
By default images will be considered decorative and ignored by screen readers, but if you want to provide an alt text for the image you can provide it with the `alt` key in the `@image` hash:
2634

27-
```html
28-
<ul class="list-unstyled layout">
29-
<EsCard @image={{hash src="/ember-logo.png" alt="Ember Logo"}} class="lg:col-2">
30-
This is a card
31-
</EsCard>
32-
</ul>
35+
```gjs live preview
36+
import EsCard from 'ember-styleguide/components/es-card';
37+
38+
<template>
39+
<ul class="list-unstyled layout">
40+
<EsCard @image={{hash src="/ember-logo.png" alt="Ember Logo"}} class="lg:col-2">
41+
This is a card
42+
</EsCard>
43+
</ul>
44+
</template>
3345
```
3446

3547
Here is a fuller example of a card that has more structure in the card body
3648

37-
```html
38-
<ul class="list-unstyled layout">
39-
<EsCard @image={{hash src="/ember-logo.png"}} class="lg:col-2">
40-
<h3>Ember.js</h3>
41-
<p>A framework for ambitious web developers. Try it out!</p>
42-
<div class="flex-horizontal-between">
43-
<div><a href="#">Visit Website</a></div>
44-
<div class="text-sm text-muted">COPYRIGHT 2019 TILDE INC.</div>
45-
</div>
46-
</EsCard>
47-
</ul>
49+
```gjs live preview
50+
import EsCard from 'ember-styleguide/components/es-card';
51+
52+
<template>
53+
<ul class="list-unstyled layout">
54+
<EsCard @image={{hash src="/ember-logo.png"}} class="lg:col-2">
55+
<h3>Ember.js</h3>
56+
<p>A framework for ambitious web developers. Try it out!</p>
57+
<div class="flex-horizontal-between">
58+
<div><a href="#">Visit Website</a></div>
59+
<div class="text-sm text-muted">COPYRIGHT 2019 TILDE INC.</div>
60+
</div>
61+
</EsCard>
62+
</ul>
63+
</template>
4864
```
4965

5066
And here is a full card based page layout (which also makes use of the [ESLinkCard](/components/link-card) component) that might be useful when building sites using this component:
5167

52-
```html
53-
<ul class="list-unstyled layout my-3">
54-
<EsLinkCard
55-
class="lg:col-3"
56-
@href="http://discuss.emberjs.com"
57-
@title="Discussion Forum"
58-
@icon="discuss-logo"
59-
>
60-
<p>Post and search longer-form questions in our public forum.</p>
61-
</EsLinkCard>
62-
<EsLinkCard
63-
class="lg:col-3"
64-
@href="https://discord.gg/emberjs"
65-
@title="Discord community chat"
66-
@icon="discord-logo"
67-
>
68-
<p>Join our real-time chat server to connect with other developers and get answers.</p>
69-
</EsLinkCard>
70-
</ul>
71-
72-
<p>
73-
Beyond our core online channels, you can dig deeper with these learning resources from the
74-
community members
75-
</p>
76-
77-
<ul class="list-unstyled layout my-3">
78-
<EsCard class="lg:col-2 text-center" @icon="mic-icon">
79-
<h3>Podcasts</h3>
80-
<ul class="list-unstyled">
81-
<li><a href="embermap somewhere">Ember Weekly</a></li>
82-
<li><a href="embermap somewhere">Ember Map Podcast</a></li>
83-
</ul>
84-
</EsCard>
85-
<EsCard class="lg:col-2 text-center" @icon="book-icon">
86-
<h3>Books</h3>
87-
<ul class="list-unstyled">
88-
<li><a href="embermap somewhere">Rock and Roll with Ember.js</a></li>
89-
</ul>
90-
</EsCard>
91-
<EsCard class="lg:col-2 text-center" @icon="tv-icon">
92-
<h3>Videos</h3>
93-
<ul class="list-unstyled">
94-
<li><a href="embermap somewhere">Ember Map</a></li>
95-
</ul>
96-
</EsCard>
97-
</ul>
68+
```gjs live preview
69+
import EsCard from 'ember-styleguide/components/es-card';
70+
71+
<template>
72+
<ul class="list-unstyled layout my-3">
73+
<EsLinkCard
74+
class="lg:col-3"
75+
@href="http://discuss.emberjs.com"
76+
@title="Discussion Forum"
77+
@icon="discuss-logo"
78+
>
79+
<p>Post and search longer-form questions in our public forum.</p>
80+
</EsLinkCard>
81+
<EsLinkCard
82+
class="lg:col-3"
83+
@href="https://discord.gg/emberjs"
84+
@title="Discord community chat"
85+
@icon="discord-logo"
86+
>
87+
<p>Join our real-time chat server to connect with other developers and get answers.</p>
88+
</EsLinkCard>
89+
</ul>
90+
91+
<p>
92+
Beyond our core online channels, you can dig deeper with these learning resources from the
93+
community members
94+
</p>
95+
96+
<ul class="list-unstyled layout my-3">
97+
<EsCard class="lg:col-2 text-center" @icon="mic-icon">
98+
<h3>Podcasts</h3>
99+
<ul class="list-unstyled">
100+
<li><a href="embermap somewhere">Ember Weekly</a></li>
101+
<li><a href="embermap somewhere">Ember Map Podcast</a></li>
102+
</ul>
103+
</EsCard>
104+
<EsCard class="lg:col-2 text-center" @icon="book-icon">
105+
<h3>Books</h3>
106+
<ul class="list-unstyled">
107+
<li><a href="embermap somewhere">Rock and Roll with Ember.js</a></li>
108+
</ul>
109+
</EsCard>
110+
<EsCard class="lg:col-2 text-center" @icon="tv-icon">
111+
<h3>Videos</h3>
112+
<ul class="list-unstyled">
113+
<li><a href="embermap somewhere">Ember Map</a></li>
114+
</ul>
115+
</EsCard>
116+
</ul>
117+
</template>
98118
```

0 commit comments

Comments
 (0)