diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 5fd5c87..1b1977a 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -10,7 +10,7 @@ jobs: runs-on: ubuntu-latest permissions: - contents: write # This allows GitHub Actions to push changes to the repository + contents: write # This allows GitHub Actions to push changes to the repository steps: - name: Checkout code diff --git a/.prettierrc b/.prettierrc index 7ebb855..4a6d8f7 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,15 +1,26 @@ { - "useTabs": true, - "singleQuote": true, - "trailingComma": "none", - "printWidth": 100, - "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], - "overrides": [ - { - "files": "*.svelte", - "options": { - "parser": "svelte" - } - } - ] + "semi": true, + "useTabs": false, + "tabWidth": 2, + "singleQuote": false, + "jsxSingleQuote": false, + "trailingComma": "es5", + "printWidth": 120, + "endOfLine": "lf", + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte", + "svelteSortOrder": "options-scripts-markup-styles" + } + }, + { + "files": ["*.js", "*.ts"], + "options": { + "singleQuote": true + } + } + ] } diff --git a/README.md b/README.md index 0569dab..f7e1ff7 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ This is the **Himmelblau** flower shop website, built with **SvelteKit** and int --- ## 🚀 Project Overview + - **Framework**: SvelteKit (Static Site) - **CMS**: Sanity.io (for opening hours, events, and image gallery) - **Hosting**: GitHub Pages @@ -14,28 +15,35 @@ This is the **Himmelblau** flower shop website, built with **SvelteKit** and int --- ## 📌 **Setup & Installation** + ### **1️⃣ Install Dependencies** + ```bash cd ~/code/himmelblau npm install ``` ### **2️⃣ Start Local Development Server** + ```bash npm run dev ``` + - Open [http://localhost:5173](http://localhost:5173) in your browser. - The site will load with the latest Sanity content. --- ## 🖼️ **Fetching Content from Sanity** + ### **Content Managed in Sanity Studio** + - **Öffnungszeiten (Opening Hours)** - **Events & Announcements** - **Image Gallery** ### **Update Content (No Redeploy Needed!)** + 1. Go to [Sanity Studio](https://himmelblau-studio.sanity.studio). 2. Edit the content and click **Publish**. 3. The website will automatically fetch updated content. @@ -43,16 +51,21 @@ npm run dev --- ## 🔄 **Building & Deploying** + ### **Build for Production** + ```bash npm run build ``` + This generates static files in `build/`. ### **Deploy to GitHub Pages** + Deployment is handled automatically via **GitHub Actions** whenever changes are pushed to `main`. To trigger a manual deployment: + ```bash git push origin main ``` @@ -60,7 +73,9 @@ git push origin main --- ## 🌍 **Fixing CORS Issues (If Content Doesn't Load)** + If the site can’t fetch data from Sanity: + 1. Go to [Sanity API Settings](https://www.sanity.io/manage). 2. Under **CORS Origins**, make sure this is added: ``` @@ -72,16 +87,18 @@ If the site can’t fetch data from Sanity: --- ## ⚡ **Common Commands** -| Command | Description | -|----------------------------|-------------| -| `npm install` | Install dependencies. | -| `npm run dev` | Start local development server. | -| `npm run build` | Build for production. | -| `npm run preview` | Preview the production build. | + +| Command | Description | +| ----------------- | ------------------------------- | +| `npm install` | Install dependencies. | +| `npm run dev` | Start local development server. | +| `npm run build` | Build for production. | +| `npm run preview` | Preview the production build. | --- ## ❓ **Need Help?** + - **Check the Console** (`F12 → Console`) if something isn’t loading. - **Sanity Studio Issues?** Try redeploying: ```bash diff --git a/eslint.config.js b/eslint.config.js index aa5987f..bdc987f 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -8,27 +8,27 @@ import ts from 'typescript-eslint'; const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url)); export default ts.config( - includeIgnoreFile(gitignorePath), - js.configs.recommended, - ...ts.configs.recommended, - ...svelte.configs['flat/recommended'], - prettier, - ...svelte.configs['flat/prettier'], - { - languageOptions: { - globals: { - ...globals.browser, - ...globals.node - } - } - }, - { - files: ['**/*.svelte'], + includeIgnoreFile(gitignorePath), + js.configs.recommended, + ...ts.configs.recommended, + ...svelte.configs['flat/recommended'], + prettier, + ...svelte.configs['flat/prettier'], + { + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + }, + }, + }, + { + files: ['**/*.svelte'], - languageOptions: { - parserOptions: { - parser: ts.parser - } - } - } + languageOptions: { + parserOptions: { + parser: ts.parser, + }, + }, + } ); diff --git a/package.json b/package.json index fd827dd..4a9e923 100644 --- a/package.json +++ b/package.json @@ -1,43 +1,43 @@ { - "name": "himmelblau", - "private": true, - "version": "0.0.1", - "type": "module", - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", - "format": "prettier --write .", - "lint": "prettier --check . && eslint ." - }, - "devDependencies": { - "@eslint/compat": "^1.2.3", - "@eslint/js": "^9.17.0", - "@sveltejs/adapter-static": "^3.0.6", - "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^4.0.0", - "autoprefixer": "^10.4.20", - "eslint": "^9.7.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-svelte": "^2.36.0", - "globals": "^15.0.0", - "prettier": "^3.3.2", - "prettier-plugin-svelte": "^3.2.6", - "prettier-plugin-tailwindcss": "^0.6.5", - "svelte": "^5.0.0", - "svelte-check": "^4.0.0", - "tailwindcss": "^3.4.9", - "ts-node": "^10.9.2", - "typescript": "^5.0.0", - "typescript-eslint": "^8.0.0", - "vite": "^5.4.11" - }, - "dependencies": { - "@sanity/client": "^6.27.2", - "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/forms": "^0.5.9", - "@tailwindcss/typography": "^0.5.15" - } + "name": "himmelblau", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "format": "prettier --write .", + "lint": "prettier --check . && eslint ." + }, + "devDependencies": { + "@eslint/compat": "^1.2.3", + "@eslint/js": "^9.17.0", + "@sveltejs/adapter-static": "^3.0.6", + "@sveltejs/kit": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "autoprefixer": "^10.4.20", + "eslint": "^9.7.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-svelte": "^2.36.0", + "globals": "^15.0.0", + "prettier": "^3.3.2", + "prettier-plugin-svelte": "^3.2.6", + "prettier-plugin-tailwindcss": "^0.6.5", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "tailwindcss": "^3.4.9", + "ts-node": "^10.9.2", + "typescript": "^5.0.0", + "typescript-eslint": "^8.0.0", + "vite": "^5.4.11" + }, + "dependencies": { + "@sanity/client": "^6.27.2", + "@tailwindcss/container-queries": "^0.1.1", + "@tailwindcss/forms": "^0.5.9", + "@tailwindcss/typography": "^0.5.15" + } } diff --git a/postcss.config.js b/postcss.config.js index 0f77216..2aa7205 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ export default { - plugins: { - tailwindcss: {}, - autoprefixer: {} - } + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, }; diff --git a/src/app.css b/src/app.css index bb2c13f..4399784 100644 --- a/src/app.css +++ b/src/app.css @@ -1,21 +1,21 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; .logo { - width: 100%; + width: 100%; } aside > div { - position: relative; - display: flex; - flex-direction: column; + position: relative; + display: flex; + flex-direction: column; } aside nav { - display: flex; - flex-direction: column; - gap: 1rem; - justify-content: space-between; - height: 100%; -} \ No newline at end of file + display: flex; + flex-direction: column; + gap: 1rem; + justify-content: space-between; + height: 100%; +} diff --git a/src/app.d.ts b/src/app.d.ts index da08e6d..520c421 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,13 +1,13 @@ // See https://svelte.dev/docs/kit/types#app.d.ts // for information about these interfaces declare global { - namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface PageState {} - // interface Platform {} - } + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } } export {}; diff --git a/src/app.html b/src/app.html index 926f1e6..b949944 100644 --- a/src/app.html +++ b/src/app.html @@ -1,22 +1,25 @@ - - - Blumenladen "himmelblau" - Berlin + + + Blumenladen "himmelblau" - Berlin - + - - + + - - - - + + + + - %sveltekit.head% - - -
%sveltekit.body%
- + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/src/lib/sanityClient.ts b/src/lib/sanityClient.ts index 76692ad..475dffd 100644 --- a/src/lib/sanityClient.ts +++ b/src/lib/sanityClient.ts @@ -1,11 +1,11 @@ import { createClient } from '@sanity/client'; const client = createClient({ - projectId: 'oy7j0u07', // Sanity project ID for this project - dataset: 'production', - useCdn: false, // Set to true for faster performance in production - apiVersion: '2024-01-29', // Keep this date to ensure compatibility - // token: import.meta.env.VITE_SANITY_TOKEN, + projectId: 'oy7j0u07', // Sanity project ID for this project + dataset: 'production', + useCdn: false, // Set to true for faster performance in production + apiVersion: '2024-01-29', // Keep this date to ensure compatibility + // token: import.meta.env.VITE_SANITY_TOKEN, }); export default client; diff --git a/src/lib/types.ts b/src/lib/types.ts index 2544015..6198e0b 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,11 +1,11 @@ export type NavLink = { - title: string; - url: string; - color?: string; - hoverColor?: string; + title: string; + url: string; + color?: string; + hoverColor?: string; }; export type NavigationData = { - navLinks: NavLink[]; - footerLinks: { title: string; url: string }[]; + navLinks: NavLink[]; + footerLinks: { title: string; url: string }[]; }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e26ed0a..7130b87 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,48 +1,43 @@
+ + + +
+ {@render children()} +
\ No newline at end of file + aside a { + /* font-weight: 700; */ + /* letter-spacing: 0.025em; */ + } + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index dd548f3..a4527e4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,135 +1,128 @@
-

- Im kleinen - - Blumenladen - - himmelblau -
- gibt es schöne Blumen für -
- Liebeserklärungen, Hochzeiten und -
- auch für die einfachen kleinen Anlässe. -

- -
- himmelblaue Ladentür -
-

- Die himmelblaue Ladentür -
- öffnet sich in dieser Woche *) -
- {#each groupedHours as { days, hours }, i} - am - {#if days.length === 2} - {days[0]} & {days[1]} - {:else} - {days.slice(0, -1).join(", ")} & {days[days.length - 1]} - {/if} -
- {hours} - {#if i < groupedHours.length - 1} -
- {/if} - {/each} - -

-

- Markelstraße 13
- 12163 Berlin Steglitz -

-

- Mona Hahne
- "Frau Himmelblau" -

-
- - - blumen@himmelblau.de - -
-

- *) Die Öffnungszeiten
- des kleinen Blumenladens
- wechseln manchmal ein wenig,
- denn es gibt viele Orte
- und oft auch schöne Feste,
- die Frau Himmelblau mit
- himmelblauen & bunten Blumen
- schmücken darf.
-

- Raumdekorationen
- und besondere Bestellungen
- für Hochzeiten, Geburtstage,
- Taufen und Trauerfeiern
- sind -nach Absprache- an
- allen Tagen der Woche möglich! -

+

+

+ Markelstraße 13
+ 12163 Berlin Steglitz +

+

+ Mona Hahne
+ "Frau Himmelblau" +

+
+ + blumen@himmelblau.de + +
+

+ *) Die Öffnungszeiten
+ des kleinen Blumenladens
+ wechseln manchmal ein wenig,
+ denn es gibt viele Orte
+ und oft auch schöne Feste,
+ die Frau Himmelblau mit
+ himmelblauen & bunten Blumen
+ schmücken darf.
+

+ Raumdekorationen
+ und besondere Bestellungen
+ für Hochzeiten, Geburtstage,
+ Taufen und Trauerfeiern
+ sind -nach Absprache- an
+ allen Tagen der Woche möglich! +

\ No newline at end of file + .door-frame:hover .door { + transform: rotateY(24deg); + } + diff --git a/src/routes/bildergalerie/+page.svelte b/src/routes/bildergalerie/+page.svelte index 0209e49..dd10152 100644 --- a/src/routes/bildergalerie/+page.svelte +++ b/src/routes/bildergalerie/+page.svelte @@ -1,3 +1,2 @@

Coming Soon: Bildergalerie

This page is under construction.

- diff --git a/src/routes/bluetenspuren/+page.svelte b/src/routes/bluetenspuren/+page.svelte index e3eab5e..17bb3e1 100644 --- a/src/routes/bluetenspuren/+page.svelte +++ b/src/routes/bluetenspuren/+page.svelte @@ -1,3 +1,2 @@

Coming Soon: Blüten Spuren

This page is under construction.

- diff --git a/src/routes/datenschutz/+page.svelte b/src/routes/datenschutz/+page.svelte index 8fc7b92..b112e4e 100644 --- a/src/routes/datenschutz/+page.svelte +++ b/src/routes/datenschutz/+page.svelte @@ -1,3 +1,2 @@

Coming Soon: Datenschutz

This page is under construction.

- diff --git a/src/routes/impressum/+page.svelte b/src/routes/impressum/+page.svelte index 4a347ed..85ada02 100644 --- a/src/routes/impressum/+page.svelte +++ b/src/routes/impressum/+page.svelte @@ -1,3 +1,2 @@

Coming Soon: Impressum

This page is under construction.

- diff --git a/svelte.config.js b/svelte.config.js index bae31b1..bfb6eda 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -3,22 +3,22 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://svelte.dev/docs/kit/integrations - // for more information about preprocessors - preprocess: vitePreprocess(), + // Consult https://svelte.dev/docs/kit/integrations + // for more information about preprocessors + preprocess: vitePreprocess(), - kit: { - // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. - // If your environment is not supported, or you settled on a specific environment, switch out the adapter. - // See https://svelte.dev/docs/kit/adapters for more information about adapters. - adapter: adapter(), - paths: { - base: process.env.NODE_ENV === 'production' ? '/himmelblau' : '', // Use '/himmelblau' in production, '' locally - }, - prerender: { - handleHttpError: 'warn', // Suppress 404 errors for now - }, - } + kit: { + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. + // If your environment is not supported, or you settled on a specific environment, switch out the adapter. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. + adapter: adapter(), + paths: { + base: process.env.NODE_ENV === 'production' ? '/himmelblau' : '', // Use '/himmelblau' in production, '' locally + }, + prerender: { + handleHttpError: 'warn', // Suppress 404 errors for now + }, + }, }; export default config; diff --git a/tailwind.config.ts b/tailwind.config.ts index d4f8cc1..b48b78e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -4,53 +4,53 @@ import typography from '@tailwindcss/typography'; import type { Config } from 'tailwindcss'; export default { - content: ['./src/**/*.{html,js,svelte,ts}'], + content: ['./src/**/*.{html,js,svelte,ts}'], - theme: { - extend: { - colors: { - 'sky-blue': '#cdeaf7', // Himmelblau - softwhite: '#fefcfb', // Soft White - // lavender: '#f3e8ff', // Pastel Lavender - mint: '#edfbee', // Pale Mint * - // beige: '#fff4e6', // Creamy Beige - // blush: '#ffe8ed', // Pale Blush Pink - sage: '#e3f2e1', // Sage Green - // moss: '#d9e4d5', // Pale Moss - // ecru: '#f0ede1', // Ecru Green - mist: '#e8ecef', // Misty Grey + theme: { + extend: { + colors: { + 'sky-blue': '#cdeaf7', // Himmelblau + softwhite: '#fefcfb', // Soft White + // lavender: '#f3e8ff', // Pastel Lavender + mint: '#edfbee', // Pale Mint * + // beige: '#fff4e6', // Creamy Beige + // blush: '#ffe8ed', // Pale Blush Pink + sage: '#e3f2e1', // Sage Green + // moss: '#d9e4d5', // Pale Moss + // ecru: '#f0ede1', // Ecru Green + mist: '#e8ecef', // Misty Grey - // Text: - 'deep-moss': '#223928', // Deep Moss Green - charcoal: '#333333', // Charcoal Grey - brown: '#5a4631', // Soft Earth Brown - taupe: '#7d7064', // Warm Taupe - slate: '#4b5563', // Slate Grey - teal: '#1c3838', // Dark Teal + // Text: + 'deep-moss': '#223928', // Deep Moss Green + charcoal: '#333333', // Charcoal Grey + brown: '#5a4631', // Soft Earth Brown + taupe: '#7d7064', // Warm Taupe + slate: '#4b5563', // Slate Grey + teal: '#1c3838', // Dark Teal - // Links: - navy: '#1e3a5f', // Navy Blue - gold: '#f0a500', // Soft Gold or #d1a854 - coral: '#ff725e', // Pastel Coral + // Links: + navy: '#1e3a5f', // Navy Blue + gold: '#f0a500', // Soft Gold or #d1a854 + coral: '#ff725e', // Pastel Coral - // Bluebell Colors: - bluebell: '#097ff7', - 'bluebell-light': '#5aaefc', - cyan: '#21dae1', - 'cyan-light': '#7deff3', - 'leaf-green': '#73e8ac', // Leaf Green - 'stem-green': '#22c662', // Stem Green - }, - fontFamily: { - amaticSC: ['Amatic SC', 'cursive'], // Navigation/Links - sacramento: ['Sacramento', 'cursive'], - architectsDaughter: ['Architects Daughter', 'cursive'], - patrickHand: ['Patrick Hand', 'cursive'], - dancingScript: ['Dancing Script', 'cursive'], - nunito: ['Nunito', 'sans-serif'], // Text - }, - } - }, + // Bluebell Colors: + bluebell: '#097ff7', + 'bluebell-light': '#5aaefc', + cyan: '#21dae1', + 'cyan-light': '#7deff3', + 'leaf-green': '#73e8ac', // Leaf Green + 'stem-green': '#22c662', // Stem Green + }, + fontFamily: { + amaticSC: ['Amatic SC', 'cursive'], // Navigation/Links + sacramento: ['Sacramento', 'cursive'], + architectsDaughter: ['Architects Daughter', 'cursive'], + patrickHand: ['Patrick Hand', 'cursive'], + dancingScript: ['Dancing Script', 'cursive'], + nunito: ['Nunito', 'sans-serif'], // Text + }, + }, + }, - plugins: [typography, forms, containerQueries] + plugins: [typography, forms, containerQueries], } satisfies Config; diff --git a/tsconfig.json b/tsconfig.json index 0b2d886..f4d0a0e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,19 +1,19 @@ { - "extends": "./.svelte-kit/tsconfig.json", - "compilerOptions": { - "allowJs": true, - "checkJs": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "sourceMap": true, - "strict": true, - "moduleResolution": "bundler" - } - // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias - // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files - // - // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes - // from the referenced tsconfig.json - TypeScript does not merge them in + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "moduleResolution": "bundler" + } + // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias + // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in } diff --git a/vite.config.ts b/vite.config.ts index bbf8c7d..2e920e4 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ - plugins: [sveltekit()] + plugins: [sveltekit()], });