Skip to content

Commit d5fa71c

Browse files
stevebaumanstevebauman
committed
Migrate to composition API
1 parent 2b69c3b commit d5fa71c

3 files changed

Lines changed: 289 additions & 350 deletions

File tree

‎app/pages/buy.vue‎

Lines changed: 88 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -158,60 +158,59 @@
158158
</div>
159159
</template>
160160

161-
<script>
161+
<script setup>
162162
import Granim from 'granim';
163163
import chroma from 'chroma-js';
164164
import { range, random, sample } from 'lodash';
165165
import useShiki from '@/composables/useShiki';
166166
import { ref, watch, reactive, onMounted, onBeforeUnmount } from 'vue';
167167
168-
export default {
169-
setup() {
170-
const { $shiki } = useNuxtApp();
171-
const { buildCodeBlocks } = useShiki();
168+
const { $shiki } = useNuxtApp();
169+
const { buildCodeBlocks } = useShiki();
172170
173-
const gradient = ref(null);
174-
const interval = ref(null);
175-
const granim = ref(null);
176-
const blocks = ref(null);
171+
const gradient = ref(null);
172+
const blocks = ref(null);
177173
178-
const settings = reactive({
179-
showHeader: true,
180-
showTitle: true,
181-
showShadow: true,
182-
showMenu: true,
183-
showColorMenu: false,
184-
showLineNumbers: true,
185-
title: 'Beautiful Code Screenshots',
186-
themeType: 'light',
187-
themeOpacity: 1.0,
188-
themeName: 'github-light',
189-
themeBackground: '#fff',
190-
aspectRatio: null,
191-
borderRadius: 16,
192-
borderRadiusLocked: true,
193-
borderColor: {
194-
red: 0,
195-
green: 0,
196-
blue: 0,
197-
alpha: 1,
198-
},
199-
fontSize: 16,
200-
fontFamily: 'font-mono-lisa',
201-
lineHeight: 20,
202-
padding: 16,
203-
paddingLocked: true,
204-
image: null,
205-
scale: 1.0,
206-
});
174+
let granimInstance = null;
175+
let interval = null;
176+
177+
const settings = reactive({
178+
showHeader: true,
179+
showTitle: true,
180+
showShadow: true,
181+
showMenu: true,
182+
showColorMenu: false,
183+
showLineNumbers: true,
184+
title: 'Beautiful Code Screenshots',
185+
themeType: 'light',
186+
themeOpacity: 1.0,
187+
themeName: 'github-light',
188+
themeBackground: '#fff',
189+
aspectRatio: null,
190+
borderRadius: 16,
191+
borderRadiusLocked: true,
192+
borderColor: {
193+
red: 0,
194+
green: 0,
195+
blue: 0,
196+
alpha: 1,
197+
},
198+
fontSize: 16,
199+
fontFamily: 'font-mono-lisa',
200+
lineHeight: 20,
201+
padding: 16,
202+
paddingLocked: true,
203+
image: null,
204+
scale: 1.0,
205+
});
207206
208-
const generateTokens = () =>
209-
buildCodeBlocks(
207+
const generateTokens = () =>
208+
buildCodeBlocks(
209+
{
210+
code: [
210211
{
211-
code: [
212-
{
213-
id: '1',
214-
value: `class UserController extends Controller
212+
id: '1',
213+
value: `class UserController extends Controller
215214
{
216215
public function index()
217216
{
@@ -220,66 +219,62 @@ export default {
220219
]);
221220
}
222221
}`,
223-
},
224-
{
225-
id: '2',
226-
value: `@foreach($users as $user)
222+
},
223+
{
224+
id: '2',
225+
value: `@foreach($users as $user)
227226
<tr>
228227
<td>{{ $user->name }}</td>
229228
<td>{{ $user->email }}</td>
230229
</tr>
231230
@endforeach`,
232-
},
233-
],
234-
languages: [
235-
{ id: '1', name: 'php' },
236-
{ id: '2', name: 'blade' },
237-
],
238-
theme: settings.themeName,
239231
},
240-
({ blocks: code, themeType: type, themeBackground: background }) => {
241-
blocks.value = code;
242-
settings.themeType = type;
243-
settings.themeBackground = background;
244-
}
245-
);
246-
247-
const generateGradients = () => {
248-
return [...range(0, random(10, 20))].map(() => [
249-
chroma.random().hex(),
250-
chroma.random().hex(),
251-
]);
252-
};
232+
],
233+
languages: [
234+
{ id: '1', name: 'php' },
235+
{ id: '2', name: 'blade' },
236+
],
237+
theme: settings.themeName,
238+
},
239+
({ blocks: code, themeType: type, themeBackground: background }) => {
240+
blocks.value = code;
241+
settings.themeType = type;
242+
settings.themeBackground = background;
243+
}
244+
);
253245
254-
const setRandomTheme = () => (settings.themeName = sample($shiki.themes()));
246+
const generateGradients = () => {
247+
return [...range(0, random(10, 20))].map(() => [
248+
chroma.random().hex(),
249+
chroma.random().hex(),
250+
]);
251+
};
255252
256-
onMounted(() => {
257-
setRandomTheme();
258-
generateTokens();
253+
const setRandomTheme = () => (settings.themeName = sample($shiki.themes()));
259254
260-
interval.value = setInterval(setRandomTheme, 5000);
255+
onMounted(() => {
256+
setRandomTheme();
257+
generateTokens();
261258
262-
granim.value = new Granim({
263-
element: gradient.value,
264-
name: 'granim',
265-
opacity: [1, 2],
266-
states: {
267-
'default-state': {
268-
gradients: generateGradients(),
269-
transitionSpeed: 2000,
270-
},
271-
},
272-
});
259+
interval = setInterval(setRandomTheme, 5000);
273260
274-
watch(() => settings.themeName, generateTokens);
275-
});
261+
granimInstance = new Granim({
262+
element: gradient.value,
263+
name: 'granim',
264+
opacity: [1, 2],
265+
states: {
266+
'default-state': {
267+
gradients: generateGradients(),
268+
transitionSpeed: 2000,
269+
},
270+
},
271+
});
276272
277-
onBeforeUnmount(() => {
278-
granim.value?.destroy();
279-
clearInterval(interval.value);
280-
});
273+
watch(() => settings.themeName, generateTokens);
274+
});
281275
282-
return { settings, blocks, gradient };
283-
},
284-
};
276+
onBeforeUnmount(() => {
277+
granimInstance?.destroy();
278+
clearInterval(interval);
279+
});
285280
</script>

