part of skeleton

This commit is contained in:
Jonas_Jones 2024-06-07 00:26:22 +02:00
parent b550b19aae
commit 68f6de3e11
24 changed files with 2375 additions and 119 deletions

131
.gitignore vendored
View file

@ -4,124 +4,21 @@ logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
.pnpm-debug.log*
# 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
# 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/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# 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
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
node_modules
dist
dist-ssr
*.local
# 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
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View file

@ -1,2 +1,53 @@
# blog.jonasjones.dev
Svelte site for blog.jonasjones.dev
<table>
<tr>
<td>
<a href="https://www.amazon.com/dp/B08D6T6BKS/"><img src="https://static.packt-cdn.com/products/9781839213625/cover/smaller" width="120" /></a>
</td>
<td>
<h3>Svelte 3 Up and Running</h3>
<p>Want to learn Svelte 3 and how to build a Single-Page App (SPA) with it (and with this router)? Check out my book <a href="https://www.amazon.com/dp/B08D6T6BKS/">Svelte 3 Up and Running</a> on Amazon.</p>
</td>
</table>
# Svelte app with svelte-spa-router
This is a project template for [Svelte 4](https://svelte.dev) apps that includes [svelte-spa-router](https://github.com/italypaleale/svelte-spa-router) for client-side routing, TypeScript, and Vite as bundler.
## About svelte-spa-router
svelte-spa-router is a client-side router for Svelte 4 apps that leverages hash-based routing (i.e. stores the current view in the URL after the `#` symbol).
You can read more about the router, and the reasons why you might want to use hash-based routing (or not), in the [documentation](https://github.com/italypaleale/svelte-spa-router).
## Get started
Install the dependencies…
```bash
cd svelte-app
npm install
```
…then start a dev server using [Vite](https://vite.dev):
```bash
npm run dev
```
Navigate to [http://localhost:5050](http://localhost:5050). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
You can add more routes by defining them in the [`src/routes.ts`](./src/routes.ts) file. More information can be found on the [documentation for svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router/blob/main/README.md).
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `vite` commands in package.json to include the option `--host 0.0.0.0`.
If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
## Building and running in production mode
To create an optimized version of the app:
```bash
npm run build
```
You can run the newly-built app with `npm run preview`.

15
index.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/global.css">
<link rel="icon" type="image/svg+xml" href="/svelte.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte 4 + svelte-spa-router + TypeScript</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1973
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

24
package.json Normal file
View file

@ -0,0 +1,24 @@
{
"name": "blog.jonasjones.dev",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite --port 5050",
"build": "vite build",
"preview": "vite preview --port 5050",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@tsconfig/svelte": "^5.0.2",
"svelte": "^4.2.3",
"svelte-check": "^3.6.0",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^5.2.12"
},
"dependencies": {
"svelte-spa-router": "^4.0.0"
}
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

1
public/svelte.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

1
src/About.svelte Normal file
View file

@ -0,0 +1 @@
uwu

40
src/App.svelte Normal file
View file

@ -0,0 +1,40 @@
<script>
import Router from 'svelte-spa-router';
import routes from './routes';
import Title from './components/Title.svelte';
import Navbar from './components/Navbar.svelte';
import { onMount } from 'svelte';
let showTitle = true;
function handleScroll() {
if (window.scrollY > 50) {
showTitle = false;
} else {
showTitle = true;
}
}
onMount(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
});
</script>
<Title visible={showTitle} />
<Navbar />
<main>
<div class="content">
<Router {routes} />
</div>
</main>
<style>
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>

View file

@ -0,0 +1,55 @@
<nav class="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
</ul>
</nav>
<style>
.navbar {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
width: 100%; /* Ensures ul takes full width */
}
li {
display: inline;
}
a {
text-decoration: none;
color: #e2b714;
padding: 10px 20px;
display: block;
}
a:hover {
color: #d1d0c5;
}
.sticky-link {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
text-decoration: none;
}
</style>

View file

@ -0,0 +1,40 @@
<script>
export let visible = true;
</script>
<style>
.title-parent {
background-color: black;
padding: 25px 0;
}
.title {
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
transform: translateY(0);
opacity: 1;
font-family: 'Tiny5';
color: #e2b714;
}
#titleh1 {
text-align: center;
font-family: 'Pixelify Sans';
color: #e2b714;
margin: 0;
width: 90%;
margin: 0 auto;
font-size: 5vw
}
.hidden {
transform: translateY(-100%);
opacity: 0;
}
</style>
<main>
<div class="title-parent">
<div class:title={!visible ? 'hidden' : ''}>
<h1 id="titleh1">blog.jonasjones.dev</h1>
</div>
</div>
</main>

36
src/global.css Normal file
View file

@ -0,0 +1,36 @@
@font-face {
font-family: 'JetBrains Mono';
src: url('/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Libre Barcode 128';
src: url('/fonts/LibreBarcode128Text-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Pixelify Sans';
src: url('/fonts/PixelifySans-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body {
margin: 0;
padding: 0;
background-color: #303030;
color: #e2b714;
}
.content {
width: 75%;
margin: 0 auto;
}
a, p {
font-family: 'JetBrains Mono';
}

7
src/main.ts Normal file
View file

@ -0,0 +1,7 @@
import App from './App.svelte';
const app = new App({
target: document.body
});
export default app;

10
src/routes.ts Normal file
View file

@ -0,0 +1,10 @@
import Home from './routes/Home.svelte';
import Lorem from './routes/Lorem.svelte';
import NotFound from './routes/NotFound.svelte';
export default {
'/': Home,
'/lorem/:repeat': Lorem,
// The catch-all route must always be last
'*': NotFound
};

18
src/routes/Home.svelte Normal file
View file

@ -0,0 +1,18 @@
<h1>Hello world!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
<p>
This template is pre-configured with svlete-spa-router for routing.<br/>
Visit the <a href="https://github.com/ItalyPaleAle/svelte-spa-router">documentation for the router</a> to learn more.
</p>
<p>
Check a route: <a href="#/lorem/2">Lorem ipsum</a>
</p>
<style>
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
</style>

32
src/routes/Lorem.svelte Normal file
View file

@ -0,0 +1,32 @@
<script lang="ts">
export let params: {repeat?: string} = {};
let repeat = 1;
$: {
repeat = 1
if (params?.repeat) {
repeat = parseInt(params.repeat, 10)
if (repeat < 1) {
repeat = 1
}
}
}
</script>
<h1>Lorem ipsum</h1>
<p>Tip: try changing the number in the URL's fragment, e.g. <code>#/lorem/4</code></p>
{#each Array(repeat) as _}
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed consequatur dicta, explicabo delectus, cupiditate, rem illo repellat aperiam saepe id minus ipsa. Illum libero consectetur fuga neque officia, adipisci commodi.Porro eius harum sed architecto maxime, molestiae cum ad dignissimos eum, nihil eligendi? Non quo, modi officia doloribus distinctio pariatur sed? Veniam facere beatae ipsam reprehenderit suscipit! Sequi, distinctio debitis.
</p>
{/each}
<style>
h1 {
color: #008cff;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
</style>

View file

@ -0,0 +1,11 @@
<h1>Not Found</h1>
<p>This route doesn't exist.</p>
<style>
h1 {
color: #ff0040;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
</style>

2
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
/// <reference types="svelte" />
/// <reference types="vite/client" />

7
svelte.config.js Normal file
View file

@ -0,0 +1,7 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}

20
tsconfig.json Normal file
View file

@ -0,0 +1,20 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"resolveJsonModule": true,
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true,
"isolatedModules": true
},
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler"
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
})