Added Open in New Window to snippets

README.md

@@ -5,11 +5,12 @@ Nutzt [11ty](https://www.11ty.dev) für die strukturierte Ablage von Content.
 ## Status von Dokumenten
 
 | Kürzel | Bedeutung | Was ist zu tun? |
-| --- | --- | --- | --- |
+| ---- | ---- | ---- |
 | tbd | to be done | loslegen! |
 | wip | in Arbeit | nix |
 | rfreview | Wartet auf Review | Review machen |
 | review | im Review | nix |
+| refactor | Überarbeitung erforderlich | bitte überarbeiten |
 | ok | Fertig | nix |
 
 ## Ordnerstruktur

src/_layouts/components/utils.11ty.js

@@ -10,20 +10,52 @@ exports.getContentMeta = (meta) => {
     'tbd': 'to be done',
     'rfreview': 'wartet auf Review',
     'review': 'im Review',
+    'refactor':	'Überarbeitung erforderlich',
     'ok': 'Fertig'
   };
 
-  const status = meta.status ? `<li class="content-meta__status">Status: ${statusMap[meta.status]}</li>` : '';
-  const authors = meta.authors ? `<li class="content-meta__authors">AutorIn(en): ${meta.authors}</li>` : '';
-  const reviewers = meta.reviewers ? `<li class="content-meta__reviewers">ReviewerIn(en):${meta.reviewers}</li>` : '';
-  const purpose = meta.purpose ? `<li class="content-meta__purpose">Funktion des Snippets: ${meta.purpose}</li>` : '';
+  const getComments = (comments) => {
+    if(!comments) return '';
+
+    const commentsList = comments.map(item => `<li>${item}</li>`);
+
+    return commentsList.length === 0 ? '' 
+      : `<strong>Kommentare</strong> <ul>${commentsList.join("\n")}</ul>`;
+  };
+
+  const status = meta.status ? `<li class="content-meta__status"><strong>Status:</strong> ${statusMap[meta.status]}</li>` : '';
+  const authors = meta.authors ? `<li class="content-meta__authors"><strong>AutorIn(en):</strong> ${meta.authors}</li>` : '';
+  const reviewers = meta.reviewers ? `<li class="content-meta__reviewers"><strong>ReviewerIn(en):</strong> ${meta.reviewers}</li>` : '';
+  const purpose = meta.purpose ? `<li class="content-meta__purpose"><strong>Funktion des Snippets:</strong> ${meta.purpose}</li>` : '';
+  const comments = meta.comments ? `<li class="content-meta__comments">${getComments(meta.comments)}</li>` : '';
 
   return `
     <ul class="content-meta">
       ${status}
       ${authors}
       ${reviewers}
       ${purpose}
+      ${comments}
     </ul>
   `;
-};
+};
+
+/* Edit Link für Content erzeugen 
+############################################################################ */
+
+exports.getEditLink = (item, data) => {
+  const editUrl = `${data.settings.repoEditUrl}${item.page.inputPath.replace('./src/', 'src/')}`;
+  const editElement = `<a href="${editUrl}" title="Inhalt ändern"><span class="icon icon--inline">edit</span></a>`;
+
+  return editElement;
+};
+
+/* Open in New Window Link für Content erzeugen 
+############################################################################ */
+
+exports.getOpenInNewWindowLink = (item) => {
+  console.log(item.page);
+  const url = `${item.url}`;
+  return `<a href="${url}" title="Inhalt in neuem Fenster öffnen"><span class="icon icon--inline">open_in_new</span></a>`;
+};
+

src/_layouts/handlungsfelder.11ty.js

