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‎

Lines changed: 5 additions & 0 deletions
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‎

Lines changed: 14 additions & 0 deletions
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‎

Lines changed: 117 additions & 78 deletions
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.

0 commit comments

Comments
 (0)