Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: preload style, csp allow all, refactor index html & env var #404

Merged
merged 6 commits into from
May 31, 2022
Merged

Fix: preload style, csp allow all, refactor index html & env var #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3fa55f9
fix style prelload link
YHhaoareyou May 30, 2022
2ef6f4d
refactor index.html & add env variables
YHhaoareyou May 31, 2022
625047b
remove slash from the end of base path env var
YHhaoareyou May 31, 2022
78ee3da
import other mf's css files as external
YHhaoareyou May 31, 2022
b79eb96
run eslint fix
YHhaoareyou May 31, 2022
3cf1fb4
run eslint fix
YHhaoareyou May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions campus/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"preinstall": "npx only-allow pnpm",
"start": "vite --port 8081",
"build": "vite build",
"build-dev": "vite build --mode staging",
"build-dev": "vite build",
"preview": "vite preview --port 8081",
"preview-dev": "vite preview --mode staging --port 8081",
"preview-dev": "vite preview --port 8081",
"tsc": "tsc",
"local": "concurrently --kill-others \"pnpm start\" \"cd ../root && pnpm start\"",
"fix": "pnpm run format && pnpm run lint:fix",
Expand Down
10 changes: 2 additions & 8 deletions campus/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,12 @@ import dynamicImport from "vite-plugin-dynamic-import";
const path = require("path");

export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
const publicAssetsBaseUrl =
mode === "production"
? "/campus/"
: mode === "staging"
? `https://${env.MF_DOMAIN_WITH_PREFIX}/`
: "http://localhost:8081/";
const env = loadEnv(mode, process.cwd() + "/src");

