panwor.github.io/featuredProjects.js at main · PanWor/panwor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
document.querySelector('#featured-projects').innerHTML = whatLanguage() === 'pl' ? '<p style="color:var(--muted-color);font-size:.9rem;">Ładowanie projektów...</p>' : '<p style="color:var(--muted-color);font-size:.9rem;">Loading projects...</p>';

function whatLanguage() {
    if (window.location.href.includes('/pl')) {
        return 'pl';
    } else {
        return 'en';
    }
}

function whereIsJSON() {
    if (window.location.href.includes('/pl')) {
        return '../projects.json';
    } else {
        return 'projects.json';
    }
}

function whereIsIcons() {
    if (window.location.href.includes('/pl')) {
        return '../images/';
    } else {
        return 'images/';
    }
}

function languageEmoji(lang) {
    if (lang === 'pl') {
        return '🇵🇱';
    } else if (lang === 'en') {
        return '🇺🇸';
    } else if (lang === 'en pl') {
        return '🇺🇸 🇵🇱';
    } else {
        return '–';
    }
}

function languageEmojiTitle(projectLang, langUsed) {
    if (langUsed=== 'pl') {
        if (projectLang === 'pl') {
            return 'Ten projekt jest w języku polskim';
        } else if (projectLang === 'en') {
            return 'Ten projekt jest w języku angielskim';
        } else if (projectLang === 'en pl') {
            return 'Ten projekt jest w języku polskim i angielskim';
        } else {
            return 'Ten projekt nie ma określonego języka';
        }
    } else if (langUsed === 'en') {
        if (projectLang === 'pl') {
            return 'This project is in Polish';
        } else if (projectLang === 'en') {
            return 'This project is in English';
        } else if (projectLang === 'en pl') {
            return 'This project is in Polish and English';
        } else {
            return 'This project has no defined language';
        }
    } else {
        return 'Error / Błąd';
    }
}

function languageButtons(lang) {
    if (lang === 'pl') {
        return {demo: 'Demo', source: 'Kod projektu', 'see-more': 'Zobacz więcej', 'pc': 'Przystosowany do PC', 'mobile': 'Przystosowany do smartfonów'};
    } else if (lang === 'en') {
        return {demo: 'Demo', source: 'Source', 'see-more': 'See more', 'pc': 'PC-compatible', 'mobile': 'Mobile-compatible'};
    } else {
        return {demo: 'Demo', source: 'Source', 'see-more': 'See more', 'pc': 'PC-compatible', 'mobile': 'Mobile-compatible'};
    }
}

const projectsContainer = document.querySelector('#featured-projects');

fetch(whereIsJSON())
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        let success = true;
        buttons = languageButtons(whatLanguage());
        imagesSource = whereIsIcons();
        data = data.articles[whatLanguage()];
        console.log(`Featured Projects: `, data);

        document.querySelector('#featured-projects').textContent = '';

        data.forEach(project => {
            if (project.featured) {
                let title = project.title;
                let description = project.description;
                let dateWord = project['date-word'];
                let lang = languageEmoji(project.lang);
                let langTitle = languageEmojiTitle(project.lang, whatLanguage());
                let demo = project['demo'] ? project['demo'] : null;
                let source = project['source'] ? project['source'] : null;
                let seeMore = project['see-more'] ? project['see-more'] : null;
                let pcCompatibility = project['pc'] ? project['pc'] : null;
                let mobileCompatibility = project['mobile'] ? project['mobile'] : null;

                projectsContainer.innerHTML += `
                    <div class="project-card">
                        <div class="lang" title="${langTitle}">${lang}</div>
                        <time>${dateWord}</time>
                        <a class="project-title">${title}</a>
                        <h4>${description}</h4>
                        <div class="links anchored">
                            ${demo ? `<a class="button small flex" href="${demo}" target="_blank" rel="noreferrer">${buttons.demo}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:0.75rem;height:0.75rem;fill:currentColor"><g data-name="Layer 2"><g data-name="external-link"><rect width="24" height="24" opacity="0"></rect><path d="M20 11a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1z"></path><path d="M16 5h1.58l-6.29 6.28a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L19 6.42V8a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4a1 1 0 0 0 0 2z"></path></g></g></svg></a>` : ``}
                            ${source ? `<a class="button small flex" href="${source}" target="_blank" rel="noreferrer">${buttons.source} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:0.75rem;height:0.75rem;fill:currentColor"><g data-name="Layer 2"><g data-name="external-link"><rect width="24" height="24" opacity="0"></rect><path d="M20 11a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1z"></path><path d="M16 5h1.58l-6.29 6.28a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L19 6.42V8a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4a1 1 0 0 0 0 2z"></path></g></g></svg></a>` : ``}
                            ${seeMore ? `<a class="button small flex" href="${seeMore}" rel="noreferrer">${buttons['see-more']} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:0.75rem;height:0.75rem;fill:currentColor"><g data-name="Layer 2"><g data-name="external-link"><rect width="24" height="24" opacity="0"></rect><path d="M20 11a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1z"></path><path d="M16 5h1.58l-6.29 6.28a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L19 6.42V8a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4a1 1 0 0 0 0 2z"></path></g></g></svg></a>` : ``}
                        </div>
                        ${pcCompatibility ? `<img class="compatibility" src="${imagesSource}pc.svg" alt="${buttons['pc']}" title="${buttons['pc']}">` : ``}
                        ${mobileCompatibility ? `<img class="compatibility mobile" src="${imagesSource}mobile.svg" alt="${buttons['mobile']}" title="${buttons['mobile']}">` : ``}
                    </div>
                `

                console.log(title, description, dateWord, lang, demo, source, seeMore);
            }
        });
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });