diff --git a/src/App.tsx b/src/App.tsx index aa5f565b..b628e952 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,19 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { useEffect, useState, lazy, Suspense } from "react"; -import { App as AntdApp, Layout, Spin } from "antd"; +import { App as AntdApp, Layout, Spin, ConfigProvider } from "antd"; import { LoadingOutlined } from "@ant-design/icons"; import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom"; import Navbar from "./components/Navbar"; @@ -96,57 +110,65 @@ const App = () => { }, [backgroundColor]); return ( - - - - - - - - - {loading ? ( -
- -
- ) : ( -
-
}> - - - - )} - - - } - /> - }> - - - } - > - } /> - } /> - } /> - } /> - - + + + + + + + + + + {loading ? ( +
+ +
+ ) : ( +
+
}> + + + + )} + + + } + /> + }> + + + } + > + } /> + } /> + } /> + } /> + + + - - + + ); }; diff --git a/src/components/Content.tsx b/src/components/Content.tsx index 3ced1c42..283a1cb3 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -1,3 +1,17 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { colors } from '../utils/theme'; import React, { useEffect, useState } from "react"; import ReactMarkdown from "react-markdown"; @@ -18,7 +32,7 @@ import { CopyOutlined, CheckOutlined, } from "@ant-design/icons"; -import { Spin, message, Button } from "antd"; +import { Spin, message, Button, theme } from "antd"; import fetchContent from "../utils/fetchContent"; import { steps } from "../constants/learningSteps/steps"; import { LearnContentProps } from "../types/components/Content.types"; @@ -30,6 +44,7 @@ const LearnContent: React.FC = ({ file }) => { const [error, setError] = useState(null); const [copied, setCopied] = useState(null); const navigate = useNavigate(); + const { token } = theme.useToken(); useEffect(() => { const loadContent = async () => { @@ -101,26 +116,41 @@ const LearnContent: React.FC = ({ file }) => { return ( - {currentIndex !== steps.length - 1 && ( -
- -
- )} +
+ {steps[currentIndex]?.sampleName && ( + + )} + {currentIndex !== steps.length - 1 && ( + + )} +
{content && ( = ({ file }) => { Previous {currentIndex === steps.length - 1 ? ( - - Finish - - ) : ( - - Next - - )} + + Finish + + ) : ( + + Next + + )} ); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 23c53840..bfa0b748 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -208,7 +208,7 @@ function Navbar() { useAppStore, (state) => ({ samples: state.samples, - loadSample: state.loadSample as (key: string) => Promise, + loadSample: state.loadSample as (key: string) => Promise, sampleName: state.sampleName, }), shallow diff --git a/src/components/SampleDropdown.tsx b/src/components/SampleDropdown.tsx index 070aabe8..eb389814 100644 --- a/src/components/SampleDropdown.tsx +++ b/src/components/SampleDropdown.tsx @@ -1,3 +1,17 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { Button, Dropdown, Space, message, MenuProps } from "antd"; import { DownOutlined } from "@ant-design/icons"; import { useCallback, useMemo, useState } from "react"; @@ -14,7 +28,7 @@ function SampleDropdown({ useAppStore, (state) => ({ samples: state.samples, - loadSample: state.loadSample as (key: string) => Promise, + loadSample: state.loadSample as (key: string) => Promise, }), shallow ); diff --git a/src/constants/learningSteps/steps.ts b/src/constants/learningSteps/steps.ts index 7c53c2f5..ed49643e 100644 --- a/src/constants/learningSteps/steps.ts +++ b/src/constants/learningSteps/steps.ts @@ -2,7 +2,7 @@ export const steps = [ { title: "Overview", link: "/learn/intro" }, - { title: "Module 1", link: "/learn/module1" }, - { title: "Module 2", link: "/learn/module2" }, - { title: "Module 3", link: "/learn/module3" }, + { title: "Module 1", link: "/learn/module1", sampleName: "Hello World" }, + { title: "Module 2", link: "/learn/module2", sampleName: "Formula Now" }, + { title: "Module 3", link: "/learn/module3", sampleName: "Join" }, ]; diff --git a/src/store/store.ts b/src/store/store.ts index 82e2dba3..e41c3b04 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,3 +1,17 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { create } from "zustand"; import { devtools } from "zustand/middleware"; import { immer } from "zustand/middleware/immer"; @@ -37,7 +51,7 @@ interface AppState { setEditorAgreementData: (value: string) => void; rebuild: () => Promise; init: () => Promise; - loadSample: (name: string) => Promise; + loadSample: (name: string) => Promise; generateShareableLink: () => string; loadFromLink: (compressedData: string) => Promise; toggleDarkMode: () => void; @@ -234,8 +248,14 @@ const useAppStore = create()( init: async () => { const params = new URLSearchParams(window.location.search); const compressedData = params.get("data"); + const sampleName = params.get("sample"); if (compressedData) { await get().loadFromLink(compressedData); + } else if (sampleName) { + const success = await get().loadSample(sampleName); + if (!success) { + await get().rebuild(); + } } else { await get().rebuild(); } @@ -255,7 +275,9 @@ const useAppStore = create()( editorAgreementData: JSON.stringify(sample.DATA, null, 2), })); await get().rebuild(); + return true; } + return false; }, rebuild: async () => { const { templateMarkdown, modelCto, data } = get();