Deploy preview for PR 67 🛫

pr-preview/pr-67/CNAME

@@ -0,0 +1 @@
+prachtsaal.berlin

pr-preview/pr-67/HOWTO.md

@@ -0,0 +1,22 @@
+This document lists common tasks.
+
+# Add a new member
+
+- Create a new folder under `assets/img/members/` with the name of the
+  person. If the name is taken you can add the last name or use a nickname
+  instead.
+- Take a look at `assets/img/members/abe/` as an example for how to name the
+  images. We use WEBP because the file size is smaller and the quality better
+  than JPG. Use:
+    - NAME-thumb.webp (400x400 portrait)
+    - NAME-portrait.webp (larger portrait, longer side 1000 ~ 2000 pixels)
+    - NAME-ARTWORK1.webp (artworks, longer side 1000 ~ 2000 pixels)
+    - NAME-ARTWORK2.webp
+- Duplicate one of the files under `_members/` and rename it matching the folder name you used above.
+- Make sure `current` is `true` for current members, make it `false` for past
+  members.
+- Make sure `thumb`, `portrait` and `portfolio_image_locations` point at the right images.
+- Make sure `website` and `socials` start with `https://`. Use `-` if none.
+- Paste the full description on the line following `---` at the bottom.
+
+

pr-preview/pr-67/README.md

