Added header to example apps that points to their source code

examples/realworld/ext/MainPage.js

@@ -19,6 +19,7 @@ import getFollowedArticles from '@wasp/queries/getFollowedArticles'
 import getAllArticles from '@wasp/queries/getAllArticles'
 import Navbar from './Navbar'
 import ArticleListPaginated from './article/components/ArticleListPaginated'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 const MainPage = () => {
   const { data: me } = useAuth()
@@ -135,4 +136,4 @@ const Tags = () => {
   )
 }
 
-export default MainPage
+export default addWaspSourceHeader(MainPage)

examples/realworld/ext/WaspSourceHeader.js

@@ -1,6 +1,6 @@
 import waspLogo from './waspLogo.png'
 
-const WaspExampleHeader = (props) => {
+const WaspSourceHeader = (props) => {
   const divStyle = {
     position: "sticky",
     top: 0,
@@ -27,4 +27,4 @@ const WaspExampleHeader = (props) => {
   )
 }
 
-export default WaspExampleHeader
+export default WaspSourceHeader

examples/realworld/ext/addWaspSourceHeader.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import WaspSourceHeader from './WaspSourceHeader.js'
+
+const addWaspSourceHeader = (Component) => {
+  return function AddHeader(props) {
+    return (
+      <>
+        <WaspSourceHeader name="Realworld"/>
+        <Component { ...props } />
+      </>
+    )
+  }
+}
+
+export default addWaspSourceHeader

examples/realworld/ext/article/components/ArticleEditorPage.js

@@ -16,6 +16,7 @@ import updateArticle from '@wasp/actions/updateArticle'
 import getArticle from '@wasp/queries/getArticle'
 
 import Navbar from '../../Navbar'
+import addWaspSourceHeader from '../../addWaspSourceHeader'
 
 const useStyles = makeStyles((theme) => ({
   /*
@@ -170,4 +171,4 @@ const ArticleEditor = (props) => {
   )
 }
 
-export default ArticleEditorPage
+export default addWaspSourceHeader(ArticleEditorPage)

examples/realworld/ext/article/components/ArticleViewPage.js

@@ -27,6 +27,7 @@ import createComment from '@wasp/actions/createComment'
 import deleteComment from '@wasp/actions/deleteComment'
 
 import Navbar from '../../Navbar'
+import addWaspSourceHeader from '../../addWaspSourceHeader.js'
 
 const useStyles = makeStyles((theme) => ({
   tags: {
@@ -244,4 +245,4 @@ CreateComment.propTypes = {
   article: PropTypes.object.isRequired
 }
 
-export default ArticleViewPage
+export default addWaspSourceHeader(ArticleViewPage)

examples/realworld/ext/auth/LoginPage.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 
 import login from '@wasp/auth/login.js'
+import addWaspSourceHeader from '../addWaspSourceHeader'
 
 // TODO: A lot of duplication with the Sign up page, extract it into one component
 //   and then just use it in both LoginPage and SignupPage?
@@ -28,7 +29,7 @@ const LoginPage = () => {
   return (
     <div>
       { submitError && (
-          <p> { submitError.message || submitError } </p>
+      <p> { submitError.message || submitError } </p>
       ) }
 
       <form onSubmit={handleSubmit}>
@@ -45,4 +46,4 @@ const LoginPage = () => {
   )
 }
 
-export default LoginPage
+export default addWaspSourceHeader(LoginPage)

examples/realworld/ext/auth/SignupPage.js

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom'
 
 import login from '@wasp/auth/login'
 import signup from '@wasp/auth/signup'
+import addWaspSourceHeader from '../addWaspSourceHeader'
 
 import { errorMessage } from '../utils.js'
 
@@ -51,4 +52,4 @@ const SignupPage = () => {
   )
 }
 
-export default SignupPage
+export default addWaspSourceHeader(SignupPage)

examples/realworld/ext/user/components/UserProfilePage.js

@@ -17,6 +17,7 @@ import getArticlesByUser from '@wasp/queries/getArticlesByUser'
 import getFavoritedArticles from '@wasp/queries/getFavoritedArticles'
 import followUser from '@wasp/actions/followUser'
 import Navbar from '../../Navbar'
+import addWaspSourceHeader from '../../addWaspSourceHeader'
 import ArticleListPaginated from '../../article/components/ArticleListPaginated'
 import smileyImageUrl from '../../smiley.jpg'
 
@@ -162,4 +163,4 @@ const Articles = (props) => {
   )
 }
 
-export default UserProfilePage
+export default addWaspSourceHeader(UserProfilePage)

examples/realworld/ext/user/components/UserSettingsPage.js

@@ -13,6 +13,7 @@ import updateUser from '@wasp/actions/updateUser'
 
 import { errorMessage } from '../../utils'
 
+import addWaspSourceHeader from '../../addWaspSourceHeader'
 import Navbar from '../../Navbar'
 
 const UserSettingsPage = ({ user }) => {
@@ -144,4 +145,4 @@ const UserSettings = (props) => {
   )
 }
 
-export default UserSettingsPage
+export default addWaspSourceHeader(UserSettingsPage)

examples/thoughts/ext/Layout.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import TopNavbar from './TopNavbar'
 import TagsSidebar from './TagsSidebar'
+import addWaspSourceHeader from './addWaspSourceHeader.js'
 import './Layout.css'
 
 const Layout = ({ user, activeTag, children }) => (
@@ -13,4 +14,4 @@ const Layout = ({ user, activeTag, children }) => (
   </div>
 )
 
-export default Layout
+export default addWaspSourceHeader(Layout)

examples/thoughts/ext/LoginPage.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import LoginForm from '@wasp/auth/forms/Login'
+import addWaspSourceHeader from './addWaspSourceHeader.js'
 
 const LoginPage = (props) => {
   return (
@@ -15,4 +16,4 @@ const LoginPage = (props) => {
   )
 }
 
-export default LoginPage
+export default addWaspSourceHeader(LoginPage)

examples/thoughts/ext/SignupPage.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import SignupForm from '@wasp/auth/forms/Signup'
+import addWaspSourceHeader from './addWaspSourceHeader.js'
 
 const SignupPage = (props) => {
   return (
@@ -15,4 +16,4 @@ const SignupPage = (props) => {
   )
 }
 
-export default SignupPage
+export default addWaspSourceHeader(SignupPage)

examples/thoughts/ext/WaspSourceHeader.js

@@ -0,0 +1,30 @@
+import waspLogo from './waspLogo.png'
+
+const WaspSourceHeader = (props) => {
+  const divStyle = {
+    position: "sticky",
+    top: 0,
+    backgroundColor: "#212121",
+    color: "#fff",
+    padding: "8px 24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "40px",
+    height: "100%",
+    filter: "drop-shadow(0 0 0.25rem gray)"
+  }
+
+  return (
+    <div style={divStyle}>
+      <span style={{ marginRight: "5px" }}><img alt="Wasp" src={waspLogo} height={30} /></span>
+      <span>
+        This is an example <a href="https://wasp-lang.dev" target="_blank" rel="noreferrer" style={{ color: "#fc0" }}>Wasp</a> application{props.name && ` called ${props.name}`}.
+        To see the source, please visit our <a href="https://github.com/wasp-lang/wasp/tree/main/examples" target="_blank" rel="noreferrer" style={{ color: "#fc0" }}>GitHub repo</a>.
+      </span>
+      <span style={{ marginLeft: "5px" }}>🚀</span>
+    </div>
+  )
+}
+
+export default WaspSourceHeader

examples/thoughts/ext/addWaspSourceHeader.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import WaspSourceHeader from './WaspSourceHeader.js'
+
+const addWaspSourceHeader = (Component) => {
+  return function AddHeader(props) {
+    return (
+      <>
+        <WaspSourceHeader name="Thoughts" />
+        <Component { ...props }/>
+      </>
+    )
+  }
+}
+
+export default addWaspSourceHeader

examples/waspello/ext/LoginPage.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import LoginForm from '@wasp/auth/forms/Login'
+import addWaspSourceHeader from './addWaspSourceHeader.js'
 
 import mainLogo from './waspello-logo.svg'
 import './Signup.css'
@@ -23,4 +24,4 @@ const LoginPage = (props) => {
   )
 }
 
-export default LoginPage
+export default addWaspSourceHeader(LoginPage)

examples/waspello/ext/SignupPage.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import SignupForm from '@wasp/auth/forms/Signup'
+import addWaspSourceHeader from './addWaspSourceHeader.js'
 
 import mainLogo from './waspello-logo.svg'
 import './Signup.css'
@@ -23,4 +24,4 @@ const SignupPage = (props) => {
   )
 }
 
-export default SignupPage
+export default addWaspSourceHeader(SignupPage)

examples/waspello/ext/UserPageLayout.js

@@ -1,13 +1,12 @@
 import React from 'react'
 
 import Navbar from './Navbar'
-import WaspExampleHeader from './WaspExampleHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader.js'
 
 import './UserPageLayout.css'
 
 const UserPageLayout = ({ user, children }) => (
   <div className='layout-root'>
-    <WaspExampleHeader name="Waspello" />
 
     <Navbar user={user} />
     <div className='layout-content'>
@@ -16,4 +15,4 @@ const UserPageLayout = ({ user, children }) => (
   </div>
 )
 
-export default UserPageLayout
+export default addWaspSourceHeader(UserPageLayout)

examples/waspello/ext/WaspSourceHeader.js

@@ -0,0 +1,30 @@
+import waspLogo from './waspLogo.png'
+
+const WaspSourceHeader = (props) => {
+  const divStyle = {
+    position: "sticky",
+    top: 0,
+    backgroundColor: "#212121",
+    color: "#fff",
+    padding: "8px 24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "40px",
+    height: "100%",
+    filter: "drop-shadow(0 0 0.25rem gray)"
+  }
+
+  return (
+    <div style={divStyle}>
+      <span style={{ marginRight: "5px" }}><img alt="Wasp" src={waspLogo} height={30} /></span>
+      <span>
+        This is an example <a href="https://wasp-lang.dev" target="_blank" rel="noreferrer" style={{ color: "#fc0" }}>Wasp</a> application{props.name && ` called ${props.name}`}.
+        To see the source, please visit our <a href="https://github.com/wasp-lang/wasp/tree/main/examples" target="_blank" rel="noreferrer" style={{ color: "#fc0" }}>GitHub repo</a>.
+      </span>
+      <span style={{ marginLeft: "5px" }}>🚀</span>
+    </div>
+  )
+}
+
+export default WaspSourceHeader

examples/waspello/ext/addWaspSourceHeader.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import WaspSourceHeader from './WaspSourceHeader.js'
+
+const addWaspSourceHeader = (Component) => {
+  return function AddHeader(props) {
+    return (
+      <>
+        <WaspSourceHeader name="Waspello"/>
+        <Component { ...props } />
+      </>
+    )
+  }
+}
+
+export default addWaspSourceHeader

examples/waspleau/ext/MainPage.js

@@ -4,14 +4,13 @@ import refreshDashboardData from '@wasp/queries/dashboard'
 import { useQuery } from '@wasp/queries'
 
 import './style.css'
-import WaspExampleHeader from './WaspExampleHeader.js'
+import addWaspSourceHeader from './addWaspSourceHeader'
 
 const MainPage = () => {
   const { data: dashboardData, isFetching, error } = useQuery(refreshDashboardData, null, { refetchInterval: 60 * 1000 })
 
   return (
     <div style={{ minWidth: "800px" }}>
-      <WaspExampleHeader name="Waspleau" />
 
       <div className="container">
         <div className="dashboard">
@@ -37,4 +36,4 @@ const DashboardData = (props) => {
   return props.items.map((item) => <DashboardItem item={item} key={item.name} />)
 }
 
-export default MainPage
+export default addWaspSourceHeader(MainPage)

examples/waspleau/ext/WaspSourceHeader.js

@@ -1,6 +1,6 @@
 import waspLogo from './waspLogo.png'
 
-const WaspExampleHeader = (props) => {
+const WaspSourceHeader = (props) => {
   const divStyle = {
     position: "sticky",
     top: 0,
@@ -24,4 +24,4 @@ const WaspExampleHeader = (props) => {
   )
 }
 
-export default WaspExampleHeader
+export default WaspSourceHeader

examples/waspleau/ext/addWaspSourceHeader.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import WaspSourceHeader from './WaspSourceHeader.js'
+
+const addWaspSourceHeader = (Component) => {
+  return function AddHeader(props) {
+    return (
+      <>
+        <WaspSourceHeader name="Waspleau"/>
+        <Component { ...props } />
+      </>
+    )
+  }
+}
+
+export default addWaspSourceHeader