Skip to content

Commit c4a4c2d

Browse files
riccardoperrariccardoperra
committed
docs(changeset): Add new fonts
1 parent 838ce14 commit c4a4c2d

28 files changed

+272
-79
lines changed

‎.changeset/shy-fishes-melt.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@codeimage/app': patch
3+
---
4+
5+
Add new fonts

‎apps/codeimage/changelog/1-8-3_12-23-2024.mdx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {mdxComponents} from '../src/mdx/components';
2+
import shareablePresets from './data/1-7-0/shareable_presets.png';
3+
4+
# v1.8.4
5+
6+
<mdxComponents.h3>💬 New fonts</mdxComponents.h3>
7+
8+
This new version of CodeImage introduces new fonts into it's core:
9+
- Geist Mono
10+
- IBM Plex Mono
11+
-
12+
13+
14+
<mdxComponents.image src={shareablePresets} style={{'object-position': 'left'}} />

‎apps/codeimage/index.html

+117-78
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,129 @@
11
<!DOCTYPE html>
2-
<html lang='en'>
3-
<head>
4-
<meta charset='utf-8'>
5-
<meta name='theme-color'>
6-
<meta name='apple-mobile-web-app-status-bar-style' content='dark-content'>
7-
<link rel='icon' href='/assets/favicon.ico'>
8-
<link rel='preconnect' href='https://fonts.googleapis.com'>
9-
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='anonymous'>
10-
<link rel='preload' href='/assets/codeimage-logo-blue-svg-v1.svg' as='image' type='image/svg+xml'>
11-
<meta name='viewport'
12-
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="theme-color" />
6+
<meta name="apple-mobile-web-app-status-bar-style" content="dark-content" />
7+
<link rel="icon" href="/assets/favicon.ico" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link
10+
rel="preconnect"
11+
href="https://fonts.gstatic.com"
12+
crossorigin="anonymous"
13+
/>
14+
<link
15+
rel="preload"
16+
href="/assets/codeimage-logo-blue-svg-v1.svg"
17+
as="image"
18+
type="image/svg+xml"
19+
/>
20+
<meta
21+
name="viewport"
22+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
23+
/>
1324

14-
<link
15-
href='https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Overpass+Mono:wght@400;500;600&family=Source+Code+Pro:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap'
16-
rel='stylesheet'
17-
media='print' onload="this.onload=null;this.removeAttribute('media');"
18-
as='font'
19-
fetchpriority='low'
20-
crossorigin>
25+
<link
26+
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Overpass+Mono:wght@400;500;600&family=Source+Code+Pro:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap"
27+
rel="stylesheet"
28+
media="print"
29+
onload="this.onload=null;this.removeAttribute('media');"
30+
as="font"
31+
fetchpriority="low"
32+
crossorigin
33+
/>
2134

22-
<link
23-
href='https://fonts.cdnfonts.com/css/cascadia-code'
24-
rel='stylesheet'
25-
media='print' onload="this.onload=null;this.removeAttribute('media');"
26-
as='font'
27-
fetchpriority='low'
28-
crossorigin>
35+
<link
36+
href="/assets/fonts/geist_mono/GeistMono[wght].ttf"
37+
rel="stylesheet"
38+
media="print"
39+
onload="this.onload=null;this.removeAttribute('media');"
40+
as="font"
41+
fetchpriority="low"
42+
crossorigin
43+
/>
2944

30-
<!-- Primary Meta Tags -->
31-
<title>CodeImage - A tool to manage and beautify your code screenshots</title>
32-
<meta name='title' content='CodeImage - A tool to manage and beautify your code screenshots'>
33-
<meta name='description'
34-
content='CodeImage is the newest tool to help developers to manage their snippets and create beautiful screenshots of their source code'>
45+
<!-- Primary Meta Tags -->
46+
<title>
47+
CodeImage - A tool to manage and beautify your code screenshots
48+
</title>
49+
<meta
50+
name="title"
51+
content="CodeImage - A tool to manage and beautify your code screenshots"
52+
/>
53+
<meta
54+
name="description"
55+
content="CodeImage is the newest tool to help developers to manage their snippets and create beautiful screenshots of their source code"
56+
/>
3557

