extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: new error message 

- clean up of translation code
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes 2024-02-13 20:13:48 +00:00
parent 2f851d8933
commit b9bb735371
9 changed files with 240 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
.env Normal file
View File

@ -0,0 +1,28 @@
// API URLs
API_URL=https://api.muetab.com/v2
SPONSORS_URL=https://sponsors.muetab.com
GITHUB_URL=https://api.github.com
DDG_IMAGE_PROXY=https://external-content.duckduckgo.com/iu/?u=
OPENSTREETMAP_URL=https://www.openstreetmap.org
// Mue URLs
WEBSITE_URL=https://muetab.com
PRIVACY_URL=https://muetab.com/privacy
BLOG_POST=https://blog.muetab.com/posts/version-7-0
TRANSLATIONS_URL=https://docs.muetab.com/translations/
WEBLATE_URL=https://hosted.weblate.org/projects/mue/mue-tab/
REPORT_ITEM =https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+
BUG_REPORT =https://github.com/mue/mue/issues/new?assignees=&labels=issue+report&template=bug-report.md&title=%5BBug%5D+
DONATE_LINK=https://muetab.com/donate
SENTRY_DSN =https://430352fd4b174d688ebd82fc85c22c58@o1217438.ingest.sentry.io/6359480
KNOWLEDGEBASE=https://support.muetab.com
// Mue Info
ORG_NAME=mue
REPO_NAME=mue
EMAIL=hello@muetab.com
TWITTER_HANDLE=getmue
DISCORD_SERVER=zv8C9F8
OPENCOLLECTIVE_USERNAME=mue
VERSION=7.0.1

44
src/ErrorBoundary.jsx
View File

