part11 new material

Author: mluukkai

src/components/InfoBanner3.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+const InfoBanner = ({ visible, onHide }) => {
+  if (!visible) return null;
+
+  const style = {
+    padding: 10,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    marginLeft: 80,
+    marginRight: 80,
+    position: 'sticky',
+    top: 100,
+    left: 40,
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignContent: 'space-between',
+    backgroundColor: 'var(--color-background)',
+    zIndex: 2147483647,
+  };
+
+  const linkStyle = {
+    color: 'grey',
+    textDecoration: 'underline',
+  };
+
+  const textStyle = {
+    flex: 90,
+  };
+
+  const buttonDiv = {
+    flex: 10,
+    textAlign: 'right',
+  };
+
+  const buttonStyle = {
+    outline: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: 'var(--color-text)',
+    cursor: 'pointer',
+  };
+
+  return (
+    <div style={style}>
+      <div style={textStyle}>
+        <div style={{ marginBottom: 20 }}>
+          <div style={{ marginBottom: 10 }}>
+            Material of Part 11 has been moved to <a style={linkStyle} href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration">https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration</a>
+          </div>
+          <div style={{ marginBottom: 10 }}>
+            The content and exercises are still same, there is a change how exercises are submitted.
+          </div>
+          <div>
+            The old content is still found <a style={linkStyle} href="https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/7599b17c02b056fcad4f12d8708f0e07980b7564/src/content/11">here</a>. 
+          </div>
+        </div>
+      </div>
+      <div style={buttonDiv}>
+        <button style={buttonStyle} onClick={onHide}>
+          x
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InfoBanner;

src/components/layout.js

@@ -7,12 +7,14 @@ import { useTranslation } from 'react-i18next';
 import Header from './Header/Header';
 import InfoBanner from './InfoBanner';
 import InfoBanner2 from './InfoBanner2';
+import InfoBanner3 from './InfoBanner3';
 import Footer from './Footer/Footer';
 import PropTypes from 'prop-types';
 import SkipToContent from './SkipToContent/SkipToContent';
 
 const BANNER_TO_KEY = 'part_13_changes';
 const BANNER2_TO_KEY = 'part_12_changes';
+const BANNER3_TO_KEY = 'part_11_changes';
 
 const Layout = (props) => {
   const { i18n } = useTranslation();
@@ -22,6 +24,7 @@ const Layout = (props) => {
 
   const [visible, setVisible] = useState(false);
   const [visible2, setVisible2] = useState(false);
+  const [visible3, setVisible3] = useState(false);
 
   useEffect(() => {
     const key = localStorage.getItem(BANNER_TO_KEY);
@@ -39,6 +42,14 @@ const Layout = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    const key = localStorage.getItem(BANNER3_TO_KEY);
+    if (!key) {
+      const relevant = window.location.href.includes('en/part11') || window.location.href.includes('osa11');
+      setVisible3(relevant);
+    }
+  }, []);
+
   const hideNote = () => {
     console.log('hideNote');
     localStorage.setItem(BANNER_TO_KEY, 'yes');
@@ -51,6 +62,12 @@ const Layout = (props) => {
     setVisible2(false);
   };
 
+  const hideNote3 = () => {
+    console.log('hideNote');
+    localStorage.setItem(BANNER3_TO_KEY, 'yes');
+    setVisible3(false);
+  };
+
   return (
     <div className="main-wrapper">
       <SkipToContent isCoursePage={isCoursePage} />
@@ -61,6 +78,8 @@ const Layout = (props) => {
 
       <InfoBanner2 onHide={() => hideNote2()} visible={visible2} />
 
+      <InfoBanner3 onHide={() => hideNote3()} visible={visible3} />
+
       <main id="main-content">{children}</main>
 
       {!hideFooter && <Footer lang={siteLanguage} />}

src/content/11/en/part11.md

@@ -6,13 +6,7 @@ lang: en
 
 <div class="intro">
 
-So you have a fresh feature ready to be shipped. What happens next? Do you upload files to a server manually? How do you manage the version of your product running in the wild? How do you make sure it works, and roll back to a safe version if it doesn’t?
-
-Doing all the above manually is a pain and doesn’t scale well for a larger team. That’s why we have Continuous Integration / Continuous Delivery systems, in short CI/CD systems. In this part, you will gain an understanding of why you should use a CI/CD system, what can one do for you, and how to get started with GitHub Actions which is available to all GitHub users by default.
-
-This module was crafted by the Engineering Team at Smartly.io. At Smartly.io, we automate every step of social advertising to unlock greater performance and creativity. We make every day of advertising easy, effective, and enjoyable for more than 650 brands worldwide, including eBay, Uber, and Zalando. We are one of the early adopters of GitHub Actions in wide-scale production use. Contributors: [Anna Osipova](https://www.linkedin.com/in/a-osipova/), [Anton Rautio](https://www.linkedin.com/in/anton-rautio-768190145/), [Mircea Halmagiu](https://www.linkedin.com/in/mhalmagiu/), [Tomi Hiltunen](https://www.linkedin.com/in/tomihiltunen/).
-
-<i>Part updated 19th March 2024</i>
-- <i>Added info on using Playwright for the End to end -tests</i>
+Material of this part has been moved to <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration">https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration</a>
 
 </div>
+

src/content/11/fi/osa11.md

@@ -6,6 +6,6 @@ lang: fi
 
 <div class="intro">
 
-Kurssin yhdestoista, CI/CD:tä käsittelevä osa löytyy [englanninkielisestä kurssimateriaalista](/en/part11).
+Osan materiaali siirtynyt osoitteeseen <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration">https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration</a>
 
 </div>

src/content/partnavigation/partnavigation.js

@@ -134,13 +134,7 @@ module.exports = {
       c: 'Communicating with server',
       d: 'Testing and extending our application',
     },
-    11: {
-      a: 'Introduction to CI/CD',
-      b: 'Getting started with GitHub Actions',
-      c: 'Deployment',
-      d: 'Keeping green',
-      e: 'Expanding Further',
-    },
+    11: {},
     12: {},
     13: {},
   },