@@ -7,7 +7,7 @@ module.exports = {
 
     const tocTools = require('./components/tocTools.11ty.js');
     const utils = require('./components/utils.11ty.js');
-    
+
     const getCompetencies = (competencies, parentId) => {
       if(!competencies) return '';
 
@@ -34,17 +34,17 @@ module.exports = {
     };
 
     const handlungsfelderList = data.collections.handlungsfelder.map((item) => {
-      const editUrl = `${data.settings.repoEditUrl}${item.page.inputPath.replace('./src/', 'src/')}`;
       const status = item.data.meta && item.data.meta.status ? `is-${item.data.meta.status}` : '';
       const competencies = getCompetencies(item.data.competencies, item.page.fileSlug)
       const meta = utils.getContentMeta(item.data.meta);
-
+      
       return `
         <section class="${status} ${item.data.class ? item.data.class : ''} ${item.data.level===1 ? 'has-seperator' : ''}">
           <div class="content">
-            <h${item.data.level + 1} id="${this.slugify(item.data.title)}">${item.data.title} <a href="${editUrl}" title="Inhalt ändern"><span class="icon icon--inline">edit</span></a></h${item.data.level + 1}>
+            <h${item.data.level + 1} id="${this.slugify(item.data.title)}">${item.data.title}
+              ${utils.getOpenInNewWindowLink(item)}${utils.getEditLink(item, data)}</h${item.data.level + 1}>
             ${meta}
-            ${item.content}
+           ${item.content}
             ${competencies}
           </div>
         </section>

src/_layouts/kurzbericht.11ty.js

@@ -9,14 +9,14 @@ module.exports = {
     const utils = require('./components/utils.11ty.js');
 
     const kurzberichtList = data.collections.itemsKurzbericht.map((item) => {
-      const editUrl = `${data.settings.repoEditUrl}${item.page.inputPath.replace('./src/', 'src/')}`;
       const meta = utils.getContentMeta(item.data.meta);
       const status = item.data.meta && item.data.meta.status ? `is-${item.data.meta.status}` : '';
 
       return `
         <section class="${status} ${item.data.class ? item.data.class : ''} ${item.data.level===1 ? 'has-seperator' : ''}">
           <div class="content">
-            <h${item.data.level + 1} id="${this.slugify(item.data.title)}">${item.data.title} <a href="${editUrl}" title="Inhalt ändern"><span class="icon icon--inline">edit</span></a></h${item.data.level + 1}>
+            <h${item.data.level + 1} id="${this.slugify(item.data.title)}">${item.data.title} 
+            ${utils.getOpenInNewWindowLink(item)}${utils.getEditLink(item, data)}</h${item.data.level + 1}>
             ${meta}
             ${item.content}
           </div>

src/_layouts/page.11ty.js

@@ -3,6 +3,7 @@ exports.render = function (data) {
   const documentHeader = require('./components/head.11ty');
   const pageHeader = require('./components/page-header.11ty');
   const pageFooter = require('./components/page-footer.11ty');
+  const utils = require('./components/utils.11ty.js');
 
   const documentHead = documentHeader.getHeader(this, data);
   const pageHead = pageHeader.getPageHeader(this, data);
@@ -15,7 +16,7 @@ exports.render = function (data) {
       ${pageHead}
       <main>
         <header>
-          <h1>${data.title}</a></h1>
+          <h1>${data.title}${utils.getEditLink(data, data)}</h1>
         </header>
         ${data.content}
       </main>

src/assets/styles/scss/components/content-meta.scss

@@ -6,5 +6,17 @@ ul.content-meta{
   margin-bottom: var(--m);
   border-bottom: dotted var(--border-width-m) var(--darken);
   padding-bottom: var(--m);
+
+  & > li{
+    margin-left: 0;
+
+    &:before{
+      content: "";
+    }
+  }
+
+  .content-meta__comments li{
+    padding-left: 1ch;
+  }
 }
 

src/assets/styles/scss/utils.scss

@@ -102,12 +102,18 @@
   border-left: solid var(--border-width-l) hsla(60, 100%, 50%, 1);
   padding-left: var(--fluid-space-s);
 }
+
 .is-review{
   background-color: hsla(60, 100%, 80%, 0.3);
   border-left: solid var(--border-width-l) hsla(60, 100%, 40%, 1);
   padding-left: var(--fluid-space-s);
 }
 
+.is-refactor{
+  background-color: hsla(320, 100%, 80%, 0.3);
+  border-left: solid var(--border-width-l) hsla(320, 100%, 40%, 1);
+  padding-left: var(--fluid-space-s);
+}
 
 /* Has Interaction
 ############################################################################ */

src/handlungsfelder/crea.md

@@ -1,6 +1,7 @@
 ---
 title: Driving Creation Process
 kuerzel: crea
+layout: page.11ty.js
 level: 1
 meta:
   status: rfreview

src/handlungsfelder/dev.md

@@ -1,11 +1,14 @@
 ---
 title: Developing Interactive and Distributed Systems
 kuerzel: dev
+layout: page.11ty.js
 level: 1
 meta:
-  status: rfreview
+  status: refactor
   authors: Entwicklungsteam
   reviewers: 
+  comments:
+    - "cn: Es wäre gut die Kompetenzen ins Front Matter zu überführen wie bei CREA, damit sie später adressiert werden können."
 ---
 
 Wie werden Softwaresysteme und -produkte gebaut.

src/handlungsfelder/dux.md

@@ -1,11 +1,14 @@
 ---
 title: Designing for User Experiences
 kuerzel: dux
+layout: page.11ty.js
 level: 1
 meta:
-  status: rfreview
+  status: refactor
   authors: Entwicklungsteam
-  reviewers: 
+  reviewers:
+  comments:
+    - "cn: Es wäre gut die Kompetenzen ins Front Matter zu überführen wie bei CREA, damit sie später adressiert werden können."
 ---
 
 Wofür bauen wir etwas? Was überhaupt, wie sieht es aus, wie fühlt es sich an und wie soll es funktionieren?

src/handlungsfelder/exa.md

@@ -1,11 +1,14 @@
 ---
 title: Exploring Advanced Interactive Media
 kuerzel: exa
+layout: page.11ty.js
 level: 1
 meta:
-  status: rfreview
+  status: refactor
   authors: Entwicklungsteam
   reviewers: 
+  comments:
+    - "cn: Es wäre gut die Kompetenzen ins Front Matter zu überführen wie bei CREA, damit sie später adressiert werden können."
 ---
 
 Leitfrage: Was geht noch so? *bling* *bling* 

src/handlungsfelder/indi.md

@@ -1,11 +1,14 @@
 ---
 title: Enhancing Interactions on Different Scales
 kuerzel: indi
+layout: page.11ty.js
 level: 1
 meta:
-  status: rfreview
+  status: refactor
   authors: Entwicklungsteam
   reviewers: 
+  comments:
+    - "cn: Es wäre gut die Kompetenzen ins Front Matter zu überführen wie bei CREA, damit sie später adressiert werden können."
 ---
 
 Leitfrage: Haben wir etwas sinnvolles gebaut und wie gut ist es?

src/kurzbericht/000-praeludium.md

@@ -1,8 +1,9 @@
 ---
 title: Präludium
-status: wip
-comments_id: 1
+layout: page.11ty.js
 level: 1
+meta:
+  status: ok
 ---
 
 ### Entwicklungsteam

src/kurzbericht/010-profil.md

@@ -1,6 +1,6 @@
 ---
 title: Profil der Studiengänge
-status: wip
+layout: page.11ty.js
 level: 1
 meta:
   status: wip

src/kurzbericht/012-profil-bachelor.md

@@ -1,5 +1,6 @@
 ---
 title: Medieninformatik Bachelor
+layout: page.11ty.js
 level: 2
 meta:
   status: rfreview

src/kurzbericht/013-profil-master.md

@@ -1,5 +1,6 @@
 ---
 title: Medieninformatik Master
+layout: page.11ty.js
 level: 2
 meta:
   status: tbd

src/kurzbericht/100-curriculumwerkstatt-studiengangziele.md

@@ -1,5 +1,6 @@
 ---
 title: Curriculumwerkstatt, Studiengangziele, Absolvent\:innenprofil, externe Expertise, Studierendenbeteiligung
+layout: page.11ty.js
 level: 1
 meta:
   status: tbd

src/kurzbericht/110-curriculumwerkstatt.md

@@ -1,5 +1,6 @@
 ---
 title: Curriculumwerkstatt
+layout: page.11ty.js
 level: 2
 meta:
   status: tbd

src/kurzbericht/130-absolventinnenprofil-allgemein.md

@@ -1,5 +1,6 @@
 ---
 title: Absolvent:innenprofile
+layout: page.11ty.js
 level: 2
 meta:
   status: rfreview

src/kurzbericht/132-absolventinnenprofil-bachelor.md

@@ -1,5 +1,6 @@
 ---
 title: Absolvent:innenprofil Medieninformatik Bachelor
+layout: page.11ty.js
 level: 3
 meta:
   status: rfreview

src/kurzbericht/134-absolventinnenprofil-master.md

@@ -1,5 +1,6 @@
 ---
 title: Absolvent:innenprofil Medieninformatik Master
+layout: page.11ty.js
 level: 3
 meta:
   status: rfreview

src/kurzbericht/140-externe-expertise.md

@@ -1,5 +1,6 @@
 ---
 title: Externe Expertise
+layout: page.11ty.js
 level: 2
 meta:
   status: tbd

src/kurzbericht/150-studentische-beteiligung.md

@@ -1,5 +1,6 @@
 ---
 title: Studentische Beteiligung
+layout: page.11ty.js
 level: 2
 meta:
   status: tbd

src/kurzbericht/200-umsetzung.md

@@ -1,5 +1,6 @@
 ---
 title: Umsetzung Studiengangkriterien, Studierbarkeit, Forschungsaktivitäten in Masterstudiengängen
+layout: page.11ty.js
 level: 1
 meta:
   status: tbd

src/kurzbericht/300-anhaenge.md

@@ -1,5 +1,6 @@
 ---
 title: Anhänge
+layout: page.11ty.js
 level: 1
 meta:
   status: tbd

src/kurzbericht/310-anhaenge-sitzungen-entwicklungsteam.md

@@ -1,5 +1,6 @@
 ---
 title: Sitzungen Entwicklungsteam
+layout: page.11ty.js
 level: 2
 meta:
   status: tbd

src/kurzbericht/320-anhaenge-sitzungen-studiengangsteam.md

@@ -1,5 +1,6 @@
 ---
 title: Sitzungen Studiengangsteam
+layout: page.11ty.js
 level: 2
 meta:
   status: tbd