Skip to content

Commit

Permalink
Extract AOE specific texts as messages.json
Browse files Browse the repository at this point in the history
  • Loading branch information
bmsuseluda committed Jun 30, 2021
1 parent e2d2cd6 commit ab72666
Show file tree
Hide file tree
Showing 6 changed files with 239 additions and 129 deletions.
68 changes: 68 additions & 0 deletions public/messages.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{
"footerFootnote": "AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers.",
"socialLinks": [
{ "href": "https://www.facebook.com/aoepeople", "iconName": "facebook" },
{ "href": "https://twitter.com/aoepeople", "iconName": "twitter" },
{ "href": "https://www.linkedin.com/company/aoe", "iconName": "linkedIn" },
{ "href": "https://www.xing.com/company/aoe", "iconName": "xing" },
{ "href": "https://www.instagram.com/aoepeople", "iconName": "instagram" },
{ "href": "https://www.youtube.com/user/aoepeople", "iconName": "youtube" },
{ "href": "https://github.com/aoepeople", "iconName": "github" }
],
"pageHelp": {
"introduction": [
"Technology is moving fast and new technologies and innovations appear continuously.",
"It's essential for a development and technology company such as AOE to constantly improve and keep track with the latest useful innovations. It is important to openly look for innovations and new technologies and to question established technologies and methods every now and then.",
"But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all know: There is no silver bullet."
],
"whatIsTheRadar": [
"The Tech Radar is an overview of different technologies - from languages, frameworks, tools and patterns to platforms - that we consider \"new or mentionable\". The radar therefore doesn't provide an overview of all established technologies - but it focuses on items that have recently gained in importance or changed."
],
"howItIsCreated": [
"The items in the technology radar are raised by the different teams and therefore a lot of the items are related to the work and challenges the teams face in the different projects. In fact, we don't include anything on the radar, which we haven't already tried ourselves at least once.",
"There have been a lot of valuable discussions in different expert groups about the classification and details of each of technologies and innovations. And the result of all this can be found in the latest technology radar."
],
"howShouldItBeUsed": [
"The radar acts as an overview of technologies that we think everyone in the teams should currently know about.",
"Its goal is to act as a guide and inspiration for the daily work in the teams. Its purpose is also to provide helpful information and a bird's-eye perspective - so that decisions can be taken with a much deeper understanding of the subject matter. This results in more-informed and better-aligned decisions.",
"We also hope that developers outside of AOE find the information in our technology overview inspirational.",
"We group or categorize the items in 4 quadrants - (sometimes, when it's not 100% clear where a item belongs, we choose the best fit)."
],
"quadrants": [
{
"name": "Languages and Frameworks",
"description": "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds."
},
{
"name": "Tools",
"description": "Here we put different software tools - from small helpers to bigger software projects"
},
{
"name": "Methods and Patterns",
"description": "Patterns are so important, and a lot of them are valid for a long time (compared to some tools or frameworks). So, this is the category where we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc."
},
{
"name": "Platforms and Operations",
"description": "(including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of."
}
],
"rings": [
{
"name": "Adopt",
"description": "We can clearly recommend this technology. We have used it for longer period of time in many teams and it has proven to be stable and useful."
},
{
"name": "Trial",
"description": "We have used it with success and recommend to have a closer look at the technology in this ring. The goal of items here is to look at them more closely, with the goal to bring them to the adopt level."
},
{
"name": "Assess",
"description": "We have tried it out and we find it promising. We recommend having a look at these items when you face a specific need for the technology in your project."
},
{
"name": "Hold",
"description": "This category is a bit special. Unlike the others, we recommend to stop doing or using something. That does not mean that they are bad and it often might be ok to use them in existing projects. But we move things here if we think we shouldn't do them anymore - because we see better options or alternatives now."
}
]
}
}
56 changes: 35 additions & 21 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
useLocation,
} from "react-router-dom";
import { Item } from "../model";
import { Messages, MessagesProvider } from "../context/MessagesContext";

