diff --git a/nodsoft_moltenobsidian_web/package.json b/nodsoft_moltenobsidian_web/package.json index e7f7137..162ef6c 100644 --- a/nodsoft_moltenobsidian_web/package.json +++ b/nodsoft_moltenobsidian_web/package.json @@ -10,6 +10,8 @@ "astro": "astro" }, "dependencies": { - "astro": "^2.10.1" + "astro": "^2.10.1", + "bootstrap-icons": "^1.10.5", + "sass": "^1.64.2" } } \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/pnpm-lock.yaml b/nodsoft_moltenobsidian_web/pnpm-lock.yaml index 6a3ba08..a0dfcb5 100644 --- a/nodsoft_moltenobsidian_web/pnpm-lock.yaml +++ b/nodsoft_moltenobsidian_web/pnpm-lock.yaml @@ -7,7 +7,13 @@ settings: dependencies: astro: specifier: ^2.10.1 - version: 2.10.1 + version: 2.10.1(sass@1.64.2) + bootstrap-icons: + specifier: ^1.10.5 + version: 1.10.5 + sass: + specifier: ^1.64.2 + version: 1.64.2 packages: @@ -52,7 +58,7 @@ packages: astro: ^2.5.0 dependencies: '@astrojs/prism': 2.1.2 - astro: 2.10.1 + astro: 2.10.1(sass@1.64.2) github-slugger: 1.5.0 import-meta-resolve: 2.2.2 rehype-raw: 6.1.1 @@ -968,7 +974,7 @@ packages: resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} dev: false - /astro@2.10.1: + /astro@2.10.1(sass@1.64.2): resolution: {integrity: sha512-t3y9laRaOZTAu6omVpI5x/wE80t2yTCWO/UTCPJYAYy2Aoi+snupwk8ZFBLgVd0lwO7KhjRKA0pUScfkn3bnXw==} engines: {node: '>=16.12.0', npm: '>=6.14.0'} hasBin: true @@ -1031,7 +1037,7 @@ packages: typescript: 5.1.6 unist-util-visit: 4.1.2 vfile: 5.3.7 - vite: 4.4.8 + vite: 4.4.8(sass@1.64.2) vitefu: 0.2.4(vite@4.4.8) which-pm: 2.0.0 yargs-parser: 21.1.1 @@ -1073,6 +1079,10 @@ packages: readable-stream: 3.6.2 dev: false + /bootstrap-icons@1.10.5: + resolution: {integrity: sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==} + dev: false + /boxen@6.2.1: resolution: {integrity: sha512-H4PEsJXfFI/Pt8sjDWbHlQPx4zL/bvSQjcilJmaulGt5mLDorHOHpmdXAJcBcmru7PhYSp/cDMWRko4ZUMFkSw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1739,6 +1749,10 @@ packages: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: false + /immutable@4.3.2: + resolution: {integrity: sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==} + dev: false + /import-meta-resolve@2.2.2: resolution: {integrity: sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA==} dev: false @@ -2804,6 +2818,16 @@ packages: suf-log: 2.5.3 dev: false + /sass@1.64.2: + resolution: {integrity: sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.2 + source-map-js: 1.0.2 + dev: false + /section-matter@1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} engines: {node: '>=4'} @@ -3169,7 +3193,7 @@ packages: vfile-message: 3.1.4 dev: false - /vite@4.4.8: + /vite@4.4.8(sass@1.64.2): resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -3200,6 +3224,7 @@ packages: esbuild: 0.18.17 postcss: 8.4.27 rollup: 3.27.1 + sass: 1.64.2 optionalDependencies: fsevents: 2.3.2 dev: false @@ -3212,7 +3237,7 @@ packages: vite: optional: true dependencies: - vite: 4.4.8 + vite: 4.4.8(sass@1.64.2) dev: false /vscode-css-languageservice@6.2.6: diff --git a/nodsoft_moltenobsidian_web/src/components/BaseHead.astro b/nodsoft_moltenobsidian_web/src/components/BaseHead.astro new file mode 100644 index 0000000..139747a --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/components/BaseHead.astro @@ -0,0 +1,37 @@ +--- +interface Props { + title: string; + description: string; + image?: string; +} + +// const canonicalURL = new URL(Astro.url.pathname, Astro.site); + +const { title, description} = Astro.props; +--- + + + + + + + + + + + +{title} + + + + + + + + + + + + + + \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/src/components/Card.astro b/nodsoft_moltenobsidian_web/src/components/Card.astro index bd6d597..3913818 100644 --- a/nodsoft_moltenobsidian_web/src/components/Card.astro +++ b/nodsoft_moltenobsidian_web/src/components/Card.astro @@ -1,4 +1,6 @@ --- +import "./Card.astro.scss" + interface Props { title: string; body: string; @@ -10,52 +12,7 @@ const { href, title, body } = Astro.props;
  • -

    - {title} - → -

    -

    - {body} -

    +

    {title}→

    +

    {body}
    • - diff --git a/nodsoft_moltenobsidian_web/src/components/Card.astro.scss b/nodsoft_moltenobsidian_web/src/components/Card.astro.scss new file mode 100644 index 0000000..2ce505c --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/components/Card.astro.scss @@ -0,0 +1,45 @@ +@use "../styles/variables" as *; + +.link-card { + list-style: none; + display: flex; + padding: 1px; + background-color: #23262d; + background-image: none; + background-size: 400%; + border-radius: 7px; + background-position: 100%; + transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); + box-shadow: inset 0 0 0 1px rgba(white, 0.1); + + a { + width: 100%; + text-decoration: none; + line-height: 1.4; + padding: calc(1.5rem - 1px); + border-radius: 8px; + color: white; + background-color: #23262d; + opacity: 0.8; + } + + h2 { + margin: 0; + font-size: 1.25rem; + transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); + } + + p { + margin-top: 0.5rem; + margin-bottom: 0; + } + + &:is(:hover, :focus-within) { + background-position: 0; + background-image: $accent-gradient; + + & h2 { + color: $accent-light; + } + } +} \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/src/components/NavLink.astro b/nodsoft_moltenobsidian_web/src/components/NavLink.astro new file mode 100644 index 0000000..3dd439b --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/components/NavLink.astro @@ -0,0 +1,24 @@ +--- +import type { HTMLAttributes } from 'astro/types'; + +type Props = HTMLAttributes<'a'>; + +const { href, class: className, ...props } = Astro.props; + +const { pathname } = Astro.url; +const isActive = href === pathname || href === pathname.replace(/\/$/, ''); +--- + + + + + diff --git a/nodsoft_moltenobsidian_web/src/components/Navbar.astro b/nodsoft_moltenobsidian_web/src/components/Navbar.astro new file mode 100644 index 0000000..52ceb08 --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/components/Navbar.astro @@ -0,0 +1,27 @@ +--- +import "./Navbar.astro.scss" +import NavLink from './NavLink.astro'; +import { SITE_TITLE } from '../consts'; +--- + +
    + +
    + diff --git a/nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss b/nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss new file mode 100644 index 0000000..88802bc --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss @@ -0,0 +1,48 @@ +header { + margin: 0; + padding: 0 1em; + //background: white; + box-shadow: 0 2px 8px rgba(var(--black), 5%); +} + + +//h2 a, +//h2 a.active { +// text-decoration: none; +//} +nav { + display: flex; + align-items: center; + justify-content: space-between; + + & a { + padding: 1rem 0.5rem; + //color: var(--black); + border-bottom: 4px solid transparent; + text-decoration: none; + + border-radius: 8px; + color: white; + opacity: 0.8; + + &.active { + text-decoration: none; + //border-bottom-color: var(--accent); + } + } +} + +.navbar-brand { + font-size: 1.5rem; + margin-right: 1.5rem; +} + +.social-links { + &, a { + display: flex; + } + + @media (max-width: 720px) { + display: none; + } +} \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/src/consts.ts b/nodsoft_moltenobsidian_web/src/consts.ts new file mode 100644 index 0000000..0cad5ee --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/consts.ts @@ -0,0 +1,5 @@ +// Place any global data in this file. +// You can import this data from anywhere in your site by using the `import` keyword. + +export const SITE_TITLE = 'MoltenObsidian'; +// export const SITE_DESCRIPTION = 'Welcome to my website!'; diff --git a/nodsoft_moltenobsidian_web/src/env.d.ts b/nodsoft_moltenobsidian_web/src/env.d.ts index f964fe0..acef35f 100644 --- a/nodsoft_moltenobsidian_web/src/env.d.ts +++ b/nodsoft_moltenobsidian_web/src/env.d.ts @@ -1 +1,2 @@ +/// /// diff --git a/nodsoft_moltenobsidian_web/src/layouts/Layout.astro b/nodsoft_moltenobsidian_web/src/layouts/Layout.astro index 3345b88..dcf6b38 100644 --- a/nodsoft_moltenobsidian_web/src/layouts/Layout.astro +++ b/nodsoft_moltenobsidian_web/src/layouts/Layout.astro @@ -1,39 +1,39 @@ ---- +--- +import "../styles/_global.scss" +import BaseHead from "../components/BaseHead.astro"; +import Header from "../components/Navbar.astro"; +import { SITE_TITLE } from "../consts"; + + interface Props { title: string; + description: string; } -const { title } = Astro.props; +const { title, description } = Astro.props; + +const baseHeadTitle = title ? `${title} - ${SITE_TITLE}` : SITE_TITLE; --- + + + - - {title} + - +
    + +
    + +
    - + + diff --git a/nodsoft_moltenobsidian_web/src/pages/vault/[...path].astro b/nodsoft_moltenobsidian_web/src/pages/vault/[...path].astro new file mode 100644 index 0000000..66f5f81 --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/pages/vault/[...path].astro @@ -0,0 +1,16 @@ +--- +import Layout from '../../layouts/Layout.astro'; + +export function getStaticPaths() { + return [ + {params: {path: 'one/two/three' }}, + {params: {path: 'four' }}, + {params: {path: undefined }} + ] +} + +const { path } = Astro.params; +--- + +

    Path: {path ?? "undefined"}

    +     \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/src/styles/_global.scss b/nodsoft_moltenobsidian_web/src/styles/_global.scss new file mode 100644 index 0000000..7be97f3 --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/styles/_global.scss @@ -0,0 +1,95 @@ +@use "variables" as *; +@use "mixins" as *; +@import url("https://fonts.googleapis.com/css2?family=Nunito"); + + +html { + font-family: Nunito, system-ui, sans-serif; + background: #13151A; + background-size: 224px; +} + +code { + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +} + +main { + margin: auto; + padding: 1rem; + width: 800px; + max-width: calc(100% - 2rem); + color: white; + font-size: 20px; + line-height: 1.6; +} + +.astro-a { + position: absolute; + top: -32px; + left: 50%; + transform: translatex(-50%); + width: 220px; + height: auto; + z-index: -1; +} + +h1 { + @include font-styles(4rem); +} + +h2 { + @include font-styles(3.5rem); +} + +h3 { + @include font-styles(3rem); +} + +h4 { + @include font-styles(2.5rem); +} + +h5 { + @include font-styles(2rem); +} + +h6 { + @include font-styles(1.5rem); +} + +.text-gradient { + background-image: $accent-gradient; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; +} + +.instructions { + margin-bottom: 2rem; + border: 1px solid rgba($accent-light, 0.25); + background: linear-gradient(rgba($accent-dark, 0.66), rgba($accent-dark, 0.33)); + padding: 1.5rem; + border-radius: 8px; + + & code { + font-size: 0.8em; + font-weight: bold; + background: rgba($accent-light, 0.12); + color: $accent-light; + border-radius: 4px; + padding: 0.3em 0.4em; + } + + & strong { + color: $accent-light + } +} + +.link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 2rem; + padding: 0; +} \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/src/styles/_mixins.scss b/nodsoft_moltenobsidian_web/src/styles/_mixins.scss new file mode 100644 index 0000000..92b5072 --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/styles/_mixins.scss @@ -0,0 +1,7 @@ +@mixin font-styles($size, $weight: 700, $line-height: 1, $align: center, $margin-bottom: 1em) { + font-size: $size; + font-weight: $weight; + line-height: $line-height; + text-align: $align; + margin-bottom: $margin-bottom; +} diff --git a/nodsoft_moltenobsidian_web/src/styles/_variables.scss b/nodsoft_moltenobsidian_web/src/styles/_variables.scss new file mode 100644 index 0000000..fcf3773 --- /dev/null +++ b/nodsoft_moltenobsidian_web/src/styles/_variables.scss @@ -0,0 +1,4 @@ +$accent: #883AEB; +$accent-light: #E0CCFA; +$accent-dark: #310A65; +$accent-gradient: linear-gradient(45deg, $accent, $accent-light 30%, white 60%); \ No newline at end of file diff --git a/nodsoft_moltenobsidian_web/tsconfig.json b/nodsoft_moltenobsidian_web/tsconfig.json index 77da9dd..874abdd 100644 --- a/nodsoft_moltenobsidian_web/tsconfig.json +++ b/nodsoft_moltenobsidian_web/tsconfig.json @@ -1,3 +1,4 @@ { - "extends": "astro/tsconfigs/strict" + "extends": "astro/tsconfigs/strict", + "include": ["src"], } \ No newline at end of file