Readded project without astro

.github/workflows/build-website.yaml

@@ -0,0 +1,71 @@
+# .github/workflows/publish.yml
+name: Generate a build and push to another branch
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    name: Build
+    steps:
+      - name: git-checkout
+        uses: actions/checkout@v2
+
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+      - uses: actions/cache@v3
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install all dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+        env:
+          VITE_BASE: https://rioni.es
+
+      - name: Upload compiled source
+        uses: actions/upload-artifact@v2
+        with:
+          name: website
+          path: dist/
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: website
+      - name: Setup Pages
+        uses: actions/configure-pages@v1
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@main

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.git-old/
+
+package-lock.json
+
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "svelteStrictMode": true,
+    "bracketSameLine": true
+}

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["svelte.svelte-vscode", "astro-build.astro-vscode"]
+  "recommendations": ["svelte.svelte-vscode"]
 }

README.md

@@ -0,0 +1,30 @@
+# What this
+
+Personal page for hosting and displaying low quality copies of my drawings as a showcase for people to see, mainly aimed for people who intend to commission me but what to see more examples of my art, but also for people how just want a nice site to have a quick view at my art. I never upload the original files nor high quality copies of my drawings except for commissioners who get the original files. The files in this site are web, quality 80 and method 6.
+
+# How this build
+
+I used [Svelte](https://svelte.dev) + [TailwindCSS](https://tailwindcss.com) + JS with Vite as a bundler. Icons are from [Flaticon](https://www.flaticon.com/). Images are stored in ``/public``, but the json with its data is stored in /json. The json is generated with a python script that reads the files in ``/public/gallery``, it also converted it from PNG to .webp, made the filename lowercase and replaced spaces with underscores. The script is still in the repo because it's useful, although it's not used anymore. New images are added manually to the json so I can control where is the best spot for that art.
+
+## Layout
+
+Modern websites tend to use Masonry layout (Kofi gallery, Pinterest) to have a fancy layout that adapts to the contents and the container. I use an horizontal CSS only version of this layout for better readability of the gallery, this kind of horizontal Masonry layout is used by websites like Carrd and Devianart. You can check the code in ``/src/lib/Gallery.svelte``.
+
+## Filter
+
+I use a svelte store as a middleware. ToggleButtons modify the store, and images suscribes to these changes and make themselves visible or not depending on the tags they have. You can check the code in ``/src/lib/ToggleButton.svelte`` and ``/src/lib/Image.svelte``.
+
+## Lazy loading
+
+I use lazy attribute for ``html`` image tag, it's not the best option, but given all the gallery is between 3-4MB in total this works for now.
+
+# How to run
+
+```
+npm install
+npm run dev
+```
+
+# Dependencies
+
+None, just Svelte and TailwindCSS.

index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/site/favicon.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rioni: Art and Contact</title>
+
+    <!-- Etiquetas Open Graph -->
+    <meta property="og:title" content="Rioni: Art and Contact" />
+    <meta property="og:image" content="https://raw.githubusercontent.com/Nrosa01/svelte-gallery/main/public/site/preview_twitter.jpg"/>
+    <meta property="og:url" content="https://www.rioni.es" />
+
+    <!-- Etiquetas Twitter Cards -->
+    <meta name="twitter:title" content="Rioni: Art and Contact" />
+    <meta name="twitter:site" content="@rionisguild">
+    <meta name="twitter:url" content="https://www.rioni.es" />
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/Nrosa01/svelte-gallery/main/public/site/preview_twitter.jpg" />
+    <meta name="twitter:card" content="summary_large_image" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "svelte-simple-form",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.2",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "postcss-load-config": "^4.0.1",
+    "svelte": "^3.49.0",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.5",
+    "vite": "^3.1.0"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;

public/gallery/main.py

@@ -0,0 +1,47 @@
+import os
+import json
+import PIL.Image
+
+FORMAT = "webp"
+EXTENSION = "." + FORMAT
+
+# Iterate all files in the current directory, change png to webp 90% quality compression m -6, rename file to lowercase, replace spaces with underscores, delete png
+current_dir = os.getcwd()
+list_of_files = os.listdir(current_dir)
+list_of_dirs = [f for f in list_of_files if os.path.isdir(os.path.join(current_dir, f))]
+
+for dir in list_of_dirs:
+    list_of_files = os.listdir(os.path.join(current_dir, dir))
+    list_of_images = [f for f in list_of_files if os.path.isfile(os.path.join(current_dir, dir, f)) and f.endswith(".png")]
+    for image in list_of_images:
+        im = PIL.Image.open(os.path.join(current_dir, dir, image))
+        im.convert("RGB").save(os.path.join(current_dir, dir, image.replace(".png", EXTENSION)), FORMAT, quality=80, method=6)
+        os.remove(os.path.join(current_dir, dir, image))
+        os.rename(os.path.join(current_dir, dir, image.replace(".png", EXTENSION)), os.path.join(current_dir, dir, image.replace(".png", EXTENSION).lower().replace(" ", "_")))
+        im.close()
+
+# For each directory, get the list of all files in that directory
+json_file = open(os.path.join(current_dir, "data.json"), "w")
+json_array = []
+for dir in list_of_dirs:
+    # Get the list of all files in the directory
+    list_of_files = os.listdir(os.path.join(current_dir, dir))
+    # Get the list of all images in the directory
+    list_of_images = [f for f in list_of_files if os.path.isfile(os.path.join(current_dir, dir, f)) and f.endswith(EXTENSION)]
+    # For each image, create an object and add it to the array
+    for image in list_of_images:
+        # tags is an array of strings, each string is a tag, we only have one tag, the directory name
+        # but if dir name is zorio, pmd or comms, we want to add also the pokemon name as a tag
+        tags = [dir.lower()]
+        if dir == "zorio" or dir == "pmd" or dir == "comms":
+            tags.append("pokemon")
+
+        json_array.append({"src": "gallery\\" + os.path.join(dir, image), "title": image, "tags": tags})
+
+# Write the json array to the json file
+json.dump(json_array, json_file)
+
+# Close the json file
+json_file.close()
+
+# Exit the program

src/App.svelte

@@ -0,0 +1,65 @@
+<script>
+  import _data from "./json/data.json";
+  import Gallery from "./lib/GallerySection.svelte";
+  import FixedScrollUpButton from "./lib/FixedScrollUpButton.svelte";
+  import Header from "./lib/Header.svelte";
+  import HeaderBar from "./lib/HeaderBar.svelte";
+  import { fade } from "svelte/transition";
+  import Prices from "./lib/PricesSection.svelte";
+  import { deactivateTag } from "./lib/assets/ToggleStore.js";
+  import Tos from "./lib/TosSection.svelte";
+
+  let currentHash = location.hash;
+
+  function handleHashChange() {
+    currentHash = location.hash;
+    deactivateTag();
+  }
+</script>
+
+<section>
+  <FixedScrollUpButton />
+</section>
+
+<!-- <StickyBar/> -->
+
+<svelte:window on:hashchange="{handleHashChange}" />
+
+<main class="relative">
+  <div
+    class="flex flex-col h-auto min-h-screen justify-center place-items-center">
+    <div
+      class="flex flex-col min-w-[40vw] max-w-[85vw] min-h-fit bg-[#0000008C] justify-center place-items-center rounded-[4rem] my-8 overflow-clip">
+      {#if currentHash === "" || currentHash === "#home"}
+        <section class="w-[90%]" in:fade>
+          <Header />
+        </section>
+      {:else}
+        <HeaderBar />
+      {/if}
+
+      <div class="w-[90%]">
+        {#if currentHash === "#gallery"}
+          <section in:fade>
+            <Gallery
+              images="{_data}" />
+          </section>
+        {:else if currentHash === "#prices"}
+          <section in:fade>
+            <hr class="mt-2 mb-4 h-0.5 border-t-0 bg-neutral-100/10" />
+            <Prices />
+          </section>
+        {:else if currentHash === "#tos"}
+          <section in:fade>
+            <hr class="mt-2 mb-4 h-0.5 border-t-0 bg-neutral-100/10" />
+            <Tos />
+          </section>
+        {/if}
+
+        <footer class="flex flex-col w-full h-fit pt-2 pb-4 xl:px-16 px-8">
+          <a href="https://www.flaticon.com" class="text-slate-300 text-center xl:text-sm text-xs" title="discord icons">Icons by Flaticon</a>
+        </footer>
+      </div>
+    </div>
+  </div>
+</main>