-
-
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" | |
| /> |
after i do all of this, it is still not showing anything.can anyone help me please?
Wow! This GitHub gist is really helpful.
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! :)
@CaptainPatel try entering a link for a normal article
or just go to article.js and just see if u have used the right call for fetchbasequery
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! :)
Oh thank you! I was getting 503 too but your article works!
Hi! When I paste this App.css file into my project, it says there are 26 problems in it. When I hover above "@tailwind" this message pops up "Unknown at rule @tailwindcss(unknownAtRules)" and when I import my App.css in the App.jsx, I immediately got an error which is "[plugin:vite:css] [postcss] C:/Users/Hp/Desktop/React/AiSummarizer/src/App.css:73:5: The
sm:class does not exist. Ifsm:is a custom class, make sure it is defined within a@layerdirective." It seems that the tailwind is not working.
Just go to your vs code extension and install the PostCss Language support, that will fix it.
Hi! When I paste this App.css file into my project, it says there are 26 problems in it. When I hover above "@tailwind" this message pops up "Unknown at rule @tailwindcss(unknownAtRules)" and when I import my App.css in the App.jsx, I immediately got an error which is "[plugin:vite:css] [postcss] C:/Users/Hp/Desktop/React/AiSummarizer/src/App.css:73:5: The
sm:class does not exist. Ifsm:is a custom class, make sure it is defined within a@layerdirective." It seems that the tailwind is not working.i'm also having issues with this project, maybe we can team up, work on it and help each other solve each others problems somehow. good luck to you
yeah i'm having those same errors too let's link up and work
please install the extension named post css language support in vs code to avoid these errors and in the start use the syntax @import "tailwindcss/base";
Hi! When I paste this App.css file into my project, it says there are 26 problems in it. When I hover above "@tailwind" this message pops up "Unknown at rule @tailwindcss(unknownAtRules)" and when I import my App.css in the App.jsx, I immediately got an error which is "[plugin:vite:css] [postcss] C:/Users/Hp/Desktop/React/AiSummarizer/src/App.css:73:5: The
sm:class does not exist. Ifsm:is a custom class, make sure it is defined within a@layerdirective." It seems that the tailwind is not working.i'm also having issues with this project, maybe we can team up, work on it and help each other solve each others problems somehow. good luck to you
yeah i'm having those same errors too let's link up and work
please install the extension named post css language support in vs code to avoid these errors and in the start use the syntax @import "tailwindcss/base";
i would love to team up, as i'm having a lot of trouble with this as well.
I am getting a 403 (You are not subscribed to this API) error when I already am. Can someone help?
i also get this problem eventhough i am subscribed to the API.Can anyone help me how to fix this issue? https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Virus-free.www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
…
On Mon, Sep 25, 2023 at 2:35 PM Palak Bansal @.> wrote: @.* commented on this gist. ------------------------------ I am getting a 403 (You are not subscribed to this API) error when I already am. Can someone help? — Reply to this email directly, view it on GitHub https://gist.github.com/adrianhajdin/23b2d30e39cd2d92cfa9f436c19afe27#gistcomment-4703353 or unsubscribe https://github.com/notifications/unsubscribe-auth/BAZYDMZWC6PB5ZQC7O6KSIDX4FT63BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMRQGQYTINRWU52HE2LHM5SXFJTDOJSWC5DF . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .
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.
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??
**'height: fit-content' is not supported by Firefox, Firefox for Android.Microsoft Edge Toolscompat-api/css
Specifies the height of the content area, padding area or border area (depending on 'box-sizing') of certain boxes.
Syntax: {1,2}
guys I got this in my error screen have a look... I hope to get possible solutions. Thank you in advance**