example/.compiled/Dockerfile.compiled

FROM node:17-alpine as builder

RUN echo -e '\
{\n\
  "name": "docker-app",\n\
  "version": "0.1.0",\n\
  "private": true,\n\
  "dependencies": {\n\
    "@testing-library/jest-dom": "^5.16.5",\n\
    "@testing-library/react": "^13.4.0",\n\
    "@testing-library/user-event": "^13.5.0",\n\
    "react": "^18.2.0",\n\
    "react-dom": "^18.2.0",\n\
    "react-scripts": "5.0.1",\n\
    "web-vitals": "^2.1.4"\n\
  },\n\
  "scripts": {\n\
    "start": "react-scripts start",\n\
    "build": "react-scripts build",\n\
    "test": "react-scripts test",\n\
    "eject": "react-scripts eject"\n\
  },\n\
  "eslintConfig": {\n\
    "extends": [\n\
      "react-app",\n\
      "react-app/jest"\n\
    ]\n\
  },\n\
  "browserslist": {\n\
    "production": [\n\
      ">0.2%",\n\
      "not dead",\n\
      "not op_mini all"\n\
    ],\n\
    "development": [\n\
      "last 1 chrome version",\n\
      "last 1 firefox version",\n\
      "last 1 safari version"\n\
    ]\n\
  }\n\
}\n\
' > package.json

RUN mkdir -p public
RUN echo -e '\
<!DOCTYPE html>\n\
<html lang="en">\n\
  <head>\n\
    <meta charset="utf-8" />\n\
    <meta name="viewport" content="width=device-width, initial-scale=1" />\n\
    <meta name="theme-color" content="#000000" />\n\
    <meta\n\
      name="description"\n\
      content="No-code Dockerfile programming"\n\
    />\n\
    <title>No-code Dockerfile programming</title>\n\
  </head>\n\
  <body>\n\
    <noscript>You need to enable JavaScript to run this app.</noscript>\n\
    <div id="root"></div>\n\
  </body>\n\
</html>\n\
' > public/index.html
RUN echo -e '\
# https://www.robotstxt.org/robotstxt.html\n\
User-agent: *\n\
Disallow:\n\
' > public/robots.txt

RUN mkdir -p src
RUN echo -e '\
import React from '"'"'react'"'"';\n\
import ReactDOM from '"'"'react-dom/client'"'"';\n\
import '"'"'./index.css'"'"';\n\
import App from '"'"'./app'"'"';\n\
\n\
const root = ReactDOM.createRoot(document.getElementById('"'"'root'"'"'));\n\
root.render(\n\
  <React.StrictMode>\n\
    <App />\n\
  </React.StrictMode>\n\
);\n\
' > src/index.js
RUN echo -e '\
@import url('"'"'https://fonts.googleapis.com/css2?family=DM+Mono&family=Montserrat&family=Mukta:wght@700&display=swap'"'"');\n\
\n\
body, html {\n\
    margin: 0;\n\
    font-family: -apple-system, BlinkMacSystemFont, '"'"'Segoe UI'"'"', '"'"'Roboto'"'"', '"'"'Oxygen'"'"',\n\
    '"'"'Ubuntu'"'"', '"'"'Cantarell'"'"', '"'"'Fira Sans'"'"', '"'"'Droid Sans'"'"', '"'"'Helvetica Neue'"'"',\n\
    sans-serif;\n\
    -webkit-font-smoothing: antialiased;\n\
    -moz-osx-font-smoothing: grayscale;\n\
    background-color: #0a1128;\n\
    overflow-x: hidden;\n\
}\n\
\n\
p, h1, h2, h3, code, ul, li {\n\
    color: #f1faee;\n\
}\n\
\n\
.code__container {\n\
    background-color: #042d3a;\n\
    border-radius: 10px;\n\
    box-sizing: border-box;\n\
    padding: 20px 10px;\n\
    overflow-x: auto;\n\
}\n\
\n\
code {\n\
    font-family: '"'"'DM Mono'"'"', monospace;\n\
    width: max-content;\n\
    display: block;\n\
    color: #a7c957;\n\
\n\
}\n\
\n\
.header {\n\
    height: auto !important;\n\
    font-family: '"'"'Mukta'"'"', sans-serif;\n\
    word-wrap: break-word;\n\
    line-height: 1.2em;\n\
}\n\
\n\
.subheader {\n\
    font-family: '"'"'Mukta'"'"', sans-serif;\n\
}\n\
\n\
.text {\n\
    font-family: '"'"'Montserrat'"'"', sans-serif;\n\
    line-height: 1.8em;\n\
}\n\
\n\
a {\n\
    font-family: '"'"'Montserrat'"'"', sans-serif;\n\
    color: #dda15e;\n\
}\n\
\n\
span {\n\
    font-family: '"'"'DM Mono'"'"', monospace;\n\
    background-color: #042d3a;\n\
    padding: 2px 8px;\n\
    border-radius: 4px;\n\
}\n\
' > src/index.css


