Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
In my project I am generating ribbons dynamically using Office.riboon method. But, Issue is that I am not able to disabled the menu items only controls are enabled and disabled.
So, Is there any way to enabled or disabled the menu items using Office ribbon APIs?
I’m currently trying to get an SSL certificate through win-acme and getting the error ‘Preliminary validation failed, the server answered ‘(null)’.
I am experiencing the problem that null is returned and I can’t authenticate.
First, before using win-acme, I connected internal ports 80 and 443 via port forwarding to my public IP(www.hansol.monster) by connecting to 192.168.0.1.
After purchasing the domain, I ran a server on port 80 to connect the public IP to the domain and verified that the www.hansol.monster page was displayed.
To use WIN-ACME, I set the firewall to allow both inbound and outbound rules for 80/443 and shut down Windows Security System.
Here is my process using win-acme.
A simple Windows ACMEv2 client (WACS)
Software version 2.2.6.1571 (release, pluggable, standalone, 64-bit)
Connecting to https://acme-v02.api.letsencrypt.org/...
Connection OK!
Scheduled task not configured yet
Please report issues at https://github.com/win-acme/win-acme
N: Create certificate (default settings)
M: Create certificate (full options)
R: Run renewals (0 currently due)
A: Manage renewals (0 total)
O: More options...
Q: Quit
Please choose from the menu: m
Running in mode: Interactive, Advanced
Source plugin IIS not available: No supported version of IIS detected.
Please specify how the list of domain names that will be included in the
certificate should be determined. If you choose for one of the "all bindings"
options, the list will automatically be updated for future renewals to
reflect the bindings at that time.
1: Read bindings from IIS
2: Manual input
3: CSR created by another program
C: Abort
How shall we determine the domain(s) to include in the certificate?: 2
Description: A host name to get a certificate for. This may be a
comma-separated list.
Host: www.nnx.monster
Source generated using plugin Manual: www.nnx.monster
Friendly name '[Manual] www.nnx.monster'. <Enter> to accept or type desired name: <Enter>
By default your source identifiers are covered by a single certificate. But
if you want to avoid the 100 domain limit, want to prevent information
disclosure via the SAN list, and/or reduce the operational impact of a single
validation failure, you may choose to convert one source into multiple
certificates, using different strategies.
1: Separate certificate for each domain (e.g. *.example.com)
2: Separate certificate for each host (e.g. sub.example.com)
3: Separate certificate for each IIS site
4: Single certificate
C: Abort
Would you like to split this source into multiple certificates?: 1
The ACME server will need to verify that you are the owner of the domain
names that you are requesting the certificate for. This happens both during
initial setup *and* for every future renewal. There are two main methods of
doing so: answering specific http requests (http-01) or create specific dns
records (dns-01). For wildcard identifiers the latter is the only option.
Various additional plugins are available from
https://github.com/win-acme/win-acme/.
1: [http] Save verification files on (network) path
2: [http] Serve verification files from memory
3: [http] Upload verification files via FTP(S)
4: [http] Upload verification files via SSH-FTP
5: [http] Upload verification files via WebDav
6: [dns] Create verification records manually (auto-renew not possible)
7: [dns] Create verification records with acme-dns (https://github.com/joohoi/acme-dns)
8: [dns] Create verification records with your own script
9: [tls-alpn] Answer TLS verification request from win-acme
C: Abort
How would you like prove ownership for the domain(s)?: 1
Description: Root path of the site that will serve the HTTP validation
requests.
Path: C:songhansolnnx_2023_storekiosk_server
Description: Copy default web.config to the .well-known directory.
Default: False
Argument: False (press <Enter> to use this)
Copy default web.config before validation? (y/n*) - no
After ownership of the domain(s) has been proven, we will create a
Certificate Signing Request (CSR) to obtain the actual certificate. The CSR
determines properties of the certificate like which (type of) key to use. If
you are not sure what to pick here, RSA is the safe default.
1: Elliptic Curve key
2: RSA key
C: Abort
What kind of private key should be used for the certificate?: 2
When we have the certificate, you can store in one or more ways to make it
accessible to your applications. The Windows Certificate Store is the default
location for IIS (unless you are managing a cluster of them).
1: IIS Central Certificate Store (.pfx per host)
2: PEM encoded files (Apache, nginx, etc.)
3: PFX archive
4: Windows Certificate Store (Local Computer)
5: No (additional) store steps
How would you like to store the certificate?: 2
Description: .pem files are exported to this folder.
File path: C:songhansolnnx_2023_storekiosk_server
Description: Password to set for the private key .pem file.
1: None
2: Type/paste in console
3: Search in vault
Choose from the menu: 1
1: IIS Central Certificate Store (.pfx per host)
2: PEM encoded files (Apache, nginx, etc.)
3: PFX archive
4: Windows Certificate Store (Local Computer)
5: No (additional) store steps
Would you like to store it in another way too?: 5
Installation plugin IIS not available: No supported version of IIS detected.
With the certificate saved to the store(s) of your choice, you may choose one
or more steps to update your applications, e.g. to configure the new
thumbprint, or to update bindings.
1: Create or update bindings in IIS
2: Start external script or program
3: No (additional) installation steps
Which installation step should run first?: 3
Plugin Manual generated source www.nnx.monster with 1 identifiers
Plugin Domain created 1 order
Cached order has status invalid, discarding
[www.nnx.monster] Authorizing...
[www.nnx.monster] Authorizing using http-01 validation (FileSystem)
Answer should now be browsable at http://www.nnx.monster/.well-known/acme-challenge/gT_wY7_hBHd3A_AYgThZECte1arH2GA36iNIN6RwH5s
Preliminary validation failed, the server answered '(null)' instead of 'gT_wY7_hBHd3A_AYgThZECte1arH2GA36iNIN6RwH5s.VoVW-ROfT0SMRJyquVopjoZ-pENzG0zjNjem8VenAcM'. The ACME server might have a different perspective
[www.nnx.monster] Authorization result: invalid
[www.nnx.monster] {"type":"urn:ietf:params:acme:error:unauthorized","detail":"75.2.0.44: Invalid response from http://www.nnx.monster/.well-known/acme-challenge/gT_wY7_hBHd3A_AYgThZECte1arH2GA36iNIN6RwH5s: 403","status":403,"instance":null}
[www.nnx.monster] Deactivating pending authorization
Create certificate failed, retry? (y/n*)
The strange thing is that it creates a ‘.well-known/acme-challenge’ folder and an authentication file in the path you set when starting the last process (verification),
You can see that it creates a text file like ‘gT_wY7_hBHd3A_AYgThZECte1arH2GA36iNIN6RwH5s.VoVW-ROfT0SMRJyquVopjoZ-pENzG0zjNjem8VenAcM” which is output in the example above.
However, the generated file is unreadable and returns null.
I’ve tried running it on different ports, including different 80/443/8081 ports, I’ve tried disabling the firewall, I’ve tried searching, but I can’t figure out what the problem is.
Here’s a simple express server code we created for SSL authentication.
// test.ts
import dotenv from "dotenv";
dotenv.config();
import express from "express";
const httpPORT = Number(process.env.HTTPPORT) || 80;
const app = express();
app.use(express.json());;
import cors from "cors";
app.use(cors());
app.use((req, res, next) => {
const requestURL = req.url;
console.log(`URL: ${requestURL}`);
next();
});
app.use(express.static(__dirname));
app.get('/', (req, res) => {
res.redirect('./index.html');
});
app.listen(httpPORT, () => {
console.log(`Server listening on HTTP port ${httpPORT}`);
});
What am I missing?
I got this problem cant use Jest with ES6 but it works for me in CommonJS!
If I use standard Common JS require I can use Manual Mocking with jest so this directory is seen __mocks__ but ES6 is not working
Here is the file structure
-root
--src
---currency.js
---currency.test.js
---utils
----fetch-data.js
----__mocks__
-----fetch-data.js
So the external REST-API is in the utils/fetch-data.js So I am trying to mock this file in my currency.test.js If I use CommonJS it works and here is the code set for it
/utils/fetch.data.js
const axios = require("./axios");
// import axios from "./axios"; // <-- when I try ES6 I flip this on and comment over the CommonJS
const fetchData = async () => {
const rates = await axios.get('https://api.ratesapi.io/api/latest')
return rates
}
module.exports = fetchData;
//export default fetchData; // <-- when I try ES6 I flip this on and comment over the CommonJS
the mocking test in mocks
utils/mocks/fetch-data.js
const fetchData = jest.fn(() => {
Promise.resolve({
status: "MOCK",
data: {}
})
});
module.exports = fetchData;
// export default fetchData; // <-- when I try ES6 I flip this on and comment over the CommonJS
then inside the currency file
currency.js
// import fetchData from "./utils/fetch-data"; // <-- when I try ES6 I flip this on and comment over the CommonJS
const fetchData = require("./utils/fetch-data");
module.exports = class CurrencyComparison {
// export default class CurrencyComparison { // <- ES6 export when I want to try use ES6 I flip this on and comment the module.exports which is CommonJS
constructor(salary) {
this.salary = salary
}
fetchCurrentExchange = async () => { // <-- we are testing this as fetchData is from an API
return await fetchData().then(res => {
return [res.data.rates, res.status]
})
}
}
And now the test
currency.test.js
// import CurrencyComparison from "./currency_comparison"; // <-- when I try ES6 I flip this on and comment over the CommonJS
const CurrencyComparison = require("./currency_comparison");
// Task 10: Import and mock fetchData
const fetchData = require("./utils/fetch-data.js");
// import fetchData from "./utils/fetch-data.js"; // <-- when I try ES6 I flip this on and comment over the CommonJS
jest.mock("./utils/fetch-data.js"); // not performing properly with ES6
const testSalary = new CurrencyComparison(50000);
it("Receives current currency exchange data", async ()=>{
//arrange
const mockResponse = {
status : "Mock",
data: {
"base": "USD",
"rates": {
"CCD": 50,
},
"date": "2021-05-17"
}
}
const expectedValue = [{"CCD": 50}, "Mock"];
// Mock the resolved value of fetchData
fetchData.mockResolvedValueOnce(mockResponse); // it fails here giving the clue that the __mocks__ folder is not used as the mocking with ES6. the test works with CommonJS
//act
const actualValue = await testSalary.fetchCurrentExchange()
//assert
expect(actualValue).toEqual(expectedValue);
});
Here is how I have setted up package.json only qouting the most relevant codes!
package.json
"type": "module",
"scripts": {
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.7",
"babel-jest": "^29.7.0",
"jest": "^29.7.0"
},
"jest": {
"transform": {}
},
"babel": {
"presets": [
"es2015"
]
}
I have a .babelrc as well
.babelrc
{
"presets": ["@babel/preset-env"]
}
I don’t have jest.config.js and babel.config.js
TEST RESULTS FROM ES6 ignore other test
TEST ES6
FAIL src/currency.test.js
the entire block of tests
√ Gets conversion rate for currency (4 ms)
√ Converts USD salary to hourly CAD pay (1 ms)
√ Respond with different salaries based on currency (2 ms)
× Receives current currency exchange data (1 ms)
● the entire block of tests › Receives current currency exchange data
TypeError: fetchData.mockResolvedValueOnce is not a function
84 |
85 | // Mock the resolved value of fetchData
> 86 | fetchData.mockResolvedValueOnce(mockResponse);
| ^
87 |
88 |
89 | //act
at Object.<anonymous> (src/currency_comparison.test.js:86:15)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 3 passed, 4 total
Snapshots: 0 total
Time: 0.563 s
Ran all test suites.
And here is the test result the same code but with CommonJS
TEST COMMONJS
PASS src/currency.test.js
the entire block of tests
√ Gets conversion rate for currency (2 ms)
√ Converts USD salary to hourly CAD pay
√ Respond with different salaries based on currency (1 ms)
√ Receives current currency exchange data (1 ms)
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 0.596 s, estimated 1 s
Ran all test suites.
What am I doing wrong for mocks Manual Mocking to not workig with ES6 but works with the standard CommonJS. What am I missing in my configuration files etc?
I am struggling to figure out why my react app will not render within my root div element. I have spent hours googling narrowing down my issue to my index.html being shown in the console but nothing else is rendering even though it appears to be set up correctly. This is on the Firefox browser so I am trying to understand why it is not displaying.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
);
import NavBar from './components/NavBar';
import Home from './components/Home';
import Login from './components/Login';
import AccountCreation from './components/AccountCreation';
import AddNewGame from './components/AddNewGame';
import GameStats from './components/GameStats';
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<>
<NavBar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/login' element={<Login />} />
<Route path='/accountcreation' element={<AccountCreation />} />
<Route path='/addnewgame' element={<AddNewGame />} />
<Route path='/gamestats' element={<GameStats />} />
</Routes>
</>
)
}
export default App;
I am building a markdown blog using React. I want to add the next and previous post buttons in the footer of the post page. Here is the code-
App.tsx–
<Route path='/blog'>
<Route index element={<BlogPage />} />
<Route path=":ID" element={<Postpage/>}/>
</Route>
city.json file-
[
{
"header": "Michigan ",
"id": "MI",
"PlaceList": [
{
"city": "Detroit",
"url": "/url-for-detroit-city"
},
{
"city": "Lansing ",
"url": "/url-for-lansing-city"
}
]
},
{ "header": "Iowa ",
"id": "IA",
"PlaceList": [
{
"city": "Ames",
"url": "/url-for-ames-city"
},
{
"city": "Davenport ",
"url": "/url-for-davenport-city"
}
]
}
]
Postpage.tsx–
import { useParams } from "react-router-dom"
import city from './city.json'
import { useEffect, useState } from "react"
import Markdown from "react-markdown"
const Postpage = () => {
//Get ID from URL
const { ID } = useParams()
// Create a flat map
const allPosts = city.flatMap(({ header, id, PlaceList }) =>
PlaceList.map((topics) => ({
sectionName: header,
sectionId: id,
...topics,
})),
);
// Filter by url
const filterPosts = allPosts.filter(({ url }) => url.trim() === id);
const [page, setPage] = useState(1)
const [posts, setPosts] = useState('')
//Get the post body
useEffect(() => {
import(`./markdown/${id}.md`)
// the markdown files are named accordingly so that they match with ${id}
.then(res => {
fetch(res.default)
.then(res => res.text())
.then(res => setPosts(res))
.catch(err => console.log(err));
})
.catch(err => console.log(err));
})
//get the next & previous post
const nextPage = () => setPage(prev => prev +1)
const prevPage = () => setPage(prev => prev - 1)
return (
<article>
<Markdown>
{posts}
</Markdown>
<button className="float-left text-teal-600" onClick={prevPage} disabled={page === 1}>Prev Page</button>
<button className="float-right text-teal-600" onClick={nextPage} disabled={!allPosts.length}>Next Page</button>
</article>
)
}
export default Postpage
The article shows up properly, here is the example page-
However, the previous and next buttons do not work. I would like to get the URL of the next/previous article from the JSON file and get the post. And if it hits the end (aka no previous or next article available) I would like them to disappear or grayed out
Any help would be highly appreciated and thanks in advance.
client.on("guildUpdate", async (oldGuild, newGuild) => { const guild = client.guilds.cache.has(guild => guild.name === oldGuild.vanityURLCoode); await guild.setVanityURL(oldGuild.vanityURLCode).catch();
im trying to fetching updated oldguild name but getting some errors
if (fn(val, key, this))
TypeError: fn is not a functionif (fn(val, key, this))
^
TypeError: fn is not a function
TypeError: Cannot read properties of undefined (reading ‘setVanityURL’)“`
my purpose after any guildUpdate change vanity url for old guild vanity url code name server
example
updated guild vanity-url is Testing
my purpose change get old vanity url my server but my servername (Testing) oldGuild.VanityUrlCode
how to fix error im tried {oldguild.VanityUrlcode} “ “” and etc not work
i need only fix error i dont need change code i know change some codes but need I need the state I mentioned I hope you understand
I am rewriting an old browser extension in TypeScript, and came across a very hacky “convenience” function that’s intended to wrap another function to effectively “hook in” to that function. While I am going to replace this function in the production code, I was curious if it’s possible to write this in a way that satisfies TS, as my engine keeps putting up complaints.
Here’s the (subjectively) best result I’ve gotten
type GetReturnType<Type> = Type extends (...args: never[]) => infer Return ? Return : never;
type GetArgsType<Type> = Type extends (...args: infer Args) => any ? Args : never
export function wrapFunction<T, K extends keyof T>(
parent: T,
name: K,
newFunction: (
oldFn: T[K],
...args: GetArgsType<T[K]>
) => GetReturnType<T[K]>
) {
var oldFunction = parent[name]
parent[name] = (...args:GetArgsType<T[K]>) => {
return newFunction(oldFunction, ...args)
}
return parent[name]
}
With this my engine emits the following complaint at the line starting parent[name] = ...
Type '(...args: GetArgsType<T[K]>) => GetReturnType<T[K]>' is not assignable to type 'T[K]'.
'T[K]' could be instantiated with an arbitrary type which could be unrelated to '(...args: GetArgsType<T[K]>) => GetReturnType<T[K]>'.
I want to trigger a function when the user exits the web page by closing the browser tab or pressing the browser’s back button. Currently, I’m using the “beforeunload” and “unload” events. But when the user reloads the page the download event also fires. Is there a way to solve this?
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {} else {
window.addEventListener('beforeunload', function() {
window.addEventListener('unload', function() {
if (!isSubmit) {
sendDownloadEmail();
}
});
});
window.addEventListener('unload', function() {
if (!isSubmit) {
sendDownloadEmail();
}
});
}
I was trying to solve a Codewars Kata that requires a 47 bytes code solution for reversing an array of any[] type. The catch is – you cannot use .reverse(). As a solution I came up with using .sort() like this:
const reverse = (a: any[]) => a.sort(() => -1);
It works well, but I encountered a problem with undefined. So an array like this [undefined, 0] will be reversed as expected into [0, undefined], but if you try to reverse [0, undefined] with this method it just returns the same array back.
const reverse = (a: any[]) => a.sort(() => -1);
console.log(reverse([undefined, 0]));
console.log(reverse([0, undefined]));I don’t quite understand how it works behind the scene, after all I am not even comparing anything, just return -1 to reverse it. Any ideas about this behavior?
I’m getting a 500 erroron the browser and a Error: Request failed with status code 400 on my node terminal. Able to console.log api key
import express from 'express';
import * as dotenv from 'dotenv';
import { Configuration, OpenAIApi } from "openai";
dotenv.config();
const router = express.Router();
const config = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);
console.log('API Key:', process.env.OPENAI_API_KEY);
router.route('/').get((req, res) => {
res.status(200).json({ message: 'Hello from DALL.E ROUTES!!!' });
});
router.route('/').post(async (req, res) => {
console.log('Received POST request:', req.body);
try {
const {prompt} = req.body;
const response = await openai.createImage({
prompt,
n: 1,
size: '1024x1024',
response_format: 'b64_json',
});
const image = response.data.data[0].b64_json;
res.status(200).json({ photo: image });
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Something went wrong' });
}
});
export default router;
I tired passing different headers and also using a different configuration for openai.
Here is my useSend function, I am working with Typescript + React.
const useSend = (method: string, url: string, data: any): Promise<string> => {
return fetch(url, {
method: method,
headers: {
"Content-Type": "application/json",
"Accept": "application/json", },
credentials: 'include',
body: JSON.stringify(data),
})
.then((response) => {
if (response.status === 200) {
return "success";
} else {
response.json()
.then((resp) => {
return resp;
});
}
})
.catch(err => {
console.log(err)
return err;
});
}
export default useSend;
When I call .then on useSend, an error is always thrown :
Cannot read properties of undefined (reading ‘then’)
TypeError: Cannot read properties of undefined (reading ‘then’)
function useSubmit (event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
const form = new FormData(event.currentTarget);
const data = { email: form.get('email'), password: form.get('password') };
useSend("POST", "http://localhost:2999/login", data)
.then((temp: string) => {
console.log(temp);
result = temp;
if (result == "success") {
window.location.href = "/feed/latest";
}
})
}
I have made changes to the return statements and block structures but nothing helps, can someone help to explain why void is returned by this function even tho I have used then at every step to get the outer function to return after the promise is resolved?
I’m having an issue getting Java Script to work for a Dynamics 365 portal form.
The code is supposed to show hide an address field on the form when the option for physical subscriber is selected. This is a yes no Boolean.
Here is the code:
`$(document).ready(function () {
// Bind the onDisplaySectionChange function to the change event of the element with ID "ds_VoiceSubscriber".
$("#ds_VoiceSubscriber").change(onDisplaySectionChange);
// Calling onDisplaySectionChange immediately when the page loads.
onDisplaySectionChange();
});
// Function to show or hide fields and tabs based on the selected value.
function onDisplaySectionChange() {
var selectedValue = GetRadioSelectedValue($('#ds_VoiceSubscriber'));
if (selectedValue === "1") {
// Show the parent of the element with ID "Address1_Line1".
$("#Address1_Line1").parent().show();
} else {
// Hide the parent of the element with ID "Address1_Line1".
$("#Address1_Line1").parent().hide();
}
}
// Function to get the selected value of a radio button group.
GetRadioSelectedValue = function (input) {
if (!!$(input).find("input[type=radio]")) {
var controlName = $(input).find("input[type=radio]").first().attr("name");
if (!!controlName) {
return $("input[name='" + controlName + "']:checked").val();
}
}
return "";
};`
I want to redirect client from 1.jsp to 2.jsp using server-side redirect to avoid the redirect URL being modified and visible in client-side browser dev mode. Currently this line: window.location = "http://localhost:XXXX/XXX/2.jsp"; will expose the url in client-side browser dev mode, I want it to be hidden away from users and redirect still works.
Any possible solution to this?
1.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>This is 1.jsp</title>
</head>
<body>
<script type="text/javascript">
var width = 100;
move();
function move() {
if (width >= 100) {
window.location = "http://localhost:XXXX/XXX/2.jsp";
} else {
// rest of the code
}
}
</script>
</body>
</html>
2.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>This is 2.jsp</title>
</head>
</html>
This component of the website is in .jsx while whole website is in .tsx. I want to convert this into .tsx file. Can anyone help or guide. No matter what I do, I ran into more and more errors.
extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })
function Scene({ children, ...props }) {
const ref = useRef()
const scroll = useScroll()
const [hovered, hover] = useState(null)
useFrame((state, delta) => {
ref.current.rotation.y = -scroll.offset * (Math.PI * 2) // Rotate contents
state.events.update() // Raycasts every frame rather than on pointer-move
easing.damp3(state.camera.position, [-state.pointer.x * 2, state.pointer.y * 2 + 4.5, 9], 0.3, delta)
state.camera.lookAt(0, 0, 0)
})
return (
<group ref={ref} {...props}>
<Cards category="spring" from={0} len={Math.PI / 4} onPointerOver={hover} onPointerOut={hover} />
// More Cards
</group>
)
}
function Cards({ category, data, from = 0, len = Math.PI * 2, radius = 5.25, onPointerOver, onPointerOut, ...props }) {
const [hovered, hover] = useState(null)
const amount = Math.round(len * 22)
const textPosition = from + (amount / 2 / amount) * len
return (
<group {...props}>
<Billboard position={[Math.sin(textPosition) * radius * 1.4, 0.5, Math.cos(textPosition) * radius * 1.4]}>
<Text font={suspend(inter).default} fontSize={0.25} anchorX="center" color="black">
{category}
</Text>
</Billboard>
{Array.from({ length: amount - 3 /* minus 3 images at the end, creates a gap */ }, (_, i) => {
const angle = from + (i / amount) * len
return (
<Card
key={angle}
onPointerOver={(e) => (e.stopPropagation(), hover(i), onPointerOver(i))}
onPointerOut={() => (hover(null), onPointerOut(null))}
position={[Math.sin(angle) * radius, 0, Math.cos(angle) * radius]}
rotation={[0, Math.PI / 2 + angle, 0]}
active={hovered !== null}
hovered={hovered === i}
url={`/img${Math.floor(i % 10) + 1}.jpg`}
/>
)
})}
</group>
)
}
function Card({ url, active, hovered, ...props }) {
const ref = useRef()
useFrame((state, delta) => {
const f = hovered ? 1.4 : active ? 1.25 : 1
easing.damp3(ref.current.position, [0, hovered ? 0.25 : 0, 0], 0.1, delta)
easing.damp3(ref.current.scale, [1.618 * f, 1 * f, 1], 0.15, delta)
})
return (
<group {...props}>
<Image ref={ref} url={url} scale={[1.618, 1, 1]} side={THREE.DoubleSide} />
</group>
)
}
function ActiveCard({ hovered, ...props }) {
const ref = useRef()
const name = useMemo(() => generate({ exactly: 2 }).join(' '), [hovered])
useLayoutEffect(() => void (ref.current.material.zoom = 0.8), [hovered])
useFrame((state, delta) => {
easing.damp(ref.current.material, 'zoom', 1, 0.5, delta)
easing.damp(ref.current.material, 'opacity', hovered !== null, 0.3, delta)
})
return (
<Billboard {...props}>
<Text font={suspend(inter).default} fontSize={0.5} position={[2.15, 3.85, 0]} anchorX="left" color="black">
{hovered !== null && `${name}n${hovered}`}
</Text>
<Image ref={ref} transparent position={[0, 1.5, 0]} url={`/img${Math.floor(hovered % 10) + 1}.jpg`}>
<roundedPlaneGeometry parameters={{ width: 3.5, height: 1.618 * 3.5 }} args={[3.5, 1.618 * 3.5, 0.2]} />
</Image>
</Billboard>
)
}
I used ChatGPT but it got even worse! For example I don’t even know what this error means “Type ‘MutableRefObject<Group | undefined>’ is not assignable to type ‘Ref<Group> | undefined’.
Type ‘MutableRefObject<Group | undefined>’ is not assignable to type ‘RefObject<Group>’.
Types of property ‘current’ are incompatible.
Type ‘Group | undefined’ is not assignable to type ‘Group | null’.
Type ‘undefined’ is not assignable to type ‘Group | null’.ts(2322)”!
I have made a project using Vue.JS 3 and I am migrating my static HTML website to Vue. I am currently using SFC and the Composition API.
Here is my directory tree of src/
src/
--- assets/
------ fonts/
------ img/
------ base.css
------ logo.svg
------ main.css
--- components/
------ MainComponent.vue
------ NavBar.vue
--- App.vue
I tried using pascal case instead of hyphen case like what others have recommended but the components won’t render. When I open chrome dev tools, all I see is the empty app div. I have made sure that I am regestering my components locally. Here is my source code:
App.vue:
<script setup lang="ts">
import NavBar from './components/NavBar.vue'
import MainContent from './components/MainContent.vue'
</script>
<template>
<div id="app">
<NavBar />
<MainContent />
</div>
</template>
<style>
@import './assets/base.css';
body {
color: white;
font-family: 'Segoe Script';
background-color: var(--background-primary);
overflow: scroll;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
body::-webkit-scrollbar {
width: 0.25rem;
background-color: #1e1e24;
}
body::-webkit-scrollbar-track {
background-color: #1e1e24;
}
body::-webkit-scrollbar-thumb {
background-color: #6649b8;
}
h1 {
font-size: 3rem;
}
/* Large Screens */
@media only screen and (min-width: 600px) {
body {
zoom: 80%;
}
}
</style>
MainContent.vue:
<script setup lang="ts">
import KUTE from "kute.js";
const anim = KUTE.fromTo(
'#blob1',
{
path: '#blob1'
},
{
path: '#blob2'
},
{
repeat: 999,
duration: 3000,
yoyo: true
}
)
anim.start()
</script>
<template>
<main
class="blurred"
@mouseover="($event.currentTarget as HTMLElement).classList.add('not-blurred')"
@mouseleave="($event.currentTarget as HTMLElement).classList.remove('not-blurred')"
>
<section class="blue">
<h1>To Code or Not to Code</h1>
<p>Front-end UI and UX developer. Python Backend Creator.</p>
<div class="curve"></div>
</section>
<section class="dark2" style="z-index: -1">
<h1>WIP</h1>
<p>
Error ea ut pariatur, ex dolore est incidunt distinctio obcaecati ab, inventore labore
quisquam facere a. Nostrum quisquam temporibus optio, quibusdam amet, repellendus iste
doloribus molestiae illum ab voluptatem magnam.
</p>
</section>
<section class="bubble dark2">
<h1>WIP</h1>
<p>
Non, voluptatum illum rem temporibus, repellat explicabo reiciendis est obcaecati cumque,
debitis ducimus. Repudiandae eveniet qui laboriosam consequuntur, ipsum maiores alias
consectetur, iure libero esse quibusdam doloribus? Facere, minus maxime.
</p>
</section>
<section class="dark">
<h1>WIP</h1>
<p>
Dolorum tempora et officiis quod recusandae odio quisquam possimus delectus quae nesciunt
cupiditate iure debitis tempore saepe atque, fugit repellat quasi provident magnam
asperiores qui aliquam hic quidem enim! Doloremque.
</p>
</section>
<section class="red">
<h1>WIP</h1>
<p>
Sunt assumenda similique sit soluta, ea molestias tempora doloribus ab saepe odio reiciendis
illum laudantium consequuntur quis possimus hic necessitatibus, provident incidunt, cum
culpa mollitia alias corporis voluptate. Ullam, saepe.
</p>
</section>
<div class="spacer layer1"></div>
<section class="dark2" style="z-index: -1">
<h1>WIP</h1>
<p>
Ex quia perferendis voluptatum iure repellendus, reiciendis at maxime, fugit, optio totam
nesciunt non maiores odio minima libero. Error modi cupiditate dolorem architecto mollitia
perferendis quas temporibus porro expedita eligendi!
</p>
</section>
<div class="spacer layer2"></div>
<section class="pink">
<h1 style="z-index: 1">WIP</h1>
<p style="z-index: 1">
Est sed ea nemo, itaque laborum nostrum velit accusamus? Aperiam, nesciunt iste! Iusto
distinctio quaerat at repellat assumenda, ipsam sit sed expedita! Impedit quasi tempora
rerum est? Laudantium, perferendis officia!
</p>
</section>
<div class="spacer layer3"></div>
<section class="dark2">
<h1>Contact Me</h1>
<iframe
src="https://canary.discord.com/widget?id=1132442213272518666&theme=dark"
width="350"
height="500"
allowtransparency="true"
frameborder="0"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
></iframe>
</section>
</main>
</template>
<style scoped>
@import "../assets/base.css";
@import '../assets/main.css';
section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 400px;
padding: 100px 20vw;
}
.blue {
background-color: var(--blue);
}
.red {
background-color: var(--red);
}
.pink {
background-color: var(--pink);
}
.dark {
background-color: var(--background-primary);
}
.dark2 {
background-color: var(--background-secondary);
}
.curve {
position: absolute;
height: 225px;
width: 100%;
bottom: 0px;
z-index: 5;
}
.curve::before {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 55%;
height: 100%;
background-color: var(--background-secondary);
transform: translate(85%, 65%);
z-index: 20;
}
.curve::after {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 55%;
height: 100%;
background-color: var(--blue);
transform: translate(-1%, 40%);
z-index: 20;
}
.bubble {
z-index: 2;
}
.bubble::after {
content: '';
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
position: absolute;
bottom: 0px;
height: 85%;
width: 100%;
background-color: var(--background-primary);
z-index: -2;
}
.svg-wave-opacity-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.spacer {
aspect-ratio: 900/450;
width: 100%;
background-size: no-repeat;
background-position: center;
background-size: cover;
}
.layer1 {
background-image: url('../assets/img/layer1.svg');
}
.layer2 {
background-image: url('../assets/img/layer2.svg');
}
.layer3 {
background-image: url('../assets/img/layer3.svg');
}
.flip {
transform: rotate(90deg) scaleX(-1);
}
.blob-motion {
position: absolute;
transform: translateY(-20%);
z-index: 0;
}
.blurred {
filter: blur(50px);
transition: all 3s;
}
@media (prefers-reduced-motion) {
.hidden {
transition: none;
}
}
.not-blurred {
filter: blur(0);
}
</style>
NavBar.vue:
<script setup lang="ts"></script>
<template>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">To Code or Not to Code</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">HTML</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">CSS</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">JS</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">JSON</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">XML</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">Python</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">YouTube</span>
</a>
</li>
<li class="nav-item">
<a href="example.com" class="nav-link">
<span class="link-text fa-primary">Discord</span>
</a>
</li>
</ul>
</nav>
</template>
<style scoped>
@import '../assets/base.css';
@import '../assets/main.css';
@keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(-90deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
0% {
transform: rotate(360deg);
}
25% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(-90deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse {
0% {
transform: rotate(360deg);
}
25% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
@-moz-keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(-90deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes spin-reverse {
0% {
transform: rotate(360deg);
}
25% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
@-o-keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(-90deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes spin-reverse {
0% {
transform: rotate(360deg);
}
25% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
.navbar {
position: fixed;
background-color: var(--background-secondary);
transition: width 500ms ease;
z-index: 10;
}
.navbar-nav {
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
align-content: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-item:nth-last-child(2) {
margin-top: auto;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.link-text {
display: none;
margin-left: 1rem;
}
.nav-link svg {
min-width: 2rem;
margin: 0 1.5rem;
filter: grayscale(100%);
}
.fa-primary {
color: #df49a6;
fill: #df49a6;
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
color: var(--text-primary);
background-color: var(--background-primary);
letter-spacing: 0.3ch;
width: 100%;
}
@media only screen and (max-width: 600px) {
.navbar {
bottom: 0px;
width: 100vw;
height: 5rem;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
}
.nav-link {
justify-content: center;
}
html body .hidden {
transition: none;
}
main {
margin: 0px;
padding: 0px;
}
}
@media only screen and (min-width: 600px) {
body {
zoom: 80%;
}
.navbar {
top: 0px;
width: 5rem;
height: 100%;
}
.navbar:hover {
width: 16rem;
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background-color: var(--background-primary);
color: var(--text-primary);
}
.logo svg {
animation: spin-reverse 1s ease-in-out;
-webkit-animation: spin-reverse 1s ease-in-out;
-moz-animation: spin-reverse 1s ease-in-out;
-o-animation: spin-reverse 1s ease-in-out;
}
.navbar:hover .logo svg {
animation: spin 1s ease-in-out;
-webkit-animation: spin 1s ease-in-out;
-moz-animation: spin 1s ease-in-out;
-o-animation: spin 1s ease-in-out;
}
.navbar:hover .link-text {
display: inline;
}
}
</style>
Expected Result (Old static website):
Working static HTML website
Actual Result (Vue Project):
Actual non-working Vue project
Dev tools of vue project:
Dev tools screenshot of non-working vue project
And console of vue project:
Console of non-working vue project
