adds external apps: Github, Ask Tars

Author: vivek9patel

apps.config.js

@@ -90,6 +90,27 @@ const apps = [
         desktop_shortcut: true,
         screen: displayGedit,
     },
+    {
+        id: "github",
+        title: "GitHub",
+        icon: './themes/Yaru/apps/github.png',
+        disabled: false,
+        favourite: false,
+        desktop_shortcut: true,
+        isExternalApp: true,
+        url: "https://github.com/vivek9patel",
+        screen: () => {},
+    },
+    {
+        id: "tars",
+        title: "Ask Tars",
+        icon: './themes/Yaru/apps/tars.svg',
+        disabled: false,
+        favourite: false,
+        desktop_shortcut: true,
+        isExternalApp: true,
+        url: "https://www.vivek9patel.com/tars"
+    },
 ]
 
 export default apps;

components/apps/vivek.js

@@ -153,7 +153,7 @@ function Education() {
                     <div className="text-sm text-gray-300 font-bold mt-1">GPA &nbsp; 4.0/4.0</div>
                 </li>
                 <li className="list-disc">
-                    <div className=" text-lg md:text-xl text-left font-bold leading-tight">
+                    <div className=" text-lg md:text-xl mt-4 text-left font-bold leading-tight">
                         Pandit Deendayal Energy University - PDEU
                     </div>
                     <div className=" text-sm text-gray-400 mt-0.5">2018 - 2022</div>
@@ -162,7 +162,7 @@ function Education() {
                 </li>
                 <li className="list-disc mt-5">
                     <div className=" text-lg md:text-xl text-left font-bold leading-tight">
-                        Class 12<sup>th</sup> (GSEB)
+                        Class 12<sup>th</sup>
                     </div>
                     <div className=" text-sm text-gray-400 mt-0.5">2016 - 2018</div>
                     <div className=" text-sm md:text-base">Maths, Physics, Chemistry</div>
@@ -379,10 +379,7 @@ function Projects() {
                                     {
                                         (project.domains ?
                                             project.domains.map((domain, index) => {
-                                                const borderColorClass = `border-${tag_colors[domain]}`
-                                                const textColorClass = `text-${tag_colors[domain]}`
-
-                                                return <span key={index} className={`px-1.5 py-0.5 w-max border ${borderColorClass} ${textColorClass} m-1 rounded-full`}>{domain}</span>
+                                                return <span key={index} className={`px-1.5 py-0.5 w-max border border-${tag_colors[domain]} text-${tag_colors[domain]} m-1 rounded-full`}>{domain}</span>
                                             })
 
                                             : null)

components/base/ubuntu_app.js

@@ -3,20 +3,32 @@ import React, { Component } from 'react'
 export class UbuntuApp extends Component {
 
     openApp = () => {
-        this.props.openApp(this.props.id);
+        if (this.props.isExternalApp && this.props.url) {
+            window.open(this.props.url, "_blank");
+        } else {
+            this.props.openApp(this.props.id);
+        }
     }
 
     render() {
         return (
             <div
-                className="p-1 m-px z-10 bg-white bg-opacity-0 hover:bg-opacity-20 focus:bg-ub-orange focus:bg-opacity-50 focus:border-yellow-700 focus:border-opacity-100 border border-transparent outline-none rounded select-none w-24 h-20 flex flex-col justify-start items-center text-center text-xs font-normal text-white "
+                className="p-1 m-px z-10 bg-white bg-opacity-0 hover:bg-opacity-20 focus:bg-ub-orange focus:bg-opacity-50 focus:border-yellow-700 focus:border-opacity-100 border border-transparent outline-none rounded select-none w-24 h-20 flex flex-col justify-start items-center text-center text-xs font-normal text-white relative"
                 id={"app-" + this.props.id}
                 onDoubleClick={this.openApp}
                 tabIndex={0}
             >
-                <img width="40px" height="40px" className="mb-1 w-10" src={this.props.icon} alt={"Ubuntu " + this.props.name} />
+                <div className="relative">
+                    <img width="40px" height="40px" className="mb-1 w-10" src={this.props.icon} alt={"Ubuntu " + this.props.name} />
+                    {this.props.isExternalApp && (
+                        <img 
+                            src="./themes/Yaru/status/arrow-up-right.svg" 
+                            alt="External Link" 
+                            className="w-2.5 h-2.5 absolute -bottom-0.5 -right-0.5"
+                        />
+                    )}
+                </div>
                 {this.props.name}
-
             </div>
         )
     }

components/base/window.js

@@ -283,6 +283,7 @@ export class WindowMainScreen extends Component {
         }
     }
     componentDidMount() {
+        console.log("here", this.props.screen);
         setTimeout(() => {
             this.setState({ setDarkBg: true });
         }, 3000);

components/screen/desktop.js

@@ -240,7 +240,9 @@ export class Desktop extends Component {
                     name: app.title,
                     id: app.id,
                     icon: app.icon,
-                    openApp: this.openApp
+                    openApp: this.openApp,
+                    isExternalApp: app.isExternalApp,
+                    url: app.url
                 }
 
                 appsJsx.push(