kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Compare commits

base: kamilniemczycki:8054be68468dc4de8e0b197a23772f1e6df699ba
Branches Tags
kamilniemczycki:main
kamilniemczycki:vite
kamilniemczycki:test2
kamilniemczycki:github-footer
kamilniemczycki:up-depends
kamilniemczycki:tailwind
kamilniemczycki:vue-v3
kamilniemczycki:v1.0.0
..
compare: kamilniemczycki:cbdc5c8676ecfc3a86ea7cadaef057ef1305a7bb
Branches Tags
kamilniemczycki:vite
kamilniemczycki:test2
kamilniemczycki:main
kamilniemczycki:github-footer
kamilniemczycki:up-depends
kamilniemczycki:tailwind
kamilniemczycki:vue-v3
kamilniemczycki:v1.0.0

No commits in common. "8054be68468dc4de8e0b197a23772f1e6df699ba" and "cbdc5c8676ecfc3a86ea7cadaef057ef1305a7bb" have entirely different histories.
8054be6846 ... cbdc5c8676

25 changed files with 18689 additions and 1766 deletions
Show Stats Expand all files Collapse all files

4
.env.development
View File

@ -1,4 +0,0 @@
NODE_MODE=development
VITE_APP_TITLE=kamilcraft.com
VITE_APP_BASE_URL=https://localhost:5173
VITE_APP_API_URL=http://localhost/v1

6
.env.example
View File

@ -1,5 +1,3 @@
NODE_MODE=local
VUE_APP_TITLE=kamilcraft.com VUE_APP_TITLE=kamilcraft.com
VUE_APP_BASE_URL=http://localhost:5173 VUE_APP_BASE_URL=http://127.0.0.1
VUE_APP_API_URL=https://api.kamilcraft.com/v1 VUE_APP_API_URL=https://api.kamilcraft.com
VITE_PORT=5173

4
.env.production
View File

@ -1,4 +0,0 @@
NODE_MODE=production
VITE_APP_TITLE=kamilcraft.com
VITE_APP_BASE_URL=https://kamilcraft.com
VITE_APP_API_URL=https://api.kamilcraft.com/v1

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19826
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

46
package.json
View File

@ -3,32 +3,36 @@
"version": "1.1.0", "version": "1.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "serve": "vue-cli-service serve",
"build": "vite build", "build": "vue-cli-service build",
"preview": "vite preview" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/vue-fontawesome": "^3.0.3", "@fortawesome/vue-fontawesome": "^3.0.1",
"@vitejs/plugin-vue": "^4.2.3", "core-js": "^3.25.0",
"vite": "^4.4.7", "marked": "^4.1.0",
"vue": "^3.3.4", "vue": "^3.2.38",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-router": "^4.2.4", "vue-router": "^4.1.5",
"vuex": "^4.1.0" "vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.13", "@babel/core": "^7.18.13",
"eslint": "^8.29.0", "@babel/eslint-parser": "^7.18.9",
"eslint-plugin-vue": "^9.8.0", "@vue/cli-plugin-babel": "~5.0.0",
"markdown-it": "^13.0.1", "@vue/cli-plugin-eslint": "~5.0.0",
"postcss": "^8.4.20", "@vue/cli-service": "~5.0.0",
"sass": "^1.56.2", "autoprefixer": "^10.4.7",
"sass-loader": "^13.2.0", "eslint": "^7.32.0",
"tailwindcss": "^3.2.4" "eslint-plugin-vue": "^8.7.1",
"postcss": "^8.4.14",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"tailwindcss": "^3.1.6"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,

7
index.html → public/index.html
View File

@ -6,13 +6,16 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
<title>KamilCraft.com</title> <title>KamilCraft.com</title>
</head> </head>
<body> <body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

4
src/App.vue
View File

@ -9,8 +9,8 @@
</template> </template>
<script setup> <script setup>
import SiteHeader from '@/components/SiteHeader.vue' import SiteHeader from '@/components/SiteHeader'
import FooterComponent from '@/components/FooterComponent.vue' import FooterComponent from '@/components/FooterComponent'
</script> </script>
<style lang="scss"> <style lang="scss">

72
src/components/SelectedProjects.vue
View File

