Main page created without function .

deno.lock

@@ -354,6 +354,25 @@
       "npm:@vitejs/plugin-vue@^5.1.4",
       "npm:vite@^5.4.9",
       "npm:vue@^3.5.12"
+    ],
+    "packageJson": {
+      "dependencies": [
+        "npm:@deno/vite-plugin@1",
+        "npm:@tsconfig/node20@^20.1.4",
+        "npm:@types/node@^20.17.0",
+        "npm:@vitejs/plugin-vue@^5.1.4",
+        "npm:@vue/tsconfig@~0.5.1",
+        "npm:autoprefixer@^10.4.20",
+        "npm:deno@~0.1.1",
+        "npm:npm-run-all2@^7.0.1",
+        "npm:postcss@^8.4.47",
+        "npm:tailwindcss@^3.4.14",
+        "npm:typescript@5.6",
+        "npm:vite@^5.4.10",
+        "npm:vue-router@^4.4.5",
+        "npm:vue-tsc@^2.1.6",
+        "npm:vue@^3.5.12"
       ]
     }
+  }
 }

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "esp-projekt",
+  "version": "1.0.0",
+  "description": "",
+  "main": "tailwind.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@deno/vite-plugin": "^1.0.0",
+    "deno": "^0.1.1",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.4.10",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.17.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
+    "npm-run-all2": "^7.0.1",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.0",
+    "vite": "^5.4.10",
+    "vue-tsc": "^2.1.6"
+  }
+}

src/App.vue

@@ -1,32 +1,20 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
+import Sidebar from "@/components/sidebar.vue";
+import NiceThings from "@/components/interesting-hashtags.vue";
+import Feed from "@/components/feed.vue";
+import Contacts from "@/components/contacts.vue";
+import Legal from "components/legal.vue";
 </script>
 
-<template>
-  <img src="/vite-deno.svg" alt="Vite with Deno" />
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
-</template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<template>
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <nice-things></nice-things>
+    <feed></feed>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>

src/assets/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/contacts.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const contacts =[
+    {display_name: "Linux Enjoyer", username: "lunix"},
+    {display_name: "XBOX", username: "Xbox"},
+    {display_name: "JETBrains", username: "Jetbrains"},
+]
+</script>
+
+<template>
+  <div class="p-2"> <!--MAIN-->
+    <div class="bg-grau-hell rounded-lg"> <!--HEADER-->
+      <h2 class="align-middle m-2 text-xl p-1">Contacts</h2>
+    </div>
+    <div> <!--CONTENT-->
+      <ul class="space-y-1">
+        <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
+          <!--CONTACT-->
+          <img src="@/assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
+          <div class="flex flex-col">
+            <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
+            <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
+          </div>
+          <img src="@/assets/icons/mail.png" alt="" class="ml-auto">
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/feed.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+  import { ref } from "vue";
+  import {valueOf} from "tailwindcss";
+  const post = ref([
+    {id: 1,
+      profile_picture: "@/assets/default_pp.png",
+      author_display_name: "Linux Enjoyer",author_username: "lunix",
+      content:"I love Linux. My Favorite Linux Distro is ARCH LINUX.",
+      comments_count: 1, likes: 5},
+    {id: 2,
+      profile_picture: "@/assets/default_pp.png",
+      author_display_name: "XBOX",author_username: "Xbox",
+      content: "Call of Duty: Black Ops 6 is OUT NOW.",
+      comments_count: 500000, likes: 100000},
+    {id: 3,
+      profile_picture: "@/assets/default_pp.png",
+      author_display_name: "JETBrains",author_username: "Jetbrains",
+      content: "BLI BLA BLUB. Jetbrains is the best IDE." ,
+      comments_count: 5000, likes: 1000},
+    {id: 4,
+      profile_picture: "@/assets/default_pp.png",
+      author_display_name: "GITHUB", author_username: "GitHub",
+      content: "GitHub Copilot got an massive update. Check out the new features.",
+      comments_count: 1500000, likes: 500000},
+    {id: 5,
+      profile_picture: "@/assets/danielvici_pp.png",
+      author_display_name: "danielvici123", author_username: "danielvici",
+      content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
+      comments_count: undefined, likes: 532844},
+    {id: 6,
+      profile_picture: "@/assets/default_pp.png",
+      author_display_name: "Microsoft", author_username: "Microsoft",
+      content: "Windows 11 24H2 is out now. Learn more here: https://www.microsoft.com",
+      comments_count: 500000, likes: 100000},
+    {id: 7,
+      profile_picture: "@/assets/default_pp.png",
+      author_display_name: "Apple", author_username: "Apple",
+      content: "The new iPhone 16 is out now. Everything you need to know: https://www.apple.com",
+      comments_count: 500000, likes: 100000},
+  ])
+
+  const addLike = (index) => {
+    post.value[index].likes += 1;
+    console.log("New Like Amount: ", post.value[index].likes);
+
+  }
+</script>
+
+<template>
+  <div class="p-2"> <!-- MAIN -->
+    <div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
+      <h2 class="align-middle m-2 text-xl p-1">Your Feed</h2>
+    </div>
+    <div> <!-- CONTENT -->
+      <ul>
+        <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
+          <!-- POST -->
+          <img src="@/assets/default_pp.png" alt="" class="w-16 h-16">
+          <div>
+            <div> <!-- POST HEADER -->
+              <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
+              <label class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ postitem.author_username }}</label>
+            </div>
+            <div class="m-2"> <!-- POST CONTENT -->
+              <p class="text-sm m-1">{{ postitem.content }}</p>
+            </div>
+            <div class="flex "> <!-- POST FOOTER -->
+              <div class="flex"> <!-- Comments -->
+                <img src="@/assets/icons/comment.png" alt="" class="align-middle">
+                <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
+                <label class="text-sm m-1" v-else>Comments disabled</label>
+              </div>
+
+              <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
+                <img type="image" alt="" src="@/assets/icons/herz.png" class="align-middle">
+                <label class="text-sm m-1">{{ postitem.likes }}</label>
+              </div><!-- ENDE -->
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

