Using initial design by James, created a Vue3 template starter. #140

kinxiel · 2022-10-08T14:04:47Z

Design

You can find the design for the MVP, care of Martin here.

Description, Motivation, Context

Project uses Vue/Nuxt3 for the frontend and Vite as the build tool. Planning to add Vitest and Cypress for unit testing and e2e testing later on.
Project uses TypeScript with Vue but compilation is not set to strict, so you can have type errors and it will still run.
Data is generated by a Node script. Both the data and the scripts can be found here
Page should be responsive. The design for both the desktop and mobile views can be found in the design.
Used to use pnpm but because of some problems, switched to normal npm.

Todos

General

CSS: Responsive Media Queries for each breakpoint. It's in the design but hasn't been implemented yet.

Desktop

Home Page
Menu
Photos Page.
Photos Page: how to handle videos (new issue)
About Page.
Join Page.
Events Page.
Single Event Page. Page to view or RSVP for a single event. Since Meetup does not allow access to past events, should probably come up with a separate page on the site for past events. Perhaps something Markdown based.
404 page.

Mobile

Home: Minor Adjustments
Menu: Hamburger menu, mobile view, etc.
Photos Page: works ok I guess.
About Page.
Join Page.
Events Page. It's usable but needs to match the design.
Single Event Page.
404 page. Haven't checked on mobile.
Responsive adjustments for iPhone notch area.

Tests

Unit tests (Vitest)
e2e tests (Cypress)

Todo: Probably not for MVP but later

Survey results visualization
Dark mode (probably a nice to have but not necessary at the moment)

Notes

To accommodate both the desktop and mobile versions, some components need to be updated, feel free to do so.

martinheidegger

Hello @kinxiel 👋!

This has already been a bunch of nice work! 🤩 Looking over it, though, I have found quite a few tasks... 😅

Link the Subscribe button to the subscription service.

This is how it currently works.
For the deploy to work, the build script needs to be adjusted, right?
"What We Do"

We are a independent group of designers and developers in the Kansai (Osaka/Kyoto) area of Japan. To practice our English presentations skills, learns new things and meet other people we are organizing IRL (in-person) events.
All our events are organized by volunteers. Any money that we collect is just to cover our costs.
Photos Page We can use our Flickr Group for the pictures. It even has an API. Maybe @Kimmym6a has an idea for how to display them? Until then maybe a link is enough?
Contact Page Yes. This ties into another isse about SNS use of owddm. Will bring it up in an other issue. (more on that later)
Page for each event. That'd be awesome!

martinheidegger · 2022-10-11T15:16:47Z

package.json

