Skip to content

Commit f0a8145

Browse files
Misaka13514Misaka13514
authored
Merge pull request #25 from tusooa/event-poster-refactor
Event poster refactor & add text content
2 parents 8c21c63 + be3a234 commit f0a8145

53 files changed

Lines changed: 1460 additions & 938 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎content/.vitepress/config.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { footnote } from '@mdit/plugin-footnote';
22
import { ruby } from '@mdit/plugin-ruby';
33
import VueJsx from '@vitejs/plugin-vue-jsx';
44
import { fileURLToPath } from 'node:url';
5+
import { glob, rm } from 'node:fs/promises';
6+
import { resolve } from 'node:path';
57
import Unocss from 'unocss/vite';
68
import { defineConfig } from 'vitepress';
79
import { generateSidebar, VitePressSidebarOptions } from 'vitepress-sidebar';
@@ -14,6 +16,8 @@ const commonSidebarConfigs: Partial<VitePressSidebarOptions> = {
1416
useFolderLinkFromIndexFile: true,
1517
useTitleFromFileHeading: true,
1618
collapsed: true,
19+
// exclude all pages starting with _
20+
excludeByGlobPattern: ['**/_*'],
1721
};
1822

1923
const supportedLocales = [rootLocale, 'zh-Hans', 'ja'] as const;
@@ -87,6 +91,7 @@ const vitePressConfig = defineConfig({
8791
logo: '/assets/favicon-new.png',
8892

8993
sidebar: generateSidebar(sidebarConfigs),
94+
srcExclude: ['**/_*'],
9095

9196
footer: {
9297
message:
@@ -154,6 +159,12 @@ const vitePressConfig = defineConfig({
154159
md.use(ruby);
155160
},
156161
},
162+
async buildEnd({ outDir }) {
163+
for await (const entry of glob('**/events/_*.html', { cwd: outDir })) {
164+
const fn = resolve(outDir, entry);
165+
await rm(fn);
166+
}
167+
},
157168
});
158169

159170
// http://localhost:5173/content/zh-Hans/posts/statement-linux-foundation

‎content/.vitepress/theme/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,7 @@ body {
127127
color: var(--vp-code-color);
128128
font-family: var(--vp-font-family-mono);
129129
}
130+
131+
.allCaps {
132+
text-transform: uppercase;
133+
}

‎content/EventsView.vue‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<template>
2+
<div class="EventGrid">
3+
<fieldset class="displayModeBox">
4+
<legend class="legendText">{{ labels.displayMode }}</legend>
5+
<div class="choices">
6+
<div class="choice">
7+
<label>
8+
<input type="radio" :checked="!showText" @input="showText = false">
9+
{{ labels.showPoster }}
10+
</label>
11+
</div>
12+
<div class="choice">
13+
<label>
14+
<input type="radio" :checked="showText" @input="showText = true">
15+
{{ labels.showText }}
16+
</label>
17+
</div>
18+
</div>
19+
</fieldset>
20+
<div class="container">
21+
<div role="list" class="events">
22+
<div v-for="({ name, item, Content }) in events" role="listitem" :key="name" loading='lazy'>
23+
<article class="event">
24+
<time v-if="item.time" class="date" :datetime="getEventDate(new Date(item.time))">
25+
<span class="year">{{ (new Date(item.time)).toLocaleDateString('default', { year: 'numeric' }) }}</span>
26+
<span class="month">{{ (new Date(item.time)).toLocaleDateString('default', { month: 'short' }) }}</span>
27+
<span class="day">{{ (new Date(item.time)).toLocaleDateString('default', { day: 'numeric' }) }}</span>
28+
<div class="actual-date" aria-hidden="true">
29+
<span class="year">{{ (new Date(item.time)).toLocaleDateString('default', { year: 'numeric' }) }}</span>
30+
<span class="month">{{ (new Date(item.time)).toLocaleDateString('default', { month: 'short' }) }}</span>
31+
<span class="day">{{ (new Date(item.time)).toLocaleDateString('default', { day: 'numeric' }) }}</span>
32+
</div>
33+
</time>
34+
<div>
35+
<div class="info">
36+
<h2 class="summary" v-html="name"></h2>
37+
<p class="time">
38+
<time v-if="item.time" :datetime="getEventFullDateTime(new Date(item.time))">
39+
{{ (new Date(item.time)).toLocaleTimeString('default', { weekday: "long", hour: '2-digit', minute: '2-digit', hour12: false, timeZoneName: "short" }) }}
40+
</time>
41+
<span v-if="item.location">
42+
@ {{ item.location }}
43+
</span>
44+
</p>
45+
<div role="list" class="community">
46+
<div v-for="c in item.community" role="listitem" :key="c" class="cclick" loading='lazy' v-html="c">
47+
</div>
48+
<div class="clink" v-if="item.link && item.link.type" role="listitem">
49+
<a v-if="item.link && item.link.type" class="link-type" :href="`${item.link.url}`">
50+
{{ item.link.type }}
51+
</a>
52+
</div>
53+
</div>
54+
<!--div class="lang">
55+
{{
56+
item.lang
57+
? item.lang.reduce((x, y) => x + " / " + y)
58+
: "English / 普通话 / 吳語 / 日本語"
59+
}}
60+
</div-->
61+
</div>
62+
<div class="poster">
63+
<img v-show="!showText" :src="`/assets/events/${item.image}`" :alt="`${name}`" />
64+
<component v-show="showText" :is="Content" />
65+
<!-- When js is not available, the user cannot toggle, so make both text and poster visible -->
66+
<noscript>
67+
<component :is="Content" />
68+
</noscript>
69+
</div>
70+
</div>
71+
</article>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</template>
77+
78+
<script setup>
79+
import { getEventDate, getEventFullDateTime } from './dateTimeUtils';
80+
import { computed, ref, onMounted, nextTick } from 'vue';
81+
82+
const { imports } = defineProps({
83+
imports: Object,
84+
labels: Object,
85+
});
86+
87+
const showText = ref(false);
88+
const showPoster = computed({
89+
get() { return !showText; },
90+
set(v) { showText = !v; },
91+
});
92+
93+
const events = computed(() => {
94+
const r = Object.values(imports).map(({
95+
__pageData,
96+
default: Content,
97+
}) => {
98+
const { title: name, ...item } = __pageData.frontmatter;
99+
return {
100+
name,
101+
filename: __pageData.filePath,
102+
item,
103+
Content,
104+
};
105+
});
106+
// sort by time first, then filename
107+
r.sort((a, b) =>
108+
new Date(b.item.time).getTime() - new Date(a.item.time).getTime()
109+
|| (a.filename > b.filename ? -1 : a.filename < b.filename ? 1 : 0)
110+
);
111+
return r;
112+
});
113+
</script>
114+
115+
<style scoped lang="sass">
116+
// vitepress/VPFeatures
117+
.EventGrid
118+
position: relative
119+
padding: 0 24px
120+
121+
@media (min-width: 640px)
122+
.EventGrid
123+
padding: 0 48px
124+
125+
@media (min-width: 960px)
126+
.EventGrid
127+
padding: 0 64px
128+
129+
// See Also: ../Calendar.vue
130+
131+
$grid__cols: 12
132+
.container
133+
margin: 0 auto
134+
max-width: 1152px
135+
136+
.events
137+
display: block
138+
width: 100%
139+
padding: 1em 0 1em 0
140+
141+
// Event box (this card style is copied from VitePress homepage theme)
142+
.event
143+
display: flex
144+
gap: 1em
145+
border: 1px solid var(--vp-c-bg-soft)
146+
border-radius: 12px
147+
height: 100%
148+
background-color: var(--vp-c-bg-soft)
149+
transition: border-color 0.25s, background-color 0.25s
150+
padding: 1em
151+
margin: 0 0 1em 0
152+
width: 100%
153+
154+
@media (min-width: 960px)
155+
.events
156+
display: block
157+
column-count: 2
158+
159+
.event:hover
160+
border-color: var(--vp-c-brand-1)
161+
162+
img
163+
border-radius: 12px
164+
165+
.date, .actual-date
166+
display: flex
167+
gap: 0.5em
168+
justify-content: flex-end
169+
170+
.date
171+
.month, .day, .year
172+
font-size: 1.5em
173+
174+
.dow
175+
font-size: 1.2em
176+
line-height: 1.2em
177+
178+
// BEGIN sideways-lr COMPATIBILITY WORKAROUND
179+
// It's okay if you don't understand this whole ordeal, css is awesome right?
180+
// Check https://stackoverflow.com/q/77353660/7346633
181+
writing-mode: vertical-rl
182+
position: relative
183+
184+
span
185+
opacity: 0
186+
187+
.actual-date
188+
position: absolute
189+
top: 0
190+
left: 0
191+
192+
writing-mode: lr
193+
width: max-content
194+
transform: rotate(-90deg) translateX(-100%)
195+
transform-origin: top left
196+
197+
span
198+
opacity: unset
199+
// END sideways-lr COMPATIBILITY WORKAROUND
200+
201+
.dow, .time, .month
202+
color: var(--vp-c-brand-1)
203+
204+
.summary
205+
font-weight: bold
206+
font-size: 1.2em
207+
margin: 0 0 4px 0
208+
209+
.description
210+
margin-top: 1em
211+
212+
.community
213+
display: flex
214+
gap: 6px
215+
flex-wrap: wrap
216+
padding: 6px 0px 6px 0px
217+
margin: 0 0 4px 0
218+
219+
.cclick, .clink
220+
border: 1px solid var(--vp-c-indigo-soft)
221+
border-radius: 12px
222+
padding: 2px 8px 0 8px
223+
color: var(--vp-c-indigo-1)
224+
background-color: var(--vp-c-indigo-soft)
225+
height: 26px
226+
white-space: nowrap
227+
228+
.clink
229+
border: 1px solid
230+
border-radius: 12px
231+
padding: 2px 8px 0 8px
232+
color: var(--vp-c-red-1)
233+
background-color: var(--vp-c-red-soft)
234+
235+
// Phone
236+
@media(max-width: 600px)
237+
.event
238+
flex-direction: column
239+
gap: 1.5em
240+
font-size: 0.8em
241+
242+
.date
243+
writing-mode: horizontal-tb
244+
transform: none
245+
justify-content: flex-start
246+
align-items: flex-end
247+
248+
.actual-date
249+
display: none
250+
251+
span
252+
opacity: 1
253+
254+
.displayModeBox
255+
border: 1px solid var(--vp-c-brand-1)
256+
border-radius: 12px
257+
margin-left: auto
258+
margin-right: auto
259+
width: fit-content
260+
261+
.legendText, .choices
262+
margin-left: auto
263+
margin-right: auto
264+
265+
.choices
266+
width: fit-content
267+
margin-bottom: 5px
268+
margin-left: 10px
269+
margin-right: 10px
270+
</style>
271+
272+
<style lang="sass">
273+
.poster
274+
p
275+
margin-top: 0.5em
276+
ul, ol
277+
list-style: inherit
278+
margin-left: 1em
279+
a
280+
color: var(--vp-c-brand-1)
281+
text-decoration: underline
282+
&:hover, &:focus-visible
283+
color: var(--vp-c-brand-2)
284+
</style>

‎content/en/docs/tech.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,44 @@ title: Tech Generic Docs
33
---
44
# Tech Generic Docs
55

6+
## Adding an event
7+
8+
Files for event cards are under `content/<language>/events/`. Filenames start with underscore (`_`) and ends with `.md`. You can put whatever you want in the middle, but it is recommended to choose a filename related to the title of the event. The format of each file is as below, where content between the two `---`s is called the **frontmatter** and content after it is called the **main content**.
9+
10+
```markdown
11+
---
12+
title: 'event title'
13+
time: 'ISO-8601 time with time zone, for example 2024-12-20T23:59:59+00:00'
14+
# If there is no link, delete this section
15+
link:
16+
type: 'link text'
17+
url: 'link target'
18+
# Content for non-link tags, can be more than one
19+
community:
20+
- 'tag text'
21+
- 'tag text'
22+
# If there is no location, delete this section
23+
location: 'location'
24+
image: 'poster image filename, see below for details'
25+
---
26+
27+
Poster content in text format
28+
```
29+
30+
Poster images are under the directory of `content/public/assets/events`. For example, if you put the image in `content/public/assets/events/xxx.png`, you write `xxx.png` in the `image` section above.
31+
32+
To accomodate people for whom reading images is inconvenient, please write down **all** text content in the image as-is, and do not miss anything. If there are QR codes or other machine-readable graphs, please write out the content it represents (e.g. links) in the main content. For example, if there is a QR code in the image which is a link pointing to `https://example.com/abcdef` after decoding, and there is text "please scan QR code to register" in the image, then you write in the main content: `please [scan QR code to register](https://example.com/abcdef)`. For another example, if there is a QR code same as the one mentioned above, but there is no text in the image suitable to be a link text, then you add an extra paragraph at the end of the main content and write: `[registration link](https://example.com/abcdef)`.
33+
34+
You can use HTML in the `title` and `community` items in the frontmatter and also in the main content. For best reading experience, it is especially recommended to care about the following two cases:
35+
- When you need to use an abbreviation, use the `<abbr>` tag, whose format is `<abbr title="full name">abbreviation</abbr>`, for example `<abbr title="One Among Us">OAU</abbr>`.
36+
- When you want to use <span class="allCaps">all-caps</span> to write something that is not an abbreviation, first consider whether it is really necessary. If not, use a format that is not all-caps. If necessary (for example, "it is all caps in the image"), use `<span class="allCaps">Normal case format</span>`, for example `<span class="allCaps">One Among Us</span>`. This way it will be displayed in all-caps but it will remain normal case format if copied.
37+
38+
When creating the event file, please consider the text of your poster.
39+
- If there is a different image version of each language, create a `md` file for each language and write the content of the images into the Markdown main content for the corresponding language.
40+
- If there is only one image, then write the text content into the Markdown main content for only one language. In the files for other languages, use the special marker <code>&lt;!--@include: @/other-filename --&gt;</code> to reference it. The filename is based in the `content` directory. For example, for `content/en/events/_2024-tdor-broadcast-event-1.md`, the corresponding filename for the other language is `content/zh-Hans/events/_2024-跨性别纪念日晚会-1.md`. Thus, you write <code>&lt;!--@include: @/zh-Hans/events/_2024-跨性别纪念日晚会-1.md --&gt;</code> in the main content.
41+
- For simplicity, if there is a main language in the image, choose it as the directory for the source file. Otherwise, choose a language randomly.
42+
- Write the frontmatter for the Markdown files for each language in the corresponding language.
43+
644
## Write Commit Messages
745

846
Effective Feb 20, 2023, we adopt the commit message convention as follows for all One Among Us repositories:

0 commit comments

Comments
 (0)