Skip to content

Commit

Permalink
Use Enso font (#8499)
Browse files Browse the repository at this point in the history
- Closes #8485

# Important Notes
None
  • Loading branch information
somebody1234 authored Dec 8, 2023
1 parent 8952a3a commit 777ae9a
Show file tree
Hide file tree
Showing 21 changed files with 253 additions and 157 deletions.
1 change: 1 addition & 0 deletions app/gui2/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,4 @@ playwright-report/
src/util/iconList.json
src/util/iconName.ts
src/stores/visualization/metadata.json
public/font-*/
4 changes: 4 additions & 0 deletions app/gui2/.prettierignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
*.html
*.css
!src/assets/base.css
!src/assets/main.css
!src/assets/font-*.css
!stories/story.css

**/generated
6 changes: 4 additions & 2 deletions app/gui2/e2e/MockApp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ const mainFile = computed({
</script>

<template>
<MockProjectStoreWrapper v-model="mainFile"><App :config="{}" /></MockProjectStoreWrapper>
<MockProjectStoreWrapper v-model="mainFile">
<App :config="{}" :metadata="{}" />
</MockProjectStoreWrapper>
</template>

<style scoped>
:is(.viewport) {
color: var(--color-text);
font-family: 'M PLUS 1', sans-serif;
font-family: var(--font-code);
font-size: 11.5px;
font-weight: 500;
line-height: 20px;
Expand Down
8 changes: 6 additions & 2 deletions app/gui2/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@
"build-rust-ffi": "wasm-pack build ./rust-ffi --release --target web",
"generate-ast-schema": "cargo run -p enso-parser-schema > src/generated/ast-schema.json",
"generate-ast-types": "tsx ./parser-codegen/index.ts src/generated/ast-schema.json src/generated/ast.ts",
"preinstall": "npm run build-rust-ffi && npm run generate-ast-schema && npm run generate-ast-types && npm run generate-metadata",
"generate-metadata": "node scripts/generateIconMetadata.js"
"preinstall": "npm run build-rust-ffi && npm run generate-ast-schema && npm run generate-ast-types && npm run generate-metadata && npm run download-fonts",
"generate-metadata": "node scripts/generateIconMetadata.js",
"download-fonts": "node scripts/downloadFonts.js"
},
"dependencies": {
"@ag-grid-community/client-side-row-model": "^30.2.0",
Expand Down Expand Up @@ -83,6 +84,7 @@
"@types/mapbox-gl": "^2.7.13",
"@types/node": "^18.17.5",
"@types/shuffle-seed": "^1.1.0",
"@types/unbzip2-stream": "^1.4.3",
"@types/wicg-file-system-access": "^2023.10.2",
"@types/ws": "^8.5.5",
"@vitejs/plugin-react": "^4.0.4",
Expand Down Expand Up @@ -110,8 +112,10 @@
"shuffle-seed": "^1.1.6",
"sql-formatter": "^13.0.0",
"tailwindcss": "^3.2.7",
"tar": "^6.2.0",
"tsx": "^3.12.6",
"typescript": "~5.2.2",
"unbzip2-stream": "^1.4.3",
"vite": "^4.4.9",
"vite-plugin-inspect": "^0.7.38",
"vite-plugin-top-level-await": "^1.3.1",
Expand Down
78 changes: 78 additions & 0 deletions app/gui2/scripts/downloadFonts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as fsSync from 'node:fs'
import * as fs from 'node:fs/promises'
import * as https from 'node:https'
import tar from 'tar'
import bz2 from 'unbzip2-stream'

const ENSO_FONT_URL = 'https://github.com/enso-org/font/releases/download/1.0/enso-font-1.0.tar.gz'
const MPLUS1_FONT_URL =
'https://github.com/coz-m/MPLUS_FONTS/raw/71d438c798d063cc6fdae8d2864bc48f2d3d06ad/fonts/ttf/MPLUS1%5Bwght%5D.ttf'
const DEJAVU_SANS_MONO_FONT_URL =
'https://sourceforge.net/projects/dejavu/files/dejavu/2.37/dejavu-fonts-ttf-2.37.tar.bz2'

/** @param {string | https.RequestOptions | URL} options
* @param {((res: import('node:http').IncomingMessage) => void) | undefined} [callback] */
function httpsGet(options, callback) {
return https.get(options, (response) => {
const location = response.headers.location
if (location) {
httpsGet(
typeof options === 'string' || options instanceof URL
? location
: { ...options, ...new URL(location) },
callback,
)
} else {
callback?.(response)
}
})
}

console.info('Downloading Enso font...')
await fs.rm('./public/font-enso/', { recursive: true, force: true })
await fs.mkdir('./public/font-enso/', { recursive: true })
await new Promise((resolve, reject) => {
httpsGet(ENSO_FONT_URL, (response) => {
response.pipe(
tar.extract({
cwd: './public/font-enso/',
strip: 1,
filter(path) {
// Reject files starting with `.`.
return !/[\\/][.]/.test(path)
},
}),
)
response.on('end', resolve)
response.on('error', reject)
})
})
console.info('Downloading M PLUS 1 font...')
await fs.rm('./public/font-mplus1/', { recursive: true, force: true })
await fs.mkdir('./public/font-mplus1/', { recursive: true })
await new Promise((resolve, reject) => {
httpsGet(MPLUS1_FONT_URL, (response) => {
response.pipe(fsSync.createWriteStream('./public/font-mplus1/MPLUS1.ttf'))
response.on('end', resolve)
response.on('error', reject)
})
})
console.info('Downloading DejaVu Sans Mono font...')
await fs.rm('./public/font-dejavu/', { recursive: true, force: true })
await fs.mkdir('./public/font-dejavu/', { recursive: true })
await new Promise((resolve, reject) => {
httpsGet(DEJAVU_SANS_MONO_FONT_URL, (response) => {
response.pipe(bz2()).pipe(
tar.extract({
cwd: './public/font-dejavu/',
strip: 2,
filter(path) {
return /[\\/]DejaVuSansMono/.test(path) || !/Oblique[.]ttf$/.test(path)
},
}),
)
response.on('end', resolve)
response.on('error', reject)
})
})
console.info('Done.')
9 changes: 3 additions & 6 deletions app/gui2/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,14 @@ onMounted(() => useSuggestionDbStore())
</script>

<template>
<ProjectView class="App flex" :class="[...classSet.keys()]" />
<ProjectView class="App" :class="[...classSet.keys()]" />
</template>

<style scoped>
.flex {
flex: 1;
}
.App {
flex: 1;
color: var(--color-text);
font-family: 'M PLUS 1', sans-serif;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
line-height: 20px;
Expand Down
14 changes: 12 additions & 2 deletions app/gui2/src/assets/base.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* M PLUS 1 font import. */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@500;600;800&display=swap');
@import url('./font-enso.css');
@import url('./font-mplus1.css');
@import url('./font-dejavu.css');

/* color palette from <https://github.com/vuejs/theme> */
:root {
Expand Down Expand Up @@ -60,6 +61,15 @@
--radius-default: 16px;
--section-gap: 160px;
--selected-node-border-width: 20px;
--font-sans: 'M PLUS 1', /* System sans-serif font stack */ system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
--font-code: 'Enso', /* System sans-serif font stack */ system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'DejaVu Sans Mono', /* System monspace font stack */ ui-monospace, Menlo, Monaco,
'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

*,
Expand Down
11 changes: 11 additions & 0 deletions app/gui2/src/assets/font-dejavu.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@font-face {
font-family: 'DejaVu Sans Mono';
src: url('/font-dejavu/DejaVuSansMono.ttf');
font-weight: 400;
}

@font-face {
font-family: 'DejaVu Sans Mono';
src: url('/font-dejavu/DejaVuSansMono-Bold.ttf');
font-weight: 700;
}
53 changes: 53 additions & 0 deletions app/gui2/src/assets/font-enso.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-Thin.ttf');
font-weight: 100;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-ExtraLight.ttf');
font-weight: 200;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-Light.ttf');
font-weight: 300;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-Regular.ttf');
font-weight: 400;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-Medium.ttf');
font-weight: 500;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-SemiBold.ttf');
font-weight: 600;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-Bold.ttf');
font-weight: 700;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-ExtraBold.ttf');
font-weight: 800;
}

@font-face {
font-family: 'Enso';
src: url('/font-enso/Enso-Black.ttf');
font-weight: 900;
}
4 changes: 4 additions & 0 deletions app/gui2/src/assets/font-mplus1.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@font-face {
font-family: 'M PLUS 1';
src: url('/font-mplus1/MPLUS1.ttf');
}
2 changes: 1 addition & 1 deletion app/gui2/src/assets/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ body {
transition:
color 0.5s,
background-color 0.5s;
font-family: 'M PLUS 1', sans-serif;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
line-height: 20px;
Expand Down
1 change: 1 addition & 0 deletions app/gui2/src/components/CodeEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ const editorStyle = computed(() => {
max-height: calc(100% - 10px);
backdrop-filter: var(--blur-app-bg);
border-radius: 7px;
font-family: var(--font-mono);
&.v-enter-active,
&.v-leave-active {
Expand Down
2 changes: 2 additions & 0 deletions app/gui2/src/components/ComponentBrowser.vue
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,9 @@ const handler = componentBrowserBindings.handler({
display: flex;
position: absolute;
line-height: 1;
font-family: var(--font-code);
}
.selected {
color: white;
& svg {
Expand Down
2 changes: 1 addition & 1 deletion app/gui2/src/components/DocumentationPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ function handleBreadcrumbClick(index: number) {
--enso-docs-text-color: rbga(0, 0, 0, 0.6);
--enso-docs-tag-background-color: #dcd8d8;
--enso-docs-code-background-color: #dddcde;
font-family: 'M PLUS 1', DejaVuSansMonoBook, sans-serif;
font-family: var(--font-code);
font-size: 11.5px;
line-height: 160%;
color: var(--enso-docs-text-color);
Expand Down
2 changes: 2 additions & 0 deletions app/gui2/src/components/GraphEditor/GraphNode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,7 @@ function portGroupStyle(port: PortData) {
}
.node {
font-family: var(--font-code);
position: relative;
top: 0;
left: 0;
Expand Down Expand Up @@ -502,6 +503,7 @@ function portGroupStyle(port: PortData) {
}
.binding {
font-family: var(--font-code);
user-select: none;
margin-right: 10px;
color: black;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ watchPostEffect(() => {
}
.label {
font-family: 'DejaVu Sans Mono', monospace;
font-family: var(--font-mono);
font-size: 10px;
}
</style>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const props = defineProps<{ data: unknown }>()

<style scoped>
.JSONVisualization {
font-family: 'DejaVu Sans Mono', monospace;
font-family: var(--font-mono);
white-space: pre;
padding: 8px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function renderRegularInterpolation(value: string, fgColor: RGBA, bgColor: RGBA)

<style>
.SQLVisualization .sql {
font-family: 'DejaVu Sans Mono', monospace;
font-family: var(--font-mono);
font-size: 12px;
margin-left: 7px;
margin-top: 5px;
Expand Down
2 changes: 2 additions & 0 deletions app/gui2/stories/setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,12 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
provideVisualizationConfig._mock(
{
fullscreen: false,
scale: 1,
width: 200,
height: 150,
hide() {},
isCircularMenuVisible: false,
isBelowToolbar: false,
nodeSize: new Vec2(200, 150),
currentType: {
module: { kind: 'Builtin' },
Expand Down
4 changes: 3 additions & 1 deletion app/gui2/stories/story.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import url('../src/assets/font-enso-code.css');

.histoire-story-viewer .__histoire-render-story > [data-v-app] {
height: 100%;
font-family: 'M PLUS 1', sans-serif;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
line-height: 20px;
Expand Down
Loading

0 comments on commit 777ae9a

Please sign in to comment.