36-
<!-- Open Graph / Facebook -->
37-
<meta property='og:type' content='website'>
38-
<meta property='og:url' content='https://app.codeimage.dev/'>
39-
<meta property='og:title' content='CodeImage - A tool to manage and beautify your code screenshots'>
40-
<meta property='og:description'
41-
content='CodeImage is the newest tool to help developers to manage their snippets and create beautiful screenshots of their source codee'>
42-
<meta property='og:image'
43-
content='https://github.com/riccardoperra/codeimage/blob/main/assets/codeimage_card.png?raw=true'>
58+
<!-- Open Graph / Facebook -->
59+
<meta property="og:type" content="website" />
60+
<meta property="og:url" content="https://app.codeimage.dev/" />
61+
<meta
62+
property="og:title"
63+
content="CodeImage - A tool to manage and beautify your code screenshots"
64+
/>
65+
<meta
66+
property="og:description"
67+
content="CodeImage is the newest tool to help developers to manage their snippets and create beautiful screenshots of their source codee"
68+
/>
69+
<meta
70+
property="og:image"
71+
content="https://github.com/riccardoperra/codeimage/blob/main/assets/codeimage_card.png?raw=true"
72+
/>
4473

45-
<!-- Twitter -->
46-
<meta property='twitter:card' content='summary'>
47-
<meta property='twitter:url' content='https://app.codeimage.dev/'>
48-
<meta property='twitter:title' content='CodeImage - A tool to manage and beautify your code screenshots'>
49-
<meta property='twitter:description'
50-
content='CodeImage is the newest tool to help developers to manage their snippets and create beautiful screenshots of their source code'>
51-
<link rel='apple-touch-icon' href='/pwa/apple-icon-180.png'>
52-
<meta name='apple-mobile-web-app-capable' content='yes'>
53-
<!-- %UMAMI% -->
74+
<!-- Twitter -->
75+
<meta property="twitter:card" content="summary" />
76+
<meta property="twitter:url" content="https://app.codeimage.dev/" />
77+
<meta
78+
property="twitter:title"
79+
content="CodeImage - A tool to manage and beautify your code screenshots"
80+
/>
81+
<meta
82+
property="twitter:description"
83+
content="CodeImage is the newest tool to help developers to manage their snippets and create beautiful screenshots of their source code"
84+
/>
85+
<link rel="apple-touch-icon" href="/pwa/apple-icon-180.png" />
86+
<meta name="apple-mobile-web-app-capable" content="yes" />
87+
<!-- %UMAMI% -->
5488

55-
<style>
56-
html, body {
57-
margin: 0
58-
}
89+
<style>
90+
html,
91+
body {
92+
margin: 0;
93+
}
5994

60-
body {
61-
background-color: #111111
62-
}
95+
body {
96+
background-color: #111111;
97+
}
6398

64-
.launcher {
65-
display: flex;
66-
flex-direction: column;
67-
justify-content: center;
68-
align-items: center;
69-
height: 100%;
70-
position: fixed;
71-
width: 100%;
72-
background-color: #111111;
73-
}
99+
.launcher {
100+
display: flex;
101+
flex-direction: column;
102+
justify-content: center;
103+
align-items: center;
104+
height: 100%;
105+
position: fixed;
106+
width: 100%;
107+
background-color: #111111;
108+
}
74109

75-
.launcher img {
76-
opacity: 1;
77-
}
78-
</style>
79-
</head>
110+
.launcher img {
111+
opacity: 1;
112+
}
113+
</style>
114+
</head>
80115