‎app/pages/generator.vue‎

Lines changed: 54 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -24,81 +24,73 @@
2424
</div>
2525
</template>
2626

27-
<script>
27+
<script setup>
2828
import useShiki from '@/composables/useShiki';
2929
import useSettings from '@/composables/useSettings';
3030
import useEditorUtils from '@/composables/useEditorUtils';
31+
import useBackgrounds from '@/composables/useBackgrounds';
3132
import { ref, computed, nextTick, watch } from 'vue';
32-
import { default as useBackgrounds } from '@/composables/useBackgrounds';
3333
34-
export default {
35-
setup() {
36-
const { buildCodeBlocks } = useShiki();
37-
const { addCustomBackground, getBackgroundAttrs } = useBackgrounds();
38-
39-
const { getCodeFromEditors, getLanguagesFromEditors } = useEditorUtils();
40-
41-
const { settings } = useSettings();
42-
43-
const ready = ref(false);
44-
const pane = ref(null);
45-
const blocks = ref(null);
46-
const editors = ref([]);
47-
48-
const backgroundAttrs = computed(() => getBackgroundAttrs(settings.background));
49-
50-
const generateTokens = async () => {
51-
await buildCodeBlocks(
52-
{
53-
theme: settings.themeName,
54-
code: getCodeFromEditors(editors),
55-
languages: getLanguagesFromEditors(editors),
56-
},
57-
({ blocks: code, themeType: type, themeBackground: background }) => {
58-
blocks.value = code;
59-
settings.themeType = type;
60-
settings.themeBackground = background;
61-
}
62-
);
63-
};
64-
65-
watch(pane, (value) => {
66-
if (settings.lockWindowSize) {
67-
settings.width =
68-
(value.actualWidth() + Number(settings.lockWindowPaddingX)) * settings.scale;
34+
const { buildCodeBlocks } = useShiki();
35+
const { addCustomBackground, getBackgroundAttrs } = useBackgrounds();
36+
const { getCodeFromEditors, getLanguagesFromEditors } = useEditorUtils();
37+
const { settings } = useSettings();
38+
39+
const ready = ref(false);
40+
const pane = ref(null);
41+
const blocks = ref(null);
42+
const editors = ref([]);
43+
44+
const backgroundAttrs = computed(() => getBackgroundAttrs(settings.background));
45+
46+
const generateTokens = async () => {
47+
await buildCodeBlocks(
48+
{
49+
theme: settings.themeName,
50+
code: getCodeFromEditors(editors),
51+
languages: getLanguagesFromEditors(editors),
52+
},
53+
({ blocks: code, themeType: type, themeBackground: background }) => {
54+
blocks.value = code;
55+
settings.themeType = type;
56+
settings.themeBackground = background;
57+
}
58+
);
59+
};
6960
70-
settings.height =
71-
(value.actualHeight() + Number(settings.lockWindowPaddingY)) * settings.scale;
72-
}
61+
watch(pane, (value) => {
62+
if (settings.lockWindowSize) {
63+
settings.width =
64+
(value.actualWidth() + Number(settings.lockWindowPaddingX)) * settings.scale;
7365
74-
nextTick(() => (ready.value = true));
75-
});
66+
settings.height =
67+
(value.actualHeight() + Number(settings.lockWindowPaddingY)) * settings.scale;
68+
}
7669
77-
window.load = (params) => {
78-
if (typeof params.settings?.background === 'object') {
79-
params.settings.background = addCustomBackground(params.settings.background);
80-
}
70+
nextTick(() => (ready.value = true));
71+
});
8172
82-
if (params.settings) {
83-
Object.assign(settings, params.settings || {});
84-
}
73+
window.load = (params) => {
74+
if (typeof params.settings?.background === 'object') {
75+
params.settings.background = addCustomBackground(params.settings.background);
76+
}
8577
86-
if (params.editors) {
87-
editors.value.push(...params.editors);
88-
}
78+
if (params.settings) {
79+
Object.assign(settings, params.settings || {});
80+
}
8981
90-
if (params.settings?.aspectRatio) {
91-
const [x, y] = settings.aspectRatio;
82+
if (params.editors) {
83+
editors.value.push(...params.editors);
84+
}
9285
93-
params.settings?.height
94-
? (settings.width = settings.height * (x / y))
95-
: (settings.height = settings.width / (x / y));
96-
}
86+
if (params.settings?.aspectRatio) {
87+
const [x, y] = settings.aspectRatio;
9788
98-
generateTokens();
99-
};
89+
params.settings?.height
90+
? (settings.width = settings.height * (x / y))
91+
: (settings.height = settings.width / (x / y));
92+
}
10093
101-
return { pane, ready, settings, blocks, backgroundAttrs };
102-
},
94+
generateTokens();
10395
};
10496
</script>

0 commit comments

Comments
 (0)