Import old website

.editorconfig

@@ -9,4 +9,7 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.md]
-trim_trailing_whitespace = false
+charset = utf-8
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.vscode/settings.json

@@ -3,6 +3,7 @@
     "Biblatex",
     "booktitle",
     "codegen",
+    "composables",
     "datetime",
     "esbuild",
     "jiti",

README.md

@@ -1,5 +1,7 @@
 # JabRefOnline
 
+This repository contains the source of the [JabRef homepage](https://www.jabref.org/).
+
 ## Servers
 
 - Production server: https://mango-pebble-0224c3803.1.azurestaticapps.net

components/LandingPageDownload.vue

@@ -0,0 +1,85 @@
+<template>
+  <section
+    id="download"
+    class="bg-primary-50"
+  >
+    <div class="container mx-auto sm:px-4 md:py-16">
+      <div class="flex flex-wrap flex-col content-center">
+        <h1 class="text-center mb-3 text-5xl">Try it now</h1>
+        <h3 class="text-center mb-12 text-3xl">
+          JabRef is free and works across all your devices.
+        </h3>
+
+        <t-button class="text-xl mx-auto">
+          <a :href="downloadUrl">Download JabRef</a>
+        </t-button>
+
+        <p class="text-center pt-2">
+          <small>
+            <span v-if="isWindows()">
+              For Windows
+              <br />
+              Also available for
+              <a
+                class="text-highlight-500"
+                href="https://downloads.jabref.org/"
+                >mac OS X and Linux</a
+              >
+              <br />
+            </span>
+            <span v-if="isMac()">
+              For mac OS X
+              <br />
+              Also available for
+              <a
+                class="text-highlight-500"
+                href="https://downloads.jabref.org/"
+                >Windows and Linux</a
+              >
+              <br />
+            </span>
+            <span v-if="isLinux()">
+              For Linux
+              <br />
+              Also available for
+              <a
+                class="text-highlight-500"
+                href="https://downloads.jabref.org/"
+              >
+                mac OS X and Windows
+              </a>
+              <br />
+            </span>
+            <a
+              class="text-highlight-500"
+              href="https://github.com/JabRef/jabref/blob/main/CHANGELOG.md"
+            >
+              Change Log
+            </a>
+            and
+            <a
+              class="text-highlight-500"
+              href="https://builds.jabref.org/main/"
+              >Development Builds</a
+            >
+          </small>
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import { detectOs, isLinux, isMac, isWindows } from '~/composables/detectOs'
+
+const os = detectOs()
+let osSuffix = ''
+if (os) {
+  osSuffix =
+    {
+      windows: 'win',
+      mac: 'mac',
+      linux: 'linux',
+    }[os] || ''
+}
+const downloadUrl = 'https://downloads.jabref.org/' + osSuffix
+</script>

components/LandingPageFeatures.vue

@@ -0,0 +1,43 @@
+<template>
+  <section id="features">
+    <ContentList
+      v-slot="{ list }"
+      path="/_landingpagefeatures"
+    >
+      <div
+        v-for="(feature, index) in list"
+        :key="feature._path"
+        class="container mx-auto sm:px-4 lg:pb-16 mt-4 max-w-screen-xl"
+      >
+        <div class="flex flex-wrap">
+          <div
+            class="lg:w-3/5 sm:w-1/2"
+            :class="{
+              'pl-3 pr-3 md:pr-12': !(index % 2),
+              'pr-4 pl-3 md:pl-12 md:order-last': index % 2,
+            }"
+          >
+            <hr />
+            <h2 class="text-3xl mt-5">{{ feature.title }}</h2>
+            <div class="prose text-xl font-light">
+              <ContentRenderer :value="feature"></ContentRenderer>
+            </div>
+          </div>
+          <div
+            class="lg:w-2/5 sm:w-1/2 pt-3 flex items-center justify-center"
+            :class="{
+              'pr-3 pl-4 md:pl-12': !(index % 2),
+              'pr-4 pl-3 md:pr-12': index % 2,
+            }"
+          >
+            <img
+              class="max-w-full h-auto"
+              :src="`/assets/${feature.img}`"
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+    </ContentList>
+  </section>
+</template>

components/LandingPageFooter.vue

@@ -0,0 +1,204 @@
+<template>
+  <footer class="pt-12">
+    <div
+      class="container mx-auto sm:px-4 py-4 md:py-8 border-t border-gray-200 flex flex-wrap max-w-screen-lg"
+    >
+      <div class="md:w-1/5 pr-4 pl-4 md:mx-1/6">
+        <JabrefLogo class="max-w-full h-auto" />
+      </div>
+      <div class="md:w-1/5 pr-4 pl-4 md:mx-1/6">
+        <ul class="flex flex-wrap list-none pl-0 mb-0 flex-col">
+          <li class="py-2 px-4">
+            <strong class="text-gray-700">Install</strong>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://downloads.jabref.org/"
+            >
+              Desktop apps
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://docs.jabref.org/collect/jabref-browser-extension"
+            >
+              Browser extensions
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://builds.jabref.org/main/"
+            >
+              Development build
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://github.com/JabRef/jabref/blob/main/CHANGELOG.md"
+            >
+              Change Log
+            </t-nuxtlink>
+          </li>
+        </ul>
+      </div>
+      <div class="md:w-1/5 pr-4 pl-4">
+        <ul class="flex flex-wrap list-none pl-0 mb-0 flex-col">
+          <li class="py-2 px-4">
+            <strong class="text-gray-700">Links</strong>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://docs.jabref.org/advanced/resources"
+            >
+              Resources
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="http://java.by-comparison.com/"
+            >
+              Java by Comparison
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              @click="showLegalNotices = true"
+            >
+              Legal Notices
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              @click="showPrivacyPolicy = true"
+            >
+              Privacy Policy
+            </t-nuxtlink>
+          </li>
+        </ul>
+      </div>
+      <div class="md:w-1/5 pr-4 pl-4">
+        <ul class="flex flex-wrap list-none pl-0 mb-0 flex-col">
+          <li class="py-2 px-4">
+            <strong class="text-gray-700">Contribute</strong>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://github.com/JabRef/jabref/wiki/Donations"
+            >
+              Donation
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://docs.jabref.org/faqcontributing/how-to-translate-the-ui"
+            >
+              Translation
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://github.com/JabRef/jabref"
+            >
+              GitHub
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://devdocs.jabref.org/"
+            >
+              Developer Docs
+            </t-nuxtlink>
+          </li>
+        </ul>
+      </div>
+
+      <div class="md:w-1/5 pr-4 pl-4">
+        <ul class="flex flex-wrap list-none pl-0 mb-0 flex-col">
+          <li class="py-2 px-4">
+            <strong class="text-gray-700">Help & Contact</strong>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://docs.jabref.org/"
+            >
+              Documentation
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="http://discourse.jabref.org/"
+              >Forum</t-nuxtlink
+            >
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://twitter.com/JabRef_org"
+            >
+              Twitter
+            </t-nuxtlink>
+          </li>
+          <li class="py-1">
+            <t-nuxtlink
+              class="px-4 no-underline text-sm text-gray-800 hover:text-highlight-800"
+              href="https://github.com/JabRef/jabref/issues"
+            >
+              Report an issue
+            </t-nuxtlink>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <ModalDialog
+      v-model="showLegalNotices"
+      header="Impressum"
+    >
+      <ContentRenderer
+        :value="legalNotices"
+        class="prose overflow-auto max-h-96"
+      />
+    </ModalDialog>
+    <ModalDialog
+      v-model="showPrivacyPolicy"
+      header="Datenschutzerklärung"
+    >
+      <ContentRenderer
+        :value="privacyPolicy"
+        class="prose overflow-auto max-h-96"
+      />
+    </ModalDialog>
+  </footer>
+</template>
+<script setup lang="ts">
+import { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const showLegalNotices = ref(false)
+const legalNotices = ref<ParsedContent | null>(null)
+const showPrivacyPolicy = ref(false)
+const privacyPolicy = ref<ParsedContent | null>(null)
+
+watch(showLegalNotices, async (shouldShowLegalNotices) => {
+  if (shouldShowLegalNotices) {
+    legalNotices.value = await queryContent('/legalnotices').findOne()
+  }
+})
+watch(showPrivacyPolicy, async (shouldShowPrivacyPolicy) => {
+  if (shouldShowPrivacyPolicy) {
+    privacyPolicy.value = await queryContent('/privacypolicy').findOne()
+  }
+})
+</script>