├── .github └── workflows │ └── next.yaml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── components ├── bluesky.js ├── corner.js ├── footer.js ├── github.js ├── header.js ├── layout.js ├── linkedin.js ├── themeicons.js └── twitter.js ├── context ├── courseInfoContext.js └── headerContext.js ├── course.json ├── csv └── index.js ├── data ├── copyCode.js ├── course.js └── lesson.js ├── lessons ├── 01-the-first-section │ └── A-intro.md ├── 02-a-second-section │ ├── A-first-lesson.md │ ├── B-second-lesson.md │ └── meta.json └── 03-thoughts-on-js-and-css │ ├── A-css.md │ ├── B-javascript.md │ ├── C-npm.md │ └── meta.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── index.js └── lessons │ └── [section] │ └── [slug].js ├── public ├── .nojekyll └── images │ ├── BRAND-WHearts.png │ ├── apple-touch-icon.png │ ├── author.jpg │ ├── course-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ └── social-share-cover.jpg ├── styles ├── courses.css ├── footer.css └── variables.css └── summary ├── getPrompt.js └── index.js /.github/workflows/next.yaml: -------------------------------------------------------------------------------- 1 | name: Deploy NextJS Course Site to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@master 13 | - name: npm install, build 14 | run: | 15 | npm install 16 | npm run build 17 | - name: Deploy site to gh-pages branch 18 | uses: crazy-max/ghaction-github-pages@v2 19 | with: 20 | target_branch: gh-pages 21 | build_dir: out 22 | # fqdn: sql.holt.courses 23 | env: 24 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 25 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | *.csv 33 | 34 | .env 35 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Course Website Starter Template


2 | 3 |

4 | A starter template build in Next.js for creating educational materials using Markdown. 5 |