81-
<body>
82-
<noscript>You need to enable JavaScript to run this app.</noscript>
83-
<div id='root'>
84-
<div id='launcher' class='launcher'>
85-
<img width='240px' src='/assets/codeimage-logo-blue-svg-v1.svg' alt='logo' />
86-
</div>
87-
</div>
88-
<script src='/src/index.tsx' type='module'></script>
89-
</body>
116+
<body>
117+
<noscript>You need to enable JavaScript to run this app.</noscript>
118+
<div id="root">
119+
<div id="launcher" class="launcher">
120+
<img
121+
width="240px"
122+
src="/assets/codeimage-logo-blue-svg-v1.svg"
123+
alt="logo"
124+
/>
125+
</div>
126+
</div>
127+
<script src="/src/index.tsx" type="module"></script>
128+
</body>
90129
</html>

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf

133 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf

139 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf

131 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf

139 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf

139 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf

130 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf

138 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf

132 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf

139 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf

131 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf

135 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf

142 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Thin.ttf

133 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf

141 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/IBM_Plex_Mono/OFL.txt

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
2+
3+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4+
This license is copied below, and is also available with a FAQ at:
5+
https://openfontlicense.org
6+
7+
8+
-----------------------------------------------------------
9+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10+
-----------------------------------------------------------
11+
12+
PREAMBLE
13+
The goals of the Open Font License (OFL) are to stimulate worldwide
14+
development of collaborative font projects, to support the font creation
15+
efforts of academic and linguistic communities, and to provide a free and
16+
open framework in which fonts may be shared and improved in partnership
17+
with others.
18+
19+
The OFL allows the licensed fonts to be used, studied, modified and
20+
redistributed freely as long as they are not sold by themselves. The
21+
fonts, including any derivative works, can be bundled, embedded,
22+
redistributed and/or sold with any software provided that any reserved
23+
names are not used by derivative works. The fonts and derivatives,
24+
however, cannot be released under any other type of license. The
25+
requirement for fonts to remain under this license does not apply
26+
to any document created using the fonts or their derivatives.
27+
28+
DEFINITIONS
29+
"Font Software" refers to the set of files released by the Copyright
30+
Holder(s) under this license and clearly marked as such. This may
31+
include source files, build scripts and documentation.
32+
33+
"Reserved Font Name" refers to any names specified as such after the
34+
copyright statement(s).
35+
36+
"Original Version" refers to the collection of Font Software components as
37+
distributed by the Copyright Holder(s).
38+
39+
"Modified Version" refers to any derivative made by adding to, deleting,
40+
or substituting -- in part or in whole -- any of the components of the
41+
Original Version, by changing formats or by porting the Font Software to a
42+
new environment.
43+
44+
"Author" refers to any designer, engineer, programmer, technical
45+
writer or other person who contributed to the Font Software.
46+
47+
PERMISSION & CONDITIONS
48+
Permission is hereby granted, free of charge, to any person obtaining
49+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50+
redistribute, and sell modified and unmodified copies of the Font
51+
Software, subject to the following conditions:
52+
53+
1) Neither the Font Software nor any of its individual components,
54+
in Original or Modified Versions, may be sold by itself.
55+
56+
2) Original or Modified Versions of the Font Software may be bundled,
57+
redistributed and/or sold with any software, provided that each copy
58+
contains the above copyright notice and this license. These can be
59+
included either as stand-alone text files, human-readable headers or
60+
in the appropriate machine-readable metadata fields within text or
61+
binary files as long as those fields can be easily viewed by the user.
62+
63+
3) No Modified Version of the Font Software may use the Reserved Font
64+
Name(s) unless explicit written permission is granted by the corresponding
65+
Copyright Holder. This restriction only applies to the primary font name as
66+
presented to the users.
67+
68+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69+
Software shall not be used to promote, endorse or advertise any
70+
Modified Version, except to acknowledge the contribution(s) of the
71+
Copyright Holder(s) and the Author(s) or with their explicit written
72+
permission.
73+
74+
5) The Font Software, modified or unmodified, in part or in whole,
75+
must be distributed entirely under this license, and must not be
76+
distributed under any other license. The requirement for fonts to
77+
remain under this license does not apply to any document created
78+
using the Font Software.
79+
80+
TERMINATION
81+
This license becomes null and void if any of the above conditions are
82+
not met.
83+
84+
DISCLAIMER
85+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93+
OTHER DEALINGS IN THE FONT SOFTWARE.

