73 |
75 |
76 |
77 |
87 |
88 |
89 |
90 |
94 |
100 |
101 |
102 |
103 |
104 |
15 |
57 |
16 | Banner designer by
18 | Browserku
22 |
23 |
56 |
24 |
45 |
46 |
--------------------------------------------------------------------------------
/src/components/DataEditor.vue:
--------------------------------------------------------------------------------
1 |
37 |
38 |
39 |
25 | {{ props.title }}
26 |
41 |
42 |
43 |
44 |
40 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/HelpDialog.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
20 |
21 |
29 |
30 |
44 |
45 | Template
22 |
23 |
28 | 24 | The template section supports Vue template syntax and TailwindCSS/UnoCSS class names, 25 | you can reference the data in the data section. 26 |
27 |Fonts
31 |
32 |
43 | Some built-in font class names are available for you to use:
33 |-
34 |
- font-sans 35 |
- font-mono 36 |
- font-roboto 37 |
- font-open-sans 38 |
- font-lobster 39 |
- font-lato 40 |
We are going to support using custom Google fonts soon.
42 |
120 |
129 |
207 |
130 |
174 |
131 |
135 | {{ selectedExampleName }}
138 |
152 |
153 |
154 |
171 |
172 |
173 |
155 |
170 |
156 | Choose a template:
157 |
158 |
159 |
164 |
168 |
169 |
165 | {{ example.name }}
166 |
167 |
175 |
205 |
206 |
52 |
55 |
56 |
--------------------------------------------------------------------------------
/src/components/UrlDialog.vue:
--------------------------------------------------------------------------------
1 |
48 |
49 |
50 |
125 |
126 |
--------------------------------------------------------------------------------
/src/css/md.css:
--------------------------------------------------------------------------------
1 | .md > * {
2 | @apply my-3;
3 | }
4 |
5 | .md > *:first-child {
6 | @apply mt-0;
7 | }
8 |
9 | .md > *:last-child {
10 | @apply mb-0;
11 | }
12 |
13 | .md ul {
14 | @apply list-disc pl-5;
15 | }
16 |
--------------------------------------------------------------------------------
/src/css/prism.css:
--------------------------------------------------------------------------------
1 | .token.comment,
2 | .token.prolog,
3 | .token.cdata {
4 | color: hsl(230, 4%, 64%);
5 | }
6 |
7 | .token.doctype,
8 | .token.punctuation,
9 | .token.entity {
10 | color: hsl(230, 8%, 24%);
11 | }
12 |
13 | .token.attr-name,
14 | .token.class-name,
15 | .token.boolean,
16 | .token.constant,
17 | .token.number,
18 | .token.atrule {
19 | color: hsl(35, 99%, 36%);
20 | }
21 |
22 | .token.keyword {
23 | color: hsl(301, 63%, 40%);
24 | }
25 |
26 | .token.property,
27 | .token.tag,
28 | .token.symbol,
29 | .token.deleted,
30 | .token.important {
31 | color: hsl(5, 74%, 59%);
32 | }
33 |
34 | .token.selector,
35 | .token.string,
36 | .token.char,
37 | .token.builtin,
38 | .token.inserted,
39 | .token.regex,
40 | .token.attr-value,
41 | .token.attr-value > .token.punctuation {
42 | color: hsl(119, 34%, 47%);
43 | }
44 |
45 | .token.variable,
46 | .token.operator,
47 | .token.function {
48 | color: hsl(221, 87%, 60%);
49 | }
50 |
51 | .token.url {
52 | color: hsl(198, 99%, 37%);
53 | }
54 |
55 | /* HTML overrides */
56 | .token.attr-value > .token.punctuation.attr-equals,
57 | .token.special-attr > .token.attr-value > .token.value.css {
58 | color: hsl(230, 8%, 24%);
59 | }
60 |
61 | /* CSS overrides */
62 | .language-css .token.selector {
63 | color: hsl(5, 74%, 59%);
64 | }
65 |
66 | .language-css .token.property {
67 | color: hsl(230, 8%, 24%);
68 | }
69 |
70 | .language-css .token.function,
71 | .language-css .token.url > .token.function {
72 | color: hsl(198, 99%, 37%);
73 | }
74 |
75 | .language-css .token.url > .token.string.url {
76 | color: hsl(119, 34%, 47%);
77 | }
78 |
79 | .language-css .token.important,
80 | .language-css .token.atrule .token.rule {
81 | color: hsl(301, 63%, 40%);
82 | }
83 |
84 | /* JS overrides */
85 | .language-javascript .token.operator {
86 | color: hsl(301, 63%, 40%);
87 | }
88 |
89 | .language-javascript
90 | .token.template-string
91 | > .token.interpolation
92 | > .token.interpolation-punctuation.punctuation {
93 | color: hsl(344, 84%, 43%);
94 | }
95 |
96 | /* JSON overrides */
97 | .language-json .token.operator {
98 | color: hsl(230, 8%, 24%);
99 | }
100 |
101 | .language-json .token.null.keyword {
102 | color: hsl(35, 99%, 36%);
103 | }
104 |
105 | /* MD overrides */
106 | .language-markdown .token.url,
107 | .language-markdown .token.url > .token.operator,
108 | .language-markdown .token.url-reference.url > .token.string {
109 | color: hsl(230, 8%, 24%);
110 | }
111 |
112 | .language-markdown .token.url > .token.content {
113 | color: hsl(221, 87%, 60%);
114 | }
115 |
116 | .language-markdown .token.url > .token.url,
117 | .language-markdown .token.url-reference.url {
118 | color: hsl(198, 99%, 37%);
119 | }
120 |
121 | .language-markdown .token.blockquote.punctuation,
122 | .language-markdown .token.hr.punctuation {
123 | color: hsl(230, 4%, 64%);
124 | font-style: italic;
125 | }
126 |
127 | .language-markdown .token.code-snippet {
128 | color: hsl(119, 34%, 47%);
129 | }
130 |
131 | .language-markdown .token.bold .token.content {
132 | color: hsl(35, 99%, 36%);
133 | }
134 |
135 | .language-markdown .token.italic .token.content {
136 | color: hsl(301, 63%, 40%);
137 | }
138 |
139 | .language-markdown .token.strike .token.content,
140 | .language-markdown .token.strike .token.punctuation,
141 | .language-markdown .token.list.punctuation,
142 | .language-markdown .token.title.important > .token.punctuation {
143 | color: hsl(5, 74%, 59%);
144 | }
145 |
146 | /* General */
147 | .token.bold {
148 | font-weight: bold;
149 | }
150 |
151 | .token.comment,
152 | .token.italic {
153 | font-style: italic;
154 | }
155 |
156 | .token.entity {
157 | cursor: help;
158 | }
159 |
160 | .token.namespace {
161 | opacity: 0.8;
162 | }
163 |
164 | /* Plugin overrides */
165 | /* Selectors should have higher specificity than those in the plugins' default stylesheets */
166 |
167 | /* Show Invisibles plugin overrides */
168 | .token.token.tab:not(:empty):before,
169 | .token.token.cr:before,
170 | .token.token.lf:before,
171 | .token.token.space:before {
172 | color: hsla(230, 8%, 24%, 0.2);
173 | }
174 |
--------------------------------------------------------------------------------
/src/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .tiny-button {
6 | @apply border inline-flex px-2 h-5 items-center rounded-lg bg-white hover:bg-zinc-50;
7 | }
8 |
9 | .v-popper--theme-info-tooltip {
10 | @apply text-xs;
11 | }
12 |
--------------------------------------------------------------------------------
/src/iframe.ts:
--------------------------------------------------------------------------------
1 | import { handleActions } from 'typed-worker';
2 | import { toPng } from 'dom-to-image-retina';
3 | import { createApp } from 'petite-vue';
4 | import { Config, defaultConfig } from './lib/config';
5 |
6 | const root = document.getElementById('root')!;
7 | const unoCSS = document.getElementById('uno-css')!;
8 |
9 | const download = async () => {
10 | const dataUrl = await toPng(root);
11 | const a = document.createElement('a');
12 | a.href = dataUrl;
13 | a.download = 'preview.png';
14 | a.click();
15 | };
16 |
17 | let app: ReturnType
23 |
26 |
39 | `,
40 | data: {
41 | title: 'Teachers Reveal Why They Are Quitting Their Jobs',
42 | description:
43 | 'Amid budget cuts, restrictive curricula, and increasing threats to their safety, more and more teachers are opting to switch careers. The Onion asked teachers to explain why they are quitting their jobs, and this is what they said.',
44 | author: 'The Onion',
45 | avatar: 'https://cdn.jsdelivr.net/gh/egoist-bot/images@main/upic/nIib90.png',
46 | bg: 'https://cdn.jsdelivr.net/gh/egoist-bot/images@main/upic/Fsohqo.jpg'
47 | }
48 | },
49 | {
50 | name: 'Zenn Blog Post',
51 | template: html`
52 |
27 |
38 | {{title}}
28 |{{description}}
29 |
30 |
37 |
31 | ![]()
32 | {{author}}
33 |
34 | -
35 | April 4
36 |
55 |
68 | `,
69 | data: {
70 | title:
71 | 'Google Analytics is removing Universal Analytics and deleting all of your historical data',
72 | author: 'John Doe',
73 | logo: 'https://cdn.jsdelivr.net/gh/egoist-bot/images@main/upic/AMePnP.png',
74 | avatar:
75 | 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=280&q=80'
76 | }
77 | }
78 | ];
79 |
--------------------------------------------------------------------------------
/src/lib/highlight.ts:
--------------------------------------------------------------------------------
1 | import Prism from 'prismjs';
2 |
3 | export const highlightCSS = (css: string) => {
4 | return Prism.highlight(css, Prism.languages.css, 'css');
5 | };
6 |
--------------------------------------------------------------------------------
/src/lib/html-tag.ts:
--------------------------------------------------------------------------------
1 | import redent from 'redent';
2 |
3 | // we use this so pretty can format the html inside
4 | export const html = (strings: TemplateStringsArray, ...values: any[]) => {
5 | return redent(
6 | strings.reduce((acc, str, i) => {
7 | return acc + str + (values[i] || '');
8 | }, '')
9 | ).trim();
10 | };
11 |
--------------------------------------------------------------------------------
/src/lib/use-copy.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue';
2 | import { clipboardCopy } from './copy';
3 |
4 | export const useCopy = (getText: () => string) => {
5 | const copied = ref(false);
6 | const timeoutId = ref
56 |
67 | {{ title }}
57 |
58 |
66 |
59 | ![]()
60 | {{ author }}
61 |
62 |
63 | ![logo]()
64 |
65 |