Script tag in astro file is buggy

[brave pike]

im not sure if it would cause the issue but one of your log statements in todo.jsx is mising a closing semicolon

Also try import PDF from "@/components/test/todo.jsx"

I've noticed weird behavior with framework components like this when not specifying the file extension in the import statement

Do you have some dev login info for testing?

Getting a bunch of errors when running this locally, though none are the unexpected token one from your message

I created a new branch with my fixes and some comments explaining them

But I cant push the changes to my branch cause of how your repo is set up

if you want to protect your main branch you can set up protection rules

I usually lock the main branch and require pull request approval by me before any merges

Then anyone is free to work on branches/look at your code, without the risk of your main branch getting #wrekt

[fickle badge]

Hello! Sorry to be late

there's no default account, you can go on /register to create an account

6 minimum characters for password and username

it says email but it's a username in the backend

[fickle badge]

Sorry I didn't mean to block you, I never use github... I even discovered some old projects that I forgot on my github

[brave pike]

Also your register button says login

[fickle badge]

the issue I had with the script tag was on the /counter page

[brave pike]

just a side note

okie lemme look at that 😄

[fickle badge]

Oh, oops you're right ahah

Some time ago I tried to merge the login and the register component, depending of the user status (if he's logged or not) the text changes and the API request too. But it's the same component, so I missed that ahah

[fickle badge]

Thank you! Feel at ease

[brave pike]

here's the counter page with the changes from my branch

[deft hare]

I loaded your repo into StackBlitz and when I go to the /counter page, I see:

lol
Download

If I click on Download, I get this in the console:

[fickle badge]

Yes that's certainly because of a ref inside a function, or a useffect misplaced somewhere it shouldnt

[deft hare]

I'm not a React guy, so can't help you with that, but I'd start there

[fickle badge]

the counter page is a test from a separate project but I was lazy so instead of doing my tests in a new project I did it in another. So from the beginning, it was sure the code would be bad practices.

So basically, the goal is to display a div that will be exported as a PDF. The problem is that a PDF page is bigger than a standard screen so I try to calculate by how much I have to decrease it via the CSS transform method.

Why the CSS transform method instead of manually change the width and the height of the div? Because that wouldn't change the size of its content, meaning a text of 12px size would appear differently depending on the screen you're using.

So I create a PDF on the react side, and I adjust the size of the div in the script tag

[fickle badge]

Hello! Feel free to give it a sight! Are you french by any chance? There are a lot of "Fournier" in France!

[fickle badge]

How can I give you the proper rights to push it, from the github website

[brave pike]

Idk lol

I just make al l my repos public with a protected main branch like I described before

[deft hare]

Oui. However, my ancestors came from France in the mid-1600... from around Argentan.

[fickle badge]

Wow that was a long time ago, it's funny how much a family name tells about you

[fickle badge]

If you don't mind, give me a link when you'll have the time to ^^

[brave pike]

Here is where I'm at

For whatever reason I can't get those values in the script to register properly but perhaps someone with more <script> experience can tell us

---
import PDF from '@/components/test/todo.jsx'; // added file extension
---

<PDF client:only="react" />

<script is:inline>
  var livepreview = document.getElementById('livepreview');
  var config = document.querySelector('#config');
  var screen = document.querySelector('#screen');
  window.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      var height = config?.clientHeight;
      console.log(height);
      console.log(livepreview);
      livepreview.style.transform = `scale(${height / 842})`;
    }, 500);
  });

  window.addEventListener('resize', function () {
    var height = config?.clientHeight;
    // console.error(height);
    livepreview.style.transform = `scale(${height / 842})`;
  });
</script>

[brave pike]

I'm not sure what link you mean, but this is where you set up branch protection rules

[fickle badge]

okay lemme try

[brave pike]

Or you can add me as a collaberator

My github is JusticeMatthew

[fickle badge]

I'm not even sure what is:inline is supposed to mean and why it's the only way to get it working

I copied your code and I still get this error, I guess it comes from my setup ?

[fickle badge]

I added you to the collaborators ^^

[brave pike]

okie lemme try and push up this branch then

There we go 😄

You should be able to test out the changes locally now with
git checkout mjustice-test-fix

[fickle badge]

Ty ! I'll keep looking for fixes about the script tag

[brave pike]

I tried a few more things to no avail but my knowledge of scripting and the dom is pretty limited :\

If I think of any more ideas Ill post em here