-
-
-
-
- );
-}
-
-export default HomePage;
-```
-
-2. Delete ``, `` and everything inside. You can also remove all
- imports which won't be needed anymore:
-
-```jsx
-import React from "react";
-import { Body, Page } from "blue-react";
-
-import { getPhrase as _ } from "../shared";
-
-function HomePage() {
- return (
-
-
-
{_("HELLO_WORLD")}
-
-
-
-
- );
-}
-
-export default HomePage;
-```
-
-Your site should now look like this:
-
diff --git a/recipes/README.md b/recipes/README.md
deleted file mode 100644
index 9df7c1fb..00000000
--- a/recipes/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Recipes
-
-Recipes are short tutorials or instructions for specific scenarious. Choose one of the MD files to see their contents.
-
-All articles will also dynamically displayed on the docs pages: https://bruegmann.github.io/blue-react/recipes
diff --git a/recipes/Use React Router.md b/recipes/Use React Router.md
deleted file mode 100644
index 77e546d0..00000000
--- a/recipes/Use React Router.md
+++ /dev/null
@@ -1,191 +0,0 @@
-# Use React Router
-
-Blue React has its own build-in hash based routing system. But sometimes you
-need an alternative routing system like
-[React Router](https://reactrouter.com/).
-
-In this recipe I will explain, how to use React Router in a Blue React app.
-
-## Create the project
-
-1. Create a new project with `npx create-react-app new-app --template blue`
-2. Open the new folder `new-app` with your favorite code editor and start the
- debug service with `npm start`.
-
-## Install React Router
-
-1. Run this to install `react-router-dom`:
-
-```
-npm i react-router-dom
-```
-
-## Implement components from React Router
-
-1. Open `./src/App.js` in your editor and add the following imports. In this
- case we're using `HashRouter`, but you can also use `BrowserRouter`.
-
-```jsx
-import { HashRouter as Router, NavLink, Route, Switch } from "react-router-dom";
-```
-
-2. In the `App` component wrap the `Router` component around the `Layout` from
- Blue React:
-
-```jsx
-// ...
-
-function App() {
- return (
-
-
-
- } label="Home" isHome />
-
-
-
- );
-}
-
-export default App;
-```
-
-3. Inside of `Layout` after `` put the following to register the
- routes:
-
-```jsx
-// ...
-
-function App() {
- return (
-
-
-
- } label="Home" isHome />
-
-
- {/* .router-page.active is necessary for the layout of Blue React */}
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default App;
-```
-
-4. Empty the `pages` prop of the `Layout` component to disable Blue React's
- routing behaviour. It still have to contain an empty array, otherwise you
- would get an error.
-
-```jsx
-{/* ... */}
-}
- pages={[]}
- statusIcons={{
- danger: ,
- info: ,
- success: ,
- warning:
- }}
->
-{/* ... */}
-```
-
-5. Change the `MenuItem`, so it can use the the `NavLink` component from React
- Router for the link.
-
-**Replace:**
-
-```jsx
-
- } label="Home" isHome />
-;
-```
-
-**with:**
-
-```jsx
-
- }
- label="Home"
- elementType={NavLink}
- exact
- to="/"
- />
-;
-```
-
-The final `./src/App.js` should look like this:
-
-```jsx
-import React from "react";
-import { Layout, MenuItem, SidebarMenu } from "blue-react";
-import {
- CheckCircleFill,
- ExclamationCircleFill,
- House,
- InfoCircleFill,
- List,
- XCircleFill,
-} from "react-bootstrap-icons";
-import { HashRouter as Router, NavLink, Route, Switch } from "react-router-dom";
-
-import HomePage from "./pages/HomePage";
-
-import "./styles/main.scss";
-
-function App() {
- return (
-
- }
- pages={[]}
- statusIcons={{
- danger: ,
- info: ,
- success: ,
- warning: ,
- }}
- >
-
- }
- label="Home"
- elementType={NavLink}
- exact
- to="/"
- />
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default App;
-```
-
-Note that you also should use React Router's `Link` component. The the
-[official docs](https://reactrouter.com/) for more information.
diff --git a/recipes/assets/custom-global-header-01.png b/recipes/assets/custom-global-header-01.png
deleted file mode 100644
index 0e18a92b..00000000
Binary files a/recipes/assets/custom-global-header-01.png and /dev/null differ
diff --git a/recipes/assets/headerless-site-01.png b/recipes/assets/headerless-site-01.png
deleted file mode 100644
index bb65e5c1..00000000
Binary files a/recipes/assets/headerless-site-01.png and /dev/null differ
diff --git a/setVersionToStyleScss.js b/setVersionToStyleScss.js
deleted file mode 100644
index 6735d485..00000000
--- a/setVersionToStyleScss.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const fs = require("fs")
-const { version } = require("./package.json")
-const filePath = "./dist/style.scss"
-
-let content = fs.readFileSync(filePath, "utf8")
-content = content.replace(
- /Blue React v(\d+([\.]\d+)*(-(beta|alpha|next)\.(\d+))?)/gm,
- "Blue React v" + version
-)
-
-fs.writeFileSync(filePath, content)
diff --git a/src/docs/App.tsx b/src/docs/App.tsx
index 091b7094..1c7aac1c 100644
--- a/src/docs/App.tsx
+++ b/src/docs/App.tsx
@@ -1,4 +1,10 @@
-import { BrowserRouter as Router, Switch, Route, NavLink, Link } from "react-router-dom"
+import {
+ BrowserRouter as Router,
+ Switch,
+ Route,
+ NavLink,
+ Link
+} from "react-router-dom"
import Layout from "../components/Layout"
import HashRouter from "../components/HashRouter"
@@ -12,8 +18,6 @@ import {
Puzzle,
HouseFill,
PuzzleFill,
- Stickies,
- StickiesFill,
Rss,
RssFill,
Eye
@@ -21,7 +25,6 @@ import {
import { ComponentPage } from "./pages/ComponentPage"
import { logo } from "./Global"
-import { RecipesPage } from "./pages/RecipesPage"
import { ActionMenuExamplePage } from "./pages/ActionMenuExamplePage"
import BlogPage from "./pages/BlogPage"
import LicenseReportPage from "./pages/LicenseReportPage"
@@ -31,8 +34,13 @@ import SidebarMenu from "../components/SidebarMenu"
function App() {
const onHashChange = () => {
- if (window.location.hash !== "" && window.location.hash.includes("css")) {
- let hash = decodeURIComponent(window.location.hash.substring(1)).replace("home/", "")
+ if (
+ window.location.hash !== "" &&
+ window.location.hash.includes("css")
+ ) {
+ const hash = decodeURIComponent(
+ window.location.hash.substring(1)
+ ).replace("home/", "")
const { colorMode, css } = JSON.parse(hash)
@@ -60,7 +68,7 @@ function App() {
}, [])
return (
-
+
@@ -70,7 +78,12 @@ function App() {
-
-