RUN echo -e '\
import '"'"'./app.css'"'"';\n\
import {Header} from "./header/header";\n\
import {About} from "./about/about";\n\
import {Usage} from "./usage/usage";\n\
\n\
function App() {\n\
    return (\n\
        <div className="app">\n\
            <Header/>\n\
            <About/>\n\
            <Usage/>\n\
        </div>\n\
    );\n\
}\n\
\n\
export default App;\n\
' > src/app.js
RUN echo -e '\
.app {\n\
    display: flex;\n\
    flex-direction: column;\n\
    align-items: center;\n\
}\n\
' > src/app.css


RUN mkdir -p src/about
RUN echo -e '\
import '"'"'./about.css'"'"'\n\
\n\
\n\
export const About = () => {\n\
    return (\n\
        <div className='"'"'about__container'"'"' id='"'"'main'"'"'>\n\
            <h1 className='"'"'header'"'"'>\n\
                No-code Dockerfile programming\n\
            </h1>\n\
            <p className='"'"'text'"'"'>\n\
                Each Dockerfile includes this line:\n\
            </p>\n\
            <div className='"'"'code__container'"'"'>\n\
                <code>\n\
                    COPY . .\n\
                </code>\n\
            </div>\n\
            <p className='"'"'text'"'"'>\n\
                We have to import <b>all</b> the code from the working directory into a Dockerfile.\n\
                Our team thinks this is a\n\
            </p>\n\
            <p className='"'"'text about__text--important'"'"'>very old-fashioned style</p>\n\
            <p className='"'"'text'"'"'>\n\
                We can improve it by writing code right inside the Dockerfile.\n\
            </p>\n\
            <h2 className='"'"'subheader'"'"'>Pros</h2>\n\
            <ul className='"'"'about__list'"'"'>\n\
                <li className='"'"'about__list__item'"'"'>\n\
                    <p className='"'"'text'"'"'>Clean repository. You don'"'"'t need any other file formats. Dockerfile only</p>\n\
                </li>\n\
                <li className='"'"'about__list__item'"'"'>\n\
                    <p className='"'"'text'"'"'>Easy to share. Share the working code with a single file</p>\n\
                </li>\n\
                <li className='"'"'about__list__item'"'"'>\n\
                    <p className='"'"'text'"'"'>\n\
                        An easy way to create files. You do not need to create files in the working directory,\n\
                        the files are created inside the Docker image\n\
                    </p>\n\
                </li>\n\
            </ul>\n\
        </div>\n\
    )\n\
}\n\
' > src/about/about.js
RUN echo -e '\
.about__container {\n\
    width: 90vw;\n\
    max-width: 600px;\n\
}\n\
\n\
.about__text--important {\n\
    text-align: center;\n\
    text-transform: uppercase;\n\
    padding: 15px 0;\n\
    background-color: #003652;\n\
    border-radius: 10px;\n\
    font-size: min(5.4vw, 36px) !important;\n\
\n\
}\n\
\n\
.about__list {\n\
    padding-left: 20px;\n\
    list-style-type: none;\n\
}\n\
\n\
.about__list__item:before {\n\
    font-family: '"'"'Montserrat'"'"', sans-serif;\n\
\n\
    content: "✓";\n\
    display: flex;\n\
    justify-content: center;\n\
    align-items: center;\n\
    border: 1px solid #f1faee;\n\
    border-radius: 4px;\n\
    padding: 2px 2px 4px 3px;\n\
    margin-top: 6px;\n\
    box-sizing: border-box;\n\
    font-size: .8em;\n\
    margin-left: -20px;\n\
    position: absolute;\n\
    width: 15px;\n\
    height: 15px;\n\
}\n\
' > src/about/about.css