‎apps/codeimage/public/assets/fonts/agave/Agave-Regular.ttf

261 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/geist_mono/GeistMono[wght].ttf

136 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/monaspace/MonaspaceArgonVarVF[wght,wdth,slnt].ttf

438 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/monaspace/MonaspaceKryptonVarVF[wght,wdth,slnt].ttf

315 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/monaspace/MonaspaceNeonVarVF[wght,wdth,slnt].ttf

402 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/monaspace/MonaspaceRadonVarVF[wght,wdth,slnt].ttf

776 KB
Binary file not shown.

‎apps/codeimage/public/assets/fonts/monaspace/MonaspaceXenonVarVF[wght,wdth,slnt].ttf

459 KB
Binary file not shown.

‎apps/codeimage/src/core/configuration/font.ts

+19
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,15 @@ export const [SUPPORTED_FONTS, SUPPORTED_FONTS_DICTIONARY] = createCustomFonts([
4545
{name: 'Bold', weight: 700},
4646
],
4747
},
48+
{
49+
id: 'geist-mono',
50+
name: 'Geist Mono',
51+
type: 'web',
52+
types: [
53+
{name: 'Regular', weight: 400},
54+
{name: 'Bold', weight: 700},
55+
],
56+
},
4857
{
4958
id: 'fira-code',
5059
name: 'Fira Code',
@@ -55,6 +64,16 @@ export const [SUPPORTED_FONTS, SUPPORTED_FONTS_DICTIONARY] = createCustomFonts([
5564
{name: 'Bold', weight: 700},
5665
],
5766
},
67+
{
68+
id: 'ibm-plex-mono',
69+
name: 'IBM Plex Mono',
70+
type: 'web',
71+
types: [
72+
{name: 'Regular', weight: 400},
73+
{name: 'SemiBold', weight: 500},
74+
{name: 'Bold', weight: 700},
75+
],
76+
},
5877
{
5978
id: 'source-code-pro',
6079
name: 'Source Code pro',

‎apps/codeimage/src/state/editor/config.store.ts

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const EditorConfigStore = defineStore(() => getDefaultConfig())
4040
_.idb.hydrateOnInit().then(() => {
4141
runWithOwner(owner, () => {
4242
_.set('ready', true);
43+
_.set('fonts', [...SUPPORTED_FONTS]);
4344
createEffect(
4445
on(
4546
_,

‎apps/codeimage/src/theme/global.css.ts

+23-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {themeVars} from '@codeimage/ui';
2-
import {globalStyle} from '@vanilla-extract/css';
2+
import {globalFontFace, globalStyle} from '@vanilla-extract/css';
33

44
globalStyle('body', {
55
fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
@@ -46,3 +46,25 @@ globalStyle('::-webkit-scrollbar-thumb', {
4646
globalStyle('::-webkit-scrollbar-thumb:hover', {
4747
backgroundColor: themeVars.dynamicColors.scrollBar.hoverBackgroundColor,
4848
});
49+
50+
globalFontFace('Geist Mono', {
51+
fontDisplay: 'swap',
52+
fontWeight: '400 700',
53+
fontStyle: 'normal',
54+
src: "url(/assets/fonts/geist_mono/GeistMono[wght].ttf) format('truetype')",
55+
});
56+
57+
(
58+
[
59+
['Regular', 400],
60+
['SemiBold', 500],
61+
['Bold', 600],
62+
] as const
63+
).forEach(([font, weight]) => {
64+
globalFontFace('IBM Plex Mono', {
65+
fontDisplay: 'swap',
66+
fontWeight: weight,
67+
fontStyle: 'normal',
68+
src: `url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-${font}.ttf) format('truetype')`,
69+
});
70+
});

0 commit comments

Comments
 (0)