interface Params {
page: string;
Expand Down Expand Up @@ -60,6 +61,8 @@ interface Data {

export default function App() {
const [data, setData] = React.useState<Data>();
const [messages, setMessages] = React.useState<Messages>();

React.useEffect(() => {
fetch(`${process.env.PUBLIC_URL}/rd.json`)
.then((response) => response.json())
Expand All @@ -69,33 +72,44 @@ export default function App() {
.catch((error) => {
console.error("fetch data", error);
});

fetch(`${process.env.PUBLIC_URL}/messages.json`)
.then((response) => response.json())
.then((messages: Messages) => {
setMessages(messages);
})
.catch((error) => {
console.error("fetch messages", error);
});
}, []);

if (data) {
if (data && messages) {
const { items, releases } = data;
return (
<BrowserRouter basename={`${process.env.PUBLIC_URL}`}>
<Switch>
<Route path={"/:page(.+).html"}>
<div>
<div className="page">
<div className="page__header">
<HeaderWithPageParam />
</div>
<div className={classNames("page__content")}>
<RouterWithPageParam items={items} releases={releases} />
</div>
<div className="page__footer">
<FooterWithPageParam items={items} />
<MessagesProvider messages={messages}>
<BrowserRouter basename={`${process.env.PUBLIC_URL}`}>
<Switch>
<Route path={"/:page(.+).html"}>
<div>
<div className="page">
<div className="page__header">
<HeaderWithPageParam />
</div>
<div className={classNames("page__content")}>
<RouterWithPageParam items={items} releases={releases} />
</div>
<div className="page__footer">
<FooterWithPageParam items={items} />
</div>
</div>
</div>
</div>
</Route>
<Route path={"/"}>
<Redirect to={"/index.html"} />
</Route>
</Switch>
</BrowserRouter>
</Route>
<Route path={"/"}>
<Redirect to={"/index.html"} />
</Route>
</Switch>
</BrowserRouter>
</MessagesProvider>
);
}

Expand Down
26 changes: 12 additions & 14 deletions src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@ import FooterEnd from "../FooterEnd/FooterEnd";
import { assetUrl, getItemPageNames, isMobileViewport } from "../../config";
import { Item } from "../../model";
import "./footer.scss";
export default function Footer({
items,
pageName,
}: {
import { useMessages } from "../../context/MessagesContext";

interface Props {
items: Item[];
pageName: string;
}) {
}

const Footer: React.FC<Props> = ({ items, pageName }) => {
const { footerFootnote } = useMessages();

return (
<div
className={classNames("footer", {
Expand All @@ -25,16 +28,11 @@ export default function Footer({
<img src={assetUrl("logo.svg")} width="150px" height="60px" alt="" />
}
>
<span className="footnote">
AOE is a leading global provider of services for digital
transformation and digital business models. AOE relies exclusively on
established Enterprise Open Source technologies. This leads to
innovative solutions, digital products and portals in agile software
projects, and helps build long-lasting, strategic partnerships with
our customers.
</span>
<span className="footnote">{footerFootnote}</span>
</Branding>
<FooterEnd />
</div>
);
}
};

export default Footer;
126 changes: 32 additions & 94 deletions src/components/FooterEnd/FooterEnd.tsx
Original file line number Diff line number Diff line change
@@ -1,107 +1,45 @@
import React from "react";
import classNames from "classnames";
import {
FaFacebookF,
FaTwitter,
FaLinkedinIn,
FaXing,
FaYoutube,
FaGithub,
FaInstagram,
} from "react-icons/fa";
import SocialIcon from "../SocialIcon/SocialIcon";
import "./footerend.scss";
import { useMessages } from "../../context/MessagesContext";

interface Props {
modifier?: "in-sidebar";
}

const FooterEnd: React.FC<Props> = ({ modifier }) => (
<div
className={classNames("footer-end", {
[`footer-end__${modifier}`]: modifier,
})}
>
<div className="footer-social">
<div className="footer-social__label">
<p>Follow us:</p>
const FooterEnd: React.FC<Props> = ({ modifier }) => {
const { socialIcons } = useMessages();

return (
<div
className={classNames("footer-end", {
[`footer-end__${modifier}`]: modifier,
})}
>
<div className="footer-social">
<div className="footer-social__label">
<p>Follow us:</p>
</div>
<div className="footer-social__links">
{socialIcons.map(({ href, iconName }) => (
<SocialIcon href={href} iconName={iconName} />
))}
</div>
</div>
<div className="footer-social__links">
<a
href="https://www.facebook.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaFacebookF className="social-icon" />
</a>

<a
href="https://twitter.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaTwitter className="social-icon" />
</a>

<a
href="https://www.linkedin.com/company/aoe"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaLinkedinIn className="social-icon" />
</a>

<a
href="https://www.xing.com/company/aoe"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaXing className="social-icon" />
</a>

<a
href="https://www.instagram.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaInstagram className="social-icon" />
</a>

<a
href="https://www.youtube.com/user/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaYoutube className="social-icon" />
</a>

<a
href="https://github.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaGithub className="social-icon" />
</a>
<div className="footer-copyright">
<p>
<a
href="https://www.aoe.com/en/imprint.html"
target="_blank"
rel="noopener noreferrer"
>
Legal Information
</a>
</p>
</div>
</div>
<div className="footer-copyright">
<p>
<a
href="https://www.aoe.com/en/imprint.html"
target="_blank"
rel="noopener noreferrer"
>
Legal Information
</a>
</p>
</div>
</div>
);
);
};

export default FooterEnd;
46 changes: 46 additions & 0 deletions src/components/SocialIcon/SocialIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from "react";
import {
FaFacebookF,
FaTwitter,
FaLinkedinIn,
FaXing,
FaYoutube,
FaGithub,
FaInstagram,
} from "react-icons/fa";

const icons = {
facebook: FaFacebookF,
twitter: FaTwitter,
linkedIn: FaLinkedinIn,
xing: FaXing,
instagram: FaInstagram,
youtube: FaYoutube,
github: FaGithub,
};

export interface Props {
href: string;
iconName: keyof typeof icons;
}

const SocialIcon: React.FC<Props> = ({ href, iconName }) => {
const Icon = icons[iconName];

if (Icon) {
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<Icon className="social-icon" />
</a>
);
}
console.log(`The icon is unknown: ${iconName}`);
return null;
};

export default SocialIcon;
Loading

0 comments on commit ab72666

Please sign in to comment.