rg3915/README.md

SvelteKit passo a passo

https://www.youtube.com/watch?v=2ZvSj5kktjA&list=PLC3y8-rFHvwjifDNQYYWI6i06D7PjF0Ua

https://github.com/gopinav/SvelteKit-Tutorials

Create app

npm create svelte@latest sk-01 -y

cd sk-01/

nvm use 20.14.0

npm install

npm run dev -- --open

Run

cd sk-01

npm run dev -- --open

PicoCSS

cat << EOF > src/app.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- PicoCSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />

  %sveltekit.head%

  <style>
    footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        /*  text-align: center;*/
        background-color: var(--background-color);
        padding: 1rem;
    }
  </style>
</head>

<body data-sveltekit-preload-data="hover">
  <div class="container">%sveltekit.body%</div>
</body>

</html>
EOF

Layout

cat << EOF > src/routes/+layout.svelte
<script>
  import Header from '$lib/header.svelte'
  import Footer from '$lib/footer.svelte'
  import "$lib/pico-bootstrap-grid.min.css"
  // https://joyofcode.xyz/global-styles-in-sveltekit
</script>

<Header />
<slot />
<Footer />
EOF

cat << EOF > src/lib/header.svelte
<header>
  <nav>
    <ul>
      <li>
          <a href="/"><strong>SvelteKit</strong></a>
      </li>
    </ul>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/gallery">Gallery</a></li>
      <li><a href="/table">Table</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
EOF

cat << EOF > src/lib/footer.svelte
<footer>
  <p>2025 © Your Company</p>
</footer>
EOF

Route

mkdir -p src/routes/about

cat << EOF > src/routes/about/+page.svelte
<h1>About</h1>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem sapiente optio corrupti nesciunt reiciendis facilis minima aut, iure autem, perferendis doloremque. At et, perspiciatis quibusdam repudiandae nihil nisi suscipit officia.</p>
EOF

mkdir -p src/routes/gallery

cat << EOF > src/routes/gallery/+page.svelte
<script>
  // Sample product data
  let products = [
    { title: "Title One", price: 20, description: "This is a description for photo 1.", imgSrc: "https://picsum.photos/300/150?1" },
    { title: "Title Two", price: 30, description: "This is a description for photo 2.", imgSrc: "https://picsum.photos/300/150?2" },
    { title: "Title Three", price: 40, description: "This is a description for photo 3.", imgSrc: "https://picsum.photos/300/150?3" },
    { title: "Title Four", price: 50, description: "This is a description for photo 4.", imgSrc: "https://picsum.photos/300/150?4" },
    { title: "Title Five", price: 60, description: "This is a description for photo 5.", imgSrc: "https://picsum.photos/300/150?5" },
    { title: "Title Six", price: 70, description: "This is a description for photo 6.", imgSrc: "https://picsum.photos/300/150?6" },
    { title: "Title Seven", price: 80, description: "This is a description for photo 7.", imgSrc: "https://picsum.photos/300/150?7" },
    { title: "Title Eight", price: 90, description: "This is a description for photo 8.", imgSrc: "https://picsum.photos/300/150?8" },
    { title: "Title Nine", price: 100, description: "This is a description for photo 9.", imgSrc: "https://picsum.photos/300/150?9" },
    { title: "Title Ten", price: 110, description: "This is a description for photo 10.", imgSrc: "https://picsum.photos/300/150?10" },
    { title: "Title Eleven", price: 120, description: "This is a description for photo 11.", imgSrc: "https://picsum.photos/300/150?11" },
    { title: "Title Twelve", price: 130, description: "This is a description for photo 12.", imgSrc: "https://picsum.photos/300/150?12" },
  ];
</script>

<h1>Photo Gallery</h1>

<div class="gallery">
  {#each products as product}
    <div class="card">
      <img src={product.imgSrc} alt={product.title}>
      <div class="info">
        <h2>{product.title}</h2>
        <p class="price">${product.price}</p>
        <p>{product.description}</p>
      </div>
    </div>
  {/each}
</div>

<style>
/* Grid layout for the gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Custom styles for the cards */
.card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card .info {
  padding: 15px;
}

.card .info h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.card .info p {
  font-size: 0.9rem;
  color: var(--muted-color);
  margin-bottom: 10px;
}

.card .info .price {
  font-weight: bold;
  color: var(--primary);
}

/* Support for dark mode */
@media (prefers-color-scheme: dark) {
  .card {
    background-color: var(--background-dark);
    color: var(--text-light);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
  }
}

/* Light mode settings (optional) */
@media (prefers-color-scheme: light) {
  .card {
    background-color: var(--background);
    color: var(--text);
  }
}
</style>
EOF

mkdir -p src/routes/table

cat << EOF > src/routes/table/+page.svelte
<h1>Table</h1>
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Category</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The quick brown fox jumps over the lazy dog.</td>
      <td>Lorem</td>
      <td>1,01</td>
    </tr>
    <tr>
      <td>The quick brown fox jumps over the lazy dog.</td>
      <td>Lorem</td>
      <td>1,01</td>
    </tr>
    <tr>
      <td>The quick brown fox jumps over the lazy dog.</td>
      <td>Lorem</td>
      <td>1,01</td>
    </tr>
    <tr>
      <td>The quick brown fox jumps over the lazy dog.</td>
      <td>Lorem</td>
      <td>1,01</td>
    </tr>
    <tr>
      <td>The quick brown fox jumps over the lazy dog.</td>
      <td>Lorem</td>
      <td>1,01</td>
    </tr>
  </tbody>
</table>
EOF

tree src

npm run dev -- --open