6 | 7 | ## Get Started 8 | 9 | 1. Set up Node.js v20+ 10 | 1. Clone this repo 11 | 1. Run `npm install` 12 | 1. Run `npm run dev` to start the dev server 13 | 1. Open http://localhost:3000/ in a browser 14 | 15 | _Instructions for deploying the course website to GitHub Pages are below_ 16 | 17 | ## Configure Your Course 18 | 19 | There are several things to configure before getting started. 20 | 21 | ### course.json 22 | 23 | This json file allows you to configure the details of the site. Update the info here and it'll update it everywhere throughout the course website. 24 | 25 | - _author.name_ – Your name 26 | - _author.company_ – The company you work at or whatever you want as your subtitle. Optional. 27 | - _title_ – The title of your course 28 | - _subtitle_ – The subtitle of your course. Optional. 29 | - _frontendMastersLink_ – A link to the published video on FrontendMasters.com. Optional. 30 | - _social.linkedin_ - Your LinkedIn public user name, just the name, not the full link. Optional 31 | - _social.twitter_ – Your Twitter user name. Optional. 32 | - _social.github_ – Your GitHub user name. Optional. 33 | - _description_ – The description you want to show up in search engine results. 34 | - _keywords_ – The SEO keywords for this course. An array of strings 35 | - _productionBaseUrl_ – Typically useful for GitHub Pages. This adds a base path to your project. For GitHub Pages, this will be the name of your repo. For example, this site's base URL is `/next-course-starter` because the production URL for this site is `btholt.github.io/next-course-starer`. Do note this will also make your dev server's base URL this as well so you can catch problems before they go to production. **IF THIS IS SET, YOUR / PATH WILL 404** 36 | - _csvPath_ – A CSV with the meta data for your lessons will be created at this path when you build or export the project. If you delete this config option it will not generate a CSV. 37 | 38 | ### styles/variables.css 39 | 40 | Here is where you can theme your site. You can retheme the whole site with just these. There are variables for both light and dark theme styles. 41 | 42 | ### public/images 43 | 44 | Here is where you should stick all your images. Inside of your markdown, refer to images in this folder as `./images/`. 45 | 46 | Note this site doesn't use `next/image` because that requires the server component. 47 | 48 | ### public/images/author.jpg 49 | 50 | Your image. If you call it this, you won't have to change any code. If you need to change it, it's in `pages/index.js`. 51 | 52 | ### public/images/social-share-cover.jpg 53 | 54 | The image that will be used if someone shares your website to Twitter/Facebook/etc. If you call it this, you won't have to change any code. If you do need to change it, it's in `pages/index.js` 55 | 56 | ### public/images/course-icon.png 57 | 58 | The image at the top of the course. If you call it this, you won't have to change any code. If you do need to change it, it's in `pages/index.js` 59 | 60 | ## Favicon 61 | 62 | Just replace the favicon\* files and the apple-touch-icon.png in the public/images directory. If you have a PNG, [favicon.io](https://favicon.io) will generate these files for you. If you don't want favicons, just remove the references to them in `pages/_app.js`. 63 | 64 | ## Lessons 65 | 66 | All your markdown lesson files will go in `lessons/`. They **must** be organized an named this way: 67 | 68 | The folders must be named `01-section-one-name`, `02-section-two-name`, `03-section-three`, etc. 69 | 70 | The lessons are then grouped inside of these, the lessons are ordered by letters, `A-lesson-one.md`, `B-lesson-two.md`, `C-lesson-three.md`, etc. This numbering scheme matches how Frontend Masters organizes their content. 71 | 72 | The titles of your lessons and sections are generated from the folder and lesson names (and can be overridden.) The first, organizing part of the name is stripped (the `01-` part of `01-section-one` and the `A-` part of `A-lesson-one`), the hyphens are turned into spaces (`section-one` becomes `section one`) and then those are run through [title-case](https://github.com/blakeembrey/change-case#titlecase) (so `section one` becomes `Section One`.) If you need to override these, use the frontmatter (explained below.) 73 | 74 | The folder and lesson names are also used for the slugs. `02-section-two/C-lesson-three.md` becomes `yoursite.com/lessons/section-two/lesson-three`. 75 | 76 | Each of these lessons can have a [frontmatter](https://github.com/jonschlinkert/gray-matter#readme) for the following properties 77 | 78 | - _title_ – If you want the title to be different from the file name, you can specify here what that title should be. Frequently this useful for things where the capitalization would be off e.g. TailwindCSS instead of Tailwindcss. Optional. 79 | - _description_ – If you want to give individual lessons descriptions for SEO and for Frontend Masters, you can write a brief description here. 80 | - _keywords_ - If you want to give individual lessons keywords for SEO purposes, write a comma separated list 81 | 82 | 🤖: now the course starter can auto-generate the description and keywords for you using ChatGPT. See below how to. 83 | 84 | Be aware because of how the numbers and letters are stripped out, it is possible to have ambigious paths. `01-welcome/A-intro.md` and `03-welcome/D-intro.md` would resolve to the same thing and only the first one would be visitable. 85 | 86 | ## meta.json 87 | 88 | Each **section** (e.g. inside of `03-section-three` folder) folder can have a meta.json file, and is totally optional. 89 | 90 | - _title_ – an override for the title of the section. Frequently useful for capitalization e.g. `JS Tools` instead of `Js Tools`. 91 | - _icon_ – so you can set the icon used in the home page and the header. These icons are pulled from [the free Font Awesome v5 icons](https://fontawesome.com/v5.15/icons). If you want [fa-hammer](https://fontawesome.com/v5.15/icons/hammer), use "hammer" as the value for icon. 92 | 93 | ## highlight.js Theme 94 | 95 | The code blocks use [Highlight.js](https://highlightjs.org/static/demo/). By default it will use `a11y-light` as the theme for the code blocks. Change the CSS import in `pages/_app.js` to the theme you want to use. 96 | 97 | ## GitHub Pages / GitHub Actions 98 | 99 | By default this repo works with GitHub Pages (classic). Just make sure you set the `productionBaseUrl` in the course.json to the name of the repo. 100 | 101 | It also includes a GitHub Action to automatically deploy to your `gh-pages` branch. Just make sure that your repo has GitHub Pages (classic) enabled and the branch is set to `gh-pages`. If you're not deploying to GitHub Pages go ahead and delete the `.github` directory. 102 | 103 | By default the GitHub Action looks for a `main` branch, so be sure you're using that instead of `master`. 104 | 105 | If you want a custom domain, make sure you uncomment the `fqdn` field in [.github/workflows/next.yaml](https://github.com/btholt/next-course-starter/blob/main/.github/workflows/next.yaml) file and put your custom domain. If you don't do that and only set it up with the GitHub web GUI, every deploy will break the custom domain. 106 | 107 | ### GitHub Pages Instructions 108 | 109 | These instructions assume you've followed the setup instructions above and have a cloned version of this repo locally. 110 | 111 | 1. Create a new (public) remote repository in your GitHub Account (e.g. fem-javascript-fundamentals). 112 | 1. Grant `Read and write permissions` for Workflows under Actions > General > Workflow Permissions. 113 | 1. Update the `productionBaseUrl` in the `course.json` file to match the name of the repository. 114 | 1. Push to the new repository. You should see the `Deploy NextJS Course Site` workflow run under the Actions tab. 115 | 1. Configure GitHub Pages: Settings > Pages > Deploy from a Branch. Select the `gh-pages` branch. 116 | 1. Once the `pages-build-deployment` action completes, you should see your site at `https://USERNAME.github.io/REPO_NAME`. 117 | 118 | _Future pushes to the main branch will automatically trigger a new deployment._ 119 | 120 | ## Example Sites 121 | 122 | - [This repo itself](https://btholt.github.io/next-course-starter/) 123 | - [Complete Intro to React v9](https://react-v9.holt.courses/) 124 | - [Complete Intro to SQLite](https://sqlite.holt.courses/) 125 | - [Vanilla JS: You Might Not Need a Framework](https://firtman.github.io/vanilla/) 126 | 127 | ## npm commands 128 | 129 | - `npm run dev` - Next's dev command. Start a local dev server. Note if you have a productionBasePath set in your course.json, your dev server will respect that (so you don't mess up your paths in production.) 130 | - `npm run build` - Build your site for production. This will still include the Next.js server run time. Use this if you're using something like Vercel to host your site. 131 | - `npm run start` - Start an already-built server. 132 | - `npm run csv` – Will generate the CSV of the metadata from your course. Note you may have to run build first, depending on your csvPath. 133 | - `npm run seo` – Using ChatGPT, every file that does not have a description, ChatGPT will generate a description and keywords and write them to the file. Requires you to set a valid `OPENAI_API_KEY` (which means having a paid OpenAI account) using a [.env](https://github.com/motdotla/dotenv) or just by setting it in the environment. If a description already exists, this will skip it. 134 | 135 | ## Analytics 136 | 137 | By default this doesn't generate any analytics. If you are creating a Frontend Masters course and would like a weekly report of analytics, contact me (Brian Holt) and I'll give you a snippet to drop on your page (though fair warning, I will also have access to your data, if that bothers you.) 138 | 139 | Otherwise I'm pretty pleased with [Simple Analytics](referral.simpleanalytics.com/brian) (this is a referral link, free month for me and free month for you); I've been using them for my courses personally. 140 | 141 | ## License 142 | 143 | The **code** is this repo is licensed under the Apache 2.0 license. 144 | 145 | I include the CC-BY-NC-4.0 license for the content; this is what I recommend you license your **content** under: anyone can use and share the content but they cannot sell it; only you can. 146 | -------------------------------------------------------------------------------- /components/bluesky.js: -------------------------------------------------------------------------------- 1 | export default function BlueskyLogo() { 2 | return ( 3 | 9 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /components/corner.js: -------------------------------------------------------------------------------- 1 | export default function Corner() { 2 | return ( 3 |
4 | 11 | 12 | 13 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 35 | 42 | 43 | 44 | 45 |
46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Gh from "./github"; 3 | import Tw from "./twitter"; 4 | import Li from "./linkedin"; 5 | import Bs from "./bluesky"; 6 | import ThemeIcons from "./themeicons"; 7 | 8 | export default function Footer({ twitter, linkedin, github, bluesky }) { 9 | return ( 10 | 55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /components/github.js: -------------------------------------------------------------------------------- 1 | export default function GitHub() { 2 | return ( 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 28 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /components/header.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import Link from "next/link"; 3 | import { Context as HeaderContext } from "../context/headerContext"; 4 | import { Context as CourseContext } from "../context/courseInfoContext"; 5 | 6 | export default function Header(props) { 7 | const [{ section, title, icon }] = useContext(HeaderContext); 8 | const { frontendMastersLink } = useContext(CourseContext); 9 | return ( 10 |
11 |

12 | {props.title} 13 |

14 |
15 | {frontendMastersLink ? ( 16 | 17 | Watch on Frontend Masters 18 | 19 | ) : null} 20 | {section ? ( 21 |

22 | {section} {title} 23 |

24 | ) : null} 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /components/layout.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | import Footer from "./footer"; 4 | import Header from "./header"; 5 | import getCourseConfig from "../data/course"; 6 | import { Provider as HeaderProvider } from "../context/headerContext"; 7 | import { Provider as CourseInfoProvider } from "../context/courseInfoContext"; 8 | 9 | function Layout({ children }) { 10 | const courseInfo = getCourseConfig(); 11 | const headerHook = useState({}); 12 | return ( 13 | 14 | 15 |
16 |
17 |
18 |
{children}
19 |
20 |
26 |
27 | 28 | 29 | ); 30 | } 31 | 32 | export default function App({ children }) { 33 | return {children}; 34 | } 35 | -------------------------------------------------------------------------------- /components/linkedin.js: -------------------------------------------------------------------------------- 1 | export default function LinkedIn() { 2 | return ( 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 27 | 28 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /components/themeicons.js: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from "react"; 4 | 5 | export default function ThemeIcons() { 6 | const [theme, setTheme] = useState("light"); 7 | 8 | useEffect(() => { 9 | const storedTheme = localStorage.getItem("theme"); 10 | const prefersDark = window.matchMedia( 11 | "(prefers-color-scheme: dark)" 12 | ).matches; 13 | setTheme(storedTheme || (prefersDark ? "dark" : "light")); 14 | }, []); 15 | 16 | useEffect(() => { 17 | document.documentElement.setAttribute("data-theme", theme); 18 | localStorage.setItem("theme", theme); 19 | }, [theme]); 20 | 21 | const toggleTheme = () => { 22 | setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); 23 | }; 24 | 25 | return ( 26 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /components/twitter.js: -------------------------------------------------------------------------------- 1 | export default function Twitter() { 2 | return ( 3 | 10 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /context/courseInfoContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | const courseInfoContext = createContext([{}, () => {}]); 4 | 5 | export const Provider = courseInfoContext.Provider; 6 | export const Consumer = courseInfoContext.Consumer; 7 | export const Context = courseInfoContext; 8 | -------------------------------------------------------------------------------- /context/headerContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | const headerContext = createContext([{}, () => {}]); 4 | 5 | export const Provider = headerContext.Provider; 6 | export const Consumer = headerContext.Consumer; 7 | export const Context = headerContext; 8 | -------------------------------------------------------------------------------- /course.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": { 3 | "name": "Brian Holt", 4 | "company": "Neon" 5 | }, 6 | "title": "Next.js Course Starter Kit", 7 | "subtitle": "for Frontend Masters", 8 | "frontendMastersLink": "https://frontendmasters.com/courses/complete-react-v9/", 9 | "social": { 10 | "linkedin": "btholt", 11 | "github": "btholt", 12 | "twitter": "holtbt", 13 | "bluesky": "brianholt.me" 14 | }, 15 | "description": "A starter kit for making really amazing courses, optimized for Frontend Masters", 16 | "keywords": ["your", "Google", "keywords", "here"], 17 | "productionBaseUrl": "/next-course-starter", 18 | "csvPath": "./out/lessons.csv" 19 | } 20 | -------------------------------------------------------------------------------- /csv/index.js: -------------------------------------------------------------------------------- 1 | import fs from "fs/promises"; 2 | import path from "path"; 3 | import { convertArrayToCSV } from "convert-array-to-csv"; 4 | import { getLessons } from "../data/lesson.js"; 5 | 6 | async function start() { 7 | const configBuffer = await fs.readFile( 8 | path.join(process.cwd(), "course.json") 9 | ); 10 | const config = JSON.parse(configBuffer); 11 | 12 | if (!config.csvPath) { 13 | console.log("no csvPath in course.json, skipping CSV generation"); 14 | return; 15 | } 16 | 17 | process.env.BASE_URL = config?.productionBaseUrl || ""; 18 | const sections = await getLessons(); 19 | 20 | const lessons = []; 21 | 22 | for (let i = 0; i < sections.length; i++) { 23 | const section = sections[i]; 24 | 25 | for (let j = 0; j < section.lessons.length; j++) { 26 | const lesson = section.lessons[j]; 27 | 28 | lessons.push({ 29 | order: lesson.order, 30 | sectionTitle: section.title, 31 | lessonTitle: lesson.title, 32 | slug: section.slug + "/" + lesson.slug, 33 | sectionIcon: section.icon, 34 | filePath: lesson.fullSlug, 35 | description: lesson.description, 36 | }); 37 | } 38 | } 39 | 40 | const csv = convertArrayToCSV(lessons); 41 | 42 | await fs.writeFile(config.csvPath, csv); 43 | console.log(`wrote ${lessons.length} rows to ${config.csvPath}`); 44 | } 45 | 46 | start(); 47 | -------------------------------------------------------------------------------- /data/copyCode.js: -------------------------------------------------------------------------------- 1 | function createDOMElements() { 2 | const container = document.createElement("div"); 3 | container.innerHTML = 4 | "
"; 5 | container.className = "div-copy"; 6 | return container; 7 | } 8 | 9 | function attachCopyCodeFunctionality(div) { 10 | const elementsToClean = []; 11 | document 12 | .querySelectorAll("pre") 13 | .forEach(function createButtonAndAttachHandlers(pre) { 14 | let timeout = null; 15 | const copy = div.cloneNode(true); 16 | pre.appendChild(copy); 17 | elementsToClean.push(pre); 18 | 19 | copy.onclick = function copyTextToClipboard() { 20 | navigator.clipboard.writeText(pre.textContent); 21 | copy.classList.add("clicked"); 22 | clearTimeout(timeout); 23 | timeout = setTimeout(function hidePopup() { 24 | copy.classList.remove("clicked"); 25 | }, 1500); 26 | }; 27 | }); 28 | 29 | return elementsToClean; 30 | } 31 | 32 | export default function createCopyCodeFunctionality() { 33 | const container = createDOMElements(); 34 | return attachCopyCodeFunctionality(container); 35 | } 36 | -------------------------------------------------------------------------------- /data/course.js: -------------------------------------------------------------------------------- 1 | import config from "../course.json"; 2 | 3 | const DEFAULT_CONFIG = { 4 | author: { 5 | name: "An Author", 6 | company: "An Author's Company", 7 | }, 8 | title: "A Superb Course", 9 | subtitle: "That Teaches Nice Things", 10 | frontendMastersLink: "", 11 | description: "A nice course for nice people.", 12 | keywords: ["a nice course", "for people", "to learn", "nice things"], 13 | social: { 14 | linkedin: "btholt", 15 | github: "btholt", 16 | twitter: "holtbt", 17 | bluesky: "brianholt.me", 18 | }, 19 | productionBaseUrl: "/", 20 | }; 21 | 22 | export default function getCourseConfig() { 23 | return Object.assign({}, DEFAULT_CONFIG, config); 24 | } 25 | -------------------------------------------------------------------------------- /data/lesson.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import fs from "fs/promises"; 3 | import matter from "gray-matter"; 4 | import { titleCase } from "title-case"; 5 | import { Marked } from "marked"; 6 | import { markedHighlight } from "marked-highlight"; 7 | import hljs from "highlight.js"; 8 | 9 | const DEFAULT_ICON = "info-circle"; 10 | const lessonsPath = path.join(process.cwd(), "lessons"); 11 | 12 | const marked = new Marked( 13 | markedHighlight({ 14 | baseUrl: process.env.BASE_URL ? process.env.BASE_URL + "/" : "/", 15 | highlight: function (code, lang) { 16 | const language = hljs.getLanguage(lang) ? lang : "plaintext"; 17 | return hljs.highlight(code, { language }).value; 18 | }, 19 | langPrefix: "hljs language-", 20 | }) 21 | ); 22 | 23 | function getTitle(slug, override) { 24 | let title = override; 25 | if (!title) { 26 | title = titleCase(slug.split("-").join(" ")); 27 | } 28 | 29 | return title; 30 | } 31 | 32 | async function getMeta(section) { 33 | let meta = {}; 34 | try { 35 | const file = await fs.readFile( 36 | path.join(lessonsPath, section, "meta.json") 37 | ); 38 | meta = JSON.parse(file.toString()); 39 | } catch (e) { 40 | // no meta.json, nothing to do 41 | } 42 | 43 | return meta; 44 | } 45 | 46 | function slugify(inputPath) { 47 | const pathParts = inputPath.split("-"); 48 | const pathOrder = pathParts.shift(); 49 | const pathSlug = pathParts.join("-"); 50 | return { 51 | slug: pathSlug, 52 | order: pathOrder, 53 | title: titleCase(pathParts.join(" ")), 54 | }; 55 | } 56 | 57 | export async function getLessons() { 58 | const dir = await fs.readdir(lessonsPath); 59 | const sections = []; 60 | 61 | for (let dirFilename of dir) { 62 | const dirStats = await fs.lstat(path.join(lessonsPath, dirFilename)); 63 | 64 | if (dirStats.isFile()) { 65 | continue; 66 | } 67 | 68 | const lessonsDir = await fs.readdir(path.join(lessonsPath, dirFilename)); 69 | 70 | let { 71 | title: sectionTitle, 72 | order: sectionOrder, 73 | slug: sectionSlug, 74 | } = slugify(dirFilename); 75 | 76 | let icon = DEFAULT_ICON; 77 | 78 | const meta = await getMeta(dirFilename); 79 | if (meta.title) { 80 | sectionTitle = meta.title; 81 | } 82 | if (meta.icon) { 83 | icon = meta.icon; 84 | } 85 | 86 | const lessons = []; 87 | for (let lessonFilename of lessonsDir) { 88 | if (lessonFilename.slice(-3) !== ".md") { 89 | continue; 90 | } 91 | 92 | const filePath = path.join(lessonsPath, dirFilename, lessonFilename); 93 | 94 | const file = await fs.readFile(filePath); 95 | const { data } = matter(file.toString()); 96 | let slug = lessonFilename.replace(/\.md$/, ""); 97 | 98 | const slugParts = slug.split("-"); 99 | const lessonOrder = slugParts.shift(); 100 | 101 | slug = slugParts.join("-"); 102 | 103 | const title = getTitle(slug, data.title); 104 | 105 | lessons.push({ 106 | slug, 107 | fullSlug: `/lessons/${sectionSlug}/${slug}`, 108 | title, 109 | order: `${sectionOrder}${lessonOrder.toUpperCase()}`, 110 | path: filePath, 111 | description: data.description ? data.description : "", 112 | }); 113 | } 114 | 115 | sections.push({ 116 | icon, 117 | title: sectionTitle, 118 | slug: sectionSlug, 119 | lessons, 120 | order: sectionOrder, 121 | }); 122 | } 123 | 124 | return sections; 125 | } 126 | 127 | export async function getLesson(targetDir, targetFile) { 128 | const dir = await fs.readdir(lessonsPath); 129 | 130 | for (let i = 0; i < dir.length; i++) { 131 | const dirPath = dir[i]; 132 | if (dirPath.endsWith(targetDir)) { 133 | const lessonDir = ( 134 | await fs.readdir(path.join(lessonsPath, dirPath)) 135 | ).filter((str) => str.endsWith(".md")); 136 | 137 | for (let j = 0; j < lessonDir.length; j++) { 138 | const slugPath = lessonDir[j]; 139 | if (slugPath.endsWith(targetFile + ".md")) { 140 | const filePath = path.join(lessonsPath, dirPath, slugPath); 141 | const file = await fs.readFile(filePath); 142 | const { data, content } = matter(file.toString()); 143 | const html = marked.parse(content); 144 | const title = getTitle(targetFile, data.title); 145 | const meta = await getMeta(dirPath); 146 | 147 | const section = getTitle(targetDir, meta.title); 148 | const icon = meta.icon ? meta.icon : DEFAULT_ICON; 149 | 150 | let nextSlug; 151 | let prevSlug; 152 | 153 | // get next 154 | if (lessonDir[j + 1]) { 155 | // has next in section 156 | const { slug: next } = slugify(lessonDir[j + 1]); 157 | nextSlug = `${targetDir}/${next.replace(/\.md$/, "")}`; 158 | } else if (dir[i + 1]) { 159 | // has next in next section 160 | const nextDir = ( 161 | await fs.readdir(path.join(lessonsPath, dir[i + 1])) 162 | ).filter((str) => str.endsWith(".md")); 163 | const nextDirSlug = slugify(dir[i + 1]).slug; 164 | const nextLessonSlug = slugify(nextDir[0]).slug.replace( 165 | /\.md$/, 166 | "" 167 | ); 168 | nextSlug = `${nextDirSlug}/${nextLessonSlug}`; 169 | } else { 170 | // last section 171 | nextSlug = null; 172 | } 173 | 174 | // get prev 175 | if (lessonDir[j - 1]) { 176 | // has prev in section 177 | const { slug: prev } = slugify(lessonDir[j - 1]); 178 | prevSlug = `${targetDir}/${prev.replace(/\.md$/, "")}`; 179 | } else if (dir[i - 1]) { 180 | // has prev in prev section 181 | const prevDir = ( 182 | await fs.readdir(path.join(lessonsPath, dir[i - 1])) 183 | ).filter((str) => str.endsWith(".md")); 184 | const prevDirSlug = slugify(dir[i - 1]).slug; 185 | const prevLessonSlug = slugify( 186 | prevDir[prevDir.length - 1] 187 | ).slug.replace(/\.md$/, ""); 188 | prevSlug = `${prevDirSlug}/${prevLessonSlug}`; 189 | } else { 190 | // first section 191 | prevSlug = null; 192 | } 193 | 194 | const base = process.env.BASE_URL ? process.env.BASE_URL : "/"; 195 | 196 | return { 197 | attributes: data, 198 | html, 199 | markdown: content, 200 | slug: targetFile, 201 | title, 202 | section, 203 | icon, 204 | filePath, 205 | nextSlug: nextSlug ? path.join(base, "lessons", nextSlug) : null, 206 | prevSlug: prevSlug ? path.join(base, "lessons", prevSlug) : null, 207 | }; 208 | } 209 | } 210 | } 211 | } 212 | 213 | return false; 214 | } 215 | -------------------------------------------------------------------------------- /lessons/01-the-first-section/A-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Introduction" 3 | description: "The introduction to this course." 4 | keywords: 5 | - A course starter 6 | - Next.js 7 | - React 8 | - Brian Holt 9 | --- 10 | 11 | Hello! And welcome to the Next.js course starter by [Brian Holt][twitter]. 12 | 13 | ![Cat, dog, and rat logo for the course](/next-course-starter/images/BRAND-WHearts.png) 14 | 15 | This is a course starter specifically made for making online courses and optimized for use with [Frontend Masters][fem]. 16 | 17 | [twitter]: https://twitter.com/holtbt 18 | [fem]: https://www.frontendmasters.com 19 | -------------------------------------------------------------------------------- /lessons/02-a-second-section/A-first-lesson.md: -------------------------------------------------------------------------------- 1 | - this 2 | - is 3 | - the 4 | - second 5 | - lesson 6 | -------------------------------------------------------------------------------- /lessons/02-a-second-section/B-second-lesson.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: "An important second lesson" 3 | --- 4 | 5 | This is the second lesson 6 | 7 | ```javascript 8 | function getGreeting() { 9 | return `oh hey there`; 10 | } 11 | 12 | console.log(getGreeting()); 13 | ``` 14 | -------------------------------------------------------------------------------- /lessons/02-a-second-section/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "icon": "dumpster-fire" 3 | } -------------------------------------------------------------------------------- /lessons/03-thoughts-on-js-and-css/A-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "CSS" 3 | description: "CSS is for styling" 4 | --- 5 | 6 | CSS is important 7 | -------------------------------------------------------------------------------- /lessons/03-thoughts-on-js-and-css/B-javascript.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "JavaScript" 3 | --- 4 | 5 | Seems important, right? 6 | -------------------------------------------------------------------------------- /lessons/03-thoughts-on-js-and-css/C-npm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "npm" 3 | description: "npm doesn't stand for node package manager" 4 | --- 5 | 6 | npm doesn't stand for node package manager 7 | -------------------------------------------------------------------------------- /lessons/03-thoughts-on-js-and-css/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Thoughts on JS and CSS", 3 | "icon": "file-code" 4 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | import { readFileSync } from "fs"; 2 | import path from "path"; 3 | 4 | const buffer = readFileSync(path.join(process.cwd(), "./course.json")); 5 | const course = JSON.parse(buffer); 6 | const BASE_URL = course?.productionBaseUrl || ""; 7 | 8 | const config = { 9 | output: "export", 10 | basePath: BASE_URL, 11 | env: { 12 | BASE_URL, 13 | }, 14 | }; 15 | 16 | export default config; 17 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-course-starter", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": { 6 | "": { 7 | "license": "(CC-BY-NC-4.0 OR Apache-2.0)", 8 | "dependencies": { 9 | "@fortawesome/fontawesome-free": "^6.7.2", 10 | "gray-matter": "^4.0.3", 11 | "highlight.js": "^11.11.1", 12 | "marked": "^15.0.6", 13 | "marked-highlight": "^2.2.1", 14 | "next": "^15.1.6", 15 | "react": "^19.0.0", 16 | "react-dom": "^19.0.0", 17 | "title-case": "^4.3.2" 18 | }, 19 | "devDependencies": { 20 | "convert-array-to-csv": "^2.0.0", 21 | "dotenv": "^16.4.7", 22 | "openai": "^4.80.1", 23 | "zod": "^3.24.1" 24 | } 25 | }, 26 | "node_modules/@emnapi/runtime": { 27 | "version": "1.3.1", 28 | "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz", 29 | "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==", 30 | "optional": true, 31 | "dependencies": { 32 | "tslib": "^2.4.0" 33 | } 34 | }, 35 | "node_modules/@fortawesome/fontawesome-free": { 36 | "version": "6.7.2", 37 | "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz", 38 | "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==", 39 | "engines": { 40 | "node": ">=6" 41 | } 42 | }, 43 | "node_modules/@img/sharp-darwin-arm64": { 44 | "version": "0.33.5", 45 | "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz", 46 | "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==", 47 | "cpu": [ 48 | "arm64" 49 | ], 50 | "optional": true, 51 | "os": [ 52 | "darwin" 53 | ], 54 | "engines": { 55 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 56 | }, 57 | "funding": { 58 | "url": "https://opencollective.com/libvips" 59 | }, 60 | "optionalDependencies": { 61 | "@img/sharp-libvips-darwin-arm64": "1.0.4" 62 | } 63 | }, 64 | "node_modules/@img/sharp-darwin-x64": { 65 | "version": "0.33.5", 66 | "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz", 67 | "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==", 68 | "cpu": [ 69 | "x64" 70 | ], 71 | "optional": true, 72 | "os": [ 73 | "darwin" 74 | ], 75 | "engines": { 76 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 77 | }, 78 | "funding": { 79 | "url": "https://opencollective.com/libvips" 80 | }, 81 | "optionalDependencies": { 82 | "@img/sharp-libvips-darwin-x64": "1.0.4" 83 | } 84 | }, 85 | "node_modules/@img/sharp-libvips-darwin-arm64": { 86 | "version": "1.0.4", 87 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz", 88 | "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==", 89 | "cpu": [ 90 | "arm64" 91 | ], 92 | "optional": true, 93 | "os": [ 94 | "darwin" 95 | ], 96 | "funding": { 97 | "url": "https://opencollective.com/libvips" 98 | } 99 | }, 100 | "node_modules/@img/sharp-libvips-darwin-x64": { 101 | "version": "1.0.4", 102 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz", 103 | "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==", 104 | "cpu": [ 105 | "x64" 106 | ], 107 | "optional": true, 108 | "os": [ 109 | "darwin" 110 | ], 111 | "funding": { 112 | "url": "https://opencollective.com/libvips" 113 | } 114 | }, 115 | "node_modules/@img/sharp-libvips-linux-arm": { 116 | "version": "1.0.5", 117 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz", 118 | "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==", 119 | "cpu": [ 120 | "arm" 121 | ], 122 | "optional": true, 123 | "os": [ 124 | "linux" 125 | ], 126 | "funding": { 127 | "url": "https://opencollective.com/libvips" 128 | } 129 | }, 130 | "node_modules/@img/sharp-libvips-linux-arm64": { 131 | "version": "1.0.4", 132 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz", 133 | "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==", 134 | "cpu": [ 135 | "arm64" 136 | ], 137 | "optional": true, 138 | "os": [ 139 | "linux" 140 | ], 141 | "funding": { 142 | "url": "https://opencollective.com/libvips" 143 | } 144 | }, 145 | "node_modules/@img/sharp-libvips-linux-s390x": { 146 | "version": "1.0.4", 147 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz", 148 | "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==", 149 | "cpu": [ 150 | "s390x" 151 | ], 152 | "optional": true, 153 | "os": [ 154 | "linux" 155 | ], 156 | "funding": { 157 | "url": "https://opencollective.com/libvips" 158 | } 159 | }, 160 | "node_modules/@img/sharp-libvips-linux-x64": { 161 | "version": "1.0.4", 162 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz", 163 | "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==", 164 | "cpu": [ 165 | "x64" 166 | ], 167 | "optional": true, 168 | "os": [ 169 | "linux" 170 | ], 171 | "funding": { 172 | "url": "https://opencollective.com/libvips" 173 | } 174 | }, 175 | "node_modules/@img/sharp-libvips-linuxmusl-arm64": { 176 | "version": "1.0.4", 177 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz", 178 | "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==", 179 | "cpu": [ 180 | "arm64" 181 | ], 182 | "optional": true, 183 | "os": [ 184 | "linux" 185 | ], 186 | "funding": { 187 | "url": "https://opencollective.com/libvips" 188 | } 189 | }, 190 | "node_modules/@img/sharp-libvips-linuxmusl-x64": { 191 | "version": "1.0.4", 192 | "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz", 193 | "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==", 194 | "cpu": [ 195 | "x64" 196 | ], 197 | "optional": true, 198 | "os": [ 199 | "linux" 200 | ], 201 | "funding": { 202 | "url": "https://opencollective.com/libvips" 203 | } 204 | }, 205 | "node_modules/@img/sharp-linux-arm": { 206 | "version": "0.33.5", 207 | "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz", 208 | "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==", 209 | "cpu": [ 210 | "arm" 211 | ], 212 | "optional": true, 213 | "os": [ 214 | "linux" 215 | ], 216 | "engines": { 217 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 218 | }, 219 | "funding": { 220 | "url": "https://opencollective.com/libvips" 221 | }, 222 | "optionalDependencies": { 223 | "@img/sharp-libvips-linux-arm": "1.0.5" 224 | } 225 | }, 226 | "node_modules/@img/sharp-linux-arm64": { 227 | "version": "0.33.5", 228 | "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz", 229 | "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==", 230 | "cpu": [ 231 | "arm64" 232 | ], 233 | "optional": true, 234 | "os": [ 235 | "linux" 236 | ], 237 | "engines": { 238 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 239 | }, 240 | "funding": { 241 | "url": "https://opencollective.com/libvips" 242 | }, 243 | "optionalDependencies": { 244 | "@img/sharp-libvips-linux-arm64": "1.0.4" 245 | } 246 | }, 247 | "node_modules/@img/sharp-linux-s390x": { 248 | "version": "0.33.5", 249 | "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz", 250 | "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==", 251 | "cpu": [ 252 | "s390x" 253 | ], 254 | "optional": true, 255 | "os": [ 256 | "linux" 257 | ], 258 | "engines": { 259 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 260 | }, 261 | "funding": { 262 | "url": "https://opencollective.com/libvips" 263 | }, 264 | "optionalDependencies": { 265 | "@img/sharp-libvips-linux-s390x": "1.0.4" 266 | } 267 | }, 268 | "node_modules/@img/sharp-linux-x64": { 269 | "version": "0.33.5", 270 | "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz", 271 | "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==", 272 | "cpu": [ 273 | "x64" 274 | ], 275 | "optional": true, 276 | "os": [ 277 | "linux" 278 | ], 279 | "engines": { 280 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 281 | }, 282 | "funding": { 283 | "url": "https://opencollective.com/libvips" 284 | }, 285 | "optionalDependencies": { 286 | "@img/sharp-libvips-linux-x64": "1.0.4" 287 | } 288 | }, 289 | "node_modules/@img/sharp-linuxmusl-arm64": { 290 | "version": "0.33.5", 291 | "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz", 292 | "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==", 293 | "cpu": [ 294 | "arm64" 295 | ], 296 | "optional": true, 297 | "os": [ 298 | "linux" 299 | ], 300 | "engines": { 301 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 302 | }, 303 | "funding": { 304 | "url": "https://opencollective.com/libvips" 305 | }, 306 | "optionalDependencies": { 307 | "@img/sharp-libvips-linuxmusl-arm64": "1.0.4" 308 | } 309 | }, 310 | "node_modules/@img/sharp-linuxmusl-x64": { 311 | "version": "0.33.5", 312 | "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz", 313 | "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==", 314 | "cpu": [ 315 | "x64" 316 | ], 317 | "optional": true, 318 | "os": [ 319 | "linux" 320 | ], 321 | "engines": { 322 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 323 | }, 324 | "funding": { 325 | "url": "https://opencollective.com/libvips" 326 | }, 327 | "optionalDependencies": { 328 | "@img/sharp-libvips-linuxmusl-x64": "1.0.4" 329 | } 330 | }, 331 | "node_modules/@img/sharp-wasm32": { 332 | "version": "0.33.5", 333 | "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz", 334 | "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==", 335 | "cpu": [ 336 | "wasm32" 337 | ], 338 | "optional": true, 339 | "dependencies": { 340 | "@emnapi/runtime": "^1.2.0" 341 | }, 342 | "engines": { 343 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 344 | }, 345 | "funding": { 346 | "url": "https://opencollective.com/libvips" 347 | } 348 | }, 349 | "node_modules/@img/sharp-win32-ia32": { 350 | "version": "0.33.5", 351 | "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz", 352 | "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==", 353 | "cpu": [ 354 | "ia32" 355 | ], 356 | "optional": true, 357 | "os": [ 358 | "win32" 359 | ], 360 | "engines": { 361 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 362 | }, 363 | "funding": { 364 | "url": "https://opencollective.com/libvips" 365 | } 366 | }, 367 | "node_modules/@img/sharp-win32-x64": { 368 | "version": "0.33.5", 369 | "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz", 370 | "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==", 371 | "cpu": [ 372 | "x64" 373 | ], 374 | "optional": true, 375 | "os": [ 376 | "win32" 377 | ], 378 | "engines": { 379 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 380 | }, 381 | "funding": { 382 | "url": "https://opencollective.com/libvips" 383 | } 384 | }, 385 | "node_modules/@next/env": { 386 | "version": "15.1.6", 387 | "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.6.tgz", 388 | "integrity": "sha512-d9AFQVPEYNr+aqokIiPLNK/MTyt3DWa/dpKveiAaVccUadFbhFEvY6FXYX2LJO2Hv7PHnLBu2oWwB4uBuHjr/w==" 389 | }, 390 | "node_modules/@next/swc-darwin-arm64": { 391 | "version": "15.1.6", 392 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.6.tgz", 393 | "integrity": "sha512-u7lg4Mpl9qWpKgy6NzEkz/w0/keEHtOybmIl0ykgItBxEM5mYotS5PmqTpo+Rhg8FiOiWgwr8USxmKQkqLBCrw==", 394 | "cpu": [ 395 | "arm64" 396 | ], 397 | "optional": true, 398 | "os": [ 399 | "darwin" 400 | ], 401 | "engines": { 402 | "node": ">= 10" 403 | } 404 | }, 405 | "node_modules/@next/swc-darwin-x64": { 406 | "version": "15.1.6", 407 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.6.tgz", 408 | "integrity": "sha512-x1jGpbHbZoZ69nRuogGL2MYPLqohlhnT9OCU6E6QFewwup+z+M6r8oU47BTeJcWsF2sdBahp5cKiAcDbwwK/lg==", 409 | "cpu": [ 410 | "x64" 411 | ], 412 | "optional": true, 413 | "os": [ 414 | "darwin" 415 | ], 416 | "engines": { 417 | "node": ">= 10" 418 | } 419 | }, 420 | "node_modules/@next/swc-linux-arm64-gnu": { 421 | "version": "15.1.6", 422 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.6.tgz", 423 | "integrity": "sha512-jar9sFw0XewXsBzPf9runGzoivajeWJUc/JkfbLTC4it9EhU8v7tCRLH7l5Y1ReTMN6zKJO0kKAGqDk8YSO2bg==", 424 | "cpu": [ 425 | "arm64" 426 | ], 427 | "optional": true, 428 | "os": [ 429 | "linux" 430 | ], 431 | "engines": { 432 | "node": ">= 10" 433 | } 434 | }, 435 | "node_modules/@next/swc-linux-arm64-musl": { 436 | "version": "15.1.6", 437 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.6.tgz", 438 | "integrity": "sha512-+n3u//bfsrIaZch4cgOJ3tXCTbSxz0s6brJtU3SzLOvkJlPQMJ+eHVRi6qM2kKKKLuMY+tcau8XD9CJ1OjeSQQ==", 439 | "cpu": [ 440 | "arm64" 441 | ], 442 | "optional": true, 443 | "os": [ 444 | "linux" 445 | ], 446 | "engines": { 447 | "node": ">= 10" 448 | } 449 | }, 450 | "node_modules/@next/swc-linux-x64-gnu": { 451 | "version": "15.1.6", 452 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.6.tgz", 453 | "integrity": "sha512-SpuDEXixM3PycniL4iVCLyUyvcl6Lt0mtv3am08sucskpG0tYkW1KlRhTgj4LI5ehyxriVVcfdoxuuP8csi3kQ==", 454 | "cpu": [ 455 | "x64" 456 | ], 457 | "optional": true, 458 | "os": [ 459 | "linux" 460 | ], 461 | "engines": { 462 | "node": ">= 10" 463 | } 464 | }, 465 | "node_modules/@next/swc-linux-x64-musl": { 466 | "version": "15.1.6", 467 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.6.tgz", 468 | "integrity": "sha512-L4druWmdFSZIIRhF+G60API5sFB7suTbDRhYWSjiw0RbE+15igQvE2g2+S973pMGvwN3guw7cJUjA/TmbPWTHQ==", 469 | "cpu": [ 470 | "x64" 471 | ], 472 | "optional": true, 473 | "os": [ 474 | "linux" 475 | ], 476 | "engines": { 477 | "node": ">= 10" 478 | } 479 | }, 480 | "node_modules/@next/swc-win32-arm64-msvc": { 481 | "version": "15.1.6", 482 | "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.6.tgz", 483 | "integrity": "sha512-s8w6EeqNmi6gdvM19tqKKWbCyOBvXFbndkGHl+c9YrzsLARRdCHsD9S1fMj8gsXm9v8vhC8s3N8rjuC/XrtkEg==", 484 | "cpu": [ 485 | "arm64" 486 | ], 487 | "optional": true, 488 | "os": [ 489 | "win32" 490 | ], 491 | "engines": { 492 | "node": ">= 10" 493 | } 494 | }, 495 | "node_modules/@next/swc-win32-x64-msvc": { 496 | "version": "15.1.6", 497 | "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.6.tgz", 498 | "integrity": "sha512-6xomMuu54FAFxttYr5PJbEfu96godcxBTRk1OhAvJq0/EnmFU/Ybiax30Snis4vdWZ9LGpf7Roy5fSs7v/5ROQ==", 499 | "cpu": [ 500 | "x64" 501 | ], 502 | "optional": true, 503 | "os": [ 504 | "win32" 505 | ], 506 | "engines": { 507 | "node": ">= 10" 508 | } 509 | }, 510 | "node_modules/@swc/counter": { 511 | "version": "0.1.3", 512 | "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", 513 | "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==" 514 | }, 515 | "node_modules/@swc/helpers": { 516 | "version": "0.5.15", 517 | "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", 518 | "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==", 519 | "dependencies": { 520 | "tslib": "^2.8.0" 521 | } 522 | }, 523 | "node_modules/@types/node": { 524 | "version": "18.19.58", 525 | "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.58.tgz", 526 | "integrity": "sha512-2ryJttbOAWCYuZMdk4rmZZ6oqE+GSL5LxbaTVe4PCs0FUrHObZZAQL4ihMw9/cH1Pn8lSQ9TXVhsM4LrnfZ0aA==", 527 | "dev": true, 528 | "dependencies": { 529 | "undici-types": "~5.26.4" 530 | } 531 | }, 532 | "node_modules/@types/node-fetch": { 533 | "version": "2.6.11", 534 | "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz", 535 | "integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==", 536 | "dev": true, 537 | "dependencies": { 538 | "@types/node": "*", 539 | "form-data": "^4.0.0" 540 | } 541 | }, 542 | "node_modules/abort-controller": { 543 | "version": "3.0.0", 544 | "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", 545 | "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", 546 | "dev": true, 547 | "dependencies": { 548 | "event-target-shim": "^5.0.0" 549 | }, 550 | "engines": { 551 | "node": ">=6.5" 552 | } 553 | }, 554 | "node_modules/agentkeepalive": { 555 | "version": "4.5.0", 556 | "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz", 557 | "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==", 558 | "dev": true, 559 | "dependencies": { 560 | "humanize-ms": "^1.2.1" 561 | }, 562 | "engines": { 563 | "node": ">= 8.0.0" 564 | } 565 | }, 566 | "node_modules/argparse": { 567 | "version": "1.0.10", 568 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 569 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 570 | "dependencies": { 571 | "sprintf-js": "~1.0.2" 572 | } 573 | }, 574 | "node_modules/asynckit": { 575 | "version": "0.4.0", 576 | "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", 577 | "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", 578 | "dev": true 579 | }, 580 | "node_modules/busboy": { 581 | "version": "1.6.0", 582 | "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", 583 | "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", 584 | "dependencies": { 585 | "streamsearch": "^1.1.0" 586 | }, 587 | "engines": { 588 | "node": ">=10.16.0" 589 | } 590 | }, 591 | "node_modules/caniuse-lite": { 592 | "version": "1.0.30001607", 593 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001607.tgz", 594 | "integrity": "sha512-WcvhVRjXLKFB/kmOFVwELtMxyhq3iM/MvmXcyCe2PNf166c39mptscOc/45TTS96n2gpNV2z7+NakArTWZCQ3w==", 595 | "funding": [ 596 | { 597 | "type": "opencollective", 598 | "url": "https://opencollective.com/browserslist" 599 | }, 600 | { 601 | "type": "tidelift", 602 | "url": "https://tidelift.com/funding/github/npm/caniuse-lite" 603 | }, 604 | { 605 | "type": "github", 606 | "url": "https://github.com/sponsors/ai" 607 | } 608 | ] 609 | }, 610 | "node_modules/client-only": { 611 | "version": "0.0.1", 612 | "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", 613 | "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" 614 | }, 615 | "node_modules/color": { 616 | "version": "4.2.3", 617 | "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", 618 | "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", 619 | "optional": true, 620 | "dependencies": { 621 | "color-convert": "^2.0.1", 622 | "color-string": "^1.9.0" 623 | }, 624 | "engines": { 625 | "node": ">=12.5.0" 626 | } 627 | }, 628 | "node_modules/color-convert": { 629 | "version": "2.0.1", 630 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", 631 | "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", 632 | "optional": true, 633 | "dependencies": { 634 | "color-name": "~1.1.4" 635 | }, 636 | "engines": { 637 | "node": ">=7.0.0" 638 | } 639 | }, 640 | "node_modules/color-name": { 641 | "version": "1.1.4", 642 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", 643 | "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", 644 | "optional": true 645 | }, 646 | "node_modules/color-string": { 647 | "version": "1.9.1", 648 | "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", 649 | "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", 650 | "optional": true, 651 | "dependencies": { 652 | "color-name": "^1.0.0", 653 | "simple-swizzle": "^0.2.2" 654 | } 655 | }, 656 | "node_modules/combined-stream": { 657 | "version": "1.0.8", 658 | "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", 659 | "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", 660 | "dev": true, 661 | "dependencies": { 662 | "delayed-stream": "~1.0.0" 663 | }, 664 | "engines": { 665 | "node": ">= 0.8" 666 | } 667 | }, 668 | "node_modules/convert-array-to-csv": { 669 | "version": "2.0.0", 670 | "resolved": "https://registry.npmjs.org/convert-array-to-csv/-/convert-array-to-csv-2.0.0.tgz", 671 | "integrity": "sha512-dxUINCt28k6WbXGMoB+AaKjGY0Y6GkKwZmT+kvD4nJgVCOKsnIQ3G6n0v2II1lG4NwXQk6EWZ+pPDub9wcqqMg==", 672 | "dev": true 673 | }, 674 | "node_modules/delayed-stream": { 675 | "version": "1.0.0", 676 | "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", 677 | "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", 678 | "dev": true, 679 | "engines": { 680 | "node": ">=0.4.0" 681 | } 682 | }, 683 | "node_modules/detect-libc": { 684 | "version": "2.0.3", 685 | "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", 686 | "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", 687 | "optional": true, 688 | "engines": { 689 | "node": ">=8" 690 | } 691 | }, 692 | "node_modules/dotenv": { 693 | "version": "16.4.7", 694 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz", 695 | "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==", 696 | "dev": true, 697 | "engines": { 698 | "node": ">=12" 699 | }, 700 | "funding": { 701 | "url": "https://dotenvx.com" 702 | } 703 | }, 704 | "node_modules/esprima": { 705 | "version": "4.0.1", 706 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", 707 | "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", 708 | "bin": { 709 | "esparse": "bin/esparse.js", 710 | "esvalidate": "bin/esvalidate.js" 711 | }, 712 | "engines": { 713 | "node": ">=4" 714 | } 715 | }, 716 | "node_modules/event-target-shim": { 717 | "version": "5.0.1", 718 | "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz", 719 | "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==", 720 | "dev": true, 721 | "engines": { 722 | "node": ">=6" 723 | } 724 | }, 725 | "node_modules/extend-shallow": { 726 | "version": "2.0.1", 727 | "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", 728 | "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==", 729 | "dependencies": { 730 | "is-extendable": "^0.1.0" 731 | }, 732 | "engines": { 733 | "node": ">=0.10.0" 734 | } 735 | }, 736 | "node_modules/form-data": { 737 | "version": "4.0.1", 738 | "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", 739 | "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", 740 | "dev": true, 741 | "dependencies": { 742 | "asynckit": "^0.4.0", 743 | "combined-stream": "^1.0.8", 744 | "mime-types": "^2.1.12" 745 | }, 746 | "engines": { 747 | "node": ">= 6" 748 | } 749 | }, 750 | "node_modules/form-data-encoder": { 751 | "version": "1.7.2", 752 | "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz", 753 | "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==", 754 | "dev": true 755 | }, 756 | "node_modules/formdata-node": { 757 | "version": "4.4.1", 758 | "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz", 759 | "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==", 760 | "dev": true, 761 | "dependencies": { 762 | "node-domexception": "1.0.0", 763 | "web-streams-polyfill": "4.0.0-beta.3" 764 | }, 765 | "engines": { 766 | "node": ">= 12.20" 767 | } 768 | }, 769 | "node_modules/gray-matter": { 770 | "version": "4.0.3", 771 | "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz", 772 | "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==", 773 | "dependencies": { 774 | "js-yaml": "^3.13.1", 775 | "kind-of": "^6.0.2", 776 | "section-matter": "^1.0.0", 777 | "strip-bom-string": "^1.0.0" 778 | }, 779 | "engines": { 780 | "node": ">=6.0" 781 | } 782 | }, 783 | "node_modules/highlight.js": { 784 | "version": "11.11.1", 785 | "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz", 786 | "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==", 787 | "engines": { 788 | "node": ">=12.0.0" 789 | } 790 | }, 791 | "node_modules/humanize-ms": { 792 | "version": "1.2.1", 793 | "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", 794 | "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", 795 | "dev": true, 796 | "dependencies": { 797 | "ms": "^2.0.0" 798 | } 799 | }, 800 | "node_modules/is-arrayish": { 801 | "version": "0.3.2", 802 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", 803 | "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", 804 | "optional": true 805 | }, 806 | "node_modules/is-extendable": { 807 | "version": "0.1.1", 808 | "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", 809 | "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==", 810 | "engines": { 811 | "node": ">=0.10.0" 812 | } 813 | }, 814 | "node_modules/js-yaml": { 815 | "version": "3.14.1", 816 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", 817 | "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", 818 | "dependencies": { 819 | "argparse": "^1.0.7", 820 | "esprima": "^4.0.0" 821 | }, 822 | "bin": { 823 | "js-yaml": "bin/js-yaml.js" 824 | } 825 | }, 826 | "node_modules/kind-of": { 827 | "version": "6.0.3", 828 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", 829 | "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", 830 | "engines": { 831 | "node": ">=0.10.0" 832 | } 833 | }, 834 | "node_modules/marked": { 835 | "version": "15.0.6", 836 | "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.6.tgz", 837 | "integrity": "sha512-Y07CUOE+HQXbVDCGl3LXggqJDbXDP2pArc2C1N1RRMN0ONiShoSsIInMd5Gsxupe7fKLpgimTV+HOJ9r7bA+pg==", 838 | "bin": { 839 | "marked": "bin/marked.js" 840 | }, 841 | "engines": { 842 | "node": ">= 18" 843 | } 844 | }, 845 | "node_modules/marked-highlight": { 846 | "version": "2.2.1", 847 | "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.2.1.tgz", 848 | "integrity": "sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==", 849 | "peerDependencies": { 850 | "marked": ">=4 <16" 851 | } 852 | }, 853 | "node_modules/mime-db": { 854 | "version": "1.52.0", 855 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", 856 | "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", 857 | "dev": true, 858 | "engines": { 859 | "node": ">= 0.6" 860 | } 861 | }, 862 | "node_modules/mime-types": { 863 | "version": "2.1.35", 864 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", 865 | "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", 866 | "dev": true, 867 | "dependencies": { 868 | "mime-db": "1.52.0" 869 | }, 870 | "engines": { 871 | "node": ">= 0.6" 872 | } 873 | }, 874 | "node_modules/ms": { 875 | "version": "2.1.3", 876 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", 877 | "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", 878 | "dev": true 879 | }, 880 | "node_modules/nanoid": { 881 | "version": "3.3.8", 882 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", 883 | "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", 884 | "funding": [ 885 | { 886 | "type": "github", 887 | "url": "https://github.com/sponsors/ai" 888 | } 889 | ], 890 | "bin": { 891 | "nanoid": "bin/nanoid.cjs" 892 | }, 893 | "engines": { 894 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 895 | } 896 | }, 897 | "node_modules/next": { 898 | "version": "15.1.6", 899 | "resolved": "https://registry.npmjs.org/next/-/next-15.1.6.tgz", 900 | "integrity": "sha512-Hch4wzbaX0vKQtalpXvUiw5sYivBy4cm5rzUKrBnUB/y436LGrvOUqYvlSeNVCWFO/770gDlltR9gqZH62ct4Q==", 901 | "dependencies": { 902 | "@next/env": "15.1.6", 903 | "@swc/counter": "0.1.3", 904 | "@swc/helpers": "0.5.15", 905 | "busboy": "1.6.0", 906 | "caniuse-lite": "^1.0.30001579", 907 | "postcss": "8.4.31", 908 | "styled-jsx": "5.1.6" 909 | }, 910 | "bin": { 911 | "next": "dist/bin/next" 912 | }, 913 | "engines": { 914 | "node": "^18.18.0 || ^19.8.0 || >= 20.0.0" 915 | }, 916 | "optionalDependencies": { 917 | "@next/swc-darwin-arm64": "15.1.6", 918 | "@next/swc-darwin-x64": "15.1.6", 919 | "@next/swc-linux-arm64-gnu": "15.1.6", 920 | "@next/swc-linux-arm64-musl": "15.1.6", 921 | "@next/swc-linux-x64-gnu": "15.1.6", 922 | "@next/swc-linux-x64-musl": "15.1.6", 923 | "@next/swc-win32-arm64-msvc": "15.1.6", 924 | "@next/swc-win32-x64-msvc": "15.1.6", 925 | "sharp": "^0.33.5" 926 | }, 927 | "peerDependencies": { 928 | "@opentelemetry/api": "^1.1.0", 929 | "@playwright/test": "^1.41.2", 930 | "babel-plugin-react-compiler": "*", 931 | "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", 932 | "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", 933 | "sass": "^1.3.0" 934 | }, 935 | "peerDependenciesMeta": { 936 | "@opentelemetry/api": { 937 | "optional": true 938 | }, 939 | "@playwright/test": { 940 | "optional": true 941 | }, 942 | "babel-plugin-react-compiler": { 943 | "optional": true 944 | }, 945 | "sass": { 946 | "optional": true 947 | } 948 | } 949 | }, 950 | "node_modules/node-domexception": { 951 | "version": "1.0.0", 952 | "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", 953 | "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", 954 | "dev": true, 955 | "funding": [ 956 | { 957 | "type": "github", 958 | "url": "https://github.com/sponsors/jimmywarting" 959 | }, 960 | { 961 | "type": "github", 962 | "url": "https://paypal.me/jimmywarting" 963 | } 964 | ], 965 | "engines": { 966 | "node": ">=10.5.0" 967 | } 968 | }, 969 | "node_modules/node-fetch": { 970 | "version": "2.7.0", 971 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", 972 | "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", 973 | "dev": true, 974 | "dependencies": { 975 | "whatwg-url": "^5.0.0" 976 | }, 977 | "engines": { 978 | "node": "4.x || >=6.0.0" 979 | }, 980 | "peerDependencies": { 981 | "encoding": "^0.1.0" 982 | }, 983 | "peerDependenciesMeta": { 984 | "encoding": { 985 | "optional": true 986 | } 987 | } 988 | }, 989 | "node_modules/openai": { 990 | "version": "4.80.1", 991 | "resolved": "https://registry.npmjs.org/openai/-/openai-4.80.1.tgz", 992 | "integrity": "sha512-+6+bbXFwbIE88foZsBEt36bPkgZPdyFN82clAXG61gnHb2gXdZApDyRrcAHqEtpYICywpqaNo57kOm9dtnb7Cw==", 993 | "dev": true, 994 | "dependencies": { 995 | "@types/node": "^18.11.18", 996 | "@types/node-fetch": "^2.6.4", 997 | "abort-controller": "^3.0.0", 998 | "agentkeepalive": "^4.2.1", 999 | "form-data-encoder": "1.7.2", 1000 | "formdata-node": "^4.3.2", 1001 | "node-fetch": "^2.6.7" 1002 | }, 1003 | "bin": { 1004 | "openai": "bin/cli" 1005 | }, 1006 | "peerDependencies": { 1007 | "ws": "^8.18.0", 1008 | "zod": "^3.23.8" 1009 | }, 1010 | "peerDependenciesMeta": { 1011 | "ws": { 1012 | "optional": true 1013 | }, 1014 | "zod": { 1015 | "optional": true 1016 | } 1017 | } 1018 | }, 1019 | "node_modules/picocolors": { 1020 | "version": "1.0.0", 1021 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 1022 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 1023 | }, 1024 | "node_modules/postcss": { 1025 | "version": "8.4.31", 1026 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", 1027 | "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", 1028 | "funding": [ 1029 | { 1030 | "type": "opencollective", 1031 | "url": "https://opencollective.com/postcss/" 1032 | }, 1033 | { 1034 | "type": "tidelift", 1035 | "url": "https://tidelift.com/funding/github/npm/postcss" 1036 | }, 1037 | { 1038 | "type": "github", 1039 | "url": "https://github.com/sponsors/ai" 1040 | } 1041 | ], 1042 | "dependencies": { 1043 | "nanoid": "^3.3.6", 1044 | "picocolors": "^1.0.0", 1045 | "source-map-js": "^1.0.2" 1046 | }, 1047 | "engines": { 1048 | "node": "^10 || ^12 || >=14" 1049 | } 1050 | }, 1051 | "node_modules/react": { 1052 | "version": "19.0.0", 1053 | "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz", 1054 | "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==", 1055 | "engines": { 1056 | "node": ">=0.10.0" 1057 | } 1058 | }, 1059 | "node_modules/react-dom": { 1060 | "version": "19.0.0", 1061 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", 1062 | "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", 1063 | "dependencies": { 1064 | "scheduler": "^0.25.0" 1065 | }, 1066 | "peerDependencies": { 1067 | "react": "^19.0.0" 1068 | } 1069 | }, 1070 | "node_modules/scheduler": { 1071 | "version": "0.25.0", 1072 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", 1073 | "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==" 1074 | }, 1075 | "node_modules/section-matter": { 1076 | "version": "1.0.0", 1077 | "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", 1078 | "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==", 1079 | "dependencies": { 1080 | "extend-shallow": "^2.0.1", 1081 | "kind-of": "^6.0.0" 1082 | }, 1083 | "engines": { 1084 | "node": ">=4" 1085 | } 1086 | }, 1087 | "node_modules/semver": { 1088 | "version": "7.6.3", 1089 | "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", 1090 | "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", 1091 | "optional": true, 1092 | "bin": { 1093 | "semver": "bin/semver.js" 1094 | }, 1095 | "engines": { 1096 | "node": ">=10" 1097 | } 1098 | }, 1099 | "node_modules/sharp": { 1100 | "version": "0.33.5", 1101 | "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz", 1102 | "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==", 1103 | "hasInstallScript": true, 1104 | "optional": true, 1105 | "dependencies": { 1106 | "color": "^4.2.3", 1107 | "detect-libc": "^2.0.3", 1108 | "semver": "^7.6.3" 1109 | }, 1110 | "engines": { 1111 | "node": "^18.17.0 || ^20.3.0 || >=21.0.0" 1112 | }, 1113 | "funding": { 1114 | "url": "https://opencollective.com/libvips" 1115 | }, 1116 | "optionalDependencies": { 1117 | "@img/sharp-darwin-arm64": "0.33.5", 1118 | "@img/sharp-darwin-x64": "0.33.5", 1119 | "@img/sharp-libvips-darwin-arm64": "1.0.4", 1120 | "@img/sharp-libvips-darwin-x64": "1.0.4", 1121 | "@img/sharp-libvips-linux-arm": "1.0.5", 1122 | "@img/sharp-libvips-linux-arm64": "1.0.4", 1123 | "@img/sharp-libvips-linux-s390x": "1.0.4", 1124 | "@img/sharp-libvips-linux-x64": "1.0.4", 1125 | "@img/sharp-libvips-linuxmusl-arm64": "1.0.4", 1126 | "@img/sharp-libvips-linuxmusl-x64": "1.0.4", 1127 | "@img/sharp-linux-arm": "0.33.5", 1128 | "@img/sharp-linux-arm64": "0.33.5", 1129 | "@img/sharp-linux-s390x": "0.33.5", 1130 | "@img/sharp-linux-x64": "0.33.5", 1131 | "@img/sharp-linuxmusl-arm64": "0.33.5", 1132 | "@img/sharp-linuxmusl-x64": "0.33.5", 1133 | "@img/sharp-wasm32": "0.33.5", 1134 | "@img/sharp-win32-ia32": "0.33.5", 1135 | "@img/sharp-win32-x64": "0.33.5" 1136 | } 1137 | }, 1138 | "node_modules/simple-swizzle": { 1139 | "version": "0.2.2", 1140 | "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", 1141 | "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", 1142 | "optional": true, 1143 | "dependencies": { 1144 | "is-arrayish": "^0.3.1" 1145 | } 1146 | }, 1147 | "node_modules/source-map-js": { 1148 | "version": "1.2.0", 1149 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", 1150 | "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", 1151 | "engines": { 1152 | "node": ">=0.10.0" 1153 | } 1154 | }, 1155 | "node_modules/sprintf-js": { 1156 | "version": "1.0.3", 1157 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 1158 | "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" 1159 | }, 1160 | "node_modules/streamsearch": { 1161 | "version": "1.1.0", 1162 | "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", 1163 | "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", 1164 | "engines": { 1165 | "node": ">=10.0.0" 1166 | } 1167 | }, 1168 | "node_modules/strip-bom-string": { 1169 | "version": "1.0.0", 1170 | "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", 1171 | "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==", 1172 | "engines": { 1173 | "node": ">=0.10.0" 1174 | } 1175 | }, 1176 | "node_modules/styled-jsx": { 1177 | "version": "5.1.6", 1178 | "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz", 1179 | "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==", 1180 | "dependencies": { 1181 | "client-only": "0.0.1" 1182 | }, 1183 | "engines": { 1184 | "node": ">= 12.0.0" 1185 | }, 1186 | "peerDependencies": { 1187 | "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" 1188 | }, 1189 | "peerDependenciesMeta": { 1190 | "@babel/core": { 1191 | "optional": true 1192 | }, 1193 | "babel-plugin-macros": { 1194 | "optional": true 1195 | } 1196 | } 1197 | }, 1198 | "node_modules/title-case": { 1199 | "version": "4.3.2", 1200 | "resolved": "https://registry.npmjs.org/title-case/-/title-case-4.3.2.tgz", 1201 | "integrity": "sha512-I/nkcBo73mO42Idfv08jhInV61IMb61OdIFxk+B4Gu1oBjWBPOLmhZdsli+oJCVaD+86pYQA93cJfFt224ZFAA==" 1202 | }, 1203 | "node_modules/tr46": { 1204 | "version": "0.0.3", 1205 | "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", 1206 | "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", 1207 | "dev": true 1208 | }, 1209 | "node_modules/tslib": { 1210 | "version": "2.8.1", 1211 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", 1212 | "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" 1213 | }, 1214 | "node_modules/undici-types": { 1215 | "version": "5.26.5", 1216 | "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", 1217 | "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", 1218 | "dev": true 1219 | }, 1220 | "node_modules/web-streams-polyfill": { 1221 | "version": "4.0.0-beta.3", 1222 | "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz", 1223 | "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==", 1224 | "dev": true, 1225 | "engines": { 1226 | "node": ">= 14" 1227 | } 1228 | }, 1229 | "node_modules/webidl-conversions": { 1230 | "version": "3.0.1", 1231 | "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", 1232 | "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", 1233 | "dev": true 1234 | }, 1235 | "node_modules/whatwg-url": { 1236 | "version": "5.0.0", 1237 | "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", 1238 | "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", 1239 | "dev": true, 1240 | "dependencies": { 1241 | "tr46": "~0.0.3", 1242 | "webidl-conversions": "^3.0.0" 1243 | } 1244 | }, 1245 | "node_modules/zod": { 1246 | "version": "3.24.1", 1247 | "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz", 1248 | "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==", 1249 | "dev": true, 1250 | "funding": { 1251 | "url": "https://github.com/sponsors/colinhacks" 1252 | } 1253 | } 1254 | } 1255 | } 1256 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "license": "(CC-BY-NC-4.0 OR Apache-2.0)", 5 | "author": "Brian Holt ", 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build && npm run csv", 9 | "start": "next start", 10 | "csv": "node csv/index.js", 11 | "seo": "node summary/index.js" 12 | }, 13 | "dependencies": { 14 | "@fortawesome/fontawesome-free": "^6.7.2", 15 | "gray-matter": "^4.0.3", 16 | "highlight.js": "^11.11.1", 17 | "marked": "^15.0.6", 18 | "marked-highlight": "^2.2.1", 19 | "next": "^15.1.6", 20 | "react": "^19.0.0", 21 | "react-dom": "^19.0.0", 22 | "title-case": "^4.3.2" 23 | }, 24 | "devDependencies": { 25 | "convert-array-to-csv": "^2.0.0", 26 | "dotenv": "^16.4.7", 27 | "openai": "^4.80.1", 28 | "zod": "^3.24.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import "@fortawesome/fontawesome-free/css/all.css"; 3 | 4 | import "highlight.js/styles/a11y-light.css"; 5 | import "../styles/variables.css"; 6 | import "../styles/footer.css"; 7 | import "../styles/courses.css"; 8 | 9 | import Layout from "../components/layout"; 10 | 11 | export default function App({ Component, pageProps }) { 12 | return ( 13 | 14 | 15 | 20 | 26 | 32 | 38 | 43 | 44 | 45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Link from "next/link"; 3 | 4 | import { getLessons } from "../data/lesson"; 5 | 6 | import Corner from "../components/corner"; 7 | import getCourseConfig from "../data/course"; 8 | 9 | export default function Lessons({ sections }) { 10 | const courseInfo = getCourseConfig(); 11 | return ( 12 | <> 13 | 14 | {courseInfo.title} 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |

{courseInfo.title}

30 |

{courseInfo.subtitle}

31 |
32 |
33 | author image 38 |
39 |
40 |
{courseInfo.author.name}
41 |
{courseInfo.author.company}
42 |
43 |
44 |
45 |
46 |
47 | course icon 51 |
52 |
53 | {courseInfo.frontendMastersLink ? ( 54 | 55 | Watch on Frontend Masters 56 | 57 | ) : null} 58 |
59 |

Table of Contents

60 |
61 |
    62 | {sections.map((section) => ( 63 |
  1. 64 |
    65 |
    66 | 67 |
    68 |
    69 |

    {section.title}

    70 |
      71 | {section.lessons.map((lesson) => ( 72 |
    1. 73 | {lesson.title} 74 |
      2. 75 | ))} 76 |
    77 |
    78 | 79 |
    80 |
    2. 81 | ))} 82 |
83 |
84 |
85 |
86 | 87 | ); 88 | } 89 | 90 | export async function getStaticProps() { 91 | const sections = await getLessons(); 92 | return { 93 | props: { 94 | sections, 95 | }, 96 | }; 97 | } 98 | -------------------------------------------------------------------------------- /pages/lessons/[section]/[slug].js: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect } from "react"; 2 | import Head from "next/head"; 3 | import { getLesson, getLessons } from "../../../data/lesson"; 4 | import getCourseConfig from "../../../data/course"; 5 | import Corner from "../../../components/corner"; 6 | import { Context } from "../../../context/headerContext"; 7 | import createCopyCodeFunctionality from "../../../data/copyCode"; 8 | 9 | export default function LessonSlug({ post }) { 10 | const courseInfo = getCourseConfig(); 11 | const [_, setHeader] = useContext(Context); 12 | 13 | useEffect(() => { 14 | setHeader({ 15 | section: post.section, 16 | title: post.title, 17 | icon: post.icon, 18 | }); 19 | let elementsToClean = createCopyCodeFunctionality(); 20 | return () => { 21 | setHeader({}); 22 | elementsToClean = []; 23 | } 24 | }, []); 25 | 26 | const title = post.title 27 | ? `${post.title} – ${courseInfo.title}` 28 | : courseInfo.title; 29 | const description = post.attributes.description 30 | ? post.attributes.description 31 | : courseInfo.description; 32 | 33 | const keywords = post.attributes.keywords 34 | ? post.attributes.keywords 35 | : courseInfo.keywords; 36 | 37 | return ( 38 | <> 39 | 40 | {title} 41 | 42 | 43 | 44 | 45 | 49 | 50 | 51 |
52 |
53 |
57 |
58 | {post.prevSlug ? ( 59 | 60 | ← Previous 61 | 62 | ) : null} 63 | {post.nextSlug ? ( 64 | 65 | Next → 66 | 67 | ) : null} 68 |
69 |
70 | 71 |
72 | 73 | ); 74 | } 75 | 76 | export async function getStaticProps({ params }) { 77 | const post = await getLesson(params.section, params.slug); 78 | return { 79 | props: { 80 | post, 81 | }, 82 | }; 83 | } 84 | 85 | export async function getStaticPaths() { 86 | const sections = await getLessons(); 87 | const lessons = sections.map((section) => section.lessons); 88 | const slugs = lessons.flat().map((lesson) => lesson.fullSlug); 89 | 90 | return { paths: slugs, fallback: false }; 91 | } 92 | -------------------------------------------------------------------------------- /public/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/.nojekyll -------------------------------------------------------------------------------- /public/images/BRAND-WHearts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/BRAND-WHearts.png -------------------------------------------------------------------------------- /public/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/apple-touch-icon.png -------------------------------------------------------------------------------- /public/images/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/author.jpg -------------------------------------------------------------------------------- /public/images/course-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/course-icon.png -------------------------------------------------------------------------------- /public/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/favicon-16x16.png -------------------------------------------------------------------------------- /public/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/favicon-32x32.png -------------------------------------------------------------------------------- /public/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/favicon.ico -------------------------------------------------------------------------------- /public/images/social-share-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/next-course-starter/fab9a7d9616bb6b5fe3baf26e5ad6ef20e477dbf/public/images/social-share-cover.jpg -------------------------------------------------------------------------------- /styles/courses.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"); 2 | 3 | /* mini css reset */ 4 | html { 5 | font-size: 16px; 6 | } 7 | 8 | body, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6 { 15 | margin: 0; 16 | padding: 0; 17 | font-weight: normal; 18 | } 19 | 20 | img { 21 | max-width: 100%; 22 | height: auto; 23 | } 24 | 25 | * { 26 | box-sizing: border-box; 27 | } 28 | 29 | body { 30 | font-family: "Open Sans"; 31 | background: linear-gradient(90deg, var(--bg-main) 15px, transparent 1%) center, 32 | linear-gradient(var(--bg-main) 15px, transparent 1%) center, var(--bg-dots); 33 | background-size: 16px 16px; 34 | margin: 0; 35 | } 36 | 37 | a { 38 | color: var(--text-links); 39 | text-decoration: none; 40 | } 41 | 42 | .navbar { 43 | border-bottom: 1px solid #ccc; 44 | position: fixed; 45 | width: 100%; 46 | top: 0; 47 | z-index: 10; 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | background-color: var(--bg-main); 52 | padding: 10px; 53 | } 54 | 55 | .navbar h1 { 56 | font-size: 20px; 57 | margin: inherit; 58 | padding: inherit; 59 | font-weight: bold; 60 | color: var(--text-main); 61 | } 62 | 63 | .navbar h2 { 64 | font-size: 14px; 65 | margin: inherit; 66 | margin-left: 15px; 67 | padding: inherit; 68 | text-transform: uppercase; 69 | } 70 | 71 | .navbar-info { 72 | display: flex; 73 | flex-direction: row; 74 | align-items: center; 75 | justify-content: center; 76 | color: var(--lesson-text); 77 | } 78 | 79 | header .cta-btn { 80 | display: none; /* only displays at large screen sizes */ 81 | } 82 | 83 | .main .cta-btn { 84 | width: 90%; 85 | margin: 20px auto 0px auto; 86 | max-width: 500px; 87 | padding: 12px 20px; 88 | } 89 | 90 | .cta-btn { 91 | border-radius: 10px; 92 | background: var(--nav-buttons); 93 | color: var(--nav-buttons-text); 94 | padding: 7px 20px; 95 | display: flex; 96 | justify-content: center; 97 | align-items: center; 98 | } 99 | 100 | .jumbotron { 101 | padding: 0; 102 | } 103 | 104 | .jumbotron .courseInfo, 105 | .jumbotron .courseIcon { 106 | padding: 20px; 107 | } 108 | 109 | .jumbotron .courseInfo, 110 | .jumbotron .courseIcon { 111 | text-align: center; 112 | } 113 | 114 | .author { 115 | margin-top: 40px; 116 | display: flex; 117 | justify-content: center; 118 | } 119 | 120 | @media (min-width: 1000px) { 121 | header .cta-btn { 122 | display: flex; 123 | } 124 | 125 | .main .cta-btn { 126 | display: none; 127 | } 128 | 129 | .jumbotron { 130 | display: flex; 131 | width: 100%; 132 | min-height: 45vh; 133 | } 134 | .jumbotron .courseInfo, 135 | .jumbotron .courseIcon { 136 | display: flex; 137 | justify-content: center; 138 | align-items: center; 139 | } 140 | .jumbotron .courseInfo { 141 | width: 65%; 142 | text-align: right; 143 | } 144 | .jumbotron .courseIcon { 145 | width: 35%; 146 | display: flex; 147 | align-items: center; 148 | justify-content: center; 149 | } 150 | 151 | .author { 152 | justify-content: flex-end; 153 | } 154 | .jumbotron .courseInfo-inner { 155 | max-width: 85%; 156 | } 157 | } 158 | 159 | .jumbotron h1, 160 | .jumbotron h2 { 161 | color: var(--text-main-headers); 162 | } 163 | 164 | .jumbotron h1 { 165 | font-size: 50px; 166 | margin-bottom: 20px; 167 | } 168 | 169 | .jumbotron .courseInfo { 170 | background: var(--primary); 171 | } 172 | 173 | .jumbotron .courseIcon { 174 | background: var(--secondary); 175 | } 176 | 177 | .jumbotron .courseIcon img { 178 | max-width: 180px; 179 | } 180 | 181 | .author .info { 182 | padding: 10px; 183 | } 184 | 185 | .author .name { 186 | font-size: 18px; 187 | font-weight: bold; 188 | color: var(--text-main-headers); 189 | } 190 | 191 | .author .company { 192 | color: var(--text-main-headers); 193 | font-size: 16px; 194 | } 195 | 196 | .author .image { 197 | border-radius: 75px; 198 | overflow: hidden; 199 | height: 75px; 200 | width: 75px; 201 | } 202 | 203 | .navbar-brand.navbar-brand a { 204 | text-transform: uppercase; 205 | font-weight: bold; 206 | color: var(--text-main-headers); 207 | } 208 | 209 | .lesson-section-title { 210 | color: var(--text-main-headers); 211 | } 212 | 213 | .lesson-container { 214 | position: relative; 215 | max-width: 900px; 216 | margin: 0 auto 45px auto; 217 | padding: 10px 40px; 218 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 219 | background-color: var(--bg-lesson); 220 | border-radius: 5px; 221 | margin-top: 40px; 222 | } 223 | 224 | .lesson { 225 | margin: 15px; 226 | padding: 15px; 227 | border-radius: 8px; 228 | } 229 | 230 | .lesson > h1 { 231 | color: var(--text-header); 232 | font-size: 24px; 233 | } 234 | 235 | .lesson h2 { 236 | font-size: 24px; 237 | margin-top: 20px; 238 | margin-bottom: 10px; 239 | } 240 | 241 | .lesson h2::after { 242 | content: ""; 243 | display: block; 244 | height: 3px; 245 | margin-top: 5px; 246 | background: var(--text-header); 247 | max-width: 300px; 248 | } 249 | 250 | .lesson p { 251 | clear: both; 252 | } 253 | 254 | .lesson p, 255 | .lesson li { 256 | line-height: 180%; 257 | } 258 | 259 | .lesson-links { 260 | font-size: 18px; 261 | padding: 15px 0; 262 | } 263 | 264 | .lesson li li { 265 | margin-left: 25px; 266 | } 267 | 268 | .next { 269 | float: right; 270 | } 271 | 272 | .prev { 273 | float: left; 274 | } 275 | 276 | .lesson-title { 277 | text-transform: uppercase; 278 | font-weight: bold; 279 | } 280 | 281 | .gatsby-highlight { 282 | padding: 4px; 283 | border-radius: 4px; 284 | display: flex; 285 | justify-content: space-between; 286 | flex-direction: column; 287 | align-items: stretch; 288 | } 289 | 290 | .lesson-content td { 291 | border: 1px solid var(--lesson-text); 292 | padding: 8px; 293 | } 294 | 295 | .lesson-content td input { 296 | min-width: 300px; 297 | } 298 | 299 | .lesson-content img { 300 | margin: 5px auto; 301 | display: block; 302 | } 303 | 304 | .lesson-flex { 305 | display: flex; 306 | flex-direction: column; 307 | justify-content: center; 308 | align-items: center; 309 | } 310 | 311 | .random-tweet { 312 | width: 100%; 313 | margin-top: 90px; 314 | } 315 | 316 | .fem-link { 317 | text-align: center; 318 | } 319 | 320 | .content-container { 321 | display: flex; 322 | flex-direction: column; 323 | justify-content: space-between; 324 | min-height: 100vh; 325 | padding-top: 50px; 326 | } 327 | 328 | blockquote { 329 | padding: 15px; 330 | background-color: var(--emphasized-bg); 331 | border: 2px solid var(--emphasized-border); 332 | border-radius: 5px; 333 | width: 100%; 334 | margin: 10px 0; 335 | } 336 | 337 | blockquote > *:last-child { 338 | margin-bottom: 0; 339 | } 340 | 341 | .lesson-content img { 342 | max-width: 100%; 343 | } 344 | 345 | .main-card { 346 | max-width: 900px; 347 | margin: 0 auto; 348 | overflow: hidden; 349 | } 350 | 351 | .lesson-title { 352 | font-size: 20px; 353 | padding: 15px 30px; 354 | } 355 | 356 | .lesson-content { 357 | line-height: 1.5; 358 | color: var(--lesson-text); 359 | } 360 | 361 | .lesson-text { 362 | width: 100%; 363 | padding: 25px 5px 25px 35px; 364 | min-height: 200px 365 | } 366 | 367 | .sections-name { 368 | margin: 0; 369 | padding: 0; 370 | } 371 | 372 | ol.sections-name { 373 | counter-reset: my-awesome-counter; 374 | list-style: none; 375 | padding-left: 40px; 376 | width: 98%; 377 | margin: 0; 378 | padding: 0; 379 | } 380 | 381 | ol.sections-name > li { 382 | counter-increment: my-awesome-counter; 383 | display: flex; 384 | flex-direction: row; 385 | flex-wrap: wrap; 386 | margin-bottom: 35px; 387 | width: 100%; 388 | box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2); 389 | border-bottom-right-radius: 5px; 390 | border-top-right-radius: 5px; 391 | } 392 | ol.sections-name .lesson-preface { 393 | color: var(--icons); 394 | display: flex; 395 | position: relative; 396 | align-items: center; 397 | justify-content: center; 398 | background: var(--secondary); 399 | font-size: 100px; 400 | padding: 25px; 401 | width: 40%; 402 | } 403 | 404 | .lesson-preface.lesson-preface > svg { 405 | width: 80%; 406 | height: inherit; 407 | max-height: 100px; 408 | } 409 | 410 | ol.sections-name .lesson-preface::before { 411 | content: counter(my-awesome-counter); 412 | position: absolute; 413 | top: 0; 414 | left: 5px; 415 | font-size: 20px; 416 | font-weight: bold; 417 | color: var(--icons); 418 | } 419 | 420 | ol.sections-name .lesson-details { 421 | display: flex; 422 | flex-basis: 100%; 423 | flex: 1; 424 | background: var(--bg-lesson); 425 | position: relative; 426 | } 427 | 428 | .details-bg { 429 | --corner-fill: var(--corner-inactive); 430 | transition: fill 0.25s; 431 | width: 10%; 432 | height: 0; 433 | padding-bottom: 10%; 434 | background-size: cover; 435 | background-repeat: no-repeat; 436 | position: absolute; 437 | top: 0; 438 | right: 0; 439 | } 440 | 441 | .details-bg > svg { 442 | width: 100%; 443 | height: auto; 444 | } 445 | 446 | .details-bg > svg path { 447 | transition: fill 0.25s; 448 | } 449 | 450 | .lesson-details:hover .details-bg, 451 | .lesson-container .details-bg { 452 | --corner-fill: var(--corner-active); 453 | } 454 | 455 | @media (min-width: 1000px) { 456 | ol.sections-name > li::before { 457 | border-bottom-left-radius: 5px; 458 | border-top-left-radius: 5px; 459 | } 460 | ol.sections-name .lesson-details { 461 | border-bottom-right-radius: 5px; 462 | border-top-right-radius: 5px; 463 | } 464 | } 465 | 466 | @media (max-width: 600px) { 467 | .lesson-container { 468 | padding: 2px; 469 | } 470 | 471 | ol.sections-name .lesson-preface { 472 | font-size:60px 473 | } 474 | } 475 | 476 | .lesson-details h3 { 477 | font-size: 22px; 478 | border-bottom: 1px solid var(--less); 479 | padding-bottom: 10px; 480 | display: inline-block; 481 | font-weight: bold; 482 | margin-bottom: 20px; 483 | } 484 | 485 | .lesson-links { 486 | margin-top: 45px; 487 | margin-bottom: 80px; 488 | } 489 | 490 | .lesson-links a { 491 | border-radius: 10px; 492 | background: var(--nav-buttons); 493 | color: var(--nav-buttons-text); 494 | padding: 15px 20px; 495 | display: inline-block; 496 | display: flex; 497 | justify-content: center; 498 | align-items: center; 499 | } 500 | 501 | .lesson-links a.prev { 502 | padding-left: 10px; 503 | } 504 | 505 | .lesson-links a.next { 506 | padding-right: 10px; 507 | } 508 | 509 | .cta-btn:hover, 510 | .lesson-links a:hover { 511 | background: #152837; 512 | color: var(--nav-buttons-text-hover); 513 | text-decoration: none; 514 | } 515 | 516 | .lesson-links .arrow { 517 | font-size: 24px; 518 | line-height: 24px; 519 | padding: 0px 5px; 520 | } 521 | 522 | code, 523 | pre code { 524 | padding: .5rem; 525 | } 526 | 527 | code, 528 | pre code, 529 | pre code.hljs { 530 | background-color: var(--emphasized-bg); 531 | color: #000; 532 | } 533 | 534 | pre code, 535 | pre code.hljs { 536 | display: block; 537 | } 538 | 539 | pre { 540 | position: relative; 541 | } 542 | 543 | .div-copy { 544 | position: absolute; 545 | top: 0; 546 | right: 0; 547 | } 548 | 549 | .div-copy .tooltip-copy::after { 550 | content: ""; 551 | position: absolute; 552 | right: 100%; 553 | margin-right: -4px; 554 | top: 60%; 555 | transform: translateY(-50%); 556 | border-style: solid; 557 | border-width: 2px 2px 5px 8px; 558 | border-color: transparent transparent transparent #444; 559 | opacity: 0; 560 | transition: opacity .3s; 561 | } 562 | 563 | .div-copy .tooltip-copy::before { 564 | content: "Copied"; 565 | position: absolute; 566 | top: 60%; 567 | transform: translateY(-50%); 568 | right: 100%; 569 | margin-right: 5px; 570 | padding: 2px 7px; 571 | border-radius: 5px; 572 | background: #444; 573 | color: #fff; 574 | text-align: center; 575 | opacity: 0; 576 | transition: opacity .3s; 577 | } 578 | 579 | .div-copy .tooltip-copy { 580 | margin-right: 0.3em; 581 | margin-top: 0.3em; 582 | } 583 | 584 | .div-copy.clicked .tooltip-copy::before, .div-copy.clicked .tooltip-copy::after { 585 | opacity: 1; 586 | } 587 | -------------------------------------------------------------------------------- /styles/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | padding: 50px 15px; 4 | background-color: var(--primary); 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | color: var(--text-footer); 9 | } 10 | 11 | .socials { 12 | display: flex; 13 | align-items: center; 14 | max-width: 900px; 15 | width: 100%; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | .social { 21 | display: inline-block; 22 | list-style: none; 23 | margin-right: 40px; 24 | } 25 | 26 | .social img:hover { 27 | opacity: 0.4; 28 | } 29 | 30 | .social img { 31 | transition: opacity 0.25s; 32 | width: 30px; 33 | } 34 | 35 | .terms { 36 | font-size: 10px; 37 | } 38 | 39 | .terms p { 40 | margin: 3px; 41 | } 42 | 43 | .footer a { 44 | color: inherit; 45 | text-decoration: underline; 46 | } 47 | 48 | .social svg, .theme-icons svg { 49 | transition: opacity 0.25s; 50 | } 51 | 52 | .social svg:hover, .theme-icons svg:hover { 53 | opacity: 0.4; 54 | } 55 | 56 | .theme-toggle { 57 | background: none; 58 | border: none; 59 | padding: 0; 60 | cursor: pointer; 61 | display: inline-flex; 62 | align-items: center; 63 | } -------------------------------------------------------------------------------- /styles/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #dfa067; 3 | --secondary: #93aca7; 4 | --highlight: #224159; 5 | 6 | --lesson-text: rgb(8, 8, 8); 7 | 8 | --text-header: var(--primary); 9 | --text-main-headers: var(--highlight); 10 | --text-links: #007bff; 11 | --text-footer: #333; 12 | 13 | --bg-main: white; 14 | --bg-dots: var(--highlight); 15 | --bg-lesson: white; 16 | 17 | --nav-buttons: var(--highlight); 18 | --nav-buttons-text: white; 19 | --nav-buttons-text-hover: white; 20 | 21 | --corner-active: var(--highlight); 22 | --corner-inactive: #f4f4f4; 23 | --icons: var(--highlight); 24 | --footer-icons: var(--highlight); 25 | 26 | --emphasized-bg: #dce8ff; 27 | --emphasized-border: #aab6d2; 28 | } 29 | 30 | [data-theme="dark"] { 31 | --primary: #224159; 32 | --secondary: #93aca7; 33 | --highlight: #dfa067; 34 | 35 | --text-header: var(--primary); 36 | --text-main-headers: var(--highlight); 37 | --text-links: #ff6f00; 38 | --text-footer: var(--highlight); 39 | 40 | --lesson-text: rgb(218, 218, 218); 41 | 42 | --bg-main: #1f1f1f; 43 | --bg-dots: var(--highlight); 44 | --bg-lesson: #323232; 45 | --nav-buttons: var(--highlight); 46 | --nav-buttons-text: var(--primary); 47 | --nav-buttons-text-hover: var(--highlight); 48 | 49 | --corner-active: var(--highlight); 50 | --corner-inactive: #2a2a2a; 51 | --icons: var(--primary); 52 | --footer-icons: var(--highlight); 53 | 54 | --emphasized-bg: #dce8ff; 55 | --emphasized-border: #5a6c89; 56 | } 57 | 58 | .lesson-title { 59 | color: var(--highlight); 60 | } 61 | 62 | .lesson-section-title { 63 | color: var(--primary); 64 | } 65 | 66 | .terms { 67 | color: var(--highlight); 68 | } 69 | 70 | li { 71 | color: var(--highlight); 72 | } 73 | 74 | -------------------------------------------------------------------------------- /summary/getPrompt.js: -------------------------------------------------------------------------------- 1 | export default function getSystemPrompt(course) { 2 | return ` 3 | Take the following markdown text and summarize it into one to three sentences. Your goal is to have this description accurately describe the content as well as rank as high as possible in Google search results since your response will be used as the OpenGraph description for this markdown document. Where applicable use keywords that people will search for on Google. In addition, give back an array of keywords that can be used as the OpenGraph keywords that people could use to search for this document. Give one to seven keywords. For the markdown doc you can ignore the images. 4 | 5 | Here is general metadata for the course. Reference it as necessary. Always reference the author's name. 6 | 7 | The author is the course is: ${course.author.name} 8 | The company for which the author works for is: 9 | The title of the course is: ${course.title} 10 | The subtitle of the course is: ${course.subtitle} 11 | The overall course description is: ${course.description} 12 | The overall keywords for the course are: ${course.keywords.join(", ")} 13 | 14 | Here's the response you will give 15 | { 16 | "seoDescription": "", 17 | "seoKeywords": [ 18 | "keywords", 19 | "go", 20 | "here" 21 | ] 22 | } 23 | 24 | `; 25 | } 26 | -------------------------------------------------------------------------------- /summary/index.js: -------------------------------------------------------------------------------- 1 | import OpenAI from "openai"; 2 | import matter from "gray-matter"; 3 | import "dotenv/config"; 4 | import fs from "fs/promises"; 5 | import { getLesson, getLessons } from "../data/lesson.js"; 6 | import { zodResponseFormat } from "openai/helpers/zod"; 7 | import getPrompt from "./getSystemPrompt.js"; 8 | import assert from "assert"; 9 | import path from "path"; 10 | import { z } from "zod"; 11 | 12 | const args = process.argv.slice(2); 13 | const force = args.includes("--force"); 14 | 15 | const configBuffer = await fs.readFile( 16 | path.join(process.cwd(), "./course.json") 17 | ); 18 | const config = JSON.parse(configBuffer); 19 | 20 | const openai = new OpenAI(); 21 | 22 | assert( 23 | process.env.OPENAI_API_KEY, 24 | "OPENAI_API_KEY must exist. Either pass it in via the environment or define it in the .env file" 25 | ); 26 | 27 | async function exec() { 28 | const list = await getLessons(); 29 | 30 | for (let section of list) { 31 | for (let lesson of section.lessons) { 32 | await summarize(section, lesson); 33 | } 34 | } 35 | } 36 | 37 | async function summarize(section, lesson) { 38 | const rendered = await getLesson(section.slug, lesson.slug); 39 | const file = await fs.readFile(lesson.path); 40 | const { data, content } = matter(file.toString()); 41 | 42 | if (data.description && !force) { 43 | console.log(`⏺️ ${lesson.fullSlug}`); 44 | } else { 45 | try { 46 | const completion = await openai.beta.chat.completions.parse({ 47 | model: "gpt-4o-2024-08-06", 48 | messages: [ 49 | { role: "system", content: getPrompt(config) }, 50 | { 51 | role: "user", 52 | content: `The markdown content is: \n\n\n${rendered.markdown}`, 53 | }, 54 | ], 55 | response_format: zodResponseFormat( 56 | z.object({ 57 | seoDescription: z.string(), 58 | seoKeywords: z.array(z.string()), 59 | }), 60 | "lesson" 61 | ), 62 | }); 63 | 64 | const parsed = { 65 | description: completion.choices[0].message.parsed.seoDescription, 66 | keywords: completion.choices[0].message.parsed.seoKeywords, 67 | }; 68 | 69 | const newData = Object.assign({}, data, parsed); 70 | const contentToWrite = matter.stringify({ content, data: newData }); 71 | 72 | await fs.writeFile(lesson.path, contentToWrite); 73 | console.log(`✅ ${lesson.fullSlug}`); 74 | } catch (e) { 75 | console.error(`❌ Error on ${lesson.path}, skipping`, e); 76 | } 77 | } 78 | } 79 | 80 | exec(); 81 | --------------------------------------------------------------------------------