@@ -1,44 +1,42 @@
 {
  "name": "owddm",
-  "version": "1.0.0",


Lot's here is better to be kept, particularly the "private": true flag.

src/components/SiteMainNewsletter.vue

src/components/__tests__/HelloWorld.spec.ts

index-copy.html

martinheidegger · 2022-10-11T15:26:29Z

layouts/partials/analytics.html

@@ -1,3 +0,0 @@
-{{- if not .Site.IsServer -}}


Can we re-add this?

martinheidegger · 2022-10-11T15:28:32Z

package.json

-    "htmlhint": "htmlhint docs/_site/**/*.html",
-    "serve": "npx hugo serve",
-    "spellcheck": "npx cspell \"content/**/*.md\"",
-    "svgo": "npm-run-all --parallel \"svgo:base -- --folder=docs/img/header\"",


Is it possible to keep the useful scripts in here? spellcheck, svgo, css-lint and html-hint seem to be a good idea?

Do we mix Vue with Hugo?

No, the hugo scripts make little sense, but the linting may be a good idea. Spellcheck, linting etc.

martinheidegger · 2022-10-13T16:53:18Z

config.yml

-pluralizeListTitles: false
-googleAnalytics: "disabled"
-
-params:


This set's a bunch of meta header data that seems missing from the vue template?

Here is the rendered header.

<meta property="og:description" content="Osaka Web Designers and Developers Meetup"> <meta property="og:type" content="website"> <meta property="og:url" content="https://owddm.com/"> <meta property="og:site_name" content="owddm"> <meta name=twitter:card content="summary"> <meta name=twitter:site content="@owddm"> <meta name=theme-color content="#005f9e"> <meta name=geo.placename content="Osaka, jp"> <meta name=geo.region content="jp">

isn't this config.yml part of the Hugo config?

It is, but the header makes sense on the regular site as well, right?

docs/index.html

martinheidegger · 2022-10-13T17:43:44Z

layouts/_default/404.html

@@ -1,30 +0,0 @@
-{{ define "main" }}
-


The 404.html has not been set up. But if we had one 404s would work. This would even fix #12

static/CNAME

martinheidegger · 2022-11-05T04:09:00Z

@kinxiel I added the FLICKR_SECRET and FLICKR_KEY as secrets to the organization and as long as its not a fork, I think you should be able to use it in github actions.

kinxiel · 2022-11-05T04:29:35Z

Thanks. I'll try to see if we can make some kind of gallery page.

kinxiel · 2022-12-09T11:53:34Z

Migrated to Nuxt 3 from Vue for easier routing and etc.

martinheidegger · 2023-05-03T01:32:48Z

@kinxiel Awesome I think its almost there as well! 😻 There is quite a few things that can be better, A few things have priority in my book:

Remove links that point nowhere (RSS/etc.) and add issues to add each of them.
Fix the rendering of the meetup text to break lines properly
Make the KWDDM header actually say KWDDM 😓
Make sure that the links outside open new windows
Let the github icon point to the homepage repository
Create issues for all the things need to be fixed.

kinxiel · 2023-05-11T12:55:02Z

Remove links that point nowhere (RSS/etc.) and add issues to add each of them.

Fix the rendering of the meetup text to break lines properly

Make the KWDDM header actually say KWDDM 😓

Make sure that the links outside open new windows

Let the github icon point to the homepage repository

Create issues for all the things need to be fixed.

martinheidegger · 2023-05-28T17:31:41Z

With the additional things in https://github.com/kinxiel/owddm.com/pull/6 we are mostly at a new version.

Thought one thing we still kind of need → <head><title>... - without that its a bit ... sad.

Other than that, I think the rest is "next step"

…ated various parts of the design into their own separate components.

…routing easier.

…ord content title if available.

all the work

…want to debug.

…o be clear about the version

… progress.

…so started using lazyloading)

…make it look like the design.

… out the survey menu for now, since it is not yet ready.

…d be a link semantically. Use NuxtLink activeClass prop where applicable. Other minor bug fixes.

…DDM.

…page.

…th mobile and regular versions with consistent spacing of the banner to the var(--space) definition.

martinheidegger · 2023-06-04T05:07:07Z

@kinxiel I rebased this branch at https://github.com/owddm/owddm.com/tree/kmain - you should be able to use it with

git fetch && git reset --hard origin/kmain

and then git push -f or comparable.

martinheidegger

Good first version of the new homepage I think

martinheidegger reviewed Oct 13, 2022

View reviewed changes

kinxiel and others added 23 commits June 4, 2023 14:00

Using initial design by James, created a Vue3 template starter. Separ…

befb228

…ated various parts of the design into their own separate components.

Added some minor changes, based on the review comments.

85a31c6

Updated content for What We Do.

8f0d948

Migrate from Vue to Nuxt3, which still uses Vite but also makes page …

a817e00

…routing easier.

Update Readme.

d884f1c

Added extremely minimal 404 page.

fcb3d43

feat: Add first draft of the photo gallery.

e67d199

feat: Added conditional rendering to photo gallery to render the disc…

f783816

…ord content title if available.

improvement for photos display

a8fdf7f

all the work

Moving from pnpm to npmjs as I ran into bugs with pnpm that I didn't …

5c6468b

…want to debug.

Also added package-lock.json because that is good for apps/websites t…

987c37e

…o be clear about the version

started implementing the new design with the map

3ecf0f4

feat: Processing event data structure. Events page is still a work in…

42a1838

… progress.

feat: adding event parsing and markers for the events to the maps (al…

f34a761

…so started using lazyloading)

update: Fix current base to match with latest update to main.

ec7690e

Removed old layout settings

191b783

fix: making sure that the map is readable by default

a54eefc

chore: updating nuxt

