diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..896e0d7 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +; 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/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..878cc73 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: reednel diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fa10678 --- /dev/null +++ b/.gitignore @@ -0,0 +1,60 @@ + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +yarn.lock +# package-lock.json + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages +**/node_modules/** + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# Environment variables +.env +.env.* +!.env.example + +# Cache +.cache +**/.cache + +# Additonal +.vscode +.astro +.idea +.DS_Store +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Build output +dist/ +.output/ +.json/ + +# Wrangler output +.wrangler/ diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000..ae399b8 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,4 @@ +{ + "MD033": false, + "MD013": false +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..4f634ae --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "plugins": ["prettier-plugin-astro"], + "overrides": [ + { + "files": ["*.astro"], + "options": { + "parser": "astro" + } + } + ] +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5c72a80 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2025 Reed Nelson +Copyright (c) 2025 Kristian Takvam + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 189b2c5..e471722 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,16 @@ -# Kremtastic.github.io -Work in progress... + +
+ Astrogon Logo +
+ +--- + +[![GitHub License](https://img.shields.io/github/license/astrogon/astrogon?color=red)](https://github.com/astrogon/astrogon/blob/main/LICENSE) [![Repo Size](https://img.shields.io/github/repo-size/astrogon/astrogon)](https://github.com/astrogon/astrogon) ![GitHub branch check runs](https://img.shields.io/github/check-runs/astrogon/astrogon/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://astrogon.reednel.com/) + +Heres the repo for my personal website! + +**Work in progress** - Please check in later. I promise it will be worth it. + + +--- +###### *Built with the Astrogon theme by Reed Nelson (MIT License)* diff --git a/astro.config.mjs b/astro.config.mjs new file mode 100644 index 0000000..b25d6a1 --- /dev/null +++ b/astro.config.mjs @@ -0,0 +1,42 @@ +import mdx from "@astrojs/mdx"; +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 cloudflare from "@astrojs/cloudflare"; + +// https://astro.build/config +export default defineConfig({ + site: "https://janedoe.com", + base: "/", + trailingSlash: "ignore", + prefetch: { + prefetchAll: true + }, + adapter: cloudflare(), + 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 + }, +}); \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..50b3bcc --- /dev/null +++ b/docs/README.md @@ -0,0 +1,32 @@ +# 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 new file mode 100644 index 0000000..c70840a --- /dev/null +++ b/docs/customization.md @@ -0,0 +1,299 @@ +# 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 ` + + + + + + + + +
+
+ +
+