Improve the home page styling

[jonathanbossenger]

It's very basic really.

[szhabolcs]

Hey there! I was thinking of doing a design related to programmers, and I came up with these OS related ideas:

It would be really cool if you could share those fake windows on social media, generating pictures like so:

Another thing I've been thinking about is themeing capability. You could theme the fake windows title bar, customizing alignment, icons, colors, and also if the window should have or not a rounded corner. This way, people could make different types of windows, let's say for different linux distros.

[jonathanbossenger]

@ToastedWaffle I think those look great!

Are you perhaps able to submit the HTML/CSS to make this possible via a PR? If you're not comfortable with Laravel you're welcome to submit it in the public directory https://github.com/jonathanbossenger/devdadjokes/tree/main/public and then I can convert it into Laravel templating from there.

[szhabolcs]

I'm glad you like them @jonathanbossenger! I'm pretty busy at the moment but will submit a PR with the code once I will be able to!

If I'm not mistaken you're using Bootstrap. Is it a problem if I make it using Tailwind? I'm thinking of setting up a local deployment and will only upload the HTML and minified CSS file. (I'm not familiar with Laravel)

Also what do you think of the themeing capability? Would it be overkill for this project? It would let other programmers customize the fake window to their heart's content. If you want to have themeing, I'm thinking of using an object like so (this is an example for the windows theme):

{
  "border": {
    "top-left-radius": "0px",
    "top-right-radius": "0px",
    "bottom-right-radius": "0px",
    "bottom-left-radius": "0px",
    "width": "1px",
    "color": "white"
  },
  "body": {
    "background": {
      "color": "grey",
      "blur": "0.7"
    },
    "text": {
      "color": "white",
      "font": "consolas"
    }
  },
  "title-bar": {
    "background": {
      "color": "white",
      "blur": "0"
    },
    "text": {
      "color": "black",
      "font": "consolas"
    },
    "app-name": {
      "align": "left",
      "icon": "link-to-icon"
    },
    "controls": {
      "align": "right",
      "close-btn": {
        "icon": "link-to-icon",
        "color": "red"
      },
      "minimize-btn": {
        "icon": "link-to-icon",
        "color": "lightgrey"
      },
      "maximize-btn": {
        "icon": "link-to-icon",
        "color": "lightgrey"
      }
    }
  }
}

And we can use some client side JS or Laravel if you wish, to generate the desired result.

If you think this would be too much I'll make the windows and macos designs and change the two at the click of a button, with some JS.

[jonathanbossenger]

@szhabolcs thanks

I'm glad you like them @jonathanbossenger! I'm pretty busy at the moment but will submit a PR with the code once I will be able to!

No rush mate, whenever you have time. I appreciate anything you can submit, but I have no expectations.

If I'm not mistaken you're using Bootstrap. Is it a problem if I make it using Tailwind? I'm thinking of setting up a local deployment and will only upload the HTML and minified CSS file. (I'm not familiar with Laravel)

I'm actually using whatever shipped with Larave for the welcome page by default :grin:

You are welcome to use Tailwind, I know that Laravel and Tailwind play pretty well together. what I can do from my side is do all the Tailwind setup, and then you can just work withing that setup.

Also what do you think of the theming capability? Would it be overkill for this project?

I think it's a great idea, but again, I don't expect it now. If you want to start with a single basic layout, and then add theming capabilities later, that's perfectly fine for me.

[szhabolcs]

Hello again! I tried to contact you on Twitter in order to not spam this page, but I'm going to update you here as well.

I just finished with version one! The site is fully responsive and I even added a bit of animation onto the mix. Themeing is also possible, but with css rather than a json object. You can check out a demo here. I’ll be more than happy to make a pull request, but first I’d ask you to add Tailwind support, with some sort of minifier as well. I use nodejs, and a package named purgecss which works really well with Tailwind.

In regards to sharing the joke as a screenshot, I've tried html2canvas to take a client side screenshot of the window, but I found it to not be reliable, so a server side solution would work best.

And lastly I'm thinking about the whole themeing idea. Maybe making a json object and a javascript "compiler" that transforms it into css is overkill 😂. I'm thinking of maybe releasing an Adobe XD project template for the designs I've done, along with some guidelines. And maybe even a codepen where people can experiment in real time with their themes.

[jonathanbossenger]

Thank you @szhabolcs I'm going to try and do my best to look at this over the weekend.

BTW Spamming this page, or any issue in the Github repository is perfectly acceptable. I just can't guarantee I'll always replay immediately.

[jonathanbossenger]

@szhabolcs I was able to set up Tailwind support (as detailed in this article)[https://tailwindcss.com/docs/guides/laravel], which I have committed to a separate branch here -> https://github.com/jonathanbossenger/devdadjokes/tree/feature/new-front-end-design

The only thing I did differently from the article is that I didn't import the css/app.css stylesheet that is built from the resources/css/app.css into the main Blade layout (commonly resources/views/layouts/app.blade.php or similar) because for this app (for now) everything is happening inside the resources/views/home.blade.php blade template file, but I did load the css/app.css file there.

[jonathanbossenger]

@szhabolcs I hope you can help me with something.

I merged your PR #8 into the feature/new-front-end-design. I then ran npm install to make sure I install all the required dependencies.

When I then run npm run dev which builds Laravel Mix the development versions of the assets (ie transpiles resources/css/app.css into public/css/app.css) I start getting errors like this

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(10:21) /home/jonathan/development/devdadjokes/resources/css/app.css The `font-body` class does not exist, but `font-bold` does. If you're sure that `font-body` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

   8 | }
   9 | #main{