4eb27bd

fix: stop using ssr as we don't want to rebuild the site often.

037bdd6

fix: live reloading of the maps

fef9ff9

chore: removing unnecessary component

9c44ced

refactor:: use computed instead of watchEffect

3442fce

Got the basic events page working, but still need to do some work to …

345ab6f

…make it look like the design.

kinxiel and others added 25 commits June 4, 2023 14:04

fix: Minor fix to navigation styling.

64155e1

fix: Clean up and removed some unused files. Some other minor fixes.

57257d1

feat: Added error page if event slug entered is wrong.

4015c79

fix: Use JavaScript to keep the date on the footer updated. Commented…

c85639d

… out the survey menu for now, since it is not yet ready.

feat: Added Vitest for unit testing.

ad855e4

fix: Added CSS safe areas to handle the mobile devices with a notch.

5a77db9

fix: Minor CSS adjustments.

1ae8bae

update: Add additional tests.

64812f2

fix: Fixed an a11y issue with the join link acting as a button, shoul…

dcafa44

…d be a link semantically. Use NuxtLink activeClass prop where applicable. Other minor bug fixes.

fix: Removed unused links.

04f44b3

fix: Make external links open in new tabs.

d7ebc47

fix: Github link and other links.

7906742

feat: adding banner background

a8896e2

fix: Fixed the event page banner image and logo for both OWDDM and KW…

4f40c78

…DDM.

fix: Fixed the markdown formatting of the p tags in the single event …

0f2342f

…page.

fix: Fixed the event page markdown description in the mobile view.

4887106

update: Added calendar for both OWDDM and KWDDM.

edee577

fix: padding in landing page

2d03592

fix: Linking to events from markers.

0a3419e

fix: consistent banner display in events with a banner showing for bo…

fd0c923

…th mobile and regular versions with consistent spacing of the banner to the var(--space) definition.

fix: consistent colors (osaka red, kyoto purple)

aa5e1c9

fix: adding home link

ee9aa5b

fix: only showing menu when its necessary

bf8b6ad

fix: text-decoration in main menu

b9fe097

update: Added Head title and SEO meta tags.

5fd45cb

Removed Static Files

7b06b43

martinheidegger approved these changes Jun 4, 2023

View reviewed changes

martinheidegger merged commit 74b4ff9 into owddm:main Jun 4, 2023

martinheidegger mentioned this pull request Jun 4, 2023

Version 2.0 #134

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using initial design by James, created a Vue3 template starter. #140

Using initial design by James, created a Vue3 template starter. #140

kinxiel commented Oct 8, 2022 •

edited

Loading

martinheidegger left a comment

martinheidegger Oct 11, 2022

martinheidegger Oct 11, 2022

martinheidegger Oct 11, 2022

kinxiel Oct 13, 2022

martinheidegger Oct 14, 2022

martinheidegger Oct 13, 2022

kinxiel Oct 14, 2022

martinheidegger Nov 1, 2022

martinheidegger Oct 13, 2022

martinheidegger commented Nov 5, 2022

kinxiel commented Nov 5, 2022

kinxiel commented Dec 9, 2022

martinheidegger commented May 3, 2023

kinxiel commented May 11, 2023 •

edited

Loading

martinheidegger commented May 28, 2023

martinheidegger commented Jun 4, 2023

martinheidegger left a comment

Using initial design by James, created a Vue3 template starter. #140

Using initial design by James, created a Vue3 template starter. #140

Conversation

kinxiel commented Oct 8, 2022 • edited Loading

Design

Description, Motivation, Context

Todos

General

Desktop

Mobile

Tests

Todo: Probably not for MVP but later

Notes

martinheidegger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martinheidegger commented Nov 5, 2022

kinxiel commented Nov 5, 2022

kinxiel commented Dec 9, 2022

martinheidegger commented May 3, 2023

kinxiel commented May 11, 2023 • edited Loading

martinheidegger commented May 28, 2023

martinheidegger commented Jun 4, 2023

martinheidegger left a comment

Choose a reason for hiding this comment

kinxiel commented Oct 8, 2022 •

edited

Loading

kinxiel commented May 11, 2023 •

edited

Loading