33
41
Fork
You've already forked website
54

Astrowind-based site design #37

Closed
caesar wants to merge 0 commits from wip-astrowind into main
pull from: wip-astrowind
merge into: forgejo:main
forgejo:main
forgejo:monthly-2026-05
forgejo:mahlzahn-eslint-js
forgejo:preview-link-status
forgejo:nightfire
forgejo:2022年12月14日-main
Member
Copy link

Preview at https://forgejo.codeberg.page/@wip-astrowind/


I've based this off the initial Astrowind branch @dachary created, but I've fixed a lot of things and merged changes from main, and began work on customizing the theme a bit.

There's a lot still to be done, but as promised in Matrix I'm pushing my progress so people can see how it's going and contribute if they feel like it.

Assuming there's no other news I'll continue with this tomorrow.

Preview at https://forgejo.codeberg.page/@wip-astrowind/ --- I've based this off the initial Astrowind branch @dachary created, but I've fixed a lot of things and merged changes from main, and began work on customizing the theme a bit. There's a lot still to be done, but as promised in Matrix I'm pushing my progress so people can see how it's going and contribute if they feel like it. Assuming there's no other news I'll continue with this tomorrow.
reset theme to https://github.com/onwidget/astrowind
Some checks are pending
ci/woodpecker/push/woodpecker Pipeline is pending
67ea7add83
Signed-off-by: Loïc Dachary <loic@dachary.org>
conditional basePathname
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
508a6ec226
Signed-off-by: Loïc Dachary <loic@dachary.org>
run astrowind build instructions
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
cca6f900ab
Signed-off-by: Loïc Dachary <loic@dachary.org>
tmp
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
71f37bfb71
update deps and and remove unnecessary massive dependencies and binary dependency
Fixed lots of conflicts and massaged content to fit Astrowind theme
# Conflicts:
#	data/blog/2022-12-08-hello-forgejo.md
#	data/blog/2022-12-15-hello-forgejo.md
#	src/pages/news/2022-12-08-hello-forgejo.md
initial styling
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
2857f8d0f6
Author
Member
Copy link

CI is failing, not sure why, seems to be a problem installing a binary dependency (the sharp node module). I'll take a look at that tomorrow too but if anyone with more knowledge of the CI can fix it before then that would be great.

CI is failing, not sure why, seems to be a problem installing a binary dependency (the `sharp` node module). I'll take a look at that tomorrow too but if anyone with more knowledge of the CI can fix it before then that would be great.

Looks like this is more an installation problem than a CI problem. Does npm install work for you locally?

npm ERR! code 1
npm ERR! path /woodpecker/src/codeberg.org/forgejo/website/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-linux-x64.tar.br
npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm ERR! sharp: Installation error: aborted
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-12-06T12_18_39_470Z-debug-0.log
Looks like this is more an installation problem than a CI problem. Does `npm install` work for you locally? ``` npm ERR! code 1 npm ERR! path /woodpecker/src/codeberg.org/forgejo/website/node_modules/sharp npm ERR! command failed npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy) npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-linux-x64.tar.br npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies npm ERR! sharp: Installation error: aborted npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2022-12-06T12_18_39_470Z-debug-0.log ```

That's weird, it works when I do this. What's the difference I wonder.

$ docker run --rm -ti node:19 bash
Unable to find image 'node:19' locally
19: Pulling from library/node
f2f58072e9ed: Pull complete 
5c8cfbf51e6e: Pull complete 
aa3a609d1579: Pull complete 
094e7d9bb04e: Pull complete 
2cbfd734f382: Pull complete 
65f9380179fd: Pull complete 
55fb38aec835: Pull complete 
5a5cfed58206: Pull complete 
8a4707ab05af: Pull complete 
Digest: sha256:3341143bf90c80e5b08694c706d49c04eea535f3d3cc0851f1698662f5713518
Status: Downloaded newer image for node:19
root@1a718f95e9f9:/# git clone -b wip-astrowind https://codeberg.org/forgejo/website
Cloning into 'website'...
remote: Enumerating objects: 619, done.
remote: Counting objects: 100% (619/619), done.
remote: Compressing objects: 100% (575/575), done.
remote: Total 739 (delta 350), reused 111 (delta 30), pack-reused 120
Receiving objects: 100% (739/739), 3.43 MiB | 3.53 MiB/s, done.
Resolving deltas: 100% (386/386), done.
root@1a718f95e9f9:/# cd website/
root@1a718f95e9f9:/website# npm install 
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
added 732 packages, and audited 733 packages in 60s
284 packages are looking for funding
 run `npm fund` for details
found 0 vulnerabilities
npm notice 
npm notice New major version of npm available! 8.19.3 -> 9.1.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.3
npm notice Run npm install -g npm@9.1.3 to update!
npm notice 
root@1a718f95e9f9:/website# npm run build
> @forgejo/website@0.0.1 build
> astro build
[MDX] Now inheriting remark and rehype plugins from "markdown" config.
If you applied a plugin to both your Markdown and MDX configs, we suggest removing the duplicate MDX entry.
See "extendPlugins" option to configure this behavior.
12:59:52 PM [build] output target: static
12:59:52 PM [build] Collecting build info...
12:59:52 PM [build] Completed in 484ms.
12:59:52 PM [build] Building static entrypoints...
12:59:54 PM [build] Completed in 2.48s.
 generating static routes 
▶ src/pages/index.astro
 └─ /index.html (+532ms)
λ src/pages/rss.xml.js
 └─ /rss.xml (+4ms)
▶ src/pages/404.astro
 └─ /404.html (+3ms)
▶ src/pages/faq.astro
 └─ /faq/index.html (+24ms)
▶ src/pages/[...tags]/[tag]/[...page].astro
 └─ /tag/blog/index.html (+24ms)
▶ src/pages/[...categories]/[category]/[...page].astro
▶ src/pages/[...blog]/[slug].astro
 ├─ /2022-12-15-hello-forgejo/index.html (+1.03s)
 ├─ /about/index.html (+1.06s)
 ├─ /code-of-conduct/index.html (+1.08s)
 ├─ /imprint/index.html (+1.16s)
 ├─ /privacy-policy/index.html (+1.18s)
 └─ /well-being/index.html (+1.20s)
▶ src/pages/[...blog]/[...page].astro
 ├─ /news/index.html (+443ms)
 └─ /news/2/index.html (+462ms)
 optimizing 2 images in batches of 8 
