Merge pull request #43 from Sharknoon/next

Next

.dockerignore

@@ -1,2 +1,24 @@
-**/node_modules
-**/dist
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.github/workflows/build.yml

@@ -31,6 +31,6 @@ jobs:
       - name: Delete old image versions
         uses: actions/delete-package-versions@v5
         with:
-          package-type: 'container'
-          package-name: 'pixina'
+          package-type: "container"
+          package-name: "pixina"
           min-versions-to-keep: 1

.gitignore

@@ -1,28 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
+# Misc
 .DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+.fleet
 .idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+
+# Local env files
+.env
+.env.*
+!.env.example

.prettierignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Public files
+public/place-atlas

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": ["lang"],
+  "eslint.experimental.useFlatConfig": true
+}

Dockerfile

@@ -5,8 +5,8 @@ RUN npm ci
 COPY . .
 RUN npm run build
 
-FROM nginx:alpine as production-stage
+FROM node:21-alpine as production-stage
 RUN mkdir /app
-COPY --from=build-stage /app/dist /app
-COPY nginx.conf /etc/nginx/nginx.conf
-EXPOSE 80
+COPY --from=build-stage /app/.output /app
+EXPOSE 3000
+CMD [ "node", "/app/server/index.mjs" ]

LICENSE → LICENCE

@@ -10,4 +10,4 @@
             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 
-  0. You just DO WHAT THE FUCK YOU WANT TO.
+  0. You just DO WHAT THE FUCK YOU WANT TO.

README.md

@@ -12,45 +12,74 @@ The goal of this artwork is to recreate Reddit Place, which is considered a piec
 
 ---
 
-## Recommended IDE Setup
+## Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+Make sure to install the dependencies:
 
-## Type Support for `.vue` Imports in TS
+```bash
+# npm
+npm install
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+# pnpm
+pnpm install
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+# yarn
+yarn install
 
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+# bun
+bun install
+```
 
-## Customize configuration
+## Development Server
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+Start the development server on `http://localhost:3000`:
 
-## Project Setup
+```bash
+# npm
+npm run dev
 
-```sh
-npm install
-```
+# pnpm
+pnpm run dev
 
-### Compile and Hot-Reload for Development
+# yarn
+yarn dev
 
-```sh
-npm run dev
+# bun
+bun run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+## Production
+
+Build the application for production:
 
-```sh
+```bash
+# npm
 npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
 
-```sh
-npm run lint
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
 ```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

assets/main.css

@@ -0,0 +1,49 @@
+#__nuxt {
+  font-family:
+    Kumbh Sans,
+    Avenir,
+    Helvetica,
+    Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+
+html {
+  overflow-y: auto !important;
+}
+
+html,
+body,
+#__nuxt {
+  height: 100%;
+}
+
+@font-face {
+  font-family: "Kumbh Sans";
+  src:
+    url("/fonts/KumbhSans-Bold.woff2") format("woff2"),
+    url("/fonts/KumbhSans-Bold.woff") format("woff");
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "Kumbh Sans";
+  src:
+    url("/fonts/KumbhSans-Regular.woff2") format("woff2"),
+    url("/fonts/KumbhSans-Regular.woff") format("woff");
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "Kumbh Sans";
+  src:
+    url("/fonts/KumbhSans-Light.woff2") format("woff2"),
+    url("/fonts/KumbhSans-Light.woff") format("woff");
+  font-weight: 300;
+}
+
+.img-pixelated {
+  image-rendering: pixelated;
+}

src/components/common/TileThumbnail.vue → components/common/TileThumbnail.vue

@@ -1,42 +1,48 @@
 <template>
-  <div class="tile-thumbnail position-relative shadow-sm rounded" style="--bs-aspect-ratio: 80%">
+  <div
+    class="tile-thumbnail position-relative shadow-sm rounded"
+    style="--bs-aspect-ratio: 80%"
+  >
     <img
       :id="'thumbnail-' + tile?.number"
       :src="tile?.thumbnail"
       :alt="'tile-' + tile?.number"
       width="75"
+      height="60"
       class="img-pixelated rounded"
     />
     <div class="position-absolute top-0 end-0 d-flex gap-1">
-      <slot name="top-end"></slot>
+      <slot name="top-end" />
     </div>
-    <div class="thumbnail-footer position-absolute bottom-0 text-dark w-100 fw-bold rounded-bottom">
+    <div
+      class="thumbnail-footer position-absolute bottom-0 text-dark w-100 fw-bold rounded-bottom"
+    >
       {{ tile?.title }}
     </div>
     <div class="position-absolute bottom-0 end-0 d-flex gap-1">
-      <slot name="bottom-end"></slot>
+      <slot name="bottom-end" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 const props = defineProps({
   number: {
     type: Number,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
 interface Tile {
-  number: number
-  thumbnail: string
-  title: string
+  number: number;
+  thumbnail: string;
+  title: string;
 }
 
 const tile: Tile = {
   number: props.number,
-  thumbnail: new URL(`../../assets/images/templates/${props.number}.webp`, import.meta.url).href,
-  title: String(props.number)
-}
+  thumbnail: `/images/templates/${props.number}.webp`,
+  title: String(props.number),
+};
 </script>
 <style lang="scss" scoped>
 .thumbnail-footer {