├── .env.example ├── .eslintrc.json ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── app ├── [slug] │ ├── MDX.tsx │ ├── components │ │ ├── Copy.tsx │ │ └── Wrapper.tsx │ ├── index.css │ ├── page.tsx │ ├── posts.ts │ └── ui │ │ ├── DynamicIsland.tsx │ │ ├── ExclusionTabs.tsx │ │ ├── Gallery.tsx │ │ ├── InlineDropdown.tsx │ │ ├── RadialSelector.tsx │ │ ├── Shimmer.tsx │ │ └── Stepper.tsx ├── api │ ├── ideas │ │ └── route.ts │ └── subscribe │ │ └── route.ts ├── components │ ├── Footer.tsx │ ├── Header.tsx │ ├── Main.tsx │ ├── Modal.tsx │ ├── Newsletter.tsx │ └── Providers.tsx ├── fonts │ ├── inter-medium.woff2 │ ├── inter-regular.woff2 │ ├── inter-semibold.woff2 │ ├── newsreader.woff2 │ └── og │ │ └── inter-semibold.ttf ├── globals.css ├── layout.tsx ├── not-found.tsx ├── og │ └── route.tsx ├── page.tsx ├── robots.ts ├── rss │ └── route.ts └── sitemap.ts ├── bun.lockb ├── content ├── dynamic-island.mdx ├── exclusion-tabs.mdx ├── gallery.mdx ├── inline-dropdown.mdx ├── radial-selector.mdx ├── shimmer.mdx └── stepper.mdx ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── public ├── album.webp ├── example.webp ├── favicon.ico ├── gallery │ ├── 1.webp │ ├── 2.webp │ ├── 3.webp │ └── 4.webp └── og.png ├── tailwind.config.ts └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | RESEND_API_KEY="" -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"], 3 | "rules": { 4 | "import/no-anonymous-default-export": "off", 5 | "react/display-name": "off" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: haaarshsingh 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier-plugin-tailwindcss"] 3 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Harsh's UI Laboratory 2 | 3 | Experimental design laboratory—free and open-source components. 4 | 5 | ## Quickstart 6 | 7 | Clone the website locally: 8 | 9 | ``` 10 | git clone https://github.com/haaarshsingh/www.git 11 | ``` 12 | 13 | ### Setting up the project 14 | 15 | ```bash 16 | cd www 17 | 18 | # Install dependencies 19 | bun install 20 | ``` 21 | 22 | ### Starting server 23 | 24 | ```bash 25 | bun dev 26 | ``` 27 | 28 | Server should now be running on [localhost](https://localhost:3000). 29 | 30 | ### Environment Variables 31 | 32 | This website uses [Resend Broadcasts]([upstash.com](https://resend.com/blog/send-marketing-emails-with-resend-broadcasts)) to manage the newsletter. Sign up for an account, and replace the following API key in `.env.EXAMPLE` with your own: 33 | 34 | ``` 35 | RESEND_API_KEY="" 36 | ``` 37 | 38 | ## Licensing 39 | 40 | This project is a collection of *experimental* components, and it's meant to explore concepts that might not be things you want to put into a production application. That being said, it's licensed under [MPL 2.0](https://www.mozilla.org/en-US/MPL/2.0/). 41 | -------------------------------------------------------------------------------- /app/[slug]/MDX.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc"; 3 | import DynamicIsland from "./ui/DynamicIsland"; 4 | import ExclusionTabs from "./ui/ExclusionTabs"; 5 | import InlineDropdown from "./ui/InlineDropdown"; 6 | import RadialSelector from "./ui/RadialSelector"; 7 | import Stepper from "./ui/Stepper"; 8 | import Shimmer from "./ui/Shimmer"; 9 | import Gallery from "./ui/Gallery"; 10 | 11 | const components = { 12 | DynamicIsland, 13 | ExclusionTabs, 14 | Gallery, 15 | InlineDropdown, 16 | RadialSelector, 17 | Stepper, 18 | Shimmer, 19 | }; 20 | 21 | export default ((props) => ( 22 | 26 | )) as FC; 27 | -------------------------------------------------------------------------------- /app/[slug]/components/Copy.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { RiCheckFill, RiLinksFill } from "react-icons/ri"; 4 | import { motion, AnimatePresence } from "framer-motion"; 5 | import { FC, useEffect, useState } from "react"; 6 | 7 | export const Copy: FC<{ slug: string }> = ({ slug }) => { 8 | const [copy, setCopy] = useState(false); 9 | const [hover, setHover] = useState(false); 10 | 11 | const onClick = () => { 12 | navigator.clipboard.writeText(`https://ui.harshsingh.xyz/${slug}`); 13 | setCopy(true); 14 | }; 15 | 16 | useEffect(() => { 17 | if (copy) 18 | setTimeout(() => { 19 | setCopy(false); 20 | }, 1000); 21 | }, [copy]); 22 | 23 | return ( 24 |
25 | 26 | {hover && ( 27 | 33 | {copy ? "Copied" : "Copy URL"} 34 | 35 | )} 36 | 37 | 65 |
66 | ); 67 | }; 68 | -------------------------------------------------------------------------------- /app/[slug]/components/Wrapper.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { FC, ReactNode } from "react"; 3 | import { HiOutlineArrowUpRight } from "react-icons/hi2"; 4 | 5 | type Props = { 6 | title: string; 7 | tags: string[]; 8 | className?: string; 9 | children: ReactNode; 10 | }; 11 | 12 | export const slugify = (s: string) => 13 | s 14 | .toString() 15 | .toLowerCase() 16 | .trim() 17 | .replace(/\s+/g, "-") 18 | .replace(/&/g, "-and-") 19 | .replace(/[^\w\-]+/g, "") 20 | .replace(/\-\-+/g, "-"); 21 | 22 | export default (({ title, tags, children, className }) => ( 23 |
24 |
30 | {children} 31 |
32 |
33 |
34 | {tags.map((tag, index) => ( 35 |
39 | {tag} 40 |
41 | ))} 42 |
43 | 52 | View Source 53 | 54 | 55 |
56 |
57 | )) as FC; 58 | -------------------------------------------------------------------------------- /app/[slug]/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shimmer-gradient: linear-gradient(110deg, #171717, 45%, #fff, 55%, #171717); 3 | } 4 | 5 | html.dark { 6 | --shimmer-gradient: linear-gradient(110deg, #fff, 45%, #171717, 55%, #fff); 7 | } 8 | 9 | .line { 10 | width: 3px; 11 | height: 3px; 12 | background: linear-gradient(#9a14df, #ffffff80); 13 | border-radius: 1.5px; 14 | transition: 10s ease-out; 15 | } 16 | 17 | .line0 { 18 | animation: playing 0.52s infinite ease; 19 | } 20 | 21 | .line1 { 22 | animation: playing 0.85s infinite ease; 23 | } 24 | 25 | .line2 { 26 | animation: playing 1.26s infinite ease; 27 | } 28 | 29 | .line3 { 30 | animation: playing 0.92s infinite ease; 31 | } 32 | 33 | .line4 { 34 | animation: playing 0.71s infinite ease; 35 | } 36 | 37 | .line5 { 38 | animation: playing 1.42s infinite ease; 39 | } 40 | 41 | .pause { 42 | animation: pause 0.2s forwards ease-out; 43 | } 44 | 45 | .slide-in-up { 46 | animation: slideInUp 0.3s forwards; 47 | } 48 | 49 | .slide-out-up { 50 | animation: slideOutUp 0.3s forwards; 51 | } 52 | 53 | .slide-in-down { 54 | animation: slideInDown 0.3s forwards; 55 | } 56 | 57 | .slide-out-down { 58 | animation: slideOutDown 0.3s forwards; 59 | } 60 | 61 | .shimmer { 62 | background: var(--shimmer-gradient); 63 | background-size: 260% auto; 64 | background-clip: text; 65 | -webkit-text-fill-color: transparent; 66 | animation: 2.5s ease-out infinite alternate shimmer; 67 | } 68 | 69 | @keyframes shimmer { 70 | to { 71 | background-position: -200%; 72 | } 73 | } 74 | 75 | @keyframes playing { 76 | 0% { 77 | height: 3px; 78 | } 79 | 50% { 80 | height: 16px; 81 | } 82 | to { 83 | height: 3px; 84 | } 85 | } 86 | 87 | @keyframes pause { 88 | from { 89 | height: 16px; 90 | } 91 | to { 92 | height: 3px; 93 | } 94 | } 95 | 96 | @keyframes slideInUp { 97 | from { 98 | transform: translateY(30px); 99 | filter: blur(5px); 100 | } 101 | to { 102 | transform: translateY(0px); 103 | filter: blur(0px); 104 | } 105 | } 106 | 107 | @keyframes slideOutUp { 108 | from { 109 | transform: translateY(0px); 110 | filter: blur(0px); 111 | } 112 | to { 113 | transform: translateY(-30px); 114 | filter: blur(5px); 115 | } 116 | } 117 | 118 | @keyframes slideInDown { 119 | from { 120 | transform: translateY(-30px); 121 | filter: blur(5px); 122 | } 123 | to { 124 | transform: translateY(0px); 125 | filter: blur(0px); 126 | } 127 | } 128 | 129 | @keyframes slideOutDown { 130 | from { 131 | transform: translateY(0px); 132 | filter: blur(0px); 133 | } 134 | to { 135 | transform: translateY(30px); 136 | filter: blur(5px); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /app/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import MDX from "./MDX"; 3 | import Link from "next/link"; 4 | import posts from "./posts"; 5 | import { notFound } from "next/navigation"; 6 | import { Copy } from "./components/Copy"; 7 | import "./index.css"; 8 | 9 | const format = (date: string) => { 10 | const [year, month, day] = date.split("-"); 11 | return `${month}/${day}/${year.slice(2)}`; 12 | }; 13 | 14 | export const generateMetadata = ({ params }: { params: { slug: string } }) => { 15 | const post = posts().find((post) => post.slug === params.slug); 16 | if (!post) return; 17 | 18 | const { 19 | title, 20 | publishedAt: publishedTime, 21 | summary: description, 22 | image, 23 | } = post.metadata; 24 | const ogImage = image 25 | ? image 26 | : `https://ui.harshsingh.xyz/og?title=${encodeURIComponent(title)}`; 27 | 28 | return { 29 | title, 30 | description, 31 | openGraph: { 32 | title, 33 | description, 34 | type: "article", 35 | publishedTime, 36 | url: `https://ui.harshsingh.xyz/${post.slug}`, 37 | images: [{ url: ogImage }], 38 | author: "Harsh Singh", 39 | }, 40 | twitter: { 41 | card: "summary_large_image", 42 | title, 43 | description, 44 | images: [ogImage], 45 | }, 46 | alternates: { canonical: `https://harshsingh.xyz/${post.slug}` }, 47 | }; 48 | }; 49 | 50 | export const generateStaticParams = () => 51 | posts().map((post) => ({ slug: post.slug })); 52 | 53 | export default (({ params }) => { 54 | const post = posts().find((post) => post.slug === params.slug); 55 | if (!post) notFound(); 56 | 57 | return ( 58 |
59 |