@@ -0,0 +1,235 @@
+# prachtsaal.berlin
+
+The website of Prachtsaal Studios.
+It is developed using Jekyll and tailwindcss. 
+
+Jekyll allows you to edit markdown files, which are then compiled and integrated into a static html, javascript, and css site; Jekyll is what is called a static site generator. 
+
+tailwindcss is a css framework which allows you to define css using user friendly classes in your html.
+
+
+## Content Revision
+
+You'd like to maintain the content of the website? Thank you!
+
+### events page
+
+The events page, found in file `events.html`, is coded up and built from other content, like the contents of the `events` and `news` folders. If you want to change the content shown, you'll want to change the content in these two folders.
+
+The events shown as upcoming can be found in the `events` folder. We use Jekyll's support of `posts` for events and news. This means that the file needs to have the date in the filename in the form `yyyy-mm-dd-title.md`, and Jekyll will also automatically parse this information from the file name for you, and offer it as a `date` parameter. The rest of the information that can be customized to provide titles, images, and ticket links is in the "front matter," or the section at the top between the lines with three dashes `---`; these three dashes are required, and tell Jekyll to compile and process the page.
+
+If the event will occur over a range of dates, please set the date in the filename as the final day - this allows the event to show in the upcoming events section until the final day. You can set the start date in the front matter, as seen below.
+
+An preconfigured template of a markdown file can be found in `_templates/event-template.md`. 
+
+```
+---                           (1)
+layout: event                 (2)
+title:                        (3)
+subtitle:                     (4)
+main_image:                   (5)
+description:                  (6)
+start_date:                   (17)
+quote:                        (7)
+quote_author:                 (8)
+quote_author_role:            (9)
+images:                       (10)
+  - file:                     (11)
+    caption:                  (12)
+  - file: 
+    caption: 
+link:                         (13)
+link_text:                    (14)
+tags: portfolio               (15)
+---                           (1)
+Add your content here.        (16)
+```
+- (1) delineates the front matter, is required
+- (2) required configuration for the framework (Jekyll)
+- (3) shown in list view, and as title of event page
+- (4) shown in list view, and as subtitle of event page
+- (5) location of the main image, shown in list view, and on event page
+- (6) description of event shown in list view, text the describes the page for search engines
+- (7) event pages supports a quote as header
+- (8) you can attribute the quote to an author
+- (9) the quote author can also have a further descriptor
+- (10) all images you wish to show at the bottom of the page should be listed here
+- (11) the location of the image file. It's important that there are two spaces at the beginning of the line
+- (12) the text of the image caption
+- (13) a link for ticket sales, or registration, which will show as a button
+- (14) the text of the button, that clicks to the link
+- (15) tags are used for labeling if an event will be shown in the portfolio, with text `portfolio`. if it should not be shown in the portfolio, don't put a tag
+- (16) text content for the vent
+- (17) if the event has a range of dates, please put the start date here, in the format YYYY-MM-DD, and use the end date for the event date in the file (this allows the javascript that automatically removes past dates from the list of future dates to remove it only when the end date has past)
+
+### home page
+
+Much of the home page is coded up, and built from other content. However, if you'd like to change the text introducing Prachtsaal on the homepage, you can edit it in index.md. 
+
+```
+---                           (1)
+layout: home                  (2)
+title: Prachtsaal Studio      (3)
+subtitle: ...                 (4)
+description: ...              (5)
+---                           (1)
+Prachtsaal (magnificent hall) stands as a nexus of arts,    (6)
+```
+- (1) delineates the front matter, is required
+- (2) required configuration for the framework (Jekyll)
+- (3) main title text for home page
+- (4) subtitle text for home page
+- (5) text the describes the page for search engines
+- (6) text content on home page, in markdown
+
+If you want to change anything related to spacing and design, you'll need to change the html and/or the css.
+
+### people page
+The people page, which is found at `people.html`, is automatically built from text files in the `_members` directory and `_data/communities.yml` file.
+
+If a member hasn't submitted member page text or images, you can force that a link not be created to a member page from the people page. This is done by making sure there is nothing past the front matter, meaning, if the last line in the member markdown file is the second `---`.
+
+#### member pages
+
+Each member has their own markdown (`*.md`) file. The stuff at the top ("front matter") is data that can be accessed by the script that builds the people page, and each member's page. It defines text, and where relevant files are.
+
+```
+---                           (1)
+layout: member                (2)
+full_name: ...                (3)
+description: ...              (4)
+thumb: ...                    (5)
+portrait: ...                 (6)
+portfolio_image_locations:
+  - /assets/img/members/...   (7)
+  - /assets/img/members/...   (7)
+website: https://...          (8)
+socials:                      
+  - https://...               (9)
+  - https://...               (9)
+---                           (1)
+
+This is the text of your personal page. (10)
+```
+
+- (1) delineates the front matter, is required
+- (2) required configuration for the framework (Jekyll)
+- (3) shown in list view, and personal page
+- (4) shown in list view, text the describes the page for search engines
+- (5) location of image in list view
+- (6) location of portrait in personal page
+- (7) file location of portfolio image shown in personal page
+- (8) website url. If more than one, use a list like in socials.
+- (9) list the links to your socials.
+- (10) the text you want shown on your personal page
+
+
+
+#### communities section
+
+The information for the communities section is stored as a data file in `_data/communities.yml`. It is in YAML format. Please see the desired format below.
+
+```
+- name: Tape Over                               (1)
+  thumb: /assets/img/communities/tapeover.jpeg  (2)
+  website: https://tapeover.berlin/             (3)
+  visible: true                                 (4)
+
+- name: Xemantic
+  thumb: /assets/img/communities/xemantic.png
+  website: https://xemantic.com/
+  visible: true
+
+...
+```
+- (1) The name of the organization. The dash indicates a new organization. 
+- (2) The logo, if available
+- (3) The website to link to.
+- (4) If the organization should be shown in the communities section
+
+If you want to change anything related to spacing and design, you'll need to change the html and/or the css.
+
+
+## [WIP] Development
+
+You'd like to develop the design elements and code for the website? Thank you! 
+
+This website is built using Jekyll and tailwindcss. [Jekyll](https://jekyllrb.com/) uses [Liquid](https://shopify.github.io/liquid/) to process templates. Both html files and markdown files can include what's called front matter, which is a section at the top of the page with key value pairs - we use the yaml formatting.
+
+To develop for this website, you'll need to install ruby (language Jekyll is written in), Jekyll, and node.js(used to install tailwind), and tailwind. There is an installation guide below.
+
+### To install the required `npm` dependencies
+
+```bash
+npm install
+```
+
+### To serve the website locally
+
+#### Short story
+While you are developing, in one terminal instance, run
+
+```bash
+npm run build-css
+```
+
+which watches for any changes, and rebuilds `styles.css`.
+
+In another terminal, run
+
+```bash
+bundle exec jekyll serve
+```
+which serves the website at http://localhost:4000/
+Any changes will be automatically deployed, though you will need to reload your website to see the changes.
+
+#### Long story
+The way tailwind works is that it only builds and includes the css that you are using in your website. Therefore, as you build a website, you'll need to rebuild the css with tailwind, to ensure that the css classes defined in tailwind are included. Tailwind will take what's in `/assets/css/source.css` and rebuild it to `/assets/css/styles.css`. This `styles.css` is what is included into the html. If you want to customize your own css and classes, add them to `source.css` to ensure it's included in `styles.css`. The command to build to `styles.css` is documented in `package.json` as an `npm` script `buid-css`. This command will watch for changes and update `styles.css` on the fly.
+
+### Design considerations
+
+The way the website has been developed is it has anticipated that the files that non-technical contributors will want to work with are in markdown, for relative ease of editing. These pages are individual event pages, individual news pages, individual member pages, the about page, and the home page. 
+
+Specifically:
+- events are in the `/events/_posts` folder. The means that events are Jekyll posts (which have a special function in Jekyll) with the category of `events`. Event pages use the `_layouts/event.html` layout. More about Jekyll posts: https://jekyllrb.com/docs/posts/
+- news items are in the `/news/_posts` folder. This means that news are Jekyll posts, with the category of `news`. The intention is to put any announcements, such as open calls and event reports, in `news`. News pages use the `_layouts/news.html` layout.
+- member pages are in the `_members` folder. `members` is a collection in Jekyll, defined in the `_config.yml` file. This means that all the data in the `_members` folder can be accessed via `site.members`. Each member has their own markdown file, which uses the `_layouts/member.html` layout.
+- the about page is an example of a generic text only page, which uses the `_layouts/page.html` layout.
+- the home page is a custom page, but because there is a little bit of text in it, it is a layout, that can be called by the `index.md` file. That way, the text for the home page, and the titles, can be changed relatively easily.
+
+What's not in markdown are the events and people pages, which compile information in other files, and layouts, which are html templates that markdown files will use, named in the front matter with the key `layout`. These html files are mostly Liquid templating language, html, and tailwind css classes. 
+
+The events page has two sections, an upcoming events section, and an events portfolio. The upcoming events section is filtered by the `events` category (no `news` items will be considered), by date at build time (only future dates are considered), and then at load time, javascript (`/assets/js/future_events.js`) will further remove events that are in the past. The events portfolio section filters all posts (including the `news` category) on the tag `portfolio`. If a future event has been labeled with the tag `portfolio`, it will be shown in the events porfolio section.
+
+All the pages use the layout `default.html` - this layout includes the navigation bar and footer, and required js and css. The html for the navigation bar is at `_includes/navigation.html`, and the html for the footer is at `_includes/footer.html`.
+
+When you create a pull request, a GitHub action called [PR Preview Action](https://github.com/rossjrw/pr-preview-action) 
+will run automatically, creating a preview website to verify
+everything looks good before the team decides to accept the pull request. The URL of that temporary
+website will be visible in a auto-generated comment under the pull request.
+It will look like `https://prachtsaal.github.io/prachtsaal.berlin/pr-preview/pr-NN/`,
+where NN is the pull request number.
+
+
+### Installation
+
+You'll want to install ruby, node.js, and tailwindcss if you haven't already. If you need to install any of these, here are some helpful references:
+
+- https://github.com/rubygems/rubygems?tab=readme-ov-file: you can install ruby with [rbenv](https://github.com/rbenv/rbenv)
+- https://jekyllrb.com/docs/installation/ubuntu/
+- https://docs.npmjs.com/downloading-and-installing-node-js-and-npm: to install node and npm, use nvm: https://github.com/nvm-sh/nvm
+- https://tailwindcss.com/docs/installation
+- https://tailwindcss.com/docs/editor-setup
+
+#### Setting up Jekyll
+Once ruby is installed, install jekyll and bundler gems with
+
+```bash
+gem install jekyll bundler
+```
+
+If you are setting up your environment, you can set up the ruby environment with
+
+```bash
+bundle install
+```

pr-preview/pr-67/about.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en" class="font-sans">
+
+<head>
+  <meta charset="utf-8">
+  <link href=/pr-preview/pr-67/assets/css/styles.css rel="stylesheet">
+  <link rel="apple-touch-icon" sizes="180x180" href=/pr-preview/pr-67/apple-touch-icon.png>
+  <link rel="icon" type="image/png" sizes="32x32" href=/pr-preview/pr-67/favicon-32x32.png>
+  <link rel="icon" type="image/png" sizes="16x16" href=/pr-preview/pr-67/favicon-16x16.png>
+  <link rel="manifest" href=/pr-preview/pr-67/site.webmanifest>
+  <title>
+
+
+      Prachtsaal Studio: about us.
+
+  </title>
+
+  <meta name="description" content="about Prachtsaal Studio Cooperative">
+
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+
+  <div class="flex flex-col w-full">
+    <div>
+      <nav class="flex nav-x nav-y justify-between items-start">
+  <div>
+    <a href=/pr-preview/pr-67/>
+      <img src=/pr-preview/pr-67/assets/img/prachtsaal-logo.png width="150">
+    </a>
+  </div>
+
+  <div>
+    <div class="flex justify-end cursor-pointer sm:hidden mb-2" id="burger">
+      <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
+    </div>  
+    <!-- <div class="hidden block sm:flex sm:flex-row sm:space-x-12" id="menu"> -->
+    <div class="hidden sm:flex links-without-underline" id="menu">
+      <ul class="sm:flex sm:flex-row sm:space-x-12 list-none">
+        <li><a href=/pr-preview/pr-67/events.html>events</a></li>
+        <li><a href=/pr-preview/pr-67/people.html>people</a></li>
+        <li><a href=/pr-preview/pr-67/about.html>about</a></li>
+        <li><a href=/pr-preview/pr-67/#contact>contact</a></li>
+      </ul>
+
+    </div>  
+  </div>
+</nav>  
+
+    </div>
+
+    <div>
+    <div class="flex justify-center">
+    <div class="flex-col mx-12 lg:max-w-6xl justify-between">
+
+    <header class="mx-4 sm:mx-28 my-28">
+        <h1>about us.</h1>
+    </header>    
+
+    <div class="mx-4 lg:w-[760px]">
+        <h2 id="who-are-we">Who are we?</h2>
+
+<p>Welcome to Prachtsaal, a vibrant and dynamic creative nexus, built on two interconnected pillars. One empowers our resident artists, who infuse the space and inspire each other with cutting-edge innovation. The other invites the public into a dynamic playground for expression, exploration, exchange, and education. Our mission is to cultivate an environment teeming with playfulness and purpose, movement and reflection, color and sound, discovery and growth. We eagerly welcome everyone with an open mind, tolerance, and curiosity to join us. As a non-profit cooperative, we are committed to pushing the boundaries of community enrichment.</p>
+
+<p>Join us at Prachtsaal, where creativity knows no bounds and every day is an invitation to explore, learn, and grow together!</p>
+
+<h2 id="our-mission">Our mission</h2>
+<p>At Prachtsaal, we are committed to:</p>
+
+<ul>
+  <li>Showcasing visual arts, music, and performances that embody creative expression across all mediums, intersecting with the realms of humanities, society, science, and technology.</li>
+  <li>Providing affordable ateliers for artists.</li>
+  <li>Curating inclusive events for the benefit of both the local community and a wider audience.</li>
+  <li>Educating all generations in art techniques and culture.</li>
+  <li>Promoting international artist collaborations on-site.</li>
+</ul>
+
+<h2 id="how-are-we-achieving-our-goals">How are we achieving our goals</h2>
+
+<p>To realize our mission, we:</p>
+
+<ul>
+  <li>Offer shared facilities that encourage the exploration of various artistic mediums.</li>
+  <li>Cultivate a safe, diverse, and inclusive environment.</li>
+  <li>Ensure our space is easily accessible to everyone.</li>
+  <li>Uphold a democratic management process.</li>
+  <li>Seek professional support to drive our mission forward.</li>
+  <li>Undertake necessary renovations and reconstructions.</li>
+  <li>Strive for the economic sustainability of our space.</li>
+  <li>Maintain our non-profit status.</li>
+</ul>
+
+<h2 id="prachtsaal-a-cooperative-in-the-making">Prachtsaal: A Cooperative in the Making</h2>
+
+<p>We are embarking on an exciting journey to become a registered non-profit cooperative (gemeinnützige Genossenschaft). This new chapter will unlock fresh realms of community engagement and transform our space into a dynamic hub of creativity. Beyond our ateliers and daily art practices, we will host regular concerts and performances, curate a gallery with ever-evolving exhibitions, and offer a lively space for workshops and education. Join us as we reimagine the future of art and community together!</p>
+
+
+
+    </div>
+
+    </div>
+</div>
+
+    </div>
+
+    <div class="bg-black text-gray-400 mt-16">
+      <footer class="text-center m-16">
+    <a href=/pr-preview/pr-67/impressum.html>Impressum</a>
+    <div class="mt-8">
+        Copyright &copy; 2024 Prachtsaal Studio. All rights reserved.
+    </div>
+</footer>
+    </div>
+  </div>
+
+  <script src=/pr-preview/pr-67/assets/js/menu.js></script>
+</body>
+
+</html>