> 10 |   @apply text-white font-body p-5 w-screen h-full grid grid-cols-1 md:h-screen md:grid-cols-2 md:max-w-7xl;
     |                     ^
  11 | }
  12 | .two-col{

Am I doing something wrong?

These are the dev dependencies in my package.json

    "devDependencies": {
        "autoprefixer": "^10.2.4",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.2.6",
        "tailwindcss": "^2.0.3"
    }

I initially thought it was a tailwindcss version issue, so I also tried running npm update to get the latest version of everything.

[szhabolcs]

@jonathanbossenger my bad, we have to add the custom tailwind.config.js file, I'll make another PR

[jonathanbossenger]

@szhabolcs Aha no worries mate, and thanks. Will check the PR later today.

[jonathanbossenger]

New error

Error: Can't resolve 'themes/win/app-icon.svg'

I'm guessing you just need to merge your themes directory in the resources/css directory?

[szhabolcs]

Yes, I just did another PR. I also added the img folder containing some icons.

[jonathanbossenger]

@szhabolcs thanks, will try and test again this weekend.

[jonathanbossenger]

@szhabolcs thanks for everything so far, those errors are all resolved. :raised_hands: :fire:

Unfortunately now getting this new error

Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
/home/jonathan/development/websites/devdadjokes/public/images/minimize-icon.svg
/home/jonathan/development/websites/devdadjokes/public/images/minimize-icon.svg
    at checkSimilarFile (/home/jonathan/development/websites/devdadjokes/node_modules/webpack/lib/Compiler.js:597:22)
    at writeOut (/home/jonathan/development/websites/devdadjokes/node_modules/webpack/lib/Compiler.js:772:11)
    at /home/jonathan/development/websites/devdadjokes/node_modules/webpack/lib/util/fs.js:182:5
    at FSReqCallback.oncomplete (fs.js:155:23)
npm ERR! code 2

Any idea for what this could be?

If you check out my feature/new-front-end-design branch, and run npm install and npm run dev locally, do you get the same error?

[szhabolcs]

@jonathanbossenger I'm getting some similar error, but the difference from mine should only be because I don't think I have my device set up correctly yet.

[webpack-cli] Running multiple commands at the same time is not possible
[webpack-cli] Found commands: 'bundle', 'Szabolcs\Desktop\Files\HTML\github\devdadjokes\node_modules\laravel-mix\setup\webpack.config.js'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `mix`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Nagy Szabolcs\AppData\Roaming\npm-cache\_logs\2021-02-27T11_18_38_410Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Nagy Szabolcs\AppData\Roaming\npm-cache\_logs\2021-02-27T11_18_38_424Z-debug.log

From your error it seems to me that the problem is due to same file names. Does the script put all the images in one folder, or does it keep the original structure? eg.

/home/jonathan/development/websites/devdadjokes/public/images/minimize-icon.svg
/home/jonathan/development/websites/devdadjokes/public/images/minimize-icon.svg

these I think should be in separate folders, namely

devdadjokes/public/images/themes/mac/minimize-icon.svg
devdadjokes/public/images/themes/win/minimize-icon.svg
devdadjokes/public/images/themes/ubuntu/minimize-icon.svg

You could maybe try and add mac-, win- and ubuntu- prefixes to the filenames and see if the issue persists.

[jonathanbossenger]

@szhabolcs aha, I see what you mean.

It doesn't actually manage to create the final images in /home/jonathan/development/websites/devdadjokes/public/images/

Based on the source CSS in /home/jonathan/development/websites/devdadjokes/resources/css/app.css I see that the source images are in /home/jonathan/development/websites/devdadjokes/resources/css/themes/, so I would assume when webpack runs, it should copy them to /home/jonathan/development/websites/devdadjokes/public/css/themes/ but it's trying to copy them to /home/jonathan/development/websites/devdadjokes/public/images/ which probably causing the conflict.

Now do try and figure out how to tell webpack to copy them to the right place.

[jonathanbossenger]

@szhabolcs I think this is a Laravel-Mix thing, I have to configure the Laravel mix version of webpack to copy the image files you reference in the CSS to the right place. I assume it has a default set somewhere to /public/images/ and so I just need to tweak that.

[jonathanbossenger]

Success!!! :smile:

Had to add processCssUrls: false option to my webpack.mix.js so that it doesn't auto-copy images referenced in the CSS to public/images -> https://laravel.com/docs/8.x/mix#url-processing and then copy the themes directories, as part of the build.

There are a few things I still need to get working 100% but at least I don't have errors.

Thanks for all your work here, looking forward to updating this to the live site, and adding you to the credits!!!

[szhabolcs]

@jonathanbossenger yaaaay! 🎉🎉🎉 You're very welcome! I loved working on this project! Let me know if there are any issues with the CSS or JS of the site 😃