@ -1,19 +1,51 @@
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
class ErrorBoundary extends Component {
import { captureException } from '@sentry/react';
class ErrorBoundary extends PureComponent {
constructor(props) {
super(props);
this.state = { hasError: false };
this.state = {
error: false,
errorData: '',
showReport: true,
};
}
componentDidCatch(error, errorInfo) {
this.setState({ hasError: true });
this.setState({ error: true, errorData: errorInfo });
console.error('Error boundary caught an error:', error, errorInfo);
}
reportError() {
captureException(this.state.errorData);
this.setState({
showReport: false,
});
}
render() {
if (this.state.hasError) {
return <div>Mue has broken horribly</div>;
if (this.state.error) {
return (
<div className="criticalError">
<div className="criticalError-message">
<h1>A critical error has occurred</h1>
<p>
The new tab page could not be loaded. Please uninstall the extension and try again.
</p>
<div className="criticalError-actions">
{this.state.showReport ? (
<button onClick={() => this.reportError()}>Report Issue</button>
) : (
<p>Sent Successfully</p>
)}
<a href="https://discord.gg/zv8C9F8" target="_blank" rel="noreferrer">
Support Discord
</a>
</div>
</div>
</div>
);
}
return this.props.children;

105
src/components/modals/main/scss/settings/_main.scss
View File

@ -3,6 +3,7 @@
@import 'modules/tabs/about';
@import 'modules/tabs/changelog';
@import 'modules/tabs/order';
@import 'modules/tabs/stats';
input {
/* colour picker */
@ -127,102 +128,18 @@ h4 {
}
}
.stats {
display: flex;
flex-flow: column;
gap: 30px;
width: 100%;
.rightPanel {
.statIcon {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.statGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
div {
display: flex;
flex-flow: column;
}
}
.subtitle {
text-transform: capitalize;
}
span {
font-size: 20px;
}
}
}
.achievements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
.achievement {
padding: 20px 10px;
display: flex;
flex-flow: row !important;
align-items: center;
@include themed {
background: t($modal-secondaryColour);
border: 1px solid t($modal-sidebarActive);
border-radius: t($borderRadius);
gap: 10px;
}
svg {
font-size: 20px !important;
padding: 15px;
border-radius: 100%;
@include themed {
background: t($modal-sidebarActive);
}
}
}
.statSection.rightPanel {
padding: 25px;
@include themed {
border-radius: t($borderRadius);
background: t($modal-secondaryColour);
box-shadow: 0 0 0 1px t($modal-sidebarActive);
svg {
font-size: 50px;
color: t($subColor);
}
}
}
.achievementContent {
display: flex;
flex-flow: column;
gap: 2px;
span:first-child {
font-weight: bold;
font-size: 15px;
}
.subtitle {
font-size: 13px !important;
}
}
.customcss textarea {
font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
'Courier New', Courier, monospace !important;
}
.preferences {
transition: 0.4s ease-in-out;
}
.preferencesInactive {
opacity: 0.5;
pointer-events: none;
transition: 0.4s ease-in-out;
}

106
src/components/modals/main/scss/settings/modules/tabs/_stats.scss Normal file
View File

@ -0,0 +1,106 @@
.stats {
display: flex;
flex-flow: column;
gap: 30px;
width: 100%;
.rightPanel {
.statIcon {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.statGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
div {
display: flex;
flex-flow: column;
}
}
.subtitle {
text-transform: capitalize;
}
span {
font-size: 20px;
}
}
}
.achievements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
.achievement {
padding: 20px 10px;
display: flex;
flex-flow: row !important;
align-items: center;
@include themed {
background: t($modal-secondaryColour);
border: 1px solid t($modal-sidebarActive);
border-radius: t($borderRadius);
gap: 10px;
}
svg {
font-size: 20px !important;
padding: 15px;
border-radius: 100%;
@include themed {
background: t($modal-sidebarActive);
}
}
}
.statSection.rightPanel {
padding: 25px;
@include themed {
border-radius: t($borderRadius);
background: t($modal-secondaryColour);
box-shadow: 0 0 0 1px t($modal-sidebarActive);
svg {
font-size: 50px;
color: t($subColor);
}
}
}
.achievementContent {
display: flex;
flex-flow: column;
gap: 2px;
span:first-child {
font-weight: bold;
font-size: 15px;
}
.subtitle {
font-size: 13px !important;
}
}
.statsTopBar {
display: flex;
justify-content: space-between;
align-items: center;
button {
margin-bottom: 15px;
flex-flow: row !important;
padding-left: 20px;
padding-right: 20px;
}
}

1
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@ -99,6 +99,7 @@ class Tabs extends PureComponent {
icon={icon}
label={variables.getMessage(`modals.main.navbar.${tab}`)}
active={this.props.current === tab}
key={tab}
/>
))}
</div>

2
src/modules/constants.js
View File

@ -28,6 +28,4 @@ export const TWITTER_HANDLE = 'getmue';
export const DISCORD_SERVER = 'zv8C9F8';
export const OPENCOLLECTIVE_USERNAME = 'mue';
export const OFFLINE_IMAGES = 20;
export const VERSION = '7.0.1';

65
src/modules/translations.js
View File

@ -1,19 +1,21 @@
import I18n from '@eartharoid/i18n';
import * as de_DE from '../translations/de_DE.json';
import * as en_GB from '../translations/en_GB.json';
import * as en_US from '../translations/en_US.json';
import * as es from '../translations/es.json';
import * as es_419 from '../translations/es_419.json';
import * as fr from '../translations/fr.json';
import * as nl from '../translations/nl.json';
import * as no from '../translations/no.json';
import * as ru from '../translations/ru.json';
import * as zh_CN from '../translations/zh_CN.json';
import * as id_ID from '../translations/id_ID.json';
import * as tr_TR from '../translations/tr_TR.json';
import * as pt_BR from '../translations/pt_BR.json';
import * as bn from '../translations/bn.json';
export const translations = {
de_DE: import('../translations/de_DE.json'),
en_GB: import('../translations/en_GB.json'),
en_US: import('../translations/en_US.json'),
es: import('../translations/es.json'),
es_419: import('../translations/es_419.json'),
fr: import('../translations/fr.json'),
nl: import('../translations/nl.json'),
no: import('../translations/no.json'),
ru: import('../translations/ru.json'),
zh_CN: import('../translations/zh_CN.json'),
id_ID: import('../translations/id_ID.json'),
tr_TR: import('../translations/tr_TR.json'),
pt_BR: import('../translations/pt_BR.json'),
bn: import('../translations/bn.json'),
};
/**
* Initialise the i18n object.
@ -22,39 +24,6 @@ import * as bn from '../translations/bn.json';
* @returns The i18n object.
*/
export function initTranslations(locale) {
const i18n = new I18n(locale, {
de_DE,
en_GB,
en_US,
es,
es_419,
fr,
nl,
no,
ru,
zh_CN,
id_ID,
tr_TR,
pt_BR,
bn,
});
const i18n = new I18n(locale, translations);
return i18n;
}
export const translations = {
de_DE,
en_GB,
en_US,
es,
es_419,
fr,
nl,
no,
ru,
zh_CN,
id_ID,
tr_TR,
pt_BR,
bn,
};

0
src/scss/_error.scss Normal file
View File

58
src/scss/index.scss
View File

@ -116,25 +116,45 @@ body {
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
.statsTopBar {
display: flex;
justify-content: space-between;
align-items: center;
/* error */
.criticalError {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
.criticalError-message {
color: #fff;
}
p {
color: #ffffffc0;
}
button {
margin-bottom: 15px;
flex-flow: row !important;
padding-left: 20px;
padding-right: 20px;
.criticalError-actions {
display: flex;
flex-flow: row;
gap: 20px;
}
button,
a {
background: #0e1013;
box-shadow: 0 0 0 1px #484848;
border: 0;
color: #fff;
border-radius: 12px;
padding: 10px 30px 10px 30px;
font-size: 1rem;
display: flex;
align-items: center;
flex-flow: row;
justify-content: center;
gap: 20px;
transition: 0.5s;
cursor: pointer;
text-decoration: none;
&:hover {
background: #1e1e1e;
}
}
}
.preferences {
transition: 0.4s ease-in-out;
}
.preferencesInactive {
opacity: 0.5;
pointer-events: none;
transition: 0.4s ease-in-out;
}