RUN mkdir -p src/header
RUN echo -e '\
import "./header.css"\n\
\n\
export const Header = () => {\n\
    return (\n\
        <header className="header">\n\
            <nav className="header__nav">\n\
                <a href="#main" className="header__link">\n\
                    Main\n\
                </a>\n\
                <a href="#usage" className="header__link">\n\
                    Usage\n\
                </a>\n\
                <a href="https://github.com/gaskeo/docker-based-programming" className="header__link">\n\
                    Github\n\
                </a>\n\
            </nav>\n\
        </header>\n\
    )\n\
}\n\
' > src/header/header.js
RUN echo -e '\
.header {\n\
    width: 100vw;\n\
    height: 50px;\n\
}\n\
\n\
.header__nav {\n\
    width: 100vw;\n\
    height: 50px;\n\
    display: flex;\n\
    flex-direction: row;\n\
    align-items: center;\n\
    justify-content: center;\n\
    gap: 40px;\n\
}\n\
\n\
.header__link {\n\
    padding: 8px;\n\
    box-sizing: border-box;\n\
    cursor: pointer;\n\
}\n\
' > src/header/header.css


RUN mkdir -p src/usage
RUN echo -e '\
import "./usage.css"\n\
\n\
\n\
export const Usage = () => {\n\
    return (\n\
        <div className="usage__container" id="usage">\n\
            <h1 className="header">\n\
                Usage\n\
            </h1>\n\
            <p className="text">You need a root file called Dockerfile.</p>\n\
            <p className="text">\n\
                You can split a Dockerfile into multiple files using the new directive:\n\
            </p>\n\
            <div className="code__container">\n\
                <code># INCLUDE any-dir/Dockerfile</code>\n\
            </div>\n\
            <p className="text">\n\
                And after that, you can compile your Dockerfile using <a\n\
                href="https://github.com/gaskeo/docker-based-programming/blob/main/compile.sh">the compiler</a>.\n\
            </p>\n\
            <div className="code__container">\n\
                <code>\n\
                    ./compile\n\
                </code>\n\
            </div>\n\
\n\
            <p className="text">The compiler will replace <b>all</b> <span>INCLUDE</span> directives with\n\
                the code that is inside the files.</p>\n\
            <h2 className="subheader">\n\
                Simple example\n\
            </h2>\n\
            <div className="code__container">\n\
                <code># ./Dockerfile<br/><br/>\n\
                    FROM alpine:latest<br/><br/># INCLUDE files/simple-file.Dockerfile<br/>\n\
                </code>\n\
            </div>\n\
            <p></p>\n\
            <div className="code__container">\n\
                <code># ./files/simple-file.Dockerfile<br/><br/>\n\
\n\
                    RUN echo '"'"'it is very simple file'"'"' >> simple-file<br/>\n\
                    RUN echo '"'"'with two lines'"'"' >> simple-file<br/>\n\
                </code>\n\
            </div>\n\
            <p className="text">\n\
                <b>Note:</b> you can create nested <span># INCLUDE</span> directives, for example, <\n\
                span>./files/simple-file.Dockerfile</span> can contain <span># INCLUDE</span> directive too.\n\
            </p>\n\
            <p className="text">\n\
                Run compile script:\n\
            </p>\n\
            <div className="code__container">\n\
                <code>\n\
                    very-cool-user: ./compile<br/>\n\
                    - copy Dockerfile to .compiled./Dockerfile.compiled<br/><br/>\n\
\n\
                    - start checking Dockerfile.compiled file N1<br/>\n\
                    --- found 1 INCLUDE directives<br/>\n\
                    --- touch files/simple-file.Dockerfile<br/>\n\
                    - save tmp in .compiled/Dockerfile.compiled<br/><br/>\n\
\n\
                    - start checking Dockerfile.compiled file N2<br/><br/><br/>\n\
\n\
                    -=- compile finished in 2 iterations -=-\n\
                </code>\n\
            </div>\n\
            <p className="text">\n\
                After that, the <span>./compiled</span> directory will be created with one\n\
                file <span>./Dockerfile.compiled</span>.<br/>\n\
            </p>\n\
            <div className="code__container">\n\
                <code># ./.compiled/Dockerfile.compiled<br/><br/>\n\
                    FROM alpine:latest<br/><br/>\n\
                    RUN echo '"'"'it is very simple file'"'"' >> simple-file<br/>\n\
                    RUN echo '"'"'with two lines'"'"' >> simple-file<br/>\n\
                </code>\n\
            </div>\n\
            <p className="text">You can use this file for docker or send it to teammates.</p>\n\
        </div>\n\
    )\n\
}\n\
' > src/usage/usage.js
RUN echo -e '\
.usage__container {\n\
    width: 90vw;\n\
    max-width: 600px;\n\
}\n\
' > src/usage/usage.css

RUN npm build

FROM nginx:stable-alpine

WORKDIR /usr/share/nginx/html

RUN rm -rf ./*

COPY --from=builder /build .

ENTRYPOINT ["nginx", "-g", "daemon off;"]