src/components/interesting-hashtags.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+const hashtags = [
+  {id: 1,name: "xbox", nr_posts: 553 } ,
+  {id: 2,name: "lol" , nr_posts: 16422},
+  {id: 7,name: "jetbrains", nr_posts: 1251},
+  {id: 4,name: "github", nr_posts: 464},
+  {id: 5,name: "craftattack12",nr_posts: 4463},
+  {id: 6,name: "25" , nr_posts: 123},
+  {id: 3,name: "minecraft", nr_posts: 466},
+]
+
+hashtags.sort((a, b) => {
+  return b.nr_posts - a.nr_posts;
+})
+</script>
+
+<template>
+  <div class="p-2"> <!-- MAIN -->
+    <div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
+      <h2 class="align-middle m-2 text-xl p-1">Trending Hashtags:</h2>
+    </div>
+    <div class="bg-grau-hell2"> <!-- CONTENT -->
+      <ul>
+        <li v-for="(hashtags) in hashtags " :key="hashtags">
+          <!-- HASHTAGS-->
+          <h1 class="text-lg font-bold m-1">#{{ hashtags.name }}</h1>
+          <p class="text-sm m-1">{{ hashtags.nr_posts }} posts</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/legal.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<label>
+  <a href="">Terms of Service</a>
+  -
+  <a href="">Privacy Policy</a>
+  -
+  <a href="">Imprint</a>
+  -
+  <a href="">Contact</a>
+  -
+  <a href="">Support</a>
+</label>
+</template>
+
+<style scoped>
+
+</style>

src/components/sidebar.vue

@@ -0,0 +1,42 @@
+
+<script setup lang="ts">
+// Funktionen um die Seiten zu öffnen
+// home -> app.vue
+const sb_home = () => {
+  console.log("home");
+}
+const sb_search = () => {
+  console.log("Search");
+}
+const sb_notifications = () => {
+  console.log("Notifications");
+}
+const sb_messages = () => {
+  console.log("Messages");
+}
+const sb_accounts = () => {
+  console.log("Accounts");
+}
+const sb_settings = () => {
+  console.log("Settings");
+}
+
+</script>
+
+<template>
+  <div class="pt-4 pl-1">
+    <img src="@/assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
+    <div class="align-middle space-y-3 pt-3 pl-3">
+      <img src="@/assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
+      <img src="@/assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
+      <img src="@/assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
+      <img src="@/assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
+      <img src="@/assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg"  v-on:click="sb_accounts">
+      <img src="@/assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,5 +1,8 @@
-import './style.css'
-import { createApp } from 'vue'
-import App from './App.vue'
+import './assets/main.css'
 
-createApp(App).mount('#app')
+import { createApp } from 'vue'
+import App from '@/App.vue';
+
+const app = createApp(App);
+
+app.mount('#app');

src/vite-env.d.ts

@@ -1,7 +1,22 @@
 /// <reference types="vite/client" />
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})