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

- vite + markdown-it

Browse Source
This commit is contained in:
Kamil Niemczycki 2023-07-30 19:18:22 +02:00
parent cbaca47fb2
commit 8054be6846
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
25 changed files with 1531 additions and 18299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development Normal file
View File

@ -0,0 +1,4 @@
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,3 +1,5 @@
NODE_MODE=local
VUE_APP_TITLE=kamilcraft.com
VUE_APP_BASE_URL=http://127.0.0.1
VUE_APP_API_URL=https://api.kamilcraft.com
VUE_APP_BASE_URL=http://localhost:5173
VUE_APP_API_URL=https://api.kamilcraft.com/v1
VITE_PORT=5173

4
.env.production Normal file
View File

@ -0,0 +1,4 @@
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
View File

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

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

@ -6,16 +6,13 @@
<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.gstatic.com" crossorigin>
<link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico">
<link rel="icon" href="/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=Thasadith&display=swap" rel="stylesheet">
<title>KamilCraft.com</title>
</head>
<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>
<!-- built files will be auto injected -->
<script type="module" src="/src/main.js"></script>
</body>
</html>

19235
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
package.json
View File

@ -3,32 +3,28 @@
"version": "1.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2",
"core-js": "^3.26.1",
"marked": "^4.2.4",
"vue": "^3.2.45",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.4.7",
"vue": "^3.3.4",
"vue-meta": "^2.4.0",
"vue-router": "^4.1.6",
"vue-router": "^4.2.4",
"vuex": "^4.1.0"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/eslint-parser": "^7.19.1",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.29.0",
"eslint-plugin-vue": "^9.8.0",
"markdown-it": "^13.0.1",
"postcss": "^8.4.20",
"sass": "^1.56.2",
"sass-loader": "^13.2.0",

4
src/App.vue
View File

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

72
src/components/SelectedProjects.vue
View File

@ -1,3 +1,32 @@
<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>
<section
id="projects"
@ -31,10 +60,7 @@
{{ project.project_version }}
</p>
</header>
<p
class="text-sm"
v-html="markdownToText(project)"
/>
<Markdown :source="project.description" />
</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"
@ -55,43 +81,7 @@
</section>
</template>
<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>
<style lang="scss">
@import 'scss/media';
.grid-project {

2
src/components/SiteHeader.vue
View File

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

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

@ -0,0 +1,20 @@
<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 Normal file
View File

@ -0,0 +1,33 @@
<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,3 +1,16 @@
<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>
<div class="bg-neutral-50">
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
@ -37,7 +50,7 @@
<div id="grid-photo">
<figure>
<img
:src="`${publicPath}assets/me.jpg`"
src="/assets/me.jpg"
class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
alt="Moje zdjęcie"
>
@ -48,20 +61,6 @@
</div>
</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">
#grid-columns {
grid-template-columns: 1fr 1fr .8fr;

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

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

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

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

41
src/main.js
View File

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

13
src/router/index.js
View File

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

8
src/store/index.js
View File

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

48
src/views/AboutView.vue
View File

@ -1,3 +1,25 @@
<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>
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
<p class="font-bold">
@ -20,7 +42,7 @@
<p>
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
<a
:href="publicPath + 'download/certyfikat-laravel.pdf'"
href="/download/certyfikat-laravel.pdf"
class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
target="_blank"
rel="noopener nofollow noreferrer"
@ -42,27 +64,3 @@
</p>
</section>
</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 { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import MailContact from '@/components/sections/contacts/MailContact'
import OtherContact from '@/components/sections/contacts/OtherContact'
import MailContact from '@/components/sections/contacts/MailContact.vue'
import OtherContact from '@/components/sections/contacts/OtherContact.vue'
const route = useRoute()
const store = useStore()

40
src/views/HomeView.vue
View File

@ -1,21 +1,13 @@
<template>
<section class="home">
<About />
<ExperiencesSection />
<FavoriteProjects />
</section>
</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'
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()
const store = useStore();
const route = useRoute();
onMounted(() => {
const header = {
@ -23,13 +15,21 @@ onMounted(() => {
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)
store.commit('setHeader', header);
})
onUnmounted(() => {
store.commit('resetHeaderTitle')
store.commit('resetHeaderDescription')
store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription');
})
</script>
<template>
<section class="home">
<About />
<ExperiencesSection />
<FavoriteProjects />
</section>
</template>

64
src/views/ProjectView.vue
View File

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

112
src/views/ProjectsView.vue
View File

@ -1,3 +1,59 @@
<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>
<SelectedProjects :projects="projects">
<div class="pb-9">
@ -25,62 +81,6 @@
</div>
</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">
@import "scss/media";

26
vite.config.js Normal file
View File

@ -0,0 +1,26 @@
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
View File

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