Merge pull request #6 from willwillis/ant

Content Updates - 1.0 Release

Author: willwillis

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

package.json

@@ -36,3 +36,4 @@
     transform: rotate(360deg);
   }
 }
+

public/cpanel-create-node-app-form.png

@@ -1,18 +1,38 @@
-import React from 'react';
-import { Layout, Typography, Avatar, List, Space, Divider, Row, Col } from 'antd';
-import { CheckCircleTwoTone, ClockCircleOutlined } from '@ant-design/icons';
-import CodeBlock from './components/CodeBlock';
+import React from "react";
+import {
+  Layout,
+  Typography,
+  Avatar,
+  List,
+  Space,
+  Divider,
+  Row,
+  Col,
+  Image,
+} from "antd";
 
-const { Content } = Layout;
+import { CheckCircleTwoTone, ClockCircleOutlined } from "@ant-design/icons";
+import CodeBlock from "./components/CodeBlock";
+import {
+  GithubOutlined,
+  AmazonOutlined,
+  HeartOutlined,
+} from "@ant-design/icons";
+const { Content, Footer } = Layout;
 const { Title, Text, Paragraph } = Typography;
 
-
 function App() {
   const sideQuests = [
-    { title: "Databricks", status: "completed" },
-    { title: "Laravel v CakePHP for small projects", status: "completed" },
-    { title: "Running Python Flask in a shared hosting environment", status: "completed" },
-    { title: "Running React in shared hosting environment", status: "inProgress" },
+    {
+      title: "Plug-and-play design systems like Ant Design",
+      status: "completed",
+    },
+    { title: "Syntax highlighting", status: "completed" },
+    {
+      title:
+        "Literally every web feature you could ever image is availabel in JS/React",
+      status: "completed",
+    },
   ];
 
   // const infraAndComponents = [
@@ -39,112 +59,165 @@ function App() {
     console.log(\`Server is running on port \${PORT}\`);
   });
   `;
+
+  const createReactApp = `npx create-react-app my-website`;
+
   return (
-    <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
-      <Content style={{ maxWidth: '800px', margin: '0 auto', padding: '40px' }}>
+    <Layout style={{ minHeight: "100vh", backgroundColor: "#f5f5f5" }}>
+      <Content style={{ maxWidth: "800px", margin: "0 auto", padding: "40px" }}>
         {/* Profile Section */}
         <Row justify="center">
           <Col>
             <Avatar
               size={120}
               src="https://willwillis.com/assets/images/simpsons-me.webp" // Replace with your avatar URL
-              style={{ marginBottom: '20px' }}
+              style={{ marginBottom: "20px" }}
             />
           </Col>
         </Row>
         <Row justify="center">
           <Col>
-            <Title level={2}>So you <u>can</u> run ⚛React on Shared Hosting!🫶</Title>
+            <Title level={1}>⚛ React on Shared Hosting ⚛</Title>
             <Text type="secondary">New web meets nostalgic web.</Text>
           </Col>
         </Row>
 
+        <Row justify="center" align="middle" style={{ margin: "2em" }}>
+          <Col>
+            <Image
+              src="/gtp-server-room.jpg"
+              preview={false}
+              alt="illustration of a server room"
+            />
+          </Col>
+        </Row>
         <Divider />
-
         {/* Motivation Section */}
-        <Title level={3}>My Motivation</Title>
+        <Title level={2}>My Motivation</Title>
         <Paragraph>
-          I've been nostalgic for the old and "easy" web for a few years now. Don't get me wrong, websites today are impressively useable, responsive and beautiful. But they're also complicated. Some might argue, overly complicated if you're developing a simple/personal web site.
+          I've been nostalgic for the old and "easy" web for a few years now.
+          Don't get me wrong, websites today are impressively useable,
+          responsive and beautiful. But they're also complicated. Some might
+          argue, overly complicated if you're developing a simple/personal web
+          site.
         </Paragraph>
+        <Paragraph>placeholder: explain why it's complicated</Paragraph>
         <Paragraph>
-          placeholder, explain why complicated 
+          placeholder: try and explain how I can be nostalgic for old web, yet
+          I'm using React
         </Paragraph>
+        <Paragraph>placeholder: Make it make sense!</Paragraph>
         <Paragraph>
-          Also, cloud hosting can get expensive quickly. I know, I know, before you call me out... 
-          you can host the latest and greatest JavaScript built websites/frameworks for free with Cloudflare, 
-          Netlify and other providers. Who's really comfortable though, building their site on a "free tier"
-          that could change at any moment?
+          Also, cloud hosting can get expensive quickly. I know, I know, before
+          you call me out... you can host the latest and greatest JavaScript
+          built websites/frameworks for free with Cloudflare, Netlify and other
+          providers. Who's really comfortable though, building their site on a
+          "free tier" that could change at any moment?
         </Paragraph>
         <Paragraph>
-          This is the point where I realize my reasons may not be the most rational... Suffice it to say,
-          I wanted to see if it was possible.
+          This is the point where I realize my reasons may not be the most
+          rational... Suffice it to say, I wanted to see if it was possible.
         </Paragraph>
 
-      
         <Divider />
 
         {/* About Me Section */}
-        <Title level={3}>The implementation</Title>
+        <Title level={2}>The implementation</Title>
         <Paragraph>
-          If you are reading this... <i>it's possible</i>! And it wasn't really that difficult either.
+          If you are reading this... <i>it's possible</i>! And it wasn't really
+          that difficult either.
         </Paragraph>
         <Paragraph>
-          First, create a React app like you normally would. <pre>npx create-react-app my-website</pre>
+          First, create a React app like you normally would.{" "}
+          <CodeBlock code={createReactApp} language="bash" />
         </Paragraph>
         <Paragraph>
-          Host your code at Github. If you don't know about <pre>git</pre> or version control, start here (link)
+          Next, add your code to a repository on Github. If you don't know about{" "}
+          <code>git</code> or version control, start{" "}
+          <a href="https://docs.github.com/en/get-started/using-git/about-git">
+            here
+          </a>
+          . <GithubOutlined />
         </Paragraph>
         <Paragraph>
-          GitHub not only provides version control, but "Actions". They let you run/build code on their servers... FOR FREE! And yes, 
-          you could even host the site at github <a href="https://pages.github.com/">pages</a> without
-          having to pay for shared hosting, or lease domain name. I have a very simple 
-          <a href="https://github.com/willwillis/react.willwillis.com/blob/main/.github/workflows/deploy.yml">deploy workflow</a>
-           that does the following:
-           
-           <ol>
-            <li>Watches for code commits on the <pre>main</pre> branch</li>
-            <li>When triggered, the actions build the React application, resulting in some HTML and JavaScript being generated.</li>
-            <li>Lastly, the actions transfer those files from the github server to my shared hosting server over FTP.</li>
-            </ol>
+          GitHub not only provides version control, but "Actions". They let you
+          run/build code on their servers... FOR FREE! And yes, you could even
+          host the site at github <a href="https://pages.github.com/">pages</a>{" "}
+          without having to pay for shared hosting, or lease domain name.
         </Paragraph>
-
-      
-        <Divider />
-
-        {/* About Me Section */}
-        <Title level={3}>Thoughts so far</Title>
         <Paragraph>
-         I like the semantic tags like paragraph, Row, Col, etc.. I need to have another look at bootstrap. tailwind was a little too much, even anchors were 'reset', I don't think I should have to style every 'a' on the page. but that's probably my lack of understanding.
+          My Github actions consist of a simple single{" "}
+          <a href="https://github.com/willwillis/react.willwillis.com/blob/main/.github/workflows/deploy.yml">
+            deploy workflow
+          </a>{" "}
+          that does the following:
+          <ol style={{ margin: "1.5em", lineHeight: "2", marginBottom: "2em" }}>
+            <li>
+              Watches for code commits on the <code>main</code> branch
+            </li>
+            <li>
+              When triggered, the actions build the React application, resulting
+              in some HTML and JavaScript being generated.
+            </li>
+            <li>
+              Lastly, the actions transfer those files from the github server to
+              my shared hosting server over FTP.
+            </li>
+          </ol>
         </Paragraph>
+        <Title level={3}>cPanel / Shared Hosting Configration</Title>
         <Paragraph>
-          The default Typography is small. I can override that tho.
+          With the files on the shared server, we're ready to umm, "serve" the
+          application. In the <a href="https://cpanel.net">cPanel</a> dashboard,
+          click on the <code>Setup Node.js App</code> link.
+          <Row justify="center" align="middle" style={{ margin: "2em" }}>
+            <Col>
+              <Image src="/cpanel-setup-node-app.png" />
+            </Col>
+          </Row>
+          You'll then be presented with a simple form where you can specify
+          where on the file system the application will live (application root).
+          How you'd like people to find your react app (URL), and the name of
+          the startup file.
+          <Row justify="center" align="middle" style={{ margin: "2em" }}>
+            <Col>
+              <Image src="/cpanel-create-node-app-form.png" />
+            </Col>
+          </Row>
+          Notice we're setting up a "Node.js" app, not a "React" app. In simple
+          terms, <code>Node</code> is what's actually serving the{" "}
+          <code>React</code> app.
+          <Title level={4} style={{ marginTop: "1em" }}>
+            server.js
+          </Title>
+          <CodeBlock code={serverCode} language="javascript" />
         </Paragraph>
 
         <Divider />
-        
+
         {/* About Me Section */}
-        <Title level={3}>Implementation</Title>
+        <Title level={2}>Wrapping it up</Title>
         <Paragraph>
-         I like the semantic tags like paragraph, Row, Col, etc.. I need to have another look at bootstrap. tailwind was a little too much, even anchors were 'reset', I don't think I should have to style every 'a' on the page. but that's probably my lack of understanding.
+          I may be coming around to the idea of using React for simple/personal
+          websites. I've built dashboard apps for work using Next.js/React,
+          GraphQL, etc... but that makes sense, cuz COPRORATE, right?
         </Paragraph>
+
         <Paragraph>
-          The default Typography is small. I can override that tho.
+          I just can't deny any longer how much functionality, features like
+          responsiveness, and general <b>pizzazz</b> to be had with little to no
+          effort. Like what, you ask? For starters...
         </Paragraph>
-        <CodeBlock code={serverCode} language="javascript" />
-        <Divider />
-
 
-        {/* Recent Side Quests Section */}
-        <Title level={3}>Recent Side Quests</Title>
         <List
           dataSource={sideQuests}
           renderItem={(item) => (
             <List.Item>
               <Space>
-                {item.status === 'completed' ? (
+                {item.status === "completed" ? (
                   <CheckCircleTwoTone twoToneColor="#52c41a" />
                 ) : (
-                  <ClockCircleOutlined style={{ color: '#faad14' }} />
+                  <ClockCircleOutlined style={{ color: "#faad14" }} />
                 )}
                 <Text>{item.title}</Text>
               </Space>
@@ -153,8 +226,52 @@ function App() {
         />
 
         <Divider />
+        <Title level={2}>Disclaimer</Title>
+        <Paragraph>
+          If you're asking yourself,{" "}
+          <em>
+            "Is his 'nostalgic shared hosting' actually running on some guy's
+            server in a budget, mid-tier co-lo?"
+          </em>
+        </Paragraph>
+        <Paragraph>
+          I'm 99% sure it's running on someone's EC2 instance in AWS{" "}
+          <AmazonOutlined /> ... so there's some irony for ya.
+        </Paragraph>
+        <Paragraph>
+          Thanks for reading! If you enjoyed this, feel free to subscribe to my{" "}
+          <a href="https://links.willwillis.com/guest/links/feed">links</a> RSS
+          feed.
+        </Paragraph>
 
+        <Divider />
+        <Title level={2}>To do</Title>
+        <Paragraph>
+          <ul>
+            <li>
+              Tinker with some different design systems. I <HeartOutlined />{" "}
+              <a href="https://framework.willwillis.com/">Bootstrap</a>, I've
+              dabbled in <a href="https://clarity.design/">Clarity Design</a>,
+              and have a firm grasp on Material UI, Tailwind CSS, and and I am
+              in awe of what <a href="https://ui.shadcn.com/">Shadcn/ui</a> is
+              doing.
+            </li>
+            <li>
+              Break sections or other features wich repeat themselves (I'm
+              looking at you <code>Image</code>) into proper components
+            </li>
+            <li>
+              build out a Perl/CGI or Python API to pull dynamic data from. YES,
+              on shared hosting as well!
+            </li>
+          </ul>
+        </Paragraph>
+        <Divider />
       </Content>
+
+      <Footer style={{ textAlign: "center" }}>
+        Obligatory Footer ©{new Date().getFullYear()} Created by Will Willis
+      </Footer>
     </Layout>
   );
 }

public/cpanel-setup-node-app.png

@@ -11,3 +11,10 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.ant-typography {
+  font-family: 'Arial', sans-serif;
+  color: #333;
+  font-size: 18px;
+}
+

src/App.css

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'antd/dist/reset.css';
+import './index.css';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>