@ -1,32 +1,3 @@
<script setup>
import { defineProps, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import BaseButton from '@/components/buttons/BaseButton.vue';
import Markdown from "@/components/markdowns/MarkdownShort.vue";
defineProps({
projects: {
type: Array,
default: () => []
}
})
const route = useRoute()
const router = useRouter()
const store = useStore()
onMounted(() => {
const header = {
title: route.meta.title,
description: [
'Witam Państwa na podstronie z moimi projektami!'
]
}
store.commit('setHeader', header)
})
</script>
<template> <template>
<section <section
id="projects" id="projects"
@ -60,7 +31,10 @@ onMounted(() => {
{{ project.project_version }} {{ project.project_version }}
</p> </p>
</header> </header>
<Markdown :source="project.description" /> <p
class="text-sm"
v-html="markdownToText(project)"
/>
</div> </div>
<div <div
class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full" class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
@ -81,7 +55,43 @@ onMounted(() => {
</section> </section>
</template> </template>
<style lang="scss"> <script setup>
import { defineProps, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import BaseButton from '@/components/buttons/BaseButton'
import { marked } from 'marked'
defineProps({
projects: {
type: Array,
default: () => []
}
})
const route = useRoute()
const router = useRouter()
const store = useStore()
onMounted(() => {
const header = {
title: route.meta.title,
description: [
'Witam Państwa na podstronie z moimi projektami!'
]
}
store.commit('setHeader', header)
})
function markdownToText (project) {
const projectText = marked.parse(project.description)
const nodeElement = document.createElement('div')
nodeElement.innerHTML = projectText
return nodeElement.querySelector('p').innerText.substr(0, 350)
}
</script>
<style lang="scss" scoped>
@import 'scss/media'; @import 'scss/media';
.grid-project { .grid-project {

2
src/components/SiteHeader.vue
View File

@ -27,7 +27,7 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import Navigation from '@/components/NavigationHeader.vue' import Navigation from '@/components/NavigationHeader'
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()

20
src/components/markdowns/MarkdownDescription.vue
View File

@ -1,20 +0,0 @@
<script setup>
import MarkdownIt from 'markdown-it';
const markdown = new MarkdownIt();
const props = defineProps({
source: {
type: String,
required: true,
}
});
function render() {
return markdown.render(props.source);
}
</script>
<template>
<div v-html="render()" />
</template>

33
src/components/markdowns/MarkdownShort.vue
View File

@ -1,33 +0,0 @@
<script setup>
import MarkdownIt from 'markdown-it';
const markdown = new MarkdownIt();
const props = defineProps({
source: {
type: String,
required: true,
}
});
function render() {
const nodeChildElement = markdown.render(props.source);
const nodeElement = document.createElement('div');
nodeElement.innerHTML = nodeChildElement;
let length = 0;
let returnText = '';
nodeElement.querySelectorAll('p').forEach(value => {
if (length < 351) {
length += value.innerText.length;
returnText += value.innerText + ' ';
} else {
return;
}
});
return returnText.substring(0, 350).trim();
}
</script>
<template>
<p v-text="render()" />
</template>

29
src/components/sections/AboutSection.vue
View File

@ -1,16 +1,3 @@
<script setup>
import BaseButton from '@/components/buttons/BaseButton.vue'
import { useRouter } from 'vue-router';
const router = useRouter();
function scrollTo(id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
})
}
</script>
<template> <template>
<div class="bg-neutral-50"> <div class="bg-neutral-50">
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11"> <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
@ -50,7 +37,7 @@ function scrollTo(id) {
<div id="grid-photo"> <div id="grid-photo">
<figure> <figure>
<img <img
src="/assets/me.jpg" :src="`${publicPath}assets/me.jpg`"
class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]" class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
alt="Moje zdjęcie" alt="Moje zdjęcie"
> >
@ -61,6 +48,20 @@ function scrollTo(id) {
</div> </div>
</template> </template>
<script setup>
import BaseButton from '@/components/buttons/BaseButton'
import { useRouter } from 'vue-router'
const router = useRouter()
const publicPath = process.env.VUE_APP_BASE_URL + '/'
function scrollTo(id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
})
}
</script>
<style lang="scss"> <style lang="scss">
#grid-columns { #grid-columns {
grid-template-columns: 1fr 1fr .8fr; grid-template-columns: 1fr 1fr .8fr;

9
src/components/sections/FavoriteProjects.vue
View File

@ -24,11 +24,10 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import Projects from '@/components/SelectedProjects.vue' import Projects from '@/components/SelectedProjects'
import GhostButton from '@/components/buttons/GhostButton.vue' import GhostButton from '@/components/buttons/GhostButton'
const router = useRouter() const router = useRouter()
const apiURL = import.meta.env.VITE_APP_API_URL
let select_projects = ref([]) let select_projects = ref([])
@ -37,7 +36,7 @@ onMounted(() => {
}) })
function loadProjectList() { function loadProjectList() {
fetch(apiURL + '/projects?category=selected') fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
select_projects.value = data select_projects.value = data
@ -45,7 +44,7 @@ function loadProjectList() {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "scss/default"; @import "scss/default";
.selected-projects { .selected-projects {

2
src/components/sections/contacts/MailContact.vue
View File

@ -103,7 +103,7 @@
</template> </template>
<script setup> <script setup>
import BaseButton from '@/components/buttons/BaseButton.vue' import BaseButton from '@/components/buttons/BaseButton'
import { ref, reactive, watch, computed } from 'vue' import { ref, reactive, watch, computed } from 'vue'
function emailValidate (mailObj) { function emailValidate (mailObj) {

41
src/main.js
View File

@ -1,20 +1,27 @@
import { createApp } from 'vue'; import { createApp } from 'vue'
import App from './App.vue'; import App from '@/App.vue'
import router from './router'; import router from '@/router'
import { store } from './store'; import { store } from '@/store'
// import VueMeta from 'vue-meta'
import '../scss/default.scss'; import '../scss/default.scss'
import '../css/index.css'; import '../css/index.css'
import { library } from '@fortawesome/fontawesome-svg-core'; import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'; import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas, fab, far); library.add(fas, fab, far)
createApp(App) const app = createApp(App)
.component('FontAwesomeIcon', FontAwesomeIcon)
.use(router) app.config.productionTip = false
.use(store)
.mount('#app'); app.component('FontAwesomeIcon', FontAwesomeIcon)
app.use(router)
app.use(store)
// app.use(VueMeta)
app.mount('#app')

13
src/router/index.js
View File

@ -1,11 +1,10 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/HomeView'
const Home = () => import('@/views/HomeView.vue'); import About from '@/views/AboutView'
const About = () => import('@/views/AboutView.vue'); import Projects from '@/views/ProjectsView'
const Projects = () => import('@/views/ProjectsView.vue'); import Project from '@/views/ProjectView'
const Project = () => import('@/views/ProjectView.vue'); import Contact from '@/views/ContactView'
const Contact = () => import('@/views/ContactView.vue'); import NotFound from '@/views/NotFound'
const NotFound = () => import('@/views/NotFound.vue');
const mainTitle = 'kamilcraft.com' const mainTitle = 'kamilcraft.com'

8
src/store/index.js
View File

@ -1,6 +1,4 @@
import { createStore } from 'vuex'; import { createStore } from 'vuex'
const apiURL = import.meta.env.VITE_APP_API_URL;
export const store = createStore({ export const store = createStore({
state: { state: {
@ -24,7 +22,7 @@ export const store = createStore({
}, },
actions: { actions: {
fetchProjects (store) { fetchProjects (store) {
return fetch(apiURL + '/projects') return fetch(process.env.VUE_APP_API_URL + '/projects')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
store.commit('setProjects', data) store.commit('setProjects', data)
@ -32,7 +30,7 @@ export const store = createStore({
}) })
}, },
fetchCategories (store) { fetchCategories (store) {
return fetch(apiURL + '/categories') return fetch(process.env.VUE_APP_API_URL + '/categories')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
store.commit('setCategories', data) store.commit('setCategories', data)

48
src/views/AboutView.vue
View File

@ -1,25 +1,3 @@
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
const store = useStore();
const route = useRoute();
onMounted(() => {
const header = {
title: route.meta.title,
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
}
store.commit('setHeader', header);
});
onUnmounted(() => {
store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription');
});
</script>
<template> <template>
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11"> <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
<p class="font-bold"> <p class="font-bold">
@ -42,7 +20,7 @@ onUnmounted(() => {
<p> <p>
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu: W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
<a <a
href="/download/certyfikat-laravel.pdf" :href="publicPath + 'download/certyfikat-laravel.pdf'"
class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline" class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
target="_blank" target="_blank"
rel="noopener nofollow noreferrer" rel="noopener nofollow noreferrer"
@ -64,3 +42,27 @@ onUnmounted(() => {
</p> </p>
</section> </section>
</template> </template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
const publicPath = process.env.VUE_APP_BASE_URL + '/'
const store = useStore()
const route = useRoute()
onMounted(() => {
const header = {
title: route.meta.title,
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
}
store.commit('setHeader', header)
})
onUnmounted(() => {
store.commit('resetHeaderTitle')
store.commit('resetHeaderDescription')
})
</script>

4
src/views/ContactView.vue
View File

@ -9,8 +9,8 @@
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import MailContact from '@/components/sections/contacts/MailContact.vue' import MailContact from '@/components/sections/contacts/MailContact'
import OtherContact from '@/components/sections/contacts/OtherContact.vue' import OtherContact from '@/components/sections/contacts/OtherContact'
const route = useRoute() const route = useRoute()
const store = useStore() const store = useStore()

56
src/views/HomeView.vue
View File

@ -1,31 +1,3 @@
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import About from '@/components/sections/AboutSection.vue';
import ExperiencesSection from '@/components/sections/ExperiencesSection.vue';
import FavoriteProjects from '@/components/sections/FavoriteProjects.vue';
const store = useStore();
const route = useRoute();
onMounted(() => {
const header = {
title: route.meta.title,
description: [
'Chciałbym Państwa powitać na mojej stronie!',
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
],
}
store.commit('setHeader', header);
})
onUnmounted(() => {
store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription');
})
</script>
<template> <template>
<section class="home"> <section class="home">
<About /> <About />
@ -33,3 +5,31 @@ onUnmounted(() => {
<FavoriteProjects /> <FavoriteProjects />
</section> </section>
</template> </template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import About from '@/components/sections/AboutSection'
import ExperiencesSection from '@/components/sections/ExperiencesSection'
import FavoriteProjects from '@/components/sections/FavoriteProjects'
const store = useStore()
const route = useRoute()
onMounted(() => {
const header = {
title: route.meta.title,
description: [
'Chciałbym Państwa powitać na mojej stronie!',
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
]
}
store.commit('setHeader', header)
})
onUnmounted(() => {
store.commit('resetHeaderTitle')
store.commit('resetHeaderDescription')
})
</script>

64
src/views/ProjectView.vue
View File

@ -64,9 +64,9 @@
:alt="project.title" :alt="project.title"
> >
</figure> </figure>
<Markdown <div
class="markdown mt-9" class="markdown mt-9"
:source="project.description" v-html="markdownToHtml"
/> />
</div> </div>
</section> </section>
@ -79,52 +79,52 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, computed, onMounted } from 'vue'; import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router'
import { useStore } from 'vuex'; import { useStore } from 'vuex'
import Markdown from '@/components/markdowns/MarkdownDescription.vue'; import { marked } from 'marked'
const apiURL = import.meta.env.VITE_APP_API_URL; const route = useRoute()
const route = useRoute(); const store = useStore()
const store = useStore();
const isLoaded = ref(false); const isLoaded = ref(false)
let project = reactive({}); let project = reactive({})
const getCategories = computed(() => store.getters.getCategories); const getCategories = computed(() => store.getters.getCategories)
const markdownToHtml = computed(() => marked.parse(project.description))
onMounted(() => { onMounted(() => {
if (getCategories.value.length === 0) { if (getCategories.value.length === 0) {
store.dispatch('fetchCategories'); store.dispatch('fetchCategories')
} }
loadProject(route.params.id); loadProject(route.params.id)
}) })
function getCategoryName(categories = []) { function getCategoryName(categories = []) {
const categoriesText = []; const categoriesText = []
categories.forEach(categoryElement => { categories.forEach(categoryElement => {
const category = getCategories.value.find(category => category.slug === categoryElement); const category = getCategories.value.find(category => category.slug === categoryElement)
if (category) { if (category) {
categoriesText.push(category.name); categoriesText.push(category.name)
} }
}); })
return categoriesText[0] ?? undefined; return categoriesText[0] ?? undefined
} }
function loadProject(id) { function loadProject(id) {
fetch(apiURL + '/project/' + id) fetch(process.env.VUE_APP_API_URL + '/project/' + id)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
project.title = data.title; project.title = data.title
project.description = data.description; project.description = data.description
project.release_date = data.release_date; project.release_date = data.release_date
project.author = data.author; project.author = data.author
project.categories = data.categories; project.categories = data.categories
project.project_version = data.project_version; project.project_version = data.project_version
project.project_url = data.project_url; project.project_url = data.project_url
project.images = data.images; project.images = data.images
isLoaded.value = true; isLoaded.value = true
}); })
} }
</script> </script>
@ -153,7 +153,7 @@ a {
} }
p + ol, p + ul, p + blockquote { p + ol, p + ul, p + blockquote {
@apply -mb-2; @apply -mb-2.5;
} }
ol { ol {
@ -174,7 +174,7 @@ a {
} }
p { p {
@apply mb-2 text-justify; @apply mb-2.5 text-justify;
} }
blockquote { blockquote {

112
src/views/ProjectsView.vue
View File

@ -1,59 +1,3 @@
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import SelectedProjects from '@/components/SelectedProjects.vue';
const store = useStore();
const activeCategory = ref('all');
const projects = reactive([]);
const getCategories = computed(() => store.getters.getCategories);
onMounted(() => {
loadAllData();
});
onUnmounted(() => {
store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription');
});
function loadAllData () {
store.dispatch('fetchCategories');
store.dispatch('fetchProjects').then(loadedProjects => {
loadedProjects.forEach(project => {
projects.push(project);
});
});
}
function loadListWhereCategory(category) {
projects.splice(0);
setTimeout(() => {
if (category !== 'all') {
const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category));
storedProjects.forEach(project => {
projects.push(project);
})
} else {
store.getters.getProjects.forEach(project => {
projects.push(project);
});
}
}, 500);
}
function changeCategory(category) {
activeCategory.value = category
loadListWhereCategory(category)
}
function selectedCategory(categorySlug) {
return activeCategory.value === categorySlug;
}
</script>
<template> <template>
<SelectedProjects :projects="projects"> <SelectedProjects :projects="projects">
<div class="pb-9"> <div class="pb-9">
@ -81,6 +25,62 @@ function selectedCategory(categorySlug) {
</div> </div>
</template> </template>
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import SelectedProjects from '@/components/SelectedProjects'
const store = useStore()
const activeCategory = ref('all')
const projects = reactive([])
const getCategories = computed(() => store.getters.getCategories)
onMounted(() => {
loadAllData()
})
onUnmounted(() => {
store.commit('resetHeaderTitle')
store.commit('resetHeaderDescription')
})
function loadAllData () {
store.dispatch('fetchCategories')
store.dispatch('fetchProjects').then(loadedProjects => {
loadedProjects.forEach(project => {
projects.push(project)
})
})
}
function loadListWhereCategory(category) {
projects.splice(0)
setTimeout(() => {
if (category !== 'all') {
const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
storedProjects.forEach(project => {
projects.push(project)
})
} else {
store.getters.getProjects.forEach(project => {
projects.push(project)
})
}
}, 500)
}
function changeCategory(category) {
activeCategory.value = category
loadListWhereCategory(category)
}
function selectedCategory(categorySlug) {
return activeCategory.value === categorySlug
}
</script>
<style lang="scss"> <style lang="scss">
@import "scss/media"; @import "scss/media";

26
vite.config.js
View File

@ -1,26 +0,0 @@
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig((mode) => {
const env = loadEnv(mode, process.cwd(), "");
return {
publicPath: '/',
transpileDependencies: true,
server: {
host: 'localhost',
port: parseInt(env.VITE_PORT ?? 5173),
hmr: {
host: 'localhost',
},
},
plugins: [ vue() ],
resolve: {
vue: 'vue/dist/vue.esm-bundler.js',
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
};
});

14
vue.config.js Normal file
View File

@ -0,0 +1,14 @@
const path = require("path")
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
publicPath: '/',
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
}
}
},
})