diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 896e0d7..0000000 --- a/.editorconfig +++ /dev/null @@ -1,14 +0,0 @@ -; https://editorconfig.org - -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false \ No newline at end of file diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..823d740 --- /dev/null +++ b/.env.example @@ -0,0 +1,4 @@ +// TODO: Follow https://www.tommyp.org/blog/adding-spotify-now-playing-to-astro and remove this comment +CLIENT_ID= +CLIENT_SECRET= +REFRESH_TOKEN= diff --git a/.gitignore b/.gitignore index fa10678..7166950 100644 --- a/.gitignore +++ b/.gitignore @@ -1,24 +1,52 @@ - # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* -pnpm-debug.log* -yarn.lock -# package-lock.json +lerna-debug.log* +.pnpm-debug.log* -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt -# Compiled binary addons (http://nodejs.org/api/addons.html) +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories -node_modules -jspm_packages -**/node_modules/** +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo # Optional npm cache directory .npm @@ -26,35 +54,85 @@ jspm_packages # Optional eslint cache .eslintcache +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity -# Environment variables +# dotenv environment variable files .env -.env.* -!.env.example +.env.development.local +.env.test.local +.env.production.local +.env.local -# Cache +# parcel-bundler cache (https://parceljs.org/) .cache -**/.cache +.parcel-cache -# Additonal -.vscode +# Astro .astro -.idea -.DS_Store -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -# Build output -dist/ -.output/ -.json/ +# Next.js build output +.next +out -# Wrangler output -.wrangler/ +# Nuxt.js build / generate output +.nuxt +dist +.output + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for (testing) VSCode extensions +.vscode +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# Netlify +.netlify \ No newline at end of file diff --git a/.markdownlint.json b/.markdownlint.json deleted file mode 100644 index ae399b8..0000000 --- a/.markdownlint.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "MD033": false, - "MD013": false -} diff --git a/.nojekyll b/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..af546af --- /dev/null +++ b/.prettierignore @@ -0,0 +1,44 @@ +# Dependency directories +node_modules/ +dist/ +build/ +out/ + +# Lock files +pnpm-lock.yaml +package-lock.json +yarn.lock + +# Build and generated files +*.min.* +*.bundle.* +*.map + +# Git and version control +**/.git + +# Framework-specific files +next-env.d.ts +__generated__/ + +# Test and coverage files +coverage/ +*.spec.* +*.test.* + +# Editor-specific files +.vscode/ +.idea/ +*.sublime-project +*.sublime-workspace + +# OS generated files +.DS_Store +Thumbs.db + +# Markdown and MDX files +*.md +*.mdx + +# Changelog +.changeset diff --git a/.prettierrc b/.prettierrc index 4f634ae..4e785a8 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,11 +1,29 @@ { - "plugins": ["prettier-plugin-astro"], + "plugins": ["prettier-plugin-astro", "@trivago/prettier-plugin-sort-imports"], + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": false, + "endOfLine": "lf", + "htmlWhitespaceSensitivity": "css", "overrides": [ { - "files": ["*.astro"], + "files": "*.astro", "options": { "parser": "astro" } } - ] + ], + "importOrder": [ + "", + "^@internal/(.*)$", + "^@/models/(.*)$", + "^@/utils/(.*)$", + "^@/components/(?!ui/)(.*)$", + "^@/components/ui/(.*)$", + "^[./].*(? - banner - +# Astro Portfolio Template @trueberryless ---- +[![Built with Astro](https://astro.badg.es/v2/built-with-astro/tiny.svg)](https://astro.build) -[![GitHub License](https://img.shields.io/github/license/astrogon/astrogon?color=red)](https://github.com/Kremtastic/Kremtastic.github.io/blob/main/LICENSE) [![Repo Size](https://img.shields.io/github/repo-size/kremtastic/Kremtastic.github.io)](https://github.com/Kremtastic/Kremtastic.github.io) ![GitHub branch check runs](https://img.shields.io/github/check-runs/kremtastic/Kremtastic.github.io/main) [![Website](https://img.shields.io/website?up_message=online&up_color=limegreen&down_message=offline&down_color=yellow&url=https%3A%2F%2Fastrogon.reednel.com%2F)](https://kremtastic.github.io/) +## Getting started -Heres the repo for my personal website! +1. Use this template via the GitHub UI. +2. Clone your own repo and open it in any editor of your choice (global search recommended). +3. Search for `TODO` everywhere and complete them. Be aware: to fully complete these steps it will take you around one hour, so be patient, but I promise, it will be worth it 💜 +4. Deploy your website with Netlify, Vercel or in any other possible way, Astro supports: https://docs.astro.build/en/guides/deploy/ -**Work in progress** - Please check in later. I promise it will be worth it. +## License +Licensed under the MIT license, Copyright © trueberryless. ---- -###### *Built with the Astrogon theme by Reed Nelson (MIT License)* +See [LICENSE](/LICENSE) for more information. diff --git a/astro.config.mjs b/astro.config.mjs index fb173d0..0c8f3f0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,50 +1,17 @@ -import mdx from "@astrojs/mdx"; +// @ts-check +import netlify from "@astrojs/netlify"; import react from "@astrojs/react"; -import sitemap from "@astrojs/sitemap"; -import tailwind from "@astrojs/tailwind"; -import AutoImport from "astro-auto-import"; -import { defineConfig } from "astro/config"; -import remarkCollapse from "remark-collapse"; -import remarkToc from "remark-toc"; -import rehypeKatex from "rehype-katex"; -import remarkMath from "remark-math"; +import { defineConfig, envField } from "astro/config"; // https://astro.build/config export default defineConfig({ - site: "https://kremtastic.github.io", - base: "/", - trailingSlash: "ignore", - prefetch: { - prefetchAll: true - }, - integrations: [react(), sitemap(), tailwind({ - config: { - applyBaseStyles: false - } - }), AutoImport({ - imports: ["@components/common/Button.astro", "@shortcodes/Accordion", "@shortcodes/Notice", "@shortcodes/Youtube", "@shortcodes/Tabs", "@shortcodes/Tab"] - }), mdx()], - markdown: { - remarkPlugins: [remarkToc, [remarkCollapse, { - test: "Table of contents" - }], remarkMath], - rehypePlugins: [[rehypeKatex, {}]], - shikiConfig: { - themes: { // https://shiki.style/themes - light: "light-plus", - dark: "dark-plus", - } - }, - extendDefaultPlugins: true - }, - - // Stop Vite from SSR/prebundling CommonJS packages - vite: { - ssr: { - noExternal: ["react-lite-youtube-embed"], // prevent SSR import - }, - optimizeDeps: { - exclude: ["react-lite-youtube-embed"], // don't prebundle it + integrations: [react()], + adapter: netlify(), + env: { + schema: { + CLIENT_ID: envField.string({ context: "server", access: "secret" }), + CLIENT_SECRET: envField.string({ context: "server", access: "secret" }), + REFRESH_TOKEN: envField.string({ context: "server", access: "secret" }), }, }, -}); \ No newline at end of file +}); diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 50b3bcc..0000000 --- a/docs/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# Docs - -Notes - -1. These docs are intended to be friendly and understandable for beginners, so anyone can rapidly assume ownership of this code. -2. Don't confuse these docs with the **Content Collection** called docs. - -Recommended reading order: - -1. [Tech Stack](./tech-stack.md) - Explains the choice of technologies used for this application, their limitations, and all the setup needed to get the site deployed to the internet. -2. [Project Structure](./project-structure.md) - Provides an overview of the project directory. -3. [Customization](./customization.md) - Points out the areas of highest impact for customization, and examples of this template's range. - -## Git Quick Reference - -### The Main Loop - -Once you've made all the changes you want... - -- Stage your changed files for commit: `git add .` -- Commit them, with a descriptive message: `git commit -m "message here"` -- Push the changes up to GitHub: `git push origin main` - -### Other Useful Commands - -If there's a change to any of your Node packages: `npm install` -If you mess things up real bad and just want to revert to the last commit: `git reset --hard` -When you want to pull changes down from GitHub: `git pull origin main` - -## See Also - -[Astro Documentation](https://docs.astro.build) - The official documentation for Astro. If there's an Astro topic you're confused about, you can probably find a consise and clear explanation here. diff --git a/docs/customization.md b/docs/customization.md deleted file mode 100644 index c70840a..0000000 --- a/docs/customization.md +++ /dev/null @@ -1,299 +0,0 @@ -# Customization Guide - -## Content Collections - -### Stock Content - -The written content in the template's collections was AI generated. The images are Creative Commons licenced with a paint filter applied to them. The goal was to have disposable content that better demonstrates the form of the collections than "Lorem ipsum". In case you're unsure, review my [Terms of Use](https://astrogon.reednel.com/terms/) for the policy on the use and redistribution of this content. - -### The Mechanics - -The idea of a **Content Collection** is one of Astro's most central features. A content collection is a structured way to store and retrieve content for your site. Each collection consists of one or multiple **Entries**, which, in this site, are stored in a Markdown (md, mdx) format. At the top of any of these entry files, you will find **frontmatter**. This is space designed to hold any metadata you want to add, such as an entry's publication date, author, or whatever you want. - -Adding an entry to a collection is as simple as creating a new file in the appropriate directory under `/src/content/`. For example, to add a new blog post on Bumble Bees, you would create a new file `/src/content/blog/bumble-bees.md`, and add all the necessary frontmatter. Then you can start plugging away in markdown. This is all very easy, and it's one of the best features of Astro. You can focus on writing content rather than worrying about the underlying code. - -Things get a little more complicated when you want to create a new collection (or update an existing one). Here's a brief overview of how to do that. For examples, look at one of the dozen ways each of these steps are already implemented in this template. - -1. The frontmatter we discussed must be defined in `/src/content/config.ts`. This file contains the schema for each collection. -2. To follow best Typescript practices, you should add your new collection type in `/src/content/config.ts`. -3. Add a new directory under `/src/content/` for your collection. -4. Lay out the structure of your entry's page. This will may consist of an `EntryLayout.astro` and a `CollectionLayout.astro` in the `/src/components/[collection]/` directory. These components will define how each entry and the collection as a whole will be displayed. -5. Connect the new collection to the routing structure by adding a new page in `/src/pages/` that will handle the routing for your collection. This typically involves calling `getEntries()` or `getIndex()` from the collection's config in the page's script section to retrieve the entries that will be referenced on that page. - -For more context on how the content collections work, see the [/docs/project-structure.md](/docs/project-structure.md) page. - -## Theme Colors - -By default, the pallet of this site is defined in just 7 color parameters (14 if you count their dark theme variants). - -| Name | CSS Label | Main Use | -| -------------------- | ----------- | ----------------------------------------------- | -| Text Primary | `txt-p` | header text | -| Text Secondary | `txt-s` | body text | -| Text Light | `txt-light` | indicate selected text | -| Background Primary | `bg-p` | main background (unless background is an image) | -| Background Secondary | `bg-s` | glass elements | -| Background Tertiary | `bg-t` | glass elements intended to contrast with `bg-s` | -| Border | `border` | border around glass elements | - -### Relevant Areas - -`/tailwind.config.js`: - -```js -module.exports = { - ... - theme: { - ... - extend: { - colors: { -``` - -Structural changes would be made among: - -- `/tailwind.config.js` -- `/src/styles/*` -- The inline tailwind classes in `/src/components/*` - -## Fonts - -External Resources: - -- [Google Fonts](https://fonts.google.com/) -- [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) -- [Inter Font](https://rsms.me/inter/#) -- [Manrope Font](https://www.gent.media/manrope) - -Generic font families that require no import: - -```txt -font-family: serif; -font-family: sans-serif; -font-family: monospace; -font-family: cursive; -font-family: fantasy; -font-family: system-ui; // uses the operating system's default -``` - -### Relevant Areas - -`/tailwind.config.js`: - -```js -module.exports = { - ... - theme: { - ... - extend: { - fontSize: { - ... - }, - fontFamily: { - ... - }, -``` - -#### `/src/styles/fonts.css` - -All unused fonts referneces should be removed from this file. Likewise, any new fonts should be added here. This acts as the link between the `theme.json` and the actual font file stored in `/public/fonts/`. - -#### `/public/fonts/` - -Put font files here. It is recommended to store here only the font files that are actually used in the site. The more font files there are, the slower the site will load. This template comes with a few moderate options to experiment with, but you should remove any that you don't end up using. - -A common alternative to this is to use a CDN to host the font files. This will work a little differently than shown here. Do not use a Google CDN, those dirty bastards can track your users that way. - -## Background - -By default the background is a flat color defined by the `bg-p` color parameter discussed in the **Theme Colors** section. - -### Relevant Areas - -#### `/src/base/Background.astro` - -Here I've provided three alternate kinds of background. All are commented out, but simply uncomment the desired one to use it. These are largely for demonstration purposes, and you should feel free to delete them and replace them with your own background. - -This file is referenced only in `/src/base/BaseLayout.astro`. - -#### `tailwind.config.js` - -The provided **Twinkling Star Background** and **Gradient Cycle Background** depend on animations defined in this file. - -```js -module.exports = { - theme: { - extend: { - animation: { - // Star Background - twinkle: "twinkle 5s infinite ease-in-out", - // Cycle Background - cycleBg: "cycleBg 15s ease infinite" - }, - keyframes: { - // Star Background - twinkle: { - "0%, 20%, 100%": { opacity: 1 }, - "10%": { opacity: 0.25 }, - }, - // Cycle Background - cycleBg: { - "0%, 100%": { backgroundPosition: "0% 50%" }, - "50%": { backgroundPosition: "100% 50%" }, - }, - }, - } - } -``` - -Additionally, there are code examples for single and dual-image backgrounds, depending on whether you want the background to change when the light/dark theme does. Swapping in your own images here is very straightforward. - -### Parsimony - -If you decide to use a solid color background, you can of course delete the code mentioned in the **Relevant Areas** section above. - -## Glass Effect - -One of the most powerful customization features of this template is the glass effect. By default, the template uses a true frosted glass effect, but by changing a few parameters specified below, the UI components can be given fully transparent or fully opaque backgrounds, for a more conventional website look. - -| Name | CSS Label | Main Use | -| ------------------------- | -------------------- | ------------------------------------------------------- | -| Glass | `glass` | styles the background of most components | -| Glass Tertiary | `glass-t` | for glass atop other glass, resembles the use of `bg-t` | -| Glass Tertiary Borderless | `glass-t-borderless` | ui componnents with their own border | - -Parameters: - -| Name | Explanation | -| ------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| Color | The underlying background color of the element. | -| Opacity | `0` is fully transparent and `1` is fully opaque. If a color is specified, the default opacity is `1`, and if not, it's transparent. | -| Blur | The [blur](https://tailwindcss.com/docs/blur) is applied to the element's background, and the element itself is made semi-transparent. | -| Border | The border around the element. By default this effect is subtle, but adds a nice touch to the glass effect. | -| Shadow | The shadow around the element, giving it a bit of depth. | - -### Relevant Areas - -#### `/src/styles/glass.css` - -## Animations - -The animations are fairly subtle by default. - -### Usage - -| Animation | CSS | -| ---------- | -------------------------------------------- | -| Fade | `intersect:animate-fade opacity-0` | -| Fade Up | `intersect:animate-fadeUp opacity-0` | -| Fade Down | `intersect:animate-fadeDown opacity-0` | -| Fade Right | `intersect:animate-fadeRight opacity-0` | -| Fade Left | `intersect:animate-fadeLeft opacity-0` | -| Scale | `intersect:animate-scale opacity-0 scale-50` | - -| Animation Trigger | CSS | -| ----------------------------- | -------------------- | -| Element fully in view | `intersect-full` | -| Element 50% in view | `intersect-half` | -| Element 25% in view (default) | `intersect-quarter` | -| Animate on every intersection | `intersect-repeat` | -| Animate element immediately | `intersect-no-queue` | - -### Relevant Areas - -`/tailwind.config.js`: - -```js -module.exports = { - theme: { - extend: { - animation: { - // ... - }, - keyframes: { - // ... - }, - }, - }, - plugins: [ - plugin(({ addVariant }) => { - addVariant("intersect", "&:not([no-intersect])"); - }), - ], -}; -``` - -`/src/components/base/ObserverScript.astro`: - -This is a segment of JS run as an inline ` - - - - - - - - -
-
- -
-