Completed in 2.32s.
Completed in 4.68s.
@astrojs/sitemap: `sitemap-index.xml` is created.
12:59:59 PM [build] 12 page(s) built in 7.65s
12:59:59 PM [build] Complete!
That's weird, it works when I do this. What's the difference I wonder. ``` $ docker run --rm -ti node:19 bash Unable to find image 'node:19' locally 19: Pulling from library/node f2f58072e9ed: Pull complete 5c8cfbf51e6e: Pull complete aa3a609d1579: Pull complete 094e7d9bb04e: Pull complete 2cbfd734f382: Pull complete 65f9380179fd: Pull complete 55fb38aec835: Pull complete 5a5cfed58206: Pull complete 8a4707ab05af: Pull complete Digest: sha256:3341143bf90c80e5b08694c706d49c04eea535f3d3cc0851f1698662f5713518 Status: Downloaded newer image for node:19 root@1a718f95e9f9:/# git clone -b wip-astrowind https://codeberg.org/forgejo/website Cloning into 'website'... remote: Enumerating objects: 619, done. remote: Counting objects: 100% (619/619), done. remote: Compressing objects: 100% (575/575), done. remote: Total 739 (delta 350), reused 111 (delta 30), pack-reused 120 Receiving objects: 100% (739/739), 3.43 MiB | 3.53 MiB/s, done. Resolving deltas: 100% (386/386), done. root@1a718f95e9f9:/# cd website/ root@1a718f95e9f9:/website# npm install npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead added 732 packages, and audited 733 packages in 60s 284 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New major version of npm available! 8.19.3 -> 9.1.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.3 npm notice Run npm install -g npm@9.1.3 to update! npm notice root@1a718f95e9f9:/website# npm run build > @forgejo/website@0.0.1 build > astro build [MDX] Now inheriting remark and rehype plugins from "markdown" config. If you applied a plugin to both your Markdown and MDX configs, we suggest removing the duplicate MDX entry. See "extendPlugins" option to configure this behavior. 12:59:52 PM [build] output target: static 12:59:52 PM [build] Collecting build info... 12:59:52 PM [build] Completed in 484ms. 12:59:52 PM [build] Building static entrypoints... 12:59:54 PM [build] Completed in 2.48s. generating static routes ▶ src/pages/index.astro └─ /index.html (+532ms) λ src/pages/rss.xml.js └─ /rss.xml (+4ms) ▶ src/pages/404.astro └─ /404.html (+3ms) ▶ src/pages/faq.astro └─ /faq/index.html (+24ms) ▶ src/pages/[...tags]/[tag]/[...page].astro └─ /tag/blog/index.html (+24ms) ▶ src/pages/[...categories]/[category]/[...page].astro ▶ src/pages/[...blog]/[slug].astro ├─ /2022-12-15-hello-forgejo/index.html (+1.03s) ├─ /about/index.html (+1.06s) ├─ /code-of-conduct/index.html (+1.08s) ├─ /imprint/index.html (+1.16s) ├─ /privacy-policy/index.html (+1.18s) └─ /well-being/index.html (+1.20s) ▶ src/pages/[...blog]/[...page].astro ├─ /news/index.html (+443ms) └─ /news/2/index.html (+462ms) optimizing 2 images in batches of 8 Completed in 2.32s. Completed in 4.68s. @astrojs/sitemap: `sitemap-index.xml` is created. 12:59:59 PM [build] 12 page(s) built in 7.65s 12:59:59 PM [build] Complete! ```
Author
Member
Copy link

Looks like this is more an installation problem than a CI problem. Does npm install work for you locally?

npm ERR! code 1
npm ERR! path /woodpecker/src/codeberg.org/forgejo/website/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-linux-x64.tar.br
npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm ERR! sharp: Installation error: aborted
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-12-06T12_18_39_470Z-debug-0.log

Yes it does. (On macOS M1.) What about for you?

Is the CI machine really x86? According to https://sharp.pixelplumbing.com/install both Sharp and libvips have to be built from source for x86 😐
Even so, not sure why it wouldn't work...

> Looks like this is more an installation problem than a CI problem. Does `npm install` work for you locally? > > ``` > npm ERR! code 1 > npm ERR! path /woodpecker/src/codeberg.org/forgejo/website/node_modules/sharp > npm ERR! command failed > npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy) > npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-linux-x64.tar.br > npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies > npm ERR! sharp: Installation error: aborted > > npm ERR! A complete log of this run can be found in: > npm ERR! /root/.npm/_logs/2022-12-06T12_18_39_470Z-debug-0.log > ``` Yes it does. (On macOS M1.) What about for you? Is the CI machine really x86? According to https://sharp.pixelplumbing.com/install both Sharp and libvips have to be built from source for x86 😐 Even so, not sure why it wouldn't work...
pull node:19
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
5d0f59ee7a
Ghost force-pushed wip-astrowind from 2a591b6058
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
to 18e81a27e8
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
2022年12月06日 14:18:16 +01:00
Compare
remove extra :
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
308be4306c

The difference must be in how woodpecker feeds the commands to the container, although I'm not sure what it is. Splitting npm install && npm run... in two different lines gives better results.

https://ci.codeberg.org/forgejo/website/pipeline/161/3

Then there was the issue of having https::// instead of https:// in the URL (notice the double :) which led to the super cryptic error message:

