Skip to content

Commit ef7f671

Browse files
mokollmarmokollmar
committed
first commit
0 parents  commit ef7f671

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+672
-0
lines changed

‎.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/.netlify
6+
/package
7+
.env
8+
.env.*
9+
!.env.example
10+
vite.config.js.timestamp-*
11+
vite.config.ts.timestamp-*

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎README.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# Svelte-Netlify-Demo
2+
🚀 Welcome to the perfect repository for your Svelte & Netlify projects! This repository is the perfect starting-off point, equipped with a fully functional Netlify contact form, a [PageSpeed] (https://pagespeed.web.dev/analysis/https-svelte-netlify-demo-netlify-app/o8xryfd6zs?form_factor=desktop) score of 100 in Performance/SEO, standard header-footer layout, extensive customization options, and advanced features for both Svelte and Netlify. Have fun building your project! 🎉
3+
4+
## Table of Contents
5+
1. [Features](#features)
6+
- [In-Short](#in-short)
7+
- [In-Detail](#in-detail)
8+
2. [Installation](#installation)
9+
3. [Packages](#packages)
10+
4. [Screenshots](#screenshots)
11+
5. [Contributing](#contributing)
12+
6. [Demo](#demo)
13+
14+
15+
16+
## 🌟 Features
17+
18+
### In-Short
19+
- [x] ⚡️ **Performance** performance-optimised from the start
20+
- [x] 👀 **SEO** working Sitemap.xml, Robots.txt, page titles and descriptions
21+
- [x] 🌐 **Netlify** can be directly uploaded to Netlify
22+
- [x] 🛠️ **Tailwind** nice looking modern UI, fully integrated Tailwind
23+
- [x] 🎨 **Customizable** custom error pages and custom reusable colors
24+
- [x] 📱 **Responsivess** looks beautiful on all Viewports
25+
- [x] 💬 **Contact Form** fully working Netlify contact form
26+
27+
Additional features:
28+
- [x] custom Netlify 404 Page with _redirects
29+
- [x] custom local Google Font Integration
30+
- [x] standard header and footer structure
31+
- [x] enhanced:img and lazy loading
32+
- [x] Slug passing from the laod function
33+
- [x] device-specific Favicons / all Meta Tags
34+
- [x] local variables and store writables
35+
36+
37+
### In-Detail
38+
39+
**Performance**
40+
The repository utilizes the @sveltejs/enhanced-img plugin, which boosts performance by optimizing image sizes and formats, reducing layout shifts, and decreasing loading times. We also implement lazy loading, delaying the loading of non-critical resources such as images or videos until they are needed, significantly accelerating the initial page load time. Additionally, the project uses local fonts, eliminating the need to download fonts from the web, thereby reducing webpage loading times and preventing display delays.
41+
42+
**SEO**
43+
The repository features a working Sitemap.xml, which is due to Netlify's handling of server-side JavaScript in the static folder. For now, the Sitemap.xml <url> tags need to be added manually. The current Robots.txt configuration allows all crawlers to index all pages. Inside the app.html, we have added title, description, and all relevant meta and Open Graph tags.
44+
45+
**Netlify**
46+
This repository can be directly uploaded and hosted by Netlify. We added the correctly working netlify.toml configuration and the Netlify adapter. All pages are prerendered to be hosted as static sites on Netlify. We also added the _redirects configuration, which redirects users in the event of a 404 status to the custom 404 page.
47+
48+
**Tailwind**
49+
Tailwind CSS is fully configured through the tailwind.config.js file in our Svelte template. We have also introduced a custom primary color setting that allows for the modification of the entire page's appearance.
50+
51+
**Customizable**
52+
We added custom error pages and a completley customized Header and Footer.
53+
54+
**Responsivess**
55+
The repository utilizes responsive Tailwind CSS classes to ensure that all pages display correctly across various devices, maintaining the appropriate format and size. We have also included custom favicons in all the necessary sizes for platforms like Chrome and iOS, ensuring that shortcuts and app icons are displayed accurately.
56+
57+
**Contact Form**
58+
We have integrated a fully customized contact form that is seamlessly recognized by Netlify's form detection system. To activate form detection on your Netlify site, navigate to the "Forms" tab. Within this section, you can set up the form so that submissions are forwarded to an email address or other specified channels. Following a successful submission, our setup displays a custom success page, which automatically redirects to the home page after five seconds.
59+
60+
**Additonal Features**
61+
We've incorporated a load function capable of passing slugs via the route: /page/[slug]. Additionally, we have implemented a local variable that tracks the total number of visits to the route page. This count is stored on the user's device and can be accessed through a Svelte writable store.
62+
63+
64+
65+
## ⚙️ Installation
66+
To set up this Svelte-Netlify-Demo and use it as a template, follow these steps:
67+
68+
1. Clone the repository:
69+
```sh
70+
git clone https://github.com/mokollmar/svelte-netlify-demo.git
71+
```
72+
2. Navigate to the project directory:
73+
```sh
74+
cd Svelte-Netlify-Demo
75+
```
76+
3. Install all the dependencies
77+
```sh
78+
npm install
79+
```
80+
81+
82+
83+
## 📦 Packages
84+
If you're curious, this repository utilizes the following non-default packages:
85+
```
86+
tailwindcss / postcss / autoprefixer / adapter-netlify / enhanced-img
87+
```
88+
89+
90+
## 🏙️ Screenshots
91+
The PageSpeed result:
92+
https://github.com/mokollmar/svelte-netlify-demo/blob/main/screenshots/s1
93+
94+
The Root Page:
95+
https://github.com/mokollmar/svelte-netlify-demo/blob/main/screenshots/s2
96+
97+
The Netlify Contact Form:
98+
https://github.com/mokollmar/svelte-netlify-demo/blob/main/screenshots/s3
99+
100+
Netlify active Forms and Notification Config:
101+
https://github.com/mokollmar/svelte-netlify-demo/blob/main/screenshots/s3
102+
103+
104+
105+
## 📍 Demo
106+
To visit the live demo website, click [here](https://svelte-netlify-demo.netlify.app).
107+
108+
109+
110+
## 👨‍💻 Contributing
111+
Feel free to fork the repository, make modifications, and submit a pull request. Here are some ways you can contribute:
112+
- Enhance existing features by fixing bugs and implementing improvements.
113+
- Propose new features that you believe would be beneficial.
114+
- Enhance the documentation to make it even more accessible and user-friendly.

‎Screenshots/s1.png

87.8 KB
Loading

‎Screenshots/s2.png

140 KB
Loading

‎Screenshots/s3.png

60.5 KB
Loading

‎Screenshots/s4.png

83.4 KB
Loading

‎_redirects

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* /404 404

‎eslint.config.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import js from '@eslint/js';
2+
import svelte from 'eslint-plugin-svelte';
3+
import globals from 'globals';
4+
5+
/** @type {import('eslint').Linter.FlatConfig[]} */
6+
export default [
7+
js.configs.recommended,
8+
...svelte.configs['flat/recommended'],
9+
{
10+
languageOptions: {
11+
globals: {
12+
...globals.browser,
13+
...globals.node
14+
}
15+
}
16+
},
17+
{
18+
ignores: ['build/', '.svelte-kit/', 'dist/']
19+
}
20+
];

‎netlify.toml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[build]
2+
command = "npm run build"
3+
publish = "build"
4+
[[headers]]
5+
for = "/fonts/*"
6+
[headers.values]
7+
cache-control = '''
8+
public,
9+
max-age=31536000'''

‎package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "svelte-netlify-website",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"lint": "eslint ."
10+
},
11+
"devDependencies": {
12+
"@sveltejs/adapter-netlify": "^4.2.0",
13+
"@sveltejs/enhanced-img": "^0.2.1",
14+
"@sveltejs/kit": "^2.0.0",
15+
"@sveltejs/vite-plugin-svelte": "^3.0.0",
16+
"@types/eslint": "^8.56.7",
17+
"autoprefixer": "^10.4.19",
18+
"eslint": "^9.0.0",
19+
"eslint-plugin-svelte": "^2.36.0",
20+
"globals": "^15.0.0",
21+
"postcss": "^8.4.38",
22+
"svelte": "^4.2.7",
23+
"tailwindcss": "^3.4.4",
24+
"vite": "^5.0.3"
25+
},
26+
"type": "module"
27+
}

‎postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/app.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
/* HTML file: */
6+
html {
7+
scroll-behavior: smooth;
8+
}
9+
10+
/* All files: */
11+
* {
12+
box-sizing: border-box;
13+
font-family: 'Poppins';
14+
}
15+
16+
@font-face {
17+
font-weight: normal;
18+
font-display: swap;
19+
}
20+
21+
@font-face {
22+
font-family: 'Poppins';
23+
src: local('Poppins'), url('/font/Poppins/Poppins-SemiBold.ttf');
24+
font-weight: normal;
25+
font-display: swap;
26+
}

‎src/app.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎src/app.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<!-- Responsive Meta Tag -->
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
10+
<!-- SEO -->
11+
<title>Svelte-Netlify-Demo</title>
12+
<meta name="description" content="The description of Svelte-Netlify-Demo" />
13+
14+
<!-- Status Bar: -->
15+
<meta name="theme-color" content="#ffff" />
16+
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
17+
18+
<!-- Language: -->
19+
<meta name="language" content="en" />
20+
21+
<!-- Author: -->
22+
<meta name="author" content="@mokollmar" />
23+
24+
<!-- Open Graph: -->
25+
<meta property="og:title" content="Svelte-Netlify-Demo" />
26+
<meta property="og:description" content="The description of Svelte-Netlify-Demo" />
27+
<meta property="og:image" content="https://svelte-netlify-demo.netlify.app/favicon.png" />
28+
<meta property="og:url" content="https://svelte-netlify-demo.netlify.app" />
29+
30+
<!-- Favicon -->
31+
<link rel="icon" type="image/svg" href="/favicon.png" />
32+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
33+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
34+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
35+
36+
%sveltekit.head%
37+
</head>
38+
39+
<body data-sveltekit-preload-data="hover">
40+
<div style="display: contents">%sveltekit.body%</div>
41+
</body>
42+
43+
</html>

‎src/images/watermelon.png

120 KB
Loading

‎src/lib/LazyLoad.svelte

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!-- IntersectionObserver, is a browser API that allows us to observe when an element enters or exits the viewport. -->
2+
3+
<script>
4+
import { onMount } from "svelte";
5+
import { fade } from "svelte/transition";
6+
7+
let rootElement = null;
8+
let renderComponent = false;
9+
10+
onMount(() => {
11+
if (rootElement) {
12+
createIntersectionObserver().observe(rootElement);
13+
}
14+
});
15+
16+
const createIntersectionObserver = () => {
17+
return new IntersectionObserver((entries) => {
18+
for (const entry of entries) {
19+
if (entry.isIntersecting) {
20+
renderComponent = true;
21+
}
22+
}
23+
});
24+
};
25+
</script>
26+
27+
<div bind:this={rootElement}>
28+
{#if renderComponent}
29+
<div transition:fade>
30+
<slot />
31+
</div>
32+
{/if}
33+
</div>

‎src/lib/footer.svelte

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div
2+
class="border-t-4 border-primary border-opacity-25 py-5 md:py-6 flex flex-col items-center justify-center text-primary "
3+
>
4+
<p class="text-lg">
5+
Powered by <span
6+
><a href="https://kit.svelte.dev" class=" underline">SvelteKit</a
7+
></span
8+
>
9+
</p>
10+
<a href="/sitemap.xml" class="text-md mt-3 underline">Sitemap.xml</a>
11+
</div>

‎src/lib/header.svelte

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
import { onMount } from "svelte";
3+
import { page } from "$app/stores";
4+
5+
let mounted = false;
6+
onMount(() => (mounted = true));
7+
8+
let current_link = "";
9+
$: if (mounted) current_link = $page.url.pathname;
10+
11+
const navigations = [
12+
{ title: "Home", link: "/" },
13+
{ title: "Contact", link: "/contact" },
14+
];
15+
</script>
16+
17+
<div
18+
class="flex justify-center border-b-2 border-opacity-25 border-primary text-primary py-5"
19+
>
20+
<div class=" flex flex-row justify-evenly w-full sm:w-1/2">
21+
{#each navigations as nav}
22+
<a
23+
href={nav.link}
24+
class={current_link === nav.link
25+
? "border-y-4 rounded-full px-6 2xl:px-12 border-primary"
26+
: "border-y-4 border-primary hover:border-primary border-opacity-10 rounded-full px-6 2xl:px-12 "}
27+
>
28+
<p class="text-xl sm:text-2xl py-1">{nav.title}</p>
29+
</a>
30+
{/each}
31+
</div>
32+
</div>

‎src/lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// place files you want to import through the `$lib` alias in this folder.

‎src/routes/+error.svelte

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script>
2+
import { page } from '$app/stores';
3+
</script>
4+
5+
<div class="flex flex-col items-center justify-center text-center text-primary">
6+
<h1 class="text-center my-5 text-3xl">Sorry there was an error!</h1>
7+
<p class="py-5">{$page.status}: {$page.error.message}</p>
8+
</div>

‎src/routes/+layout.svelte

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import "../app.css";
3+
import Footer from "$lib/footer.svelte";
4+
import Header from "$lib/header.svelte";
5+
</script>
6+
7+
<div class="flex flex-col overflow-x-clip min-h-screen">
8+
<Header />
9+
10+
<div class="flex-grow flex-col flex"><slot /></div>
11+
12+
<Footer />
13+
</div>

‎src/routes/+page.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const prerender = true

0 commit comments

Comments
 (0)