-
-
Save adrianhajdin/23b2d30e39cd2d92cfa9f436c19afe27 to your computer and use it in GitHub Desktop.
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /* | |
| Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! | |
| */ | |
| .main { | |
| width: 100vw; | |
| min-height: 100vh; | |
| position: fixed; | |
| display: flex; | |
| justify-content: center; | |
| padding: 120px 24px 160px 24px; | |
| pointer-events: none; | |
| } | |
| .main:before { | |
| background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%); | |
| position: absolute; | |
| content: ""; | |
| z-index: 2; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| } | |
| .main:after { | |
| content: ""; | |
| background-image: url("/src/assets/grid.svg"); | |
| z-index: 1; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| opacity: 0.4; | |
| filter: invert(1); | |
| } | |
| .gradient { | |
| height: fit-content; | |
| z-index: 3; | |
| width: 100%; | |
| max-width: 640px; | |
| background-image: radial-gradient( | |
| at 27% 37%, | |
| hsla(215, 98%, 61%, 1) 0px, | |
| transparent 0% | |
| ), | |
| radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%), | |
| radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%), | |
| radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%), | |
| radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%), | |
| radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%), | |
| radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%); | |
| position: absolute; | |
| content: ""; | |
| width: 100%; | |
| height: 100%; | |
| filter: blur(100px) saturate(150%); | |
| top: 80px; | |
| opacity: 0.15; | |
| } | |
| @media screen and (max-width: 640px) { | |
| .main { | |
| padding: 0; | |
| } | |
| } | |
| /* Tailwind Styles */ | |
| .app { | |
| @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; | |
| } | |
| .black_btn { | |
| @apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black; | |
| } | |
| .head_text { | |
| @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center; | |
| } | |
| .orange_gradient { | |
| @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent; | |
| } | |
| .desc { | |
| @apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl; | |
| } | |
| .url_input { | |
| @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-10 pr-12 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0; | |
| } | |
| .submit_btn { | |
| @apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400; | |
| } | |
| .link_card { | |
| @apply p-3 flex justify-start items-center flex-row bg-white border border-gray-200 gap-3 rounded-lg cursor-pointer; | |
| } | |
| .copy_btn { | |
| @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer; | |
| } | |
| .blue_gradient { | |
| @apply font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent; | |
| } | |
| .summary_box { | |
| @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-4; | |
| } |
| <!-- satoshi font family --> | |
| <link | |
| href="https://api.fontshare.com/v2/css?f[]=satoshi@1,900,700,500,300,400&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <!-- inter font family --> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" | |
| rel="stylesheet" | |
| /> |
If you use Visual Studio Code, you can use the PostCSS Language Support plugin.
It worked.
Great!!! this worked for me too. As simplee as this.
was able to complete the project but when deploying to amplify I get a blank screen. Please release the second video showing how to deploy and I prefer amplify over netlify if possible. The only errors I ran into, which I used AI to help me resolve, while building was rendering the summary. The entirety of this tutorial was great besides the last part of the code. This was mostly likely due to some error on my part that I couldnt locate without the help of AI.
Failed to load resource: the server responded with a status of 403 ()
Anyone know how to fix this error?
Failed to load resource: the server responded with a status of 403 () Anyone know how to fix this error?
I think it may be the website you are trying to read. Use teachermagazine.com for articles and choose a specific article. I remember getting a 403 but don't remember doing anything in the application itself to fix it. I changed the code for error messaging so that I could get details of the error and I found that it will always return a 503 for many articles. I've concluded this is because those articles are chopped up and some have embedded videos. Using teachermagazine.com you get clean articles without embedded videos and a block of text.
I have a working version here >>> https://65347d164c06bc1524b35afb--ornate-chaja-d01bc2.netlify.app/
I also put the code for Demo.jsx on my github.
I am getting this error in my console can anyone help me fix this it says 403 forbidden error in my console. If anybody knows why this is happening or fix pls let me know
getting this
@reduxjs_toolkit_query_react.js?v=b23c70a8:109
GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fwww.w3schools.com%2F&length=3 503 (Service Unavailable)
iam unable to get the output..please help me out
I had the same problem with the 403 forbidden error and found out that it wasn't receiving the token like it was supposed to. I had my .env file in the src directory and I moved it to the root directory (the same area that index.html, vite.config, and the readme is on) and it works great. Thought that might help
i am getting this error i dont know why please help me
I am getting this error
Demo.jsx:17
GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fwww.health.harvard.edu%2Fstaying-healthy%2Fcan-you-feel-younger-than-your-age&length=3 net::ERR_INTERNET_DISCONNECTED
Would appreciate some help.
For @layer directive problem (postcss) after importing App.css - use below code
@layer base {
.shadow-custom {
@apply shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)];
}
}
Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 ()
i am getting the same error , did you resolve it?
i think your .env file in src directory remove and add in folder directory
I think your api key is invalid, please Check your api key?
Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 ()
i am getting the same error , did you resolve it?
I got the same error, but with a 503 instead. However, when I tried with a url that actually contains an article, it worked. I tried this url: https://www.health.harvard.edu/staying-healthy/can-you-feel-younger-than-your-age
Try that and see if that works! :)
i also got the 503 error..it worked with an actual article link..but why it is not working with any random link? is there any solution for this??
Yes, so the problem is the ENV not picking up the token. You can console log your rapidApiKey and check if it's returning the token correctly, I hardcoded my token and everything seems to be working fine.