From 194695fb3672537be0f3c71cb74d681a4ec60f31 Mon Sep 17 00:00:00 2001 From: Jeff Astor Date: Mon, 20 Nov 2023 13:04:27 -0500 Subject: [PATCH] Migrate to astro.js. --- .eslintignore | 7 +- .eslintrc.js | 85 +- .gitignore | 76 +- .prettierignore | 9 +- .prettierrc | 4 - .prettierrc.cjs | 11 + .vscode/extensions.json | 4 + .vscode/launch.json | 11 + .vscode/settings.json | 91 + LICENSE | 14 - README.md | 100 +- astro.config.mjs | 105 + config/SiteConfig.js | 32 - .../index.mdx | 2104 --- custom.d.ts | 20 - gatsby-browser.js | 7 - gatsby-config.js | 118 - gatsby-node.js | 215 - gatsby-ssr.js | 7 - netlify.toml | 3 + package.json | 134 +- pnpm-lock.yaml | 6291 +++++++ public/favicons/browserconfig.xml | 12 + public/favicons/favicon-114x114.png | Bin 0 -> 1504 bytes public/favicons/favicon-120x120.png | Bin 0 -> 1569 bytes public/favicons/favicon-144x144.png | Bin 0 -> 1842 bytes public/favicons/favicon-150x150.png | Bin 0 -> 1997 bytes public/favicons/favicon-152x152.png | Bin 0 -> 2028 bytes public/favicons/favicon-16x16.png | Bin 0 -> 369 bytes public/favicons/favicon-180x180.png | Bin 0 -> 2374 bytes public/favicons/favicon-192x192.png | Bin 0 -> 2604 bytes public/favicons/favicon-310x310.png | Bin 0 -> 4394 bytes public/favicons/favicon-32x32.png | Bin 0 -> 548 bytes public/favicons/favicon-57x57.png | Bin 0 -> 840 bytes public/favicons/favicon-60x60.png | Bin 0 -> 873 bytes public/favicons/favicon-70x70.png | Bin 0 -> 1019 bytes public/favicons/favicon-72x72.png | Bin 0 -> 1033 bytes public/favicons/favicon-76x76.png | Bin 0 -> 1079 bytes public/favicons/favicon-96x96.png | Bin 0 -> 1299 bytes public/favicons/favicon.ico | Bin 0 -> 372526 bytes .../fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf | Bin 0 -> 135932 bytes .../IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf | Bin 0 -> 142636 bytes .../IBM_Plex_Mono/IBMPlexMono-Italic.ttf | Bin 0 -> 142032 bytes .../IBM_Plex_Mono/IBMPlexMono-Regular.ttf | Bin 0 -> 133720 bytes public/fonts/IBM_Plex_Mono/OFL.txt | 93 + public/fonts/Plus_Jakarta_Sans/OFL.txt | 93 + ...usJakartaSans-Italic-VariableFont_wght.ttf | Bin 0 -> 181092 bytes .../PlusJakartaSans-VariableFont_wght.ttf | Bin 0 -> 176144 bytes public/fonts/Plus_Jakarta_Sans/README.txt | 77 + public/fonts/TT_Firs_Neue/README.txt | 0 .../TT_Firs_Neue/TT_Firs_Neue_Variable.ttf | Bin 0 -> 675400 bytes .../JeffAstor_Logo_192x192_rounded.png | Bin .../JeffAstor_Logo_512x512_rounded.png | Bin {src => public}/images/astor_teaching.jpg | Bin public/images/astor_teaching_192_x_192.jpg | Bin 0 -> 52311 bytes public/images/astor_teaching_512_x_512.jpg | Bin 0 -> 74347 bytes public/rss/styles.xsl | 141 + public/svg/code_sandbox.svg | 1 + public/svg/up_and_running_with_fastapi.svg | 21 + scripts/transform-comments.cjs | 22 + src/assets/css/commento.min.css | 1 - src/assets/css/dank-neon.css | 159 - src/assets/css/gatsby-prism.css | 102 - src/assets/css/variables.css | 279 - src/assets/icons/email-outline-64.svg | 1 - src/assets/icons/logo-codepen-glyph-48.svg | 13 - src/assets/icons/logo-fb-simple-glyph-48.svg | 3 - src/assets/icons/logo-github-glyph-48.svg | 6 - src/assets/icons/logo-instagram-glyph-48.svg | 13 - src/assets/icons/logo-linkedin-glyph-48.svg | 4 - src/assets/icons/logo-twitter-glyph-48.svg | 5 - src/assets/icons/logo-youtube-glyph-48.svg | 4 - .../images/JeffAstor_Logo_192x192_rounded.png | Bin 0 -> 2131 bytes .../images/JeffAstor_Logo_512x512_rounded.png | Bin 0 -> 4290 bytes src/assets/images/astor_teaching.jpg | Bin 0 -> 108608 bytes ...better-lesson-blended-learning-project.png | Bin ...google-tech-dev-guide-machine-learning.png | Bin src/assets/images/sql_challenges.png | Bin 0 -> 106919 bytes .../teachers-upperline-code-platform.png | Bin src/assets/index.ts | 8 - src/assets/posts/400px-ForgettingCurve.png | Bin 0 -> 17223 bytes src/assets/posts/440px-Monty_open_door.png | Bin 0 -> 17166 bytes src/assets/posts/FreeCodeCamp_logo.png | Bin 0 -> 22371 bytes src/assets/posts/Monty_tree_door1.png | Bin 0 -> 45353 bytes .../assets/posts}/Part_22_Feed_Complete.png | Bin .../assets/posts}/Part_22_Feed_Final.png | Bin .../assets/posts}/Part_22_Feed_simple.png | Bin .../posts}/Registration_Flow.png | Bin src/assets/posts/_Bayes_Theorem_MMB_01.jpg | Bin 0 -> 381922 bytes .../posts}/anatomy-of-an-html-element.png | Bin src/assets/posts/attribute-syntax.png | Bin 0 -> 22341 bytes src/assets/posts/behance_css_colors_fonts.jpg | Bin 0 -> 384252 bytes .../assets/posts}/box-model-1.png | Bin .../assets/posts}/box-model-2.png | Bin .../assets/posts}/box-model-3.png | Bin .../assets/posts}/box-model-4.png | Bin .../assets/posts}/box-model-5.png | Bin .../assets/posts}/box-model-6.png | Bin .../assets/posts}/box-model-7.png | Bin src/assets/posts/box-model.gif | Bin 0 -> 358793 bytes src/assets/posts/chrome_devtools.png | Bin 0 -> 66682 bytes src/assets/posts/circular-imports.jpeg | Bin 0 -> 22139 bytes src/assets/posts/codecademy-home.png | Bin 0 -> 67379 bytes src/assets/posts/containers-101-2x.png | Bin 0 -> 19494 bytes .../assets/posts}/css-floats-broken-site.jpg | Bin src/assets/posts/css-labels.png | Bin 0 -> 42416 bytes .../assets/posts}/css-shades.gif | Bin .../posts/css-tricks-guide-to-flexbox.svg | 1 + .../assets/posts}/event-in-sample-space.png | Bin .../posts}/facebook-holy-grail-layout.png | Bin src/assets/posts/google-fonts.gif | Bin 0 -> 4280846 bytes .../posts}/google_colab_change_settings.gif | Bin .../posts}/google_colab_get_file_id.gif | Bin src/assets/posts/mac_color_picker.png | Bin 0 -> 61017 bytes src/assets/posts/mac_color_picker_icon.png | Bin 0 -> 152823 bytes .../{images => posts}/montyHallCar.jpeg | Bin .../{images => posts}/montyHallGoat.gif | Bin .../assets/posts}/open_api_docs_phresh.png | Bin .../posts}/partition-total-probability.png | Bin .../phresh-cleaning-job-card-with-offer.png | Bin .../phresh-offers-for-cleaning-table.png | Bin .../assets/posts}/phresh-part-7.png | Bin .../posts}/phresh-part-8-the-me-route.png | Bin .../posts}/phresh_part_14_redux_devtools.png | Bin .../phresh_part_15_redux_auth_wired_up.png | Bin .../posts}/python-dice-rolls-10000-sums.png | Bin .../assets/posts}/python-dice-rolls-10000.png | Bin .../posts}/python-dice-rolls-500-sums.png | Bin .../assets/posts}/python-dice-rolls-500.png | Bin .../assets/posts/twitter-feed-ii.png | Bin .../assets/posts}/twitter-feed.png | Bin .../assets/posts/video}/redux-data-flow.mp4 | Bin .../assets/posts/video}/redux-data-flow.webm | Bin .../posts/video}/will-smith-celebrate.mp4 | Bin .../posts/video}/will-smith-celebrate.webm | Bin src/assets/posts/wikipedia-box-model.png | Bin 0 -> 262706 bytes .../assets/posts}/wikipedia-dev-tools.png | Bin src/assets/robots.txt | 5 - src/assets/svg/Black Businessman.svg | 1 - ...Black Man : Black Woman Using Laptop B.svg | 1 - ...Black Man : Black Woman Using Laptop E.svg | 1 - ...Black Man : Woman Using Mobile Phone E.svg | 1 - ...lack Man and Woman Working on Calendar.svg | 1 - .../svg/black_man_working_on_analytics.svg | 1 - src/components/About/About.tsx | 238 - src/components/About/ContentWrapper.astro | 31 + src/components/About/H2.astro | 21 + src/components/About/MyLife.astro | 49 + src/components/About/MyWork.astro | 177 + src/components/About/P.astro | 21 + src/components/About/ThisSite.astro | 47 + src/components/AboutMyWork/AboutMyWork.tsx | 160 - src/components/Author/Author.tsx | 111 - src/components/Blog/Blog.tsx | 84 - src/components/Blog/BlogPosts/BlogPosts.tsx | 71 + src/components/Blog/BlogPosts/Pagination.tsx | 273 + .../Blog/BlogPosts/PostsListing.tsx | 182 + src/components/Blog/BlogPosts/Sidebar.tsx | 66 + src/components/Blog/BlogPosts/index.tsx | 1 + .../Blog/OtherPosts/OtherPostPreview.astro | 72 + .../Blog/OtherPosts/PrevNextPost.astro | 33 + .../Blog/PostActions/PostActions.tsx | 258 + .../PostActions/ShareButtons/LinkedIn.tsx | 74 + .../Blog/PostActions/ShareButtons/Reddit.tsx | 76 + .../PostActions/ShareButtons/ShareButton.tsx | 216 + .../Blog/PostActions/ShareButtons/Twitter.tsx | 90 + .../Blog/PostActions/ShareButtons/index.tsx | 4 + .../Blog/PostCategory/PostCategory.astro | 35 + .../PostDeprecationNotification.astro | 72 + src/components/Blog/PostImage/PostImage.astro | 30 + .../Blog/PostListing/PostListing.astro | 28 + .../Blog/PostPreview/PostPreview.astro | 55 + .../Blog/PostPreview/PostPreview.interface.ts | 112 + .../Blog/PostPreview/PostPreview.tsx | 44 + .../Blog/PostTimestamps/PostContentDate.astro | 32 + .../Blog/PostTimestamps/PostTimestamp.astro | 22 + src/components/Blog/PostTitle/PostTitle.astro | 25 + src/components/Blog/Tags/PostTag.astro | 57 + src/components/Blog/Tags/PostTag.tsx | 33 + .../Blog/Tags/PostTagsListing.astro | 51 + src/components/Blog/use-paginate.ts | 255 + .../Blog/use-paginated-blog-posts.ts | 110 + .../BlogCategorySVG/BlogCategorySVG.tsx | 192 - .../BlogDisplayElements/CRUDEndpointsTable.js | 52 - .../DeprecatedNotification.js | 43 - .../BlogDisplayElements/Input/Input1.js | 74 - .../BlogDisplayElements/Input/Input2.js | 87 - .../BlogDisplayElements/Input/Input3.js | 95 - .../BlogDisplayElements/Input/Input4.js | 129 - .../ReactAppPreview/CraBootstrap.js | 29 - .../RegistrationFlowImage.js | 8 - src/components/BlogDisplayElements/index.js | 5 - src/components/BlogTopics/BlogTopics.tsx | 89 - .../ClipboardTrigger/ClipboardTrigger.tsx | 78 - .../CodeBlockTitle/CodeBlockTitle.tsx | 14 - .../CodesandboxDisplay/CodesandboxDisplay.tsx | 47 - src/components/Common/ExternalLink.astro | 18 + src/components/Common/InternalLink.astro | 42 + src/components/Common/SiteIcon.astro | 19 + .../ConfirmationFade/ConfirmationFade.tsx | 58 - src/components/ContactIcon/ContactIcon.tsx | 110 - .../FastAPISeriesList/FastAPISeriesList.tsx | 126 - src/components/FourOhFour/FourOhFour.tsx | 23 - src/components/Head/Analytics/Beam.astro | 12 + .../Head/Analytics/MicrosoftClarity.astro | 29 + src/components/Head/Analytics/Plausible.astro | 14 + src/components/Head/BaseHead.astro | 125 + src/components/Head/Favicons.astro | 47 + src/components/Head/PostSEO.astro | 206 + src/components/Head/SEO/AstroSEO.astro | 150 + src/components/Head/SEO/ExtendedTags.astro | 47 + .../Head/SEO/LanguageAlternatesTags.astro | 26 + .../Head/SEO/OpenGraphArticleTags.astro | 28 + .../Head/SEO/OpenGraphBasicTags.astro | 28 + .../Head/SEO/OpenGraphImageTags.astro | 32 + .../Head/SEO/OpenGraphOptionalTags.astro | 27 + src/components/Head/SEO/README.md | 5 + src/components/Head/SEO/TwitterTags.astro | 38 + src/components/Head/StandardAppSeo.astro | 49 + src/components/Icons/ChevronRight.tsx | 18 - src/components/Icons/CodeSandbox.astro | 22 + src/components/Icons/CodeSandbox.tsx | 22 - src/components/Icons/Codepen.astro | 28 + src/components/Icons/Codepen.tsx | 30 - src/components/Icons/Copy.astro | 17 + src/components/Icons/Copy.tsx | 17 - src/components/Icons/Envelope.astro | 53 + src/components/Icons/Envelope.tsx | 57 - src/components/Icons/Facebook.astro | 18 + src/components/Icons/Facebook.tsx | 20 - src/components/Icons/Github.astro | 23 + src/components/Icons/Github.tsx | 25 - src/components/Icons/Instagram.astro | 31 + src/components/Icons/Instagram.tsx | 33 - src/components/Icons/LinkGlyph.astro | 18 + src/components/Icons/LinkGlyph.tsx | 22 - src/components/Icons/Linkedin.astro | 19 + src/components/Icons/Linkedin.tsx | 21 - src/components/Icons/Twitter.astro | 20 + src/components/Icons/Twitter.tsx | 22 - src/components/Icons/YouTube.astro | 19 + src/components/Icons/Youtube.tsx | 21 - src/components/Icons/index.tsx | 13 - src/components/Landing/Landing.tsx | 153 - src/components/Landing/LandingAuthor.astro | 70 + src/components/Landing/LandingFeed.astro | 29 + src/components/Loading/Loading.tsx | 61 + src/components/MDX/Anchor.astro | 30 + src/components/MDX/BlockQuote.astro | 27 + src/components/MDX/Code.astro | 21 + src/components/MDX/Figure.astro | 24 + src/components/MDX/H2.astro | 23 + src/components/MDX/H3.astro | 23 + src/components/MDX/H4.astro | 22 + src/components/MDX/H5.astro | 22 + src/components/MDX/H6.astro | 22 + src/components/MDX/Li.astro | 21 + src/components/MDX/MdxImage.astro | 22 + src/components/MDX/Ol.astro | 22 + src/components/MDX/P.astro | 22 + src/components/MDX/Pre.astro | 21 + src/components/MDX/Span.astro | 20 + src/components/MDX/Strong.astro | 22 + src/components/MDX/Table.astro | 24 + src/components/MDX/TableD.astro | 25 + src/components/MDX/Ul.astro | 23 + src/components/MDX/Video.astro | 19 + src/components/MDX/code/ClipboardTrigger.tsx | 141 + src/components/MDX/code/ConfirmationFade.tsx | 56 + .../{Icons => MDX/code}/ExpandHorizontal.tsx | 25 +- src/components/MDX/code/PrePlaceholder.tsx | 107 + .../MDX/custom/CRUDEndpointsTable.tsx | 77 + src/components/MDX/custom/CodeSandbox.astro | 12 + .../MDX/custom/CodesandboxDisplay.tsx | 59 + .../MDX/custom/PlaidInputs/Input1.tsx | 69 + .../MDX/custom/PlaidInputs/Input2.tsx | 83 + .../MDX/custom/PlaidInputs/Input3.tsx | 97 + .../MDX/custom/PlaidInputs/Input4.tsx | 111 + .../custom/PlaidInputs/InputForm.tsx} | 10 +- .../MDX/custom/PlaidInputs/index.ts | 5 + src/components/MDX/series/FastAPI.astro | 30 + src/components/MDX/series/PostSeriesList.tsx | 300 + src/components/MDX/styles.ts | 52 + src/components/MDX/viz/MontyHall.tsx | 471 + src/components/Media/UndrawSvg.astro | 20 + src/components/Media/UndrawSvg.tsx | 25 + src/components/MontyHallViz/MontyHallViz.tsx | 718 - src/components/Nav/NavLinks.astro | 74 + src/components/Nav/NavLogo.astro | 31 + src/components/Nav/Navbar.astro | 43 + src/components/Navbar/Navbar.tsx | 101 - .../NextPrevPosts/NextPrevPosts.tsx | 146 - src/components/Post/Post.tsx | 194 - src/components/PostActions/PostActions.tsx | 281 - .../PostCodeBlock/PostCodeBlock.tsx | 147 - src/components/PostComments/PostComments.tsx | 60 - src/components/PostComments/ReactCommento.tsx | 37 - src/components/PostContent/PostContent.tsx | 379 - src/components/PostListing/PostListing.tsx | 78 - src/components/PostPreview/PostPreview.tsx | 197 - .../PostSeriesList/PostSeriesList.tsx | 350 - src/components/PostTags/PostTags.tsx | 65 - .../PrePlaceholder/PrePlaceholder.tsx | 310 - src/components/SEO/SEO.tsx | 273 - src/components/Socials/ContactIcon.astro | 92 + src/components/Socials/SocialIcons.astro | 38 + src/components/_Template.astro | 28 + src/components/index.tsx | 35 - src/content/config.ts | 37 + .../2018-07-20-Fast-ai-Deep-Learning.mdx | 8 +- .../2019-02-28-How-to-Make-a-Website.mdx | 132 +- ...3-04-The-Box-Model-and-CSS-Positioning.mdx | 102 +- .../2019-03-07-CSS-Flexbox-and-CSS-Grid.mdx | 167 +- .../2019-03-10-A-Primer-on-Probability.mdx | 124 +- .../2019-03-11-CSS-Grid-and-Landing-Pages.mdx | 253 +- .../2019-03-19-Dice-Statistics-in-Python.mdx | 101 +- ...CSS-Colors-Fonts-and-Design-Principles.mdx | 293 +- .../2019-03-26-Make-Websites-Interactive.mdx | 137 +- ...un-a-Coding-Bootcamp-in-Your-Classroom.mdx | 81 +- ...g-a-Dropdown-in-15-Lines-of-JavaScript.mdx | 93 +- ...Interactive-Twitter-Feed-in-Vanilla-JS.mdx | 305 +- ...04-03-Clone-Twitters-Front-End-Part-II.mdx | 249 +- .../2019-04-29-Advanced-NLP-with-SpaCy.mdx | 4 +- .../posts/2019-06-01-Volume-Learning.mdx | 99 + ...-09-24-Django-ORM-Queries-in-the-Shell.mdx | 2 +- ...1-01-Doing-Data-Science-in-the-Browser.mdx | 53 +- ...atistics-Permutations-and-Combinations.mdx | 68 +- ...uilding-Your-Own-Monty-Hall-Simulation.mdx | 37 +- .../posts/2019-12-02-Advent-of-Code-Day-2.mdx | 54 +- ...Plaid-Inspired-Inputs-With-React-Hooks.mdx | 171 +- ...020-05-01-Just-Enough-Docker-To-Get-By.mdx | 56 +- ...Up-and-Running-With-FastAPI-Deprecated.mdx | 57 +- ...2020-05-04-Up-and-Running-With-FastAPI.mdx | 357 + ...astAPI-Setting-Up-Postgres-With-Docker.mdx | 87 +- ...PI-Endpoints-Up-To-A-Postgres-Database.mdx | 89 +- ...ints-With-Docker-And-Pytest-Deprecated.mdx | 101 +- ...stAPI-Endpoints-With-Docker-And-Pytest.mdx | 105 +- ...05-28-Resource-Management-With-FastAPI.mdx | 431 +- ...signing-a-Robust-User-Model-in-FastAPI.mdx | 92 +- ...ating-Users-in-FastAPI-with-JWT-Tokens.mdx | 135 +- ...Authentication-Dependencies-in-FastAPI.mdx | 106 +- ...10-Setting-Up-User-Profiles-in-FastAPI.mdx | 224 +- ...-06-12-User-Owned-Resources-in-FastAPI.mdx | 395 +- ...8-Marketplace-Functionality-in-FastAPI.mdx | 461 +- ...ations-and-SQL-Aggregations-in-FastAPI.mdx | 233 +- .../2020-08-17-Phresh-Frontend-Intro.mdx | 145 +- ...-Frontend-Navigation-With-React-Router.mdx | 96 +- ...0-08-21-Managing-Auth-State-With-Redux.mdx | 214 +- ...-Creating-Client-Side-Protected-Routes.mdx | 80 +- ...-FastAPI-Backend-from-a-React-Frontend.mdx | 138 +- ...aning-Resources-With-React-and-FastAPI.mdx | 49 +- ...wing-Job-Offers-With-React-And-FastAPI.mdx | 88 +- ...ting-Job-Offers-With-React-And-FastAPI.mdx | 340 +- ...01-13-Serving-A-User-Feed-From-FastAPI.mdx | 105 +- ...esigning-A-Feed-Page-For-A-FastAPI-App.mdx | 54 +- ...factoring-Our-UI-Into-Composable-Hooks.mdx | 70 +- ...g-Our-UI-Into-Composable-Hooks-Part-II.mdx | 29 +- ...g-Cleaning-Jobs-with-Offers-in-FastAPI.mdx | 199 +- .../2021-11-29-Learning-Is-About-Context.mdx | 109 + src/core/config.ts | 38 + src/data/README.md | 0 src/data/comments/README.md | 11 + src/data/comments/new-commento-comments.json | 1387 ++ .../comments}/new-commento-comments.json.gz | Bin src/data/comments/old-commento-comments.json | 1387 ++ src/env.d.ts | 3 + src/hooks/index.ts | 6 - src/hooks/useAuthorPhoto.ts | 28 - src/hooks/useFastAPISeries.ts | 45 - src/hooks/useLandingQuery.ts | 42 - src/hooks/useMyWorkImages.ts | 42 - src/hooks/usePostEdges.ts | 45 - src/hooks/useSiteMeta.ts | 29 - ...stor_in_chicago_teaching_jamie_pilgrim.png | Bin 635900 -> 0 bytes src/images/duke_nukem.jpeg | Bin 55969 -> 0 bytes src/images/fast_ai.png | Bin 9974 -> 0 bytes src/images/gatsby-astronaut.png | Bin 167273 -> 0 bytes src/images/gatsby-icon.png | Bin 21212 -> 0 bytes src/images/glasses_teacher_id.jpg | Bin 87802 -> 0 bytes src/images/loyola_9th_grade_id.jpg | Bin 174533 -> 0 bytes src/images/me_national_championship.jpg | Bin 93539 -> 0 bytes src/images/me_principal.jpg | Bin 77686 -> 0 bytes src/images/montyHallCar.jpeg | Bin 6307 -> 0 bytes src/images/montyHallGoat.gif | Bin 14385 -> 0 bytes src/images/nlp_with_spacy_logo.jpg | Bin 39800 -> 0 bytes src/images/teaching-glasses.jpg | Bin 110822 -> 0 bytes src/images/teaching_chemistry.jpg | Bin 81745 -> 0 bytes src/images/up_and_running_with_fastapi.jpg | Bin 192072 -> 0 bytes src/layout/index.tsx | 88 - src/layouts/AppLayout.astro | 42 + src/layouts/BaseLayout.astro | 40 + src/layouts/PostLayout.astro | 34 + src/lib/blog-posts.ts | 123 + src/lib/dates.ts | 79 + src/lib/links.ts | 39 + src/lib/mdx-plugins/extend.mjs | 114 + src/lib/mdx-plugins/katex.mjs | 38 + src/lib/mdx-plugins/modify-code-blocks.mjs | 200 + src/lib/mdx-plugins/reading-time.mjs | 11 + .../mdx-plugins/rehype-autolink-headings.mjs | 169 + src/lib/mdx-plugins/rehype-katex.mjs | 84 + src/lib/mdx-plugins/rehype-slug.mjs | 78 + src/lib/mdx-plugins/remark-code-titles.mjs | 61 + .../shiki/custom-moonlight-theme.mjs | 790 + src/lib/meta.ts | 14 + src/lib/rss.ts | 29 + src/lib/socials.ts | 48 + src/lib/undraw.ts | 181 + src/pages/404.astro | 16 + src/pages/404.tsx | 11 - src/pages/about.astro | 22 + src/pages/about.tsx | 12 - src/pages/app/README.md | 7 + src/pages/app/about.astro | 5 + src/pages/app/about.tsx | 10 - src/pages/app/blog.astro | 5 + src/pages/app/blog.tsx | 10 - src/pages/app/contact.astro | 5 + src/pages/app/contact.tsx | 10 - src/pages/app/viz.astro | 23 + src/pages/blog.tsx | 12 - src/pages/blog/[slug].astro | 138 + src/pages/blog/categories/[category].astro | 72 + src/pages/blog/index.astro | 28 + src/pages/blog/tags/[tag].astro | 76 + src/pages/contact.astro | 36 + src/pages/contact.tsx | 63 - src/pages/index.astro | 108 + src/pages/index.tsx | 11 - src/services/SimilarPosts.ts | 88 + src/styles/code/code-blocks.css | 166 + src/styles/code/code-titles.css | 28 + src/styles/code/rehype-pretty-code.css | 32 + src/styles/commento.css | 7 + src/styles/fonts.css | 88 + src/styles/global.css | 303 + src/styles/plugins/tailwind.cjs | 285 + src/styles/variables.css | 39 + src/templates/category.tsx | 94 - src/templates/post.tsx | 79 - src/templates/tag.tsx | 90 - src/types/common.ts | 37 +- src/types/index.ts | 3 - src/types/post.ts | 78 - src/types/posts.ts | 31 + src/types/react.ts | 11 + src/types/ui.ts | 22 - src/utils/constants.ts | 36 - src/utils/dates.ts | 4 - src/utils/format.ts | 9 - src/utils/frequency-map.ts | 11 + src/utils/media.ts | 47 - src/utils/parse-utils.ts | 40 + src/utils/slugify.ts | 30 + src/utils/styles.ts | 6 + tailwind.config.cjs | 131 + tsconfig.json | 88 +- yarn.lock | 14841 ---------------- 458 files changed, 24873 insertions(+), 27890 deletions(-) delete mode 100644 .prettierrc create mode 100644 .prettierrc.cjs create mode 100644 .vscode/extensions.json create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json delete mode 100644 LICENSE create mode 100644 astro.config.mjs delete mode 100644 config/SiteConfig.js delete mode 100644 content/2021-09-03-Normalizing-API-Entities-with-React-Redux/index.mdx delete mode 100644 custom.d.ts delete mode 100644 gatsby-browser.js delete mode 100644 gatsby-config.js delete mode 100644 gatsby-node.js delete mode 100644 gatsby-ssr.js create mode 100644 netlify.toml create mode 100644 pnpm-lock.yaml create mode 100644 public/favicons/browserconfig.xml create mode 100644 public/favicons/favicon-114x114.png create mode 100644 public/favicons/favicon-120x120.png create mode 100644 public/favicons/favicon-144x144.png create mode 100644 public/favicons/favicon-150x150.png create mode 100644 public/favicons/favicon-152x152.png create mode 100644 public/favicons/favicon-16x16.png create mode 100644 public/favicons/favicon-180x180.png create mode 100644 public/favicons/favicon-192x192.png create mode 100644 public/favicons/favicon-310x310.png create mode 100644 public/favicons/favicon-32x32.png create mode 100644 public/favicons/favicon-57x57.png create mode 100644 public/favicons/favicon-60x60.png create mode 100644 public/favicons/favicon-70x70.png create mode 100644 public/favicons/favicon-72x72.png create mode 100644 public/favicons/favicon-76x76.png create mode 100644 public/favicons/favicon-96x96.png create mode 100644 public/favicons/favicon.ico create mode 100644 public/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf create mode 100644 public/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf create mode 100644 public/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf create mode 100644 public/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf create mode 100644 public/fonts/IBM_Plex_Mono/OFL.txt create mode 100644 public/fonts/Plus_Jakarta_Sans/OFL.txt create mode 100644 public/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.ttf create mode 100644 public/fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf create mode 100644 public/fonts/Plus_Jakarta_Sans/README.txt create mode 100644 public/fonts/TT_Firs_Neue/README.txt create mode 100644 public/fonts/TT_Firs_Neue/TT_Firs_Neue_Variable.ttf rename {src/assets => public/images}/JeffAstor_Logo_192x192_rounded.png (100%) rename {src/assets => public/images}/JeffAstor_Logo_512x512_rounded.png (100%) rename {src => public}/images/astor_teaching.jpg (100%) create mode 100644 public/images/astor_teaching_192_x_192.jpg create mode 100644 public/images/astor_teaching_512_x_512.jpg create mode 100644 public/rss/styles.xsl create mode 100644 public/svg/code_sandbox.svg create mode 100644 public/svg/up_and_running_with_fastapi.svg create mode 100644 scripts/transform-comments.cjs delete mode 100644 src/assets/css/commento.min.css delete mode 100644 src/assets/css/dank-neon.css delete mode 100644 src/assets/css/gatsby-prism.css delete mode 100644 src/assets/css/variables.css delete mode 100644 src/assets/icons/email-outline-64.svg delete mode 100644 src/assets/icons/logo-codepen-glyph-48.svg delete mode 100644 src/assets/icons/logo-fb-simple-glyph-48.svg delete mode 100644 src/assets/icons/logo-github-glyph-48.svg delete mode 100644 src/assets/icons/logo-instagram-glyph-48.svg delete mode 100644 src/assets/icons/logo-linkedin-glyph-48.svg delete mode 100644 src/assets/icons/logo-twitter-glyph-48.svg delete mode 100644 src/assets/icons/logo-youtube-glyph-48.svg create mode 100644 src/assets/images/JeffAstor_Logo_192x192_rounded.png create mode 100644 src/assets/images/JeffAstor_Logo_512x512_rounded.png create mode 100644 src/assets/images/astor_teaching.jpg rename src/{ => assets}/images/better-lesson-blended-learning-project.png (100%) rename src/{ => assets}/images/google-tech-dev-guide-machine-learning.png (100%) create mode 100644 src/assets/images/sql_challenges.png rename src/{ => assets}/images/teachers-upperline-code-platform.png (100%) delete mode 100644 src/assets/index.ts create mode 100644 src/assets/posts/400px-ForgettingCurve.png create mode 100644 src/assets/posts/440px-Monty_open_door.png create mode 100644 src/assets/posts/FreeCodeCamp_logo.png create mode 100644 src/assets/posts/Monty_tree_door1.png rename {content/2021-03-18-Designing-A-Feed-Page-For-A-FastAPI-App => src/assets/posts}/Part_22_Feed_Complete.png (100%) rename {content/2021-03-18-Designing-A-Feed-Page-For-A-FastAPI-App => src/assets/posts}/Part_22_Feed_Final.png (100%) rename {content/2021-03-18-Designing-A-Feed-Page-For-A-FastAPI-App => src/assets/posts}/Part_22_Feed_simple.png (100%) rename src/{images => assets/posts}/Registration_Flow.png (100%) create mode 100644 src/assets/posts/_Bayes_Theorem_MMB_01.jpg rename {content/2019-02-28-How-to-Make-a-Website => src/assets/posts}/anatomy-of-an-html-element.png (100%) create mode 100644 src/assets/posts/attribute-syntax.png create mode 100644 src/assets/posts/behance_css_colors_fonts.jpg rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-1.png (100%) rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-2.png (100%) rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-3.png (100%) rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-4.png (100%) rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-5.png (100%) rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-6.png (100%) rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/box-model-7.png (100%) create mode 100644 src/assets/posts/box-model.gif create mode 100644 src/assets/posts/chrome_devtools.png create mode 100644 src/assets/posts/circular-imports.jpeg create mode 100644 src/assets/posts/codecademy-home.png create mode 100644 src/assets/posts/containers-101-2x.png rename {content/2019-03-07-CSS-Flexbox-and-CSS-Grid => src/assets/posts}/css-floats-broken-site.jpg (100%) create mode 100644 src/assets/posts/css-labels.png rename {content/2019-03-11-CSS-Grid-and-Landing-Pages => src/assets/posts}/css-shades.gif (100%) create mode 100644 src/assets/posts/css-tricks-guide-to-flexbox.svg rename {content/2019-03-10-A-Primer-on-Probability => src/assets/posts}/event-in-sample-space.png (100%) rename {content/2019-03-07-CSS-Flexbox-and-CSS-Grid => src/assets/posts}/facebook-holy-grail-layout.png (100%) create mode 100644 src/assets/posts/google-fonts.gif rename {content/2019-11-01-Doing-Data-Science-in-the-Browser => src/assets/posts}/google_colab_change_settings.gif (100%) rename {content/2019-11-01-Doing-Data-Science-in-the-Browser => src/assets/posts}/google_colab_get_file_id.gif (100%) create mode 100644 src/assets/posts/mac_color_picker.png create mode 100644 src/assets/posts/mac_color_picker_icon.png rename src/assets/{images => posts}/montyHallCar.jpeg (100%) rename src/assets/{images => posts}/montyHallGoat.gif (100%) rename {content/2020-05-06-Hooking-FastAPI-Endpoints-Up-To-A-Postgres-Database => src/assets/posts}/open_api_docs_phresh.png (100%) rename {content/2019-03-10-A-Primer-on-Probability => src/assets/posts}/partition-total-probability.png (100%) rename content/2020-12-09-Creating-And-Viewing-Job-Offers-With-React-And-FastAPI/presh-cleaning-job-card-with-offer.png => src/assets/posts/phresh-cleaning-job-card-with-offer.png (100%) rename {content/2020-12-11-Approving-And-Rejecting-Job-Offers-With-React-And-FastAPI => src/assets/posts}/phresh-offers-for-cleaning-table.png (100%) rename {content/2020-06-03-Authenticating-Users-in-FastAPI-with-JWT-Tokens => src/assets/posts}/phresh-part-7.png (100%) rename {content/2020-06-08-Authentication-Dependencies-in-FastAPI => src/assets/posts}/phresh-part-8-the-me-route.png (100%) rename {content/2020-08-21-Managing-Auth-State-With-Redux => src/assets/posts}/phresh_part_14_redux_devtools.png (100%) rename {content/2020-08-21-Managing-Auth-State-With-Redux => src/assets/posts}/phresh_part_15_redux_auth_wired_up.png (100%) rename {content/2019-03-19-Dice-Statistics-in-Python => src/assets/posts}/python-dice-rolls-10000-sums.png (100%) rename {content/2019-03-19-Dice-Statistics-in-Python => src/assets/posts}/python-dice-rolls-10000.png (100%) rename {content/2019-03-19-Dice-Statistics-in-Python => src/assets/posts}/python-dice-rolls-500-sums.png (100%) rename {content/2019-03-19-Dice-Statistics-in-Python => src/assets/posts}/python-dice-rolls-500.png (100%) rename content/2019-04-01-An Interactive-Twitter-Feed-in-Vanilla-JS/twitter-feed.png => src/assets/posts/twitter-feed-ii.png (100%) rename {content/2019-04-03-Clone-Twitters-Front-End-Part-II => src/assets/posts}/twitter-feed.png (100%) rename {content/2020-08-21-Managing-Auth-State-With-Redux => src/assets/posts/video}/redux-data-flow.mp4 (100%) rename {content/2020-08-21-Managing-Auth-State-With-Redux => src/assets/posts/video}/redux-data-flow.webm (100%) rename {content/2020-08-21-Managing-Auth-State-With-Redux => src/assets/posts/video}/will-smith-celebrate.mp4 (100%) rename {content/2020-08-21-Managing-Auth-State-With-Redux => src/assets/posts/video}/will-smith-celebrate.webm (100%) create mode 100644 src/assets/posts/wikipedia-box-model.png rename {content/2019-03-04-The-Box-Model-and-CSS-Positioning => src/assets/posts}/wikipedia-dev-tools.png (100%) delete mode 100644 src/assets/robots.txt delete mode 100755 src/assets/svg/Black Businessman.svg delete mode 100755 src/assets/svg/Black Man : Black Woman Using Laptop B.svg delete mode 100755 src/assets/svg/Black Man : Black Woman Using Laptop E.svg delete mode 100755 src/assets/svg/Black Man : Woman Using Mobile Phone E.svg delete mode 100755 src/assets/svg/Black Man and Woman Working on Calendar.svg delete mode 100755 src/assets/svg/black_man_working_on_analytics.svg delete mode 100644 src/components/About/About.tsx create mode 100644 src/components/About/ContentWrapper.astro create mode 100644 src/components/About/H2.astro create mode 100644 src/components/About/MyLife.astro create mode 100644 src/components/About/MyWork.astro create mode 100644 src/components/About/P.astro create mode 100644 src/components/About/ThisSite.astro delete mode 100644 src/components/AboutMyWork/AboutMyWork.tsx delete mode 100644 src/components/Author/Author.tsx delete mode 100644 src/components/Blog/Blog.tsx create mode 100644 src/components/Blog/BlogPosts/BlogPosts.tsx create mode 100644 src/components/Blog/BlogPosts/Pagination.tsx create mode 100644 src/components/Blog/BlogPosts/PostsListing.tsx create mode 100644 src/components/Blog/BlogPosts/Sidebar.tsx create mode 100644 src/components/Blog/BlogPosts/index.tsx create mode 100644 src/components/Blog/OtherPosts/OtherPostPreview.astro create mode 100644 src/components/Blog/OtherPosts/PrevNextPost.astro create mode 100644 src/components/Blog/PostActions/PostActions.tsx create mode 100644 src/components/Blog/PostActions/ShareButtons/LinkedIn.tsx create mode 100644 src/components/Blog/PostActions/ShareButtons/Reddit.tsx create mode 100644 src/components/Blog/PostActions/ShareButtons/ShareButton.tsx create mode 100644 src/components/Blog/PostActions/ShareButtons/Twitter.tsx create mode 100644 src/components/Blog/PostActions/ShareButtons/index.tsx create mode 100644 src/components/Blog/PostCategory/PostCategory.astro create mode 100644 src/components/Blog/PostDeprecationNotification/PostDeprecationNotification.astro create mode 100644 src/components/Blog/PostImage/PostImage.astro create mode 100644 src/components/Blog/PostListing/PostListing.astro create mode 100644 src/components/Blog/PostPreview/PostPreview.astro create mode 100644 src/components/Blog/PostPreview/PostPreview.interface.ts create mode 100644 src/components/Blog/PostPreview/PostPreview.tsx create mode 100644 src/components/Blog/PostTimestamps/PostContentDate.astro create mode 100644 src/components/Blog/PostTimestamps/PostTimestamp.astro create mode 100644 src/components/Blog/PostTitle/PostTitle.astro create mode 100644 src/components/Blog/Tags/PostTag.astro create mode 100644 src/components/Blog/Tags/PostTag.tsx create mode 100644 src/components/Blog/Tags/PostTagsListing.astro create mode 100644 src/components/Blog/use-paginate.ts create mode 100644 src/components/Blog/use-paginated-blog-posts.ts delete mode 100644 src/components/BlogCategorySVG/BlogCategorySVG.tsx delete mode 100644 src/components/BlogDisplayElements/CRUDEndpointsTable.js delete mode 100644 src/components/BlogDisplayElements/DeprecatedNotification.js delete mode 100644 src/components/BlogDisplayElements/Input/Input1.js delete mode 100644 src/components/BlogDisplayElements/Input/Input2.js delete mode 100644 src/components/BlogDisplayElements/Input/Input3.js delete mode 100644 src/components/BlogDisplayElements/Input/Input4.js delete mode 100644 src/components/BlogDisplayElements/ReactAppPreview/CraBootstrap.js delete mode 100644 src/components/BlogDisplayElements/RegistrationFlowImage.js delete mode 100644 src/components/BlogDisplayElements/index.js delete mode 100644 src/components/BlogTopics/BlogTopics.tsx delete mode 100644 src/components/ClipboardTrigger/ClipboardTrigger.tsx delete mode 100644 src/components/CodeBlockTitle/CodeBlockTitle.tsx delete mode 100644 src/components/CodesandboxDisplay/CodesandboxDisplay.tsx create mode 100644 src/components/Common/ExternalLink.astro create mode 100644 src/components/Common/InternalLink.astro create mode 100644 src/components/Common/SiteIcon.astro delete mode 100644 src/components/ConfirmationFade/ConfirmationFade.tsx delete mode 100644 src/components/ContactIcon/ContactIcon.tsx delete mode 100644 src/components/FastAPISeriesList/FastAPISeriesList.tsx delete mode 100644 src/components/FourOhFour/FourOhFour.tsx create mode 100644 src/components/Head/Analytics/Beam.astro create mode 100644 src/components/Head/Analytics/MicrosoftClarity.astro create mode 100644 src/components/Head/Analytics/Plausible.astro create mode 100644 src/components/Head/BaseHead.astro create mode 100644 src/components/Head/Favicons.astro create mode 100644 src/components/Head/PostSEO.astro create mode 100644 src/components/Head/SEO/AstroSEO.astro create mode 100644 src/components/Head/SEO/ExtendedTags.astro create mode 100644 src/components/Head/SEO/LanguageAlternatesTags.astro create mode 100644 src/components/Head/SEO/OpenGraphArticleTags.astro create mode 100644 src/components/Head/SEO/OpenGraphBasicTags.astro create mode 100644 src/components/Head/SEO/OpenGraphImageTags.astro create mode 100644 src/components/Head/SEO/OpenGraphOptionalTags.astro create mode 100644 src/components/Head/SEO/README.md create mode 100644 src/components/Head/SEO/TwitterTags.astro create mode 100644 src/components/Head/StandardAppSeo.astro delete mode 100644 src/components/Icons/ChevronRight.tsx create mode 100644 src/components/Icons/CodeSandbox.astro delete mode 100644 src/components/Icons/CodeSandbox.tsx create mode 100644 src/components/Icons/Codepen.astro delete mode 100644 src/components/Icons/Codepen.tsx create mode 100644 src/components/Icons/Copy.astro delete mode 100644 src/components/Icons/Copy.tsx create mode 100644 src/components/Icons/Envelope.astro delete mode 100644 src/components/Icons/Envelope.tsx create mode 100644 src/components/Icons/Facebook.astro delete mode 100644 src/components/Icons/Facebook.tsx create mode 100644 src/components/Icons/Github.astro delete mode 100644 src/components/Icons/Github.tsx create mode 100644 src/components/Icons/Instagram.astro delete mode 100644 src/components/Icons/Instagram.tsx create mode 100644 src/components/Icons/LinkGlyph.astro delete mode 100644 src/components/Icons/LinkGlyph.tsx create mode 100644 src/components/Icons/Linkedin.astro delete mode 100644 src/components/Icons/Linkedin.tsx create mode 100644 src/components/Icons/Twitter.astro delete mode 100644 src/components/Icons/Twitter.tsx create mode 100644 src/components/Icons/YouTube.astro delete mode 100644 src/components/Icons/Youtube.tsx delete mode 100644 src/components/Icons/index.tsx delete mode 100644 src/components/Landing/Landing.tsx create mode 100644 src/components/Landing/LandingAuthor.astro create mode 100644 src/components/Landing/LandingFeed.astro create mode 100644 src/components/Loading/Loading.tsx create mode 100644 src/components/MDX/Anchor.astro create mode 100644 src/components/MDX/BlockQuote.astro create mode 100644 src/components/MDX/Code.astro create mode 100644 src/components/MDX/Figure.astro create mode 100644 src/components/MDX/H2.astro create mode 100644 src/components/MDX/H3.astro create mode 100644 src/components/MDX/H4.astro create mode 100644 src/components/MDX/H5.astro create mode 100644 src/components/MDX/H6.astro create mode 100644 src/components/MDX/Li.astro create mode 100644 src/components/MDX/MdxImage.astro create mode 100644 src/components/MDX/Ol.astro create mode 100644 src/components/MDX/P.astro create mode 100644 src/components/MDX/Pre.astro create mode 100644 src/components/MDX/Span.astro create mode 100644 src/components/MDX/Strong.astro create mode 100644 src/components/MDX/Table.astro create mode 100644 src/components/MDX/TableD.astro create mode 100644 src/components/MDX/Ul.astro create mode 100644 src/components/MDX/Video.astro create mode 100644 src/components/MDX/code/ClipboardTrigger.tsx create mode 100644 src/components/MDX/code/ConfirmationFade.tsx rename src/components/{Icons => MDX/code}/ExpandHorizontal.tsx (72%) create mode 100644 src/components/MDX/code/PrePlaceholder.tsx create mode 100644 src/components/MDX/custom/CRUDEndpointsTable.tsx create mode 100644 src/components/MDX/custom/CodeSandbox.astro create mode 100644 src/components/MDX/custom/CodesandboxDisplay.tsx create mode 100644 src/components/MDX/custom/PlaidInputs/Input1.tsx create mode 100644 src/components/MDX/custom/PlaidInputs/Input2.tsx create mode 100644 src/components/MDX/custom/PlaidInputs/Input3.tsx create mode 100644 src/components/MDX/custom/PlaidInputs/Input4.tsx rename src/components/{BlogDisplayElements/Input/InputForm.js => MDX/custom/PlaidInputs/InputForm.tsx} (88%) create mode 100644 src/components/MDX/custom/PlaidInputs/index.ts create mode 100644 src/components/MDX/series/FastAPI.astro create mode 100644 src/components/MDX/series/PostSeriesList.tsx create mode 100644 src/components/MDX/styles.ts create mode 100644 src/components/MDX/viz/MontyHall.tsx create mode 100644 src/components/Media/UndrawSvg.astro create mode 100644 src/components/Media/UndrawSvg.tsx delete mode 100644 src/components/MontyHallViz/MontyHallViz.tsx create mode 100644 src/components/Nav/NavLinks.astro create mode 100644 src/components/Nav/NavLogo.astro create mode 100644 src/components/Nav/Navbar.astro delete mode 100644 src/components/Navbar/Navbar.tsx delete mode 100644 src/components/NextPrevPosts/NextPrevPosts.tsx delete mode 100644 src/components/Post/Post.tsx delete mode 100644 src/components/PostActions/PostActions.tsx delete mode 100644 src/components/PostCodeBlock/PostCodeBlock.tsx delete mode 100644 src/components/PostComments/PostComments.tsx delete mode 100644 src/components/PostComments/ReactCommento.tsx delete mode 100644 src/components/PostContent/PostContent.tsx delete mode 100644 src/components/PostListing/PostListing.tsx delete mode 100644 src/components/PostPreview/PostPreview.tsx delete mode 100644 src/components/PostSeriesList/PostSeriesList.tsx delete mode 100644 src/components/PostTags/PostTags.tsx delete mode 100644 src/components/PrePlaceholder/PrePlaceholder.tsx delete mode 100644 src/components/SEO/SEO.tsx create mode 100644 src/components/Socials/ContactIcon.astro create mode 100644 src/components/Socials/SocialIcons.astro create mode 100644 src/components/_Template.astro delete mode 100644 src/components/index.tsx create mode 100644 src/content/config.ts rename content/2018-07-20-Fast-ai-Deep-Learning/index.mdx => src/content/posts/2018-07-20-Fast-ai-Deep-Learning.mdx (60%) rename content/2019-02-28-How-to-Make-a-Website/index.md => src/content/posts/2019-02-28-How-to-Make-a-Website.mdx (76%) rename content/2019-03-04-The-Box-Model-and-CSS-Positioning/index.md => src/content/posts/2019-03-04-The-Box-Model-and-CSS-Positioning.mdx (70%) rename content/2019-03-07-CSS-Flexbox-and-CSS-Grid/index.md => src/content/posts/2019-03-07-CSS-Flexbox-and-CSS-Grid.mdx (58%) rename content/2019-03-10-A-Primer-on-Probability/index.md => src/content/posts/2019-03-10-A-Primer-on-Probability.mdx (77%) rename content/2019-03-11-CSS-Grid-and-Landing-Pages/index.md => src/content/posts/2019-03-11-CSS-Grid-and-Landing-Pages.mdx (58%) rename content/2019-03-19-Dice-Statistics-in-Python/index.md => src/content/posts/2019-03-19-Dice-Statistics-in-Python.mdx (69%) rename content/2019-03-25-CSS-Colors-Fonts-and-Design-Principles/index.md => src/content/posts/2019-03-25-CSS-Colors-Fonts-and-Design-Principles.mdx (65%) rename content/2019-03-26-Make-Websites-Interactive/index.md => src/content/posts/2019-03-26-Make-Websites-Interactive.mdx (70%) rename content/2019-03-27-Run-a-Coding-Bootcamp-in-Your-Classroom/index.md => src/content/posts/2019-03-27-Run-a-Coding-Bootcamp-in-Your-Classroom.mdx (86%) rename content/2019-03-30-Building-a-Dropdown-in-15-Lines-of-JavaScript/index.md => src/content/posts/2019-03-30-Building-a-Dropdown-in-15-Lines-of-JavaScript.mdx (58%) rename content/2019-04-01-An Interactive-Twitter-Feed-in-Vanilla-JS/index.md => src/content/posts/2019-04-01-An Interactive-Twitter-Feed-in-Vanilla-JS.mdx (67%) rename content/2019-04-03-Clone-Twitters-Front-End-Part-II/index.md => src/content/posts/2019-04-03-Clone-Twitters-Front-End-Part-II.mdx (73%) rename content/2019-04-29-Advanced-NLP-with-SpaCy/index.md => src/content/posts/2019-04-29-Advanced-NLP-with-SpaCy.mdx (96%) create mode 100644 src/content/posts/2019-06-01-Volume-Learning.mdx rename content/2019-09-24-Django-ORM-Queries-in-the-Shell/index.md => src/content/posts/2019-09-24-Django-ORM-Queries-in-the-Shell.mdx (99%) rename content/2019-11-01-Doing-Data-Science-in-the-Browser/index.md => src/content/posts/2019-11-01-Doing-Data-Science-in-the-Browser.mdx (87%) rename content/2019-11-19-Synthesized-Statistics-Permutations-and-Combinations/index.md => src/content/posts/2019-11-19-Synthesized-Statistics-Permutations-and-Combinations.mdx (81%) rename content/2019-11-28-Building-Your-Own-Monty-Hall-Simulation/index.mdx => src/content/posts/2019-11-28-Building-Your-Own-Monty-Hall-Simulation.mdx (70%) rename content/2019-12-02-Advent-of-Code-Day-2/index.md => src/content/posts/2019-12-02-Advent-of-Code-Day-2.mdx (78%) rename content/2020-03-17-Plaid-Inspired-Inputs-With-React-Hooks/index.mdx => src/content/posts/2020-03-17-Plaid-Inspired-Inputs-With-React-Hooks.mdx (80%) rename content/2020-05-01-Just-Enough-Docker-To-Get-By/index.mdx => src/content/posts/2020-05-01-Just-Enough-Docker-To-Get-By.mdx (87%) rename content/2020-05-04-Up-and-Running-With-FastAPI/index.mdx => src/content/posts/2020-05-04-Up-and-Running-With-FastAPI-Deprecated.mdx (88%) create mode 100644 src/content/posts/2020-05-04-Up-and-Running-With-FastAPI.mdx rename content/2020-05-05-FastAPI-Setting-Up-Postgres-With-Docker/index.mdx => src/content/posts/2020-05-05-FastAPI-Setting-Up-Postgres-With-Docker.mdx (91%) rename content/2020-05-06-Hooking-FastAPI-Endpoints-Up-To-A-Postgres-Database/index.mdx => src/content/posts/2020-05-06-Hooking-FastAPI-Endpoints-Up-To-A-Postgres-Database.mdx (90%) rename content/2020-05-14-Testing-FastAPI-Endpoints-With-Docker-And-Pytest-Deprecated/index.mdx => src/content/posts/2020-05-14-Testing-FastAPI-Endpoints-With-Docker-And-Pytest-Deprecated.mdx (94%) rename content/2020-05-14-Testing-FastAPI-Endpoints-With-Docker-And-Pytest/index.mdx => src/content/posts/2020-05-14-Testing-FastAPI-Endpoints-With-Docker-And-Pytest.mdx (92%) rename content/2020-05-28-Resource-Management-With-FastAPI/index.mdx => src/content/posts/2020-05-28-Resource-Management-With-FastAPI.mdx (72%) rename content/2020-06-01-Designing-a-Robust-User-Model-in-FastAPI/index.mdx => src/content/posts/2020-06-01-Designing-a-Robust-User-Model-in-FastAPI.mdx (93%) rename content/2020-06-03-Authenticating-Users-in-FastAPI-with-JWT-Tokens/index.mdx => src/content/posts/2020-06-03-Authenticating-Users-in-FastAPI-with-JWT-Tokens.mdx (91%) rename content/2020-06-08-Authentication-Dependencies-in-FastAPI/index.mdx => src/content/posts/2020-06-08-Authentication-Dependencies-in-FastAPI.mdx (91%) rename content/2020-06-10-Setting-Up-User-Profiles-in-FastAPI/index.mdx => src/content/posts/2020-06-10-Setting-Up-User-Profiles-in-FastAPI.mdx (85%) rename content/2020-06-12-User-Owned-Resources-in-FastAPI/index.mdx => src/content/posts/2020-06-12-User-Owned-Resources-in-FastAPI.mdx (80%) rename content/2020-06-18-Marketplace-Functionality-in-FastAPI/index.mdx => src/content/posts/2020-06-18-Marketplace-Functionality-in-FastAPI.mdx (85%) rename content/2020-07-21-Evaluations-and-SQL-Aggregations-in-FastAPI/index.mdx => src/content/posts/2020-07-21-Evaluations-and-SQL-Aggregations-in-FastAPI.mdx (89%) rename content/2020-08-17-Phresh-Frontend-Intro/index.mdx => src/content/posts/2020-08-17-Phresh-Frontend-Intro.mdx (94%) rename content/2020-08-20-Frontend-Navigation-With-React-Router/index.mdx => src/content/posts/2020-08-20-Frontend-Navigation-With-React-Router.mdx (93%) rename content/2020-08-21-Managing-Auth-State-With-Redux/index.mdx => src/content/posts/2020-08-21-Managing-Auth-State-With-Redux.mdx (92%) rename content/2020-09-22-Creating-Client-Side-Protected-Routes/index.mdx => src/content/posts/2020-09-22-Creating-Client-Side-Protected-Routes.mdx (95%) rename content/2020-09-24-Consuming-a-FastAPI-Backend-from-a-React-Frontend/index.mdx => src/content/posts/2020-09-24-Consuming-a-FastAPI-Backend-from-a-React-Frontend.mdx (93%) rename content/2020-12-08-Edit-User-Owned-Cleaning-Resources-With-React-and-FastAPI/index.mdx => src/content/posts/2020-12-08-Edit-User-Owned-Cleaning-Resources-With-React-and-FastAPI.mdx (97%) rename content/2020-12-09-Creating-And-Viewing-Job-Offers-With-React-And-FastAPI/index.mdx => src/content/posts/2020-12-09-Creating-And-Viewing-Job-Offers-With-React-And-FastAPI.mdx (94%) rename content/2020-12-11-Approving-And-Rejecting-Job-Offers-With-React-And-FastAPI/index.mdx => src/content/posts/2020-12-11-Approving-And-Rejecting-Job-Offers-With-React-And-FastAPI.mdx (78%) rename content/2021-01-13-Serving-A-User-Feed-From-FastAPI/index.mdx => src/content/posts/2021-01-13-Serving-A-User-Feed-From-FastAPI.mdx (94%) rename content/2021-03-18-Designing-A-Feed-Page-For-A-FastAPI-App/index.mdx => src/content/posts/2021-03-18-Designing-A-Feed-Page-For-A-FastAPI-App.mdx (94%) rename content/2021-03-23-Refactoring-Our-React-UI-Into-Composable-Hooks/index.mdx => src/content/posts/2021-03-24-Refactoring-Our-UI-Into-Composable-Hooks.mdx (94%) rename content/2021-03-26-Refactoring-Our-UI-Into-Hooks-Part-II/index.mdx => src/content/posts/2021-04-06-Refactoring-Our-UI-Into-Composable-Hooks-Part-II.mdx (97%) rename content/2021-08-31-Providing-An-Offers-Dashboard-with-React-and-FastAPI/index.mdx => src/content/posts/2021-08-31-Populating-Cleaning-Jobs-with-Offers-in-FastAPI.mdx (88%) create mode 100644 src/content/posts/2021-11-29-Learning-Is-About-Context.mdx create mode 100644 src/core/config.ts create mode 100644 src/data/README.md create mode 100644 src/data/comments/README.md create mode 100644 src/data/comments/new-commento-comments.json rename src/{assets => data/comments}/new-commento-comments.json.gz (100%) create mode 100644 src/data/comments/old-commento-comments.json create mode 100644 src/env.d.ts delete mode 100644 src/hooks/index.ts delete mode 100644 src/hooks/useAuthorPhoto.ts delete mode 100644 src/hooks/useFastAPISeries.ts delete mode 100644 src/hooks/useLandingQuery.ts delete mode 100644 src/hooks/useMyWorkImages.ts delete mode 100644 src/hooks/usePostEdges.ts delete mode 100644 src/hooks/useSiteMeta.ts delete mode 100644 src/images/astor_in_chicago_teaching_jamie_pilgrim.png delete mode 100644 src/images/duke_nukem.jpeg delete mode 100644 src/images/fast_ai.png delete mode 100644 src/images/gatsby-astronaut.png delete mode 100644 src/images/gatsby-icon.png delete mode 100644 src/images/glasses_teacher_id.jpg delete mode 100644 src/images/loyola_9th_grade_id.jpg delete mode 100644 src/images/me_national_championship.jpg delete mode 100644 src/images/me_principal.jpg delete mode 100644 src/images/montyHallCar.jpeg delete mode 100644 src/images/montyHallGoat.gif delete mode 100644 src/images/nlp_with_spacy_logo.jpg delete mode 100644 src/images/teaching-glasses.jpg delete mode 100644 src/images/teaching_chemistry.jpg delete mode 100644 src/images/up_and_running_with_fastapi.jpg delete mode 100644 src/layout/index.tsx create mode 100644 src/layouts/AppLayout.astro create mode 100644 src/layouts/BaseLayout.astro create mode 100644 src/layouts/PostLayout.astro create mode 100644 src/lib/blog-posts.ts create mode 100644 src/lib/dates.ts create mode 100644 src/lib/links.ts create mode 100644 src/lib/mdx-plugins/extend.mjs create mode 100644 src/lib/mdx-plugins/katex.mjs create mode 100644 src/lib/mdx-plugins/modify-code-blocks.mjs create mode 100644 src/lib/mdx-plugins/reading-time.mjs create mode 100644 src/lib/mdx-plugins/rehype-autolink-headings.mjs create mode 100644 src/lib/mdx-plugins/rehype-katex.mjs create mode 100644 src/lib/mdx-plugins/rehype-slug.mjs create mode 100644 src/lib/mdx-plugins/remark-code-titles.mjs create mode 100644 src/lib/mdx-plugins/shiki/custom-moonlight-theme.mjs create mode 100644 src/lib/meta.ts create mode 100644 src/lib/rss.ts create mode 100644 src/lib/socials.ts create mode 100644 src/lib/undraw.ts create mode 100644 src/pages/404.astro delete mode 100644 src/pages/404.tsx create mode 100644 src/pages/about.astro delete mode 100644 src/pages/about.tsx create mode 100644 src/pages/app/README.md create mode 100644 src/pages/app/about.astro delete mode 100644 src/pages/app/about.tsx create mode 100644 src/pages/app/blog.astro delete mode 100644 src/pages/app/blog.tsx create mode 100644 src/pages/app/contact.astro delete mode 100644 src/pages/app/contact.tsx create mode 100644 src/pages/app/viz.astro delete mode 100644 src/pages/blog.tsx create mode 100644 src/pages/blog/[slug].astro create mode 100644 src/pages/blog/categories/[category].astro create mode 100644 src/pages/blog/index.astro create mode 100644 src/pages/blog/tags/[tag].astro create mode 100644 src/pages/contact.astro delete mode 100644 src/pages/contact.tsx create mode 100644 src/pages/index.astro delete mode 100644 src/pages/index.tsx create mode 100644 src/services/SimilarPosts.ts create mode 100644 src/styles/code/code-blocks.css create mode 100644 src/styles/code/code-titles.css create mode 100644 src/styles/code/rehype-pretty-code.css create mode 100644 src/styles/commento.css create mode 100644 src/styles/fonts.css create mode 100644 src/styles/global.css create mode 100644 src/styles/plugins/tailwind.cjs create mode 100644 src/styles/variables.css delete mode 100644 src/templates/category.tsx delete mode 100644 src/templates/post.tsx delete mode 100644 src/templates/tag.tsx delete mode 100644 src/types/index.ts delete mode 100644 src/types/post.ts create mode 100644 src/types/posts.ts create mode 100644 src/types/react.ts delete mode 100644 src/types/ui.ts delete mode 100644 src/utils/constants.ts delete mode 100644 src/utils/dates.ts delete mode 100644 src/utils/format.ts create mode 100644 src/utils/frequency-map.ts delete mode 100644 src/utils/media.ts create mode 100644 src/utils/parse-utils.ts create mode 100644 src/utils/slugify.ts create mode 100644 src/utils/styles.ts create mode 100644 tailwind.config.cjs delete mode 100644 yarn.lock diff --git a/.eslintignore b/.eslintignore index 5a5fe8e..41629e0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,4 @@ -public -# config +dist node_modules -.cache -content \ No newline at end of file +.github +types.generated.d.ts diff --git a/.eslintrc.js b/.eslintrc.js index f77bc9b..d3563cc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,37 +1,62 @@ +/** @type {import("eslint").Linter.Config} */ module.exports = { - parser: "@typescript-eslint/parser", - extends: ["airbnb-base", "prettier"], - plugins: ["react", "jsx-a11y", "import"], + env: { + node: true, + es2022: true, + browser: true, + }, + plugins: ["tailwindcss"], + extends: ["eslint:recommended", "plugin:astro/recommended", "plugin:tailwindcss/recommended"], + parserOptions: { + ecmaVersion: "latest", + sourceType: "module", + }, rules: { - "arrow-parens": ["error", "as-needed"], - "no-console": "off", - "no-else-return": "off", - "no-plusplus": "off", - "no-use-before-define": ["error", { functions: false }], - "object-curly-newline": "off", - "operator-linebreak": ["error", "after"], - semi: "off", + "tailwindcss/migration-from-tailwind-2": "off", + "tailwindcss/no-custom-classname": "off", + "tailwindcss/classnames-order": "off", }, settings: { - // "import/core-modules": [], - "import/resolver": { - alias: [ - ["assets", "./src/assets/*"], - ["components", "./src/components/*"], - ["config", "./config"], - ["hooks", "./src/hooks"], - ["images", "./src/images"], - ["layout", "./src/layout"], - ["models", "./src/models"], - ["pages", "./src/pages"], - ["services", "./src/services"], - ["utils", "./src/utils"], - ], + tailwindcss: { + config: "./tailwind.config.cjs", }, }, - env: { - browser: true, - node: true, - es6: true, - }, + ignorePatterns: ["**/.astro/**"], + overrides: [ + { + files: ["*.js"], + rules: { + "no-mixed-spaces-and-tabs": ["error", "smart-tabs"], + }, + }, + { + files: ["*.astro"], + parser: "astro-eslint-parser", + parserOptions: { + parser: "@typescript-eslint/parser", + extraFileExtensions: [".astro"], + }, + rules: { + "no-mixed-spaces-and-tabs": ["error", "smart-tabs"], + }, + }, + { + files: ["*.ts"], + parser: "@typescript-eslint/parser", + extends: ["plugin:@typescript-eslint/recommended"], + rules: { + "@typescript-eslint/no-unused-vars": [ + "error", + { argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" }, + ], + "@typescript-eslint/no-non-null-assertion": "off", + }, + }, + { + // Define the configuration for ` +--- + + \ No newline at end of file diff --git a/src/components/Head/Analytics/MicrosoftClarity.astro b/src/components/Head/Analytics/MicrosoftClarity.astro new file mode 100644 index 0000000..6f46dea --- /dev/null +++ b/src/components/Head/Analytics/MicrosoftClarity.astro @@ -0,0 +1,29 @@ +--- +type Props = { + siteId?: string +} + +const { siteId = "ijcwm97t6v" } = Astro.props + +const baseUrl = "https://www.clarity.ms/tag/" +// const siteId = "ijcwm97t6v" +--- + + diff --git a/src/components/Head/Analytics/Plausible.astro b/src/components/Head/Analytics/Plausible.astro new file mode 100644 index 0000000..f732952 --- /dev/null +++ b/src/components/Head/Analytics/Plausible.astro @@ -0,0 +1,14 @@ +--- +export type Props = { + domain?: string + src?: string +} + +const { domain = "jeffastor.com", src = "https://plausible.io/js/script.js" } = Astro.props + +// const dataDomain = "jeffastor.com" +// const scriptSource = `https://plausible.io/js/script.js` +--- + + + diff --git a/src/components/Head/BaseHead.astro b/src/components/Head/BaseHead.astro new file mode 100644 index 0000000..4835b76 --- /dev/null +++ b/src/components/Head/BaseHead.astro @@ -0,0 +1,125 @@ +--- +// Import the global.css file here so that it is included on +// all pages through the use of the component. +import "@/styles/variables.css" +import "@/styles/fonts.css" +import "@/styles/global.css" +// code blocks +import "@/styles/code/code-blocks.css" +import "@/styles/code/code-titles.css" +import "@/styles/code/rehype-pretty-code.css" +// commento - commento has been discontinued +// import "@/styles/commento.css" + +// import katex styles +import "katex/dist/katex.min.css" + +import Favicons from "./Favicons.astro" +// import MicrosoftClarityAnalytics from "./Analytics/MicrosoftClarity.astro" + +import { appendToMetaTitle, metaDescriptionOrDefault } from "@/lib/meta" + +type Props = { + title?: string + description?: string + image?: string + excludeOpenGraph?: boolean + excludeTwitter?: boolean +} + +const canonicalURL = new URL(Astro.url.pathname, Astro.site) + +const { + title, + description, + image = "/astor_teaching.jpg", + excludeOpenGraph = false, + excludeTwitter = false, +} = Astro.props + +const metaTitle = appendToMetaTitle(title) +const metaDescription = metaDescriptionOrDefault(description) +--- + + + + + + + + + + + + + + +{metaTitle} + + + + + + + + + + + +{ + excludeOpenGraph ? null : ( + <> + + + + + + + ) +} + + +{ + excludeTwitter ? null : ( + <> + + + + + + + ) +} + + + diff --git a/src/components/Head/Favicons.astro b/src/components/Head/Favicons.astro new file mode 100644 index 0000000..9e5ced4 --- /dev/null +++ b/src/components/Head/Favicons.astro @@ -0,0 +1,47 @@ +--- +// NOTE: +// This is the results of generating favicons from favycon + +// https://github.com/ruisaraiva19/favycon + +// OTHER SITE TO LOOK AT +// https://realfavicongenerator.net/ + +type Props = { + useFullFaviconSet?: boolean +} + +const { useFullFaviconSet = false } = Astro.props +--- + +{ + useFullFaviconSet ? ( + <> + + + + + + + + + + + + + + + + + + + + ) : ( + <> + + + + + + ) +} diff --git a/src/components/Head/PostSEO.astro b/src/components/Head/PostSEO.astro new file mode 100644 index 0000000..2db7e87 --- /dev/null +++ b/src/components/Head/PostSEO.astro @@ -0,0 +1,206 @@ +--- +import type { BlogPostWithMeta, IPostData } from "@/types/posts" + +import * as links from "@/lib/links" + +import { config } from "@/core/config" + +import TwitterTags from "./SEO/TwitterTags.astro" +import OpenGraphBasicTags from "./SEO/OpenGraphBasicTags.astro" +import OpenGraphArticleTags from "./SEO/OpenGraphArticleTags.astro" +import OpenGraphImageTags from "./SEO/OpenGraphImageTags.astro" +import OpenGraphOptionalTags from "./SEO/OpenGraphOptionalTags.astro" + +type Props = { + post: BlogPostWithMeta + globbedPost: Record | undefined +} + +const props = Astro.props + +const { post, globbedPost } = props as Props + +const { + site_url, + // sub_title, + site_title, + info, + // site_logo, + site_description, +} = config + +// const siteUrl = Astro.site ?? site_url +const canonicalURL = new URL(Astro.url.pathname, Astro.site) + +const relativePostUrl = links.formatBlogLinkFromSlug(post.slug) +const postUrl = new URL(relativePostUrl, Astro.site) + +const postData = post.data as IPostData + +// const isHighSchoolPost = postData.isHighSchoolLesson ?? false + +const twitter = info.contacts.twitter +const authorName = info.name +const postTitle = post.data.title + +// @ts-ignore +const postExcerpt = post?.excerpt as string | undefined + +const postDescription = postData.description ?? postExcerpt ?? null +// const description = postDescription ?? site_description // "A new post by Jeff Astor." +const description = site_description // "A new post by Jeff Astor." +const tags = postData.tags ?? [] +// turn tags into string like this: +// ;("tag1, tag2, tag3") +const stringifiedTags = tags.join(", ") +const postCategory = postData.category ?? undefined +const publishDate = postData.date +const updatedDate = postData.dateModified ?? null + +// const metaTitle = appendToMetaTitle(postTitle) +// const metaDescription = metaDescriptionOrDefault(description) + +const image = "/images/astor_teaching_512_x_512.jpg" +const logo = "/images/JeffAstor_Logo_512x512_rounded.png" + +// const imageUrl = new URL(image, Astro.url) +const imageUrl = new URL(image, Astro.site) +const logoUrl = new URL(logo, Astro.url) + +// const schemaOrgJSONLD = [] +// website schema item +const websiteSchemaItem = { + "@context": "http://schema.org", + "@type": "WebSite", + name: site_title, + url: site_url, + logo: logoUrl.toString(), + image: imageUrl.toString(), + // alternateName: sub_title, +} as const + +// breadcrumb list +const breadCrumbSchemaItem = { + "@context": "http://schema.org", + "@type": "BreadcrumbList", + itemListElement: [ + { + "@type": "ListItem", + position: 1, + item: { + "@id": postUrl, + name: site_title, + image: imageUrl.toString(), + }, + }, + ], +} as const +const blogPostSchemaItem = { + "@context": "http://schema.org", + "@type": "BlogPosting", + // "@type": "TechArticle", + url: site_url, + name: postTitle, + alternateName: site_title, + headline: postTitle, + mainEntityOfPage: { + "@type": "WebSite", + "@id": site_url, + }, + // proficiencyLevel: isHighSchoolPost ? "Beginner" : "Expert", + image: { + "@type": "ImageObject", + "@id": imageUrl.toString(), + url: imageUrl.toString(), + height: "512", + width: "512", + }, + author: { + "@type": "Person", + name: authorName, + url: site_url, + image: { + "@type": "ImageObject", + "@id": imageUrl.toString(), + url: imageUrl.toString(), + height: "512", + width: "512", + }, + }, + description, + keywords: tags, + /* the schema expects Date or DateTime using ISO 8601 format. For Date that is yyyy-MM-dd */ + datePublished: publishDate.toISOString().substring(0, 10), + /* updateDate is optional frontmatter, so we conditionally add dateModified if it exists */ + ...(updatedDate ? { dateModified: updatedDate.toISOString().substring(0, 10) } : {}), +} as const + +const schemaOrgJSONLD = [websiteSchemaItem, breadCrumbSchemaItem, blogPostSchemaItem] as const + +const stringifiedSchema = JSON.stringify(schemaOrgJSONLD, null, 2) + +const twitterInfo = { + card: "summary_large_image" as const, + creator: twitter, + title: postTitle, + // description, + description: postDescription ?? description, + image: imageUrl.toString(), + // site: siteUrl.toString(), + section: postCategory, +} as const + +const openGraphInfo = { + article: { + section: postCategory, + datePublished: publishDate.toISOString().substring(0, 10), + ...(updatedDate ? { dateModified: updatedDate.toISOString().substring(0, 10) } : {}), + authors: [authorName], + tags, + }, + basic: { + title: postTitle, + type: "article" as const, + // url: postUrl.toString(), + url: canonicalURL, + image: imageUrl.toString(), + }, + image: { + // image: "", + height: 512, + width: 512, + alt: "Teaching former students", + type: "image/jpeg", + }, + optional: { + description: postDescription, + siteName: site_title, + }, +} as const + +const openGraphArticle = { ...openGraphInfo.article, authors: [...openGraphInfo.article.authors] } +const openGraphOptional = { ...openGraphInfo.optional, description: openGraphInfo.optional.description ?? undefined } + +/** + * NOTE: Commento has been discontinued + * + * Disabling comments until a decision has been made on what to migrate to + */ +--- + + + + + - - {/* OpenGraph tags */} - - {postSEO ? : null} - - - - {/* */} - - {/* Twitter Card tags */} - - - - - - - ) -} - -// const SEO = ({ postNode, postPath, postSEO, ...props }) => ( -// } -// /> -// ) - -// class SEO extends Component { -// render() { -// const { postNode, postPath, postSEO } = this.props -// let title -// let description -// let image = config.siteLogo -// let postURL - -// console.log(postNode) - -// if (postSEO) { -// const postMeta = postNode.frontmatter -// title = postMeta.title -// // ({ title } = postMeta) -// description = postMeta.description -// ? postMeta.description -// : postNode.excerpt -// // image = postMeta.image -// // postURL = urljoin(config.siteUrl, config.pathPrefix, postPath) -// postURL = `${config.siteUrl}/blog${postPath}` -// } else { -// title = config.siteTitle -// description = config.siteDescription -// // image = config.siteLogo -// } - -// // image = urljoin(config.siteUrl, config.pathPrefix, image); -// // image = config.siteUrl + config.pathPrefix + (!!image ? image : config.siteLogo) -// // image = -// // const blogURL = urljoin(config.siteUrl, config.pathPrefix) -// const blogURL = `${config.siteUrl}/` - -// console.log("blogURL", blogURL) -// console.log("postURL", postURL) -// console.log("description", description) -// console.log("title", title) -// const schemaOrgJSONLD = [ -// { -// '@context': 'http://schema.org', -// '@type': 'WebSite', -// url: blogURL, -// name: title, -// alternateName: config.siteTitleAlt ? config.siteTitleAlt : '' -// }, -// // author: { -// // "@type": "Person", -// // "name": "${author.name}", -// // "url": "${siteUrl}" -// // }, -// ] -// if (postSEO) { -// schemaOrgJSONLD.push( -// { -// '@context': 'http://schema.org', -// '@type': 'BreadcrumbList', -// itemListElement: [ -// { -// '@type': 'ListItem', -// position: 1, -// item: { -// '@id': postURL, -// name: title, -// image -// } -// } -// ] -// }, -// { -// '@context': 'http://schema.org', -// '@type': 'BlogPosting', -// url: blogURL, -// name: title, -// alternateName: config.siteTitleAlt ? config.siteTitleAlt : '', -// headline: title, -// // description: description, -// image: { -// '@type': 'ImageObject', -// url: image -// }, -// author: { -// "@type": "Person", -// "name": "${author.name}", -// url: blogURL, -// }, -// description -// } -// ) -// } - -// console.log('schemaOrgJSONLD', schemaOrgJSONLD) -// return ( -// -// {/* General tags */} -// -// - -// {/* Schema.org tags */} -// - -// {/* OpenGraph tags */} -// -// {postSEO ? : null} -// -// -// -// {/* */} - -// {/* Twitter Card tags */} -// -// -// -// -// -// -// ) -// } -// } - -export default SEO diff --git a/src/components/Socials/ContactIcon.astro b/src/components/Socials/ContactIcon.astro new file mode 100644 index 0000000..d8636bb --- /dev/null +++ b/src/components/Socials/ContactIcon.astro @@ -0,0 +1,92 @@ +--- +import ExternalLink from "@/components/Common/ExternalLink.astro" +import Codepen from "@/components/Icons/Codepen.astro" +import Envelope from "@/components/Icons/Envelope.astro" +import Facebook from "@/components/Icons/Facebook.astro" +import Github from "@/components/Icons/Github.astro" +import Instagram from "@/components/Icons/Instagram.astro" +import Linkedin from "@/components/Icons/Linkedin.astro" +import Twitter from "@/components/Icons/Twitter.astro" +import YouTube from "@/components/Icons/YouTube.astro" + +import { cn } from "@/utils/styles" + +const iconMapping = { + codepen: Codepen, + email: Envelope, + facebook: Facebook, + github: Github, + instagram: Instagram, + linkedin: Linkedin, + twitter: Twitter, + youtube: YouTube, +} as const + +const iconSizeToClassNamesMapping = { + sm: { + link: "w-3.5 h-3.5 rounded m-1 p-1.5", + icon: "max-w-5 max-h-5", + }, + md: { + link: "w-5 h-5 rounded-md m-2 p-3", + icon: "max-w-6 max-h-6", + }, + lg: { + link: "w-6 h-6 rounded-lg m-4 p-4", + icon: "max-w-12 max-h-12", + }, +} as const + +const iconVariantToClassNamesMapping = { + standard: { + stroke: "stroke-light text-light", + fill: "fill-light text-light", + }, + inverted: { + stroke: "stroke-dark text-dark", + fill: "fill-dark text-dark", + }, +} as const + +type Props = { + icon: keyof typeof iconMapping + path: string + size?: keyof typeof iconSizeToClassNamesMapping + variant?: keyof typeof iconVariantToClassNamesMapping + fillIcon?: boolean + className?: string +} + +const { icon, path, size, variant, fillIcon, className, ...props } = Astro.props + +const sizeStyles = iconSizeToClassNamesMapping[size ?? "sm"] +const variantStyles = iconVariantToClassNamesMapping[variant ?? "standard"][fillIcon ? "fill" : "stroke"] +const Icon = iconMapping[icon] + +const wrapperClassnames = cn(["flex flex-col items-center justify-center", className]) +const linkClassnames = cn([ + "flex-center flex items-center justify-center", + "text-white", + "group duration-200", + variantStyles, + sizeStyles.link, +]) +const iconClassnames = cn([ + sizeStyles.icon, + "flex-shrink-0", + "will-change-transform", + "group-hover:duration-300 group-hover:ease-op-ease-squish-5 group-hover:scale-125", +]) +--- + +
+ + + +
diff --git a/src/components/Socials/SocialIcons.astro b/src/components/Socials/SocialIcons.astro new file mode 100644 index 0000000..075d42e --- /dev/null +++ b/src/components/Socials/SocialIcons.astro @@ -0,0 +1,38 @@ +--- +import ContactIcon from "./ContactIcon.astro" +import type { SocialIconSize } from "@/lib/socials" +import { getSocials } from "@/lib/socials" +import { cn } from "@/utils/styles" + +type Props = { + size?: SocialIconSize + className?: string +} + +const props: Props = Astro.props + +const size = props.size ?? "sm" + +const socials = getSocials(size) + +const wrapperClassnames = cn([ + // + "my-2", + "-translate-x-3 lg:-translate-x-0", + props.className, +]) +--- + +
+ { + socials.map((social) => ( + + )) + } +
diff --git a/src/components/_Template.astro b/src/components/_Template.astro new file mode 100644 index 0000000..3de833e --- /dev/null +++ b/src/components/_Template.astro @@ -0,0 +1,28 @@ +--- +import { cn } from "@/utils/styles" + +type Props = { + className?: string +} + +const { className, ...props } = Astro.props + +const wrapperClassnames = cn([ + "flex", + "flex-col", + "items-center", + "justify-center", + "w-full", + "max-w-2xl", + "mx-auto", + "px-4", + "py-8", + "space-y-8", + className, + // +]) +--- + +
+ +
diff --git a/src/components/index.tsx b/src/components/index.tsx deleted file mode 100644 index e8ba2bf..0000000 --- a/src/components/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -export { default as About } from "./About/About" -export { default as AboutMyWork } from "./AboutMyWork/AboutMyWork" -export { default as Author } from "./Author/Author" -export { default as Blog } from "./Blog/Blog" -export { default as BlogCategorySVG } from "./BlogCategorySVG/BlogCategorySVG" -export { default as BlogTopics } from "./BlogTopics/BlogTopics" -export { default as ClipboardTrigger } from "./ClipboardTrigger/ClipboardTrigger" -export { default as CodeBlockTitle } from "./CodeBlockTitle/CodeBlockTitle" -export { default as CodesandboxDisplay } from "./CodesandboxDisplay/CodesandboxDisplay" -export { default as ConfirmationFade } from "./ConfirmationFade/ConfirmationFade" -export { default as ContactIcon } from "./ContactIcon/ContactIcon" -export { default as FastAPISeriesList } from "./FastAPISeriesList/FastAPISeriesList" -export { default as FourOhFour } from "./FourOhFour/FourOhFour" -export { default as Landing } from "./Landing/Landing" -export { default as MontyHall } from "./MontyHallViz/MontyHallViz" -export { default as Navbar } from "./Navbar/Navbar" -export { default as NextPrevPosts } from "./NextPrevPosts/NextPrevPosts" -export { default as PrePlaceholder } from "./PrePlaceholder/PrePlaceholder" -export { default as Post } from "./Post/Post" -export { default as PostActions } from "./PostActions/PostActions" -export { default as PostCodeBlock } from "./PostCodeBlock/PostCodeBlock" -export { default as PostComments } from "./PostComments/PostComments" -export { default as PostContent } from "./PostContent/PostContent" -export { default as PostListing } from "./PostListing/PostListing" -export { default as PostPreview } from "./PostPreview/PostPreview" -export { default as PostSeriesList } from "./PostSeriesList/PostSeriesList" -export { default as PostTags } from "./PostTags/PostTags" -export { default as SEO } from "./SEO/SEO" - -export * from "./Icons" - -// blog display stuff -export { default as CRUDEndpointsTable } from "./BlogDisplayElements/CRUDEndpointsTable" -export { default as DeprecatedNotification } from "./BlogDisplayElements/DeprecatedNotification" -export { default as RegistrationFlowImage } from "./BlogDisplayElements/RegistrationFlowImage" diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..090c267 --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,37 @@ +import { defineCollection, z } from "astro:content" + +export const BlogPostSchemaAttrs = { + title: z.string(), + description: z.string().optional(), + category: z.string().optional(), + image: z.string().optional(), + date: z + .string() + .or(z.date()) + .transform((val) => new Date(val)), + dateModified: z + .string() + .optional() + .transform((str) => (str ? new Date(str) : undefined)), + // slug: z.string(), + series: z.string().optional(), + isDraft: z.boolean().optional().default(false), + published: z.enum(["true", "false"]).optional(), + deprecated: z.enum(["true", "false"]).optional(), + author: z.string().optional(), + rating: z + .string() + .optional() + .transform((str) => (str ? Number(str) : undefined)), + template: z.string().optional(), + tags: z.array(z.string()).optional(), + // isHighSchoolLesson: z.boolean().optional().default(false), +} +export const BlogPostSchema = z.object(BlogPostSchemaAttrs) + +const blogPostsCollection = defineCollection({ + type: "content", + schema: BlogPostSchema, +}) + +export const collections = { posts: blogPostsCollection } diff --git a/content/2018-07-20-Fast-ai-Deep-Learning/index.mdx b/src/content/posts/2018-07-20-Fast-ai-Deep-Learning.mdx similarity index 60% rename from content/2018-07-20-Fast-ai-Deep-Learning/index.mdx rename to src/content/posts/2018-07-20-Fast-ai-Deep-Learning.mdx index 6fcd6da..f03475e 100644 --- a/content/2018-07-20-Fast-ai-Deep-Learning/index.mdx +++ b/src/content/posts/2018-07-20-Fast-ai-Deep-Learning.mdx @@ -1,7 +1,8 @@ --- title: "Fast.ai - Practical Deep Learning for Coders" category: "Course Review" -date: 2018-07-20 +# image: /fast_ai.png +date: "07/20/2018" slug: "fast-ai-practical-deep-learning-for-coders" author: "Jeremy Howard" link: "https://course.fast.ai/" @@ -17,13 +18,10 @@ tags: Plain and simple, the best deep learning course on the Internet. Jeremy Howard has found a way to make State Of The Art (SOTA) deep learning accessible. If you want to truly understand how convolutional neural networks and recommendation engines work, take this course. He provides the best explanations I've found on both subjects. Before this, I wasn't a Pytorch user. Now there's no reason not to be one. - - ## Pros -Every lesson is jampacked with information I wanted to know. From beginning to end, I was hooked. Can't say that for many courses. Pytorch is a great framework and the way he mixes up high level abstractions and lower-level neural network construction is phenomenal. His top-down teaching approach makes learning significantly more enjoyable. From the very beginning, students are working with state of the art deep learning models. Then he digs down deeper into the mechanics of each concept using the products students have already built. Afterwards, he often builds them all the way back up from scratch. This methodology has the benefit of providing tangible, working products right from the start. The student is never in question about "why" they're learning a given topic. On top of that, the course flow helps the learners build the appropriate context needed to understand the more difficult concepts that come further down the road. It's clear that this is intentional on the instructor's part. Simply excellent. +Every lesson is jampacked with information I wanted to know. From beginning to end, I was hooked. Can't say that for many courses. Pytorch is a great framework and the way he mixes up high level abstractions and lower-level neural network construction is phenomenal. ## Cons The videos are long. I watched them at 1.5X speed, but still. 2 hour videos take time. Especially when you're coding along with the videos. Jeremy also spends time answering questions that I'm not interested in hearing answers to. Otherwise, don't have much to add on the negative side. - diff --git a/content/2019-02-28-How-to-Make-a-Website/index.md b/src/content/posts/2019-02-28-How-to-Make-a-Website.mdx similarity index 76% rename from content/2019-02-28-How-to-Make-a-Website/index.md rename to src/content/posts/2019-02-28-How-to-Make-a-Website.mdx index fda0ba0..4160492 100644 --- a/content/2019-02-28-How-to-Make-a-Website/index.md +++ b/src/content/posts/2019-02-28-How-to-Make-a-Website.mdx @@ -1,53 +1,62 @@ --- title: "How to Start Building Your Own Website" category: "Web Development" -date: 2019-02-28 +date: "02/28/2019" published: "true" slug: "how-to-make-a-website" tags: - - HTML - - CSS - - web development - - front-end - - beginner - - high school lesson + - HTML + - CSS + - web development + - front-end + - beginner + - high school lesson +# # isHighSchoolLesson: true --- +import Image from "@/components/MDX/MdxImage.astro" +import anatomyOfHTML from "../../assets/posts/anatomy-of-an-html-element.png" +import attributeSyntax from "../../assets/posts/attribute-syntax.png" +import cssLabels from "../../assets/posts/css-labels.png" + +> NOTE: This post was originally created as a lesson for my high school students. The target audience is beginners to web development. + This walkthrough should cover only the most foundational concepts in HTML and CSS. The purpose is not to make you a complete and total expert, but to bring you up to speed with the essential components necessary to start building a website from scratch. ## How to Build a Webpage Walkthrough The sequence is as follows: -* Part 1 - How HTML Works -* Part 2 - CSS and HTML Attributes -* Part 3 - Composing a Skeleton Website + +- Part 1 - How HTML Works +- Part 2 - CSS and HTML Attributes +- Part 3 - Composing a Skeleton Website ## Part 1 - How HTML Works **Tags and Elements**: When building an HTML webpage, the first thing to know is that the page is constructed entirely of HTML elements. Each element starts with a opening tag and ends with a closing tag. For example, if we wanted to create header text like the one at the top of this document, we would begin with the opening tag `

` and end with a closing tag `

`. As you might be able to tell, the difference between an opening and closing tag is that the closing tag has a forward slash ( / ) at the beginning of the tag. If we wanted to create paragraph text, we would use the `

` opening tag and the `

` closing tag. The text we put in between those tags is known as the content and is what appears on the page. -![Anatomy of an HTML Element](./anatomy-of-an-html-element.png) +Anatomy of an HTML element **Nesting Elements**: A big part of HTML is that we can place some elements inside of other elements. This is known as nesting. When we create a web page, we’ll nest elements inside of each other all the time. That will look like the code below. We call the tags on the outside the parent and the tags on the inside the child. We often use `
` tags as parent elements. Div elements are short for divider elements, and they section off different parts of the page. ```html
-

- This content is inside of the child tag, which is inside of the parent tag. Keep an eye on indentation to see which is the parent and which is the child! -

-
+

+ This content is inside of the child tag, which is inside of the parent tag. Keep an eye on indentation to see which + is the parent and which is the child! +

+ ``` -**Building a Skeleton Webpage**: When we start building a complete HTML webpage, we’ll need to use certain elements that let our browser know how to create and style the page. First, we indicate that we’ll be building an HTML document by placing this tag: `` at the beginning of the page. Next, we’ll use an `` element that will surround all the code on our page. Inside the opening and closing html tags, we’ll place two other important elements: `` and ``. The head tags hold all the code that goes on behind the scenes of our website. The body tag holds all the code that actually appears on our webpage. Every website has a basic layout that looks the same. Here’s how you should start EVERY webpage: +**Building a Skeleton Webpage**: When we start building a complete HTML webpage, we’ll need to use certain elements that let our browser know how to create and style the page. First, we indicate that we’ll be building an HTML document by placing this tag: `` at the beginning of the page. Next, we’ll use an `` element that will surround all the code on our page. Inside the opening and closing html tags, we’ll place two other important elements: `` and ``. The head tags hold all the code that goes on behind the scenes of our website. The body tag holds all the code that actually appears on our webpage. Every website has a basic layout that looks the same. Here’s how you should start EVERY webpage: ```html - + - - My Shiny New Website - - - + + My Shiny New Website + + ``` @@ -55,31 +64,31 @@ After you place those tags inside your html document, you can start placing elem ### Let's summarize how HTML works: -* HTML elements are composed of opening and closing tags with content in between them. We can nest HTML elements inside of each other to create -* `` - This tag tells your browser that the rest of text that is about to follow is apart of an HTML document. If you leave it out, some browsers won't 'know' what type of document they are looking at (computers are dumb), and the page will break. It's a little boring, but you should have it. -* `` - The most basic HTML tags are simply `` and ``, and all the content of your pages will be written inside these tags. -* `` - The `` contains information about your website, but not actual content that will show up on the page (think of it as the 'brains' of your webpage.) It will contain things like links to stylesheets and code that will make your page beautiful and interactive. -* The `` contains all the content of your page that will actually show up on the screen. 90% of the HTML you write will go inside the ``. +- HTML elements are composed of opening and closing tags with content in between them. We can nest HTML elements inside of each other to create +- `` - This tag tells your browser that the rest of text that is about to follow is apart of an HTML document. If you leave it out, some browsers won't 'know' what type of document they are looking at (computers are dumb), and the page will break. It's a little boring, but you should have it. +- `` - The most basic HTML tags are simply `` and ``, and all the content of your pages will be written inside these tags. +- `` - The `` contains information about your website, but not actual content that will show up on the page (think of it as the 'brains' of your webpage.) It will contain things like links to stylesheets and code that will make your page beautiful and interactive. +- The `` contains all the content of your page that will actually show up on the screen. 90% of the HTML you write will go inside the ``. ## Part 2 - Introducing Attributes and CSS **Common Elements**: There are a number of HTML elements that we use pretty frequently on any webpage. Here are a few common elements and the things they create. -* **Paragraph Text**: `

Hello!

` -* **Biggest Heading Text**: `

Biggest Header

` -* **Middle Heading Text**: `

Medium Sized Header

` -* **Small Heading Text**: `
Smallest Header
` -* **Links:** `Link to Google` -* **Images** `` -* **Horizontal Rule**: `
` -* **Divider** `
This element sections off part of the page
` -* **Ordered Lists**: `
` -* **Unordered Lists**: `
` -* **List Items**: `
  • A list item goes inside a list
    • ` +- **Paragraph Text**: `

    Hello!

    ` +- **Biggest Heading Text**: `

    Biggest Header

    ` +- **Middle Heading Text**: `

    Medium Sized Header

    ` +- **Small Heading Text**: `
    Smallest Header
    ` +- **Links:** `Link to Google` +- **Images** `` +- **Horizontal Rule**: `
    ` +- **Divider** `
    This element sections off part of the page
    ` +- **Ordered Lists**: `
    ` +- **Unordered Lists**: `
    ` +- **List Items**: `
  • A list item goes inside a list
    • ` You’ll notice that some of these elements have information inside of the tags. These are called **attributes**, and provide extra information to the element, like where a photo is, or where a link should direct users to. To give an element an attribute, place the name of the attribute inside the opening tag followed by an equal sign and the data needed inside quotations like so: -![html attributes syntax](https://s3.amazonaws.com/upperline/curriculum-assets/html/attribute-syntax.png) +html attributes syntax We’ll use attributes often to style elements and inside of images and links. @@ -87,7 +96,7 @@ We’ll use attributes often to style elements and inside of images and links. ```html -

    Click here for my favorite search engine

    +

    Click here for my favorite search engine

     ``` @@ -96,14 +105,14 @@ Be aware that you can also link to parts of the webpage using IDs, which we’ll **Adding Images**: Without any images, your website will be pretty boring. Let's add in an image or two. Use the `` tag (which doesn't need a closing tag) to add an image to your site. The src attribute links to the location of the image (either online or in your project directory). ```html - + ``` **Styling Elements with CSS**: CSS (which stands for cascading style sheets) is the fundamental way of adding style to your websites. Without it, your sites are just a bunch of text in ugly chunks. All the color, style, and generally cool things you see on the web require tons of CSS. Let’s see how that works. CSS is written using rules. Each rule is composed of a selector, properties, and values. For example, we can select all h1 elements and set their background color to blue. The h1 is the selector, background-color is the property, and blue is the value. -![Selector, Property, Value](https://s3.amazonaws.com/upperline/curriculum-assets/css/css-labels.png) +css selector property and value syntax There are many CSS properties to manipulate, such as height, width, font-size, font-family, color, text-align, border, margin, padding, display, position, and many others. Look a few up! @@ -112,9 +121,9 @@ There are many CSS properties to manipulate, such as height, width, font-size, f Classes and ids are types of attributes that we can add onto an element in order to be more specific with our CSS selectors. This is what they look like: ```html -

    +

    -

    +

    ``` Classes and IDs allow us to more finely select elements to style using CSS. If we have 10 `

    ` elements on our page, but only want to change the background color of a few of them, we'd reference their class instead of the tag type. If you wanted to only style the `

    ` on your page that is the main title, while leaving all other `

    ` elements alone, we'd reference the id we've given it. @@ -123,7 +132,7 @@ We reference a class by using a . (period) and the class name: ```css .animal-description { - background-color: #FF0000; + background-color: #ff0000; } ``` @@ -131,7 +140,7 @@ We reference an id by using a # (hashtag) and the id name: ```css #main-title { - background-color: #FF0000; + background-color: #ff0000; } ``` @@ -140,7 +149,7 @@ We reference an id by using a # (hashtag) and the id name: Let's say we have the following HTML elements, and we want to give them all a single blue background color, and want all of the elements to be centered in the page. ```html - +

    Francis Crick

    Nobel Prize winner and co-discoverer of the double-helix structure of DNA

    ``` @@ -149,7 +158,7 @@ We could work on individually styling each of these elements, but this gets old ```html
    - +

    James Watson

    Nobel Prize winner and co-discoverer of the double-helix structure of DNA

    @@ -172,13 +181,13 @@ For lists, use `