├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.tsx ├── components │ ├── BackgroundStream.tsx │ ├── Bookmark.tsx │ └── MainCard.tsx ├── config │ ├── colorPalette.json │ └── settings.json ├── fonts │ ├── UbuntuMono-Bold.ttf │ └── UbuntuMono-Regular.ttf ├── index.css ├── index.tsx ├── logo.svg └── react-app-env.d.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # V1.0 2 | 3 | **Name**: Inital Release\ 4 | **Release Date**: 22.05.2021\ 5 | **Features**: 6 | 7 | - Youtube Video/Stream Background 8 | - Custom Icons 9 | - Custom Colorpalette 10 | - Searchfield for any SearchEngine 11 | - Bookmark Categories 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 LinoIten 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mount Bookmark :mount_fuji: 2 | 3 | Mount Bookmark is a self-hosted, highly customizable bookmark board that allows you to view any YouTube stream/video in the background. I made it first as a simple project for myself, however after seeing that I wasn't the only one interested in such a tool, I decided to make it into my first open-source project. 4 | 5 | # Installation :volcano: 6 | 7 | First clone the sourcecode: 8 | 9 | ```cmd 10 | git clone https://github.com/LinoIten/mount-bookmark.git 11 | ``` 12 | 13 | To run the react project: 14 | 15 | ```cmd 16 | npm start 17 | ``` 18 | 19 | If you want to run it in the background you can use [PM2](https://pm2.keymetrics.io/). 20 | ```cmd 21 | npm install pm2@latest -g 22 | pm2 start --name mount-bookmark npm -- start 23 | ``` 24 | 25 | For having it as a "New Tab" page you could use the [New Tab Redirect Extension](https://chrome.google.com/webstore/detail/new-tab-redirect/icpgjfneehieebagbmdbhnlpiopdcmna) for Chrome. 26 | 27 | # Customization:scroll: 28 | 29 | Under **/src/config** you'll find two json files. 30 | 31 | ### colorPalette.json 32 | 33 | ```json 34 | { 35 | "backroundBox": "rgba(37,42,51,0.98)", 36 | "icon": "rgba(252,252,252,1.0)", 37 | "accent1": "rgba(242,183,86,1.0)", 38 | "text": { 39 | "primary": "#FCFCFC", 40 | "secondary": "rgba(242,183,86,0.5)" 41 | } 42 | } 43 | ``` 44 | 45 | As the name suggests here you can define all the colors in the app. You can use both **HEX** and **rgba()**. 46 | 47 | ### settings.json 48 | 49 | ```json 50 | { 51 | "bookmarkCategories": [ 52 | { 53 | "name": "media", 54 | "bookmarks": [ 55 | { 56 | "name": "youtube", 57 | "link": "youtube.com", 58 | "svgPath": "M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z" 59 | }, 60 | ] 61 | }, 62 | { 63 | "name": "various", 64 | "bookmarks": [ 65 | { 66 | "name": "mail", 67 | "link": "mail.startmail.com", 68 | "svgPath": "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" 69 | }, 70 | { 71 | "name": "digitec", 72 | "link": "digitec.ch", 73 | "svgPath": "M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z" 74 | }, 75 | ] 76 | } 77 | ], 78 | "videoSettings": { 79 | "videoId": "QOjmvL3e7Lc", 80 | "autoplay": true, 81 | "mute": 1, 82 | "offSet": { 83 | "top": "0px", 84 | "right": "0px", 85 | "bottom": "0px", 86 | "left": "0px" 87 | } 88 | }, 89 | "searchEngine": "https://www.ecosia.org/search?q=" 90 | } 91 | ``` 92 | 93 | > **_Note:_** Currently the only way to use Icons is to use the svg-path 94 | 95 | The names of each attribute should be fairly self-explanatory! 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mount-bookmark", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.4", 7 | "@material-ui/icons": "^4.11.2", 8 | "@material-ui/styles": "^4.11.4", 9 | "@testing-library/jest-dom": "^5.12.0", 10 | "@testing-library/react": "^11.2.7", 11 | "@testing-library/user-event": "^12.8.3", 12 | "@types/jest": "^26.0.23", 13 | "@types/node": "^12.20.13", 14 | "@types/react": "^17.0.5", 15 | "@types/react-dom": "^17.0.5", 16 | "@types/youtube-player": "^5.5.3", 17 | "clsx": "^1.1.1", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-scripts": "^5.0.1", 21 | "react-youtube": "^7.13.1", 22 | "sass": "^1.80.6", 23 | "typescript": "^4.2.4", 24 | "web-vitals": "^1.1.2" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinoIten/mount-bookmark/842fbd1aad14b8d8e5f5f7df276449afe67dec05/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Mount Bookmark 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Mount Bookmark", 3 | "name": "Mount Bookmark", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import BackgroundStream from './components/BackgroundStream'; 2 | import MainCard from './components/MainCard'; 3 | 4 | export default function App() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | } -------------------------------------------------------------------------------- /src/components/BackgroundStream.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import YouTube, { Options } from 'react-youtube'; 3 | import { YouTubePlayer } from 'youtube-player/dist/types'; 4 | 5 | import { makeStyles, useMediaQuery } from '@material-ui/core'; 6 | 7 | import settings from '../config/settings.json'; 8 | 9 | const useStyles = makeStyles({ 10 | videoBackground: { 11 | background: "#000", 12 | position: "fixed", 13 | top: 0, 14 | bottom: 0, 15 | right: 0, 16 | left: 0, 17 | zIndex: -1, 18 | marginTop: settings.videoSettings.offSet.top, 19 | marginRight: settings.videoSettings.offSet.right, 20 | marginBottom: settings.videoSettings.offSet.bottom, 21 | marginLeft: settings.videoSettings.offSet.left, 22 | '&::after': { 23 | display: "block", 24 | content: '', 25 | position: "absolute", 26 | top: 0, 27 | left: 0, 28 | width: "100%", 29 | height: "100%", 30 | zIndex: 1, 31 | }, 32 | '& iframe': { 33 | position: "absolute", 34 | top: 0, 35 | left: 0, 36 | width: "100%", 37 | height: "100%", 38 | pointerEvents: "none", 39 | } 40 | }, 41 | videoForeground: { 42 | position: "absolute", 43 | top: 0, 44 | left: 0, 45 | width: "100%", 46 | height: "100%", 47 | pointerEvents: "none", 48 | }, 49 | minAspect: { 50 | height: "300%", 51 | top: "-100%" 52 | }, 53 | maxAspect: { 54 | width: "300%", 55 | left: "-100%" 56 | } 57 | }); 58 | 59 | function BackgroundStream() { 60 | const classes = useStyles(); 61 | 62 | const mediaQueryMinAspect = useMediaQuery('(min-aspect-ratio: 16/9)'); 63 | 64 | function _onEnd(event: { target: YouTubePlayer; data: number }) { 65 | event.target.playVideo(); 66 | } 67 | 68 | const videoOptions: Options = { 69 | playerVars: { 70 | autoplay: settings.videoSettings.autoplay ? 1 : 0, 71 | controls: 0, 72 | rel: 0, 73 | showinfo: 0, 74 | mute: settings.videoSettings.mute ? 1 : 0, 75 | disablekb: 1, 76 | fs: 0 77 | } 78 | }; 79 | 80 | return ( 81 | <> 82 |
83 |
84 | 89 |
90 |
91 | 92 | ); 93 | } 94 | 95 | export default BackgroundStream; -------------------------------------------------------------------------------- /src/components/Bookmark.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | import clsx from 'clsx'; 4 | 5 | import { Grid, Link, makeStyles, SvgIcon, Typography } from '@material-ui/core'; 6 | 7 | import colorPalette from '../config/colorPalette.json'; 8 | 9 | const useStyles = makeStyles({ 10 | bookmarkName: { 11 | fontFamily: "UbuntuMono", 12 | letterSpacing: "1.3", 13 | textAlign: "left", 14 | fontWeight: "bold", 15 | color: colorPalette.text.primary, 16 | }, 17 | bookmarkLink: { 18 | fontFamily: "UbuntuMono", 19 | letterSpacing: "0.8", 20 | textAlign: "left", 21 | fontWeight: "normal", 22 | fontSize: "0.7em", 23 | color: colorPalette.accent1, 24 | '&:hover': { 25 | color: colorPalette.accent1 26 | }, 27 | }, 28 | icon: { 29 | color: colorPalette.icon 30 | }, 31 | bookmarkIcon: { 32 | marginRight: "10px" 33 | } 34 | }); 35 | 36 | interface IBookmark { 37 | icon?: string, 38 | name?: string, 39 | link?: string 40 | } 41 | 42 | export default function Bookmark(props: IBookmark) { 43 | const classes = useStyles(); 44 | 45 | const { 46 | icon, 47 | name, 48 | link 49 | } = props 50 | 51 | return ( 52 | 53 | 54 | 60 | 61 | {icon ? ( 62 | 63 | 64 | 65 | ) : null} 66 | 67 | 68 | 74 | 75 | {name ? name : ""} 76 | 77 | 78 | {link ? link : ""} 79 | 80 | 81 | 82 | 83 | 84 | 85 | ) 86 | } 87 | -------------------------------------------------------------------------------- /src/components/MainCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | import { Card, Grid, InputAdornment, makeStyles, TextField, Typography } from '@material-ui/core'; 4 | import SearchIcon from '@material-ui/icons/Search'; 5 | 6 | import colorPalette from '../config/colorPalette.json'; 7 | import settings from '../config/settings.json'; 8 | import Bookmark from './Bookmark'; 9 | 10 | const useStyles = makeStyles({ 11 | main: { 12 | position: "absolute", 13 | left: "50%", 14 | top: "50%", 15 | transform: "translate(-50%, -50%)", 16 | padding: "40px", 17 | backgroundColor: colorPalette.backroundBox, 18 | width: "40%", 19 | minHeight: "10%", 20 | }, 21 | bookmarkCategory: { 22 | fontFamily: "UbuntuMono", 23 | letterSpacing: "1.3", 24 | fontSize: "1.3em", 25 | textAlign: "left", 26 | fontWeight: "bold", 27 | color: colorPalette.accent1, 28 | }, 29 | icon: { 30 | color: colorPalette.icon 31 | }, 32 | searchBar: { 33 | width: "100%", 34 | '& .MuiInput-underline::after': { 35 | borderBottomColor: colorPalette.accent1, 36 | }, 37 | '& .MuiInput-underline::before': { 38 | borderBottomColor: colorPalette.text.primary 39 | }, 40 | '& input': { 41 | color: colorPalette.text.primary, 42 | }, 43 | }, 44 | grid: { 45 | width: "100%", 46 | height: "100%", 47 | } 48 | }); 49 | 50 | export default function MainCard() { 51 | const classes = useStyles(); 52 | 53 | const [searchQuery, setSearchQuery] = useState(""); 54 | 55 | const handleChange = (event: any) => { 56 | setSearchQuery(event.target.value) 57 | } 58 | 59 | const handleKeyPress = (event: any) => { 60 | if(event.key === 'Enter'){ 61 | document.location.href = settings.searchEngine + searchQuery; 62 | } 63 | } 64 | 65 | return ( 66 | 67 | 75 | 76 | 85 | 86 | 87 | ), 88 | }} 89 | /> 90 | 91 | {settings.bookmarkCategories.map(category => ( 92 | 93 | {category.name} 94 | 102 | {category.bookmarks.map(bookmark => ( 103 | 104 | ))} 105 | 106 | 107 | ))} 108 | 109 | 110 | ); 111 | } 112 | -------------------------------------------------------------------------------- /src/config/colorPalette.json: -------------------------------------------------------------------------------- 1 | { 2 | "backroundBox": "rgba(37,42,51,0.98)", 3 | "icon": "rgba(252,252,252,1.0)", 4 | "accent1": "rgba(242,183,86,1.0)", 5 | "text": { 6 | "primary": "#FCFCFC", 7 | "secondary": "rgba(242,183,86,0.5)" 8 | } 9 | } -------------------------------------------------------------------------------- /src/config/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "bookmarkCategories": [ 3 | { 4 | "name": "media", 5 | "bookmarks": [ 6 | {"name": "youtube", "link": "youtube.com", "svgPath": "M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"}, 7 | {"name": "netflix", "link": "netflix.com", "svgPath": "M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"}, 8 | {"name": "reddit", "link": "reddit.com", "svgPath": "M22 12.14a2.19 2.19 0 0 0-3.71-1.57 10.93 10.93 0 0 0-5.86-1.87l1-4.7 3.27.71a1.56 1.56 0 1 0 .16-.76l-3.64-.77c-.11-.02-.22 0-.29.06-.09.05-.14.14-.16.26l-1.11 5.22c-2.33.07-4.43.78-5.95 1.86A2.2 2.2 0 0 0 4.19 10a2.16 2.16 0 0 0-.9 4.15 3.6 3.6 0 0 0-.05.66c0 3.37 3.92 6.12 8.76 6.12s8.76-2.73 8.76-6.12c0-.21-.01-.44-.05-.66A2.21 2.21 0 0 0 22 12.14M7 13.7c0-.86.68-1.56 1.54-1.56s1.56.7 1.56 1.56a1.56 1.56 0 0 1-1.56 1.56c-.86.02-1.54-.7-1.54-1.56m8.71 4.14C14.63 18.92 12.59 19 12 19c-.61 0-2.65-.1-3.71-1.16a.4.4 0 0 1 0-.57.4.4 0 0 1 .57 0c.68.68 2.14.91 3.14.91s2.47-.23 3.14-.91a.4.4 0 0 1 .57 0c.14.16.14.41 0 .57m-.29-2.56c-.86 0-1.56-.7-1.56-1.56a1.56 1.56 0 0 1 1.56-1.56c.86 0 1.58.7 1.58 1.56a1.6 1.6 0 0 1-1.58 1.56z"}, 9 | {"name": "unsplash", "link": "unsplash.com", "svgPath": "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"} 10 | ] 11 | }, 12 | { 13 | "name": "various", 14 | "bookmarks": [ 15 | {"name": "mail", "link": "mail.startmail.com", "svgPath": "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"}, 16 | {"name": "digitec", "link": "digitec.ch", "svgPath": "M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"}, 17 | {"name": "eat", "link": "eat.ch", "svgPath": "M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1zm15.03-7c0-8-15.03-8-15.03 0h15.03zM1.02 17h15v2h-15z"} 18 | ] 19 | }, 20 | { 21 | "name": "raspberry-pi", 22 | "bookmarks": [ 23 | {"name": "pi-hole", "link": "192.168.0.199/admin", "svgPath": "M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"}, 24 | {"name": "portainer", "link": "192.168.0.199:9000", "svgPath": "M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z"}, 25 | {"name": "bitwarden", "link": "192.168.0.199:8080", "svgPath": "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"} 26 | ] 27 | } 28 | ], 29 | "videoSettings": { 30 | "videoId": "kmo17mb5LvI", 31 | "autoplay": true, 32 | "mute": 1, 33 | "offSet": { 34 | "top": "0px", 35 | "right": "0px", 36 | "bottom": "0px", 37 | "left": "0px" 38 | } 39 | }, 40 | "searchEngine": "https://www.ecosia.org/search?q=" 41 | } -------------------------------------------------------------------------------- /src/fonts/UbuntuMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinoIten/mount-bookmark/842fbd1aad14b8d8e5f5f7df276449afe67dec05/src/fonts/UbuntuMono-Bold.ttf -------------------------------------------------------------------------------- /src/fonts/UbuntuMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinoIten/mount-bookmark/842fbd1aad14b8d8e5f5f7df276449afe67dec05/src/fonts/UbuntuMono-Regular.ttf -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "UbuntuMono"; 3 | src: local("UbuntuMono"), 4 | url("./fonts/UbuntuMono-Bold.ttf") format("truetype"); 5 | font-weight: bold; 6 | } 7 | 8 | @font-face { 9 | font-family: "UbuntuMono"; 10 | src: local("UbuntuMono"), 11 | url("./fonts/UbuntuMono-Regular.ttf") format("truetype"); 12 | font-weight: normal; 13 | } 14 | 15 | body { 16 | font-family: 'UbuntuMono-Bold'; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------