return {
root: "./src",
publicDir: "assets",
base: publicAssetsBaseUrl,
base: env.VITE_PUBLIC_BASE_PATH + "/",
rollupOptions: {
input: "wasedatime-campus.ts",
preserveEntrySignatures: true,
Expand Down
4 changes: 2 additions & 2 deletions career/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"preinstall": "npx only-allow pnpm",
"start": "vite --port 8082",
"build": "vite build",
"build-dev": "vite build --mode staging",
"build-dev": "vite build",
"preview": "vite preview --port 8082",
"preview-dev": "vite preview --mode staging --port 8082",
"preview-dev": "vite preview --port 8082",
"tsc": "tsc",
"local": "concurrently --kill-others \"pnpm start\" \"cd ../root && pnpm start\"",
"fix": "pnpm run format && pnpm run lint:fix",
Expand Down
4 changes: 2 additions & 2 deletions root/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
"preinstall": "npx only-allow pnpm",
"start": "DONT_PURGE_TAILWIND_CSS=true pnpm run tailwind:build && vite --port 9000",
"build": "vite build",
"build-dev": "vite build --mode staging",
"build-dev": "vite build",
"preview": "vite preview --port 9000",
"preview-dev": "vite preview --mode staging --port 9000",
"preview-dev": "vite preview --port 9000",
"tsc": "tsc",
"fix": "pnpm run format && pnpm run lint:fix",
"lint": "eslint src --ext \"**/*.{js,ts,tsx}\"",
Expand Down
11 changes: 2 additions & 9 deletions root/src/components/Feeds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,7 @@ const Feeds = () => {
const { t, i18n } = useTranslation();
const { theme, setTheme } = React.useContext(ThemeContext);

const feedsDomain =
import.meta.env.MODE === "development"
? "http://localhost:8083"
: import.meta.env.MODE === "staging"
? `https://${import.meta.env.MF_PREFIX}.${
import.meta.env.MF_FEEDS_DOMAIN
}`
: "/feeds";
const feedsBasePath = import.meta.env.VITE_MF_FEEDS_BASE_PATH;

return (
<FeedsWrapper style={{ overflow: "hidden" }}>
Expand All @@ -52,7 +45,7 @@ const Feeds = () => {
<div>
{!feedsLoaded && <LoadingSpinner theme="light" message="Loading..." />}
<iframe
src={`${feedsDomain}/${i18n.language}`}
src={`${feedsBasePath}/${i18n.language}`}
style={{ width: "100%", height: "calc(100vh - 70px)" }}
onLoad={() => setFeedsLoaded(true)}
/>
Expand Down
2 changes: 1 addition & 1 deletion root/src/components/aboutUs/MeetOurTeam/MeetOurTeam.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import styled from "styled-components";

import {
AlumniList,
CurrentList
CurrentList,
} from "@app/components/aboutUs/MeetOurTeam/memberList";

import { ProfileCard } from "@app/components/block/ProfileCard";
Expand Down
77 changes: 24 additions & 53 deletions root/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,59 +28,35 @@
<link href="/img/splash_image.png" sizes="750x1334" rel="apple-touch-startup-image" />
<link href="/img/splash_image.png" sizes="640x1136" rel="apple-touch-startup-image" />

<% if (isLocal || standalone) { %>
<link rel="stylesheet" href="./src/styles/tailwind-build-output.css" type="css">
<script type="importmap-shim" defer>
{
"imports": {
"@wasedatime/home": "//localhost:9000/wasedatime-home.ts",
"@wasedatime/syllabus": "//localhost:8080/wasedatime-syllabus.ts",
"@wasedatime/campus": "//localhost:8081/wasedatime-campus.ts",
"@wasedatime/career": "//localhost:8082/wasedatime-career.ts"
}
<script type="importmap-shim" defer>
{
"imports": {
"@wasedatime/home": "<%= env.VITE_MF_HOME_BASE_PATH %>/wasedatime-home.<%= isLocal ? "ts" : "js" %>",
"@wasedatime/syllabus": "<%= env.VITE_MF_SYLLABUS_BASE_PATH %>/wasedatime-syllabus.<%= isLocal ? "ts" : "js" %>",
"@wasedatime/campus": "<%= env.VITE_MF_CAMPUS_BASE_PATH %>/wasedatime-campus.<%= isLocal ? "ts" : "js" %>"
}
</script>
}
</script>

<% if (isLocal) { %>
<link rel="stylesheet" href="./src/styles/tailwind-build-output.css" type="css">
<% } else { %>
<% if (isDev) { %>
<script type="importmap-shim" defer>
{
"imports": {
"@wasedatime/home": "/wasedatime-home.js",
"@wasedatime/syllabus": "https://<%= env.MF_PREFIX %>.<%= env.MF_SYLLABUS_DOMAIN %>/wasedatime-syllabus.js",
"@wasedatime/campus": "https://<%= env.MF_PREFIX %>.<%= env.MF_CAMPUS_DOMAIN %>/wasedatime-campus.js"
}
}
</script>
<link rel="preload" href="https://<%= env.MF_PREFIX %>.<%= env.MF_SYLLABUS_DOMAIN %>/assets/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://<%= env.MF_PREFIX %>.<%= env.MF_SYLLABUS_DOMAIN %>/assets/style.css"></noscript>
<link rel="preload" href="https://<%= env.MF_PREFIX %>.<%= env.MF_CAMPUS_DOMAIN %>/assets/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://<%= env.MF_PREFIX %>.<%= env.MF_CAMPUS_DOMAIN %>/assets/style.css"></noscript>
<% } else { %>
<script type="importmap-shim" defer>
{
"imports": {
"@wasedatime/home": "/wasedatime-home.js",
"@wasedatime/syllabus": "/syllabus/wasedatime-syllabus.js",
"@wasedatime/campus": "/campus/wasedatime-campus.js"
}
}
</script>
<link rel="preload" href="/syllabus/assets/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/syllabus/assets/style.css"></noscript>
<link rel="preload" href="/campus/assets/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/campus/assets/style.css"></noscript>
<% } %>
<link rel="preload" href="<%= env.VITE_MF_SYLLABUS_BASE_PATH %>/assets/style.css" as="style">
<link rel="stylesheet" href="<%= env.VITE_MF_SYLLABUS_BASE_PATH %>/assets/style.css" type="css">
<link rel="preload" href="<%= env.VITE_MF_CAMPUS_BASE_PATH %>/assets/style.css" as="style">
<link rel="stylesheet" href="<%= env.VITE_MF_CAMPUS_BASE_PATH %>/assets/style.css" type="css">

<link rel="preload" as="font" href="/fonts/segoe-ui.ttf" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" as="font" href="/fonts/yugothic-medium.otf" type="font/otf" crossorigin="anonymous" />
<link rel="preload" as="font" href="/fonts/Lato-Regular.ttf" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" as="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" type="text/css">

<script type="module">
import { registerSW } from "virtual:pwa-register";
if ('serviceWorker' in navigator) {
registerSW();
}
</script>

<link rel="preload" as="font" href="/fonts/segoe-ui.ttf" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" as="font" href="/fonts/yugothic-medium.otf" type="font/otf" crossorigin="anonymous" />
<link rel="preload" as="font" href="/fonts/Lato-Regular.ttf" type="font/ttf" crossorigin="anonymous" />
<link rel="preload" as="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" type="text/css">
<% } %>

<script>
Expand Down Expand Up @@ -155,9 +131,9 @@
<route path="campus">
<application name="@wasedatime/campus"></application>
</route>
<route path="career">
<!-- <route path="career">
<application name="@wasedatime/career"></application>
</route>
</route> -->
<route default>
<application name="@wasedatime/home"></application>
</route>
Expand All @@ -170,11 +146,6 @@
<div id="loading">
<noscript><canvas></canvas></noscript>
</div>
<% if (isLocal || standalone) { %>
<script type="module-shim" src="/wasedatime-root-config.ts"></script>
<% } else { %>
<script type="module-shim" src="/wasedatime-root-config.js"></script>
<% } %>
<!-- <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full> -->
<script type="module-shim" src="/wasedatime-root-config.<%= isLocal ? "ts" : "js" %>"></script>
</body>
</html>
16 changes: 4 additions & 12 deletions root/src/wasedatime-root-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,10 @@ i18nConfig({
},
});

// ===== GA id =====
// production (wasedatime.com): UA-112185819-1
// staging (dev.wasedatime.com): UA-112185819-3
// development (localhost): UA-112185819-4
if (import.meta.env.MODE === "development") {
ReactGA.initialize("UA-112185819-4", { debug: false, titleCase: false });
} else {
ReactGA.initialize(
import.meta.env.MODE === "production" ? "UA-112185819-1" : "UA-112185819-3",
{ debug: false, titleCase: false }
);
}
ReactGA.initialize(import.meta.env.VITE_GA_ID, {
debug: false,
titleCase: false,
});

ReactDOM.render(
React.createElement("span"),
Expand Down
20 changes: 7 additions & 13 deletions root/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { VitePWA } from "vite-plugin-pwa";
const path = require("path");

export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
const env = loadEnv(mode, process.cwd() + "/src");
return {
root: "./src",
publicDir: "assets",
Expand All @@ -29,15 +29,11 @@ export default defineConfig(({ mode }) => {
entryFileNames: "[name].js",
assetFileNames: "assets/[name].[ext]",
},
external:
mode === "staging"
? [
`https://${env.MF_PREFIX}.${env.MF_SYLLABUS_DOMAIN}/assets/style.css`,
`https://${env.MF_PREFIX}.${env.MF_CAMPUS_DOMAIN}/assets/style.css`,
]
: mode === "production"
? ["/syllabus/assets/style.css", "/campus/assets/style.css"]
: [],
external: [
`${env.VITE_MF_SYLLABUS_BASE_PATH}/assets/style.css`,
`${env.VITE_MF_CAMPUS_BASE_PATH}/assets/style.css`,
"/assets/style.css",
],
},
},
resolve: {
Expand All @@ -55,8 +51,6 @@ export default defineConfig(({ mode }) => {
plugins: [
ViteEjsPlugin((config) => ({
isLocal: config.mode === "development",
isDev: config.mode === "staging",
standalone: false,
env,
})),
reactRefresh(),
Expand All @@ -66,7 +60,7 @@ export default defineConfig(({ mode }) => {
srcDir: ".",
filename: "sw.js",
registerType: "autoUpdate",
useCredentials: mode === "staging",
useCredentials: env.VITE_IS_STAGING === "true",
includeAssets: [
"favicon.svg",
"favicon.ico",
Expand Down
4 changes: 2 additions & 2 deletions syllabus/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
"postinstall": "semantic-ui-css-patch",
"start": "vite --port 8080",
"build": "vite build",
"build-dev": "vite build --mode staging",
"build-dev": "vite build",
"preview": "vite preview --port 8080",
"preview-dev": "vite preview --mode staging --port 8080",
"preview-dev": "vite preview --port 8080",
"tsc": "tsc",
"local": "concurrently --kill-others \"pnpm start\" \"cd ../root && pnpm start\"",
"fix": "pnpm run format && pnpm run lint:fix",
Expand Down
3 changes: 2 additions & 1 deletion syllabus/src/components/labs/Lab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,12 @@ const ReviewsModal = styled.div`
`;

const LabHeader = styled.div`
height: 15%;
padding: 1em;
`;

const ReviewsWrapper = styled(SimpleBar)`
height: 100%;
height: 85%;
padding: 1em;
.simplebar-scrollbar::before {
background-color: #999;
Expand Down
20 changes: 15 additions & 5 deletions syllabus/src/components/timetable/Timetable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,19 @@ const ScrollableTimetable = styled("div")`
`;

const StyledWarningMessage = styled(Message)<StyledMessageProps>`
${(props) => props.$isDark && `background-color: ${timetableColors.dark.deeperBrown} !important;`}
${(props) => props.$isDark && `color: ${timetableColors.dark.lightBrown} !important;`}
${(props) =>
props.$isDark &&
`background-color: ${timetableColors.dark.deeperBrown} !important;`}
${(props) =>
props.$isDark && `color: ${timetableColors.dark.lightBrown} !important;`}
`;

const StyledSuccessMessage = styled(Message)<StyledMessageProps>`
${(props) => props.$isDark && `background-color: ${timetableColors.dark.deepGreen} !important;`}
${(props) => props.$isDark && `color: ${timetableColors.dark.lightGreen} !important;`}
${(props) =>
props.$isDark &&
`background-color: ${timetableColors.dark.deepGreen} !important;`}
${(props) =>
props.$isDark && `color: ${timetableColors.dark.lightGreen} !important;`}
`;

interface Props extends WithTranslation {
Expand Down Expand Up @@ -147,7 +153,11 @@ const Timetable = ({ addedCoursesAndPrefs, t }: Props) => {
/>
</Section>
<Section>
<StyledSuccessMessage success size="mini" $isDark={theme === "dark"}>
<StyledSuccessMessage
success
size="mini"
$isDark={theme === "dark"}
>
<p>{t("timetable.SaveSpace")}</p>
</StyledSuccessMessage>
</Section>
Expand Down
7 changes: 6 additions & 1 deletion syllabus/src/containers/SyllabusContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,12 @@ class SyllabusContainer extends React.Component<
/>
) : (
<div style={{ padding: "2em" }}>
<Message info style={theme === "dark" ? { opacity: 0.7 } : {}}>{t("message.choose school request")}</Message>
<Message
info
style={theme === "dark" ? { opacity: 0.7 } : {}}
>
{t("message.choose school request")}
</Message>
<SchoolFilterContainer
checkedSchools={[]}
handleToggleFilter={() => {}}
Expand Down
19 changes: 4 additions & 15 deletions syllabus/src/root.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,10 @@ API.configure(config);

configAuth();

if (import.meta.env.PROD) {
ReactGA.initialize("UA-112185819-1", { debug: false, titleCase: false });
Sentry.init({
dsn: "https://[email protected]/5577049",
environment: import.meta.env.MODE,
ignoreErrors: [
"Network Error",
"NetworkError",
"Loading chunk",
"Timed out",
],
});
} else {
ReactGA.initialize("UA-112185819-4", { debug: false, titleCase: false });
}
ReactGA.initialize(import.meta.env.VITE_GA_ID, {
debug: false,
titleCase: false,
});

const LoadingSpinnerContainer = () => {
const { theme } = useContext(ThemeContext);
Expand Down
10 changes: 2 additions & 8 deletions syllabus/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,12 @@ import dynamicImport from "vite-plugin-dynamic-import";
const path = require("path");

export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
const publicAssetsBaseUrl =
mode === "production"
? "/syllabus/"
: mode === "staging"
? `https://${env.MF_DOMAIN_WITH_PREFIX}/`
: "http://localhost:8080/";
const env = loadEnv(mode, process.cwd() + "/src");

return {
root: "./src",
publicDir: "assets",
base: publicAssetsBaseUrl,
base: env.VITE_PUBLIC_BASE_PATH + "/",
rollupOptions: {
input: "wasedatime-syllabus.ts",
preserveEntrySignatures: true,
Expand Down