# npm run build
> @forgejo/website@0.0.1 build
> astro build
01:35:04 PM [astro] Unable to load /website/astro.config.mjs
 error Cannot set property message of [object Object] which has only a getter
 File:
 /website/node_modules/astro/dist/core/errors/dev/utils.js:36:22
 Code:
 35 | const { location, pluginName, text } = buildError;
 > 36 | err[i].message = text;
 | ^
 37 | if (location) {
 38 | err[i].loc = { file: location.file, line: location.line, column: location.column };
 39 | err[i].id = err[0].id || (location == null ? void 0 : location.file);
 
 Stacktrace:
TypeError: Cannot set property message of [object Object] which has only a getter
 at file:///website/node_modules/astro/dist/core/errors/dev/utils.js:36:22
 at Array.forEach (<anonymous>)
 at collectErrorMetadata (file:///website/node_modules/astro/dist/core/errors/dev/utils.js:33:14)
 at handleConfigError (file:///website/node_modules/astro/dist/cli/index.js:76:38)
 at async file:///website/node_modules/astro/dist/cli/index.js:123:5
 at async runCommand (file:///website/node_modules/astro/dist/cli/index.js:117:76)
 at async cli (file:///website/node_modules/astro/dist/cli/index.js:168:5)

Which was fixed and now it works and runs a lot faster for some reason...

https://ci.codeberg.org/forgejo/website/pipeline/162/3

image

The difference must be in how woodpecker feeds the commands to the container, although I'm not sure what it is. Splitting `npm install && npm run...` in two different lines gives better results. https://ci.codeberg.org/forgejo/website/pipeline/161/3 Then there was the issue of having `https:://` instead of `https://` in the URL (notice the double **:**) which led to the super cryptic error message: ``` # npm run build > @forgejo/website@0.0.1 build > astro build 01:35:04 PM [astro] Unable to load /website/astro.config.mjs error Cannot set property message of [object Object] which has only a getter File: /website/node_modules/astro/dist/core/errors/dev/utils.js:36:22 Code: 35 | const { location, pluginName, text } = buildError; > 36 | err[i].message = text; | ^ 37 | if (location) { 38 | err[i].loc = { file: location.file, line: location.line, column: location.column }; 39 | err[i].id = err[0].id || (location == null ? void 0 : location.file); Stacktrace: TypeError: Cannot set property message of [object Object] which has only a getter at file:///website/node_modules/astro/dist/core/errors/dev/utils.js:36:22 at Array.forEach (<anonymous>) at collectErrorMetadata (file:///website/node_modules/astro/dist/core/errors/dev/utils.js:33:14) at handleConfigError (file:///website/node_modules/astro/dist/cli/index.js:76:38) at async file:///website/node_modules/astro/dist/cli/index.js:123:5 at async runCommand (file:///website/node_modules/astro/dist/cli/index.js:117:76) at async cli (file:///website/node_modules/astro/dist/cli/index.js:168:5) ``` Which was fixed and now it works and runs a lot faster for some reason... https://ci.codeberg.org/forgejo/website/pipeline/162/3 ![image](/attachments/0f8c3008-b51b-4060-83d3-1af1e1c28b93)
109 KiB
Author
Member
Copy link

Great, thanks @dachary!

Looks like some things are broken in the preview build due to my use of root-relative paths, so I'll fix that.

Great, thanks @dachary! Looks like some things are broken in the preview build due to my use of root-relative paths, so I'll fix that.
fix: use relative path for logo image
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
3f5f446e1c
Author
Member
Copy link

Tonight I have implemented something like @foxlet 's hero design, as well as adjusted a few other things.

I would appreciate help with the content, I think @circlebuilder had some ideas. At the least I'd love to come up with a few bullet points for "features" to add to the home page.


@dachary it looks like the CI isn't producing the output images correctly... not sure why. It works locally on my machine.
Although the CI was "succesful" you can see the following in the log:

11:16:46 AM [@astrojs/image] "d/assets/default.c6e14b88.png" image could not be fetched
11:16:46 AM [@astrojs/image] "d/assets/mascot-dark.59062dfc.png" image could not be fetched
11:16:46 AM [@astrojs/image] "d/assets/astronaut.53563f21.jpg" image could not be fetched

and sure enough the images don't exist in the output.


Since the CI didn't procuce the right output, I've attatched a screenshot of what it was supposed to look like.

Tonight I have implemented something like @foxlet 's hero design, as well as adjusted a few other things. I would appreciate help with the content, I think @circlebuilder had some ideas. At the least I'd love to come up with a few bullet points for "features" to add to the home page. --- @dachary it looks like the CI isn't producing the output images correctly... not sure why. It works locally on my machine. Although the CI was "succesful" you can see the following in the log: ```log 11:16:46 AM [@astrojs/image] "d/assets/default.c6e14b88.png" image could not be fetched 11:16:46 AM [@astrojs/image] "d/assets/mascot-dark.59062dfc.png" image could not be fetched 11:16:46 AM [@astrojs/image] "d/assets/astronaut.53563f21.jpg" image could not be fetched ``` and sure enough the images [don't exist](https://forgejo.codeberg.page/@wip-astrowind/assets/mascot-dark.59062dfc_Zz1OY3.png) in the output. --- Since the CI didn't procuce the right output, I've attatched a screenshot of what it was supposed to look like. ![](https://codeberg.org/attachments/13733ea9-2ce7-4b4b-a16e-b5a99ab0b2e0)

You can reproduce the problem locally by changing the cat src/config.mjs with something like:

export const SITE = {
	name: 'Forgejo',
	origin: 'https://forgejo.codeberg.page',
	basePathname: '/@wip-astro/',

There is "something" in astro that prepends the last two letters of the basePathname to the asset.

12:42:31 PM [@astrojs/image] "o/assets/default.c6e14b88.png" image could not be fetched
12:42:31 PM [@astrojs/image] "o/assets/mascot-dark.59062dfc.png" image could not be fetched
12:42:31 PM [@astrojs/image] "o/assets/astronaut.53563f21.jpg" image could not be fetched

and in your case it's a d/ because those are the last two letters of '/@wip-astro/'

You can reproduce the problem locally by changing the `cat src/config.mjs` with something like: ``` export const SITE = { name: 'Forgejo', origin: 'https://forgejo.codeberg.page', basePathname: '/@wip-astro/', ``` There is "something" in astro that prepends the last two letters of the basePathname to the asset. ``` 12:42:31 PM [@astrojs/image] "o/assets/default.c6e14b88.png" image could not be fetched 12:42:31 PM [@astrojs/image] "o/assets/mascot-dark.59062dfc.png" image could not be fetched 12:42:31 PM [@astrojs/image] "o/assets/astronaut.53563f21.jpg" image could not be fetched ``` and in your case it's a `d/` because those are the last two letters of '/@wip-astro/'
Ryuno-Ki left a comment
Copy link

I walked over the code with a lense of JavaScript. Less so with Astro or Tailwind knowledge.

I walked over the code with a lense of JavaScript. Less so with Astro or Tailwind knowledge.
@ -0,0 +4,4 @@
"javascriptreact",
"astro", // Enable .astro
"typescript", // Enable .ts
"typescriptreact" // Enable .tsx
Contributor
Copy link

Are comments valid JSON?

Are comments valid JSON?
Author
Member
Copy link

They're not valid JSON but they're accepted by the parser used by VSCode for its settings (and other config) files.

They're not valid JSON but they're accepted by the parser used by VSCode for its settings (and other config) files.
caesar marked this conversation as resolved
.woodpecker.yml Outdated
@ -6,1 +6,3 @@
- make build
- colon=':'
- sed -i.orig -e "s|origin$$colon '.*|origin$$colon 'https$$colon//forgejo.codeberg.page',|" -e "s|basePathname$$colon '/'|basePathname$$colon '/@$CI_COMMIT_BRANCH/'|" src/config.mjs
- cat src/config.mjs
Contributor
Copy link

For debugging?

For debugging?

Yes

Yes
Ghost marked this conversation as resolved
.woodpecker.yml Outdated
@ -7,0 +6,4 @@
- colon=':'
- sed -i.orig -e "s|origin$$colon '.*|origin$$colon 'https$$colon//forgejo.codeberg.page',|" -e "s|basePathname$$colon '/'|basePathname$$colon '/@$CI_COMMIT_BRANCH/'|" src/config.mjs
- cat src/config.mjs
- npm install
Contributor
Copy link

Perhaps using npm ci instead?

Perhaps using `npm ci` instead?
caesar marked this conversation as resolved
@ -11,2 +17,2 @@
remarkPlugins.push([mdPrefixWithBase, base]);
}
const whenExternalScripts = (items = []) =>
SITE.googleAnalyticsId ? (Array.isArray(items) ? items.map((item) => item()) : [items()]) : [];
Contributor
Copy link

Do we need this?

Do we need this?
Author
Member
Copy link

No, I still need to go through stripping out the Google Analytics and similar scripts that were part of the default Astrowind template. It's not enabled though.

No, I still need to go through stripping out the Google Analytics and similar scripts that were part of the default Astrowind template. It's not enabled though.
caesar marked this conversation as resolved
@ -0,0 +2,4 @@
import '@fontsource/inter/variable.css';
---
<!-- Or Google Fonts -->
Contributor
Copy link

Google Fonts would cause GDPR violations.

Google Fonts would cause GDPR violations.
Author
Member
Copy link

Interesting. We're not using Google Fonts anywhere I don't think, but that's something to bear in mind when we do think about fonts.

Interesting. We're not using Google Fonts anywhere I don't think, but that's something to bear in mind when we do think about fonts.
caesar marked this conversation as resolved
@ -0,0 +11,4 @@
<a
href={getRelativeLink(prevUrl)}
class={`btn btn-ghost px-3 mr-2
${!prevUrl ? 'invisible' : ''}`}
Contributor
Copy link

If I understand that right, it will still be announced to screenreaders.

Can we pull the !prevUrl out to render the <a> conditionally?

If I understand that right, it will still be announced to screenreaders. Can we pull the `!prevUrl` out to render the `<a>` conditionally?
@ -0,0 +17,4 @@
<button class="ml-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
><Icon name="logos:whatsapp" class="w-6 h-6" />
</button>
<button class="ml-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
Contributor
Copy link

Did you test this?
I have my fair share of experience with social sharing buttons...

Did you test this? I have my fair share of experience with social sharing buttons...
Author
Member
Copy link

No, and I plan to remove it – unless anyone wants to keep it...?

No, and I plan to remove it – unless anyone wants to keep it...?
caesar marked this conversation as resolved
@ -0,0 +7,4 @@
'get-started-website-with-astro-tailwind-css',
'how-to-customize-astrowind-to-your-brand',
'useful-resources-to-create-websites',
'astrowind-template-in-depth',
Contributor
Copy link

These are to be replaced?

These are to be replaced?
Author
Member
Copy link

Yes

Yes
caesar marked this conversation as resolved
@ -0,0 +14,4 @@
</h2>
<p class="text-zinc-700 dark:text-zinc-400 lg:text-sm lg:max-w-md">
The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
Contributor
Copy link

That's placeholder text?

That's placeholder text?
Author
Member
Copy link

Yes

Yes
caesar marked this conversation as resolved
@ -0,0 +12,4 @@
<article>
<header class={post.image ? 'text-center' : ''}>
<p class="px-4 sm:px-6 max-w-3xl mx-auto">
<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min
Contributor
Copy link

When I introduced estimated reading time to my blog I received the feedback that it could feel exclusionary. People read at different speeds.

When I introduced estimated reading time to my blog I received the feedback that it could feel exclusionary. People read at different speeds.
Author
Member
Copy link

It's a default feature of Astrowind but I don't think we need it; I'm happy to remove it. Simpler is better unless we're going to be writing loads of long articles (in which case it could always be added back if wanted).

(But I also disagree that it's exclusionary, surely people can understand that it's an average and can adjust based on their own reading speed. I walk faster than Google Maps estimates on their walking directions but the information is still helpful...)

It's a default feature of Astrowind but I don't think we need it; I'm happy to remove it. Simpler is better unless we're going to be writing loads of long articles (in which case it could always be added back if wanted). (But I also disagree that it's exclusionary, surely people can understand that it's an average and can adjust based on their own reading speed. I walk faster than Google Maps estimates on their walking directions but the information is still helpful...)
caesar marked this conversation as resolved
@ -0,0 +13,4 @@
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
Contributor
Copy link

There is another option: go with system defaults.
(Actually, Windows offers a High Contrast Mode, too).

There is another option: go with system defaults. (Actually, Windows offers a High Contrast Mode, too).
Author
Member
Copy link

Yes, Tailwind's default is to use JS but I'd rather use media queries so it works without JS.

Ideally a manual toggle would be good too, but I don't think know an easy way to have that and still have it work without JS – at any rate, not without really complicating the CSS...

Yes, Tailwind's default is to use JS but I'd rather use media queries so it works without JS. Ideally a manual toggle would be good too, but I don't think know an easy way to have that and still have it work without JS – at any rate, not without really complicating the CSS...

I think I found a way to handle this more gracefully:

  1. Set tailwind darkMode to media
  2. Add the following Javascript, which:
  • gathers the CSS rules only activated in dark mode
  • when toggleTheme is called, it replaces the @media (prefers-color-scheme: dark) rule with either original-prefers-color-scheme (to disable dark mode) or (prefers-color-scheme: light) to force dark mode (when the user-pref is light)
 function gatherDarkRules() {
 const darkRules = [];
 for (var i = document.styleSheets[0].rules.length - 1; i >= 0; i--) {
 const rule = document.styleSheets[0].rules[i].media;
 if (!rule || !rule.mediaText.includes("prefers-color-scheme")) {
 continue;
 }
 if (rule.mediaText !== "(prefers-color-scheme: dark)") {
 console.warn("unexpected mediaText:", rule.mediaText);
 continue;
 }
 darkRules.push(i);
 }
 return darkRules;
 }
 function newMedium(wantsDark) {
 if (!wantsDark) {
 return "original-prefers-color-scheme";
 }
 const prefersDark = window.matchMedia(
 "(prefers-color-scheme: dark)"
 ).matches;
 if (prefersDark) {
 return "(prefers-color-scheme: dark)";
 }
 return "(prefers-color-scheme: light)";
 }
	 // The work begins here:
 
 // 1. Gather all dark rules
 // THIS SHOULD ONLY BE CALLED WHEN ALL CSS IS LOADED
 const darkRules = gatherDarkRules();
 // 2. Overwrite the media selector of the dark rules with a custom one
 function setDarkTheme(wantsDark) {
 const medium = newMedium(wantsDark);
 darkRules.forEach((j) => {
 document.styleSheets[0].rules[j].media.mediaText = medium;
 });
 }
	 // 3. Check is user switched the theme using JS
 let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 if ("theme" in localStorage) {
 isDark = localStorage.theme === "dark";
 setDarkTheme(isDark);
 }
 // 4. attach this function on the button (attachEvent below)
 function toggleTheme() {
 isDark = !isDark;
 localStorage.theme = isDark ? "dark" : "light";
 setDarkTheme(isDark);
 }
 
 attachEvent("[data-aw-toggle-color-scheme]", "click", toggleTheme);

This is the best I could come up with, which:

  • prevents flickering (the css loads the user preference)
  • gracefully degrades when JS is disabled (the button won't do anything, but the prefers-color-scheme will still be respected)
I think I found a way to handle this more gracefully: 1. Set tailwind `darkMode` to `media` 2. Add the following Javascript, which: * gathers the CSS rules only activated in dark mode * when `toggleTheme` is called, it replaces the `@media (prefers-color-scheme: dark)` rule with either `original-prefers-color-scheme` (to disable dark mode) or `(prefers-color-scheme: light)` to force dark mode (when the user-pref is light) ```js function gatherDarkRules() { const darkRules = []; for (var i = document.styleSheets[0].rules.length - 1; i >= 0; i--) { const rule = document.styleSheets[0].rules[i].media; if (!rule || !rule.mediaText.includes("prefers-color-scheme")) { continue; } if (rule.mediaText !== "(prefers-color-scheme: dark)") { console.warn("unexpected mediaText:", rule.mediaText); continue; } darkRules.push(i); } return darkRules; } function newMedium(wantsDark) { if (!wantsDark) { return "original-prefers-color-scheme"; } const prefersDark = window.matchMedia( "(prefers-color-scheme: dark)" ).matches; if (prefersDark) { return "(prefers-color-scheme: dark)"; } return "(prefers-color-scheme: light)"; } // The work begins here: // 1. Gather all dark rules // THIS SHOULD ONLY BE CALLED WHEN ALL CSS IS LOADED const darkRules = gatherDarkRules(); // 2. Overwrite the media selector of the dark rules with a custom one function setDarkTheme(wantsDark) { const medium = newMedium(wantsDark); darkRules.forEach((j) => { document.styleSheets[0].rules[j].media.mediaText = medium; }); } // 3. Check is user switched the theme using JS let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; if ("theme" in localStorage) { isDark = localStorage.theme === "dark"; setDarkTheme(isDark); } // 4. attach this function on the button (attachEvent below) function toggleTheme() { isDark = !isDark; localStorage.theme = isDark ? "dark" : "light"; setDarkTheme(isDark); } attachEvent("[data-aw-toggle-color-scheme]", "click", toggleTheme); ``` This is the best I could come up with, which: - prevents flickering (the css loads the user preference) - gracefully degrades when JS is disabled (the button won't do anything, but the `prefers-color-scheme` will still be respected)

Nicer code:


 function darkRuleOverrider() {
 const darkRules = [];
 for (var i = document.styleSheets[0].rules.length - 1; i >= 0; i--) {
 const rule = document.styleSheets[0].rules[i].media;
 if (!rule || !rule.mediaText.includes("prefers-color-scheme")) {
 continue;
 }
 if (rule.mediaText !== "(prefers-color-scheme: dark)") {
 console.warn("unexpected mediaText:", rule.mediaText);
 continue;
 }
 darkRules.push(i);
 }
 return function (wantsDark) {
 const medium = newMedium(wantsDark);
 darkRules.forEach((j) => {
 document.styleSheets[0].rules[j].media.mediaText = medium;
 });
 };
 }
 function newMedium(wantsDark) {
 if (!wantsDark) {
 return "original-prefers-color-scheme";
 }
 const prefersDark = window.matchMedia(
 "(prefers-color-scheme: dark)"
 ).matches;
 if (prefersDark) {
 return "(prefers-color-scheme: dark)";
 }
 return "(prefers-color-scheme: light)";
 }
 function themeToggler(setDarkTheme) {
 let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 // override theme on start if requested
 if ("theme" in localStorage) {
 isDark = localStorage.theme === "dark";
 setDarkTheme(isDark);
 }
 return function () {
 isDark = !isDark;
 localStorage.theme = isDark ? "dark" : "light";
 setDarkTheme(isDark);
 };
 }
 // 1. Gather all dark rules
 // THIS SHOULD ONLY BE CALLED WHEN ALL CSS HAS BEEN LOADED
 const setDarkTheme = darkRuleOverrider();
 // 2. attach the returned function to the button (attachEvent below)
 const toggleTheme = themeToggler(setDarkTheme);
 attachEvent("[data-aw-toggle-color-scheme]", "click", toggleTheme);
Nicer code: ```js function darkRuleOverrider() { const darkRules = []; for (var i = document.styleSheets[0].rules.length - 1; i >= 0; i--) { const rule = document.styleSheets[0].rules[i].media; if (!rule || !rule.mediaText.includes("prefers-color-scheme")) { continue; } if (rule.mediaText !== "(prefers-color-scheme: dark)") { console.warn("unexpected mediaText:", rule.mediaText); continue; } darkRules.push(i); } return function (wantsDark) { const medium = newMedium(wantsDark); darkRules.forEach((j) => { document.styleSheets[0].rules[j].media.mediaText = medium; }); }; } function newMedium(wantsDark) { if (!wantsDark) { return "original-prefers-color-scheme"; } const prefersDark = window.matchMedia( "(prefers-color-scheme: dark)" ).matches; if (prefersDark) { return "(prefers-color-scheme: dark)"; } return "(prefers-color-scheme: light)"; } function themeToggler(setDarkTheme) { let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; // override theme on start if requested if ("theme" in localStorage) { isDark = localStorage.theme === "dark"; setDarkTheme(isDark); } return function () { isDark = !isDark; localStorage.theme = isDark ? "dark" : "light"; setDarkTheme(isDark); }; } // 1. Gather all dark rules // THIS SHOULD ONLY BE CALLED WHEN ALL CSS HAS BEEN LOADED const setDarkTheme = darkRuleOverrider(); // 2. attach the returned function to the button (attachEvent below) const toggleTheme = themeToggler(setDarkTheme); attachEvent("[data-aw-toggle-color-scheme]", "click", toggleTheme); ```
Author
Member
Copy link

Sorry not to have responed to this @oliverpool. I have also come across a similar approach in the past when searching for better ways to handle this. It's messy, but... may be the best option we have. I'll take a look at it tomorrow.

Sorry not to have responed to this @oliverpool. I have also come across a similar approach in the past when searching for better ways to handle this. It's messy, but... may be the best option we have. I'll take a look at it tomorrow.
Author
Member
Copy link

@oliverpool I made quite a lot of changes and fixes, but it seems to be working robustly. Could you check ec5f5113ef (diff-14b290eb67) and let me know if you have any comments?

@oliverpool I made quite a lot of changes and fixes, but it seems to be working robustly. Could you check https://codeberg.org/forgejo/website/commit/ec5f5113ef371aedc61ded48eb3e49e6074757ad#diff-14b290eb6759627371aac5beee57c3f5f28541db and let me know if you have any comments?
caesar marked this conversation as resolved
@ -0,0 +67,4 @@
const newlink = document.createElement('a');
newlink.target = '_blank';
newlink.href = href;
Contributor
Copy link

Will this need a noopener and noreferrer attribute for security?

Will this need a noopener and noreferrer attribute for security?
caesar marked this conversation as resolved
@ -0,0 +63,4 @@
// site_name: 'SiteName',
}}
twitter={{
// handle: '@handle',
Contributor
Copy link

We don't have this.
Plus, Twitter understands OpenGraph to an extent.

We don't have this. Plus, Twitter understands OpenGraph to an extent.
@ -0,0 +71,4 @@
<Fonts />
<!-- Google Site Verification -->
Contributor
Copy link

Can we drop this?

Can we drop this?
Author
Member
Copy link

Yes (as mentioned above, I still have to go through stripping these things out, but I will do it)

Yes (as mentioned above, I still have to go through stripping these things out, but I will do it)
caesar marked this conversation as resolved
@ -0,0 +2,4 @@
const { doNotTrack = true, noCookieMode = false, url = 'https://cdn.splitbee.io/sb.js' } = Astro.props;
---
<!-- Splitbee Analytics -->
Contributor
Copy link

Can we drop this?

Can we drop this?
Author
Member
Copy link

Yes (as mentioned above, I still have to go through stripping these things out, but I will do it)

Yes (as mentioned above, I still have to go through stripping these things out, but I will do it)
caesar marked this conversation as resolved
@ -0,0 +10,4 @@
} = Astro.props;
---
<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
Contributor
Copy link

Using an aria-label will prevent browsers from auto-translating.

Can we have a sr-only implementation next to the icon?

Using an `aria-label` will prevent browsers from auto-translating. Can we have a [sr-only](https://webaim.org/techniques/css/invisiblecontent/) implementation next to the icon?
Author
Member
Copy link

Using an aria-label will prevent browsers from auto-translating.

Why?

> Using an `aria-label` will prevent browsers from auto-translating. Why?
Contributor
Copy link
https://adrianroselli.com/2019/11/aria-label-does-not-translate.html
@ -0,0 +5,4 @@
[
{
question: 'What do I need to start?',
answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
Contributor
Copy link

🖖

🖖
caesar marked this conversation as resolved
@ -0,0 +3,4 @@
const ID = file.split('/').pop().split('.').shift();
return {
id: ID,
Contributor
Copy link

If you were to rename ID to id, you could replace this line by id,.

If you were to rename `ID` to `id`, you could replace this line by `id,`.
@ -0,0 +15,4 @@
description: frontmatter.description,
image: frontmatter.image,
Content: Content,
Contributor
Copy link

Could be Content, as well.

Could be `Content,` as well.
@ -0,0 +33,4 @@
const normalizedPosts = Object.keys(posts).map(async (key) => {
const post = await posts[key];
return await getNormalizedPost(post);
Contributor
Copy link

Since the function is already async, you don't need to return await here. A mere return will suffice.

Since the function is already `async`, you don't need to `return await` here. A mere `return` will suffice.
Author
Member
Copy link

I haven't looked at any of the default JS yet but thanks for the suggestions; I'll go over it all at some point.

I haven't looked at any of the default JS yet but thanks for the suggestions; I'll go over it all at some point.
Contributor
Copy link

The only exception would be a catch clause:
https://dmitripavlutin.com/return-await-promise-javascript/

The only exception would be a catch clause: https://dmitripavlutin.com/return-await-promise-javascript/
ci: add extra trailing slash to basePath
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ec4c00a22e
caesar force-pushed wip-astrowind from 329bb22e99
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
to ec4c00a22e
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2022年12月08日 10:39:19 +01:00
Compare
Author
Member
Copy link

The image pipeline is now working.
It turns out that Astro is stripping the trailing slash from the base parameter (if the trailingSlash option is set to never) – even though it wants it to have a trailing slash! This causes problems with @astrojs/image.
Im not sure exactly whther the bug is in Astro or @astrojs/image, but either way, adding a second trailing slash to the base parameter solves it, so I've done that for the CI branch builds.


However, there is still a problem with the npm install step, which fails around 50% of the time when installing sharp.
The log output is as follows:

npm ERR! code 1
npm ERR! path /woodpecker/src/codeberg.org/forgejo/website/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-linux-x64.tar.br
npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm ERR! sharp: Installation error: aborted

I don't have any ideas here really so if someone more familiar with Woodpecker and the machines it's running on has some ideas I'd be grateful.

The image pipeline is now working. It turns out that Astro is stripping the trailing slash from the `base` parameter (if the `trailingSlash` option is set to `never`) – even though it wants it to have a trailing slash! This causes problems with [@astrojs/image](https://docs.astro.build/en/guides/integrations-guide/image/). Im not sure exactly whther the bug is in Astro or @astrojs/image, but either way, adding a *second* trailing slash to the `base` parameter solves it, so I've done that for the CI branch builds. --- However, there is still a problem with the `npm install` step, which fails around 50% of the time when installing `sharp`. The log output is as follows: ```log npm ERR! code 1 npm ERR! path /woodpecker/src/codeberg.org/forgejo/website/node_modules/sharp npm ERR! command failed npm ERR! command sh -c -- (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy) npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-linux-x64.tar.br npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies npm ERR! sharp: Installation error: aborted ``` I don't have any ideas here really so if someone more familiar with Woodpecker and the machines it's running on has some ideas I'd be grateful.
show debug output if npm install fails
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
52ba198c87
remove social sharing buttons
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
3f5867343a
move static pages out of blog
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
568b1bdf0f

The "sharp" transient error is tracked here #38

The "sharp" transient error is tracked here https://codeberg.org/forgejo/website/issues/38
Contributor
Copy link

Regarding the share button: https://adactio.com/journal/17405 would be my suggestion.
We can address them in a follow-up PR.

Regarding the share button: https://adactio.com/journal/17405 would be my suggestion. We can address them in a follow-up PR.
caesar force-pushed wip-astrowind from 304e115a9e
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
to c5c3cd06d1
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
2022年12月09日 08:58:05 +01:00
Compare
caesar force-pushed wip-astrowind from c5c3cd06d1
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
to e7d2330842
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2022年12月09日 08:59:36 +01:00
Compare
blog styling WIP
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
10f6de096f
Author
Member
Copy link

Today I started work on styling the blog pages.
I decided to style the blog article list as a "commit graph".
See https://forgejo.codeberg.page/@wip-astrowind/news/ (WIP).

Today I started work on styling the blog pages. I decided to style the blog article list as a "commit graph". See https://forgejo.codeberg.page/@wip-astrowind/news/ (WIP).
blog styling improvements
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
29d4bfb5e0
add releases page and feed
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
424875f03e
Author
Member
Copy link

Today I added a (WIP) releases page and releases RSS feed to the site.

These are generated at build time using the Forgejo API to fetch the list of releases from Codeberg, so we will need to trigger rebuilds of the site via a webhook when releases are published.

Today I added a (WIP) [releases page](https://forgejo.codeberg.page/@wip-astrowind/releases/) and [releases RSS feed](https://forgejo.codeberg.page/@wip-astrowind/releases/rss.xml) to the site. These are generated at build time using the Forgejo API to fetch the list of releases from Codeberg, so we will need to trigger rebuilds of the site via a webhook when releases are published.
Author
Member
Copy link

Today I improved the releases page and the static text pages somewhat, and added a download page which also automatically shows instructions for the latest release (generated at site build time).

The download page needs a bit more content (explanation of what the steps do).

Today I improved the [releases page](https://forgejo.codeberg.page/@wip-astrowind/releases/) and the static text pages somewhat, and added a [download page](https://forgejo.codeberg.page/@wip-astrowind/download/) which also automatically shows instructions for the latest release (generated at site build time). The download page needs a bit more content (explanation of what the steps do).

As a Gitea admin or contributor, the download page will be enough for me. I agree it would need more content for a wider audience.

It looks excellent 👍

As a Gitea admin or contributor, the download page will be enough for me. I agree it would need more content for a wider audience. It looks excellent 👍
implement dark mode toggle with native fallback
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ec5f5113ef
Author
Member
Copy link

Tonight I worked on the theme toggle. You won't see much difference, but it should be robust now and respect the user's preference when Javascript is disabled...

Tomorrow I'll go back to more visible things. 😆

Only a coujple of days left to launch now, so the content is a priority. Not much is needed; mostly just a few "features" for the home page. I can probably pull some things from the FAQ or About page (there also seems to be a lot of overlap between those two.)

Tonight I worked on the theme toggle. You won't see much difference, but it should be robust now and respect the user's preference when Javascript is disabled... Tomorrow I'll go back to more visible things. 😆 Only a coujple of days left to launch now, so the content is a priority. Not much is needed; mostly just a few "features" for the home page. I can probably pull some things from the FAQ or About page (there also seems to be a lot of overlap between those two.)

Tomorrow I'll go back to more visible things.

I got used to a daily eye candy, I must say :-)

Not much is needed; mostly just a few "features" for the home page.

I'll do that today.

> Tomorrow I'll go back to more visible things. I got used to a daily eye candy, I must say :-) > Not much is needed; mostly just a few "features" for the home page. I'll do that today.
Ghost force-pushed wip-astrowind from 1c2b06f8ce
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
to df16653018
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2022年12月14日 00:22:54 +01:00
Compare

I pushed df16653018 for the features. It's a lazy copy/paste but maybe it's good enough?

I pushed https://codeberg.org/forgejo/website/commit/df166530186bcab033f63ba56e84bced8432bca5 for the features. It's a lazy copy/paste but maybe it's good enough?
fix hero buttons contrast in light mode
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
9d00120211
home page styling improvements
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
7d35760c60
add basic download instructions
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ce365626e5
Author
Member
Copy link

I think I've done about as much as I can before the launch. I'll give it a final check over tomorrow, but that's already the morning of launch day in Europe.

Please could folks give it a look over and let me know if anything importatnt needs to be changed urgently before the launch?


To publish this when we're ready, I suggest that instead of trying to merge it into main, it's better to reset main to this branch and force-push. We should add a new name to the current main branch first to keep it around for the moment.

I think I've done about as much as I can before the launch. I'll give it a final check over tomorrow, but that's already the morning of launch day in Europe. Please could folks give it a look over and let me know if anything importatnt needs to be changed urgently before the launch? --- To publish this when we're ready, I suggest that instead of trying to merge it into `main`, it's better to reset `main` to this branch and force-push. We should add a new name to the current `main` branch first to keep it around for the moment.
caesar changed title from (削除) WIP: Astrowind-based site design (削除ここまで) to Astrowind-based site design 2022年12月14日 14:28:27 +01:00

Here are my comments after carefully reading everything. It looks great 👍 I went ahead and pushed commits to fix trivial typos / wording that do not require discussions (see b1ba448183 and following).

I would remove whatever needs further discussion because it is not obviously agreed upon by everyone, from my point of view. This includes:

Philosophy

  • Philosophy: Simplicity, Best Practices and High Performance

because it will likely be something like (or related to) the "Core Values" of Forgejo once they are agreed on, once the decision process is in place.

Feature Intuitive software project management

Although I think User Research and User eXperience should be a focus of Forgejo, there is a (very) long way to go. Until it happens I don't think "Intuitive" is something that accurately applies to Forgejo and most importantly there is noone committed to make it happen.

Feature Lightweight and performant

I would keep this on "Lightweight" and remove "and performant". The reason there is a focus on scaling in Forgejo is because it does not perform well at the Codeberg scale and needs work. Reason why I think it is accurate to write that there is a focus on scaling. But claiming that it performs well at scale is going one step too far.

I propose this as an alternative:

With a rich feature set, Forgejo still has a low server profile and can run on an inexpensive Raspberry Pi. Save your machine energy!

Here are my comments after carefully reading everything. It looks great 👍 I went ahead and pushed commits to fix trivial typos / wording that do not require discussions (see b1ba44818367c8b8889d5145d055b8c2ac110397 and following). I would remove whatever needs further discussion because it is not obviously agreed upon by everyone, from my point of view. This includes: ### Philosophy * Philosophy: Simplicity, Best Practices and High Performance because it will likely be something like (or related to) the "Core Values" of Forgejo once they are agreed on, once the decision process is in place. ### Feature Intuitive software project management Although I think User Research and User eXperience should be a focus of Forgejo, there is a (very) long way to go. Until it happens I don't think "Intuitive" is something that accurately applies to Forgejo and most importantly there is noone committed to make it happen. ### Feature Lightweight and performant I would keep this on "Lightweight" and remove "and performant". The reason there is a focus on scaling in Forgejo is because it does not perform well at the Codeberg scale and needs work. Reason why I think it is accurate to write that there is a focus on scaling. But claiming that it performs well at scale is going one step too far. I propose this as an alternative: > With a rich feature set, Forgejo still has a low server profile and can run on an inexpensive Raspberry Pi. Save your machine energy!
FAQ: fix typos and trivial wording
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
b1ba448183
FAQ: s/gin/in/
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ad60d84cf3
Features: s/To GitHub/to GitHub/
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
98f5000b86
contact link for the Code of Conduct
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
d493b3494a

We should add a new name to the current main branch first to keep it around for the moment.

I pushed the current main under the name 2022年12月14日-main for archive. I agree to the force push.

> We should add a new name to the current main branch first to keep it around for the moment. I pushed the current main under the name [2022年12月14日-main](https://codeberg.org/forgejo/website/src/branch/2022-12-14-main) for archive. I agree to the force push.
@ -0,0 +21,4 @@
{
release && (
<div class={className}>
<a class={`${classes} inline-block mr-2 mb-2 py-0.5 px-2 last:mr-0 rounded-md`} href={getPermalink(label, 'tag')}>{label}</a>

The tag pre-release does not exist in any blog post.

So we should either:

  • remove this link
  • gather the pre-release tag in the blog index page, to show them along the blog posts.
The tag `pre-release` does not exist in any blog post. So we should either: - remove this link - gather the `pre-release` tag in the blog index page, to show them along the blog posts.
Author
Member
Copy link

Good catch; I intended to change this into a kind of filter interface but I didn't get around to it. I'll remove the link for now.

Good catch; I intended to change this into a kind of filter interface but I didn't get around to it. I'll remove the link for now.
caesar marked this conversation as resolved
@ -0,0 +4,4 @@
<section class="bg-primary-100 dark:bg-steel-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
<span class="font-bold"> <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span> Simplicity, Best
First-time contributor
Copy link

In the pad I changed this to "Ease of use, Productivity, Collaboration and Guidance" but might just say "Ease of use, Productivity and Collaboration". I think these are safe to include for now.

In the pad I changed this to "Ease of use, Productivity, Collaboration and Guidance" but might just say "Ease of use, Productivity and Collaboration". I think these are safe to include for now.
Author
Member
Copy link

This is not currently included on the site, I just left that source file (and other unused ones) around in case we want to use it later. The current wording is AstroWind boilerplate.

I think if we are going to include a prominently-featured "motto"-style banner like this it needs discussion and broad agreement on exactly what goals should be covered by that motto, so I'd prefer that we leave it out until after the launch.

This is not currently included on the site, I just left that source file (and other unused ones) around in case we want to use it later. The current wording is AstroWind boilerplate. I think if we are going to include a prominently-featured "motto"-style banner like this it needs discussion and broad agreement on exactly what goals should be covered by that motto, so I'd prefer that we leave it out until after the launch.
caesar marked this conversation as resolved
First-time contributor
Copy link

Re: @dachary

Feature Intuitive software project management

Although I think User Research and User eXperience should be a focus of Forgejo, there is a (very) long way to go. Until it happens I don't think "Intuitive" is something that accurately applies to Forgejo and most importantly there is noone committed to make it happen.

This feature describes something that already there. The software we are using now (Codeberg) is rather slick and intuitive esp. as FOSS goes, and its almost like Github. Feature has nothing to do with any further user research / UX track for new roadmap items and whether people are available for that.

Re: @dachary >Feature Intuitive software project management > >Although I think User Research and User eXperience should be a focus of Forgejo, there is a (very) long way to go. Until it happens I don't think "Intuitive" is something that accurately applies to Forgejo and most importantly there is noone committed to make it happen. This feature describes something that _already there_. The software we are using now (Codeberg) is rather slick and intuitive esp. as FOSS goes, and its almost like Github. Feature has nothing to do with any further user research / UX track for new roadmap items and whether people are available for that.

This feature describes something that already there. The software we are using now (Codeberg) is rather slick and intuitive esp. as FOSS goes, and its almost like Github.

To be more specific, Forgejo:

  • is prone to UI regressions (primarily because there is no automated testing)
  • has many inconsistent user interfaces (there is no UX work prior to adding a UI)
  • contains a large number of features that are unmaintained (because it has only partial integration testing coverage)
  • has a fair number of surprising user experience pathways

I could be even more specific by providing examples for each of those, in case you think I'm mistaken. But I think some of them come to mind already 😄

That being said, the user experience is nevertheless considered to be good enough by all people I had the opportunity to talk to. Including myself: I'm careful to not use what I know to be fragile and I learned my way around the most unintuitive parts.

For this reason I think Forgejo is a long way from being "Intuitive software project management". This could be replaced by "Good enough software project management" but maybe that's not very appealing in a feature list.

> This feature describes something that already there. The software we are using now (Codeberg) is rather slick and intuitive esp. as FOSS goes, and its almost like Github. To be more specific, Forgejo: * is prone to UI regressions (primarily because there is no automated testing) * has many inconsistent user interfaces (there is no UX work prior to adding a UI) * contains a large number of features that are unmaintained (because it has only partial integration testing coverage) * has a fair number of surprising user experience pathways I could be even more specific by providing examples for each of those, in case you think I'm mistaken. But I think some of them come to mind already 😄 That being said, **the user experience is nevertheless considered to be good enough by all people I had the opportunity to talk to**. Including myself: I'm careful to not use what I know to be fragile and I learned my way around the most unintuitive parts. For this reason I think Forgejo is a long way from being "Intuitive software project management". This could be replaced by "Good enough software project management" but maybe that's not very appealing in a feature list.
Author
Member
Copy link

Philosophy

Philosophy: Simplicity, Best Practices and High Performance

because it will likely be something like (or related to) the "Core Values" of Forgejo once they are agreed on, once the decision process is in place.

As I mentioned above to @circlebuilder, this is placeholder text that I have already removed from the site precisely for the reason you mention. (The source file is still present because we will probably reuse it later, but it's not included on the site anywhere.)

Re: @dachary

Feature Intuitive software project management

Although I think User Research and User eXperience should be a focus of Forgejo, there is a (very) long way to go. Until it happens I don't think "Intuitive" is something that accurately applies to Forgejo and most importantly there is noone committed to make it happen.

This feature describes something that already there. The software we are using now (Codeberg) is rather slick and intuitive esp. as FOSS goes, and its almost like Github. Feature has nothing to do with any further user research / UX track for new roadmap items and whether people are available for that.

I think we should keep this bullet point as the overall gist of it is both largely true currently (though there are a lot of improvements to be made) and an important goal even if UI research is not currently underway.

However we could swap the word intuitive for easy which would be perhaps less of a strong claim. Would that be okay?

> Philosophy > > Philosophy: Simplicity, Best Practices and High Performance > > because it will likely be something like (or related to) the "Core Values" of Forgejo once they are agreed on, once the decision process is in place. As I mentioned above to @circlebuilder, this is placeholder text that I have already removed from the site precisely for the reason you mention. (The source file is still present because we will probably reuse it later, but it's not included on the site anywhere.) > Re: @dachary > > >Feature Intuitive software project management > > > >Although I think User Research and User eXperience should be a focus of Forgejo, there is a (very) long way to go. Until it happens I don't think "Intuitive" is something that accurately applies to Forgejo and most importantly there is noone committed to make it happen. > > This feature describes something that _already there_. The software we are using now (Codeberg) is rather slick and intuitive esp. as FOSS goes, and its almost like Github. Feature has nothing to do with any further user research / UX track for new roadmap items and whether people are available for that. I think we should keep this bullet point as the overall gist of it is both *largely true* currently (though there are a *lot* of improvements to be made) and an important goal even if UI research is not currently underway. However we could swap the word `intuitive` for `easy` which would be perhaps less of a strong claim. Would that be okay?
fix IPA emphasis
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
af65ca35ab
Author
Member
Copy link

Feature Lightweight and performant

I would keep this on "Lightweight" and remove "and performant". The reason there is a focus on scaling in Forgejo is because it does not perform well at the Codeberg scale and needs work. Reason why I think it is accurate to write that there is a focus on scaling. But claiming that it performs well at scale is going one step too far.

This was discussed on Matrix with input from @fnetX and @dachary.

I will change to the following wording:

With a rich feature set, Forgejo still has a low server profile and requires an order of magnitude less resources than other forges.

> ### Feature Lightweight and performant > > I would keep this on "Lightweight" and remove "and performant". The reason there is a focus on scaling in Forgejo is because it does not perform well at the Codeberg scale and needs work. Reason why I think it is accurate to write that there is a focus on scaling. But claiming that it performs well at scale is going one step too far. This was [discussed on Matrix](https://matrix.to/#/!qjPHwFPdxhpLkXMkyP:matrix.org/$SM_TICmmQ77Nuvkq0FlNfBaTduhrGhClGKPCprWCYio) with input from @fnetX and @dachary. I will change to the following wording: > With a rich feature set, Forgejo still has a low server profile and requires an order of magnitude less resources than other forges.
Ghost approved these changes 2022年12月14日 21:28:13 +01:00

However we could swap the word intuitive for easy which would be perhaps less of a strong claim. Would that be okay?

Yes. As @fr33domlover would say, this is something I'm happy to live with 😄

> However we could swap the word intuitive for easy which would be perhaps less of a strong claim. Would that be okay? Yes. As @fr33domlover would say, this is something I'm happy to live with :smile:
add RSS feed links to blog and releases pages
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
78356c6552
Author
Member
Copy link

This is merged as of 78356c6552 but I will continue to make some small improvements so please continue to leave suggestions here.

This is merged as of https://codeberg.org/forgejo/website/commit/78356c65523b428546a1fa7965911fd1f179232e but I will continue to make some small improvements so please continue to leave suggestions here.
caesar closed this pull request 2022年12月14日 23:01:34 +01:00
First-time contributor
Copy link

One more change needed in the footer to attribute David Revoy properly. See: https://www.davidrevoy.com/article605/best-practices-for-attribution

Text would be (as markdown):

["Forgejo"](https://www.peppercarrot.com/en/viewer/comissions-src__2022年11月27日_Forgejo_by-David-Revoy.html) mascot by David Revoy, [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
One more change needed in the footer to attribute David Revoy properly. See: https://www.davidrevoy.com/article605/best-practices-for-attribution Text would be (as markdown): ```markdown ["Forgejo"](https://www.peppercarrot.com/en/viewer/comissions-src__2022年11月27日_Forgejo_by-David-Revoy.html) mascot by David Revoy, [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) ```
Author
Member
Copy link

Thanks @circlebuilder, fixed in 20f3d614f9.

Thanks @circlebuilder, fixed in https://codeberg.org/forgejo/website/commit/20f3d614f993c24370065b484354efe393213d26.
caesar deleted branch wip-astrowind 2022年12月15日 09:27:14 +01:00
Some checks are pending
ci/woodpecker/push/woodpecker Pipeline was successful
pr / preview (pull_request)
Required

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
No reviewers
forgejo/Contributors
Labels
Clear labels
404
Broken links or missing content
Accessibility
Accessibility
Blog post
Documentation
Forgejo Documentation
Internationalisation
i18n and l10n
User research - Accessibility
Requires input about accessibility features, likely involves user testing.
User research - Blocked
Do not pick as-is! We are happy if you can help, but please coordinate with ongoing redesign in this area.
User research - Community
Community features, such as discovering other people's work or otherwise feeling welcome on a Forgejo instance.
User research - Config (instance)
Instance-wide configuration, authentication and other admin-only needs.
User research - Errors
How to deal with errors in the application and write helpful error messages.
User research - Filters
How filter and search is being worked with.
User research - Future backlog
The issue might be inspiring for future design work.
User research - Git workflow
AGit, fork-based and new Git workflow, PR creation etc
User research - Labels
Active research about Labels
User research - Moderation
Moderation Featuers for Admins are undergoing active User Research
User research - Needs input
Use this label to let the User Research team know their input is requested.
User research - Notifications/Dashboard
Research on how users should know what to do next.
User research - Rendering
Text rendering, markup languages etc
User research - Repo creation
Active research about the New Repo dialog.
User research - Repo units
The repo sections, disabling them and the "Add more" button.
User research - Security
User research - Settings (in-app)
How to structure in-app settings in the future?
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
5 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
forgejo/website!37
Reference in a new issue
forgejo/website
No description provided.
Delete branch "wip-astrowind"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?